28173 sujets

CSS et mise en forme, CSS3

Mon premier site full css

Bonjour,

j'attaque mon premier site entièrement en css sans avoir vraiment suivi de cours je l'avoue.

J'ai un petit souci pour mettre du texte dans une div, voilà mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Montigny css</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="gauche"><img src="images/gauche.jpg" /></div>
<div id="contenu"><div id="menu">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="224" height="297">
    <param name="movie" value="menu_gauche_01.swf" />
    <param name="quality" value="high" />
    <embed src="menu_gauche_01.swf" width="224" height="297" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
  </object>
</div>
<div id="principal">[b]le problème vient de là[/b]</div>
</div>
<div id="header"><img src="images/header.jpg" /><div id="recherche"><img src="images/recherche.jpg" /></div>
</div>
<div id="gauchehaut"><img src="images/gauche_haut.jpg" /></div>
<div id="gauchebas"><img src="images/gauche_bas.jpg" /></div>
<div id="herbe"><img src="images/herbe.jpg" /></div>

</body>
</html>


J'ai mis en gras mon problème, ce qui est écrit à cet endroit ne s'affiche pas dans le navigateur Smiley ohwell

Voilà le css :
/* CSS Document */
body{
background:#5964F4 url(images/background.jpg) repeat-x fixed bottom;
margin: 0;
padding: 0;
text-align: center;
height:100%;
}

#header{
position:absolute;
left:0px;
}

#contenu{
background:#FFFFFF;
position:absolute;
top:0px;
left:92px;
width:684px;
height:100%;
}

#menu{
background-color:#e1e3fd;
margin-top:148px;
/*height:100%;*/
width:224px;
float:left
}

#principal{
background-color:#e1e3fd;
/*margin-top:148px;*/
margin-left:0px;
margin-right:3px;
width:451px;
float:right;
height:100%;
}

#recherche{
margin-left:600px;
margin-top:-25px;
}

#gauchehaut{
position:absolute;
left:0px;
top:148px;
}

#gauche{
background:url(images/gauche.jpg) repeat-y;
position:absolute;
height: 100%;
left:0px;
top:0px;
}

#gauchebas{
position:absolute;
left:0px;
bottom:89px;
}

#herbe{
position:absolute;
bottom:0px;
left:0px;
}


Je pense que ce que j'ai fais n'est pas trés clean, mais peut être allez vous pouvoir me guider Smiley lol
Salut et bienvenu sur le forum

A tu une page en ligne ? (Pour mieux voir ta mise en page avec image)

A première vue je dirais que ton texte disparais sous ton header il faut soit ne pas mettre de position absolue au header soit mettre un margin-top au #principal

A+
merci beaucoup pour l'aide et vous avez tout à fait raison, sauf que ça bouge ma page dans tous les sens et que j'ai rajouté pas mal de bloc entre temps.

En fait cette page n'est qu'une maquette, elle n'a pas besoin d'être fonctionnelle et le code dans cet état finalement me convient.

J'ai découvers le css c'est absolument génial et je vais aller m'acheter un livre sur le sujet afin d'assurer pour la création du site complet Smiley biggrin

Merci pour l'aide, j'ai parcouru le forum et en deux jours j'ai appris des centaines de choses sur le css Smiley smile
Sujet clos
Aller à