Positionnement et hauteur variable en CSS

Positionnement et hauteur variable en CSS - HTML/CSS - Programmation

Marsh Posté le 09-05-2008 à 13:39:36    

Bonjour, j'ai quelques soucis pour faire ma feuille de style en CSS, et je commence vraiment à sécher.. j'aimerai obtenir ceci :
 
http://images0.hiboox.com/images/1908/a7g58jte.jpg
 
Merci d'avance.


---------------
https://www.malpy.fr/
Reply

Marsh Posté le 09-05-2008 à 13:39:36   

Reply

Marsh Posté le 09-05-2008 à 14:54:06    

Reply

Marsh Posté le 09-05-2008 à 18:58:06    

Bloc gauche et droit en float:left

Reply

Marsh Posté le 09-05-2008 à 21:16:40    

Et j'imagine en plus que juste le bloc "contenu" doit être scrollable, et que le 100% se réfère à la hauteur de la fenêtre du navigateur (pas du document).
 
Si tu vises IE, je te le dis direct: c'est infaisable sans javascript (IE6 certainement, IE7 avec un gros paquet de bidouille ça pourrait sans doute passer).
 
Et même avec Firefox ou Safari, ça va pas être la joie (genre essaie de faire fonctionner les touches claviers dans la zone défilable avec Firefox).
 
Bref, tout ça pour dire : le height: 100%, oublie. Et laisse ton document s'étirer.

Reply

Marsh Posté le 09-05-2008 à 21:48:28    

Mettre une hauteur à 100% dans un sélecteur html,body permet d'avoir un bloc qui occupe toute la hauteur de la page et de position son footer en bas (qui, du coup, sera positionné en absolu). Le tout sans faire de magouille CSSienne inavouable.
Par contre, ça ne fonctionnera pas pour IE6.

Reply

Marsh Posté le 09-05-2008 à 22:10:10    

Bonjour
 
j'aimerai un petit conseil....
 
J'ai presque la même disposition que Ainadeloth.
 
Sauf que moi, j'ai un menu entre le "header" et le "contenu", en dessous de mon contenu, un "footer", et du coté gauche de mon "contenu", j'ai des boutons en icones me dirigeant vers d'autres pages.
 
J'ai mes pages en PHP, avec chacunes dedans :
 
<?php include 'head.php'; ?>
...
<?php include 'foot.php'; ?>
 
Mon "head" seul affiche donc, le header, avec le menu horizontal, et les boutons icones sur la gauche.
 
Comment je peux adapter un css a mon exemple ? ou trouver un exemple facile a comprendre et a changer.
 
Merci d'avance
 :hello:  


---------------
L'amour c'est comme le jardinage : Cà commence par une pelle, et çà se termine par une graine.
Reply

Marsh Posté le 09-05-2008 à 22:22:20    

Tu n'as pas une copie d'écran à nous montrer ?

Reply

Marsh Posté le 10-05-2008 à 15:41:10    

Bonjour
 
Voici mes exemples :
 
Voici mon "head" avec un menu horizontal et sous-menus:
http://images0.hiboox.com/images/1908/b553am1u.jpg
 
Voici mon "foot":
http://images0.hiboox.com/images/1908/iye05u8w.jpg
 
Voici un exemple de page compléte:
http://images0.hiboox.com/images/1908/26b66wte.jpg
 
En faite, mon "head" et mon "foot" reste a chaque fois sur n'importe quel pages.
Dans mon "head" il y a 4 images, et un Newletter qui défile.
Les images sont différents suivant les différents pages.
 
Et dans la page compléte, il y a du contenu avec 3 colonnes.
 
Comment je dois m'y prendre pour adapter tout çà avec du CSS + facilement et + proprement ?
 
Merci d'avance.
 
Je suis preneur d'exemple ou de liens.
 
 :hello:


---------------
L'amour c'est comme le jardinage : Cà commence par une pelle, et çà se termine par une graine.
Reply

Marsh Posté le 11-05-2008 à 00:40:14    

Un bloc pour ton head (image + news)
Un autre pour ton menu (ul est une balise de type bloc, ça ira).
Ensuite, tu colles tes 3 colonnes.
Et le tout dans un conteneur pour centrer sur ta page.

Reply

Marsh Posté le 12-05-2008 à 21:29:22    

Merci pour cette réponse, mais je ne comprends pas cette histoire de "bloc" ?  
 
Si tu as un template comme exemple, ce serai pas mal.
 
Merci d'avance
 :hello:


---------------
L'amour c'est comme le jardinage : Cà commence par une pelle, et çà se termine par une graine.
Reply

