Problème avec valeur height en %

Question

Mafio

11 Apr 2006 à 16:20

Bonjour

Alors voila j'ai un problème avec ma hauteur de page.

Sur ie cela fonctionne mais pas sur Firefox ou Safari.
En fait, je ne sais pas comment faire pour que cela fonctionne sur les 3.
Au passage tout les commentaires sur le css ou le html sont les bienvenues.

Voila mon css :


body
	{
	margin: 0 auto;
	padding: 0;
    height:1200px;
	text-align: center;
	font: 0.9em "Arial", helvetica, sans-serif;
	background: #000;
	}
	
 div#cadre
 {
 width:700px; 
 height: 55%;		
 margin:15px auto;
 padding: 0 10px 0;
 text-align: justify;
 background: #000;
 border: 1px solid #fff;

 }
 .galerie
{
height: 90%;
margin:0 auto;
background: #000 ;
font: 0.9em Arial, serif ;
border: 1px solid #fff;
	}
		
h1#bandeau
 {
 width: 321px;
 height:107px;
 display: block;
 position: relative;
 background-color:#000;
 margin: 15px 0 10px 0;
 }
 
 /*Debut menu*/ 
ul#menu
 {
 height: 30px;
 width:100px;
 list-style-type: none;
 margin: 75px 0 110px 50px;

  }
  
ul#menu li
  {
  float: left;
  top:10px;
  
  }

ul#menu li a 
  {

  width: 70px;
  line-height: 30px;
  display: block;
  color:#fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;

 }
  
ul#menu li a:hover
  {
  color: #ff9c00;
  font-weight: bold;
  }
  /*Fin Menu*/

 h3
 {
 color:#ffa82c;
 border: 1px dotted #898986;
 padding-left: 5px;
 text-align: justify; 
 }

  
div#img
 {
width: 100%;
 }
  
.droite
  {
  position:relative;
  float: right;
  margin-right: 30px;
  margin-top: 50px;
  }
  .gauche
 {
 position:relative;
 float:left;
 margin-right:5px;
 margin-bottom: 2px;
 }
 a 
  {
  color:#898986;
 text-decoration: underline;

  }
 a:hover 
 {
 
 }
 a img{
 border: none;
 }
 
 div#centre
 {
 margin-left: 45px;
 width: 350px;
 }
 
 p
  {
 
 color: white;
 font-size: 1.1em;
 text-indent:0.2em;
 line-height: 1.3em;
 text-align: left;
  }
  p#footer a
  {
 position:relative;
 left: 250px;
 font-size: 0.9em;
 padding: 0 5px 0 5px;
 text-decoration: none;
 border-left: 1px solid #fff ;
 border-right: 1px solid #fff ;
 
  }

p#footer a:hover
  {
 color:#ffa82c;
 border-color:#000;
  }


ul#galerie_mini
{

    width: 350px;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
	
}

ul#galerie_mini li
{
	float: left ;
	color: #bd4343
}

ul#galerie_mini li a img
{
margin: 5px 5px ;
color: #000;
border:1px solid #fff;

}

dl#photo
{

position:absolute;
top:175px;
width: 300px;
margin-left:350px;
clear:both ;

}

dl#photo dt

{

font: 1.1em Arial, serif ;
color: #fff ;
margin-left: 30px ;
margin-bottom: 15px;
padding:5px;
border:1px dotted #fff;	
text-align: justify ;
	
}

dl#photo dd
{

margin-bottom: 10px ;
}

ET mon html :


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

 <head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Satoshi Okamoto, souffleur de verre</title>
<link rel="stylesheet" href= "style.css" type="text/css" media="screen" title="Satoshi Okamoto" />

<script type="text/javascript" src="gallerie.js"></script>
	</head>
		


	<body>
	
	<div id="cadre" class="galerie">

		<h1 id="bandeau"><img src="img/sato.jpg"/></h1>
		
		<ul id="menu">
		
	
		<li><a href=""><img src="img/portrait.jpg" alt="Portrait de Sakamoto"/></a></li>
				<li><a href=""><img src="img/oeuvres.jpg" alt="Oeuvres"/></a></li>
						<li><a href=""><img src="img/contact.jpg" alt="Contact"/></a></li>
								
								</ul>

<ul id="galerie_mini">
<h3>Créations année 2005</h3>

<li><a href="img/oeuvres/2.jpg" title="Caisse epargne 05"><img src="img/oeuvres-p/2-p.jpg"/></a></li>

<li><a href="img/oeuvres/3.jpg" title="Caisse epargne 07"><img src="img/oeuvres-p/3-p.jpg"/></a></li>
<li><a href="img/oeuvres/2.jpg" title="Caisse epargne 05"><img src="img/oeuvres-p/2-p.jpg"/></a></li>

<li><a href="img/oeuvres/3.jpg" title="Caisse epargne 07"><img src="img/oeuvres-p/3-p.jpg"/></a></li>
<li><a href="img/oeuvres/2.jpg" title="Caisse epargne 05"><img src="img/oeuvres-p/2-p.jpg"/></a></li>

<li><a href="img/oeuvres/3.jpg" title="Caisse epargne 07"><img src="img/oeuvres-p/3-p.jpg"/></a></li>
<li><a href="img/oeuvres/2.jpg" title="Caisse epargne 05"><img src="img/oeuvres-p/2-p.jpg"/></a></li>

<li><a href="img/oeuvres/3.jpg" title="Caisse epargne 07"><img src="img/oeuvres-p/3-p.jpg"/></a></li>







</ul>
<dl id="photo">
	<dt>	"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
								 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr"<br/>
								 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
								 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr"</dt>

