Bonjour,
J'ai suivi le splendide tutorial permettant de créer soi-même son petit site en CSS/HTML.
Je suis arrivé à un résultat qui me convient, mais j'ai quelques petits soucis.
Premier problème : j'ai un div header qui contient une image de fond. Celle-ci est décalée d'une dizaine de pixel vers le bas sous Firefox mais sous IE elle est correctement insérée dans le div. Je ne comprends pas où ça coince...
Deuxième problème : j'ai un autre div de menu sur la gauche de ma page. Le menu est une liste tout ce qu'il y a de plus bête (ul et li) mais elle ne se place pas correctement !! Elle est en effet centrée dans le div et non pas placée sur la gauche, ce qui fait que les éléments de menu trop longs se retrouvent sur 2 lignes, ce qui est moche...
Ci-joint le code de ma page et la CSS (enfin les parties importantes).
La feuille de style :
Désolé du pavé
et si quelqu'un a une idée je suis preneur !
Merci d'avance
Edit : je mets le lien pour visualiser le bazar : www.garfunk.fr/test.php
Modifié par garfunk (29 Nov 2008 - 12:38)
J'ai suivi le splendide tutorial permettant de créer soi-même son petit site en CSS/HTML.
Je suis arrivé à un résultat qui me convient, mais j'ai quelques petits soucis.
Premier problème : j'ai un div header qui contient une image de fond. Celle-ci est décalée d'une dizaine de pixel vers le bas sous Firefox mais sous IE elle est correctement insérée dans le div. Je ne comprends pas où ça coince...
Deuxième problème : j'ai un autre div de menu sur la gauche de ma page. Le menu est une liste tout ce qu'il y a de plus bête (ul et li) mais elle ne se place pas correctement !! Elle est en effet centrée dans le div et non pas placée sur la gauche, ce qui fait que les éléments de menu trop longs se retrouvent sur 2 lignes, ce qui est moche...
Ci-joint le code de ma page et la CSS (enfin les parties importantes).
<body>
<div id = "global">
<div id = "header">
<h1 class = "title"><a href = "test.php" title = "GUILDO Exode">GUILDO</a></h1>
</div>
<div id = "connection">
Vous n'êtes pas connecté : <a href = "#">se connecter</a> ou <a href = "#">s'inscrire</a>.
</div>
<div id = "navigation">
<ul class = "menu">
<li><a href = "#">Gérer mon compte</a></li>
<li><a href = "#">Mes personnages</a></li>
<li><a href = "#">Récapitulatif</a></li>
<li><a href = "#">Artisanat</a></li>
<li><a href = "#">Coffre commun</a></li>
<li><a href = "#">Expéditions</a></li>
</ul>
</div>
<div id = "corps">
<h2>Bienvenue sur GUILDO</h2>
<p>Elitr fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, at velit aliquip denique cum.</p>
<h3>Gérez vos expéditions !</h3>
<p>Cum te diam persecuti. Iudico partiendo concludaturque pro ex, no quas natum volumus est, vis et dicunt scripta.</p>
<hr />
<h3>Mise à niveau automatique des personnages !</h3>
<p>Cum te diam persecuti. Iudico partiendo concludaturque pro ex, no quas natum volumus est</p>
</div>
<div id = "footer">
<p><a href = "#">Forum</a> - <a href = "#">Admin</a></p>
</div>
<div class = "cleaner"></div>
</div>
</body>La feuille de style :
body {
margin: 10px 0 ;
padding: 0;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #ffeba7 ;
}
#global {
/*conteneur global de la page*/
width: 770px ;
margin: 0 auto ;
text-align: left ;
background: #fff6e9;
border: 1px solid #7d5827 ;
}
#header {
/*le header*/
margin: 0;
padding: 0;
height: 200px;
background: url(images/header.jpg) no-repeat left top;
}
#navigation {
/*le menu*/
float: left;
text-align: left;
padding: 20px 0px 0px 0px;
width: 170px;
background: #fff6e9;
}
#connection {
/*le bandeau de connexion*/
float: left;
text-align: right;
width: 740px;
height: 25px;
padding: 5px 30px 0px 0px ;
background: #fff6e9;
}
#corps {
/*le corps de la page*/
padding: 15px 30px 15px 30px ;
width: 540px;
float: left;
background: #fff6e9;
}
#footer {
/*le footer*/
float: left;
padding : 0;
height: 50px;
padding: 10px 0 0 0;
width: 770px;
/*background: #D2A66C ;*/
background: url(images/footer.jpg) no-repeat;
text-align: center;
}
.cleaner {
/* permet d'aligner le menu, le bandeau de connexion et le corps */
clear:both;
font-size:1px;
line-height:1px;
}
.menu li{
font: 13px "Trebuchet MS", helvetica, sans-serif ;
list-style: none;
margin: 10px 0 5px 10px;
padding: 0 0 0 15px;
background: url(images/fleche.gif) no-repeat left;
vertical-align: top;
}
Désolé du pavé
et si quelqu'un a une idée je suis preneur !Merci d'avance
Edit : je mets le lien pour visualiser le bazar : www.garfunk.fr/test.php
Modifié par garfunk (29 Nov 2008 - 12:38)
