Problème d'alignement d'image avec CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problème d'alignement d'image avec CSS

nasty44

Gneuuu !!!

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 ##

Publicité

astryad

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

nasty44

Gneuuu !!!

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 ##

nasty44

Gneuuu !!!

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 ##

phosphoreloaded

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é")

theredled

● REC

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

nasty44

Gneuuu !!!

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 ##

theredled

● REC

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

nasty44

Gneuuu !!!

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 ##

FORUM HardWare.fr

Programmation

HTML/CSS

Problème d'alignement d'image avec CSS

Sujets relatifs
problème avec une variable de session	[JSF] probleme avec selectonemenu
[ Résolu ] problème de lien sur partition	[VBS] Probleme Création Compte AD commencant par #
Problème connexion SQLServeur avec PHP	problème de compilation avec la librairie qwt
[HTML/CSS] Site avec images uniquement, votre avis !	[Java][Appli web] Problème avec ejbjar [Résolu]
problème allocation tableau dynamique	[Java Web Start]Problème de cache sur la méthode FileSystemManager.res
Plus de sujets relatifs à : Problème d'alignement d'image avec CSS

Page générée en 0.069 secondes