Probleme CSS

[snooper]

Bonjour a toutes et a tous

je fais un essai graphique a la page http://www.legypteantique.com/xhtml/ et je ne comprends pas pourquoi la page s'affiche si mal au vu de son code, et ce de maniere si differente sous firefox et iexplore. le but étant que le rendu soit ainsi: http://www.legypteantique.com/xhtml0/

Voici le code en question, directement inspiré de http://www.siteduzero.com/tuto-3-62-1-c ... e-web.html



div id="menu">
<h3>
<div align="center">
<img SRC="images/carre-bleu.gif" height=7 width=7><span style="text-decoration:underline;"> Egypte Antique</span>
</div>
</h3>


<p>
<br/><img SRC="images/fleche-rouge.gif" height=9 width=6><A HREF="egypte-pour-sixieme.php"> Dossier 6ème</A>
<br/><img SRC="images/fleche-rouge.gif" height=9 width=6><A HREF="agriculture_egypte_antique.php"> Agriculture</A>

BLABLABLA

</div>


<div id="corps">


<p>
<div style="float:right; margin: 5px">
<A HREF="modifier_un_article.php">Modifier cet article</A>
</div>
</p>




<? include('ouchebtis.php'); ?>




<blockquote>
Legypte Antique recrute des rédacteurs. Pour plus d'informations, cliquez ici.
</blockquote>


<p>
<div align="center"><A HREF="#">Retour en haut de la page</A></div>
</p>

BLABLABLA

</div>

avec dans mon CSS les codes

BODY {
width: 750px;
margin: auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
}

#menu
{

float: left; /* Le menu flottera à gauche */
background-color: rgb(192,224,255);/*couleur de fond*/
width: 180px; /* Très important : donner une taille au menu */

}



#corps
{
background-color: rgb(255,255,255);/*couleur de fond*/
width: 570px; /* Très important : donner une taille au menu */
margin-left: 180px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 0px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

}

Normalement la page ne devrais telle pas afficher comme un tableau de 750 px de large avec le menu sur 180 px de large et l'article sur 570 juste a droite?

Ensuite, comment faire pour que la colonne de gauche descende aussi bas que la colonne centrale avec le systeme de div, à l'instar de http://www.legypteantique.com/xhtml0/ (version construite à base de tableaux)?

Enfin, pourquoi quand je mets le code padding-bottom: 0.2em;

font: 400 1.6em arial, sans-serif;
color: #536C71;
border-bottom: 12px solid #ddd; dans le style bleu

dans la feuille de style de la page http://www.legypteantique.com/xhtml0/ , le titre n'est pas souligné sous firefox quand il l'est sous iexplore, alors qu'avec le meme code, les titres sont parfaitement soulignés sur http://www.anata.fr?

Si vous pouvez me dépanner, je vous serai très reconnaissant et non-ingrat.

Cordialement

 

[julien__]

Ton premier problème c'est que ton élément central est centré alors que le reste est collé à gauche.

Résoud d'abord ça après la suite

 

[webmasterlamogere]

une remarque hors sujet : remplace le meta robots qui ne sert a rien par :

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 

[snooper]

julien__ tu veux dire quoi par la? En gros je veux que le site soit centré dans la page, avec le menu gauche a gauche et l'article a droite. Avec mon CSS, cela ne signifie pas: body aligné au centre, et placer menu à gauche du centre (comme a gauche d'un tableau centré)?

Que rectifier dans le code

