Discussion :

[akaii]

Hello

Voilà je débute avec l'utilisation des <div> et je ne comprends pas pourquoi j'ai le comportement que vous pouvez voir dans les screenshots suivants:
- Fenêtre plein écran
- Lorsque je réduit la taille de la fenêtre
Avant de se réduire les deux <div> "logosection" et "header", la partie "header" passe en dessous du DIV:#templatemo_header alors que j'aimerai qu'il reste à la même hauteur.

Voici le HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="templatemo_container">   
    <div id="templatemo_header">
    	<div id="logosection">
	        <div class="sitelogo"></div>
        	<div class="sitename">Business</div>
        </div>
        <div id="header">
        	<div class="title">
            	We Offer<br /><span class="bigtext">The Best Strategy</span><br />For your business.
    	    </div>
        </div>
    </div>
</div>

Voici le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
#templatemo_container {
	margin: 0px auto;
	width: 90%;
	margin-top: 15px;
}
#templatemo_header {
	clear:both;
	padding: 0px;
	margin: 0px 0px 5px 0px;
	width: 100%;
	height: 147px;
	border:solid black 2px;
}
#logosection {
	margin: 0px 3px 0px 0px;
	float: left;
	width: 19%;
	height: 147px;
	background: url(images/templatemo_logo_background.gif) no-repeat;
	border: solid red 2px;
}
#header {
	margin: 0px;
	float: right;
	width: 80%;
	height: 147px;
	background: url(images/heading_background_test_start.jpg) repeat-x;
	border: solid yellow 2px;
}

[sadkat]

Bonjour,
tu as essayé de virer le flot : right du #header ?

[akaii]

Ok merci c'était ça !


Par contre comment je peux les séparer par une petite bande blanche de 2px?

[nsanabi]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#logosection {
	margin: 0px 3px 0px 2px;
	float: left;
	width: 19%;
	height: 147px;
	background: url(images/templatemo_logo_background.gif) no-repeat;
	border: solid red 2px;
}

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#header {
	margin: 0px 2px 0px 0px;
	float: right;
	width: 80%;
	height: 147px;
	background: url(images/heading_background_test_start.jpg) repeat-x;
	border: solid yellow 2px;
}