28173 sujets

CSS et mise en forme, CSS3

Header a 3div celui de milieu comble l'espace vide

Bonjour,
j'ai un div header et 3 div a l'interieur:


<div id=header>
  <div id=headerLeft></div>
  <div id=headermilieu></div>
  <div id=headerdroite></div>
</div>

headerleft= 300px
headerright= 150px

j'aimerais que header milieu remplisse le reste automatiquement, de facon a ce que mon site s'adapte a n'importe quel résolution..

comment faire simplement ???

merci
Modifié par passa (04 Jul 2007 - 20:52)
Bonjour,

(Tu peux éditer ton premier post pour mettre ton code entre les balises du forum ?)

Joue avec les flottant pour arriver à ce que tu veux.
tant qu'a y etre ....
je vais avoir le meme soucit avec le header, le contenu, et le footer ...

il faudrait que mon contenu couvre l'espace entre le header et le footer quelque soit la taille de son contenu ... (100 % de la page) et plus si ca ne rentre pas dans la longueur ...

désolé mais je n'ai rien trouvé qui réponde a tout ca sur le net ... j'ai du mal chercher mais bon Smiley langue
je suis preneur de n'importe quel lien qui explique le procédé ...

merci .
Super_baloo8 a écrit :
Bonjour,

(Tu peux éditer ton premier post pour mettre ton code entre les balises du forum ?)

Joue avec les flottant pour arriver à ce que tu veux.



j'ai tout essayé avec les flottans mais rien n'y fait ...
meme avec des marges pour le central (comme dans le cas du meme problemem mais sans le header right). mais rien n'y fait ...

tu n'aurais pas un example de code ou un lien qui traine ?
Je suis en train de devenir fou !!!

voila le résultat que j'obtiens:

upload/13115-resultat.png

y'a un truc que je trouve bizart c'est le décalage de tous mes div alors que j'ai rien demandé .. je ne vois que ca comme piste pour comprendre d'ou ca vient ..

mon code html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSM</title>
<!--=================   CSM   JSandCSS.ftl =================================== -->
<link rel="stylesheet" type="text/css" href="/CSM_rsc/css/backOfficeLayout.css">
<!--============== end of JSandCSS.ftl =================================== -->

</head>
<body>
<div id="headerLeft">
    <br>
</div>
<div id="headerMiddle">
   <br>
</div>
<div id="headerRight">
   <br>
</div>
</body>

</html>


mon code css:

/* header CSM */

html {font-size: 100%;}
body {padding: 1em; font-size: .85em; font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;}



div#headerLeft { 
	border: 2px solid black;
	float: left;
	width: 525px;
	margin-right: 10px;
}
div#headerRight {
	border: 2px solid blue;
	float: right;
	width: 348px;
	margin-left: 10px;
}
div#headerMiddle {
	border: 2px solid red;
	overflow: hidden;
}


ca fait 2h que je me prends la tete la dessus j'en peut plus je ne vois pas ce qui foire .... c'est exactement l'exemple du lien (qui fonctionne trés bien) que m'a donné Super_baloo8
Essayes plutôt deux float: left; avec un margin-right sur le conteneur du centre
Modifié par Super_baloo8 (04 Jul 2007 - 21:58)
donc headerleft et headerMillieu en float: left
et headerRight ??? un margin-right = 0 avec un float right ???

le probleme c'est que si je mets un float left au headerMillieu il prend la taille du contenu et non pas la taille de l'espace libre ....
Bonjour,

Le lien de Super_baloo8 est parfait si on le lit ... Smiley biggol
a écrit :
Mise en place des trois « colonnes »
Trois blocs de contenu en HTML

On crée trois blocs qui accueilleront notre contenu :

<div id="colonne1">...</div>
<div id="colonne2">...</div>
<div id="centre">...</div>

Jusque là, ça n'est pas très compliqué.

Attention : : les éléments flottants, que l'on placera sur les côtés, devront être placés en premier dans le code HTML.


Sinon pour résumer:
  <style type="text/css">
.conteneur{
	border: 1px solid black;
	margin-top: 50px;
	position: relative;/* utile uniquement pour le positionnement en absolute*/
}
#gauche { 
	background: yellow;
	float: left;
	width: 300px;
}

#droite {
	background: lime;
	float: right;
	width: 200px;
}

#milieu {

	background: red;
	margin: 0 200px 0 300px;
}

#left { 
	background: yellow;
	position: absolute;
	left: 0;
	top: 0;
	width: 300px;
}

#right { 
	background: lime;
	position: absolute;
	right: 0;
	top: 0;
	width: 200px;
}

#milieu {

	background: red;
	margin: 0 200px 0 300px;
}

p{
	text-align: center;
}
</style>
</head>
<body>
<div class="conteneur">
	<div id="gauche">
	gauche
	</div>

	<div id="droite">
	droite
	</div>

	<div id="milieu"><!-- position du bloc  importante dans le code -->
	centre
	</div>
	<p>méthode float</p>
</div>

<div class="conteneur">
	<div id="milieu"><!-- position du bloc  n'importe où dans le code -->
	centre
	</div>

	<div id="left">
	gauche
	</div>

	<div id="right">
	droite
	</div>
	<p>méthode absolute</p>
</div>


Avec en prime la même chose en positionnement en absolute qui te permettra de voir les avantages et d'inconvénients de chaque méthode.

Bon courage Smiley cligne
ok, aprés une ptit nuit de someil j'ai trouvé un solution simple, a laquelle je n'avait bettement pas pensé...
ne plus utilisé de div central qui me servait uniquement a affiché un background, et mettre le background dans un conteneur qui integre le div left et le right ...
Du coup ca roule...

Sinon j'ai aussi pensé que le pb que j'avais en essayant d'appliquer les techniques dont vous me parlé devait se resoudre avec un div clear: both en dessous ... Visiblement j'ai trouvé sur certain site hier soir que ca permettait de repoussé les autres div vers le haut ....


Par contre si quelqu'un a une idée pour avoir un header fixé a 73px de height et un conteneur dessous (avec un menu left et un mainbody) qui prendrait l'espace restant de la page jusqu'au bas et plus si jamais le contenu s'agrandit
ouep j'ai déja regardé ces gabarits mais en faite ils ont leur div bien remplit ce qui genere leur "height", il n'y a pas de height "auto adapte"
Sujet clos
Aller à