28173 sujets

CSS et mise en forme, CSS3

PB de Width avec Div Floatante

Bonjour

je dois faire le redesign de la page suivante en full css ou du moins avec autant de css que possible http://pklasseprod.free.fr/radars.html

et j'ai des pbs avec les div floatantes internes à d'autres div plus grande en effet quand je leur donne une width par exemple de 100px, elles en occupent beacoup plus de place que 100px!

voici le squelette en css qui est censé refaire la page dont je vous ai donné l'addresse!


merci d'avance pour votre aide!
http://pklasseprod.free.fr/radars.html


<!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">
<title>Nouvelle Page Radar Non Abonné!</title>

<style type="text/css">
div{
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
}

div#bodyblock{
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #FF6600;
}

hr{
clear: both;
background-color: #FF6600;
color: #FF6600
height: 5px;
border: 0;
width: 100%;
 }

div#tryPacks{
float: left;
height: 100%;
width: 70%;
}

div#2packs{

}

div#radars{
float:left
width: 100px;
}

div#lecarburant{
float: left
width: 50%;
}

div#tryButton{

}

div#imgGps{
float: left;
width: 344px;
height: 100%;
border-style: solid;
}



div#navxReasons{
float: left;
border-color: black;

}

div#gpsCompatibility{
float: left;
}


</style>
</head>




<body>
<div id="bodyblock">

<!-- Block du Haut pack+essayez+gps -->
		<!-- block du haut pack+essayez+gps -->
		<div id="topBlock">
		
			<!-- Block Gauche pack+essayez -->
			<div id="tryPacks">
					<!-- les packs -->
					<div id="2Packs">
								
								<div id="radars">
								<p>le pack radars fixes!	xbdbdf</p>
								</div>
								
		
								<div id="lecarburant">
								<p>En cadeau : Prix du carburant</p>
								</div>
					</div>
					<hr />
					<!-- Boutton Essayez -->
					<div id="tryButton">
					<p>Essayez Miantenant</p>
					</div>
			 </div>
			 
			 <!-- block Droit Image GPS -->
			 <div id="imgGps">
				<p>image GPS
				dwsdfgwdfs
				fdgsdgs
				sdwsfdw
				sdfwfsdf
				dfsdfsd
				fsd
			
			
				
				sdfqqsd
				f
				fdqs
				sf
				qsdf
				sqdf
				sqddfwsgsd
				srgdwfg
					sqddfwsgsd
				srgdwfg
				
				</p>
			 
			 </div>
		</div>

<hr />

<!-- Block du Bas 5 raisons+compatible+comment+presse -->
		<div id="bottomBlock">
					<!-- 5raisons+comment -->
					<div>
						<!-- 5 raisons -->
						<div id="navxReasons">						 	
						<p>Les 5 raisons de choisir Navx</p>
						</div>
						
						<!-- comment -->
						<div id="howTo">
						<p>comment ça marche</p>
						</div>
						
					</div>
					<hr />
					<!-- Compatible+Presse -->
					<div>
						<!-- compatibles -->
						<div id="gpsCompatibility">
						<p>tomtom garmin navman navigon</p>
						</div>
						
						<!-- presse -->
						<div id="pressreleases">	
						<p>rtl warning turbo.fr le parisien rmc.fr</p>
						</div>
					</div>
		 </div>
</div>
</body>
</html>

Modifié par olkainflex (21 Dec 2007 - 15:09)
Hello,

Ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ Smiley ohwell

Je te suggère vivement d'éditer ton message afin de corriger ce problème. Smiley cligne
Bonjour,

As-tu pensé à valider ton code CSS?
Tu as au moins deux erreurs de syntaxe (qui font que quatre déclarations CSS sont ignorées, dont certains width: 100% justement...).
Bonjour le message a été edité et la bonne adresse est:http://pklasseprod.free.fr/radars.html

je dois refaire ce truc plein de tableau avec des css et j'ai des problemes avec certaine divs les plus internes qui quand je leur donne une width prennent plus d'espace que ce que leur donne!

Ou puis je trouver un validateur de css de bon niveau?
Modifié par olkainflex (21 Dec 2007 - 15:12)
J'ai remarqué que dans certains cas les div qui servent de contenaire à d'autres divs ont une height presque nul et donc les div qu'ils contiennent débordent de celle-ci!

Comment puis changer cela, dois je donner une height obligatoirement à la div contenaire (les contenaire ne seront pas visible...)
Salut,

a écrit :
Ou puis je trouver un validateur de css de bon niveau
Ici : http://jigsaw.w3.org/css-validator/. Et tant qu'à faire, pense aussi à valider ton code HTML de temps en temps.

a écrit :
J'ai remarqué que dans certains cas les div qui servent de contenaire à d'autres divs ont une height presque nul et donc les div qu'ils contiennent débordent de celle-ci!
Si ces divs contiennent des flottants, c'est un problème qui est mentionné dans la FAQ ... et non, il ne faut pas obligatoirement donner une hauteur à ton conteneur Smiley cligne
Modifié par Thomas D. (21 Dec 2007 - 16:11)
Thomas D. a écrit :
Salut,

Ou puis je trouver un validateur de css de bon niveau
Ici : http://jigsaw.w3.org/css-validator/. Et tant qu'à faire, pense aussi à valider ton code HTML de temps en temps.

a écrit :
J'ai remarqué que dans certains cas les div qui servent de contenaire à d'autres divs ont une height presque nul et donc les div qu'ils contiennent débordent de celle-ci!
Si ces divs contiennent des flottants, c'est un problème qui est mentionné dans la FAQ ... et non, il ne faut pas obligatoirement donner une hauteur à ton conteneur Smiley cligne
c'est vrai que l'essentiel est qu'il positionne le contenu là ou on le veut!
olkainflex a écrit :
c'est vrai que l'essentiel est qu'il positionne le contenu là ou on le veut!
?? ai pas compris Smiley confuse
Sujet clos
Aller à