cedricbujon Posté 14 Avril 2004 Partager Posté 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 .................... Lien vers le commentaire Partager sur d’autres sites More sharing options...
LaurentDenis Posté 14 Avril 2004 Partager Posté 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
cedricbujon Posté 14 Avril 2004 Auteur Partager Posté 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
cedricbujon Posté 16 Avril 2004 Auteur Partager Posté 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant