CSS : probleme de positionnement d'un bloc

CSS : probleme de positionnement d'un bloc - HTML/CSS - Programmation

Marsh Posté le 10-03-2005 à 11:26:42    

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
Reply

Marsh Posté le 10-03-2005 à 11:26:42   

Reply

Marsh Posté le 10-03-2005 à 11:30:44    

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


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

Marsh Posté le 10-03-2005 à 11:42:57    

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
Reply

Marsh Posté le 10-03-2005 à 12:02:54    

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


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

Marsh Posté le 10-03-2005 à 12:57:10    

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
Reply

Marsh Posté le 11-03-2005 à 09:41:15    

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/divxtutos/captures/css-firefox.jpg
-> avec IE 5.5
http://pagesperso.laposte.net/divxtutos/captures/css-ie55.jpg
 
Y a-t-il un moyen de parser la chose ?
 


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

Marsh Posté le 11-03-2005 à 09:51:54    

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é
Reply

Marsh Posté le 11-03-2005 à 09:56:52    

Oui et merci, mais çà ne marche pas.


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

Marsh Posté le 11-03-2005 à 10:07:02    

<!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é
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed