28220 sujets

CSS et mise en forme, CSS3

Toujours et toujours des problemes entre ie et ff !!!

Pages :
Bonjour ,

Aujourd'hui je continuais à construire mon site tranquilement et hop j'ouvre FF (au lieu de Ie) et là je vois que deux de mes pages sont décalées !
Alors je vous donne tout sa j'espere avoir un peu d'aide.

lien : http://www.sg93.bx.la

Code CSS :

body
{
background: #000000;
background-repeat: no-repeat;
color: #FFFFFF;
margin:auto;
width: 730px;
}

html, body
{
height:auto;
height:100%;
min-height:100%;
}

#header
{
width: 727px;
height: 124px;
background-image: url("images/header.jpg");
background-repeat: no-repeat;
margin: auto;
margin-top: 20px;
}

#menu
{
width: 727px;
height: 50px;
background-image: url("images/menu.jpg");
background-repeat: no-repeat;
padding-top: 10px;
}

.texte
{
font-size: medium;
text-align: center;
margin-top: -44px;
font-family: "04_03b", Arial, Verdana, serif;
text-align: center;
}

#contenu
{
width: 100%;
height: 368px;
background-image: url("images/contenu.jpg");
background-repeat: no-repeat;
font-family: "04_03b", Arial, Verdana, serif;
margin-top: 19px;
padding-left: 10px;
text-align: center;
}

#footer
{
width: 727px;
height: 50px;
background-image: url("images/footer.jpg");
background-repeat: no-repeat;
margin-top: -48px;
}

a
{
text-decoration: none; 
color: white;
margin-left: 7px;
}

a:hover
{
color: #000000;
}

a img
{
border: 0; 
}

.team1
{
float: right;
color: red;
font-weight: bold;
margin-right: 80px;
font-family: "Verdana", serif;
}
.team2
{
float: left;
color: red;
font-weight: bold;
margin-left: 80px;
font-family: "Verdana", serif;
}

li
{
margin-bottom: 10px;
}

ul
{
list-style-type: none;
}

p.info
{
font-family: "Comic Sans MS", serif;
color: green;
padding-top: 160px;
}


Alors pour les pages de décalements ce sont team.php (en cliquant sur team dans le menu)
Et pour contact (dans le menu)

Merci !!
Modifié par mKd (24 Jan 2006 - 18:09)
Salut Mkd


p.info
{
	font-family: "Comic Sans MS", serif;
	color: green;
	padding-top: 160px;
	[b]margin: 0px;[/b]
}


Normalement si tu rajoutes margin:0; dans ton p.info ca devrait suffir pour fonctionner correct.

@++
Ajoute dans ta CSS

#contenu table {
margin:auto;
}


et corrige ta css

p.info {
font-family: "Comic Sans MS", serif;
color: green;
margin-top:150px;
}



#contenu {
width: 100%;
background-image: url("images/contenu.jpg") top;
background-repeat: no-repeat;
font-family: "04_03b", Arial, Verdana, serif;
margin-top: 19px;
padding-left: 10px;
text-align: center;
}
Pareil ! Smiley decu

Je vais vous dire tout ce qui va pas :
Team.php ==>
-le team SG93 est plus en bas.
-les noms de droite sont carrement jusqu'au bout.
-pareil pour les noms de gauche.
- l'info en bas qui est écrit en vert.

Contact.php ==>
-tout le bloc est completement décalé à gauche

Tout ses problèmes se produisent sur FF sous ie c'est bon !

EDIT = je regarde le post d'en haut (je l'avais pas vu)
Modifié par mKd (24 Jan 2006 - 18:29)
Alors , merci déjà noklio
Déja pour le contenu si j'affiche le top; l'image ne s'affiche pas du tout!

Il reste les bugs :


Team.php ==>
-le team SG93 est plus en bas.
-les noms de droite sont carrement jusqu'au bout.
-pareil pour les noms de gauche.
- l'info en bas qui est écrit en vert.

Contact.php ==>
-tout le bloc est completement décalé à gauche
(RESOLU!)

Le texte en vert je voudrais qu'il soit comme il est actuellement sur les 2 navigateurs
Modifié par mKd (24 Jan 2006 - 18:39)
en effet c'est sa seulement maintenant le texte est trop haut mais je ne sais pas comment faire . !
J'ai essayer de faire :
<p class="...">texte ...

