Problème d'alignement d'image avec CSS

Marsh Posté le 12-02-2008 à 16:05:21

Salut tout le monde,

je réalise un site. Toute la partie création du graphisme est terminée. Seulement il survient un pb, je m'explique :
Sur ce site il y a un menu (jusque là rien de très difficile ^^) malheureusement les boutons de ce menu sont de travers (pas de lignes verticales ni horizontales) comme ceci (ce n'est qu'un exemple) :

Le problème c'est que je veux que lorsque la souris passe sur un bouton, celui-ci change de couleur comme ceci :
1er bouton

2nd bouton

etc...

Seulement je ne sais pas comment réaliser la découpe. En effet comme la découpe est forcément rectangulaire, une zone est commune à deux boutons voisins. comme ceci :

Sur le bouton 1 on voit une partie du bouton 2.

Sur le bouton 2 on voit une partie du bouton 1 et une partie du bouton 3.

Etc...

Il y a donc un problème de superposition des images des boutons.

Si quelqu'un à une idée, ou à déjà rencontré ce genre de problème, merci de me faire partager votre expérience.

Merci

Message édité par nasty44 le 03-03-2008 à 21:58:47

---------------
http://nasty3d.free.fr [site en REconstruction] ## Electronicien/Infographiste/Gratteux ##

Reply

Marsh Posté le 12-02-2008 à 16:05:21

Reply

Marsh Posté le 12-02-2008 à 16:20:10

J'ai jamais réalisé de boutons dans ce style, mais, si l'anglais ne te rebute pas, j'ai lu un article du site "A List Apart" qui traite de ce sujet.

Voici le lien.

J'éspère que ça t'aidera

Reply

Marsh Posté le 03-03-2008 à 19:30:14

Yess, un grand merci à toi Astryad. C'est en cours de réalisation... ça devrais bien le faire

---------------
http://nasty3d.free.fr [site en REconstruction] ## Electronicien/Infographiste/Gratteux ##

Reply

Marsh Posté le 03-03-2008 à 21:58:05

Rebonjour à tous avec une autre question ^^

J'aimerais maintenant aligner 4 images en background et le tout en CSS

Comme sur cette image :

Malheureusement je n'arrive pas à aligner l'image rouge (sur l'exemple ci-dessus) avec l'image noir, c'est à dire le coin gauche supérieur de la rouge avec le coin gauche inférieur de la noir. De plus il faut que le tout soit centré dans la page. La marge de gauche peut donc varier selon le format de la fénêtre.

Voici mon code :

Code :

<html>
<head>
<style type="text/css">
body
{
margin: 0px;
background : #c0a062 url("bg.gif" ) top left repeat-x ;
}
.corps
{
background: url("haut.jpg" ) top center no-repeat;
height: 100%;
}
.basgauche
{
background: url("bas_gauche.jpg" ) top left no-repeat;
}
</style>
</head>
<body>
<div class="corps">
<div align="center">
<font size="10">
<br><br><br><br><b>En construction...</b><br>
</font>
<b>It sounds like rock</b>
</div>
<div class="basgauche">
</div>
</div>
</body>
</html>

C'est pas facil de débuter ^^

Merci d'avance.

---------------
http://nasty3d.free.fr [site en REconstruction] ## Electronicien/Infographiste/Gratteux ##

Reply

Marsh Posté le 04-03-2008 à 18:23:05

Bonjour,

si la ligne 1 c'est <html>, il te manque une ligne 0 : DOCTYPE

<font size="10"> n'existe plus, et depuis longtemps (c'est "déprécié")

Reply

Marsh Posté le 05-03-2008 à 00:07:22

De même pour align="center" et dans l'esprit pour <b> aussi. Tout ça c'est de la présentation, pas de la structure, donc ça n'a rien à faire dans le html, ça doit être en css.

Sinon ta div rouge est DANS ta div noire, ça risque de pas être le plus facile... mets les plutot à la suite, voire une div englobant la rouge la verte et la bleue

Code :

<div class="div_noire">
</div>
<div class="divs_couleurs">
  <div class="div_rouge"></div>
  <div class="div_verte"></div>
  <div class="div_bleue"></div>
</div>

Tu mets #divs_couleurs et #div_noire en position:relative
Et tu mets les #div_rouge, #div_verte, #div_bleue en float:left (en leur spécifiant des dimensions)

Message édité par theredled le 05-03-2008 à 00:11:23

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

Reply

Marsh Posté le 21-03-2008 à 12:05:45

Et ben voila on y arrive, grace à vous. Merci ^^

C'est quand même mieux mis en page en div plutot qu'avec un tableau...

