Achetez et vendez votre matériel multimédia d'occasion sur notre service de petites annonces informatiques gratuites

Webdesign déformé sous Firefox...

Forum informatique > Aide création et gestion de site > Webdesign déformé sous Firefox...

<<<1>>>

 [Page 1 sur 1 - 2 messages]
Informations Messages

Sarti

Avatar de Sarti
118 messages
DVD-RW
DVD-RW

Lien direct Le 06 Août 2009 à 22h08

Salut à vous,
je suis en train de créer un site web pour un gîte rural.

J'ai fais mon design sous Photoshop que j'ai découpé et intégrer dans une page PHP sous Dreamweaver CS4.

Au moment de la visualisation, sous Internet Explorer je n'ai aucun soucis, mais sous Firefox j'ai "du jeu" qui se forme entre l'image de gauche du menu, ce qui me casse tout...

J'ai structuré le design sous forme de tableau, voici le code HTML:

Code

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="images/header.gif" width="800" height="200" /></td>
</tr>
<tr>
<td width="226" rowspan="2" background="images/menu_.png"><p><img src="images/menu.gif" width="226" height="256" border="0" usemap="#Map" /></p></td>
<td width="574"><img src="images/header_.gif" width="574" height="10" /></td>
</tr>
<tr>
<td background="images/designgite2_04.jpg"><div align="center">essais</div>








</td>
</tr>
<tr>
<td colspan="2"><img src="images/footer.gif" width="798" height="144" /></td>
</tr>
</table>



Pour voir ce que ça donne:
Sous IE=> Http://www.gitedechantegri.fr/gite_IE.PNG
Sous Firefox=> Http://www.gitedechantegri.fr/gite_F.PNG


Merci beaucoup !
 
 

TheFanatics

Avatar de TheFanatics
479 messages
Processeur
Processeur

Lien direct Le 06 Août 2009 à 23h18

Bonjour,

Au vue de ton code, ce n'est pas très propre, pour un ci petit bout de code il doit y avoir des dizaines de règles non respectées. La CSS éxiste . . .

Elements à transférer en CSS :

Citation

width / height
background



Donc, pour être en règles, tous ces éléments doivent disparaître du code principal et passer en css externe.
Pour continuer, toutes les images (img) et tout le texte doit être encadré d'une balise <p>.
Les qui se promènent tout seul n'ont rien à faire ici, tout doit être contenu dans un <p>.

Pourquoi utiliser une map pour le menu ? L'outil selection, recadrage, etc existe sous photoshop !

De plus, si je peux me permettre, les tables sont un peu dépassés pour ce genre de chose, pourquoi ne pas utiliser les div ?

Sinon je ne suis pas si méchant que ça, j'ai fais cela en quelques secondes :

Css :

Code

#main {
width:800px;
margin:auto;
}

#header {
height: ..px; /* Taille de ton image */
}

#menu {
width: ..px; /* Largeur de ton menu */
float:left;
height:auto; /* Ou la hauteur de ton menu */
}

#content {
float:right;
height:auto;
background:#FFFFFF /* A remplacer par ta couleur du fond pour le contenu */
}

#footer {
clear:both;
}



Code (x)HTML :

Code

<div id="main>

<div id="header">

</div>

<div id="menu">Tes images pour le menu</div>

<div id="content">Ton contenu</div>

<div id="footer">Les élements du footer</div>

</div>



Pour toute question, n'hésites pas !
 
 

<<<1>>>

 [Page 1 sur 1 - 2 messages]

Forum informatique > Aide création et gestion de site > Webdesign déformé sous Firefox...

Chargement...

Chargement