Bonjour à tous,
J'ai quelques petits soucis ! Je suis en train de monter mon petit site perso qui est principalement une galerie web. J'ai donc créé mon design, je l'ai découpé et j'en suis au stade de la mise en place avec feuille de style.
J'ai quelques petits soucis pour placer correctement toutes les parties, j'aimerais arriver à tout faire fonctionner correctement sous Firefox dans un 1er temps, et à moi après à partir de là d'arriver à le faire pour IE
.
Voici l'adresse de mon site pour que vous puissiez voir les dégâts par vous même
http://duduben.free.fr/
Voici le code PHP de ma page principale, même si ce n'est pas sur ce point que ça bloque (bien entendu, c'est certainement loin d'être optimisé ni très clean lol).
Et... voilà mon soucis, le code CSS
Voilà, en espérant que vous pourrez m'éclairer et me permettre de résoudre mes soucis. Bien entendu je ne demande pas à ce que quelqu'un refasse et optimise tout mon code, mais au moins m'orienter pour trouver une solution.
Merci d'avance à tous (et toutes)
J'ai quelques petits soucis ! Je suis en train de monter mon petit site perso qui est principalement une galerie web. J'ai donc créé mon design, je l'ai découpé et j'en suis au stade de la mise en place avec feuille de style.
J'ai quelques petits soucis pour placer correctement toutes les parties, j'aimerais arriver à tout faire fonctionner correctement sous Firefox dans un 1er temps, et à moi après à partir de là d'arriver à le faire pour IE
.Voici l'adresse de mon site pour que vous puissiez voir les dégâts par vous même
http://duduben.free.fr/
Voici le code PHP de ma page principale, même si ce n'est pas sur ce point que ça bloque (bien entendu, c'est certainement loin d'être optimisé ni très clean lol).
<?php require_once(dirname(__FILE__) . '/galerie.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php require_once(dirname(__FILE__) . '/entete.php'); ?>
<title>Ben</title>
<link href="csssite.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #0A2A3F;
background-repeat: repeat-y;
}
-->
</style></head>
<body>
<div id="contenu">
<div class="banniere_gauche"></div>
<div class="banniere_droite"></div>
<div class="menu_espace_gauche"></div>
<div class="menu"></div>
<div class="corps_gauche"></div>
<div class="extension_corps_gauche"></div>
<div class="corps"><?php require_once(dirname(__FILE__) . '/' . IGAL_TEMPLATE); ?></div>
<div class="footer_gauche"></div>
<div class="footer"></div>
</div>
</body>
</html>
Et... voilà mon soucis, le code CSS
body {
background-color:#364048; /*Couleur de fond de la page Web*/
color:#000000; /*Couleur du texte*/
font-family:Tahoma; /*Polices d’écriture*/
font-size:11px; /*Taille d’écriture*/
padding:0; /*Pour que la page n’ai aucune marge*/
margin:0; /*Pour que la page n’ai aucune marge*/
background-image:url(); /*Motif si il y’en a un*/
background-repeat:no-repeat;
}
div#contenu {
width:1178px; /*Largeur du design*/
margin:0 0 0 -589px; /*Marges du design ( la 4eme marge représente la moitié de la largeur du div*/
position:absolute;
top:px; /*25px entre le coin supérieur de l’écran et le design*/
left:589px;/*50% de marge ( cela centrera le design )*/
background-image:; /*Motif si il y’en a un*/
background-repeat:no-repeat; /*Duplication du motif sur les axes x et y*/
border:; /* Bordure encadrant le design */
}
div.banniere_gauche {
background-image:url(images/Webdesign2_01.png);
width:589px;
height:285px;
margin-top:0px;
margin-left:0px !important;
margin-left:0px;
}
div.banniere_droite {
background-image:url(images/Webdesign2_03.png);
width:589px;
height:285px;
margin-top:-285px;
margin-left:589px !important;
margin-left:589px;
}
div.menu_espace_gauche {
background-image:url(images/Webdesign2_03-04.png);
width:382px;
height:115px;
margin-top:0px;
margin-left:0px !important;
margin-left:0px;
}
div.menu {
background-image:url(images/Webdesign2_05.png);
width:796px;
height:115px;
margin-top:-115px;
margin-left:382px!important;
margin-left:382px;
}
div.corps_gauche {
background-image:url(images/Webdesign2_05-06.png);
background-repeat:repeat-y;
width:382px;
_width:382px!important;
max-width:382px;
height:318px;
margin-top:0px;
margin-left:0px;
}
div.extension_corps_gauche {
background-image:url(images/Webdesign2_07-09.png);
background-repeat:repeat-y;
width:382px;
margin-top:-318px;
margin-left:0px;
}
div.corps {
background-image:url(images/Webdesign2_04.png);
background-repeat:repeat-y;
width:796px;
min-height:382px;
_min-height:382px!important;
margin-top:0px;
margin-left:382px;
}
div.footer_gauche {
background-image:url(images/Webdesign2_09-11.png);
background-repeat:repeat-y;
width:382px;
height:201px;
margin-top:-55px;
margin-left:0px !important;
margin-left:0px;
}
div.footer {
background-image:url(images/Webdesign2_11.png);
width:796px;
height:201px;
margin-top:-211px;
margin-left:382px;
}
/* Reglages personnels : */
ul , li { margin:0; padding:0; list-style-type:none; } /* Pas de marges automatique dans les listes, ni de puces */
a { color:#2375BF; text-decoration:none; }/*Paramètres des liens*/
a:hover { color:#64A2EC; }/*Paramètres des liens quand le pointeur est sur ceux-ci*/
h1 { text-align:center; margin:0; }/*Le texte des balises h1 est centré ( car il est souvent utilisé pour les titres), et cette balise n’a plus de marge automatique */
p { margin:0; padding:0; }/*Pas de marges automatiques sur les <p> */
div.clear { clear:both; }/*Nous verrons ceci un peu plus tard. */
img { display:block ; border:0; }/*Aucune bordure sur les <img>*/
Voilà, en espérant que vous pourrez m'éclairer et me permettre de résoudre mes soucis. Bien entendu je ne demande pas à ce que quelqu'un refasse et optimise tout mon code, mais au moins m'orienter pour trouver une solution.
Merci d'avance à tous (et toutes)
