Probleme d'allignement
gaya_102
-
dolmenhir Messages postés 251 Statut Membre -
dolmenhir Messages postés 251 Statut Membre -
Bonjour,
bonjour
Voila je voudrais savoir comment je peux mettre toutes mes images sur la meme ligne
http://www.sandrineetgwen.fr/emelinepresentation.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head>
<title>Menu déroulant horizontal à plusieurs niveaux en DHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Robots" content="follow" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
<!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
@import "design_emeline411.css";
</style>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline411.css" />
</head><body>
<!-- liste imbriquée de liens qui fera office de menu -->
<div id="unite">
<a href="emeline_index.html"><img src="image/emeline_rub.jpg" /></a>
<ul id="menu">
<li><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" style="float: left" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 3</a></li>
</ul>
<li><img src="image/oiseau1_rub.jpg" style="float: left" /></li>
</li>
<li><a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" style="float: left" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
<li><img src="image/oiseau2_rub.jpg" /></li>
</li>
<li><a href="infospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" style="float: left" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
<li><img src="image/oiseau3_rub.jpg"></li>
</li>
<li><a href="emelinecontact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" style="float: left" class="rollOver" /></a>
<li><img src="image/oiseau4_rub.jpg"></li>
</li>
</ul>
</div>
<script type="text/javascript">
initMenu();
</script>
<script type="text/javascript">
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++)
{
if (imgs.className == 'rollOver')
{
imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
imgs[i].className = '';
}
}
</script>
</body></html>
body
{
font: 11px verdana, sans-serif;
background: #AFA99B;
margin: 0;
padding: 0;
}
#unite
{
width: 980px;
height: 542px;
margin: auto;
border :2px solid black;
}
#rubrique
{
width: 980px;
height: 542px;
margin: auto;
border :2px solid black;
}
/* CSS du menu horizontal, bieler batiste */
.menu{
position:absolute;
display:block;
margin:0;
padding:0;
width:500px;
}
.menu ul{
position:absolute;
display:block;
width:124px;
/*margin:0;*/
padding:0;
}
.menu li ul{
visibility:hidden;
}
.menu li li ul{
position:absolute;
margin-left:124px;
margin-top:-23px;
}
.menu li{
list-style:none;
width:124px;
height:auto;
display:inline;
display/**/:block;
float:none;
float/**/:left;
margin:0;
padding:0;
}
.menu li li{
display:block;
float:none;
}
/* correct a little IE bug */
* html .menu li li{
display:inline;
}
.menu a{
text-align:center;
background-color: #9cf;
border:0px #666 solid;
color:#000;
display:block;
width:120px;
text-decoration:none;
padding:0px 0;
margin:0spx;
}
.menu a:hover{
background-color: #eee;
}
.menu a:focus{
background-color: #aaf;
}
a.linkOver{
background-color: #eee;
}
Merci d'avance/i/i/i
bonjour
Voila je voudrais savoir comment je peux mettre toutes mes images sur la meme ligne
http://www.sandrineetgwen.fr/emelinepresentation.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head>
<title>Menu déroulant horizontal à plusieurs niveaux en DHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Robots" content="follow" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
<!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
@import "design_emeline411.css";
</style>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline411.css" />
</head><body>
<!-- liste imbriquée de liens qui fera office de menu -->
<div id="unite">
<a href="emeline_index.html"><img src="image/emeline_rub.jpg" /></a>
<ul id="menu">
<li><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" style="float: left" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 3</a></li>
</ul>
<li><img src="image/oiseau1_rub.jpg" style="float: left" /></li>
</li>
<li><a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" style="float: left" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
<li><img src="image/oiseau2_rub.jpg" /></li>
</li>
<li><a href="infospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" style="float: left" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
<li><img src="image/oiseau3_rub.jpg"></li>
</li>
<li><a href="emelinecontact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" style="float: left" class="rollOver" /></a>
<li><img src="image/oiseau4_rub.jpg"></li>
</li>
</ul>
</div>
<script type="text/javascript">
initMenu();
</script>
<script type="text/javascript">
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++)
{
if (imgs.className == 'rollOver')
{
imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
imgs[i].className = '';
}
}
</script>
</body></html>
body
{
font: 11px verdana, sans-serif;
background: #AFA99B;
margin: 0;
padding: 0;
}
#unite
{
width: 980px;
height: 542px;
margin: auto;
border :2px solid black;
}
#rubrique
{
width: 980px;
height: 542px;
margin: auto;
border :2px solid black;
}
/* CSS du menu horizontal, bieler batiste */
.menu{
position:absolute;
display:block;
margin:0;
padding:0;
width:500px;
}
.menu ul{
position:absolute;
display:block;
width:124px;
/*margin:0;*/
padding:0;
}
.menu li ul{
visibility:hidden;
}
.menu li li ul{
position:absolute;
margin-left:124px;
margin-top:-23px;
}
.menu li{
list-style:none;
width:124px;
height:auto;
display:inline;
display/**/:block;
float:none;
float/**/:left;
margin:0;
padding:0;
}
.menu li li{
display:block;
float:none;
}
/* correct a little IE bug */
* html .menu li li{
display:inline;
}
.menu a{
text-align:center;
background-color: #9cf;
border:0px #666 solid;
color:#000;
display:block;
width:120px;
text-decoration:none;
padding:0px 0;
margin:0spx;
}
.menu a:hover{
background-color: #eee;
}
.menu a:focus{
background-color: #aaf;
}
a.linkOver{
background-color: #eee;
}
Merci d'avance/i/i/i
5 réponses
salut,
désolé, mais à cette heure, j'ai pas envie de parcourir le code
alors simplement, un attribut float:left pour le style de chacune des images concernées...
éventuellement, un petit margin-right:5px pour les écarter de 5 pixels les unes des autres
Attention : c'est tributaire de la largeur de l'écran du navigateur de celui qui consulte la page
plus l'écran sera large, plus il y aura d'images
les autres passent automatiquement à la ligne
désolé, mais à cette heure, j'ai pas envie de parcourir le code
alors simplement, un attribut float:left pour le style de chacune des images concernées...
éventuellement, un petit margin-right:5px pour les écarter de 5 pixels les unes des autres
Attention : c'est tributaire de la largeur de l'écran du navigateur de celui qui consulte la page
plus l'écran sera large, plus il y aura d'images
les autres passent automatiquement à la ligne
gaya_102
CE que tu m'as dis je l'ai deja fait mais ca ne change rien
si tu fait
ca marche
PS : j'ai ajouté des effet dans le style juste pour avoir une bordure autour d'une image inexistante, et donc bien voir la zone d'affichage
<img src="#" style="border:1px solid #000;width:25px;height:25px;float:left;margin-right:5px" /><img src="#" style="border:1px solid #000;width:25px;height:25px;float:left;margin-right:5px" /><img src="#" style="border:1px solid #000;width:25px;height:25px;float:left;margin-right:5px" /><img src="#" style="border:1px solid #000;width:25px;height:25px;float:left;margin-right:5px" /><img src="#" style="border:1px solid #000;width:25px;height:25px;float:left;margin-right:5px" /><img src="#" style="border:1px solid #000;width:25px;height:25px;float:left;margin-right:5px" /><img src="#" style="border:1px solid #000;width:25px;height:25px;float:left;margin-right:5px" /><img src="#" style="border:1px solid #000;width:25px;height:25px;float:left;margin-right:5px" /><img src="#" style="border:1px solid #000;width:25px;height:25px;float:left;margin-right:5px" /><img src="#" style="border:1px solid #000;width:25px;height:25px;float:left;margin-right:5px" />
ca marche
PS : j'ai ajouté des effet dans le style juste pour avoir une bordure autour d'une image inexistante, et donc bien voir la zone d'affichage
bon, je décortique ta page et ta css
tu veux faire quoi avec ce type de menu ?
C'est pour faire apparaitre une liste d'item au survol de l'image ?
tu veux faire quoi avec ce type de menu ?
C'est pour faire apparaitre une liste d'item au survol de l'image ?
voila en fait je veux faire exactement pareil que la
http://www.sandrineetgwen.fr/deroulement.htm
mais avec des images entre mes boutons
http://www.sandrineetgwen.fr/deroulement.htm
mais avec des images entre mes boutons
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question