[html - css] Question sur les blocs css

Logiciel & apps Programmation
1

Bonjour,

je souhaite réaliser une page web avec une présentation en css. Je n’arrive pas à faire ce que je veux, et que j’ai représenté sur cette image :
http://skoni.free.fr/question.gif

Voici le code de ma feuille css :
[cpp]
body {
margin:0px;
padding-top:50px;
padding-left:50px;
background:#000000;
color:#FFFFFF;
font-family:Verdana, Arial, times;
font-size:12px;
line-height:1.4em;
text-align:right;
}
#bloc1 {
margin:0;
padding:0;
float:left;
width:100%;
height:128px;
background:url(“bgh.gif”) repeat-x left top;
text-align:center;
display:block;
}
#bloc2 {
top:0px;
left:0px;
float:left;
width:400px;
height:128px;
}
#bloc3 {
margin:0;
padding:0;
top:0px;
width:50px;
height:128px;
}
[/cpp]

le bloc1 occupe toute la largeur de la page et contient les blocs 2 et 3.
le bloc2 est aligné à gauche et fais une largeur fixe.
le bloc3 est centré sur le reste de la page (c’est-a-dire sur 100%-la largeur du bloc2).

Jusque là, j’arrive à faire ca avec des div.
Je voudrais maintenant que le bloc3 ne passe pas en-dessous du bloc2 quand la page est redimensionnée (ou si l’écran n’est pas assez large). Je veux donc que les deux blocs (2 et 3) restent cote à cote et que la scrollbar apparaisse si la largeur n’est pas suffisante.

Quelqu’un a-t-il une idée pour réaliser cela en css ?

merci par avance,
tonyo4

2

Tu devrais essayer d’ajouter un overflow:auto pour le bloc 2 et le bloc 3, sinon ça fonctionne pas donne l’url de ton truc ou tout le code qu’on puisse essayer chez nous :slight_smile:

:stuck_out_tongue:

3

Salut,
merci pour ta réponse.

En fait, voici ce que j’arrive à faire pour le moment : http://skoni.free.fr/test.htm

Cela marche exactement comme je le veux sur Firefox, maintenant, j’ai un problème de positionnement sur IE, que je n’arrive pas à résoudre.

Source de la page :
[cpp]

titre body { margin:0px; padding-top:50px; padding-left:50px; background:#000000; color:#FFFFFF; font-family:Verdana, Arial, times; text-align:right; } img { border:0; } #haut { margin:0; padding:0; float:left; width:100%; height:128px; background-color:#00FF00; text-align:center; } #haut_a { top:0px; left:0px; float:left; width:400px; height:124px; background-color:#00FFFF; color:#000000; } #haut_b { margin:0; padding-left:400px; top:0px; height:124px; } #haut_b img { margin-left:10px; margin-right:10px; } 
    <div id="haut">
	<div id="haut_a">
		haut_a
	</div>
	<div id="haut_b">
		<img src="image.gif" alt="image" />
	</div>
    </div>
[/cpp]

merci,
tonyo4

4

Faut enlever ton paddind-left:400px; dans haut_b

5

oui, le placement est bon maintenant avec IE mais le problème c’est que je ne veux pas que le bloc passe à la ligne lorsque la page est reidmmensionnée…
Comment faire ?