28172 sujets

CSS et mise en forme, CSS3

Coller 3 div a la suite

Bonjour,

J'ai un petit problème de divs.
Je souhaite faire une barre de menu, mais avec le bord gauche et droit arrondis.
Donc j'ai fait 3 images:
http://img511.imageshack.us/img511/7946/topleft.png
http://img511.imageshack.us/img511/4830/topc.png
http://img215.imageshack.us/img215/2456/topright.png
Et je voudrais que ca donne ceci:

http://img122.imageshack.us/img122/3973/95673474.png
Or pour le moment je n'arrive qu'a ceci:
http://img215.imageshack.us/img215/85/72027197.png

Voici le code HTML
       	  <div id="corner-top-left"></div>
			  <div id="menubar">
	          test
	          </div>
			  <div id="corner-top-right"></div>

Et le CSS actuellement:
[/code]


#corner-top-left
{
   margin-left: 0px;
   padding: 5px;
   color: #B3B3B3;
   position: absolute;
   background-image: url("../images/top-left.png");
   background-repeat: no-repeat;
   width: 12px;
   height: 20px;
}

#menubar
{
   margin-left: 12px;
   margin-right: 12px;
   padding: 5px;
   color: #B3B3B3;
   background-image: url("../images/top.png");
   background-repeat: repeat-x;
   height: 20px;
}

#corner-top-right
{
   margin-right: 0px;
   padding: 5px;
   color: #B3B3B3;
   background-image: url("../images/top-right.png");
   background-repeat: no-repeat;
   width: 12px;
   height: 20px;
}


Pouvez-vous m'aider?

Merci d'avance et a bientôt.
Salut,

Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum. Smiley cligne
En l'état, j'ai peur qu'il ne soit difficile de t'apporter une solution.
Hello BenjiLM et bienvenue,

déjà ça ne serait pas inutile de bien relire les tutos qui parlent du positionnement css dont voici le point d'entrée. Smiley cligne

Pour ce qui est de ta question ce serait plus simple avec seulement 2 images :
upload/8634-headerleft.png
et
upload/8634-headerright.png
Ensuite :
<!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="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
#global {
	width: 900px;
	margin: 0 auto;
} 
 
#header {
   color: #B3B3B3; 
   background: #00CC33 url(header_right.png) no-repeat right top;
   height: 20px; 
} 
 
#menubar {
   background: transparent url(header_left.png) no-repeat left top;
   padding-left: 15px;
} 
 
</style>
</head>
<body>
<div id="global">
	<div id="header">
		<div id="menubar">test</div>
	</div>
</div>
</body>
</html>
Tu as un position:absolute qui ne sert a rien sur ton div de gauche.

Rajoute display:inline sur chaque div et supprime les marges du div central. Chez moi ca marche avec FF 3.5.
Merci Heyoan, ta solution a l'air de fonctionner comme je le veux Smiley smile
Andromede > Si je met des display: inline ca me déplace d'autres blocs
J'ai changé pour mettre 3 divs a la suite comme je voulais, deux en float left (le coin gauche et le centre) et une une float right (le coin de droite).
Jai mis la première a 20% de largeur, une à 78% de largeur, et la dernière à 2% de largeur.
Le problème c'est que le coin droit ne colle pas avec le bord droit du cadre, et si j'augmente la largeur de celui du centre, la dernière div passe en dessous.

Comment je peux faire? Smiley confus

Lien de la page
bonjour,

heyon te donne la technique a suivre , en gros ne pas mettre les div les uns derriere les autres mais les imbriqué.

ex:

<div class="extense">
  <div>
     <div>
        <!-- contenu -->
     </div>
   </div>
</div>

et css 

div.extense {background:url(gauche.jpg) top left no-repeat;}
div.extense div {background:url(droite.jpg) top right no-repeat;}
div.extense div div {background:url(fond.jpg) repeat-x; margin:0 xx/*xx = largeur des extrémités */;



GC
Modifié par gc-nomade (20 Sep 2009 - 20:38)
probablement que c'est du au fait que les images utilisé ne sont pas distribué dans les bon conteneurs , ou que iimbrication mal faites .
	<div id="menubar_left"><b>Connexion</b>
	<div id="menubar_center">
	<div id="menubar_right">
	<b><a href="">Accueil</a> | <a href="">Forum</a> | <a href="">Chat</a> | <a href="">Contact</a></b>
	</div>
	</div>

	</div>


menubar_left , avec fond coin gauche okay ....
ensuite on devrait avoir le conteneur qui affiche le coin droit , puis le fond en repeat et enfin le contenu ...
Ton 'application' ne correspond pas a l'exemple que je t'ai proposer.

GC
Bonjour
Il faudrait aussi savoir exactement ce que tu veux faire car cet autre sujet tu veux utiliser une autre technique dans laquelle il faudrait un background sur chaque <li> de ton menu.
Je crois que j'ai compris le système d'imbrication des divs mais je n'arrive pas a le faire, ca me met toutes les divs a gauche...
upload/23653-Capture.PNG
Sujet clos
Aller à