28173 sujets

CSS et mise en forme, CSS3

Lmise en forme lien

Bonjour !

Voilà dans ma feuille de style j'ai déclarer mes liens c'est à dire hover actif...
Mais le probleme c'est que je voudrais différente mise en page pour différentliens c'est à dire la mise page des liens générale pour la page chose que j'ai faite.
Et je voudrais maintenant faire un mise en page pour les lien correspondant à la partie pied de page.
Savez-vous comment faire svp merci 

/*--------------------------------liens------------------------------------------------------ */
a:link, a:active { text-decoration: none; color: #17A; }
a:visited { text-decoration: none; color: #035; }
a:hover, a:focus { text-decoration: underline overline; color: #6BD; }
p {
	margin:0;	
}

/*-------------------------------- Général------------------------------------------------------ */
body {  
	margin: 0px;
	padding: 0px;    
	font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
	font-size: 10px; /* on définit la taille de police de base dans la page */
	background-image: url(fond.gif);
}
#page {
	font: 12px "Verdana", Times, serif;
	color: #5A5A4B;
	margin:0 auto;
	height: 750px;
	width: 760px;
	border: 1px solid #777777;
	background: url(fond_site.gif) repeat center top;
	/*background: #F5F5F3;*/
}
#page #header {
	margin: 0px auto;
	height: 160px;
	width: 100%;
}
#page #header #logo {
	margin:  0 auto 10px auto;
	height: 100px;
	width: 600px;
	border: 1px solid #DDDDDD;
	background: #ffffff;
}
#page #corps {
	margin: 0 auto;
	height: 550px;
	width: 600px;
	color: #5A5A4B;
	border: 1px solid #E6E6DF;
	border-bottom: 5px solid #E6E6DF;
	background: #ffffff;
	overflow:auto;
}
#page #header #menu {
	margin: auto;
	height: 30px;
	width: 600px;
	border: 0px solid #DDDDDD;
}
#footer {
	margin: 0 auto;
	height: 15px;
	width: 600px;
	border: 0px solid #BBBBBB;
	font: 11px "Times New Roman", Times, serif;
	color: #888888;
	text-align: center;
	padding-top:5px;
}
#page #corps p { 
	width:90%; 
	height:auto; 
	margin:20px auto; 
	font-family:Verdana, Arial, Helvetica, sans-serif; 	text-align:justify;
	color:#666666;
	font-size:12px; 
}
#page #corps h2 { 
	width:50%; 
	color:#FFF; 
	background-color:#BBBBBB; 
	margin:5px auto; 
	text-align:center; 
}
#page #corps .float {
	margin:auto 15px 15px 1px;
	float: left;
	height: auto;
	width: 40%;
	border: 1px solid #E6E6DF;
	padding:3px;
}
#page #corps .float2 {
	margin:auto 20px auto auto;
	float: right;
	height: auto;
	width: 40%;
	border: 2px dashed #CC6600;
	padding:3px;
}
hr {
	clear: both;
	width: 600px;
	height: 0;
	border: 0;
	border-top: 1px solid gray;
	margin: 0 0 0px 0;
	padding: 0;
}
h1{
	color: #000000;
	font-size:12px;
	font-weight:bold;
	text-align:left;
	display: block;
	border-bottom:1px solid #E6E6DF;
	background-color: #f8f8f8;
	margin-bottom:5px;
	margin-left: 2px;
	margin-top: 0px;
}
/*-------------------------------- Menu------------------------------------------------------ */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu1 {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 200;
left: 300;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu1 dl {
float: left;
width: 10em;
}
#menu1 dt {
color: #D43A39;
cursor: pointer;
text-align: center;
font-weight: bold;
background: #f8f8f8;
border: 1px solid gray;
margin: 1px;
}
#menu1 dd {
display: none;
border: 1px solid gray;
}
#menu1 li {
text-align: center;
background: #f8f8f8;
}
#menu1 li a, #menu1 dt a {
color: #919191;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu1 li a:hover, #menu1 li a:focus, #menu1 dt a:hover, #menu1 dt a:focus {
background: #eee;
}

/*---------------------------- PIED DE PAGE ------------------------------------------------------ */

