28172 sujets

CSS et mise en forme, CSS3

[RESOLU]Coins arrondis et bannière pas centrer sous mozilla

Bonjour tout le monde, ayant déjà poster sur ce forum et ayant reçu des réponses rapidement et très satisfaisante je reviens vers vous pour un nouveau problème ...

Je crée actuellement un site pour une entreprise dans le cadre de mon stage pour mon passage en 2eme année d'un BTS SIO.

Sur le site en question sous le navigateur Mozilla (3.6) ma bannière n'est pas centrée (en haut à droite au lieu d'en haut au milieu) et les coins ne veulent pas s'arrondir Smiley fache
Pourtant les boutons de mes onglets sont eux bien arrondis.
En fait ce sont les images que j'ai mis depuis le code HTML qui pose problème.

Voici les morceaux de code en question

HTML
    <body>
    	<header align = "center">
    		<img src="images/banniere.png" width="500" >
    	</header>
...
</body>


CSS
header img
{
	-webkit-border-radius:75px 100px 100px 0px;
	-moz-border-radius:75px 100px 100px 0px;
	-o-border-radius:75px 100px 100px 0px;
	border-radius: 75px 100px 100px 0px;
}


J'ai essayer plusieurs solutions comme insérer l'image dans une <div> ou mettre une class="banniere" et mettre dans le CSS le .banniere {...} Mais en vain je n'y arrive pas ... Déjà que le site que je vais leur fournir ne serai que très peu compatible IE je voudrais bien qu'il le soit un minimum sous FF Smiley lol

De plus j'ai un petit problème sous IE je n'arrive pas à ajouter un background de fond dans une de mes <div> (Chaque problème en son temps mais si au cas ou j'aurai loupé quelques choses)

En revanche sur Safari et Chrome tout fonctionne parfaitement !

En vous remerciant ... Smiley smile
Modifié par sonizef (31 May 2012 - 15:28)
salut,

vite fait, avec FF 3.6 il faut via les CSS :

header { display: block; }


(à faire pour toutes les balises "HTML5" que tu utiliseras, pour IE < 9 utilises html5shiv)
Modifié par o06 (31 May 2012 - 11:51)
o06 a écrit :
salut,

vite fait, avec FF 3.6 il faut via les CSS :

header { display: block; }


(à faire pour toutes les balises &quot;HTML5&quot; que tu utiliseras, pour IE &lt; 9 utilises html5shiv)


Ça ne change pas d'un pouce même en mettant "header img { display : block; }" dans le CSS

(C'est déjà fait mais merci Smiley cligne )
en faisant qque chose comme : 

header { display: block; background: #FFF url(images/banniere.png) center no-repeat; }

ou

header { display: block; }
header img { display: block; width: 500px; margin: 0 auto; }

Modifié par o06 (31 May 2012 - 12:24)
Il en va de même avec Firefox 12.
Pour ce qui est align, il n'est pas supporté en HTML5.
a écrit :
Differences Between HTML 4.01 and HTML5

The "align" attribute is deprecated in HTML 4.01, and not supported in HTML5. Use CSS to align the content of a <div> element.

source

Donc comme indiqué par o06, il faut utiliser du CSS et un alignement par l'attribut margin.
Modifié par Pacodellavega (31 May 2012 - 13:20)
Ahh ! Un grand merci encore une fois !

Finalement j'ai enlever le contenu du <header> dans mon .html et dans mon CSS j'ai laissé que header{display : block; background : #FFF url (../banniere.png center no-repeat; et les borders raduis} et tout fonctionne parfaitement ... Smiley smile
Sujet clos
Aller à