css centrer verticalement du texte dans bloc + autres pb ...

jojaba · Message par **jojaba** » 21 avr. 2005, 23:02

Bosoir à tous,
Je suis en train de plancher sur un nouveau site. Pour ce faire, je me suis lancé dans le xhtml et css et partant d'un modèle proposé par alsacréation (merci Calimo

pour l'info !). je n'ai rien mis en ligne pour l'instant.
Voici les trois problèmes que je souhaiterais résoudre :
1) J'aimerai centrer veerticalement le titre du header. J'ai déjà lu ça mais j'ai rien pigé, line-height c'est quoi

! Peut-être y-a-t-il une autre soulution plus simple ?
2) J'ai une barre blanche en haut de mon header sur ff alors qu'avec ie, l'affichage est correct.
3) En pointant la souris sur le dernier lien des boîtes de gauche, la boîte s'allonge par acoup vers le bas avec ie. Pour ff, pas de ce problème.

Que de sueur pour arriver à faire quelque chose respectant les standards et en même temps les facéties des navigateurs ! Je ne fais que tester sur ie et ff, je n'ose pas vérifier avec d'autres navigateurs de peur d'être complètement dégoûté !

Voici la page html :

Code : Tout sélectionner

<!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" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta content="JB" name="author" />
    <meta content="patati" name="description" />
    <link rel="stylesheet" type="text/css" href="principal.css" />
    <title>
      Patati
    </title>
  </head>
  <body>
    <div id="conteneur">
      <div id="header">
        <h1>Titre</h1>
      </div>
      <div id="gauche">
        
        <div class="menugauche">
          <ul>
            <li>
            <h3>Titre</h3></li>
            <li>
            <a href="">menu1</a></li>
            <hr />
            <li>
            <a href="">menu2</a></li>
            <hr />
            <li>
            <a href="">menu3</a></li>
            <hr />
            <li>
            <a href="">menu4</a></li>
            <hr />
            <li>
            <a href="">menu5</a></li>
            <hr />
            <li>
            <a href="">menu6</a></li>
            <hr />
            <li>
            <a href="">menu7</a></li>
            <hr />
            <li>
            <a href="">menu8</a></li>
            <hr />
            <li>
            <a href="">menu9</a></li>
          </ul>
          
        </div>
        <div class="menugauche">
          <ul>
            <li>
            <h3>titre</h3></li>
            <li>
            <a href="">menu1</a></li>
            <hr />
            <li>
            <a href="">menu2</a></li>
            <hr />
            <li>
            <a href="">menu3</a></li>
          </ul>
          
        </div>
      </div>
      <div id="menucentre">
        <ul class="menuhaut">
          >
          <li>
          <a href="">menu1</a></li>
          |
          <li>
          <a href="">menu2</a></li>
          |
          <li>
          <a href="">menu3</a></li>
          |
          <li>
          <a href="">menu4</a></li>
          |
          <li>
          <a href="">menu5</a></li>
          |
          <li>
          <a href="">menu6</a></li>
          |
          <li>
          <a href="">menu7</a></li>
          |
        </ul>
      </div>
      <div id="centre">
        partie centrale qui "pousse" les colones vers le bas.
        partie avec du contenu occupant le reste de la largeur
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br>
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br />
        partie avec du contenu occupant le reste de la largeur
        <br>
        partie avec du contenu occupant le reste de la largeur
      </div>
      
      <div id="pied">
        pied de page
      </div>
    </div>
    
  </body>
</html>

Et la css :

Code : Tout sélectionner

/* CSS issu des tutoriels css.alsacreations.com */
/* Pour mon site*/
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	margin: 0;
	padding: 0;
}
#conteneur {
	position: absolute;
	width: 100%;
}
#header {
	position absolute;
	height: 80px;
	background-color: #B0C4DE;
}
/* Menu au-dessus de la partie principale (centre) */
#menucentre {
	height: 20px;
	margin-left: 200px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #DCDCDC;
	-moz-border-radius: 20px;
	font-size: 90%;
	font-weight: bold;
}
.menuhaut {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menuhaut li {
	display: inline;
}
.menuhaut a {
	text-decoration: none;
	margin: 1 1px;
	color: #000000;
}
.menuhaut a:hover {
	text-decoration: none;
	color: #808080;
	background-color: #FFFFFF;
}
/* Menus de gauche */
#gauche {
	float: left;
	margin-left: 10px;
	width: 170px;
}
.menugauche {
	margin-top: 10px;
	margin-bottom: 5px;
	-moz-border-radius:  20px;
	font-weight: bold;
	color: #616161;
	text-align: center;
	background-color: #DCDCDC;
	font-size: 80%;
	padding: 2px;
}
.menugauche h3 {
	background-color: #616161;
	color: #FFFFFF;
}
.menugauche hr {
	color: #616161;
}
.menugauche ul {
	list-style: none;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0;
}
.menugauche a {
	text-decoration: none;
	margin: 0 0px;
	color: #000000;
}
.menugauche a:hover {
	text-decoration: none;
	color: #808080;
	background-color: #FFFFFF;
	display: block;
}
/* Partie principale (centre)*/
#centre {
	background-color: #FFDAB9;
	margin-left: 200px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 10px;
	-moz-border-radius: 20px;
	text-align: justify;
}
/* Pied de page */
#pied {
	clear: both;
	height: 30px;
	background-color: #FFFFE0;
}

