Problème header

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.

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;
}

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.