problème css

fredmac75 · 26 Juillet 2005

bonjour à tous
voilà, je refond mon site en CSS 2 et je patine un peux dans la gestion du flux.
le texte de ma bande droite ne commence que là ou s'arrête mon texte central
je vous joint le code css :

#pagebody {padding: 1px 0 0 0;}
#contenuprincip {
float: left;
margin-left: 220px;
padding-right: 10px;
width: 500px;
}
#bardroite {
width: 200px;
margin-left: 8px;
background-color: #CEF985;
margin-top: -15px;
}

et le code html concerné :

<div id="pagebody">
<div id="contenuprincip">Vous êtes une PME/TPE, êtes en profession libérale, ou encore êtes un artisant ? Vous aimeriez disposer d'un site Internet pour valoriser vos activités ?<br />
<br />
QuatuorProd vous propose une création graphique sur mesure pour vous aider à augmenter significativement l'impact de votre communication.</div>
</div>
<div id="bardroite">
<div class="panel">
<h2>QuatuorProd</h2>
9, rue Devéria<br />
75020 Paris<br />
<br />
Port : 06 21 71 39 43<br />
Fixe : 01 44 62 91 57<br />
Mail : <a href="mailto:[email protected]" class="mail">[email protected]</a><br />
<a href="QuatuorProd.vcf"><img src="images/Vcard.gif" alt="carte de visite QuatuorProd" width="86" height="61" border="0" title="Téléchargez la carte de visite QuatuorProd" /></a><br />
<H2>Actualités</H2>
2005 - <strong>QuatuorProd</strong> renouvelle sa charte graphique<br />
<br />
<strong>NOTORIÉTÉ</strong> confie la réalisation de son site internet à l'équipe de QuatuorProd.<br />
<br />
<strong>Eric Barriol</strong> architecte, fait appel à QuatuorProd pour la création de son <a href="http://www.ericbarriol.com" target="_blank" class="menu">site web.</a><br />
<br />
<strong>AU JARDIN</strong>, restaurant de cuisine traditionnelle française, fait appel à QuatuorProd pour renouveller le visuel de ses cartes de visite. </div>
</div>

et enfin une image pour bien comprendre le problème :

Merci

heliotrope · 26 Juillet 2005

salut,

une balise div n'est pas fermée ...

edit : ça ne vient pas d'un oubli de </div> mais de ton htm je pense

pour tes positionnements n'oublie pas de définir "position:relative"

je te mets le code modifié

<html>
<head>
<style>
#pagebody {padding: 1px 0 0 0;}
#contenuprincip {
position:relative;
float: left;
margin-left: 220px;
padding-right: 10px;
width: 500px;

}
#bardroite {
position:relative;
float: left;
width: 200px;
margin-left: 8px;
background-color: #CEF985;
margin-top: 0px;
}
div {
border:1px solid #ccc;
}
.wrapper{
clear:both;
}
.panel{
}
</style>

</head>
<body>
<div id="pagebody">
<div id="bardroite">
<div class="panel">
<h2>QuatuorProd</h2>
9, rue Devéria<br />
75020 Paris<br />
<br />
Port : 06 21 71 39 43<br />
Fixe : 01 44 62 91 57<br />
Mail : <a href="mailto:[email protected]" class="mail">[email protected]</a><br />
<a href="QuatuorProd.vcf"><img src="images/Vcard.gif" alt="carte de visite QuatuorProd" width="86" height="61" border="0" title="Téléchargez la carte de visite QuatuorProd" /></a><br />
<H2>Actualités</H2>
2005 - <strong>QuatuorProd</strong> renouvelle sa charte graphique<br />
<br />
<strong>NOTORIÉTÉ</strong> confie la réalisation de son site internet à l'équipe de QuatuorProd.<br />
<br />
<strong>Eric Barriol</strong> architecte, fait appel à QuatuorProd pour la création de son <a href="http://www.ericbarriol.com" target="_blank" class="menu">site web.</a><br />
<br />
<strong>AU JARDIN</strong>, restaurant de cuisine traditionnelle française, fait appel à QuatuorProd pour renouveller le visuel de ses cartes de visite.

</div>
</div>
<div id="contenuprincip">Vous êtes une PME/TPE, êtes en profession libérale, ou encore êtes un artisant ? Vous aimeriez disposer d'un site Internet pour valoriser vos activités ?<br />
<br />
QuatuorProd vous propose une création graphique sur mesure pour vous aider à augmenter significativement l'impact de votre communication.</div>
</div>
<div class="wrapper"></div>
</div>

</body>

</html>

maousse · 26 Juillet 2005

Salut

Je ne sais pas comment tu t'y est pris pour caler ton en-tête avec ton menu, j'ai remanié la structure tel que je le ferais, en ne laissant que le nécessaire. (j'ai enlevé les marges et padding pour la clarté, et pour les bugs avec IE aussi, c'est un soucis supplémentaire

)

