28112 sujets

CSS et mise en forme, CSS3

Besoin d'aide pour ma mise en page

Hello,

je suis une newbie sur le forum et j'aurais besoin d'aide pour ma mise en page parce que je m'en sors plus Smiley sweatdrop

En fait je ne sais pas bien quel style de positionnement je dois adopter parce que sous le header j'ai un menu à droite et du coté gauche j'ai une liste pour mon menu principal et en dessous un div pour le contenu.

Quand je mets tout ca en positionnement normal avec float:right pour le menu droit et float:left pour le menu principal et le conteneur j'obtiens un truc bizarre et j'arrive pas à positionner mes éléments comme je veux. Bref je m'embrouille alors que je pensais avoir compris le principe mais j'arrive pas à l'appliquer Smiley ohwell

Ah oui et il y'a aussi le fond du div "global" que j'arrive pas à faire s'adapter au contenu de la page mouarf

Si vous pouvez et voulez me donner un ptit coup de main c'est ici Smiley smile

Merci Smiley confused
bonjour,
peut nous afficher ton code css?

ce sera certainement plus facile pour regler le probleme
Modifié par ganou66 (26 Mar 2005 - 01:24)
ganou66 a écrit :

bonjour,
peut nous afficher ton code css?

ce sera certainement plus facile pour regler le probleme

Inutile de poster ton code CSS, on y a très bien accès avec le lien que tu nous as donné Smiley cligne

Il te faut comprendre que le positionnement absolu fait sortir l'élément auquel on l'applique hors du flux courant. Pour le type de mise en pages que tu cherches à réaliser, je n'en vois pas l'utilité, surtout que tu l'utilises en conjonction avec des flottants.

Je n'ai pas de modèle sous la main...
T'as de la veine, j'ai justement une mise en pages qui ressemble à ce que tu cherches à réaliser ! Smiley biggol 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 <head>
  <title>Template</title>
  <meta http-equiv="Content-Language" content="fr" />
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <style type="text/css" media="all">
[b][#blue]* {padding: 0; margin: 0;}[/#][/b]
[b][#green]html, body {
   height: 100%;
}[/#][/b]
body {
   background: #e1e1e1;
   [b][#red]text-align: center;[/#][/b]
}
#corps {
   background: #eaeaea;
   [b][#green]height: auto !important;
   height: 100%;
   min-height: 100%;[/#][/b]
   width: 700px;
   [b][#red]text-align: left;
   margin-left: auto;
   margin-right: auto;[/#][/b]
}
#entete {
   background: #a5c51b;
}
#gauche {
   float: left;
   width: 67%;
}
#gauche li {
   display: inline;
}
#droite {
   background: #e7e9df;
   margin-left: 67%;
}
#pieddepage {
   background: #a5c51b;
   clear: both;
}
ul li {
   list-style-type: none;
}
  </style>
 </head>
 <body>
  <div id="corps">
   <div id="entete"><h1>Titre</h1></div>
   <div id="gauche">
    <ul>
     <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>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
   <div id="droite">
    <h2>Menu</h2>
    <ul>
     <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>
   <div id="pieddepage"><p>Pied de page</p></div>
  </div>
 </body>
</html>

Ce n'est pas coutume de fournir du code « ready-to-use » alors je veux m'assurer que tu comprends bien ce qui se passe ici.

En bleu :
Le sélecteur universel est appliqué à tous les éléments pour mettre toutes les valeurs padding et margin à 0. Ceci évite de nombreuses différences d'affichage entre les navigateurs.
Pour en savoir plus : http://forum.alsacreations.com/topic.php?fid=14&tid=631

En vert :
Petit hack pour faire une mise en pages tout en hauteur. IE ne reconnaissant pas la propriété min-height et interprétant height comme si c'était min-height, on utilise une faiblesse de IE en ce qui concerne !important (ignoré par IE).
Pour en savoir plus : http://w3qc.org/docs/dix_trucs_css.html

En rouge :
Petite bidouille pour centrer le design sur tous les navigateurs/plates-formes.
En savoir plus : Centrer les éléments ou un site web en CSS

Au boulot Smiley lol
Modifié par Stephan (26 Mar 2005 - 05:03)
Hey merci pour ces infos j'ai pu corriger quelques problèmes mais il en reste encore quelques uns...

> Mon footer n'a pas la même hauteur sous IE et sous Firefox Smiley confus

> Mes div dans le menu de droite sont décalés vers la droite sous IE alors que sous Firefox ils sont bien collés à gauche. Bon visuellement c'est pas très grave mais je comprends pas à quoi c'est dû...

Vala je crois que c'est tout ^^

J'ai uploadé la nouvelle version là

Merci Smiley confused
Slt pour ton footer de hauteur 9px, c'est normal, ie (si on ne lui dit pas ) interprète le texte en 13px . Il suffit de forcer le texte avec font-size:9px; dans ton #footer pour y remédier. Smiley smile
skatybabe a écrit :

Hey merci pour ces infos j'ai pu corriger quelques problèmes mais il en reste encore quelques uns...

La FAQ est ton amie Smiley cligne
Modifié par Raphael (26 Mar 2005 - 13:11)
Sujet clos
Aller à