18042 sujets

Questions générales et questions de débutants

Mise en page simple...et pourtant

Bonjour,

je suis en train de faire une mise en page simple avec un menu à gauche, un menu en haut et un footer. Le contenu de la page sera au milieu de tout ça.

J'ai donc créé mes balises DIV en conséquence (un conteneur : content, menu gauche: gauche, menu haut: haut, contenu: frame, footer: bas).

Le problème est que tout se passe bien dans Dreamweaver alors que les positions dans IE ou dans Firefox ne sont pas les bonnes. Les frames se déplacent et ne se calent pas...

Voici mon code. Il est ultra simpole, j'espère que quelqu'un pourra m'aider car je suis sur vos tutos depuis hier et ça commence à m'agacer...

Merci d'avance.

Sand

Ma feuille de style : 
content {
height: 487px;
width:850px;
}

.gauche {
float: left;
height: 487px;
width: 198px;
}

.haut {
margin-left: 198px;
width: 652px;
height: 87px;
}

.frame {
margin-left: 198px;
height: 352px;
width: 851px;
overflow: auto;
}

.bas {
margin-left: 198px;
height: 48px;
width: 652px;
}


Et ma page : 
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="positiontestmiseenpage3.css" />
</head>

<body>
<div class="content"> 
  <div class="gauche"> GAUCHE </div>
  <div class="haut"> HAUT </div>
  <div class="frame"> FRAME </div>
  <div class="bas"> BAS </div>
</div>
</body>
</html>

Modifié par sanddi (19 Jul 2006 - 12:30)
Attention "content" n'est pas une classe existante, tu as oublié le "." devant (à moins d'une erreur de copier coller ?)

Pourrais-tu aussi mettre le lien vers le tutoriel que tu as suivi ?

Une astuce pour mieux voir le positionnement de tes éléments est de leur mettre une couleur de fond. Ainsi tu verras quelle place ils occupent dans l'espace de ta page.

Je te déconseille vivement le "width" de 850px, sachant qu'il faudra que le visiteur est une résolution assez élevé pour pouvoir visionner la page sans scroller horizontalement.
Ce qui me surprend, c'est que quand j'enlève la ligne "float: left; sur la frame de gauche, je perds ma mise en page dans Dreamweaver mais au moins j'obtiens le même résultat dans IE et Firefox.
Est-ce que ce n'est pas un problème à cause de cet attribut "float ?"

Merci d'avavnce

Sand
sanddi a écrit :
Ce qui me surprend, c'est que quand j'enlève la ligne "float: left; sur la frame de gauche, je perds ma mise en page dans Dreamweaver mais au moins j'obtiens le même résultat dans IE et Firefox.
Est-ce que ce n'est pas un problème à cause de cet attribut "float ?"

Merci d'avavnce

Sand


Tout dépend de ce que tu veux faire ? Sur quel tutoriel tu as vu ça ?

Le float, permet de faire sortir un élément du flux normal dans lequel il devrait apparaître pour le mettre à droite ou à gauche dans un bloc conteneur.

Mais ça n'a peut être aucun interêt dans ton cas.
En fait, j'ai besoin d'avoir une colonne à gauche sur toute la hauteur avec un menu. Et sur la partie droite de l'écran, trois zones: en haut, un menu, au milieu le contenu de la page et en bas, le footer.

Je vais essayer avec des couleurs de fond pour mieux voir...
sanddi a écrit :
Merci pour ta réactivité !

Pour le "." devant "content", c'est bien une erreur de copier-coller.

Sinon,voici le tuto dont je me suis inspirée:
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Construire-un-site-sans-tableaux


Il définit son bloc gauche à l'aide d'une position absolue.

"position: absolute;"

Ce qui lui permet en clair de spécifier l'emplacement du bloc par rapport au bord haut gauche de la page.

Tu peux jouer sur la position du bloc en utilisant les propriétés "top: XXXpx;" et "left: XXXpx;"

Edit : Je suis absent jusqu'à 13h environ, pause déjeuner ^^
Modifié par Paul-Hewson (19 Jul 2006 - 12:11)
ok, bon appétit !

J'ai fait le test avec les couleur et j'ai maintenant la nouvelle feuille de style suivante :

