28172 sujets

CSS et mise en forme, CSS3

Aligner mon Div tout à gauche, en dehors de mon contenu

Bonjour,

j'ai une structure comme ça

<div conteneur>
<div entete/>
<div contenu>
<div qui doit être aligné à gauche de la fenêtre>
</div contenu>
<div pied/>
</div conteneur>

Mon problème est que je n'arrive pas à aligner le div à gauche de la fenêtre sans le mettre en absolute, et si je le met en absolute, le pied remonte (et donc il est caché par le div)

Voilà tout est dit Smiley smile J'espère que vous aurait un peu de temps à me consacrer
Salut,

alors déjà la structure devrait plutôt être :
<div conteneur>
<div entete></div><!-- fin entete -->
<div contenu>
<div qui doit être aligné à gauche de la fenêtre></div>
</div> <!-- fin contenu -->
<div pied></div><!-- fin pied -->
</div><!-- fin conteneur -->
Pour ce qui est du reste je te renvoie aux articles qui vont bien sur le positionnement.
Modifié par Heyoan (01 Feb 2009 - 12:29)
Je ne vois pas vraiment la différence de structure, du coup je vais faire un copier coller de la vraie structure pour qu'il n'y ai pas d'ambiguïté


<div id="entete"></div>
<div id="contenu">
        <table class="liste">
        	<tr><th></th></tr>
        </table>
</div>
<div id="pied"></div>


Sinon j'ai déjà lu et relu tous ces articles et tutos sur le positionnement, seulement là je cale...

Donc ré-explication :


http://img50.imageshack.us/img50/1474/div1mm4.th.jpg

http://img50.imageshack.us/img50/6655/div2lz3.th.jpg
Modifié par ToxiK (01 Feb 2009 - 12:57)
ToxiK a écrit :

pour qu'il n'y ai pas d'ambiguïté
Ah OK ! J'ai eu un doute en voyant <div entete/> Smiley cligne .
J'ai voulu gagner du temps mais finalement j'ai fait des maquettes explicatives (voir plus haut)
Peut-être avec quelque chose comme ça :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
body {
	margin: 0;
	padding: 0;
}

#haut, #bande, #bas {
	padding: 40px 20px;
}

#haut, #bas {
	width: 70%;
	margin: 0 auto;
}

#haut {
	background: yellow;
}

#bande {
	background: blue;
	margin: 0;
}

#bas {
	background: pink;
}
</style>
</head>
<body>
<div id="haut">
	<p>DIV haut</p>
</div>
<div id="bande">
	<p>DIV haut</p>
</div>
<div id="bas">
	<p>DIV bas</p>
</div>
</body>
</html>
Mince j'ai oublié de préciser :

les largeurs des blocs #entete #contenu et #pied sont fixe (700px)

par contre le div (en bleu sur la maquette) doit prendre toute la largeur de l'écran (et donc sortir du div contenu)
ToxiK a écrit :

les largeurs des blocs #entete #contenu et #pied sont fixe (700px)
Ben il suffit de remplacer :
#haut, #bas {
	width: 70%;
	margin: 0 auto;
}
par :
#haut, #bas {
	width: 700px;
	margin: 0 auto;
}
En fait j'ai a structure qui être comme ça :

La bande bleu est dans la bloc #centre, et il faut qu'elle prenne la largeur de la fenêtre, mais le bloc #centre lui doit resté à 700px pour le design.

J'ai essayer de mettre #bande en absolute mais du coup le pied remonte et il est caché par #bande

#haut, #bas, #centre{
	width: 700px;
}

<div id="haut">
	<p>DIV haut</p>
</div>
<div id="centre">
	<div id="bande">
		<p>DIV centre</p>
	</div>
</div>
<div id="bas">
	<p>DIV bas</p>
</div>
ToxiK a écrit :
La bande bleu est dans la bloc #centre, et il faut qu'elle prenne la largeur de la fenêtre, mais le bloc #centre lui doit resté à 700px pour le design.

Ben ça, tu vois, c'est pas gérable. Soit ton bloc #centre reste en width: auto, et certains éléments de son contenus (tous sauf #bande) auront une largeur de 700px et seront centrés horizontalement... soit tu places #bande en dehors de #centre.

La première option peut ressembler à ceci:
#haut, #bas, #centre .block {
	width: 700px;
}

<div id="haut">
	<p>DIV haut</p>
</div>
<div id="centre">
	<div class="block">Contenu avant</div>
	<div id="bande">
		<p>DIV centre</p>
	</div>
	<div class="block">Contenu après</div>
</div>
<div id="bas">
	<p>DIV bas</p>
</div>
Ok donc je suis obligé de sortir mon <div bande> de mon <div contenu>

Je vais faire un <div contenu1> et un <div contenu2> pour l'entourer

Merci à vous deux pour votre aide
Sujet clos
Aller à