et :
p. ...{
font-size: 26px;
margin-top: 10px;
}

Mais la il y a un nouveau bug (sa marche sous FF et sous ie il est remonté et en plus petit)
Juste un truc,

désolé je suis comme toi pas spécialement expert mais je comprends pas pourquoi tu met:


body
{
background: #000000;
[b]background-repeat: no-repeat;[/b]
color: #FFFFFF;
[b]margin:auto;[/b]
[b]width: 730px;[/b]
}


tu devrais plutot faire faire un conteneur principale outu mettrais le head, puis le corps de ce que tu veux mettre et tu entre le tout en margin auto.

Smiley biggrin
En effet sa marche très bien !
Merci à toi !

Il reste :

-les noms de droite sont carrement jusqu'au bout.
-pareil pour les noms de gauche.
- l'info en bas qui est écrit en vert est plus en haut sur FF je voudrais que cette ligne soit à la même hauteur que Ie actuellement.

Merci! Smiley smile

EDIT = heu je vois pas trop ce que tu veux dire pour ton dernier post !
Modifié par mKd (24 Jan 2006 - 19:33)
Ben pourquoi tu rajoute:


body
{
background-repeat: no-repeat;
margin:auto;
width: 730px;
}


dans la partie body de ta css ?

Egalement tu voudrais que les noms soient placés comment et ou ?
Modifié par gesualda (24 Jan 2006 - 19:41)
Je voudrais que les noms soit exactement pareil que sur IE sur FF
Car sur ff ils se décalent completement !
a écrit :
Ben pourquoi tu rajoute:


body
{
background-repeat: no-repeat;
margin:auto;
width: 730px;
}


Ben je peux pas faire autrement ? non ?



dans la partie body de ta css ?
Modifié par mKd (24 Jan 2006 - 20:05)
mKd a écrit :
Je voudrais que les noms soit exactement pareil que sur IE sur FF
Car sur ff ils se décalent completement !

Lol moi c'est le genre de commentaire qui m'aide vachement... j'ai pas IE sous la main, donc tant pis, on attendra quelqu'un d'autre pour filer un coup de main.

Sinon sur le coup des propriétés CSS passées à l'élément body, c'est vrai qu'en général on n'agit pas ainsi, mais qu'on fait plutôt :

HTML
<html>
<head>
	...
</head>

<body>
	<div id="page">
		... tout mon contenu ...
	</div>
</body>
</html>

CSS
body {
	background: black;
	color: white;
	text-align: center;  /* pour réussir l'alignement horizontal dans IE */
}
div#page {
	width: 730px;
	margin: 0 auto;  /* pour l'alignement horizontal standard */
	text-align: left;  /* pour rétablir l'alignement du texte */
}
Et aussi, je me demandais à quoi ça peut servir ça :
html, body {
	height: auto;
	height: 100%;
	min-height:100%;
}

Déjà il me semble que préciser deux fois la même propriété mais avec deux valeurs différentes fait que la valeur précisée en deuxième l'emporte... donc une ligne de trop dans le code. Ensuite si on a height: 100%; je suis pas sûr qu'un min-height: 100%; soit nécessaire. Et enfin je sais même pas à quoi ça peut bien servir tout ça, de toute façon... mais j'espère qu'on pourra éclairer ma lanterne. Smiley smile

Je vois bien une utilité : permettre de positionner en bas de page une image de fond de body (sans repeat ou avec un repeat-x).
Modifié par mpop (24 Jan 2006 - 20:42)
Alors j'ai fais comme tu m'as dit :
Le probleme c'est que tout le menu et le contenu est décalé sur la gauche sur FF et sur Ie juste le contenu.
Mais ce probleme n'arrive que sur la page contact.php !
Allez on reprend,

Pour la CSS


body{
background: #000000;
color: #FFFFFF;
margin:0;
padding:0;
}
#cont{
	width: 730px;
	margin-right: auto;
	margin-left: auto;
}

#header{
width: 100%;
height: 124px;
background-image: url("images/header.jpg");
background-repeat: no-repeat;
margin-top: 20px;
}
#menu{
	width: 100%;
	height: 50px;
	background-image: url("images/menu.jpg");
	background-repeat: no-repeat;
	padding-top: 10px;
	text-align: center;
}

