28172 sujets

CSS et mise en forme, CSS3

Alignement css

Bonjour,
je me retrouve devant un probleme simple mais que je n'arrive pas a resoudre.

Je n'arrive pas a coller une balise <a> a gauche de ma page et je n'arrive pas a savoir pourquoi... Smiley decu .

html

<body>
<div id="kwicks_container">
	<ul id="kwicks">
		<a id="kwick_red" class="kwick"><span>Red</span></a>
		<a id="kwick_orange" class="kwick"><span>Orange</span></a>
		<a id="kwick_yellow" class="kwick"><span>Yellow</span></a>
		<a id="kwick_green" class="kwick"><span>Green</span></a>
		<a id="kwick_blue" class="kwick"><span>Blue</span></a>
		<a id="kwick_indigo" class="kwick"><span>Indigo</span></a>
		<a id="kwick_violet" class="kwick"><span>Violet</span></a>
	</ul>
	
</div>

</body>


css

#kwicks_container { 
	height: 100px;
	border:1px;
	border:solid;
	margin:0px;
	padding-left:0px;
}

#kwicks .kwick {
	float: left;
	width: 117px;
	height: 100px;
	margin:0px;
	padding-left:0px;
	
}
 
#kwick_red {background-color: red;}
#kwick_orange {background-color: orange;}
#kwick_yellow {background-color: yellow;}
#kwick_green {background-color: green;}
#kwick_blue {background-color: blue;}
#kwick_indigo {background-color: indigo; color: #fff; }
#kwick_violet {background-color: violet;}


j'ai beau essayer, le carré "red", ne veu pas se coller a la bordure gauche de mon ecran Smiley bawling .

merci d'avance a vous.
Modifié par mackean (30 Jul 2008 - 16:27)
Bonjour,

Mettre le padding et margin des deux éléments suivants à zéro:
- body;
- ul#kwicks.

Par ailleurs, ton code HTML est inutilement lourd. En plus d'être faux. Tu pourrais faire tout simplement:
<div id="kwicks">
	<ul>
		<li><a class="red"><span>Red</span></a></li>
		<li><a class="orange"><span>Orange</span></a></li>
		<li><a class="yellow"><span>Yellow</span></a></li>
		<li><a class="green"><span>Green</span></a></li>
		<li><a class="blue"><span>Blue</span></a></li>
		<li><a class="indigo"><span>Indigo</span></a></li>
		<li><a class="violet"><span>Violet</span></a></li>
	</ul>
</div>

J'ai gardé le DIV et les SPANs, mais je ne suis pas sûr qu'ils soient indispensables ici.
Modifié par Florent V. (30 Jul 2008 - 16:49)
Sujet clos
Aller à