j'ai emballé l'ensemble dans un "wrapper", ce qui permet de caler la largeur globale du contenu. Le centrer si tu veux par la suite.

Ensuite, chaque div s'enchaine, à la suite, le header, le contenu, la barre latérale (tu peux rajouter un pied de page aussi si tu veux, en lui appliquant la propriété clear:both; pour qu'il soit toujours plus bas)

Pour mettre ça en page, avec la structure dans cet ordre, il faut faire un double float, à la fois pour la barre et le contenu.

Pour faire une barre latérale avec un seul float, il faut que la barre latérale apparaisse avant le contenu principal dans le html, et c'est moins bon pour la sémantique du document, et pour le référencement.

Enfin, ça n'est pas tout à fait exact, on peut aussi, dans cet ordre de code html, faire un float seulement sur le contenu, et appliquer une marge pour que le fond de la barre latérale ne dépasse pas sur toute la largeur de la page.

Voilà le code :

Bloc de code:

<html>
<head>
<style>
#wrapper{
width: 700px;
}

#header{
padding: 40px;
}

#contenuprincip {
float: right;
width: 500px;
}

#bardroite {
background-color: #CEF985;
float : left;
width : 200px;
}
</style>
</head>

<body>

<div id="wrapper">

<div id="header">
Ceci est mon header
</div>


<div id="contenuprincip">
Vous &ecirc;tes une PME/TPE, &ecirc;tes en profession lib&eacute;rale, ou encore &ecirc;tes un artisant ? Vous aimeriez disposer d'un site Internet pour valoriser vos activit&eacute;s ?<br />
<br />
QuatuorProd vous propose une cr&eacute;ation graphique sur mesure pour vous aider &agrave; augmenter significativement l'impact de votre communication.
</div>




<div id="bardroite">

<div class="panel">
<h2>QuatuorProd</h2>
9, rue Dev&eacute;ria<br />
75020 Paris<br />
<br />
Port : 06 21 71 39 43<br />
Fixe : 01 44 62 91 57<br />
Mail : <a href="mailto:[email protected]" class="mail">[email protected]</a><br />
<a href="QuatuorProd.vcf"><img src="images/Vcard.gif" alt="carte de visite QuatuorProd" width="86" height="61" border="0" title="Téléchargez la carte de visite QuatuorProd" /></a><br />
<H2>Actualit&eacute;s</H2>
2005 - <strong>QuatuorProd</strong> renouvelle sa charte graphique<br />
<br />
<strong>NOTORI&Eacute;T&Eacute;</strong> confie la r&eacute;alisation de son site internet &agrave; l'&eacute;quipe de QuatuorProd.<br />
<br />
<strong>Eric Barriol</strong> architecte, fait appel &agrave; QuatuorProd pour la cr&eacute;ation de son <a href="http://www.ericbarriol.com" target="_blank" class="menu">site web.</a><br />
<br />
<strong>AU JARDIN</strong>, restaurant de cuisine traditionnelle fran&ccedil;aise, fait appel &agrave; QuatuorProd pour renouveller le visuel de ses cartes de visite. 
</div>
</div>

</div>
</body>
</html>

Et si tu veux plus de détails sur la mise en page css et que tu lis l'anglais, cet extrait du bouquin de Dan Cederholm couvre à peu près tous les cas :
http://www.friendsofed.com/books/1590593812/1590593812.pdf

fredmac75 · 26 Juillet 2005

Merci à tous deux pour vos réponses, que je vais méditer avant de les mettre en place.

fredmac75 · 26 Juillet 2005

justement je souhaitais centrer l'ensemble. J'ai ajouté un text-align: center; au wrapper, au header, au body mais rien n'y fait .... ?

maousse · 26 Juillet 2005

en rajoutant :

#wrapper{margin : 0 auto;}
0 en haut et bas, automatique à droite et gauche, l'ensemble se retrouve centré

Ça fonctionne partout, sauf avec IE 5, qui a besoin de #body{text-align: center;} en plus.
Ensuite, pour que le reste du texte ne soit pas centré à l'intérieur du wrapper, rajouter #wrapper{text-align: left;}

heliotrope · 26 Juillet 2005

pour en apprendre d'avantage sur les moyens de center les éléments en css
il y a plein d'infos ici --> http://css.alsacreations.com/Faire-...ux/Centrer-les-elements-ou-un-site-web-en-CSS

fredmac75 · 26 Juillet 2005

Merci à tous les deux (décidément il y à de l'écho). Je suis arrivé à ce que je souhaitais. :zen:

problème css

fredmac75

Membre expert

heliotrope

Membre actif

maousse

Membre expert

fredmac75

Membre expert

fredmac75

Membre expert

maousse

Membre expert

heliotrope

Membre actif

fredmac75

Membre expert

Sujets similaires