28220 sujets

CSS et mise en forme, CSS3

[RESOLU ]:: Probleme de div !! Probleme sous firefox

bonjour ,
J'explique donc mon probleme , j'ai un flash dans un div qui lui meme est dans un autre div (plusieurs contener en faite).

EDIT: c'est la meme chose pour du texte !!!

Sous IE pas de soucis , mon div s'etend bien avec l'animation tandis qu'avec Firefox , mon animation passe par dessus tout et n'etend pas mon div

=> http://www.designforyou.info/index.php?page=photos
=> http://www.designforyou.info/index.php?page=contact

Vous verrez mieux le probleme ici !

petite explication de mon architecture =>

page index => <div id="content">

page photos inserée dans mon div content via un <?php include ?>

<div>ANIMATION FLASH</div>

CSS du div =>
div#content{
float:left;
margin-top:5px;
margin-bottom:5px;
vertical-align:top;
min-height:350px;
height:350px;
border:dashed;
border-width:1px ;
width:565px;
}


Merci d'avance pour votre aide Smiley cligne
Modifié par Tictac (04 Jan 2006 - 18:26)
j'ai resolu partiellment mon probleme en ajoutant

height:90%;

dans mon div#content !

comment mettre une height qui depend du contenu de mon div interne au div#content ?
Modifié par Tictac (03 Jan 2006 - 13:38)
salut,

Tout d'abord tu as des problèmes avec ton "php include" : les pages que tu inclus, il ne faut pas qu'elles aient les <html><head><body>..., juste le code que tu veux insérer.
Là tu insères une structure complète dans une autre. Ca ne va pas.
Regarde ce que tu as inclus dans ta partie content : 
div id="tab_menu_border"></div>
</div>

</div>
		<div id="content" align="justify">
		[#red]<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<script language="javascript" type="text/javascript">
function showpage() {
 document.getElementById('loader').style.display = "none"; 
 document.getElementById('main').style.display = "block"; 
}
</script>

<body >[/#]

<div align="left"><span class="titre_menu"><img src="images/photos.gif" width="78" height="43" /></span>



tu peux lire ce texte explicatif

Pour ton deuxième problème (mais il faut que tu règles le premier d'abord) : 
min-height:350px;
height:350px;

FF "obéit" parfaitement à ton code et donne une hauteur de 350px au bloc, et pas plus . Du coup la définition de la hauteur minimale ne sert plus à rien (tu ne peux vouloir en même temps qu'il soit au moins "ça" et juste "ça" de hauteur).
En revanche IE ne comprend pas le min-height et d'un autre coté ne va pas respecter la hauteur que tu as donné au bloc si le contenu le "pousse". (tu peux aussi le forcer à respecter la hauteur avec la propriété overflow, en lui disant de cacher tout ce qui déborde par exemple, ou en mettant un barre de défilement.)
Donc voilà pourquoi cela donne ce résultat. Dans un sens le problème vient plutôt d'IE que de FireFox.

As tu vraiment besoin d'une taille minimum ?? à mon avis, si tu mets un peu de contenu dans tes pages, ça atteindra vite les 350px.
Si tu veux vraiment ça, alors tu peux juste laisser le min-height:350px, et concernant le height:350px, le mettre en commentaire conditionnel pour qu'il ne soit interprété que par IE. Voir ces explications : Qu'est-ce que les commentaires conditionnels ?
Je suis moi-même débutant et j'ai appris pas mal de choses dans cette FAQ.
Si je t'ai dit des bêtises, que quelqu'un de plus averti rectifie.
A+
Modifié par Alan (03 Jan 2006 - 21:40)
Merci pour ta reponse , en fait ,j'avais mis le height à 350px , pour que la zone de pub soit bien positionnée sur la page , si j'enlve ca , la zone de pub vient se coller directement en dessous du div content !
Je vais donc essayer de trouver une autre solution à celui-ci !!


edit : solution trouvé Smiley cligne 

div#content{
float:left;
margin-top:5px;
margin-bottom:5px;
vertical-align:top;
height:340px;
border:dashed;
border-width:1px ;
width:570px;
display: inline-block;
}

html>body div#content{
float:left;
margin-top:5px;
margin-bottom:5px;
vertical-align:top;
min-height:340px;
height:auto;
border:dashed;
border-width:1px ;
width:570px;
display: inline-block;
}

Merci à toi Smiley cligne
Modifié par Tictac (04 Jan 2006 - 17:35)
Sujet clos
Aller à