Partage

Problème header

vv6
13 février 2018 à 14:48:35

Bonjour, je débute dans le html et je galère à mettre une image et un nav dans un header, voici les codes html et css.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style1.css"/>
<meta content="width=device-width, user-scalable=yes initial-scale=1.0" name="viewport" />

<style>
abbr,article,aside,audio,canvas,datalist,details,figure,dialog,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video {display:block;}
</style>

<title>Demande1</title>


</head>

<body>

  <div id="conteneur">

      <div class="row">
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
      </div>

<header>

<img src="image/logo.jpg" alt="logo" id="logo">

  <nav>
    <ul>
    <li><a href="#1" class="cellules">ACCUEIL</a></li>
    <li><a href="#2" class="cellules">EXPOSITIONS</a></li>
    <li><a href="#3" class="cellules">PUBLICATIONS</a></li>
    <li><a href="#4" class="cellules">AGENDA</a></li>
    <li><a href="#5" class="cellules_d">BLOG</a></li>
      </ul>
    </nav>

</header>


  </div>

</body>
</html>

body, html{
  height: 100%;
  min-height: 100%;

}
body{
  width: 960px;
  margin: 0 auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

.row {
    width : 960px;
    margin : 10px auto;
}
.row > div {
    float : left;
    margin : 0 10px;
  background-color:red;
  height:1000px;
  opacity:0.2;
}

.w-1 { width : 60px; }
.w-2 { width : 140px; }
.w-3 { width : 220px; }
.w-4 { width : 300px; }
.w-5 { width : 380px; }
.w-6 { width : 460px; }
.w-7 { width : 540px; }
.w-8 { width : 620px; }
.w-9 { width : 700px; }
.w-10 { width : 780px; }
.w-11 { width : 860px; }
.w-12 { width : 940px; }

header{

height: 300px;
width: 960px;
  position:relative;
background-color: yellow;
}

#logo{
  
  width: 240px;
  height: 150px;
  position:absolute;
}

nav{
  margin:240px 530px;
  position:absolute;   
}
nav ul li{
  float: left;
}
nav ul{
  list-style-type: none;
  padding: 10px 0;
  margin: 20px;
  width: 600px;
  height: 50px;
}
.cellules{
    text-align: center;
  line-height: 25px;
  padding:0 10px;
  display: block;
  color:#000;
  font-size:12px;
     border-right: 2px solid #000;
  text-decoration: none;
}
.cellules_d{
    text-align: center;
  line-height: 25px;
  padding:0 10px;
  display: block;
  font-size:12px;
  color:#000;
  text-decoration: none;
}


.clear{
  clear: both;
}

l'idée c'est d'avoir des colonnes en fond :12 colonnes pour 960px de largeur de site avec une marge de 10px entre chaque, mais je constate que les colonnes ne passent pas au dessus du header et que l'image n'est pas à sa place, qui devrait être dans le header.

merci pour vos réponses.


Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
SantaaClauss
14 février 2018 à 11:01:43

vv6 a écrit:

Bonjour, je débute dans le html et je galère à mettre une image et un nav dans un header, voici les codes html et css.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style1.css"/>
<meta content="width=device-width, user-scalable=yes initial-scale=1.0" name="viewport" />

<style>
abbr,article,aside,audio,canvas,datalist,details,figure,dialog,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video {display:block;}
</style>

<title>Demande1</title>


</head>

<body>

  <div id="conteneur">

      <div class="row">
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
    <div class="w-1">&nbsp</div>
      </div>

<header>

<img src="image/logo.jpg" alt="logo" id="logo">

  <nav>
    <ul>
    <li><a href="#1" class="cellules">ACCUEIL</a></li>
    <li><a href="#2" class="cellules">EXPOSITIONS</a></li>
    <li><a href="#3" class="cellules">PUBLICATIONS</a></li>
    <li><a href="#4" class="cellules">AGENDA</a></li>
    <li><a href="#5" class="cellules_d">BLOG</a></li>
      </ul>
    </nav>

</header>


  </div>

</body>
</html>

body, html{
  height: 100%;
  min-height: 100%;

}
body{
  width: 960px;
  margin: 0 auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

.row {
    width : 960px;
    margin : 10px auto;
}
.row > div {
    float : left;
    margin : 0 10px;
  background-color:red;
  height:1000px;
  opacity:0.2;
}

.w-1 { width : 60px; }
.w-2 { width : 140px; }
.w-3 { width : 220px; }
.w-4 { width : 300px; }
.w-5 { width : 380px; }
.w-6 { width : 460px; }
.w-7 { width : 540px; }
.w-8 { width : 620px; }
.w-9 { width : 700px; }
.w-10 { width : 780px; }
.w-11 { width : 860px; }
.w-12 { width : 940px; }

header{

height: 300px;
width: 960px;
  position:relative;
background-color: yellow;
}

#logo{
  
  width: 240px;
  height: 150px;
  position:absolute;
}

nav{
  margin:240px 530px;
  position:absolute;   
}
nav ul li{
  float: left;
}
nav ul{
  list-style-type: none;
  padding: 10px 0;
  margin: 20px;
  width: 600px;
  height: 50px;
}
.cellules{
    text-align: center;
  line-height: 25px;
  padding:0 10px;
  display: block;
  color:#000;
  font-size:12px;
     border-right: 2px solid #000;
  text-decoration: none;
}
.cellules_d{
    text-align: center;
  line-height: 25px;
  padding:0 10px;
  display: block;
  font-size:12px;
  color:#000;
  text-decoration: none;
}


.clear{
  clear: both;
}

l'idée c'est d'avoir des colonnes en fond :12 colonnes pour 960px de largeur de site avec une marge de 10px entre chaque, mais je constate que les colonnes ne passent pas au dessus du header et que l'image n'est pas à sa place, qui devrait être dans le header.

merci pour vos réponses.

utilise <table>pour tes colonnes

vv6
14 février 2018 à 19:07:52

oh super pour la réponse, je vais essayer et je vous envois la suite.

Problème header

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur ●
  • Markdown