28172 sujets

CSS et mise en forme, CSS3

Defilement et remplissage d'un bloc

Bonjour,

Je crée un petit site pour mon CV, ca fait 3 soirs que je suis dessus mais là je bloque.
J'ai besoin d'aide s'il vous plait !!! Smiley langue

Voila, le bloc central (avec la photo, les contact et tout et tout) en orange se remplit bien à l'affichage de la page, par contre si on réduit la taille de la fenêtre, et que l'ont scroll pour voir la suite du contenu, le fond de couleur du bloc ne se remplit plus et on à un décalage (le texte sont des images avec la même couleur en fond). Pour voir le problème il suffit de réduire la taille de la fenêtre de son navigateur et de scroller.

C'est pas de la pure créa, je me suis inspiré de site existant, et je suis pas un pur dev mais je comprend bien le code.

j'ai déjà mis le début du boulot en ligne pour plus de facilité : www.bucquet.fr

voila mon code si besoin:

Merci d'avance

<html>
<head>
	<title>Ludovic BUCQUET</title>
	<link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
	<link rel="stylesheet type="text/css" href="style.css" media="screen" />

</head>

<body>
	<div id="top_bar"></div>

		<div id="wrapper">
		
			<div id="CV"><img src="img/logo.png">
			
				<div id="icons">
				<img src="img/cv2.png">
				</div>
				
			</div>
			
			<div id="content">
			<img src=img/ludovic_bucquet.png>
			<img src=img/competence.png>
			<img src="img/contact2.png">	
			</div>	
			
		</div>
		
</body>
</html>





body {	
background-color:#390803;
font: 12px/1.5 Helvetica, Arial, sans-serif;
text-align: justify;
}

hr {
border-color:#C7D202;
border-right:0 solid #C7D202;
border-style:solid;
border-width:1px 0 0;
clear:both;
height:0;
}

h1 {

}

h2 {}

h3 {}

#top_bar {
background-color: #ff7100;
height:10px;
left:0;
position:fixed;
width:100%;

}

#wrapper {
margin: 0 auto;
width:1500px;
}


#content {
background-color: #ff7100;
height:100%;
margin-left: 780px;

padding: 0px 10px;
position: relative;
width:230px;

}

#content img, #form #map {
margin: 20px 0;
}

#contact img {
margin: 0px 0px 0px 0px;

}

label {
display: none;
}

#CV {
margin: 10px 0 0 0px;
position: fixed;
}

#icons {
clear: both;
text-align: right;

}

#icons img {
margin-top: 100px;

}




html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}

body {
line-height: 1;
}

ol, ul {
list-style: none outside none;
}

blockquote: before, blockquote:after, q:before, q:after {
content: none;
}

:focus {
outline: 0 none;
}

ins {
text-decoration: none;
}

del {
text-decoration: line-through;
}
bonsoir,

peut-etre tenter un min-height:100%; plutot qu'un height:100%; qui n'autorisera pas au conteneur de s'allonger ..


GC

<edit : au conteneur #content />
Modifié par gc-nomade (22 May 2010 - 02:07)
Bonjour,

Vu la différence d'interprétation de ton code entre IE et FF, je me contenterais dans un premier temps de corriger les erreurs de validation de ton html (une 15aine je crois) Ensuite tu y verras surement plus clair Smiley smile
Sujet clos
Aller à