Tout d’abord, une image pour illustrer mes problèmes : 
Alors tout d’abord, comment faire pour que les tabs de la partie haute de mon site soit placées correctement. Il y a pleins de sites qui proposent des solutions différentes et je n’arrive pas à faire quelque chose de correcte.
Ensuite, comment faire pour que la partie gauche arrive jusqu’en bas de la page.
Pour les autres questions, on verra plus tard.
Est ce que tu pourrais mettre le code CSS de la page : ce sera plus simple pour répondre.
concernant la partie gauche, c’est impossible à faire correctement pour ie.
pour d’autres navigateurs, un simple “top:0; bottom:0;” fonctionne.
une solution est de mettre cette zone en arrière plan (sous le bandeau supérieur et le pieds de page), sur toute la hauteur (“height:100%; margin:0; paddig:0”), et tu mets les liens du menu dans une zone différente sans fonds, soit par dessus, soit à l’intérieur (avec une marge supérieure de la hauteur de ton bandeau)
concernant tes onglets, cela dépend de la manière dont tu les as placés. tu as peut-être mis une marge intérieure (padding) dans la zone contenant ton beandeau, ou quelque chose du genre.
mais c’est difficile à dire sans savoir quelle méthode tu as utilisé.
[quote name=‘Ismar’ date=’ 8 Mar 2005, 09:51’]Est ce que tu pourrais mettre le code CSS de la page : ce sera plus simple pour répondre.
[right][post=“339154”]<{POST_SNAPBACK}>[/post][/right][/quote]
[quote]body {
background: #ECF5FF;
text-align: center;
margin: 0;
padding: 0;
border: 0;
}
#page {
width: 800px;
margin: auto;
background: White;
text-align: left;
}
p {
margin: 0px;
}
a {
text-decoration: none;
color: #FA8072;
}
a:hover {
color: #71A9FA;
}
ul {
margin: 0px;
}
hr {
margin: 0px;
visibility: hidden;
}
.zogzog {
clear: right;
}
/* TOP */
#top {
border: 1px solid #baccec;
margin: 0px;
height: 115px;
background: url(titre.png);
}
#top h1 {
border: 0;
padding: 10px 10px;
font-family: cursive;
font-weight: bolder;
color: White;
font-size: 26px;
}
#top #menu ul {
margin: 0;
padding: 0;
}
#top #menu li {
list-style: none;
margin: 0;
padding: 0 2px;
float: left;
text-align: center;
top: -1px;
}
#top #menu li a {
text-indent: 0px;
display: block;
width: 110px;
background: url(tab.png);
}
#top #menu li a:hover {
background: url(tab2.png);
}
/* SIDEBAR */
#sidebar {
margin: 0;
padding: 15px;
float: left;
width: 150px;
background-color: #FFF9D7;
}
#sidebar h1 {
margin: 0;
padding: 5px;
font-size: 20px;
font-weight: normal;
color: #FF9999;
text-align: center;
border-top: 1px solid #FF9999;
border-bottom: 1px solid #FF9999;
}
#sidebar h2 {
font-weight: normal;
font-size: 16px;
color: #006CD4;
}
#sidebar p {
font-size: 12px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
/* CONTENT */
#content {
float: left;
width: 548px;
margin-bottom: 15px;
}
#content .colonnes {
margin-left: 10px;
margin-right: 10px;
padding: 10px;
float: left;
width: 230px;
border: 1px solid #F1A99C;
background: #F7E6C5;
margin-bottom: 20px;
}
/* BOTTOM */
#bottom {
padding: 10px;
margin-top: 0px;
clear: both;
font-family: sans-serif;
font-size: 80%;
border-bottom: 1px solid #baccec;
border-top: 1px solid #baccec;
}[/quote]
Pour les tabs en haut je dirai que le soucis viens de la combinaison float:left et text-align:center.
Tel que c’est là tu centres tes éléments de liste dans la div parent (#menu), sans le textt-align ça doit passer à gauche. Le float:left ne doit d’ailleurs pas être interprêté, tu dois pouvoir l’enlever.
Pour mettre ta liste en bas essaye un vertical-align:bottom (pas sur de ça).
Pour la sidebar, tu peux mettre un height:100% pour que la div fasse toute la hauteur de la page (de même que la bande colorée).
le flaot:left permet de les aligner verticalement alors que le text-align permet de centrer le texte dans la balise li. Si je change quoi que ce soit, ca marche plus.
Pour le vertical-align:bottom ca ne marche pas non plus.
Pour le sidebar, j’ai bien sur essayé height: 100% mais ca ne change rien.
essaie de tout passer en “position:absolute”. c’est quand même plus propre, et au moins le height:100% fonctionnera.
mon avis personnel est que les float, c’est le mal. sauf quand c’est utilisé pour faire ce que c’est censé à faire (c’est à dire permettre à du texte de s’ajuster autour d’une image ou d’un bloc).
Tu utilises le float-left pour aligner verticalement ?
Soit je comprends pas de quel élément tu veux parler soit tu voulais dire horizontalement, dans ce cas pour aligner à l’horizontale une liste, tu peux utiliser :
display : inline
ou alors
display:inline-block
Si tu veux garder des liste en “block”.
Pour le sidebar, je vois pas trop pourquoi le height 100% ne fonctionne pas…peut-être à cause du float…
Je suis pas trop pour le position:absolute, pour la bonne et simple raison qu’en cas de changement de résolution ou de changement de la taille de la fenêtre tu risque d’avoir des choses pas très propres, même en utilisant des pourcentages.
Par contre je suis du même avis que rabban sur les float
c’est vrai que le positionnement absolu est dangereux. notamment quand on ne le maitrise pas totalement.
mais une fois qu’on a bien compris sont comportement, et qu’on fait abstraction du nom “absolu” qui induit en erreur vu que c’est en fait relatif (au bloc contenant positionné en absolute s’il existe, à la page sinon), c’est très puissant.
concernant le redimentionnement, je fais toujours en sorte que la page soit affichée correctement sur 650 pixels de coté: c’est très rare que quiconque essaie de voir une page en dessous de ça (sauf à vouloir afficher plusieurs fenetres en 800*600, mais je connais peu de personnes assez masochistes pour ça).
C’est bien beau tout vos absolute etc… mais ca ne m’avance pas trop. Je veux bien essayé si vous m’expliquer bien le pourquoi de comment.
Et pour le float: left, si vous me dites que c’est mal je veux bien l’enlever mais par quoi le remplacer ?
Moi tout ceux que je veux finalement, c’est de faire deux colonnes de tailles fixes. C’est si compliqué que ça ?
ben non, c’est pas compliqué.
pour ta barre latérale:
#sidebar {
margin: 0;
padding: 15 15 15 130; (heu… je me souviens plus de l’ordre exact. me smeble que c’est ça mais j’ai la flemme de vérifier)
position: absolute 0 0;
height:100%;
width: 150px;
background-color: #FFF9D7;
}
et hop, ça devrait marcher.
[quote name=‘Rabban’ date=’ 8 Mar 2005, 11:33’]ben non, c’est pas compliqué.
pour ta barre latérale:
#sidebar {
margin: 0;
padding: 15 15 15 130; (heu… je me souviens plus de l’ordre exact. me smeble que c’est ça mais j’ai la flemme de vérifier)
position: absolute 0 0;
height:100%;
width: 150px;
background-color: #FFF9D7;
}
et hop, ça devrait marcher.
[right][post=“339197”]<{POST_SNAPBACK}>[/post][/right][/quote]
Merci je vais tester ça mais tu pourrais me donner un peu plus d’explications ?
essaie et regarde ce que ça fait, déjà.
tu apprendras plus vite de cette manière qu’en lisant des explications.
concernant la marge intérieure, je mets 115 de plus en haut parce que la zone devrait logiquement prendre toute la page en hauteur, donc il faudrait que le texte ne soit pas sous le bandeau de titre.
le reste parle de lui même.
C’est bien beau tout vos absolute etc… mais ca ne m’avance pas trop. Je veux bien essayé si vous m’expliquer bien le pourquoi de comment.
Il n’y a rien qui marche, je comprend rien au fait qu’il soit si compliquer de faire deux colones l’une à coter de l’autre !
si j’étais mauvaise langue, je te demanderais si tu comprends pourquoi tu fais “float:left” sur ta colonne de droite.
Bon depuis tout ce temps j’ai réussi à pondre quelques choses de potable à l’aide de code XHTML+CSS gratuit provenant de design desk.
J’ai quand même un léger soucis avec un float qui ne se passe pas trop correctement.
Un dessin vaut mieux qu’un long discours :
Voilà, donc j’ai une fenetre en float:left qui s’affiche correctement, le texte de la div parente aussi d’ailleur mais par contre les border et les background eux s’en battent les coucouniettes de la div float:right et s’affiche au dessous de la div.
Comment corriger ça simplement ?