Marsh Posté le 12-05-2008 à 21:29:22   

Reply

Marsh Posté le 13-05-2008 à 19:31:26    

Bonjour
 
j'ai trouver un code, et j'ai adapter :
J'ai un problème, lorsque je réduit ma fenêtre, et que je bouge la fenêtre par la gauche ou par la droite, mon bloc "contenu" ne suis pas vraiment, alors, que mon bloc "news" suit bien.
 
Par contre, j'aimerai bien que ce début de mise en page, passe pour un écran 800x600 voir + .... je dois changer quoi ?
Merci d'avance
 :hello:  
 
Styles.css :
 
 
div {
 text-align:center;
 }
div#bandeau {
 width:100%;
 height:150px;
 background-color:#00AAAA;
 }
div#menu {
 width:100%;
 height:21px;
 background-color:#009642;
 }
div#menugauche {
 float:left;
 width:180px;
 height:435px;
 background-color:#FFFFFF;
 }
div#menu_haut {
 margin-top: 10px;
 margin-left: 10px ;
 margin-right: 10px ;
 margin-bottom: 10px;
 width:160px;
 height:200px;
 background-color:#66CC33;
 }
div#menu_milieu {
 margin-top: 10px;
 margin-left: 10px ;
 margin-right: 10px ;
 margin-bottom: 10px;
 padding-top: 15px;
 width:160px;
 height:120px;
 background-color:#CC99CC;
 }
div#menu_bas {
 margin-top: 10px;
 margin-left: 10px ;
 margin-right: 10px ;
 margin-bottom: 10px;
 width:160px;
 height:60px;
 background-color:#FF89CC;  
 }
div#contenu {
 float:left;
 margin-top: 10px;
 width:500px;
 height:400px;
 background-color:#FFCC00;
 }
div#bloc_news {
 clear:both;
 float:right;
 width:180px;
 height:150px;
 background-color:#3860c0;
 }
div#pied_page {
 clear:both;
 width:100%;
 height:20px;
 background-color:#33FF99;
 }
 
 
Et mon code Html :
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Site CSS</title>
</head>
<body>
 <div id="bandeau">
  <div id="bloc_news">Bloc News
 </div>Bandeau des Photos
 <div id="menu">Menu</div>
 <div id="menugauche">
  <div id="menu_haut">Menu 1</div>
  <div id="menu_milieu">Menu 2</div>
  <div id="menu_bas">Menu Admin</div>
 </div>
 <div id="contenu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas  faucibus nunc. Morbi quis neque laoreet ante varius rutrum. Nam arcu  ipsum, blandit placerat, pharetra ut, pulvinar in, nulla. Vivamus  condimentum, elit eu faucibus sollicitudin, nisi metus fermentum mi,  sed egestas purus nunc sit amet est. Cras imperdiet, arcu sed placerat  viverra, arcu justo malesuada augue, a tristique nunc neque vitae  ligula. Mauris bibendum. Praesent nibh. Sed in lacus semper dui  lobortis dignissim. Nunc iaculis, tortor sed commodo tincidunt, neque  ligula porttitor orci, venenatis bibendum ante mi id massa.  Pellentesque ipsum urna, posuere non, pellentesque non, tempus at,  ipsum. Aliquam lacinia nisl sit amet ipsum. Nam volutpat vulputate  lacus. Integer orci dui, lacinia non, blandit sit amet, vulputate vel,  sem. Vestibulum mi neque, pharetra ut, venenatis et, ultricies vitae,  urna.
 </div>
 <div id="pied_page">Pied de page</div>
</body>
</html>


---------------
L'amour c'est comme le jardinage : Cà commence par une pelle, et çà se termine par une graine.
Reply

Marsh Posté le 13-05-2008 à 19:35:08    

Ton premier div n'est pas fermé !

Reply

Marsh Posté le 13-05-2008 à 20:56:09    

Je ne vois pas trop, désolé...
 
 :(


---------------
L'amour c'est comme le jardinage : Cà commence par une pelle, et çà se termine par une graine.
Reply

Marsh Posté le 14-05-2008 à 17:54:00    

Coucou
 
Il y a personne qui peut m'éclairer concernant mon 800x600 et +, et pour mon contenu de mon "contenu" s'adapte facilement a toute les écrans.
 
Faut-il que je fixe une largeur ? pour mon texte ? ou pour un bloc ? ou autre chose ?
 
Merci d'avance  
 :hello:  
 


---------------
L'amour c'est comme le jardinage : Cà commence par une pelle, et çà se termine par une graine.
Reply

Sujets relatifs:

Leave a Replay

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