28182 sujets

CSS et mise en forme, CSS3

[Resolu] Site sans tableaux : possible mais pas facile

Pages :
Voilà mon problème, bourrée de bonnes intentions je me dis que je vais faire un site valide, sans tableaux et qui passe sur tout les navigateurs. Mais voilà, après des heures et des heures de recherches infructueuses sur le net je commance à me demander si c'est réellement possible.
Voici le code ma page :

...
 <body>
  <div id="header">...</div>
  <div id="menu">...</div>
  <div id="content">...</div>
 </body>
...

Et celui de la css qui va avec :

html {
 background: #aaaaaa;
}
body {
 width: 480px;
 height: 100%;
 margin: 0px;
 margin-left: auto;
 margin-right: auto;
 border-left: 1px solid black;
 border-right: 1px solid black;
}
#header {
}
#menu {
 float: left;
 width: 160px;
 background: #eeeeee;
}
#content {
 margin-left: 160px;
 background: #ffffff;
}


J'ai deux problèmes :
1. Il ya a un bug bizarre sous IE : le contenu de "content" est décalé partout ou il y a le menu à coté.
2. Je voudrais que mes deux colonnes remplissent la page en hauteur.

Ne me donner pas les liens vers l'article expliquant comment donner un comportement de cellule étitable car l'astuce ne marche pas dans mon cas : je ne peux pas dire quelle colonne sera la plus longue. Et pas non plus de height: 100% car cela donne une page plus longue que 100% à cause du div d'entête.

Voilà. Si quelqu'un a une solution miracle qui marche pour IE et Mozilla Smiley rolleyes

Merci !
Bonjour, et bienvenue à toi sur ce forum,

Comme c'est ton premier post sur le forum je t'invite à passer lire ce post pour bien vérifier que tu as suivis la bonne démarche :
Méthodologie à lire avant de poster dans ce salon

Il y a également une bonne base avec les tutoriaux d'Alsacréations et beaucoup de ressources ici qui permettent beaucoup de choses sans tableaux. Smiley cligne

N'hésites pas à donner plus de code, et même un lien vers une page en ligne qui nous donnera tout le contexte de ta page.

Si tu le souhaites tu peux aussi passer au bar du forum pour les présentations.
C'est un problème récurrent sur ce forum, le multi colonage avec l'utilisation des float...

float: left; sur menu et contenu, et ajout d'un élément qui suit ton contenu et ton menu et application sur ce dernier de clear: both;

Idéalement, un pied de page est très adapté, mais si tu n'en a pas, tu peux utiliser un <hr /> avec le clear quitte à le masquer ensuite.

La solution est dans le forum, et plus d'une fois Smiley cligne
J'ai lu la méthodologie avant de poster, j'ai fait des recherches sur le forum et j'ai lu tous les articles pourvant avoir un rapport sur alsacreations et openweb.

Je vais peut-être paraitre un peu brutale mais les sites sans tableaux sont tous soit ultra simples soit remplis de bidouilles affreuses pour palier aux lacunes et aux bugs du positionnement par css (style mettre des images en fond pour faire croire à des colonnes).

Comme il ya beaucoup de pationnés doués ici j'espère que quelqu'un saura me convaincre que j'ai un mauvais apriori et que tout est possible grâce aux css, même le positionnement que je bataille à mettre en place Smiley cligne
ElMoustiko a écrit :

float: left; sur menu et contenu


Edit : Oui mais non. Car dans ce cas sous Mozilla les boites ne sont plus "dans" body et les bordures qui bordent body ne descendront plus jusqu'en bas... Et mettre le body en float rendrait impossible le centrage automatique.

Mon problème n'ai pas si facile, crois moi je cherche depuis des semaines.

J'ai parlé trop vite. Elles sont encore dans le body mais plus dans les autres divs. Mais ça, ça ne me dérange ici pas en fait.
Point 1. résolu.
Modifié le 28 Dec 2004 - 13:20
Poire a écrit :
height: 80%; Smiley rolleyes

avec le header en height: 20 ou 15% ?


Oui ça simplifirait tout je sais, mais dans le header je compte mettre une image... donc de hauteur fixe Smiley ohwell
Le fait de passer les deux en float a résolu le pb du décalage étrange. Mais je ne vois pas à quoi sert le clear: both; ???
Je vais continuer à lire destrucs pour comprendre l'utilité d'un clear.

Je sais toujours pas comment dire à mes divs de prendre toute la hauteur restante Smiley decu
littlesam a écrit :


Oui ça simplifirait tout je sais, mais dans le header je compte mettre une image... donc de hauteur fixe Smiley ohwell

Beh euh alors comme ça direct à chaud sans aucun test

pour ton header
height: 20px;

pour les colonnes
height: 100%;
padding: 20px; /* ou margin: 20px; */

et ça devrait le faire peut être...

une page en ligne ça aiderait Smiley smile
littlesam a écrit :
Le fait de passer les deux en float a résolu le pb du décalage étrange. Mais je ne vois pas à quoi sert le clear: both; ???
Je vais continuer à lire destrucs pour comprendre l'utilité d'un clear.

Je sais toujours pas comment dire à mes divs de prendre toute la hauteur restante Smiley decu

ça sert à pouvoir afficher sur la même ligne qu'un bloc en float
Poire a écrit :

ça sert à pouvoir afficher sur la même ligne qu'un bloc en float


