28172 sujets

CSS et mise en forme, CSS3

Lien dans un bloc

Bonjour à tous,

j'ai affecté à mes pages html la définition suivante pour les liens :



a:link{text-decoration:none;color:black;}
a:visited{text-decoration:none;color:gray;}
a:hover{text-decoration:underline;color:red;}


Cependant j'aimerais avoir une définition différentes pour ce bloc :



			<div class="titre06">

			De: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#">Mr Sam Bo </a>		
				
			</div>


Voici le code css de mon bloc :



.titre06
{
width:750px;
height:22px;
margin-top:5px;
margin-bottom:2px;
margin-left:10px;
padding-top:2px;
background: #66FF99;
}


Merci d'avance pour votre aide.
Hello, Smiley smile

a écrit :
Cependant j'aimerais avoir une définition différentes pour ce bloc :
div.titre06 a:link { ... }
div.titre06 a:visited { ... }
div.titre06 a:hover { ... }

a écrit :
De: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#">Mr Sam Bo </a>
Il existe des solutions plus élégantes (par exemple un margin-left sur le lien). Smiley ohwell
Modifié par BeliG (10 Jun 2009 - 16:27)
Merc pour la réponse.

En ce qui concerne la solution plus élégante, tu le coderais comment ça :




div.titre06 a
{
margin-left;150px;
}


?
Si la boite titre06 ne contient que ce lien, oui.

Sinon :
<div class="titre06">
     De: <a class="auteur" href="#">Mr Sam Bo</a>		
</div>

div.titre06 a.auteur {
margin-left:150px; }
Ou :
<div class="titre06">
     <p class="auteur">De: <a href="#">Mr Sam Bo</a></p>
</div>

div.titre06 p.auteur a {
margin-left:150px; }
Deux solutions parmi tant d'autres...

Et pourquoi titre06 ? Tu as aussi titre01, titre02, etc... ? A mon avis, y a moyen d'optimiser tout ça. As-tu une page en ligne à proposer ?
Bonjour et merci pour les réponses.

En effet, j'ai plusieurs titre :





.titre01
{
width:615px;
height:22px;
border: solid 1px lavender;
margin-top:5px;
margin-left:10px;
background-color:#C0C0C0;
}

.titre01_a
{
width:170px;
height:20px;
border: none;
margin-top:2px;
margin-left:5px;
text-align:center;
float:left;
}

.titre01_b
{
width:150px;
height:20px;
margin-left:5px;
margin-top:2px;
border: none;
text-align:center;
float:left;
}

.titre01_c
{
width:230px;
height:20px;
margin-left:5px;
margin-top:2px;
border: none;
text-align:center;
float:left;
}

.titre01_d
{
width:20px;
height:20px;
margin-left:12px;
margin-top:2px;
border: none;
float:right;
}



.titre02
{
width:615px;
height:22px;
border: solid 1px lavender;
margin-top:5px;
margin-bottom:2px;
margin-left:10px;
background-color:#C0C0C0;
}

.titre02_bis
{
width:615px;
height:22px;
border: solid 1px lavender;
margin-top:2px;
margin-bottom:2px;
margin-left:10px;
background-color:white;
}

.titre02_a
{
width:145px;
height:18px;
border:none;
margin-top:2px;
margin-left:2px;
text-align:center;
float:left;
}

.titre02_b
{
width:145px;
height:18px;
margin-left:5px;
margin-top:2px;
border:none;
text-align:center;
float:left;
}

.titre02_c
{
width:145px;
height:18px;
margin-left:5px;
margin-top:2px;
border:none;
text-align:center;
float:left;
}

.titre02_d
{
width:145px;
height:18px;
text-align:center;
margin-left:5px;
margin-top:2px;
border:none;
float:left;
}


.titre03
{
width:615px;
height:22px;
margin-top:5px;
margin-bottom:2px;
margin-left:10px;
color:gray;
border:none;
}


.titre04
{
width:750px;
height:22px;
margin-top:5px;
margin-bottom:2px;
margin-left:10px;
border:none;
}


.titre04_a
{
width:25px;
height:18px;
margin-top:1px;
margin-left:1px;
background: orange;
color:white;
border:none;
float:left;
}

.titre04_b
{
width:205px;
height:18px;
margin-left:2px;
margin-top:1px;
background: orange;
color:white;
border:none;
float:left;
}

.titre04_c
{
width:320px;
height:18px;
margin-left:2px;
margin-top:1px;
background: orange;
color:white;
border:none;
float:left;
}

.titre04_d
{
width:90px;
height:18px;
margin-left:2px;
margin-top:1px;
background: orange;
color:white;
border:none;
float:left;
}


.titre04_e
{
width:90px;
height:18px;
margin-left:2px;
margin-top:1px;
color:white;
background: orange;
border:none;
float:left;
}



.titre04_a_bis
{
width:25px;
height:20px;
margin-left:1px;
border:none;
float:left;
}

.titre04_b_bis
{
width:205px;
height:20px;
margin-left:2px;
margin-top:1px;
border:none;
float:left;
}

.titre04_c_bis
{
width:320px;
height:20px;
margin-left:2px;
margin-top:1px;
border:none;
float:left;
}

.titre04_d_bis
{
width:90px;
height:20px;
margin-left:2px;
margin-top:1px;
border:none;
float:left;
}


.titre04_e_bis
{
width:90px;
height:20px;
margin-left:2px;
margin-top:1px;
border:none;
float:left;
}



.titre05
{
width:750px;
height:22px;
margin-top:5px;
margin-bottom:2px;
margin-left:10px;
background: #efefef;
}



.titre06
{
width:750px;
height:22px;
margin-top:5px;
margin-bottom:2px;
margin-left:10px;
padding-top:2px;
background: #66FF99;
}

div.titre06 a:link {color:black;font-weight:bold;}
div.titre06 a:visited {color:black;font-weight:bold;}
div.titre06 a:hover {color:black;font-weight:bold;}

div.titre06 a
{
margin-left:150px;
}
Au vu de ce code CSS, j'ai envie de dire: outche. Je vais peut-être un peu vite en besogne sans voir le site lui-même, mais ce code semble indiquer:

- Que l'on a sans doute pas respecté la sémantique HTML (utiliser une structure de titres cohérente avec des éléments H1, H2, H3...).
- Que l'on a pas utilisé correctement les possibilités de CSS pour appliquer des styles identiques ou proches à divers éléments.
- Que la mise en page doit être diablement bricolée pour qu'on ait besoin de donner des largeurs fixes à tous ces «titres».
Sujet clos
Aller à