28221 sujets

CSS et mise en forme, CSS3

Pb de mise en page

Hello à tous,
je viens tout juste de m'inscrire sur le forum et j'ai déjà passé pas mal de temps sur les tutos (trés bien faits en passant) mais ça ne semble pas suffire car j'ai un soucis de mise en page...

J'ai un conteneur principal centré horizontalement dans la page avec une colonne de chaque coté qui doivent couvrir la totalité de la hauteur de la page, un header en trois parties, un contenu et un footer qui doit resté collé en bas si le contenu n'est pas suffisant...
Le pb viens du fait que je souhaite faire une mise en page précise dans la partie contenu avec divers contenus variables: Images, formulaires, textes etc etc...placé de facon précise. J'arrive donc à placer mes éléments avec position:absolute ou relative mais dans un cas comme dans l'autre le contenu passe sous le footer au mieux ou me fait un peu n'importe quoi sous Moz.

Ma question est donc simple: Comment faire une mise en page (trés précise) tout en conservant un flux d'affichage cohérent sans chevauchement...?!

J'ai mis un exemple en ligne pour que tout soit plus clair:
http://www.release911.com/test/test.htm
http://www.release911.com/test/style/styleTest.css

Je piétine assez gravement Smiley sweatdrop

Merci.
@++
Salut à toi !

Bon je vais tenter de te répondre, mais je crains que mon niveau ne suffise à règler tous t'es problèmes....

bref j'ai déjà vu une chose qui pse problème :
 #colonneGauche
{
	background-color:#6666CC;
	position:absolute;
	left:0px;
	width:21px;
	height:100%;
	min-height:100%;


Ensuite alors je sais pas si c'est vrais ce que j'avance mais je crois que mozilla aime bien les   entre les div (ou autre chose) qui sont vides, j'ai lu ça je ne sais plus trop où lors de mon apprentissage HTML et j'en est pris l'habitude... alors aux boss de ce forum de de confirmer ce que je dis...
Modifié le 14 Dec 2004 - 19:24
Salut, bienvenue à toi Tyler, si tu veux, tu peux aller te présenter dans le bar du forum Smiley smile

Pour ton truc, le plus simple, c'est d'utiliser les flottant, avec le positionement absolu c'est chaud (voire impossible).

Donc l'idée, c'est un conteneur qui contient l'ensemble de la page, header, colone1, colone2, contenu, pied de page.

Tes colones, je suppose que c'est des menus ou des trucs susceptible de recevoir du contenu (dans ta page de test, il n'y a rien, donc j'ai un doute, s'il n'y a rien c'est encore plus facile, tu confirmeras).

Donc, tu met colone1, contenu, en float: left et colone2 en float: right, et tu met clear: both; à ton pied de page. Voilà le tour est joué Smiley cligne , il ne reste plus qu'à utiliser une image de fond à ton conteneur contenant le fond des colones et du contenu et à la répéter verticalement ! Avec cette technique :
http://www.alistapart.com/articles/fauxcolumns/
Steve11 a écrit :

Ensuite alors je sais pas si c'est vrais ce que j'avance mais je crois que mozilla aime bien les   entre les div (ou autre chose) qui sont vides,

Je ne vois aucun intérêt à utiliser des balises vides :

<div>&nbsp;</div>

Ça ressemble plus à une "patch" et c'est une mauvaise pratique.

Steve11 a écrit :

...alors aux boss de ce forum de de confirmer ce que je dis...

Pour les boss, y va faloir attendre... Smiley cligne
Modifié le 14 Dec 2004 - 20:47
Ca avance Smiley biggrin
J'ai fait un peu de nettoyage et tout remis en float:
Un conteneur avec :
une colonne gauche en float:left
une colonne droite en float:right
un header en trois parties:
haut > float:left
milieu > float:left
bas > float:left
un footer en clear:both

Tout fonctionne bien sauf les colonnes qui ne s'affichent plus correctement, c'est apparement le seul point qui pose pb (a noter qu'elles seront vides c'est seulement de la déco) ?!
http://www.release911.com/test/test.htm

Merci
@++
Modifié le 14 Dec 2004 - 21:21
Ahh bah si tes colonnes sont vide, tu peux même faire plus simple Smiley lol

un conteneur qui contient tout, un élément contenu, et un pied de page. Sans rien en flottant.

Tu met juste des padding gauche et droit à ton "contenu" et tu met les images qui faut en background.

Sinon, y a pas mal de code un peu superflu dans ta page Smiley cligne et Div n'est pas la seule balise en html !!!!!!! Smiley lol

Sinon, j'avais pas compris ton histoire de float sur le header ... je vois pas bien pourquoi...
Allez un petit modèle pour te donner grosso modo l'exemple classique


<div id="conteneur">
  <h1 id="titre">Titre du site</h1>
  <div id="contenu">
    <h2>Titre de la page</h2>
    <p>Ton contenu</p>
    <p>Ton contenu</p>
  </div>
  <p id="footer">Ton pied de page</p>
</div>


Tout simplement, avec un balisage correct et minimaliste !
Avec la structure que je t'ai donné, ça marchera.

Pour les CSS, tu fais ton conteneur de la taille de ton image avec en background l'image répétée verticalement (la partie centrale), et ensuite tu met l'image du pied de page dans p#footer et celle du header dans h1#header.

C'est okay ?
Si c'est résolu, tu peux ajouter [résolu] en titre de sujet en éditant ton premier post Smiley lol

Sinon expliquer ce qui ne va pas Smiley lol
ElMoustiko > J'ai pas encore tout réglé, j'ai placé l'image en background avec les colonnes et du padding à droite et à gauche (j'y avais pas pensé ça devient grave !!!), je ne cloture donc pas le post tout de suite...Crevé ce soir je reprend demain Smiley smile
Merci pour ta patience
@++
Pas de problème !!
Ca sera peut être quelqu'un d'autre qui prendra le relais demain Smiley lol je sais pas si je serais là Smiley ravi
Sujet clos
Aller à