28172 sujets

CSS et mise en forme, CSS3

2 div 1 fixe et l'autre extensible

Bonjour, j'ai un petit soucis.

http://h.imagehost.org/t/0085/Sans-titre-1.jpg

Je cherche a garder le cadre rouge de taille fixe et le vert remplissant le reste de la page.

j'ai essayez de mettre dans le vert:
#vert{
width:100%
max-width:1460px;
}
tout vas bien tant qu'on garde la fenêtre en plein écran mais dès qu'on la réduit, il garde quand la même taille et ne s'ajuste pas à l'écran.

Je vous remercie par avance pour l'astuce
Vu que tu ne donnes pas la structure HTML et seulement une petite partie du CSS, difficile de dire quoi que ce soit.
À priori le problème est que ton bloc de droite est flottant (float:left, me dit ma boule de cristal). Tu n'as pas besoin de faire flotter ce bloc.
C'est pas faux Smiley cligne

donc la structure est basique:

<div id="barre"></div>
<div id="menu">le cadre de gauche</div>
<div id="content" >
  <div id="actions">droite haut</div>
  <div id="content">droite bas</div>
</div>


quant au css :

#barre {
	background-color:#333;
	border-bottom: 1px solid #222;
	width:100%;
	height:22px;
	font-size:0.8em;
	color:#DDD;
	padding-top:7px;
}
#menu{
	float:left;
	position:relative;
	margin: 20px;
	background-color:#CCC;
	width:160px;
	height:500px;
}
#actions{
	position:absolute;
	max-width:1460px;
	margin: 20px 20px 20px 200px;
	height:100px;
	background-color:#CCC;
}
#content{
	position:absolute;

	max-width:1460px;
	margin: 140px 20px 20px 200px;
	height:100px;
	background-color:#CCC;
}


voila un post un peu plus complet Smiley biggrin
Bon ben on va poster la même chose que dans un autre sujet où je viens de répondre:

---
À lire ou relire (de même pour les références qui y sont indiquées): Guide de survie du positionnement CSS.
---

Je pense que je pourrais barrer le «à relire», vu l'utilisation catastrophique du positionnement absolu et du margin-top que je peux voir dans ton code CSS. Ce n'est pas une révision qui est nécessaire, mais un apprentissage du positionnement CSS. Smiley cligne
après la giffle, j'ai relu ce que j'avais posté et en fait il s'agissait de test un peu aléatoire et sans réelle logique.

le css original etait 

html, body {
	margin:0;
	padding:0;
	font-family: "Lucida Grande", sans-serif console,Verdana, Geneva, sans-serif;	
	background-color:#304050;
	/*background-color:#CDCDCD;*/
}

#barre {
	background-color:#333;
	border-bottom: 1px solid #222;
	width:100%;
	height:22px;
	font-size:0.8em;
	color:#DDD;
	padding-top:7px;
}
#menu{
	margin: 20px;
	background-color:#CCC;
	width:160px;
	height:500px;
	float:left;
}
#home{
	float:left;
	margin-top:20px;
}
#actions{
	height:100px;
	background-color:#F00;
}
#content{
	margin-top:20px;
	height:100px;
	background-color:#0F0;
}


qui affiche la même chose que la dernière vignette, un bon positionnement mais des barres ne prenant pas le reste de la place Smiley ohwell
Pour le coup j'espère que ce que j'avais ecris ressemble plus à quelque chose Smiley cligne
Bonjour,

Si #home correspond au premier content (du code HTML) il suffit d'enlever le float (comme dit par Florent dans sa première réponse).
#home contient #actions et #content

en gros,
<div id="menu"></div> // pour le rectangle vertical
<div id=home>
div id=actions
div id=content
</div>

home est un cadre invisible qui me permet de placer actions et content simplement l'un au dessous de l'autre. du coup j'imagine que c'est home qui doit faire la taille du reste de la page et que actions et content doivent avoir qqch du genre width=100% non ?
Modifié par Tilleul (16 Jun 2010 - 15:58)
J'ai essayé de changer la taille du div via javascript.

En gros (window.width - (taille du menu + les margins)), mais dans ce cas, Actions et Content passe sous le menu
salut
en enlevant le float de la div #home et en le remplaçant par un margin left, égal à la largeur de #menu + ses deux margin (left et right): (160px+ 40px= 200px) ça devrait régler ton problème:

#home{ 
    margin-left: 200px;
    margin-top:20px; 
}

Modifié par eyos (19 Jun 2010 - 18:26)
Sujet clos
Aller à