Merci d'avance pour votre aide

jojaba · Message par **jojaba** » 22 avr. 2005, 20:26

En attendant vos réponses, j'ai trouvé déjà comment centrer verticalement le texte titre, il suffisait d'utiliser padding pour obtenir un retrait par rapport au "top", c'est tout bête !

voici la partie du css qui donne le résultat escompté :

Code : Tout sélectionner

/*Header*/
#header {
	position absolute;
	margin: 0px;
	padding=0px;
	height: 80px;
	background-color: #B0C4DE;
}
#header h1{
padding: 30px;
color:#FFFFFF;
font-size: 120%
}

Mais la barre blanche en haut est toujours présente (j'ai rajouté des valeurs pour le padding et le marging comme vous le constatez).

Le pb avec IE me tracasse plus. Je vais voir si c'est du à -moz-border-radius. Je crois que la marge de gauche sur ie est différente de celle sur ff, un problème supplémentaiore à résoudre !

jojaba · Message par **jojaba** » 22 avr. 2005, 20:39

apparemment, ce n'est pas le -moz-border-radius qui est en faute.
J'ai testé en enlevant les <hr /> (il semblerait qu'on n'a pas le droit d'insérer des barres horizontales dans une liste, c'est tidy qui me le fait savoir ! Encore une déconvenue

!
J'attends avec impatience vos propositions

Merci d'avance.

HP · Message par HP » 22 avr. 2005, 21:21

pour les barres dans une liste tu peux voir ici :
http://e-ghosting.com/xpfashion/
dans la sidebar
en survolant ton code xHTML il me semble que c'est ce que tu veux faire.

calimo · Message par **calimo** » 22 avr. 2005, 21:23

Attention à la syntaxe

#header {
position absolute;
margin: 0px;
padding=0px;

Fait attention, il y a plein de détails dans ce genre (des <br> non fermés etc.)

Tu peux supprimer <div id="header"> pour mettre <h1 id="header"> ce sera tout aussi efficace

Dans une liste tu n'as le droit de mettre que des éléments de liste, ce qui me paraît à peu près normal...

Plutôt que d'utiliser des hr, et vu que tu es en strict et que clairement les hr sont là pour la mise en page, ça n'a rien à faire en strict. Utilise les CSS pour styler le border-bottom par exemple

Pour positionner un bloc en position:absolute comme ton header il vaut mieux utiliser les propriétés top, bottom, left et right.

jojaba · Message par **jojaba** » 26 avr. 2005, 20:18

HP a écrit :pour les barres dans une liste tu peux voir ici :
http://e-ghosting.com/xpfashion/
dans la sidebar
en survolant ton code xHTML il me semble que c'est ce que tu veux faire.

Pas trouvé de sidebar moi sur le site que tu proposes

Peut-être a-t-il été modifié depuis

Merci tout de même

jojaba · Message par **jojaba** » 26 avr. 2005, 20:58

calimo a écrit :Attention à la syntaxe
#header {
position absolute;
margin: 0px;
padding=0px;

Pourtant là ils disent qu'on met un :

Je m'excuse d'étaler mon ignorance sur la place publique mais peut-être que cela rassurera certains néophytes tel que moi

calimo · Message par **calimo** » 26 avr. 2005, 21:03

Oui, 2 points exactement !
Mais si tu regarde ton message je ne sais pas pourquoi tu as mis un = à la place des ":"

==> padding : 0; est la syntaxe exacte. Pas besoin de mettre l'unité, 0 c'est 0

jojaba · Message par **jojaba** » 27 avr. 2005, 20:43

finalement, j'ai totu repris à zéro en utilisant un modèle d'alsacrétion différent:
http://css.alsacreations.com/modeles/modele16.htm

J'ai tenu compte de vos remarques et voici le résultat :

xhtml :

Code : Tout sélectionner

<!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>patati</title>
    <link rel="stylesheet" type="text/css" href="principal.css" />
   </head>

  <body>
    <div id="conteneur">
      <div id="header">
        <h1>Titre principal</h1>
      </div>
      <div id="gauche">
        <div class="boite">
        <h1>
          Titre
        </h1>
        <ul class="menuboite">
          <li>
          <a href="#">menu1</a></li>
          <li>
          <a href="#">menu2</a></li>
          <li>
          <a href="#">menu3</a></li>
          <li>
          <a href="#">menu4</a></li>
          <li>
          <a href="#">menu5</a></li>
          <li>
          <a href="#">menu6</a></li>
          <li>
          <a href="#">menu7</a></li>
          <li>
          <a href="#">menu8</a></li>
          <li>
          <a href="#">menu9</a></li>
          <li>
          <a href="#">menu10</a></li>
        </ul>
        </div>
        <div class="boite">
        <h1>
          Liens utiles
        </h1>
        <ul class="menuboite">
          <li><a href="#">menu1</a></li>
          <li>
          <a href="#">menu2</a></li>
          <li>
          <a href="#">menu3</a></li>
        </ul>
        </div>
      </div>
      <div id="haut">
        <ul id="menuhaut">
          <li>
          > <a href="#">menu1</a></li>
          <li>
          <a href="#">menu2</a></li>
          <li>
          <a href="#">menu3</a></li>
          <li>
          <a href="#">menu4</a></li>
          <li>
          <a href="#">menu5</a></li>
          <li>
          <a href="#">menu6</a></li>
          <li>
          <a href="#">menu7</a></li>
          <li>
          <a href="#">menu8</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é <code>clear:both;</code>
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 avec copyright et rappel de certains liens.
      </div>
    </div>
  </body></html>

css :

Code : Tout sélectionner

* CSS issu des tutoriels css.alsacreations.com */
/* Pour mon site*/
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin: 0;
padding: 0;
}

