28172 sujets

CSS et mise en forme, CSS3

Fixer les cellules realisées par des ul et li

Salut,
j'aimerais fixer les tailles des cellules, mais je ne vois vraiment pas ou le faire Smiley confused

CSS:

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}



Code (X)HTML

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Actualité</a></li>
<li><a href="external2.htm" rel="countrycontainer">Politique</a></li>
<li><a href="external3.htm" rel="countrycontainer">Economie</a></li>
<li><a href="external4.htm" rel="countrycontainer">Sport</a></li>
<li><a href="external5.htm" rel="countrycontainer">Monde</a></li>
</ul>



Merci pour votre aide Smiley smile
Modifié par Nemrod (01 May 2008 - 23:00)
Bonjour,

Pour fixer des cellules, tu vas dans une prison avec un bulldozer, tu récupère une cellule (avec ou sans prisonniers dedans, à toi de voir), et la fixe à un mur porteur par le moyen de ton choix. Attention, je pense que clous, vis et colle forte seront un peu trop légers pour ça.

Si par contre ta question avait un quelconque rapport avec HTML et CSS, je crois que tu n'as pas employé les bons mots car je n'ai rien compris. Que signifie «fixer une cellule» exactement?
Je pense que tu devrais préciser ta question. Smiley cligne
Modifié par Florent V. (01 May 2008 - 22:42)
Salutation

Florent V. désolé, j'etais plus concentré sur la mise a jour de mon profil que j'ai fini par oublié de detailler ma question.

Bref, Les cellules ont une marge gauche et droite via padding: 3px 7px; ce qui fait que la taille (largeur) finale dependra de la taille du texte.

Ma question est : comment fixer le Width (width:150px;) des cellules afin que les nombres de caracteres des titres de mon menu n'influent plus sur la largeur des boutons.

voila Smiley smile
merci pour votre aide.
Pour cela il faut plutôt faire flotter les li (qui ne sont pas des cellules... attention à la confusion avec les cellules d'un tableau!), plutôt qu'utiliser display: inline.

.shadetabs li {
	float: left;
	width: 150px;
}
.shadetabs li a {
	display: block;
	...
}


Pour la petite histoire, on peut théoriquement utiliser display: inline-block pour ce genre de choses, mais le support par les navigateurs n'est pas très bon.
Un exemple pour la route tout de même:
<!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="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style type="text/css" media="screen">
	li {
		display: inline;
	}
	li a {
		display: inline-block;
		width: 100px;
		padding: 10px;
		margin-right: 5px,
		border: solid 1px red;
		background: #eee;
	}
	</style>
</head>

<body>

<ul>
	<li><a href="#">Un</a></li>
	<li><a href="#">Deux</a></li>
	<li><a href="#">Trois</a></li>
	<li><a href="#">Quatre</a></li>
	<li><a href="#">Cinq</a></li>
	<li><a href="#">Six</a></li>
</ul>

</body>
</html>

(Notons que dans ce cas précis c'est Firefox 2 le dernier de la classe... bien que Firefox 3 qui arrive cet été corrigera ça.)
Modifié par Florent V. (02 May 2008 - 00:08)
Sujet clos
Aller à