28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement d'images en trois parties

Bonjour,

J'ai un petit souci par rapport à un positionnement, je réalise un site pour un ami et je n'arrive pas a bien positionner l'image a partie basse de la navigation.

la navigation est découpée en trois partie:
L'image du haut, l'image du centre et l'image du bas, classique quoi.

Mais l'image du bas se retrouve sous celle du centre, je ne comprend pas vraiment pourquoi.
Je vous met les bout de code qui concerne le problème

<div class="nav_top">
      <span class="texte_nav_top">Menu</span>
  </div>
  <div id="navigation">
    <ul>
      <li><a href="#" title="aller à la section 1">item1</a></li>
      <li><a href="#" title="aller à la section 2">item2</a></li>
      <li><a href="#" title="aller à la section 3">item3</a></li>
      <li><a href="#" title="aller à la section 4">item4</a></li>
      <li><a href="#" title="aller à la section 5">item5</a></li>
    </ul>
  </div>
  <div class="nav_bas">...
  </div>:


#navigation{
	float:left;
	background-image: url("images/ardoise_centre.jpg");
	background-repeat: repeat-y;
	width: 158px;
	text-align: center;
	overflow: hidden;
}

.nav_top {
    background-image: url("images/ardoise_top.jpg");
    background-repeat: no-repeat;
    width: 158px;
    height: 16px;
    color: white;
    font-family: Arial,Times New Roman,Times,serif;
    font-size: 10px;
    font-weight: bold;
    padding-left: 20px;
}
.texte_nav_top {
    position: relative;
    top: -7px;
    text-shadow: 1px 1px 1px rgb(60, 60, 60), -1px 1px 1px rgb(60, 60, 60), -1px -1px 1px rgb(60, 60, 60), 1px -1px 1px rgb(60, 60, 60);
}

.nav_bas{
	background-image: url("images/ardoise_bas.jpg");
	background-repeat: no-repeat;
	width: 158px;
	height: 24px;
	margin-bottom: 20px;
}


Bien sur si il vous faut plus d'infos, n'hésitez pas a demander je vous les fournirais
Modifié par mwspimiento (03 Aug 2012 - 12:09)
SuperMerguez a écrit :
Tu peux nous fournir une version en ligne ou des captures pour qu'on y voit plus clair ?

Oui, bien sur aucun problème:

C'est un screen, en utilisant firebug (sinon on vois rien vu que la partie du bas se retrouve sous la partie du centre)

upload/21561-problemepo.jpg

Et la partie qui devrait se place en bas de la navigation:

upload/21561-ardoisebas.jpg
Je pense que cela vient du clear sur ton div#navigation. (même si tu as signalé que tu avais bien clearé le truc ^^)

Au pire, mets 1:px solid red; pour voir le comportement de ton div voir si tout est bien dans le flux !

#navigation:after
{
	content:"MISSION CLEARED";
	clear:both;
	display:block;
}


Edit :

Tu peux mettre content:""; Smiley lol
Modifié par SuperMerguez (02 Aug 2012 - 16:02)
Le problème reste le même:

Bien qu'il y ai une légére amelioration, maintenant on voit les "..." je j'ai mis dans le html Smiley langue

upload/21561-blemeposit.jpg
Modifié par mwspimiento (02 Aug 2012 - 17:20)
Et en partant d'un truc comme ça ? A mon avis c'est ton élément flotant qui déraille

<!doctype html>
<html>
	<head>
		<body>
			<div id="thisIsParadise">
			</div>
			<div id="navigation">
				<ul id="menu">
					<li class="item">item</li>
					<li class="item">item</li>
					<li class="item">item</li>
					<li class="item">item</li>
					<li class="item">item</li>
				</ul>
			</div>
			<div id="thisIsHell">
			</div>
		</body>
	</head>
</html>



	#thisIsParadise
	{
		width:200px;
		height:30px;
		display:block;
		background:red;
	}

	#navigation
	{
		padding:10px 0;
		width:200px;
		background:black;
		color:white;
	}
		#thisIsHell
	{
		width:200px;
		height:30px;
		display:block;
		background:red;
	}
Sujet clos
Aller à