HELP !!! Problème mise en page de site web
fishmaster
Messages postés
2
Statut
Membre
-
fishmaster Messages postés 2 Statut Membre -
fishmaster Messages postés 2 Statut Membre -
Bonjour,
Je conçois actuellement un site web développé en HTML / CSS mais je rencontre quelques difficultés quant à la mise en page...
Les boutons de mon menu et les éléments de mon index sont complètement décalés ou différents lorsque je passe d'un navigateur tel que Mozilla Firefox à Internet Explorer.
Je suis novice en matière de programmation de site et là ça fait 3 jours que je suis dessus...
Voilà mon code HTML suivi de mon CSS :
-------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mon Site</title>
<link rel="stylesheet" media="screen" type="text/css" title="moncss" href="mon_css.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Pragma" content="no-cache">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<div id="container">
<div id="en_tete">
<img src="logo.jpg" alt="LOGO">
</div>
<div id="menu">
<ul>
<li><a href="lien1" title="Link 1">bouton1</a></li>
<br>
<li><a href="lien2" title="Link 2">bouton2</a></li>
<br>
<li><a href="lien3" title="Link 3">bouton3</a></li>
<br>
<li><a href="lien4" title="Link 4">bouton4</a></li>
</ul>
</div>
<div id="colonne_droite">
<h1>titre1h1>
<p>
texte
</p>
<br>
<h1>titre2</h1>
<p>
texte
</p>
<br>
<h1>titre3h1>
<p>
texte
</p>
</div>
<div class="spacer"> </div>
<div class="pied_de_page"> </div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------
Code CSS :
body{
margin-top:40px;
padding:0px;
background-color:#000;
}
#container{width:760px; height:auto; border:2px solid red; margin-bottom:20px; background-color:#ffffff; margin:auto;}
#en_tete{
margin:auto;
width:176px;
height:176px;
background-image:url("logo.jpg");
background-repeat:no-repeat;
margin-bottom:30px;
margin-top:10px;
}
a.bouton:link{
width:187px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-image:url(bouton.bmp);
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver;
}
a.bouton:visited{
width:187px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-image:url(bouton.bmp);
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver;
}
a.bouton:hover{
width:187px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-image:url(bouton2.bmp); <--Changement bouton pour faire 1 style
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver;
}
.bouton2{
text-align:center;
padding:5px;
}
#menu{
float:left;
width:180px;
height:auto;
text-align:center;
margin-top:30px;
margin-left:-14px;
padding:10px;
}
#menu ul {
list-style:none;
margin-bottom:10px;
padding:0px;
}
#menu li a {
height:28px;
margin-bottom:10px;
border-style:outset;
border-width:2px;
border-color:silver;
text-decoration:none;
}
#menu li a:link {
font-size:medium;
color:white;
margin-bottom:10px;
display: block;
background: url(bouton.bmp);
padding: 8px 0 0 10px;
}
#menu li a:visited {
width:160px;
height:28px;
margin:auto;
color:white;
display: block;
background: url(bouton.bmp);
padding: 8px 0 0 10px;
}
#menu li a:hover {
color:white;
font-size:larger;
margin-bottom:10px;
margin:auto;
background: url(bouton2.bmp);
padding: 8px 0 0 10px;
}
#colonne_droite{
float:right;
width:500px;
height:auto;
margin-top:20px;
margin-left:5px;
margin-right:5px;
background-color:#ffffff;
padding:5px;
}
div.spacer{
display:block;
}
#pied_de_page{
float:bottom;
display:block;
text-align:right;
width:auto;
margin-top:10px;
margin-bottom:10px;
}
h3{
color:blue;
}
p{
text-align:justify;
text-indent:20px;
padding-left:20px;
padding-right:20px;
color:blue;
}
h1{
padding-left:3px;
color:#505050;
}
-------------------------------------------------------------------------------------------------------------------------------------------------
Voilà !!!
Merci pour tous ceux qui sauront m'aider et me donner des conseils !!!
PS : si le programme présente des incohérences merci d'être compréhensif je suis ouvert à toute remarque constructive...
Je conçois actuellement un site web développé en HTML / CSS mais je rencontre quelques difficultés quant à la mise en page...
Les boutons de mon menu et les éléments de mon index sont complètement décalés ou différents lorsque je passe d'un navigateur tel que Mozilla Firefox à Internet Explorer.
Je suis novice en matière de programmation de site et là ça fait 3 jours que je suis dessus...
Voilà mon code HTML suivi de mon CSS :
-------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mon Site</title>
<link rel="stylesheet" media="screen" type="text/css" title="moncss" href="mon_css.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Pragma" content="no-cache">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<div id="container">
<div id="en_tete">
<img src="logo.jpg" alt="LOGO">
</div>
<div id="menu">
<ul>
<li><a href="lien1" title="Link 1">bouton1</a></li>
<br>
<li><a href="lien2" title="Link 2">bouton2</a></li>
<br>
<li><a href="lien3" title="Link 3">bouton3</a></li>
<br>
<li><a href="lien4" title="Link 4">bouton4</a></li>
</ul>
</div>
<div id="colonne_droite">
<h1>titre1h1>
<p>
texte
</p>
<br>
<h1>titre2</h1>
<p>
texte
</p>
<br>
<h1>titre3h1>
<p>
texte
</p>
</div>
<div class="spacer"> </div>
<div class="pied_de_page"> </div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------
Code CSS :
body{
margin-top:40px;
padding:0px;
background-color:#000;
}
#container{width:760px; height:auto; border:2px solid red; margin-bottom:20px; background-color:#ffffff; margin:auto;}
#en_tete{
margin:auto;
width:176px;
height:176px;
background-image:url("logo.jpg");
background-repeat:no-repeat;
margin-bottom:30px;
margin-top:10px;
}
a.bouton:link{
width:187px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-image:url(bouton.bmp);
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver;
}
a.bouton:visited{
width:187px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-image:url(bouton.bmp);
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver;
}
a.bouton:hover{
width:187px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-image:url(bouton2.bmp); <--Changement bouton pour faire 1 style
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver;
}
.bouton2{
text-align:center;
padding:5px;
}
#menu{
float:left;
width:180px;
height:auto;
text-align:center;
margin-top:30px;
margin-left:-14px;
padding:10px;
}
#menu ul {
list-style:none;
margin-bottom:10px;
padding:0px;
}
#menu li a {
height:28px;
margin-bottom:10px;
border-style:outset;
border-width:2px;
border-color:silver;
text-decoration:none;
}
#menu li a:link {
font-size:medium;
color:white;
margin-bottom:10px;
display: block;
background: url(bouton.bmp);
padding: 8px 0 0 10px;
}
#menu li a:visited {
width:160px;
height:28px;
margin:auto;
color:white;
display: block;
background: url(bouton.bmp);
padding: 8px 0 0 10px;
}
#menu li a:hover {
color:white;
font-size:larger;
margin-bottom:10px;
margin:auto;
background: url(bouton2.bmp);
padding: 8px 0 0 10px;
}
#colonne_droite{
float:right;
width:500px;
height:auto;
margin-top:20px;
margin-left:5px;
margin-right:5px;
background-color:#ffffff;
padding:5px;
}
div.spacer{
display:block;
}
#pied_de_page{
float:bottom;
display:block;
text-align:right;
width:auto;
margin-top:10px;
margin-bottom:10px;
}
h3{
color:blue;
}
p{
text-align:justify;
text-indent:20px;
padding-left:20px;
padding-right:20px;
color:blue;
}
h1{
padding-left:3px;
color:#505050;
}
-------------------------------------------------------------------------------------------------------------------------------------------------
Voilà !!!
Merci pour tous ceux qui sauront m'aider et me donner des conseils !!!
PS : si le programme présente des incohérences merci d'être compréhensif je suis ouvert à toute remarque constructive...
A voir également:
- HELP !!! Problème mise en page de site web
- Site de telechargement - Accueil - Outils
- Creation de site web - Guide
- Web office - Guide
- Mise en forme conditionnelle excel - Guide
- Impossible de supprimer une page word - Guide
