28173 sujets

CSS et mise en forme, CSS3

Afficher une boîte sans contenu

Salut,

je viens de m'attaquer aux feuilles de style (css) et je viens de me rendre compte que mon site ne fonctionnait pas du tout sous IE Smiley decu

Je suis donc entrain de revoir mes feuilles de styles car j'utilisais le pourcentage pour les hauteurs de boite mais ça n'est à priori pas interpréter sous IE.

J'aimerai savoir comment faire pour afficher une boite qui n'a pas de contenu et pas d'hauteur ? par exemple : 


#menu
{
  float: left;
  width: 180px;
  margin-top: 15px;
  margin-left: 12px;
  background-color: #ffffff;
  border: 1px solid #333333;
}


merci Smiley smile
Modifié par guiguivts (20 Jan 2007 - 13:57)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Merci et désolé pour le code c'est corrigé. J'ai pas mal cherché avant de poster mais pas sur la FAQ je vais voir ça de suite

bye Smiley cligne
J'avais déjà vu ce lien en fait mais il ne résoud pas mon problème de hauteur Smiley decu

par exemple je souhaite afficher une boite centrale prenant presque toute la hauteur de l'écran et une partie de la largeur dans mon fichier html j'ai donc ceci : 



<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"> 
</head>

<body>

<div id="page">
</div>

</body>
</html>


et dans mon fichier style.css


html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#page {
border-style:solid; 
-moz-border-radius : 10px;
border-width:5px; 
border-color:grey; 
background-color:black; 
height:98%;
width:87%; 
}


sous firefox cela s'affiche sans problème sous IE en revanche la hauteur de 'page' n'est pas correcte Smiley decu
Modifié par guiguivts (20 Jan 2007 - 14:08)
guiguivts a écrit :
J'aimerai savoir comment faire pour afficher une boite qui n'a pas de contenu et pas d'hauteur ?

Simple curiosité : à quoi peut bien servir une boite qui n'aurait ni contenu ni hauteur ?
S'il s'agit uniquement d'un test de positionnement d'un bloc destiné à accueillir un contenu, on peut utiliser un contenu fictif (et là soit on invente, soit un utilise du faux-texte). On peut aussi, temporairement, attribuer une hauteur au bloc.


(Note de français du jour : il me semble que l'on dit « pas de hauteur », et non « pas d'hauteur ». Le H du nom empêche(rait) l'élision du E de l'article indéfini.)
Modifié par Florent V. (20 Jan 2007 - 15:02)
guiguivts a écrit :
sous firefox cela s'affiche sans problème sous IE en revanche la hauteur de 'page' n'est pas correcte Smiley decu

D'après le code HTML que tu cites, ta page n'est pas valide (en particulier : elle n'a pas de déclaration de type de document ou Doctype), et ne sera donc pas correctement interprétée par Internet Explorer. Ça joue peut-être sur ton problème.

Une petite suggestion en passant : si tu fixes la hauteur de ton conteneur principal à 100% (ou toute valeur en pourcentage de la hauteur de la fenêtre, à vrai dire), tu cours un risque : celui que le contenu de ta page ne dépasse la hauteur d'un écran, et ne vienne déborder du conteneur principal.

Utiliser une hauteur minimale (min-height) serait plus approprié. La FAQ parle des hauteurs minimales, si je me souviens bien. Smiley cligne
C'est bien pour le positionnement que je voulais m'en servir Smiley smile

Après quelques recherches j'ai plus ou moins trouvé une solution pour permettre à mon site fonctionnant très bien sous firefox d'être compatible sous IE.

J'ai rajouté à chaque boite l'attribut : 
position : relative;


De plus j'ai trouvé un petit script javascript qui permet de choisir quel fichier css associer à la page en fonction du navigateur, je suis donc entrain de faire des adaptations mais ça reste du bricolage...

Je me suis aussi rendu compte que sous IE l'utilisation de la balise object et l'utilisation des css entrainait une demande d'autorisation avant de charger la page, je vais chercher à supprimer cela..

ps : le français n'est pas mon fort Smiley lol
Modifié par guiguivts (20 Jan 2007 - 15:08)
Sujet clos
Aller à