28220 sujets

CSS et mise en forme, CSS3

Imposer une hauteur égale à celle de l'écran et problème firefox

Bonjour à tous,

J'ai 2 problèmes que je n'arrive pas à résoudre.

www.t2l-graphic.be

A partir de la section Présentation vous pouvez constater une bande grisé à droite dans laquelle je place mon sous menu.

Mon premier problème est le suivant comment puis-je forcer ce menu à avoir une hauteur égale à la taille de la fenêtre du navigateur. (Peu importe la résolution du surfeur).

Mon second problème survient avec l'utilisation de firefox : J'obtient une ligne de 1px juste en dessous de mon image du menu, alors que sous IE il n'y a aucun problème. Smiley sweatdrop


Je vous remercie de votre aide, si vous avez d'autres remarques, n'hésitez surtout pas ! Smiley cligne
Modifié par yannick (31 Aug 2005 - 14:26)
Un très rapide coup d'oeil...

En notant ton header ainsi (aucun besoin de lui donner une largeur à mon avis) 
#header {
margin-bottom: -5px;
}
la ligne blanche disparait sous FF.

Mais je ne suis pas certain que ce soit la meilleure solution à imaginer.
Modifié par jcm (31 Aug 2005 - 14:45)
Si je fais ce changement mon header remonte de 5 px sous IE ...

ce n'est donc pas encore la bonne solution, merci d'avoir essayer

Firefox m'énerve !!! Smiley biggrin
Modifié par yannick (31 Aug 2005 - 16:00)
Modérateur
salut,

ton probleme vient du fait que tu applique ton css de plusieurs façon, dans la page (façon obsolete) et dans le head de ta page + en fichier externe;

ça zappe ta valeur de 122px, ajoute alors dans ton head le css avec le hack suivant:
#header {
height:122px!important;


}

pour t'en convaincre et extrait tout tes styles vers un ou plusieurs fichiers css externe de façon plus clair pour toi et les navigateurs.
a plus.

edit: solution provisoire ! bien entendu...

re edit: pour ton image 100% de hauteur d'ecran elle ne purra pas prendre 100% de hauteur ou elle se trouve, elle prendra les 100% de header. (relation parent/enfant)
Modifié par gcyrillus (31 Aug 2005 - 17:35)
salut,

je suis désolé mais je ne comprend pas très bien certains points, peut-être pourrais-tu éclairer ma lanterne ? Smiley smile

Déja quand tu dis que j'applique mon css tu plusieurs façons, il est vrai que je l'applique en externe et aussi une petite partie en interne ( je l'ai mis de cette façon car le code change à chaque page principale), mais je ne comprend pas quand tu dis que je l'applique dans mon head de ma page ?

Ce n'est sûrement pas la meilleure solution mais je n'en ai pas trouvé de meilleures.

D'après ce que je comprend mon code css n'est pas propre du tout, pourrait-on me donner quelques conseils pour l'améliorer. Smiley biggrin

Je vous remercie pour tous les bons conseils que vous pourriez me donner Smiley ravi
Modifié par yannick (01 Sep 2005 - 20:16)
Modérateur
bonjour,
en reprenant le debut de ta page en lien:
<link rel="stylesheet" type="text/css"	media="print" href="print.css" />
		<link rel="stylesheet" type="text/css"	media="screen" href="docstyle.css" />
		<style type="text/css">
        <!--
#milieu {
height:450px;
width:100%; position:relative;
background-image: url(decoupe/accueil.jpg); background-repeat::no-repeat;
}


#droite {
	right: 0px;
	top: 40px;
	width: 250px;
	position: relative;
	height: 445px;
	background-color:#E8E8E8;
	filter: alpha(opacity=50);
	-moz-opacity:0.5; /* Mozilla */
	-khtml-opacity: 0.5; /* Safari */
	opacity: 0.5;
	float: right;
}
[#red]#header {
height:122px!important;


}[#black]
-->
</style>
<script type="text/javascript" src="footer.js"></script>

		</head>

	<body> 
		<div id="content"> <!-- Debut conteneur-->
		<!-- Debut Header --><div id="header"><img src="decoupe/menu.jpg" alt="menu" width="749" height="122" usemap="#Map"/>

on remarque que tu fait appelle a un fichier css, exterieur, qu'ensuite tu declare encore des styles dans l'entete de ta page, jusque la on peut penser que ton fichier exterieur et commun a toutes tes pages, et que le reste est specifique a cette page. cela peut fonctionner assez facilement au niveau des mise a jour, mais ensuite on decouvre a nouveau des style declaré directement dans les balises, la, tu devrais eviter a tout pris !(regarde ta balise img, c'est en plus pas bon du tout ) le principe de base c'est :contenu d'un coté et la mise en page (style) de l'autre.
Ta façon de faire est sujette a problemes.
tes styles s'ecrasent les uns les autres sans que tu puissent les maitriser totalement.

Commence par extraire tes style encore dans les balises en usant de "class et ou id", tu vas eclaircir et alleger ton code, par la suite il te sera facile d'intervenir sur tes mises en pages.
ensuite, tu tris ce que tu estime commun a l'ensemble du site pour le mettre dans un fichiers css externe qui sera appeler par toutes tes pages , puis le reste, specifique a certaines page dans des fichiers separer et charger seulement par les pages qui en ont besoin.

N'hesite pas a lire et relire les tutos relatif au xhtml et css .
Tu decouvriras au fur et a mesure tes erreurs et/ou apprendra a choisir les balises et attribut les plus adaptés et appropriés aux resultat voulu.

fais usage des validateur, cela va t'apprendre beaucoup, en tout cas ce qu'il ne faut pas faire Smiley cligne .

le code remis en rouge dans ton "entete de page" et le petit morceau de css que FF prendra en consideration, c'est un pansement sur une jambe de bois, il cache a priori une erreur.

bon courage et a plus .
merci de ta réponse j'y vois déja beaucoup plus clair Smiley cligne

Je pensais que mon code était ok vu qu'il était valide "XHTML 1.0 strict " ; je me disais que je pouvais laisser ces attributs à leurs places.

Donc si j'ai bien compris : je dois mettre la taille de mes images aussi dans un css externe ?

merci du coup de pouce en tous cas Smiley cligne
A+
Modifié par yannick (01 Sep 2005 - 21:20)
Modérateur
resalut
a écrit :
Donc si j'ai bien compris : je dois mettre la taille de mes images aussi dans un css externe ?

seulement dans le cas ou tu veut leurs imposer une taille differente que celles qu'elles ont réellement.
a plus
Sujet clos
Aller à