Voici mon nouveau code

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
background : #c0a062 url("bg.gif" ) top left repeat-x ;
}
#corps
{
margin-left: auto;
margin-right: auto;
width: 1101px;
}
.banniere
{
background: url("banniere.jpg" ) top left no-repeat;
height: 175px;
position: relative;
}
.contenu1
{
position: relative;
width: 1101px;
}
.contenu2
{
position: relative;
width: 1101px;
}
.contenu3
{
position: relative;
width: 1101px;
}
.gauche
{
background: url("gauche.jpg" ) top left no-repeat;
float:left;
height: 291px;
width: 177px;
}
.milieuh
{
background: url("milieuh.jpg" ) top left no-repeat;
float:left;
height: 291px;
width: 924px;
}
.gaucheb1
{
background: url("gaucheb1.jpg" ) top left no-repeat;
float:left;
height: 212px;
width: 177px;
}
.gaucheb2
{
background: url("gaucheb2.jpg" ) top left no-repeat;
float:left;
height: 212px;
width: 155px;
}
.milieub
{
background: url("milieub.jpg" ) top left no-repeat;
float:left;
height: 212px;
width: 769px;
}
.basgauche
{
background: url("basgauche.jpg" ) top left no-repeat;
float:left;
height: 152px;
width: 332px;
}
.basdroite
{
background: url("basdroite.jpg" ) top left no-repeat;
float:left;
height: 152px;
width: 461px;
}
.men
{
float:left;
height: 152px;
width: 308px;
}
#menu {
width: 308px;
height: 152px;
background: url("menu.jpg" ) 0 -760px;
margin: 0px; padding: 0;
position: relative;
}
#menu li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;overflow:hidden;}
#menu a {display: block; border: solid 0px #f00;}
#menu1 {left: 9px; top: 10px; width: 55px; height: 65px;}
#menu2 {left: 45px; top: 14px; width: 63px; height: 68px;}
#menu3 {left: 87px; top: 19px; width: 73px; height: 70px;}
#menu4 {left: 138px; top: 20px; width: 86px; height: 74px;}
#menu5 {left: 200px; top: 20px; width: 103px; height: 83px;}
#menu1 a {height: 65px;}
#menu2 a {height: 68px;}
#menu3 a {height: 70px;}
#menu4 a {height: 74px;}
#menu5 a {height: 83px;}
#menu1 a:hover {background: url(menu.jpg) -9px -618px no-repeat;}
#menu2 a:hover {background: url(menu.jpg) -45px -470px no-repeat;}
#menu3 a:hover {background: url(menu.jpg) -87px -323px no-repeat;}
#menu4 a:hover {background: url(menu.jpg) -138px -172px no-repeat;}
#menu5 a:hover {background: url(menu.jpg) -200px -20px no-repeat;}
h1 { font-family: arial, sans-serif ; font-size: 12pt ; font-weight: bold ; font-style: italic ; line-height: 7pt ; text-align: center;}
h2 { font-family: arial, sans-serif ; font-size: 15pt ; font-weight: bold ; line-height: 7pt ; }
</style>
</head>
<body>
<div id="corps">
<div class="banniere"></div>
<div class="contenu1">
<div class="gauche"></div>
<div class="milieuh">
<h1>En construction</h1>
</div>
</div>
<div class="contenu2">
<div class="gaucheb1"></div>
<div class="gaucheb2"></div>
<div class="milieub"></div>
</div>
<div class="contenu3">
<div class="basgauche"></div>
<div class="men">
<ul id="menu">
<li id="menu1" height="152"><a href=""></a><li>
<li id="menu2" height="152"><a href=""></a><li>
<li id="menu3" height="152"><a href=""></a><li>
<li id="menu4" height="152"><a href=""></a><li>
<li id="menu5" height="152"><a href=""></a><li>
</ul>
</div>
<div class="basdroite"></div>
</div>
</div>
</body>
</html>

Message édité par nasty44 le 21-03-2008 à 12:08:29

---------------
http://nasty3d.free.fr [site en REconstruction] ## Electronicien/Infographiste/Gratteux ##

Reply

Marsh Posté le 22-03-2008 à 13:22:25

Pourquoi tu mets un <div> pour englober ton <ul> ?
Pourquoi ya de la présentation dans le html (height="152" ) ?
C'est vraiment obligé les <li>s en position:absolute ?
Sinon ya beaucoup de redondance dans le css ; je vais t'apprendre l'existence de la virgule par ex (".contenu1, .contenu2, .contenu3 {}" )

C'estc e que j'en dis

Message édité par theredled le 22-03-2008 à 13:24:42

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique

Reply

Marsh Posté le 23-03-2008 à 22:09:25

Ca va rentrer, ca va rentrer...

Message édité par nasty44 le 23-03-2008 à 22:09:48

---------------
http://nasty3d.free.fr [site en REconstruction] ## Electronicien/Infographiste/Gratteux ##

Reply

Problème d'alignement d'image avec CSS

Sujets relatifs:

Leave a Replay