#contenu{
	width: 100%;
	height: 368px;
	background-image: url(images/contenu.jpg);
	background-repeat: no-repeat;
	font-family: "04_03b", Arial, Verdana, serif;
	text-align: center;
	background-color: #00CC00;
	color: #000000;
}
#contenu a{
text-decoration: none; 
color: white;
margin-left: 7px;
}
#contenu a:hover{
color: #000000;
}

#contenu ul{
	margin: 0px;
	padding: 0px;
	width: 20%;
	float: left;
	list-style-type: none;
}

#contenu #team1{
	background-color: #99CC00;
}
#contenu #team2{
	background-color: #FF9900;
}
#text{
	float: left;
	width: 60%;
	background-color: #FFFFCC;
}


Pour la partie HTM


<body>
<div id="cont">
<div id="header"></div>
<div id="menu">
   <a href="http://www.sg93.bx.la/index.php">Accueil |</a>
   <a href="http://www.sg93.bx.la/team.php">Team |</a>
   <a href="http://www.sg93.bx.la/forum/">Forum |</a>
   <a href="http://www.sg93.bx.la/modules/livredor/">Livre D'or |</a>
   <a href="http://www.sg93.bx.la/contact.php">Contact |</a>
</div>
<div id="contenu">
   <h2>TeaM SG93 :</h2>
<ul id="team1">
	<li title="5:61:8">zavatar</li>
	<li title="5:158:5">MKd^</li>
</ul>
<div id="text">
BlablabBlablab
Blablab
BlablabvBlablabvBlablabBlablabBlablabBlablab
BlablabvBlablabvvBlablabBlablab
</div>
<ul id="team2">
	<li title="5:62:12">JeEzY</li>
	<li title="4:483:10">Rital</li>
	<li title="5:107:12">J-jay</li>
</ul>
<h4>Info : Passer votre souris sur le nom de quelqu'un, vous pourrez voir ses coordonées.</h4>
</div>
</div>


Voila j'ai refais vite fait une partie de ta mise en forme. Base toi la dessus, c'est pas parfait, on pourrait modifier d'autres valeur, mais ce serait pas mal pour un début.
Bon alors tu doit rajouter dans la CSS:


#contenu h4{
	clear: both;
}


ensuite pour ton formulaire tu fais ca


<div id="cont">
<div id="header"></div>
<div id="menu">
   <a href="http://www.sg93.bx.la/index.php">Accueil |</a>
   <a href="http://www.sg93.bx.la/team.php">Team |</a>
   <a href="http://www.sg93.bx.la/forum/">Forum |</a>
   <a href="http://www.sg93.bx.la/modules/livredor/">Livre D'or |</a>
   <a href="http://www.sg93.bx.la/contact.php">Contact |</a>
</div>
<div id="contenu">
   <h2>TeaM SG93 :</h2>
<ul id="team1">
	<li title="5:61:8">zavatar</li>
	<li title="5:158:5">MKd^</li>
</ul>
<div id="text">
<form vname="FormName" action="modules/contact/formmail.php" method="post" enctype="multipart/form-data" name="form">
<p>
<label for="email">Expéditeur</label><br>
<input type="text" name="email" size="38">
</p>
<p>
<label for="sujet">Sujet</label><br>
<input type="text" name="subject" size="38">
</p>
<p>
<label for="message">Message</label><br>
<textarea rows="12" name="msg" cols="45">
<br><br>
<input type="submit" value="Envoyer">
</p>
</form>	
</div>
<ul id="team2">
	<li title="5:62:12">JeEzY</li>
	<li title="4:483:10">Rital</li>
	<li title="5:107:12">J-jay</li>
</ul>
<h4>Info : Passer votre souris sur le nom de quelqu'un, vous pourrez voir ses coordonées.</h4>
</div>
</div>


Pour le reste il faudra que tu vois par toi meme essaye le !
Modifié par gesualda (24 Jan 2006 - 21:35)
Ah j'ai trouver juste avant que tu post !
J'ai rajouter sa dans le global :

width: 730px;
margin-left: 18%;


Depuis sa marche donc manque plus que les autres bugs.
Merci !
Pages :
Sujet clos
Aller à