CSS : probleme de positionnement d'un bloc

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : CSS : probleme de positionnement d'un bloc

fafane84

Salut à tous voila j'ai un soucis avec mon CSS.

Je voudrais faire la mise en page de mon site qu'avec des DIV conformement aux recommendations du W3C (actuellement il est valide XHTML 1.0 strict mais fait avec des tableaux).

Seulement voilà je n'arrive pas à séparer le "footer" du bloc central comme c'est le cas pour le "header".

Voici la >> page test << le CSS est inclus dans la source (le modèle vient du site alsaceéations)

Je voudrai la même presentation que sur mon site >> ici <<

Je crois que c'est un problème de positionnement relatif. Je ne peux pas mettre "absolu" car le bloc est suceptible de s'agrandir ou de diminuer.

Merci d'avance pour votre aide.

[:fafane84]

---------------
Mon Topic de Vente Hardware

Publicité

KangOl

Profil : pointeur

et si tu mettais un padding/margin a ton footer ?

---------------
Nos estans firs di nosse pitite patreye...

fafane84

Salut quelle rapidité !!!

Non, çà ne va pas car le <div id="footer"> est inclus dans le <div id ="conteneur">.

Si je le mets à part, c'est la panique il remonte c'est dû au positionnement relatif.

Message édité par fafane84 le 10-03-2005 à 11:44:50

---------------
Mon Topic de Vente Hardware

KangOl

Profil : pointeur

tiens, de la doc : http://css.alsacreations.com/Model [...] age-en-CSS

---------------
Nos estans firs di nosse pitite patreye...

sibelius

Vous êtes sûr ?

Question bête : à quoi te sert ton positionnement relatif ?? :??:
Le positionnement relatif ne sert qu'à :
- décaler les éléments par rapport à leur place normale
- contenir d'autre éléments positionnés

Dans ton cas, je ne vois vraiment pas l'intérêt.

Il suffit effectivement de mettre une marge au footer.

Mais les menus latéraux en absolu ne vont pas faciliter les choses. Il vaut mieux, dans ton cas, les placer en flottant et appliquer un clear both au footer

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

fafane84

Bon çà y est j'ai réussi à faire ce que je voulais : >> ici <<.

Seulement un problème persiste avec Internet Explorer 5.5 (IE 6, je ne sais pas j'ai pas testé) : j'ai un décalage d'un ou 2 pixels dans le texte du bloc central, mais après le bloc de gauche le texte se recolle à la bordure.

Voici le problème en image :

-> avec Firefox

-> avec IE 5.5

Y a-t-il un moyen de parser la chose ?

---------------
Mon Topic de Vente Hardware

Flyman30

fafane84 a écrit :

Bon çà y est j'ai réussi à faire ce que je voulais : >> ici <<.

Seulement un problème persiste avec Internet Explorer 5.5 (IE 6, je ne sais pas j'ai pas testé) : j'ai un décalage d'un ou 2 pixels dans le texte du bloc central, mais après le bloc de gauche le texte se recolle à la bordure.

Voici le problème en image :

-> avec Firefox
http://pagesperso.laposte.net/divx [...] irefox.jpg
-> avec IE 5.5
http://pagesperso.laposte.net/divx [...] s-ie55.jpg

Y a-t-il un moyen de parser la chose ?

Déja répondu sur un autre forum :whistle:

---------------
planuldep | Association pêche à la Sempé

fafane84

Oui et merci, mais çà ne marche pas.

---------------
Mon Topic de Vente Hardware

Flyman30

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">

html, body
{
margin:0;
padding:0;
background-color: #FFFFFF;
font-family: Verdana, Helvetica, sans-serif;
font-size:0.8em;
line-height:normal;
color:#000000;
height: 100%;
}
#top {
margin: 10px;
padding: 10px;
border: 1px solid green;
background: #FFF;
height: 100px;
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #top {
height: 70px;
}
#gauche {
position: absolute;
top: 110px;
left: 0px;
margin: 20px;
padding: 10px;
border: 1px solid red;
background: #FFFFFF;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #gauche {
width: 120px;
}
#principal {
margin: 20px 190px 20px 190px;
padding: 10px;
border: 1px solid blue;
background: #FFF;
}
#droit {
position: absolute;
top: 110px;
right: 0px;
margin: 20px;
padding: 10px;
border: 1px solid red;
background: #FFF;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #droit {
width: 120px;
}

#footer {
position: relative;
height: 30px;
margin: 15px;
border-top: solid 1px #006699;
background-color:cyan;
clear: both;
}

h1, h2, h3, h4, h5, h6, p, li
{
position: relative;
}

</style>
</head>
<body>

<div id="top"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</p></div>
<div id="gauche">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</p>

</div>
<div id="principal">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.
</p>
</div>
<div id="droit">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</p>
</div>
<div id="footer"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</p>
</div>
</body>
</html>

---------------
planuldep | Association pêche à la Sempé

FORUM HardWare.fr

Programmation

HTML/CSS

CSS : probleme de positionnement d'un bloc

Sujets relatifs
[PHP]Problème de zone multiligne pour export CSV	[RESOLU] [CSS] aligner deux DIV sans position absolu ???
Problème de sérialization	problème d'accent dans les liens
[PHP/HTML] probleme avec nl2br et textarea	Problème de Méta Modélisation
[Java] Probleme d'applet avec un package sous eclipse	[CSS] Newsletter - soucis de borders
[CSS] Alignement vertical d'un menu d'images?	CSS et formulaire
Plus de sujets relatifs à : CSS : probleme de positionnement d'un bloc

Page générée en 0.049 secondes