28172 sujets

CSS et mise en forme, CSS3

Problème avec mon css (du au float surement)

Bonjour à tous, voila je souhaite intégrer cette maquette :

http://img716.imageshack.us/img716/9678/maquette2.jpg

J'ai réfléchi à cette logique pour le code :

http://img816.imageshack.us/img816/6960/maquette2css.jpg

Voici ma base html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="shortcut icon" href=""/>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

<title>Chrisalide Conseil en Image</title>
</head>

<body>

<div id="conteneur_generale">

<div id="header"><h1>Chrisalide Conseil en Image</h1></div>

<ul id="menu">
<li class="accueil"><a href="#">Accueil</a></li>
<li><a href="#">Qui somme nous ?</a></li>
<li><a href="#">Préstations</a></li>
<li><a href="#">La boutique</a></li>
<li><a href="#">Contact</a></li>
</ul>

<div id="vide"></div>

<div id="ligne"></div>

<div id="slide"></div>

<div id="pourquoi"></div>

<div id="paragraphe"><p>Au-delà d’un changement d’image, vous gagnerez en confiance en vous, en maîtrise et en responsabilité.
L’image tient une place très importante dans notre société. Dans un entretien d’embauche, une première rencontre et tout simplement dans le vécu quotidien, l’image que nous renvoyons peut tout changer.</p>
</div>

<div id="decouvrez"></div>
<div id="consultez"></div>
<div id="contactez"></div>

<div id="footer">
</div>

</div> <!-- fin conteneur -->

</body>
</html>


le css :

body {
font-size:12px;
color:#4d4b5e;
text-align:left;
font-family:Helvetica, Arial, sans-serif;
text-decoration:none;
background-image:url(../img/bg.jpg);
}

a {
color:#4d4b5e;
font-weight:bold;
text-decoration:none;
}

a:hover {
color:#975f76;
}

#conteneur_generale {
width:1000px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
padding-bottom:30px;
background-image:url(../img/contenu_png.png);
}

#header {
width:1000px;
height:165px;
margin:auto;
background-image:url(../img/head_png.png);
background-repeat:no-repeat;
}

#menu{
margin-left:270px;
}

#menu li {
float:left;
padding-right:30px;
}

.ligne {
background-image:url(../img/ligne.jpg);
background-repeat:no-repeat;
width:980px;
height:2px;
margin-left:10px;
margin-top:5px;
float:left;
}

#slide {
	background-image:url(../img/slide_png.png);
	background-repeat:no-repeat;
	width:980px;
	height:295px;
}

#pourquoi {
	background-image:url(../img/pourquoi.png);
	background-repeat:no-repeat;
	width:305px;
	height:87px;
	margin-left:20px;
	margin-top:30px;
	
}

#paragraphe_1 {
}

#decouvrez
#consultez
#contactez

#footer

#menu_footer


donc tous ce passez bien jus'qua arrivé à l'image "le conseil en image pourquoi ?" la impossible de passer le paragraphe à ça droite...

J'ai éesayer des float, des clear sur toute les div mais je sèche sur comment placer la suite. Et si il ce place correctement le bg blanc ne ce repeat pas correctement.

J'aurais du logiquement mettre l'image en float left et le texte explicatif en float left lui aussi ce calerait , mais non ça ne marche pas Smiley bawling , quelqu'un peut il m'aiguiller ?

Merci !
Modifié par Teytoon (29 Sep 2010 - 20:34)
Personne pour m'aider ? j'suis vraiment embéter je ne peut pas avancer avec ce problème Smiley decu (c'est seulement le deuxième site que je code et j'avoue que je ne suis pas à 100% alhèze encore..)
c'est ce que j'ai fait, seulement il sort de mon background repeat (le bg blanc), ce que je vais faire c'est tous intégrer et résoudre le problème à la fin et le mettre online pour que vous puissiez comprendre !
bon ça bug toujours, j'ai mis un height à mon bg blanc ducoups y'a pas de problème de décalage, je code le reste et je verrais à la fin pour le soucis ! Smiley smile
Si tu mets l'image "pourquoi.png" en background, tu n'as pas besoin de tant de div. Tu ne gardes que le div #paragraphe, tu lui mets ton image en background et tu donnes au div un padding-left un peu supérieur à la largeur de ton image. Pas la peine de mettre de width ni float au div, par contre, tu peux lui donner un min-height:87px pour que l'image ne soit jamais coupée sur sa hauteur.
Modifié par loicbcn (01 Oct 2010 - 05:54)
Sujet clos
Aller à