[HTML/CSS] Contenu décalé : le replacer
Fermé
Visiteur
-
3 févr. 2011 à 00:28
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 - 6 févr. 2011 à 10:05
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 - 6 févr. 2011 à 10:05
A voir également:
- [HTML/CSS] Contenu décalé : le replacer
- Editeur html - Télécharger - HTML
- Word a trouvé du contenu illisible - Guide
- Espace html - Astuces et Solutions
- Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
- Br html ✓ - Forum Webmastering
30 réponses
J'ai gardé que le center, mais toujours le même problème.
Ça s'affiche comme ça :
http://img43.imageshack.us/img43/4892/menubug.jpg
Mais je veux que ça s'affiche comme ça :
http://img714.imageshack.us/img714/5067/shouldbelike.jpg
Merci.
Ça s'affiche comme ça :
http://img43.imageshack.us/img43/4892/menubug.jpg
Mais je veux que ça s'affiche comme ça :
http://img714.imageshack.us/img714/5067/shouldbelike.jpg
Merci.
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
5 févr. 2011 à 20:25
5 févr. 2011 à 20:25
Mais pourquoi avoir modifié ce que j'avais déjà fait pour le menu, le résultat semble pourtant pareil à ce que vous vouliez non?
Car quand la souris du visiteur est sur un lien du menu, l'image devrait changer pour une autre pour indiquer que la souris est dessus (hover)...
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
5 févr. 2011 à 21:28
5 févr. 2011 à 21:28
ah ok. peut-être que je peux aider mais il faut que je voie le code en question.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Code HTML :
Code CSS :
Merci olivierrobins pour ton aide.
<!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> <title>Think with us sliced</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body bgcolor="#FFFFFF" style="leftmargin=0px; topmargin=0px; marginwidth= 0px; marginheight=0px;"> <!-- structure sans tableaux --> <div id="cadre"> <div id="entete"> <ul id="navmenu"> <div class="menu"><li><a href="index.html">Home</a></li></div> <div class="menu"><li><a href="about.html">About</a></li></div> <div class="menu"><li><a href="contact.html">Contact</a></li></div> </ul> </div> <div id="menu_drapeaux"> <div id="md_col_gauche"> <p> Slogan </p> </div> <div id="md_bande_transparente_gauche"> </div> <div id="md_illu_centrale"> </div> <div id="md_col_droite"> <div class="cadre_bouton_drapeau"> <div class="pre_bouton_drapeau"> </div> <div class="bouton_drapeau">SMART </div> </div> <div class="cadre_bouton_drapeau"> <div class="pre_bouton_drapeau"> </div> <div class="bouton_drapeau">TOGETHER </div> </div> <div class="cadre_bouton_drapeau"> <div class="pre_bouton_drapeau"> </div> <div class="bouton_drapeau">EFFICIENT </div> </div> </div> </div> <div id="contenu"> <div id="col_gauche"> <h2>WELCOME</h2> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p> </div> <div id="col_droite"> <h2>NEWS AND EVENTS</h2> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p> </div> </div> <div id="pieddepage"> </div> </div> <!-- fin structure sans tableaux --> </body> </html>
Code CSS :
*{
padding:0px;
}
img{
border:none;
outline:none;
}
a{
text-decoration:none;
}
div#cadre{
width:800px;
margin-left:auto;
margin-right:auto;
}
div#entete{
width:100%;
height:100px;
padding-left:350px;
background-image:url('logo.jpg');
background-repeat:no-repeat;
background-position:10px 5px;
}
ul#navmenu{
display:inline;
}
ul#navmenu li{
float:left;
text-align:center;
list-style-type:none;
margin-left:20px;
margin-right:20px;
}
div#menu_drapeaux{
position:relative;
height:291px;
}
div#md_col_gauche{
position:absolute;
top:0px;
left:0px;
width:200px;
height:291px;
background-color:#5776b6;
font-size:40px;
}
div#readmore{
clear:left;
}
div#md_bande_transparente_gauche{
height:291px;
position:absolute;
top:0px;
left:200px;
width:40px;
background-color:#5776b6;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index:100;
}
div#md_illu_centrale{
position:absolute;
top:0px;
left:200px;
background-image:url('illucentre.jpg');
background-repeat:no-repeat;
width:460px;
height:291px;
}
div#md_col_droite{
position:absolute;
top:0px;
left:620px;
}
div#md_col_droite .cadre_bouton_drapeau{
}
div#md_col_droite .cadre_bouton_drapeau .pre_bouton_drapeau{
float:left;
width:40px;
height:97px;
background-image:url('degradegris.gif');
background-repeat:repeat-x;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index:100;
}
div#md_col_droite .cadre_bouton_drapeau .bouton_drapeau{
float:left;
width:130px;
height:97px;
background-image:url('degradegris.gif');
background-repeat:repeat-x;
border-left:1px solid #ffffff;
}
div#contenu{
width:800px;
}
div#contenu h2{
}
div#contenu p{
}
div#col_gauche{
float:left;
width:55%;
padding-right:5%;
}
div#col_droite{
float:left;
width:40%;
}
div#pieddepage{
clear:left;
}
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
#logo {
background-image: url(images/index_02.jpg);
height: 117px;
width: 280px;
font-size:40px;
font-weight:bold;
font-family:"century Gothic";
text-align:left;
line-height: 1.5;
}
#logo a{
color:#000000;
text-decoration:none;
}
a{
color: #666666;
text-decoration:none;
}
a:hover{
color: #666666;
text-decoration:underline;
}
.menu {
background-image: url(index_04.jpg);
font-family: "century gothic";
font-size: 20px;
font-weight:normal;
color: #353535;
text-decoration: none;
text-align: center;
}
.menu ul {
margin: 0;
list-style: none;
padding-left: 0px;
}
.menu li {
display: inline;
}
.menu a {
font-family: "century gothic";
font-size: 20px;
font-weight:normal;
color: #353535;
text-decoration: none;
text-align: center;
background-image: url(index_04.jpg);
float: left;
padding-top: 60px;
}
.menu a:hover {
text-decoration: none;
background:url(index_04_hover.jpg);
background-repeat: none;
}
.slogan{
font-weight: bold;
font-size: 20px;
line-height: 0.3;
padding-left: 5px;
}
.header_right {
font-family: "century Gothic";
font-size: 20px;
color: #FFFFFF;
background-image: url(images/index_12.jpg);
background-position: center;
background-repeat:none;
height: 117px;
width: 164px;
text-align: center;
}
.header_right_bottom {
font-family: "century Gothic";
font-size: 20px;
color: #FFFFFF;
background-image: url(images/index_14.jpg);
background-position: center;
background-repeat:none;
height: 113px;
width: 164px;
text-align: center;
}
#header_left {
font-family: "century Gothic";
font-size: 14px;
color: #FFFFFF;
background-image: url(images/index_10.jpg);
height: 347px;
width: 235px;
}
.header_right_first {
font-family: "century Gothic";
font-size: 20px;
color: #FFFFFF;
text-align: center;
padding-top: 30px;
font-weight: bold;
}
.header_left_first {
font-family: "century Gothic";
font-size: 14px;
color: #FFFFFF;
text-align: left;
font-weight: normal;
padding-top: 20px;
width: 225px;
padding-left: 5px;
}
.read_more_button{
background:url(images/read_more.png);
width:100px;
height: 34px;
background-repeat: none;
font-family:"century Gothic";
font-size:12px;
color: #000000;
text-align: center;
margin-top: 20px;
line-height: 2.3;
}
.content_rightcenter {
background-image: url(images/index_17.jpg);
height: 525px;
width: 354px;
}
.read_more_button a{
font-family:"century Gothic";
font-size:12px;
color: #000000;
text-align: center;
text-decoration: none;
line-height: 2.3;
}
.content_center {
font-family: "century Gothic";
font-size: 14px;
color: #000000;
background-image: url(images/index_16.jpg);
height: 525px;
width: 585px;
}
.content_titel {
font-family: "century Gothic";
font-size: 25px;
color: #9b7f67;
padding-top: 10px;
}
.content_text {
font-family: "century Gothic";
font-size: 14px;
color: #000000;
padding-top: 5px;
width: 550px;
}
.content_text2 {
font-family: "century Gothic";
font-size: 14px;
color: #000000;
padding-top: 5px;
width: 350px;
}
#bottom_left {
background-image: url(images/index_19.jpg);
height: 266px;
width: 321px;
font-family: "century Gothic";
font-size: 14px;
color: #FFFFFF;
}
#bottom_right {
background-image: url(images/index_21.jpg);
height: 266px;
width: 308px;
}
#bottom_center {
background-image: url(images/index_20.jpg);
height: 266px;
width: 311px;
}
.read_more_button a:hover{
text-decoration: none;
color:#663300
}
.content_bottom {
font-family: "century Gothic";
font-size: 14px;
color: #FFFFFF;
padding-top: 10px;
padding-left: 10px;
}
.style1 {font-size: 25px}
.style2 {
font-family: "century Gothic";
font-size: 12px;
color: #695F56;
padding-top: 20px;
font-weight: bold;
}
.style5 {
font-size: 10px;
color: #FFFFE5;
}
.style5 a {
text-decoration: none;
color: #FFFFE5;
}
#footer {
background-image: url(images/index_22.jpg);
height: 98px;
width: 940px;
}
.style3 {color: #423C35}
Merci olivierrobins pour ton aide.
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
5 févr. 2011 à 22:03
5 févr. 2011 à 22:03
c'est index_04.jpg l'image d'arrière-plan des boutons du menu? Si oui, essaye en bidouillant la position du background en rajoutant et modifiant ça au niveau du .menu:
background-position:0px 0px;
et si ça change quelque chose, mais que c'est du coup aligné tout à gauche des boutons, alors essayer avec un truc du style
background-position:center top;
background-position:0px 0px;
et si ça change quelque chose, mais que c'est du coup aligné tout à gauche des boutons, alors essayer avec un truc du style
background-position:center top;
Salut, merci, ça permet de bouger la position et c'est parfait, seulement j'aimerais appliquer une background-position différente à chaque titre du menu, est-ce possible?
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
6 févr. 2011 à 00:04
6 févr. 2011 à 00:04
Il faut dans ce cas ajouter une 2e classe à chaque div de menu (simplement en mettant un espace entre deux, par exemple class="menu home" pour le premier, etc). Et ensuite spécifier dans le CSS une position pour chacune des classes ainsi créées.
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
6 févr. 2011 à 10:05
6 févr. 2011 à 10:05
Tant mieux :)