<dd><img id="big_pict" src="img/oeuvres/3.jpg"/>
						
					</dd>

		
</dl>

		
		

	</div>
	
	<p id="footer"><a href="#">Haut de page</a>  <a href="index_e.html">English version</a> </p>
	</body>

</html>

Merci d'avance.

Vero

11 Apr 2006 à 16:36

Bonjour Mafio,

Quel est ton soucis exactement ?

a écrit :

Alors voila j'ai un problème avec ma hauteur de page.

Sur ie cela fonctionne mais pas sur Firefox ou Safari.
En fait, je ne sais pas comment faire pour que cela fonctionne sur les 3.

Il serait bon de préciser ce que tu cherches à obtenir.

Mafio

11 Apr 2006 à 16:41

Alors en gros, soit ma hauteur de page et trop courte car la class .galerie ne prend pas en compte les % sur Ff et Safari soit je suis obligé de notifier une hauteur fixe avec un div pour ma galerie mais la mon pied de page déconne completement.

Sinon si le css vous parait mal foutu, hésitez pas Smiley smile

Modifié par Mafio (11 Apr 2006 - 16:51)

Vero

11 Apr 2006 à 17:09

Cela ne répond pas à la question qui est : que cherches-tu à obtenir ?

Mais, en tout état de cause, il y a quelques erreurs dans ta page.

1/Tu associes une classe et une id au même conteneur



	<div id="cadre" class="galerie">

Et ensuite, tu définis des hauteurs différentes, au même conteneur donc, à savoir :


div#cadre
 {
 width:700px; 
 height: 55%;
....
}

.galerie
{
height: 90%;
...
}

J'avoue ne pas trop comprendre ta démarche ???

Pour info :

2/ La balise h3 doit se trouver en dehors de la liste à puce :


<ul id="galerie_mini">

<h3>Créations année 2005</h3>

n'est pas correct

Smiley cligne

Mafio

11 Apr 2006 à 19:39

ok... hum désolé j'étais au boulot donc pas trop de temps.
Mais merci des corrections, j'étais persuadé que l'on pouvait associer une classe et un id en meme temps^^
C'est pour cela que je changeais la taille de la class galerie.
Sinon pourquoi est-il non conforme de mettre un <h3> dans une liste a puce ?
Ca m'evite de devoir faire une classe pour limiter la taille de mon h3, qui et directement mis a la largeur du conteneur de la liste a puce.

Et je cherchais a obtenir un design qui puisse s'adapter à la hauteur de mes images. Et pas seulement a celui de mon texte ^^
Modifié par Mafio (11 Apr 2006 - 19:40)

Vero

11 Apr 2006 à 20:25

Mafio a écrit :

Mais merci des corrections, j'étais persuadé que l'on pouvait associer une classe et un id en meme temps^^

On peut faire cela. Mais les propriétés css définies se cumulent, en l'occurence la hauteur de ton div ...
Smiley cligne

Mafio a écrit :
Sinon pourquoi est-il non conforme de mettre un <h3> dans une liste a puce ?
Ca m'evite de devoir faire une classe pour limiter la taille de mon h3, qui et directement mis a la largeur du conteneur de la liste a puce.

C'est comme ça... dans un ul, il ne peut y avoir que des li.

En revanche, tu n'es pas forcément obligé de définir une classe pour h3.

Tu peux définir un style de cette manière :


#cadre h3 {
}

ou 

.galerie h3 {
}

Modifié par Vero (11 Apr 2006 - 20:26)

Mafio

11 Apr 2006 à 21:02

ok, mais seul ce titre doit avoir cette taille précise... dans ce cas une class ne serait elle pas plus approprié ?

knarf

12 Apr 2006 à 00:52

Bonjour Mafio,

Alors cela ne réponds pas à la question de départ mais comme tu également demandé des commentaires sur le code, j'ai remarqué cela.

<h1 id="bandeau"><img src="img/sato.jpg"/></h1>

Tu n'as pas mis l'attribut alt sur ton image ce qui fait qu'une synthèse vocale lira l'adresse de ton image.

ce qui donneras donc:

titre de niveau 1 img/sato.jpg , je suppose que ce n'est pas l'intitulé de ton titre "img/sato.jpg" ?

A aucun moment une personne utilisant ce type de matériel ne saura à quoi correspond le titre et tu pers une information très importante.

Si l'utilisateur décide de naviguer sans image ou qu'elles ne peuvent être chargées pour x raison, même combat, on perds le contenu du titre.

Dans le cas ou cette image ne servirait que de décor donc ne véhiculant aucune information , l'attribut alt est quand même nécéssaire mais il faut le laisser vide comme cela alt="" sinon c'est la même chose, l'adresse de l'image sera lue et viendras parasiter la navigation et la compréhension du site.

Phonétiquement JAWS prononce à peu de chose près img comme cela "eumgue"
Modifié par knarf (12 Apr 2006 - 01:00)

Vero

12 Apr 2006 à 01:12

Mafio a écrit :
ok, mais seul ce titre doit avoir cette taille précise... dans ce cas une class ne serait elle pas plus approprié ?

J'aurai tendance à dire l'inverse.
Une classe peut-être utilisée plusieurs fois dans une page. Pour désigner un conteneur particulier, on utilise un ID.

Différence entre une classe et un id

Mafio

12 Apr 2006 à 09:23

Effectivement, tu as raison Smiley smile

En fait j'ai tendance a oublier que les id ne servent pas uniquement à faire des conteneurs de grande taille. Pour le alt, c'est juste un oubli.

Merci à vous.

Sujet clos

CSS et mise en forme, CSS3

Problème avec valeur height en %