#pied {
	text-align: center;
	border:0;
	padding-bottom: 10px;
	padding-top: 10px;
}
img.baseligne {
	position: bottom;
	/*top: 100%;*/
	margin: 10px 0px 0px 10px;
	border: 0px;
}
.centered_text {
	text-align:center;
}
.lien_bas {

a:link, a:active { text-decoration: none; color: #919191; }
a:visited { text-decoration: none; color: #919191; }
a:hover, a:focus { text-decoration: underline overline; color: #565656; }

}
Tu as déjà utilisé ce principe dans ta CSS :
#pied a {styles...}
#pied a:hover, #pied a:focus {styles...}

Par exemple.
Oui mais la probleme c'est que cela ne marche pas !

voici les codes :

/*--------------------------------liens------------------------------------------------------ */
a:link, a:active { text-decoration: none; color: #17A; }
a:visited { text-decoration: none; color: #035; }
a:hover, a:focus { text-decoration: underline overline; color: #6BD; }
p {
	margin:0;	
}

/*-------------------------------- Général------------------------------------------------------ */
body {  
	margin: 0px;
	padding: 0px;    
	font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
	font-size: 10px; /* on définit la taille de police de base dans la page */
	background-image: url(fond.gif);
}
#page {
	font: 12px "Verdana", Times, serif;
	color: #5A5A4B;
	margin:0 auto;
	height: 750px;
	width: 760px;
	border: 1px solid #777777;
	background: url(fond_site.gif) repeat center top;
	/*background: #F5F5F3;*/
}
#page #header {
	margin: 0px auto;
	height: 160px;
	width: 100%;
}
#page #header #logo {
	margin:  0 auto 10px auto;
	height: 100px;
	width: 600px;
	border: 1px solid #DDDDDD;
	background: #ffffff;
}
#page #corps {
	margin: 0 auto;
	height: 550px;
	width: 600px;
	color: #5A5A4B;
	border: 1px solid #E6E6DF;
	border-bottom: 5px solid #E6E6DF;
	background: #ffffff;
	overflow:auto;
}
#page #header #menu {
	margin: auto;
	height: 30px;
	width: 600px;
	border: 0px solid #DDDDDD;
}
#footer {
	margin: 0 auto;
	height: 15px;
	width: 600px;
	border: 0px solid #BBBBBB;
	font: 11px "Times New Roman", Times, serif;
	color: #888888;
	text-align: center;
	padding-top:5px;
}
#page #corps p { 
	width:90%; 
	height:auto; 
	margin:20px auto; 
	font-family:Verdana, Arial, Helvetica, sans-serif; 	text-align:justify;
	color:#666666;
	font-size:12px; 
}
#page #corps h2 { 
	width:50%; 
	color:#FFF; 
	background-color:#BBBBBB; 
	margin:5px auto; 
	text-align:center; 
}
#page #corps .float {
	margin:auto 15px 15px 1px;
	float: left;
	height: auto;
	width: 40%;
	border: 1px solid #E6E6DF;
	padding:3px;
}
#page #corps .float2 {
	margin:auto 20px auto auto;
	float: right;
	height: auto;
	width: 40%;
	border: 2px dashed #CC6600;
	padding:3px;
}
hr {
	clear: both;
	width: 600px;
	height: 0;
	border: 0;
	border-top: 1px solid gray;
	margin: 0 0 0px 0;
	padding: 0;
}
h1{
	color: #000000;
	font-size:12px;
	font-weight:bold;
	text-align:left;
	display: block;
	border-bottom:1px solid #E6E6DF;
	background-color: #f8f8f8;
	margin-bottom:5px;
	margin-left: 2px;
	margin-top: 0px;
}
/*-------------------------------- Menu------------------------------------------------------ */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu1 {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 200;
left: 300;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu1 dl {
float: left;
width: 10em;
}
#menu1 dt {
color: #D43A39;
cursor: pointer;
text-align: center;
font-weight: bold;
background: #f8f8f8;
border: 1px solid gray;
margin: 1px;
}
#menu1 dd {
display: none;
border: 1px solid gray;
}
#menu1 li {
text-align: center;
background: #f8f8f8;
}
#menu1 li a, #menu1 dt a {
color: #919191;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu1 li a:hover, #menu1 li a:focus, #menu1 dt a:hover, #menu1 dt a:focus {
background: #eee;
}

/*---------------------------- PIED DE PAGE ------------------------------------------------------ */

#pied {
	text-align: center;
	border:0;
	padding-bottom: 10px;
	padding-top: 10px;
}

#pied a:link, a:active { text-decoration: none; color: #000000; }
#pied a:visited { text-decoration: none; color: #000000; }
#pied a:hover, a:focus { text-decoration: underline overline; color: #000000; }

img.baseligne {
	position: bottom;
	/*top: 100%;*/
	margin: 10px 0px 0px 10px;
	border: 0px;
}
.centered_text {
	text-align:center;
}


page :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>page d'acceuil</title>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<script type="text/javascript" src="xmenu4.js"></script>
<script type="text/javascript" src="xmenu4_1.js"></script>
<LINK id="style" rel="stylesheet" type="text/css" href="feuille_style.css" > 
<LINK id="style" rel="stylesheet" type="text/css" href="xmenu4_1.css" > 
</head>
<body>
<div id="page">
	<div id="header">
		<div id="logo">
			logo
		</div>
			<div id="menu">
<hr>


				<div id="menu1">
	<dl>
		<dt onmouseover="javascript:montre('smenu5');">Site</dt>
		<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Accueil</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Livre d'or</a></li>
				</ul>
		</dd>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 1.1</a></li>
				<li><a href="#">Sous-Menu 1.2</a></li>
				<li><a href="#">Sous-Menu 1.3</a></li>
				<li><a href="#">Sous-Menu 1.4</a></li>
				<li><a href="#">Sous-Menu 1.5</a></li>
				<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
		</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 2.1</a></li>
				<li><a href="#">Sous-Menu 2.2</a></li>
				<li><a href="#">Sous-Menu 2.3</a></li>
				<li><a href="#">Sous-Menu 2.4</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.2</a></li>
				<li><a href="#">Sous-Menu 3.3</a></li>
				<li><a href="#">Sous-Menu 3.4</a></li>
				<li><a href="#">Sous-Menu 3.5</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 4.1</a></li>
				<li><a href="#">Sous-Menu 4.2</a></li>
				<li><a href="#">Sous-Menu 4.3</a></li>

			</ul>
			</dd>
	</dl>
</div>
			</div><hr>
	</div>
	<div id="corps">
		<h1>Présentation</h1>
		<p>Taille :<br>
		Taille pour le fond d'écran : 750 en hauteur<br>
		900 en largeur<br>600le bloc corp<br>150 les cotés
<br><br>
		<span class="float">ssdsdxwcwxcwxc<br>sdsdsdsd</span>
	<br></p>
	</div>
	<br>
	<br>
	<br>
	<br>
<div class="pied">	
		<center><img src="baseligne.gif" class="baseligne" alt="img" /></center>
		<a href="essai.php">sddsdsds</a>

</div>
</div>
	
</div>
</body>
</html>
Sujet clos
Aller à