.content {
height: 487px;
width:850px;
}

.gauche {
background-color:#99CCCC;
height: 487px;
width: 198px;
}

.haut {
background-color:#CCFFCC;
margin-left: 198px;
width: 652px;
height: 87px;
}

.frame {
background-color:#99CC55;
margin-left: 198px;
height: 352px;
width: 651px;
overflow: auto;
}

.bas {
background-color:#5821FF;
margin-left: 198px;
height: 48px;
width: 652px;
}

Ce qui m'embête, c'est que les blocs "haut", "frame" et "bas" sont en dessous du bloc gauche et non à côté.
Je suis sûre que ce n'est pas sorcier mais bon...
Modifié par sanddi (19 Jul 2006 - 12:31)
J'ai aussi fait le test avec les positions en absolu et alignement avec top et left mais le problème, c'est que dans la fenêtre création de Dreamweaver, c'est la panique complète. Les frames se chevauchent et il est impossible d'intervenir facilement dans celles-ci pour changer le contenu...
Pour info, voici la feuille de style utilisé (résultat ok sur IE et Firefox mais bazar sur Dreamweaver)

.content {
height: 487px;
width:850px;
}

.gauche {
position : absolute;
background-color:#99CCCC;
height: 487px;
width: 198px;
}

.haut {
position : absolute;
background-color:#CCFFCC;
margin-left: 198px;
width: 652px;
height: 87px;
}

.frame {
position : absolute;
top: 102px;
background-color:#99CC55;
margin-left: 198px;
height: 352px;
width: 651px;
overflow: auto;
}

.bas {
position : absolute;
top: 454px;
background-color:#5821FF;
margin-left: 198px;
height: 48px;
width: 652px;
}


Si quelqu'un veut bien avoir la gentillesse de la regarder sous Dreamweaver pour me confirmer que je ne rêve pas, ça serait super.

Merci à tous.

Sand
Modifié par sanddi (19 Jul 2006 - 12:32)
La gestion des CSS est ratée sous DreamWeaver il me semble.

De toute façon ce que l'utilisateur final verra se passe sur IE, FF et autres.. mais c'est sûr que ça doit pas être très pratique si tu utilises la visualisation de DreamWeaver pour te guider.
Modifié par Paul-Hewson (19 Jul 2006 - 13:23)
Effectivement, c'est carrément la galère.
Est-ce qu'il n'y a pas un moyen d'utiliser une feuille de style sans position "absolue" pour faire ce que j'ai à faire ?
Est-ce que ça vous fait pareil quand vous ouvrez avec la feuille de style avec les positions en absolu dans dreamweaver ? J'aimerais être sûre que ce n'est pas que ma version qui a un soucis...

Sinon, pour ceux que ça intéresse, je viens de trouver une solution qui m'a l'air pas mal pour avoir la même chose dans Dreamweraver et dans les navigateurs. Ainsi, on n'utilise pas les positions absolues mais une marge négative. Je sais, c'est pas très catholique mais au moins ça marche et ça me permet de visualiser correctement mes pages.

Ca donne la feuille de style suivante :
.content {
height: 487px;
width:850px;
}

.gauche {
background-color:#99CCCC;
height: 487px;
width: 198px;
}

.haut {
background-color:#CCFFCC;
margin-left: 198px;
margin-top: -487px;
width: 652px;
height: 87px;
}

.frame {
background-color:#99CC55;
margin-left: 198px;
height: 352px;
width: 651px;
overflow: auto;
}

.bas {
background-color:#5821FF;
margin-left: 198px;
height: 48px;
width: 652px;
}



Si vous avez autre chose que les marges négatives, n'hésitez pas, je suis preneuse. En attendant, je me débrouille comme ça.
En tout cas, merci pour votre aide et bravo pour votre site : tutos, forums...tout est fait pour s'en sortir.

Sand
Salut sanddi

Après avoir testé sous iE, FF et Dreamweaver tout me semble ok,
sauf tes alignements top qui font 15 px de trop pour le DIV "frame" et
le DIV "bas".

je trouve :
pour le frame top: 87px
pour le bas top: 439px

à voir.

@++
Sujet clos
Aller à