/* Conteneur pour un affichage adapté à la fenêtre */
#conteneur {
position: absolute;
width: 100%;
}

/* En-tête */
#header {
height: 80px;
background-color: #B0C4DE;
}
#header h1 {
margin-top: 20px;
margin-left: 100px;
color: #FFFFFF;
font-weight: bold;
font-size: 180%;
}

/* Menu haut (au-dessus du cadre principal)*/
#haut {
margin-top: 10px;
margin-left: 200px;
margin-right: 10px;
padding: 5px;
height: 20px;
background-color: #DCDCDC;
-moz-border-radius:  20px;
}
#menuhaut {
font-size: 80%;
list-style-type: none;
margin: 0;
padding: 0;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: none;
border-right: groove #808080 2pt;
padding-right: 8px;
}
#menuhaut a:hover {
	color: #808080;
	background-color: #FFFFFF;
	text-decoration: none;
}

/* Menu gauche */
#gauche {
float:left;
width: 200px;
margin-top: 10px;
}
.boite {
text-align: center;
background-color: #DCDCDC;
-moz-border-radius:  20px;
margin-left: 10px;
margin-right: 15px;
margin-bottom:10px;
padding: 5px;
}
.boite h1{
font-size: 120%;
background-color: #616161;
color: #FFFFFF;
}
.menuboite {
font-size: 80%;
list-style-type: none;
margin: 0;
padding:0;
}
.menuboite li {
margin-bottom: 5px;
padding-bottom: 5px;
}
.menuboite a {
margin: 0 2px;
color: #000000;
text-decoration: none;
display: block;
border-bottom: groove #808080 2pt;
}
.menuboite a:hover {
color: #808080;
background-color: #FFFFFF;
text-decoration: none;
}

/* Cadre principal */
#centre {
background-color: #FFDAB9;
-moz-border-radius:  20px;
margin-left: 200px;
margin-right: 10px;
margin-top: 10px;
padding: 5px;
}

/* Pied de page */
#pied {
clear:both;
height: 30px;
padding: 5px;
text-align: center;
font-size: 70%;
background-color: #FFFFE0;
}

p {margin: 0 0 10px 0;}

Je suis relativement satisfait du résultat, merci pour vos conseils précieux

Je n'arrive pas à centrer verticalement le texte entre les bordures du menu gauche. mais bon, c'est déjà pas si mal

Merci encore !

Geckozone

css centrer verticalement du texte dans bloc + autres pb ...

css centrer verticalement du texte dans bloc + autres pb ...

Qui est en ligne ?