Ah oui, ça y ai j'ai compris ! Merci Smiley confused
Poire a écrit :

pour ton header
height: 20px;

pour les colonnes
height: 100%;
padding: 20px; /* ou margin: 20px; */


Euh c'est pire... je me retrouve avec 100% + 40px au total Smiley sweatdrop

La page en question (dsl pour les couleurs de test à vomir)
http://schizolog.free.fr/alsacreations/
Modifié le 28 Dec 2004 - 13:40
Le fait d'avoir ajouté un pied de page ne résouds pas trop le pb induit par l'impossiblité de prévoir quelle colonne est la plus grande... soit j'ai la couleur du menu sous le contenu soit j'ai la couleur du contenu sous le menu... non ?
Un petit test css:

*{
	margin:0;
	padding:0;
}
body {
text-align:center;
}
#conteneur{
width: 480px;
 margin:0 auto;
 border-left: 1px solid black;
 border-right: 1px solid black;
 text-align:left;
}
h1#header {
height:100px;
line-height:100px;
text-align:center;
}

#menu {
 float: left;
 width: 160px;
 background: #eeeeee;

}

#content {
 margin-left: 170px;
 background: #ffffff;
}
p#copyright{
	clear:both;
	text-align:center;
	background-color:#eee;
}

et html:

<body>
<div id="conteneur">
<h1 id="header">Mon titre de page</h2>
<ul id="menu">
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
<div id="content">
<h2>Un titre de second niveau</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut ligula. Quisque et lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas neque turpis, sodales id, vulputate vel, commodo eu, dui. Sed ut metus. Praesent pulvinar odio id neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis elit mauris, lobortis facilisis, suscipit eget, sagittis vel, elit. Pellentesque diam nisl, fringilla non, ullamcorper id, gravida ultricies, nulla. Proin imperdiet cursus mauris. Praesent purus. Ut eget leo non odio venenatis venenatis. Nam tempor euismod wisi. Vivamus sagittis orci. Cras pulvinar neque id dui. Donec consectetuer felis quis turpis. In vulputate dolor nec wisi.
</p>
<p>Maecenas et pede id nunc facilisis ornare. Nulla sit amet ante vel urna laoreet aliquet. Vestibulum dignissim ultricies nibh. Nam velit nibh, pellentesque eget, pellentesque id, dapibus posuere, dolor. Vestibulum non mauris. Donec aliquet rutrum nisl. Integer dapibus metus vitae elit. Integer condimentum sapien nec lacus. Sed rutrum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. Curabitur ornare.
</p>
</div>
<p id="copyright"><a href="#">Mentions légales</a></p>
</div>
</body>


Les explications devraient être dans ce post:
http://forum.alsacreations.com/topic.php?fid=4&tid=576&p=2#p6160
arf
pour un design aussi simple je ne suis pas sur que de tout mettre en float soit une bonne idée...

pour le corp tu peux mettre des margin-top et margin-bottom aux taille de tes header/footer

pour le header tu lui fous un height fixe en position absolue et un top à 0px

pour ton menu tu le fous en position absolue avec une largeur fixe un left à 0px et une margin-top et margin-bottom idem que pour contenu

ainsi de suite et ça devrait rouler
littlesam a écrit :
Le fait d'avoir ajouté un pied de page ne résouds pas trop le pb induit par l'impossiblité de prévoir quelle colonne est la plus grande... soit j'ai la couleur du menu sous le contenu soit j'ai la couleur du contenu sous le menu... non ?

Dans ce cas une image de fonds répétée sur toute la hauteur devrait avoir l'effet escompté. Smiley cligne
Poire : avec des positions absolue mon site sera collé à gauche et plus centré.

Igor : mais ça n'étirerait toujours pas le site sur toute la hauteur de la page...

Petite remarque en passant : le forum se retrouve en ce moment avec une largeur d'au moins 5 fois mon écran... c'est le genre de truc qui pose un léger pb navigabilité Smiley ohwell )
Modifié le 28 Dec 2004 - 13:58
@littlesam, tu prend pour acquis quelques une de tes lacunes, non la mise en page sans tableau n'est pas un nid à bidouille ou un nid à simplicité, c'est juste que tu ne connais pas forcément les techniques, nous sommes là pour te les expliquer, mais ne crois tu pas que les tableaux en eux mêmes sont la plus grosse des bidouilles ??? moi je crois bien que si, c'est juste que tu y es habitué et que c'est plus naturel pour toi, mais c'est bien plus bidouillé au final.

Pour ton problème, j'ai oublié de parler du conteneur, en fait le clear: both; sur le pied de page permettra de "regonfler" le conteneur en faisant passer le pied de page sous tes colones, et en utilisant un background adapté sur ton conteneur, tu auras l'effet d'egalité des colones.

Encore une fois, ce type de problèmes à été maintes fois évoqué sur ce forum, si tu recherche colones, pied de page, ou ce genre de chose tu trouveras sans problème.

Aussi, ce n'est pas parceque tu as lu pas mal d'articles, de tutos ou d'autre choses que tu maitrises les techniques évoquées dans ces articles, apprendre la mise en page par CSS ne se fait pas du jour au lendemain, mais ce forum sera parfait pour accélérer les choses.
Modifié le 28 Dec 2004 - 14:03
Pages :
Sujet clos
Aller à