Problème de mise en page.
Résolu
johnnini62
-
snowflake Messages postés 82 Date d'inscription Statut Membre Dernière intervention -
snowflake Messages postés 82 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Pour commencer meilleurs voeux a tous et merci a ceux qui pourront m'éclaircir.
En gros je suis en train de refaire mon site entièrement avec Dreamweaver cs4 et je rencontre un souci au moment de placer les balises <li> </li> Enfin je ne pence pas que le problème vient de la mais je vous avoues que je suis en galère depuis 18H dessus.
L'idée étant de recréer le menu de ce template => www.dreamsanimations.com
Pour le moment le code que j'ai rentrer fonctionne sous IE mais je n'arrive pas a avoir le resultat positif sous Google Chrome! www.dreamsanimations.com/maquette.html
Je vous met le code ma futur page "tout au moins le projet" ci-dessous .
Merci d'avance a tous et a toutes.
Jonathan
<!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=utf-8" />
<title>Dreams Animations Sono Marck Calais , Animation Baptêmes communion mariages anniverssaire soirée dansante </title>
<link rel="shortcut icon" href="images/icon.gif" >
<style type="text/css">
<!--
#header {
height: 130px;
width: 760px;
margin-right: auto;
margin-left: auto;
background-color: #33C;
}
#logo {
float: left;
height: 130px;
width: 380px;
background-color: #0C3;
}
#menu {
background-color: #099;
float: right;
height: 120px;
width: 340px;
padding: 10px 0 0 40px;
}
#header #menu ul {
margin: 0;
list-style: none;
}
}
#header #menu ul li {
display: block;
float: left;
width: 140px;
padding: 0 0 5px 0;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
-->
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1></h1>
<h2></h2>
</div>
<div id="menu">
<ul>
<li>
<a href= "http://dreamsanimations.com/"> Accueil</a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Photos </a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Vidéos </a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Contacts </a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Forum</a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Partenaires </a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Livre d'or</a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Devis </a>
</li>
</ul>
</div>
</div>
</body>
</html>
Pour commencer meilleurs voeux a tous et merci a ceux qui pourront m'éclaircir.
En gros je suis en train de refaire mon site entièrement avec Dreamweaver cs4 et je rencontre un souci au moment de placer les balises <li> </li> Enfin je ne pence pas que le problème vient de la mais je vous avoues que je suis en galère depuis 18H dessus.
L'idée étant de recréer le menu de ce template => www.dreamsanimations.com
Pour le moment le code que j'ai rentrer fonctionne sous IE mais je n'arrive pas a avoir le resultat positif sous Google Chrome! www.dreamsanimations.com/maquette.html
Je vous met le code ma futur page "tout au moins le projet" ci-dessous .
Merci d'avance a tous et a toutes.
Jonathan
<!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=utf-8" />
<title>Dreams Animations Sono Marck Calais , Animation Baptêmes communion mariages anniverssaire soirée dansante </title>
<link rel="shortcut icon" href="images/icon.gif" >
<style type="text/css">
<!--
#header {
height: 130px;
width: 760px;
margin-right: auto;
margin-left: auto;
background-color: #33C;
}
#logo {
float: left;
height: 130px;
width: 380px;
background-color: #0C3;
}
#menu {
background-color: #099;
float: right;
height: 120px;
width: 340px;
padding: 10px 0 0 40px;
}
#header #menu ul {
margin: 0;
list-style: none;
}
}
#header #menu ul li {
display: block;
float: left;
width: 140px;
padding: 0 0 5px 0;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
-->
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1></h1>
<h2></h2>
</div>
<div id="menu">
<ul>
<li>
<a href= "http://dreamsanimations.com/"> Accueil</a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Photos </a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Vidéos </a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Contacts </a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Forum</a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Partenaires </a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Livre d'or</a>
</li>
<li>
<a href= "http://dreamsanimations.com/"> Devis </a>
</li>
</ul>
</div>
</div>
</body>
</html>
A voir également:
- Problème de mise en page.
- Mise en forme conditionnelle excel - Guide
- Impossible de supprimer une page word - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
- Mettre google en page d'accueil - Guide
2 réponses
ca ces le code du menu tu aimerai avoir... reste a telecharger les image pour faire fonctionner le menu et tu pourra faire les modification necessaire pour quil soi comme tu laime
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ton_titre</title>
<style type="text/css" media="all">
/* Menu */
#menu {
float: right;
width: 340px;
height: 120px;
padding: 10px 0 0 40px;
background: url(images/img03.jpg) no-repeat;
}
#menu ul {
margin: 0;
list-style: none;
}
#menu li {
display: block;
float: left;
width: 140px;
padding: 0 0 5px 0;
}
#menu a {
padding-left: 24px;
background: url(images/img04.gif) no-repeat left center;
text-decoration: none;
text-transform: lowercase;
font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-style: italic;
}
#menu a:hover {
background-image: url(images/img05.gif);
}
#menu .active a {
background-image: url(images/img06.gif);
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="http://www.dreamsanimations.com/">Accueil</a></li>
<li><a href="index.php?p=1_2_Devis">Devis</a></li>
<li><a href="index.php?p=1_3_Contact">Contact</a></li>
<li><a href="index.php?p=1_4_Photos">Photos</a></li>
<li><a href="index.php?p=1_5_Vid-os">Vidéos</a></li>
<li><a href="index.php?p=1_6_Forum">Forum</a></li>
<li><a href="index.php?p=1_7_Livre-d-or">Livre d'or</a></li>
<li><a href="index.php?p=1_8_Partenaires">Partenaires</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ton_titre</title>
<style type="text/css" media="all">
/* Menu */
#menu {
float: right;
width: 340px;
height: 120px;
padding: 10px 0 0 40px;
background: url(images/img03.jpg) no-repeat;
}
#menu ul {
margin: 0;
list-style: none;
}
#menu li {
display: block;
float: left;
width: 140px;
padding: 0 0 5px 0;
}
#menu a {
padding-left: 24px;
background: url(images/img04.gif) no-repeat left center;
text-decoration: none;
text-transform: lowercase;
font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-style: italic;
}
#menu a:hover {
background-image: url(images/img05.gif);
}
#menu .active a {
background-image: url(images/img06.gif);
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="http://www.dreamsanimations.com/">Accueil</a></li>
<li><a href="index.php?p=1_2_Devis">Devis</a></li>
<li><a href="index.php?p=1_3_Contact">Contact</a></li>
<li><a href="index.php?p=1_4_Photos">Photos</a></li>
<li><a href="index.php?p=1_5_Vid-os">Vidéos</a></li>
<li><a href="index.php?p=1_6_Forum">Forum</a></li>
<li><a href="index.php?p=1_7_Livre-d-or">Livre d'or</a></li>
<li><a href="index.php?p=1_8_Partenaires">Partenaires</a></li>
</ul>
</div>
</body>
</html>
Super cool merci a toi !
Je vais regarder en profondeur les différences a apporter car j'aime bien "essayer de savoir faire" quand ça m'énerve" En tout cas un grand GRAND MERCI A TOI .