problème design mozilla firefox sur le forum Création de sites web - 18-06-2006 12:25:59

nathompson

Niveau 6

18 juin 2006 à 12:25:59

Bonjour,
J´ai crée un site. Il marche parfaitement avec Internet explorer, myweb4net, etc. Mais avec Mozilla Firefox, le truc est décentré ou je ne sais quoi. Image à l´appui :
http://nathompson68.free.fr/nathan/bl%e8me%20firefox.bmp
(en haut c´est le bug de firefox, en bas ie)
Est ce que vous savez comment régler le problème ?
merci
Nat

Memphis03

Niveau 7

18 juin 2006 à 12:29:28

J´ai eu exactement la même chose pour un de mes sites web. Et la seule solution pour moi était d´ajouter sur la page d´accueil "Optimisé pour Internet Explorer" :lo: désolé de pas pouvoir t´aider.
J´ai jamais su résoudre mon problème...

Styfore

Niveau 10

18 juin 2006 à 12:30:34

Heu.. A ce que je vois, l´écriture de ie est plus petite...

Peut être que ça ne laisse pas la place au menu de venir... essaye de chnager la taile d´écriture...

Memphis03

Niveau 7

18 juin 2006 à 12:34:31

Hooo! Mais il est pas con Styfore!

Pourquoi j´y ai pas pensé plutot!
"Memphis t´es vraiment con!"

Styfore

Niveau 10

18 juin 2006 à 12:36:11

Merci

nathompson

Niveau 6

18 juin 2006 à 12:38:06

nan en fait si vous regarder bien, tt est centré c´est bon. mais le probleme vien des deux barres grise de coté qui se décale. J´ai fait le site en include, et voila l´include de la page centrale :
http://nathompson68.free.fr/nathan/bl%e8me%20firefox%202.JPG
Comme vous le voyez, elle n´est pas centrer, mais braqué à gauche. sur mes screen de firefox on le voit. Par contre, ie explorer lui les centre, ce qui fait qu´il n´y a pas de décalage. Il faudrai donc que je fasse en sorte que cet include soit centrer.

Styfore

Niveau 10

18 juin 2006 à 12:43:37

Si je comprend bien, ce serais un problème d ecentrage...
rajoute ça dans body si ce n´est aps fait :

margin: auto;
widht: xxpx (la largeur de ta page)

Par contre, si c´est déjà fais.. je ne vois pas, il faudrais tout le code..

nathompson

Niveau 6

18 juin 2006 à 13:14:19

Merci pour vos aide
@Styfore : je rentre ca ou et comment dans body ? voila le code du haut:
</style>
</head>
<body>
<div id="container">
<table width="760" cellpadding="0" cellspacing="2">
<tr>
<th width="566" scope="col"><div align="left"><img src="../images/main_bg.jpg" width="495" height="42" />
</div></th>
<th width="186" scope="col"><img src="../images/sidebar_bg.jpg" width="220" height="45" /></th>
</tr>
</table>
etc etc
je le met ou ?

deepblue

Niveau 16

18 juin 2006 à 13:17:39

Donne tout en code :
http://simmstein.be/phpcode/?rub=wall

nathompson

Niveau 6

18 juin 2006 à 13:30:46

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
itional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
al.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<title>Frenchtradingcrew</title>
<link rel="stylesheet" href="../style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Homefront Studios" />
<meta name="description" content="oswd, open source template" />
<link rel="stylesheet" href="../style.css" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<table width="760" cellpadding="0" cellspacing="2">
<tr>
<th width="566" scope="col"><div align="left"><img src="../images/main_bg.jpg" width="495" height="42" />
</div></th>
<th width="186" scope="col"><img src="../images/sidebar_bg.jpg" width="220" height="45" /></th>
</tr>
</table>

