Problème avec les Positionnement en CSS-XHTML
Fermé
makweb
Messages postés
160
Date d'inscription
dimanche 8 avril 2007
Statut
Membre
Dernière intervention
6 septembre 2009
-
21 févr. 2008 à 12:29
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 - 22 févr. 2008 à 11:07
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 - 22 févr. 2008 à 11:07
A voir également:
- Problème avec les Positionnement en CSS-XHTML
- Logiciel positionnement gratuit - Guide
- Enlever le soulignement d'un lien css - Astuces et Solutions
- Css exposant ✓ - Forum CSS
- Trait css ✓ - Forum CSS
- Exemple test de positionnement greta - Forum Études / Formation High-Tech
4 réponses
makweb
Messages postés
160
Date d'inscription
dimanche 8 avril 2007
Statut
Membre
Dernière intervention
6 septembre 2009
20
21 févr. 2008 à 12:33
21 févr. 2008 à 12:33
Juste un détail:
L'adresse de la page WE est: CLIQUER ICI
L'adresse de la page WE est: CLIQUER ICI
makweb
Messages postés
160
Date d'inscription
dimanche 8 avril 2007
Statut
Membre
Dernière intervention
6 septembre 2009
20
21 févr. 2008 à 13:06
21 févr. 2008 à 13:06
Pas de réponse??
C'est urgent SVP, ca ma bloque tout ca, car j'hasite encore.
Merci pour votre gentillesse.
C'est urgent SVP, ca ma bloque tout ca, car j'hasite encore.
Merci pour votre gentillesse.
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 779
21 févr. 2008 à 21:26
21 févr. 2008 à 21:26
Bonjour,
Ici, l'urgence…
Pour nous présenter ton code, pense à utiliser le bouton indiqué.
1- Le bloc en clear n'est pas au bon endroit si tu veux voir le rouge en entier.
2- -moz-border-radius est réservé à Firefox.
3- Ce n'est pas encore faisable par CSS.
Il faut en passer par une simulation avec une image d'arrière-plan.
++
Les noms de couleurs ne prennent pas de majuscule.
Et préfère utiliser leur code.
Les identifiant unique peuvent utiliser un id avec leur correspondance dans le CSS par un #.
id=cadre" avec #cadre.
Ce n'est pas obligatoire, mais ça peut aider à les repérer, ça correspond à des habitudes répandues.
Je ne comprends pas bien la structure que tu as choisie.
Des <div> dans des <div> pour pas grand chose.
Tu te simplifierais la vie en t'en passant.
Et tu crées un bloc .cadre sans t'en servir.
Par exemple
avec
--
Ici, l'urgence…
Pour nous présenter ton code, pense à utiliser le bouton indiqué.
1- Le bloc en clear n'est pas au bon endroit si tu veux voir le rouge en entier.
2- -moz-border-radius est réservé à Firefox.
3- Ce n'est pas encore faisable par CSS.
Il faut en passer par une simulation avec une image d'arrière-plan.
++
Les noms de couleurs ne prennent pas de majuscule.
Et préfère utiliser leur code.
Les identifiant unique peuvent utiliser un id avec leur correspondance dans le CSS par un #.
id=cadre" avec #cadre.
Ce n'est pas obligatoire, mais ça peut aider à les repérer, ça correspond à des habitudes répandues.
Je ne comprends pas bien la structure que tu as choisie.
Des <div> dans des <div> pour pas grand chose.
Tu te simplifierais la vie en t'en passant.
Et tu crées un bloc .cadre sans t'en servir.
Par exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="HTML Tidy for Mac OS X (vers 1st March 2003), see www.w3.org" name="generator" /> <meta http-equiv="Content-Type" content="text/html; charset=mac" /> <link rel="stylesheet" href="acc.css" type="text/css" /> <title>Page d'accueil</title> </head> <body> <div class="cadre"> <div class="entete"> HAUT </div> <div class="milieu"> <div class="menu"> MENU <br /> menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu </div> <div class="contenu"> CONTENU <br /> contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu </div> <div class="partenaires"> PARTENAIRES <br /> partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires partenaires </div> <div class="enpied"> BAS </div> </div> </div> </body> </html>
avec
body, html { margin:0; padding:0; } body { background-color: gray; /* min-width: 960px;*/ height: 100%; /* overflow: auto;*/ background-image: url(../images/degrade_gris_v.gif); background-repeat: repeat-x; background-attachment: fixed; } .cadre { margin: 0 auto; width: 960px; } .entete { height: 70px; /* top: 0; left: 0; height: 68px;*/ width: 960px; margin: 0 auto; text-align: center; background-image: url(../images/entete_gris_v.gif); background-repeat: repeat-x; /* border: 3px groove navy;*/ background-color: navy; -moz-border-radius: 10px; } .milieu { padding: 0; /* border: 2px solid red;*/ background-color: darkred; -moz-border-radius: 10px; } .enpied { clear : left; background-color: teal; width: 960px; /* margin: 0 auto;*/ text-align: center; /* border: 1px solid #00FF0A;*/ -moz-border-radius: 10px; height: 28px; height: 30px; clear: left; } .menu { float: left; color: #FFA500; padding: 0; background-color: #000000; width: 200px; margin:1px; /* border: 1px solid #00CF0A;*/ -moz-border-radius: 10px; min-height:35em } .contenu { float: left; color: #EEE8AA; padding: 0; background-color: #3C3C3C; width: 548px; margin: 1px; /* border: 1px solid #00CF0A;*/ -moz-border-radius: 10px; bottom: -1px; min-height:35em } .partenaires { float: left; color: #FFA500; padding: 0; margin: 1px; width: 200px; background-color: #000000; cursor: sw-resize; /* border: 1px solid #00CF0A;*/ -moz-border-radius: 10px; /* clear: right;*/ bottom:-1px; min-height:35em }
--
Enax
Messages postés
203
Date d'inscription
lundi 11 février 2008
Statut
Membre
Dernière intervention
16 mars 2010
145
22 févr. 2008 à 11:07
22 févr. 2008 à 11:07
Un code valide avec :
- en tête,
- menu horizontal,
- menu vertical gauche de la hauteur de la page,
- menu vertical droit de la hauteur de la page,
- zone centrale qui s'adapte à la taille du contenu (et avec un ascenseur si le contenu est trop long),
- pied de page.
Le tout s'adapte automatiquement à la taille de la fenêtre du navigateur.
C'est fait à partir d'un squelette du site Alsacréation (y a un lien dans l'en tête du code). Faut d'ailleurs pas faire attention au texte de la page, c'est celui du squelette mais ça ne correspond plus au code.
- en tête,
- menu horizontal,
- menu vertical gauche de la hauteur de la page,
- menu vertical droit de la hauteur de la page,
- zone centrale qui s'adapte à la taille du contenu (et avec un ascenseur si le contenu est trop long),
- pied de page.
Le tout s'adapte automatiquement à la taille de la fenêtre du navigateur.
C'est fait à partir d'un squelette du site Alsacréation (y a un lien dans l'en tête du code). Faut d'ailleurs pas faire attention au texte de la page, c'est celui du squelette mais ça ne correspond plus au code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Largeur fluide, header/menu haut/menu gauche flottant/menu droite flottant/contenu/footer. </title> <style type="text/css"> /*<![CDATA[*/ /* CSS issu des tutoriels css.alsacreations.com */ body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em; width: 80%; height: 100%; margin: auto; padding: 0; } p { margin: 0 0 10px 0; } #header { height: 10%; background-color: #99CCCC; } #haut { height: 5%; background-color:#CCCCAA; } #conteneur { position: absolute; width: 80%; height: 100%; background-color:#CCCCFF; } #centre { background-color:#9999CC; width: 70%; max-height: 80%; overflow: auto; } #gauche { background-color:#CCCC00; float:left; width: 15%; min-height: 80%; } #droite { background-color:#AA55FF; float:right; width: 15%; min-height: 80%; } #pied { clear:both; height: 5%; background-color: #99CC99; } #menuhaut { list-style-type: none; margin: 0; padding:0; } #menuhaut li { display: inline; } #menuhaut a { margin: 0 2px; color: #000000; text-decoration: underline; } #menuhaut a:hover { text-decoration: none; } #menugauche { list-style-type: none; margin: 0; padding:0; } #menugauche li { margin-bottom: 5px; } #menugauche a { margin: 0 2px; color: #000000; text-decoration: underline; } #menugauche a:hover { text-decoration: none; } #menudroit { list-style-type: none; margin: 0; padding:0; } #menudroit li { margin-bottom: 5px; } #menudroit a { margin: 0 2px; color: #000000; text-decoration: underline; } #menudroit a:hover { text-decoration: none; } /*]]>*/ </style> </head> <body> <div id="conteneur"> <div id="header"> header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS"> (voir tous les modèles)</a> </div> <div id="haut"> <ul id="menuhaut"> <li> <a href="#">Menu 1</a> </li> <li> <a href="#">Menu 2</a> </li> <li> <a href="#">Menu 3</a> </li> <li> <a href="#">Menu 4</a> </li> </ul> </div> <div id="gauche"> <p> menu gauche </p> <p> largeur fixe : 150px avec utilisation de la propriété float:left; </p> <ul id="menugauche"> <li> <a href="#">Menu 1</a> </li> <li> <a href="#">Menu 2</a> </li> <li> <a href="#">Menu 3</a> </li> <li> <a href="#">Menu 4</a> </li> </ul> </div> <div id="droite"> <p> menu droit </p> <p> largeur fixe : 150px avec utilisation de la propriété float:right; </p> <ul id="menudroit"> <li> <a href="#">Menu 1</a> </li> <li> <a href="#">Menu 2</a> </li> <li> <a href="#">Menu 3</a> </li> <li> <a href="#">Menu 4</a> </li> </ul> </div> <div id="centre"> <p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété clear:both; sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p> <p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p> </div> <div id="pied"> pied de page (se place en dessous des éléments flottants grâce à clear:both;) </div> </div> </body> </html>