28172 sujets

CSS et mise en forme, CSS3

Un div a droite (et haut) du global ?

Bonsoir à tous

(reprise de mon précédent car autre sujet Smiley cligne )

J'ai donc mon div global qui comprend tout le site.
Je voudrais mettre un div sur la droite du global, en haut sans modifier le centrage du global ... Est ce possible ?

Le truc c'est que dans l'entete c'est une image qui doit dépasser du global et je peux pas car ca passe a la ligne... donc je voulais le mettre a l'exterieur mais je sais pas comment faire pour qu'il soit en haut a droite du global !

D'avance merci pour votre aide!
salut,

tu as un code ou une image de ce que tu veux faire ?
Modifié par flattazor (24 Feb 2009 - 20:03)
Bonsoir!

Voici un concentré de mon code avec le style:


<style type="text/css">


body {

	background: url(images/ruban.png) left 90px repeat-x #48484a;

	margin:0;
	padding:0
}


#global {
	background-image:url(images/fond.png);
}


#menu {
	background-image:url(images/menu.png);
	height:39px;
	background-repeat:no-repeat;
	margin-left:13px;
	
}



#pied {
	color: black;
}


/* --- POSITIONNEMENT --- */


html, body {
	height: 100%; /* Voir -> Note 1 ci-dessous */
}
body {
	padding: 0;
}
#global {
	min-height: 100%; /* -> 1 */
	width: 827px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
}


#entete {
	padding: 15px 20px 10px 20px;
	height:65px;

}




#contenu {
	padding: 10px 20px;
}
#contenu > :first-child {
	margin-top: 10px;
}



#pied {
	padding: 5px 20px;
	font-size: .85em;
}
#pied p {
	margin: .5em 0;
}
#copyright {
	text-align: left;
	font-size: 1em;
}



#city{
background-image:url(images/city.png);
width:500px;
height:69px;
float:left;
margin-top:8px

}

#logo_portfolio{
background-image:url(images/logo_portfolio.png);
width:158px;
height:85px;
float:left;



}

#alacoche{
background-image:url(images/alacoche.png);
width:128px;
height:74px;
float:left


}
#ruban{
background-image:url(images/ruban.png);
height:39px;
margin-top:-9px;
position:relative;
z-index:0

}
#com{
background-image:url(images/com.png);
width:45px;
height:21px;

position:absolute

}

#menu ul, #pied ul {
	margin: 0;
	list-style: none;
	text-align: center;
	
}
#menu li.categorie{
	margin-left:90px;
	color:white
}
#pied li.categorie {margin-left:30px;}

#menu li.home{color:#a10b0c}

#menu li,  #pied li{display: inline; 	margin: 0;
	padding: 0;}

	ul, ol {
	margin: .75em 0 .75em 24px;
	padding: 0; /* -> 9 */
}

#titre{
widht:34px;
height:65px;
background:url(images/titre.png);
background-repeat:no-repeat;
margin-left:-19px;
padding:23px 0 0 20px;
font-size:14px;
color:#a10b0c
}
</style>
</head>

<body>

<div id="com"></div>

<div id="global">

	<div id="entete">
		<div id="logo_portfolio"></div>
		<div id="city"></div>
		<div id="alacoche"></div>
	</div>
		
	<div id="menu"></div>
	
	<div id="contenu"></div>
	
	<div id="pied"></div>
</div>


</body>
</html>


Ci joint ce que je voudrais:
le global est géré, c'est le com que je ne parviens pas a mettre (bloc rouge)

upload/14619-alsa.JPG
Hello, Smiley smile

En me basant par rapport à ton image, et sans regarder ton code :

<body>

     <div id="global">
          
          <div id="com"></div>

          [...]

     </div>

</body>

div#global {
width:...px;
margin:0 auto;
[b]position:relative;[/b] /* pour servir de référence aux enfants positionnés absolument */}

div#com {
width:50px; /* largeur exemple */
height:20px; /* hauteur exemple */
[b]position:absolute;[/b]
[b]top:0;[/b] /* on part du haut... */
[b]right:-50px;[/b] /* ...et on fait sortir l'élément du conteneur en lui donnant une position négative */}
Bonsoir !

Ton idée a marché BeliG !

J'ai du retiré le overflow du global.
Merci beaucoup !!
Sujet clos
Aller à