Problème après avoir suivi le cours de CSS "mise en page"

**tentsuken** · 06/06/2007, 01h53

Bonjour jai suivis tout le cours CSS et jai bien compris

merci a l'auteur d'ailleur

Voila j'essaie de faire un conteneur ( bandeauconteneur1 ) à gauche de mon bandeau avec float:left tout fonctionne bien mais dès que j'atteint une certaine largeur mon float ne fonctionne plus et mon bandeau se met en dessous. Que faire ?

Pour 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
/* Mon 1er CSS */
 
/* Proprieté de la page */
body {
	background:#A1A4F1 url('../Images/Fond-Page-Web/Logo.jpg') no-repeat 50% 50%; 
}
div {
	text-align:center;
	}
div#bandeau {
	width:800px;
	height:191px;
	background-color:#00CCFF;
	}
div#bandeauconteneur1 {
	float:left;
	width:201px;
	height:191px;
	background-color:#99FFCC;
	}
div#contenu {
	width:800px;
	height:400px;
	background-color:#FFCC00;
	}
div#piedpage {
	width:800px;
	height:50px;
	background-color:#33FF99;
	clear:both;
	}
div#menu {
	float:left;
	width:100px;
	height:400px;
	background-color:#FF6699;
	}
div#menuhaut {
	width:100px;
	height:200px;
	background-color:#66CC33;
	}
div#menubas {
	width:100px;
	height:200px;
	background-color:#CC99CC;
	}

Pour le HTML :

Code html :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../CSS/Style1.css" rel="stylesheet" type="text/css" />
<title>Positionnement CSS</title>
</head>
<body>
<div id="bandeauconteneur1">Ceci est le bandeau</div>
<div id="bandeau">Ceci est le bandeau</div>
 
<div id="menu">
	<div id="menuhaut">Menu haut</div>
	<div id="menubas">Menu bas</div>
</div>
<div id="contenu">Ceci est le contenu</div>
<div id="piedpage">Ceci est le pied de page</div>
</body>
</html>

Donc avec une largeur de 200 sa fonctionne , 220 ya plus personne :s

Merci pour vos reponsse !

**Neroptik** · 06/06/2007, 11h24

Essaye de mettre dans ton css :

Code :

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

1
2
3
4
body {
margin:0px;
padding:0px;
}

Afin de supprimmer les marge des bord de ta page...

**Candygirl** · 06/06/2007, 11h36

Tu teste sous internet explorer?

Cela va dépendre de la résolution sous laquelle tu visualises le résultat.

J'imagine que tu es en 1024x768 ?
Du coup, tu essaies de placer un bloc de 220 à côté d'un de 800 + la largeur de la scroolbarre verticale = + que 1024 et donc IE considère qu'il n'a pas la place de les mettre côtes à côtes et fait passer ton bloc au-dessous.

**tentsuken** · 06/06/2007, 15h13

Neroptik:

Ca marche bien je peut enfin metre un bloc de 220, tamieut pour moi mais pensson aux autres qui aurais le même embetement que moi, donc la avec 220 de largeur sa marche , si je met 250 cela ne marche plus.

Candygirl:
J'utilise dreamwaver mx pro 8, jouvre donc ma page css et ma page html, et mon apercu ce fait directement dans dreamwaver quand je modifier ma page CSS.

Pour la resolution d'écran cest pas ca car il me reste beaucoup de place tout autour

Merci a vous deux pour votre aide

**Candygirl** · 06/06/2007, 15h37

Envoyé par tentsuken

J'utilise dreamwaver mx pro 8, jouvre donc ma page css et ma page html, et mon apercu ce fait directement dans dreamwaver quand je modifier ma page CSS.

Je te déconseille de te fier au rendu de dreamweaver qui est plus que lacunaire en matière de rendu css.

Et je maintiens ma version des faits

Ouvre ta page dans IE et dans FF (tu verras qu'ils n'interpètent pas la même chose le "dépassement").

**tentsuken** · 06/06/2007, 16h02

Et bien ont dirais que tu as raison je n'avais pas pris la peine de la tester dans un exploreur sous firefox, la largeur que je veut le cadre reste en float ...

Meme si je suis triste que dreamwaver me face ca , mon amis de toujours ....

Merci pour ton aide !

Problème après avoir suivi le cours de CSS "mise en page"

CSS

Discussions similaires

Partager

Partager