BODY {

width: 750px;
margin: auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 10px; /* Idem pour le bas du navigateur */
background-image: url("/images/blue_background.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc */

}


#menu_haut
{
background-color: rgb(192,224,255);/*couleur de fond*/
width: 750px; /*on fixe une largeur, pareil que la largeur de l'image ^^*/
height: auto; /*hauteur automatique*/
border: 0px solid rgb(254, 140, 16); /*la bordure*/
margin-left: 0px;/*marge de gauche*/
border-top: none;/*pas de bordure en haut pour l'image*/
margin-top: none;/*pas de marge en haut*/

}





#menu
{
vertical-align:top;
float: left; /* Le menu flottera à gauche */
background-color: rgb(192,224,255);/*couleur de fond*/
width: 180px; /* Très important : donner une taille au menu */

}



#corps
{
vertical-align:top;
background-color: rgb(255,255,255);/*couleur de fond*/
width: 570px; /* Très important : donner une taille au menu */
margin-left: 180px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 0px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

}




Très coredialement




webmasterlamogere: merci beaucoup, idiotement j'avais oublié ce code

 

[Marie-Aude]

Erreurs d'imbrication de balises

<div id="corps">


<p>
<div style="float:right; margin: 5px">
<A HREF="modifier_un_article.php">Modifier cet article</A>
</div>
</p>

Le <p> doit être fermé avant le </div>

Ensuite, pour faire descendre ta colonne de gauche aussi bas que la colonne de droite, tu dois les avoir toutes les deux dans un conteneur. Cherche "faux column" sur Google tu auras plein d'exemple de layout

Enfin je te conseille fortement de mettre TOUS les éléments de présentation dans le CSS (autrement dit vier tous les align center et autres de ton code).

Tu structures ta page globalement, avec les div de tes différents conteneurs et du texte, et tu pars avec un css vide.
Tu construis peu à peu le positionnement des conteneurs principaux, et une fois que ça marche SOUS FIREFOX tu finalises la présentation détaillée.

 

[bproductiv]

premiere chose : commence par mettre un doctype pour ne pas faire passer IE en mode quirk

 

[snooper]

Bonjour

Marie-Aude

Je me suis servi du tuto de siteduzero.com (http://www.siteduzero.com/tuto-3-62-1-c ... e-web.html). Mais comment faire pour a l'instar du tuto mettre ses grandes catégories (menus, header, ...) dans des div tout en utilisant les paragraphes? Devrais-je refaire à l'ancienne en utilisant des tableaux.

<table>
<tr>
<td>
Menu gauche
</td>
<td>
Menu normal

...???

Le conteneur que tu parle n'est il pas inscrit dans le body, ou dois-je recourir aux méthodes à l'ancienne en créant un tableau invisible autour du contenu (<table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=1 WIDTH="760">)???

Sinon OK je vais repartir comme tu m'as dit depuis zéro.

bproductiv

Pragmatique, j'ai regardé le code source de ce forum:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

et celui de jeuxvideo.com que voici:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Quel est le "meilleur" code? La différence entre le Strict et le Transitional? Le EN derriere les // signifie t-il que le sitre est en anglais??? Car, a lire https://www.webrankinfo.com/forum/t/doctype.85649/, le STRICT a l'air plus contraignant que le transitional...






Sinon merci beaucoup à vous, Marie-Aude et bproductiv, d'avoir pu me donner des réponses à mon problème.

 

[Marie-Aude]

1- Pour les conteneurs et autres, je pense qu'avant même de partir de zéro sur la construction de ton site, tu devrais partir de zéro sur la compréhension des css.

Savoir quels sont les types de délimiteurs, par exemple, et ce qui peut se mettre dans quoi et vice versa.

Tu peux très bien mettre autant de <p></p> que tu veux dans des div... tu dois simplement faire attention à fermer tes balises <p> avant de fermer le div qui les contient.

Entre le strict et le transitionnel il y a en réalité peu de différences, essentiellement l'interdiction des frames, des targets, et du code de présentation dans le code html.

Pour toutes tes questions, une bonne formation de base s'impose.
Ce n'est pas dans un post de forum qu'on peut y répondre (mais à des questions précises, oui)

En ce qui concerne le doctype, tu peux aller voir l'excellent tuto d'alsacréations, qui a par ailleurs un bon tuto pour des mises en pages comme celles que tu souhaites réaliser.

 

[snooper]

OK, je suis en train de lire pas mal de tutos. En tenant compte de toutes les remarques, j'aboutis à: http://www.legypteantique.com/xhtml/page.php

avec pour code, dans le body

<div id="menu_haut">
<? include('menu-haut.php'); ?>
</div>

<div id="menu">
<? include('menu-gauche.php'); ?>
</div>

<div id="corps">
<? include('article.php'); ?>
</div>

<div id="menu-bas">
<? include('menu-bas.php'); ?>
</div>

et dans le CSS

#menu_haut


{
background-color: rgb(192,224,255);/*couleur de fond*/
width: 750px; /*on fixe une largeur, pareil que la largeur de l'image ^^*/
height: auto; /*hauteur automatique*/
border: 0px solid rgb(254, 140, 16); /*la bordure*/
margin-left: 0px;/*marge de gauche*/
border-top: none;/*pas de bordure en haut pour l'image*/
margin-top: none;/*pas de marge en haut*/
}




#menu


{
float: left; /* Le menu flottera à gauche */
background-color: rgb(192,224,255);/*couleur de fond*/
width: 180px; /* Très important : donner une taille au menu */
height: 100%;

}



#corps


{
background-color: rgb(255,255,255);/*couleur de fond*/
float:left;
position:relative;
left:0px;
width:570px;
}


#menu-bas
{
width: 750px; /*largeur*/
height: 20px;
float: left
}


Or, j'arrive au probleme qui a l'air detre majeur avec les CSS: comment faire descendre la foutue colonne de gauche jusqu'au header???

Bien cordialement

 

[Marie-Aude]

Je t'ai déjà donné la réponse... ça s'appelle "faux column" et il y a un tuto sur alsacreation pour ça. Notamment.

Mais une petite recherche Google sur "faux columns css" te donne plein de liens là dessus.
Tu verras, il te manque quelques conteneurs.

 

[snooper]

OK. C'est donc l'unique solution. Merci beaucoup.

PS: pour les conteneurs, je devrais emboiter tout dans un <div id="page_entiere">???

 

[Darkcity]

OK. C'est donc l'unique solution. Merci beaucoup.

PS: pour les conteneurs, je devrais emboiter tout dans un <div id="page_entiere">???

Le body est déjà la pour ça, non ?

 

[snooper]

C'est ce qu'il me semble j'essaie simplement de comprenfre le propos de marie aude sur les conteneurs

 

[snooper]

Sinon marie-aude, les sites que j'ai lu (alsacreation, http://pompage.net/pompe/colonnesfactices/) mais tout ce que je lis c'est ce genre de code à placer sur son body:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

Ce qui me tue, c'est qu'il existe des milliers de sites avec CSS et seulement deux ou trois articles dessus. Comment faire pour avoir deux colonnes fixes sans pour autant avoir un fond uni? Puis-je mettre une image du type

background: url(../images/fond_d_ecran.gif) url(../images/bg_birch_800.gif) repeat-y 50% 0;

J'ai essayé de mettr dans #menu
background-image: url(images/fond-bleu-colonne.gif) left top repeat-y;/*couleur de fond*/

mais ca ne marche pas

url(data/18-gauche.png




Enfin, comme faire pour ajouter le modifier a gauche des menus en h1, à l'instar de http://www.legypteantique.com/xhtml0/image_voulue.gif?



j'ai mis le code

<p>
<span class="modifier">Modifier</span>
</p>

<h1>Ouchebtis</h1>

avec dans mon css

.modifier

{
text-align: right;
}

et la, rien, nada (cf http://www.legypteantique.com/xhtml0/)

Si je mets un div float = right, le texte modifier "flotte" à droite du titre, mais pas à la même hauteur. Bon, je me dis que c'est parce que c'est en div, mais meme si j'essaie le code avec du span

<span style="float:right; margin: 5px">
Modifier
</span>
<h1>Ouchebtis</h1>

Cela ne fonctionne pas (cf http://www.legypteantique.com/xhtml0/in ... c_span.php, désolé pour ces liens trop nombreux)



Cordialement