28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je travaille sur un site dont la hauteur du conteneur principal est définie à 100% minimum ;

http://creation-site.nuxit.net/malauka/cd_detail.php?albumREF=2

je voudrais que ce conteneur adapte sa hauteur au tableau qu'il contient, mais ... le tableau descend plus bas sur firefox et opera.

Voici un extrait du CSS :

* {
	font-family:"Courier New", Courier, mono;
	margin:0;
	padding:0;
}

html, body {
	height: 100%;
}

body {
	height: 100%;
	width: 100%;
	background-color:#1A1A1A;
}

#conteneur {
	position:relative;
	width:760px;
	min-height:100%;
	margin:auto;
}


l'intégralité se trouve sur ces deux pages :

http://creation-site.nuxit.net/malauka/css/modele.css
http://creation-site.nuxit.net/malauka/css/cd_detail.css

Merci à vous
Deux chose :

1 – min-height c'est très bien, mais il faudra penser à mettre un height: 100%; spécialement pour IE, un peu dépassé avec ces propriétés CSS trop "récentes" (moins de douze ans). Utiliser un hack (pas top) ou bien un commentaire conditionnel (mieux).

2 – Tout va bien sous Firefox. Par contre, tu as un exemple typique de flottant qui déborde son conteneur :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
(Toutes les infos nécessaires par là).
et dans ce cas? (j'utilise que firefox)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
  <style>
  body{position:absolute; z-index:0; bottom=0;}
  svg {float:left;width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;}
  </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0"
 viewBox="0 0 100 100" preserveAspectRatio="none">
 <defs>
  <linearGradient
   x1="0" y1="0"
   x2="100" y2="100"
   gradientUnits="userSpaceOnUse"
   id="gradobliq">
   <stop style="stop-color:#00ff00;stop-opacity:1" offset="0"/>
   <stop style="stop-color:#0000ff;stop-opacity:1" offset="1"/>
  </linearGradient>
 </defs>
 <g>
  <rect x="0" y="0" width="100" height="100"
   style="fill:url(#gradobliq);fill-opacity:1"/>
 </g>
</svg>
<div>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>
aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>
aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>
aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze<br/>aze
</div>

</body>
</html>


j'ai fait beaucoup de tests et de recherches sans resultats...
merci par avance
Modifié par marcous (17 Jun 2006 - 11:59)
Excusez mon incompétence.

Pour répondre à MPOP, je suis au courant de ces problèmes (min-height, ...), mais je pense que le mien ne se situe peut être pas là.

Ton lien ne fonctionne pas (serveur indisponible.

Je précise ma question :

1. ma page fait 100% en hauteur.
2. mon conteneur principal fait 100% mini.
3. le contenu est plus grand que 100%, et le tableau du bas dépasse en dessous du conteneur, qui lui s'arrête à 100%.

Comment faire pour que le conteneur s'etende jusqu'en bas??

(le problème est avec firefox & opéra, pas IE).
[RESOLU]Bon, ceci dit, j'ai trouvé une solution qui fonctionne à merveille, par contre ne me demandez pas pourquoi (la logique m'échappe quelque peu).

J'ai mis le conteneur principal en absolu, et zou.

#conteneur {
	position:absolute;
	width:760px;
	min-height:100%;
	margin:0 -380px;
	left:50%;
}


Merci de vos réponses.
migli a écrit :
Ton lien ne fonctionne pas (serveur indisponible).

Tiens, pour moi ça fonctionne…
En fait, mon problème est un peu différent mon fond est en svg,
donc, pas de "background-image" possible.
je dois mettre mon svg en "position:absolute" pour être en fond
mais apparemment cela détache le svg du parent!
donc "height:100%" ne ce réfère plus au père mais à la fenêtre.

Comment faire pour avoir un svg en fond qui couvre 100%
d'un document qui dépasse la taille de la fenêtre??
Modifié par marcous (29 May 2006 - 15:10)
marcous a écrit :
En fait, mon problème est un peu différent mon fond est en svg,donc, pas de "background-image" possible.

C'est un site pour Firefox uniquement ? Parce que le support SVG, c'est pas tout à fait ça pour l'instant avec les navigateurs du marché.
Alors qu'il ne serait pas bien compliqué (qui a dit « plus facile » ?) de faire la même chose avec un petit PNG en repeat-y.

marcous a écrit :
je dois mettre mon svg en "position:absolute" pour être en fond
mais apparemment cela détache le svg du parent!

C'est le principe du positionnement absolu.

marcous a écrit :
Comment faire pour avoir un svg en fond qui couvre 100%
d'un document qui dépasse la taille de la fenêtre??

Ça ne me semble pas possible. Ou alors il faut bidouiller à fond.
à migli,

Salut Smiley smile

Tout d'abord je tiens à t'informer que ta méthode de centrage horizontal n'est pas bonne. tu devrais tout simplement utiliser le margin:auto; pour #conteneur.

Tu n'as donc pas besoin de ce point de vue d'utiliser le positionnement (ni absolu, ni relatif).

Pour ton affaire, ce n'est pas ton conteneur qui s'arrête mais les flottant qui sorte de leur conteneur. Il s'agit d'un problème de contexte de formatage que tu peux résoudre par :

#conteneur {
overflow:hidden;
}

Modifié par clb56 (29 May 2006 - 20:51)
Effectivement, j'avais bêtement oublié que mon tableau etait dans un div flottant. Merci de tes conseils clb, j'ai corrigé le css, c'est plus propre comme ça et ça fonctionne partout. Impec.

Pour info, (je m'écarte un peu de la discussion mais je ne connais pas les "svg", désolé), je me lance dans la creation de site depuis quelques temps, essentiellement parce que je trouve ça marrant.

Je n'ai aucune formation et je fais ça un peu tout seul dans mon coin.

Si quelqu'un veut jeter un oeil et me balancer quelques observations, c'est avec plaisir.

Mon adresse est http://www.creation-site.org .

A part ça, je suis musicien, enseignant et compositeur. ( http://www.gilles-migliori.com ).

Ben voilà. Merci à vous.
migli a écrit :

A part ça, je suis musicien, enseignant et compositeur.

Smiley cligne

ben moi je suis musicien, enseignant et directeur...

... Donc tu dois me vouvoyer Smiley lol

Mais comme tu es compositeur alors je dois m'incliner...

... Ce que je fais bien volontier Smiley smile
clb56 a écrit :
ben moi je suis musicien, enseignant et directeur...

Alors en fait c'est Monsieur clb56, enseignant et directeur ?
Woula, il va falloir que j'édite tous mes messages où je t'ai tutoyé (sans compter ceux où je t'ai rudoyé…). C'est que je ne suis qu'un pauvre étudiant Smiley biggrin
a écrit :
je ne connais pas les "svg", désolé

"svg" signifie scalable verctor graphique, comme son nom l'indique, c'est un format de dessin vectoriel qui fait partie des normes du w3c.
Merci mpop pour ta réponce ça réconforte ce que je pensai.
a écrit :
Alors qu'il ne serait pas bien compliqué (qui a dit « plus facile » ?) de faire la même chose avec un petit PNG en repeat-y.

Mais repeat-y ne me permet pas d'optenir un dégradé oblique comme sur l'exemple...

a écrit :
C'est un site pour Firefox uniquement ?

Heu oui, j'utilise le moteur de mozilla.
a écrit :
Ça ne me semble pas possible. Ou alors il faut bidouiller à fond.

Ca sera donc du javascript! non?
Modifié par marcous (17 Jun 2006 - 11:59)
marcous a écrit :
Ca sera donc du javascript! non?

Possible… mais ça dépasse largement mes compétences…