<div align="left"></div>
<div align="left"></div><TABLE class=namo-sublist width=758 border=0>
<TBODY>
<TR>
<TD colSpan=4 height=20> <DIV align=center>
<P></DIV></TD></TR>
<TR>
<TD vAlign=top width=17 height=417>
<P>
<META content="Namo WebEditor v6.0" name=GENERATOR>
<h2 align="left"> </h2>
<P> </P></TD>
<TD vAlign=top width=454 height=417>
<DIV align=left>
<h2 align="left">Presentation</h2>
<div align="left"></div>
<p align="left">Here´s an unordered list:</p>
<div align="left">
<ul>
<li>Malesuada sed</li>
<li>Urna eu ipsum luctus</li>
<li>tortor in purus tincidunt</li>
<li>Praesent turpis libero</li>
<li>Donec at enim vel erat tempor congue nullam varius lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>
</div>
<p align="left">And here´s an ordered list:</p>
<div align="left">
<ol>
<li>Lacus et lorem turpis libero</li>
<li>Mauris tortor quam</li>
<li>In neque</li>
<li>Curabitur fringilla</li>
<li>Donec at enim vel erat tempor congue nullam varius lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ol>
<blockquote> <b>This is a Blockquote</b> <br />
Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. </blockquote>
</div>
<h3 align="left">Consectetuer adipiscing elit</h3>
<div align="left"><img src="../images/sample_image.gif" width="100" height="100" alt="" /> </div>
<p align="left" class="Style9">Images in the main div are styled with a border and padding, creating a black mat around the image, and a thin line bordering the mat. This can be disabled easily enough in the style sheet, and if that is done, the effect can be preserved by moving the style definitions of <b>#main img</b> to a class instead, and calling it only when needed. </p>
<p align="left">Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h3 align="left">How about a Form?</h3>
<form action="">
<div align="left">
<fieldset>
<legend>Legend</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name" class="textbox" value="your name here" size="30" />
<br />
<label for="email">Email:</label>
<input type="text" name="email" id="email" class="textbox" value="name@domain.com" size="30" />
<br />
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" class="textbox" rows="8" cols="30">Comments here</textarea>
<br />
<input name="submit" type="submit" class="submitbutton" value="Submit »" />
<legend> </legend>
</fieldset>
</div>
</form>
<p align="left"> </p>
<P> </P>
<P> </P>
<P> </P>
</DIV></TD>
<TD vAlign=top width=69> </TD>
<TD vAlign=top width=200><? include "right.php" ?> </TD>
</TR></TBODY></TABLE>
<p> </p>

</div>

</body>
</html>

Styfore

Niveau 10

18 juin 2006 à 13:32:07

PLus visible là ^^ :

http://simmstein.be/phpcode/?rub=wall&nom=h4rZ6cWP&type=xhtml

nathompson

Niveau 6

18 juin 2006 à 13:33:51

lol effectivement.
Et je fais quoi la alors ?

nathompson

Niveau 6

18 juin 2006 à 14:25:47

help me please

Yoda_Software

Niveau 30

18 juin 2006 à 15:10:37

style1, style 2, ... style9, ... ça sent le webbuilder à plein nez !

nathompson

Niveau 6

18 juin 2006 à 15:52:14

Les styles c´est juste les styles d´écritures.
J´utilise qu´on seul css.

Pas de solutions ?

Yoda_Software

Niveau 30

18 juin 2006 à 15:59:39

Pourquoi ne pas les avoir intégrés dans ton fichier style.css

Et puis tu pourrais leur donner un nom un peu plus parlant, non ? Parce que dans quelques mois, quand tu voudras modifier ta page, tu ne te souviendras plus trop ce qui correspond à quoi.

Pour ton problème, dans ton css, tu mets :
body
{
text-align: center;
}

container

{
margin: auto;
width: XXpx; // remplace XX par la largeur que tu
veux
text-align: justify; // ou center, comme tu veux
}

[Master_Yoshi]

Niveau 7

18 juin 2006 à 17:03:03

Je voudrais juste coriger un truc, c´est pas FF qui bug, c´est IE qui bug donc si ca marche bien sur IE c´est que t´as un mauvais code.

nathompson

Niveau 6

18 juin 2006 à 17:27:00

je ne l´ai pas intégré dans mon css car je maitrise très mal les styles de feuille en cascade.
Voila "body" de mon style css:
body,html {
background:#000;
color:#fff;
margin:0;
padding:0;
}

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

j´entre ce que tu m´as dit ou ?
Je te remercie pour ton aide

nathompson

Niveau 6

18 juin 2006 à 18:01:14

et voila le style css complet:
body,html {
background:#000;
color:#fff;
margin:0;
padding:0;
}

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
text-align: center;
}

container

