Salut tout le monde,
 
Je profite des vacances pour faire un petit peu de XHTML CSS et remodifier le design de mon site.
 
J'avais trouvé un design sur un site opensource en HTML 4 puis je l'ai passé en XHTML 1.1 en apportant qq modifications mais celui ci est basé sur des tables donc j'aimerai quitter le coté obscure et lui faire avaler des div.
 
Cependant, j'ai du mal sur une partie : celle où il y a les liens à droite et l'arbo à gauche.
 
Lien du site original : http://blog.jeanb-net.com
Lien d'un premier essaie où je modifie à partir de l'original : http://blog2.jeanb-net.com
Lien où je recrée tout from scratch : http://blog3.jeanb-net.com
 
J'aimerai savoir d'abord comment faire pour refaire le haut. car ya rien à faire, ça revient à la ligne, c'est pas beau, ça part de traviole etc.
Si qqn a des idées      
 
Je@nb

hum... sachant que, de base, le site original s'affiche de 3 façons différentes selon IE, Moz ou opéra, c'est quelle version que tu voudrais obtenir?

Pour ton arborescence tu peux styler une liste, c'est très efficace, tu as un tutoriel an anglais là :
http://www.alistapart.com/stories/taminglists/
 
Puisque tu vfais une mise en page 3 colonnes avec pied de page, voici un exemple :
 
http://www.pixy.cz/blogg/clanky/css-3col-layout/

 
Celle qui s'affiche sous IE dans la version originale.

 
Merci, v voir ça  

Bon, ça avance là, mais je n'arrive pas à horizontaliser la liste.
 
Voici le contenu du CSS pour la liste :

 
Et le XHTML correspondant :
 

 
Qqn peut me dire où c que ça cloche ??? car ça fait pas mal de temps que je cherche et j'avoue que je trouve pas
 
PS : sous mozzilla c déjà mieux que sous IE.

Tes <a> n'ont pas à être des éléments de type "block". On ne met pas un "inline" dans un "block".

Merci c déjà mieux mais sur IE ça n'a rien fait et sur mozz ça chie pas mal encore ta pas une idée ?

Heu... je sais pas... c'est où qu'on teste ?

http://blog3.jeanb-net.com/header.php  

Non c'est IE qui chie avec son modèle de boîte foireux.
 
IE inclu le padding dans la hauteur et la largeur calculée.
 
Avec Mozilla il faut faire descendre de 5px les <li>. Donc ajoute un padding haut de 5px à <ul>
 
Pour IE, tu devras sans doute appliquer ce hack : http://www.tantek.com/CSS/Examples/boxmodelhack.html

Bon, c'est déjà mieux sous mozz, en mettant le padding de 5 au <ul> ça fait rien mais au div ça marche mais uniquement sous mozz car sur IE ça me fait un espace et les boites sont toujours à la verticale. En tt k merci  

Put1 oué rien que en virant le <?='<?xml version="1.0"?>' ?>
ça marche    

Oui mais attention, pour IE 5.x tu auras sans doute des problèmes, donc tu devras appliquer le hack...

 
ok, v voir ça,    

Bon, hier soir j'ai fait le menu gauche, ça a pas trop mal marché mais là c vraiment la merde J'arrive pas a avoir qqch de correct.
Qqn a une idée pourquoi ça chie aussi bien sur IE que sur mozz mais pas de la même façon. Et j'aimerai aussi que le menu à droite fasse la même taille que le bloc central, qqn a une idée ?
 
http://blog3.jeanb-net.com/header.php
http://blog3.jeanb-net.com/style.css pour le CSS
 
Original sur http://blog.jeanb-net.com/

Quel menu à droite ?  
 
Je vois pas de soucis avec Moz...
 
Tu t'es inspiré de ça ?
 
http://glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html

 
 
Bon g avancé pour qu'on voit mieux avec du contenu
 
http://blog3.jeanb-net.com/header.php
 
Alors g réglé un peu le prob mais ça marche que en 1280x1024      
Je ne c pas comment faire pour que ça marche.
Je me suis pas inspiré de ça car je voudrais éviter du absolute.
 
Comment faire pour que le div central ne vire pas en dessous mais se rapetisse qd on rétrecis la fenetre ?
Sinon comment faire pour que la tribune descende a la même hauteur que le central et inversement si c la page centrale qui est < à la tribune ?

 
Ça marche aussi en 1280x960

Ça ?
 
----
 
<div id="header">
    <!-- Le blog de Jeanb -->
</div>
 
<div id="page">
    <div id="menu1"><!-- des liens là --></div>
    <div id="menu2"><!-- des liens ici aussi --></div>
 
    <div id="text">
        <!-- plein de texte ici parce que ça fait bien -->
    </div>
</div>
 
----
 
Après, tu fais un truc du genre :
 
----
 
#menu1 {
    float: left;
    width: 12em;
}
 
#menu2 {
    float: right;
    width: 12em;
}
 
#text {
    margin: 0 13em 0 13em;
}
 
----

 
oué et en 1600 aussi    

 
Ben j'avais essayé ça mais ça chiait pas mal bcp
V retester, sinon em c koi ? j'utilise toujours les pixels moi

Em, c'est une unité de mesure, comme les pixels ou les %, sauf que c'est proportionnel à la taille de la police (1em == la largeur d'un "m" ), donc si on grossit le texte, les menus s'élargissent aussi. (ça évite de foutre tout un design en l'air et les grosses résolutions aiment bien les font en "em" ou en %)
 
Enfin ça devrait fonctionner, je m'en sers assez souvent, je sais pas pourquoi j'aime pas le position: absolute; ou les float: left; float: left; float: left;  

 
Ok je reteste ça    

En effet ça marche mais uniquement sous mozz : http://blog3.jeanb-net.com/header2.php
 
Sous IE il se chie dessus    

 
Copie-colle ça dans un fichier à part, tu verras que ça passe très bien avec IE.

En effet ça marche bien
 
Pourtant je ne vois pas koi modifier sur page, ça m'a l'air correct  

T'as tout ce qu'il te faut pour trouver là, au pire t'as une base pour refaire comme il faut

  Après analyse minutieuse g trouvé      
Fallait virer width: 100% des div interne a la partie centrale et ça marche      
Car en fait 100% + padding + margin = + 100% --> déborde à droite.
Maintenant c parfait

Juste un dernier problème : faire que la hauteur de la tribune fasse la même taille que le texte central et inversement ou trouver un moyen pour que les bordures marchent dans n'importe quelle solution

Tu colles le <div>de la tribune et celui du texte dans un seul bloc et tu y vas à coup de height: 100%