28173 sujets

CSS et mise en forme, CSS3

[Résolu]Span & Rollover

Pages :
(reprise du message précédent)

Par curiosité et pour savoir le faire, comment faire pour mettre l'image 1 par défaut lorsqu'on arrive sur le site?

Je vais essayer de trouver Smiley cligne mais si vous avez une piste Smiley ravi
Modifié par yank (16 Jul 2007 - 17:54)
Salut,

Juste pour le fun 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta name="TITLE" content="Test" />
	<style type"text/css">
#menu{

width: 200px;

}

#menu ul {
width: 166px;
margin: auto;
list-style-type: none;
position: relative;
padding-bottom:110px;
}

#menu li {
line-height: 25px;
background: #028CFF;
text-align: center;
font-weight: bold;
border-bottom: 1px solid #e2dff2;
}

#menu li a{
display: block;
color: #fff;
text-decoration: none;
width: 166px

}

#menu li a span{
display: none;

}

#menu li a#page1:hover span  , #menu li a#page2:hover span , #menu li a#page3:hover span {
width: 165px;
height: 108px;
display: block;
position: absolute;
left: 150px;
bottom: 0;
margin: 0;
padding: 0;
}

#menu li a#page1:hover span {
background: url(image1.jpg);
}

#menu li a#page2:hover span {
background: url(image2.jpg);
}

#menu li a#page3:hover span {
background: url(image3.jpg);
}

#menu li a span img{
border: 0;

}

#menu li a:hover{
background: #0058E0;

}

#menu li a.courant{
background: #028CFF;
color: #FCF775;
}

#menu li a.classe_active1 span, #menu li a.classe_active2 span, #menu li a.classe_active3 span {
width: 165px;
height: 108px;
display: block;
position: absolute;
left: 150px;
bottom: 0;
margin: 0;
padding: 0;
}

#menu li a.classe_active1 span{
background: url(image1.jpg);
}

#menu li a.classe_active2 span{
background: url(image2.jpg);
}

#menu li a.classe_active3 span{
background: url(image3.jpg);
}

	</style>
</head>
<body>
<?php // à placer dans un include et appeller ici
	$page1_active = '';
	$page2_active = '';
	$page3_active = '';
?>
<?php	
	$page1_active = 'class="classe_active1"'; // test page 1 
?>	
<div id="menu">	
	<ul>
      <li><a <?php echo $page1_active;?>  href="index.php" id="page1" >Page1<span></span></a></li>
      <li><a <?php echo $page2_active;?>  href="index.php" id="page2">Page2<span></span></a></li>
      <li><a <?php echo $page3_active;?> href="index.php" id="page3">Page3<span ></span></a></li>
	</ul>
</div>
Salut
Smiley smile

J'essaye de faire la même chose avec mes puces maintenant du coup sur le même principe avec le php, mais je n'y parviens pas alors que ça devrait être encore plus simple... non ?
Salut,

Si ce sont des puces en background oui, c'est le même principe par contre pour les puces par défaut des balises li, on ne peut pas toujours les individualiser (ça passe sur certains navigateur, je crois sous FF ?)
Oui ce sont des puces en background

.menugauche li {
	font-size: 0.9em;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 5px;
	background-image: url(visuels/puce.png);
	background-repeat: no-repeat;
	background-position: left center;
	text-indent: 1.5em;
}
.menugauche li:hover {
	font-size: 0.9em;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 5px;
	background-image: url(visuels/puce2.png);
	background-repeat: no-repeat;
	background-position: left center;
	text-indent: 1.5em;
}
.menugauche a {
	color: #402d20;
}
.menugauche a:visited {
	color: #e54b17;
	font-style: italic;
}
.menugauche a:active/*ie*/, a:focus/*gecko*/ {
	color: #59BF26;
	font-style: italic;
}
donc peut être en faisant quelque chose du genre :


.menugauche li a:active/*ie*/, a:focus/*gecko*/ {
	font-size: 0.9em;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 5px;
	background-image: url(visuels/puce2.png);
	background-repeat: no-repeat;
	background-position: left center;
	text-indent: 1.5em;
}


Et en rajoutant le php ... je suis sur la bonne voie ? Smiley murf
Bonjour,

Ca a l'air bon, un truc du genre :
#menu{

width: 200px;

}

#menu ul {
width: 200px;
margin: auto;
list-style-type: none;
}

#menu li{
background: lime;
margin-top: 10px;
width: 100px;
}

#menu li a{
display: block;
padding-left: 30px;
text-decoration: none;
width: 100px;
background: url(puce1.gif) ;
background-repeat: no-repeat;
background-position: 0 2px;
}

#menu li a.classe_active1, #menu li a.classe_active2, #menu li a.classe_active3 {
background: url(puce2.gif);
background-repeat: no-repeat;
background-position: 0 2px;
}



	</style>
</head>
<body>
<?php // à placer dans un include et appeller ici
	$page1_active = '';
	$page2_active = '';
	$page3_active = '';
?>
<?php	
	$page2_active = 'class="classe_active2"'; // test page 2
?>	
<div id="menu">	
	<ul>
      <li><a <?php echo $page1_active;?> href="#">Page1</a></li>
      <li><a <?php echo $page2_active;?> href="#">Page2</a></li>
      <li><a <?php echo $page3_active;?> href="#">Page3</a></li>
	</ul>
</div>
Pages :
Sujet clos
Aller à