{
margin: auto;
width: 758px;
text-align: justify;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}

a:link {
color:#CBD4E3;
text-decoration:none;
}

a:visited {
color:#CBD4E3;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#CBD4E3;
text-decoration:none;
}

form {
clear: both;
}

form fieldset {
border:1px dashed #373E4A;
margin:0;
padding:1em 1em 1em 5em;
}

form fieldset legend {
font-family:"Times New Roman", Times, serif;
font-size:150%;
font-style: italic;
font-weight: bold;
color:#e9df55;
background-color:#000;
margin: 0 0 0 -.5em;
padding:.5em;
}

label,input,select {
display:block;
width:200px;
margin: 0;
}

textarea {
width: 250px;
height: 150px;
margin-bottom: .5em;
}

.textbox {
color:#000;
background-color:#CBD4E3;
font-family:Arial, sans-serif;
font-size:.9em;
border:1px solid #fff;
padding:.3em;
}

.submitbutton {
background-color:#CBD4E3;
border:1px solid #fff;
color:#282D36;
width:80px;
}

blockquote {
color:#cbd4e3;
background-color:#282D36;
border-left:1px dotted #cbd4e3;
font:1em/1.5em "Times New Roman", Times, serif;
letter-spacing:.05em;
margin:1.5em;
padding:.75em;
}

container {

width:760px;
margin:0 auto;
}

header-wrap {

height:199px;
width:760px;
margin:0;
padding:0;
}

header {

height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.JPG) no-repeat top left;
margin:0 auto;
padding:0;
}

header h1 {

font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}

header h1 a {

color:#cbd4e3;
background-color:transparent;
}

header h1 a:link,#header h1 a:visited {

color:#cbd4e3;
background-color:transparent;
text-decoration:none;
}

header h1 a:hover,#header h1 a:active {

color:#cbd4e3;
text-decoration:none;
background-color:transparent;
}

navcontainer {

width:200px;
height:199px;
float:right;
background:#000 url(images/nav_bg.jpg) repeat-y top right;
line-height:1.3em;
margin:0;
padding:0;
}

nav {

width:219px;
margin:0;
padding:1em;
}

nav li {

list-style:none;
text-align:left;
margin:0 0 .5em 3em;
}

nav li a {

font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-weight:bold;
text-decoration:none;
letter-spacing:2px;
}

nav li a:hover {

color:#E9DF55;
}

main {

width:500px;
float:left;
color:#CBD4E3;
background:#000 url(images/main_bg.jpg) no-repeat top left;
padding:55px 20px;
}

main h2 {

font-size:1.8em;
margin:.5em 0;
}

main ol,#main ul {

margin-top:0;
margin-bottom:0;
}

main ul {

list-style-type:disc;
color:#e9df55;
background-color:#000;
}

main ol {

list-style-type:lower-roman;
font-style:italic;
}

main ol li,#main ul li {

background-color:#000;
color:#cbd4e3;
font-style:normal;
}

main img {

border:1px solid #778193;
float:left;
margin:.5em 1em .5em 0;
padding:.5em;
}

sidebar {

width:180px;
float:right;
color:#CBD4E3;
background:#000 url(images/sidebar_bg.jpg) no-repeat top right;
padding:55px 20px 0 0;
}

sidebar h2 {

margin-top:0;
margin-bottom:.5em;
color: #cbd4e3;
width:180px;
border-top:1px dashed #373E4A;
border-bottom:1px dashed #373E4A;
background:#000 none;
font-size:1.5em;
padding:4px;
}

sidebar ul {

list-style-type:none;
margin:0 0 1.5em;
padding:0;
}

sidebar li {

padding-left:1em;
background:#000 url(images/sidebar_nav_bullet.gif) no-repeat 0 .4em;
}

sidebar p {

font-size:85%;
margin:.75em 0;
padding:0;
}

footer {

clear:both;
background-color:#000;
border-top:1px dotted #373E4A;
text-align:center;
color:#697081;
font-size:85%;
padding:6px;
}

footer li {

display:inline;
padding:0 8px;
}

nav li a:link,#nav li a:visited {

color:#CBD4E3;
}

j´ai essayer dans body de mettre ca :
body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
text-align: center;
}

container

{
margin: auto;
width: 758px;
text-align: justify;
}