Problème position avec CSS

KAMI

KAMI

Elite
Bonjour à tous,

Alors j'ai un petit soucis avec une <div> en CSS. Comme une image vaut mieux qu'un long discours :-D



Comme vous le voyez sur l'image j'ai la <div> qui contient l'image info suivante qui part sucette :[]

Je n'arrive pas à trouver pourquoi... Donc HHHHHEEEEEELPPP

Mon CSS
PHP: 
body{
	background-image:url(images/back2.png);
	background-repeat:repeat;
	font-family:"Franklin Gothic Heavy", Arial,serif;
	font-size: 12px;
}
titrenews{
	font-size:14px;
	color: red;
}

#hyperbloc{
	width: 1000px;
	height: 100%;
}

#header{
	background-image:url(images/header.png);
	background-repeat: no-repeat;
	width: 1000px;
	height: 162px;
}

#fontnews{
	background-image:url(images/space_news.png);
	background-repeat: repeat-y;
}

#lienspre{
	background-image:url(images/footer_pre.png);
	background-repeat: no-repeat;
	width: 420px;
	height: 39px;
	float:left;
}

#liensacc{
	background-image:url(images/footer_acc.png);
	background-repeat: no-repeat;
	width: 160px;
	height: 39px;
	float:none;
}

#liensnex{
	background-image:url(images/footer_sui.png);
	background-repeat: no-repeat;
	width: 420px;
	height: 39px;
	float:right;
}

#footer{
	background-image:url(images/footer.png);
	background-repeat: no-repeat;
	width: 1000px;
	height: 159px;
}
Mon HTML

PHP: 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Media Markt Braine-l'Alleud - Infos Flashs !</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
		<center>
			<div id="hyperbloc" align="center">
				<div id="header"></div>
				<div id="fontnews"></div>
				<div id="lienspre"></div>
				<div id="liensacc"></div>
				<div id="liensnex"></div>
				<div id="footer"></div>
			</div>	
		<center>	
	</body>
</html>
Voilà merci d'avance à tous :)
 
1er
OP
KAMI

KAMI

Elite
Problème résolu, il faut placer les flottants avant les non flottant même pour le right

PHP: 
<div id="lienspre"></div> 
<div id="liensnex"></div>
<div id="liensacc"></div>
Voilà la bonne syntaxe au cas ou :)
 
PiaFlalCoOl

PiaFlalCoOl

NiuAge
C'est quand meme assez moche de tout mettre en image alors que c'est du simple texte !
Tu pourrais aussi bcp factoriser ton code en général. Un exemple :

#hyperbloc div {
height:39px;
float:left;
}

et tu redéfinis que quand ca change.

Je pense que tu pouvais mettre lienacc en float:left, et mettre les div dans le html dans le bon ordre et ca fonctionnerait.
Et pourquoi mettre des div si ce sont des liens ?

<ul>
<li:colere:a id="lienpre" href="#":colere:/a:colere:/li>
<li:colere:a id="lienacc" href="#":colere:/a:colere:/li>
<li:colere:a id="liennex" href="#":colere:/a:colere:/li>
</ul>

Et tu peux mettre les <a> en display:block et définir leur taille si tu veux que la zone clickable soit grande.

Je te conseille d'utiliser la version raccourcie de "background". Utiliser background-image séparemment par exemple, c'est souvent juste utilisé pour des effets hover etc.
Tu peux simpelement écrire :

background:url("images/header.png") no-repeat;


Sinon c'est assez bizarre tes "<center:colere:/center>". J'ai jamais utilisé ca. Pour centrer une div tu peux lui donner une largeur fixe et mettre ses margin-left et margin-right à auto :)
 
Connectez-vous pour réagir !
Haut