28118 sujets

CSS et mise en forme, CSS3

Hauteur de background doublée sur Firefox !?

Bonjour à tous,
Alsacreations, c'est comme la bible, on y revient malheureusement que quand on a un pépin...
J'explique.
J'ai créé un div "landersenbandeau" de 250px de lhauteur et 770 de largeur. Je lui attribue dans la feuille css une image de fond de la même taille. Et par-dessus tout ça, je met un titre H2, avec une image de fond semi-transparente de 30px.
Mon but est de placer ce H2 en bas du bandeau. J'ai essayé avec padding-top: 220px, et ça marche, sauf que...
Sur internet explorer, aucun problème, mais sur firefox, un espace de 220px est dégagé entre le bandeau de tête et le début du texte (qui est dans un autre div).
Bizarre, quand je lis dans le bouquin de Raphaël que c'est ie qui fait des trucs bizarres avec les paddings. Dans mon cas, c'est Firefox!

http://www.choucroutecrew.com/articles/landersen.htm

<div id="contenu">
<div id="landersenbandeau">
<h2>Nouvel an chez les vaches...</h2>
</div>

<div id="texte">
<a href="../imageslandersen/landersen.jpg" rel="lightbox" title=" "><img src="../imageslandersen/landersenmini.JPG" class="floatright"></a>

<p>Samedi 29 décembre, 15 heures pétantes. Au terme d'un voyage épique émaillé de 43 arrêts, la tribu Maupertuis, à la tête de son convoi, déboule sur le parking gravilloneux de la ferme-auberge Landersen.
Tiens, les Chameliers sont déjà arrivés!? Et Sophie Cow?</p>
<p>La neige tombe en abondance... au-dessus de 1400 mètres. Pour être exact, les sols sont enneigés une vingtaine de mètres au-dessus de la ferme, mais le moral des troupes est en berne. Les sarcasmes pleuvent tandis que Maupertuis fixe désespérément le vélux.
Et pourtant...</p>

<h3>Jour 1:Crème Chantilly au Schnepf...</h3>

<p>C'est le menu du petit-déj', le lendemain! En gourmands incorrigibles, Maupertuis, Calvin et Samy vont ramasser à la petite cuillère ce cadeau du ciel.
A la fin de la matinée, le ventre plein, les trois lève-tôt regagnent leurs pénates avec le sentiment du devoir accompli. Samy aura poussé le vice jusqu'à s'immerger dans la fraîche la tête la première, en tentant des trucs assez incroyables...</p>


<h3>Jour 2:On mange les restes au Gaschney...</h3>

<p>Cette fois-ci, on monte avec Chameauxxx, et un appareil photo. Les restes, ça n'a d'intérêt que si on a encore faim. Parce que le réchauffé, c'est pas pareil. Ca tombe bien, nous on a encore faim! La matinée durant, nous traquons les coins de fraîche qui restent, et les spots intéressants.</p>
<p>Côté sud, grâce à Jah, on trouve encore moyen de tirer les premiers sur une pente préservée qui nous reconduit à la station par un chemin descendant. </p>
<p>Dans la combe encombrée de végétation, Maupertuis se met la pression pour exploiter au mieux un moignon rocheux qui offre différentes voies... dont la plus courte!</p>
<p>Comme la veille, le troisième homme a assuré. </p>
</div>

</div>



div#contenu { 
	
    background-color: transparent;
    
    }

	div#landersenbandeau {
	padding-top: 220px;
	height: 250px;
	background-image: url(imageslandersen/landersenbandeau.jpg);
	width: 770;
	background-repeat: no-repeat;
	}
		
	div#bagenelles2bandeau {
	padding-top: 220px;
	height: 250px;
		background-image: url(photosbagenelles2/bandeaubagenelles2.jpg);
		background-repeat: no-repeat;
	}
		
  h2 { 
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    padding-left: 100px;
    line-height: 30px;
    font-size: 1.4em;
    color: rgb(0, 0, 153);
		background-image: url(nouveaudesign/pngsemitransparent.png);
		margin:0;
    }

		div#texte {
		padding: 0 30px 0 100px;;
		background-image: url(nouveaudesign/headerpenche.gif);
    background-position: 15px 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    background-repeat: no-repeat;
		}
		
		
  div#texte h3 { border-left: 3px solid rgb(0, 0, 153);
    border-bottom: 1px solid rgb(0, 0, 153);
    margin-left: 15px;
    padding-left: 5px;
    color: rgb(0, 0, 153);
    }

  div#texte p { text-align: justify;
    text-indent: 2em;
    line-height: 1.7em;
    }



Merci! Smiley sweatdrop
Modifié par selenien (15 Jan 2008 - 20:25)
Salut,
Ce que tu peux faire c'est d'enlever le padding et mettre ton "landersenbandeau" en 
position:relative

ensuite mettre ton H2 en
position:absolute;
bottom:0px;


et ca devrai marcher ^^
Modifié par hakkou (15 Jan 2008 - 20:45)
Coucou, c'est de nouveau moi.
(je remarque d'ailleurs que je n'ai pas classé ce topic comme étant résolu)

Mon nouveau casse-tête est le suivant. Je souhaitais inscrire le nom de l'auteur dans le titre de chaque article de mon site. Ce nom doit se trouver à droite, en petit.
J'ai réussi à obtenir ce résultat sous ie, en faisant ainsi:


HTML:
<div id="landersenbandeau">
<h2>Nouvel An chez les vaches... </h2>
<h2 id="auteur">par Maupertuis</h2>
</div>



CSS:
div#landersenbandeau {
	position: relative;
	height: 250px;
	background-image: url(imageslandersen/landersenbandeau.jpg);
	width: 770;
	background-repeat: no-repeat;
	}
		
	
		
  h2 { 
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    padding-left: 100px;
    line-height: 30px;
		width: 770px;
    font-size: 1.4em;
    color: rgb(0, 0, 153);
		background-image: url(nouveaudesign/pngsemitransparent.png);
		margin:0;
		position:absolute;
    bottom:0px;
    }
		
	h2#auteur {
		text-align: right;
		font-size: x-small;
		background: none;
		padding-right: 20px;
		
		}


Je superpose donc 2 titres h2, l'un n'ayant plus de background, et je peux décaler le deuxième.
Sauf que... regardez le résultat sur Firefox:

http://www.choucroutecrew.com/articles/landersen.htm

Smiley cligne
Modifié par selenien (24 Jan 2008 - 16:11)
bonjour
attention que dans h2 tu as un padding-left de 100px, tu dois donc le retrancher de width:770px sinon tu as une largeur totale de 870px

ta façon de faire me semble très tirée par les cheveux Smiley cligne il y a sûrement plus simple.
Sujet clos
Aller à