disposition de DIV : je bloque malgré les tutoriel

cedricbujon · 14 Avril 2004

Bonjour à tous,

j'ai lu pas mal de tutoriels, visité plusieurs sites mais je n'arrive pas à obtenir ce que je souhaite, c'est à dire une page qui s'adapte à la taille du navigateur.

j'ai créé un design sous illustrator que j'ai ensuite découpé en tranches :

j'ai donc organisé ma page web et ma feuille CSS (d'après les recommandations) selon ce schéma :

J'ai les conteneurs entete et conteneur .

Ensuite dans le conteneur conteneur, j'ai 2 autres conteneurs :

mommenu

partenaires

les différentes tranches réalisées sous illustrator devient donc les images de fond des diiérents bloc.

Je souhaite donc avoir ma page étirable avec en particulier les blocs :

...milieu, et le bloc contenu qui s'adapte à l'espace restant de la page avec un overflow.

mais je commence à expérimenter les CSS ; voici les codes:

<body> 
<div class="entete"> 
<div class="entetegauche"></div> 
<div class="entetemilieu"></div> 
<div class="entetedroit"></div> 
</div> 
<div class="conteneur"> 
</div> 
</body>

body { 
background-color: #9999CC; 
PADDING: 0px; 
MARGIN: 0px; 
WIDTH: 100%; 
HEIGHT: 100%; 
} 
.entete { 
height:99px; 
WIDTH: auto; 
background-color: #00CC00 
} 
.conteneur { 
height: 100%; 
WIDTH: auto; 
background-color: #FFCC00; 
} 
.entetegauche { 
width:266px; 
height:99px; 
background: url(images/images/Hautgauche.gif); 
float: left; 
} 
.entetedroit { 
width:235px; 
height:99px; 
background: url(images/images/Hautdroit.gif); 
float: right; 
} 
.entetemilieu { 
height:99px; 
background: url(images/images/Hautmilieu.gif); 
WIDTH: auto; 
margin-left: 267px; 
margin-right: 236px; 
float: left; }

mais, maintant je suis perdu car :

1 - pourquoi mon bloc conteneur n'apparaît pas

2 - pourquoi le div hautmilieu n'apparait pas sauf si je met hautdroit en absolu (ou si je met pour hautmilieu à width: 100% j'ai hautdroit renvoyé à la ligne.

3 - le conteneur s'adapte au texte !!!

Par contre, si je transforme en ID au lieu de class, cela fonctionne (sauf que la calque conteneur à 100% est à la taille du navigateur mais ne prend pas l'espace restant il prend la taille visible du navigateur donc dépasse puisqu'il y a le 1er bloc (le 1er = 99 pixels donc il dépasse de 99 pixels).... ) ????????????

Par contre, en réduisant la taille du navigateur le bloc entete ne garde pas sa hauteur ???

mais je n'ai aucun changement de comportement avec le bloc hautmilieu

alors là, plus j'avance, plus je décroche .................... :yoot: :unsure: :wacko:

LaurentDenis · 14 Avril 2004

Hum... problème de démarche, en fait.

- Tu pars d'une base purement visuelle (d'ailleurs trop complexe pour débuter) pour faire ta CSS sans aucun contenu.

- Alors que CSS est une technique qui est explictement une surcouche de présentation sur un contenu HTML pré-défini.

En fait, c'est un peu le monde à l'envers : oublie illustrator et ton visuel. Définis un contenu simple. Structure-le (basiquement : titres, paragraphes, listes...). Et au bout du compte, explore progressivement les possibilités de rendu à l'écran via CSS, en finissant par les questions de positionnement que tu prends pour l'instant de front alors que ce sont les plus difficiles.

cedricbujon · 14 Avril 2004

merci LaurentDenis pour ton aide,

mais si j'ai bien compris les CSS, on sépare le contenu de la mise en forme, non ?

J'ai une grande partie de mon contenu (que j'avais fait sous forme de frames) donc maintenant, je travaille sue la mise en forme.

Je n'ai pas joint le contenu et les class supplémentaires de ma feuille de style qui concerne les balise h, a etc..

essai est un essai de présentation basique que je veux améliorer

Je doit bien être à peu près dans l'esprit des CSS....

contredis moi si c'est le cas

cedricbujon · 16 Avril 2004

j'avance dans mes découvertes des CSS, mais, je me heurte à différents problèmes dont en particulier ceux-ci :

j'ai rajouté un bloc GLOBAL ;

1: Si jindique height = 100 % pour un bloc il prend la taille de lécran ; cest normal, ok, en particulier pour le bloc GLOBAL. Mais si je lapplique aux autres blocs, il prennent effectivement la taille de lécran (donc dépassent comme il y a dautres blocs comme pour le bloc MONMENU) : ma question est comment faire pour quun bloc sétende en hauteur dans tout son bloc parent ??

2: Jai un espace (de 3px) qui apparaît sous IE mais pas Mozilla firevox à droit et à gauche du bloc ENTETEMILIEU malgré lajout de margin, padding et border à 0 ??

3: Jai positionné les blocs ENTETEGAUCHE et ENTETEDROIT avec float : si je ne déclare pas dans body le bloc ENTETEMILIEU en dernier, celui-ci descend. Pourquoi alors que jai fixé une hauteur du bloc parent ENTETE ?

Merci de votre aide.

Connexion

disposition de DIV : je bloque malgré les tutoriel

Sujets conseillés

cedricbujon

LaurentDenis

cedricbujon

cedricbujon

Veuillez vous connecter pour commenter

Parcourir

Activité