28172 sujets

CSS et mise en forme, CSS3

Px et %

Bonjour à tous,

Je me trouve dans une obligation d'intégrer un design fluide avec des éléments fixes. Le premier problème rencontré est au niveau du header (et oui la mission s'annonce dur) ...
Le header est d'une largeur 100% qui englobe deux blocs, le premier est fixe avec une largeur de 170px et le deuxième doit prendre le reste de la place ...
Sous une résolution 1440*900 (avec laquelle je teste) tout est parfait (et je trouve sa normal ...) mais pour tout ce qui est - de 1440 le deuxième bloc qui est censé prendre le reste de la place passe au dessous.

.header-gauche { float:left; width:170px; }
     .header-gauche img { display:block; margin:3px 0 3px 0; }
     .liens-container { width:100%; height:28px; line-height:27px; text-align:center; }
     .liens-container a { color:#fff; }
     .liens-container a:hover { text-decoration:none; }

.header-droit { float:left; width:88%; } /** Le deuxième bloc qui prend le reste de la place **/
     .header-droit object { width:414px; height:150px; float:left; }
     .header-droit-content { float:left; width:66%; } /** Sa décale aussi **/
     .header-droit-content .liens-container { text-align:right; }
     .header-droit-content h2 { font-size:1em; color:#08508D; height:94px; text-align:center; line-height:90px; }
     .header-droit-content form input { width:180px; height:16px !important; height:20px; vertical-align:middle; border:1px solid #3C81C4;       margin:4px 0 0 10px;  color:#134C83; text-indent:5px; }
	 .header-droit-content form .ok-search { width:35px; height:20px !important; background:url(../images/bg-submit.gif); border:0; margin-left:0; }


Voilà comme le montre mon bout de code, le bloc en question "header-droit" prend une largeur de 88% alors ma question est comment mixer des px et des % sans avoir des problèmes de décalage Smiley bawling ??

Merci d'avance.
Modifié par Jaziz (25 May 2008 - 13:09)
Felipe a écrit :
Bonjour et bienvenue, Smiley smile

merci de supprimer les ? superflus dans ton titre (cela se fait en éditant ton 1er message)

Felipe


Hello Felipe,

Je suis désolé pour mes ? superflus, j'ai pas encore croisé la rubrique help ...
Message édité et j'espère avoir des réponses à mes questions ...

Jaz
Salut,
Bah, en fait tu fixes la largeur du bloc droit à 88% donc bien évidemment ça coince sous d'autres résolutions que celle que tu utilises Smiley cligne

Essaye de laisser ton bloc droit dans le flux et de lui donner un margin-left égal à ton bloc gauche...

.header-droit { 
margin-left: 170px;
}
Ah bon ?

<body>
<div class="header-gauche ">
</div>
<div class="header-droit ">
</div>
</body>

.header-gauche { 
float:left; 
width:170px; 
background: lime;
height: 300px;
}

.header-droit { 
margin-left: 170px;
 background: red;
height: 300px;
 }
Yes !!! sa marche merci !! Le problème venait de la positon float sur le header droit. Je savait pas qu'on pouvait positionné deux blocs l'un a coté de l'autre sans floatté les deuxx !! Résolu
Sujet clos
Aller à