Aller au menu - Aller au contenu

Accrocher une image

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne Zealoth # Posté le 09/02/2010 à 18:07:08
Avatar
Salut à tous !

Débutant dans la conception de sites et incapable de trouver un morceau de code à faire, je sollicite votre aide pleine d'experience : )

Avant tout, un bref schéma de ma page:
http://img683.imageshack.us/i/blablay.jpg/
Le corps de la page (2) est centré, mais du coup l'espace du fond (1) à gauche et à droite varie si l'on change la taille de la fenêtre du browser.

J'aimerai caler mon image (3) à droite de la bordure de la page, quelle que soit la dimension de la fenêtre.
Code : HTML
1
2
3
4
5
<body>
<div id=image></div>
<div id=centre>
...
</body>


Pour ce qui est du CSS
Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
body{
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS";
	background-color: #B6CC74;	
	line-height: 16px;}
	
#Image{ 
	width: 227;
	height: 307px;
	background-image: url("images/image.png");
	float: right;} /*vire l'image de l'écran */
	
#centre {
	margin: auto;
	width: 800px;
	padding-top: 30px;
	padding-bottom: 160px;
	background-image: url("images/006.jpg");
	border: 2px solid;
	border-top: hidden;
	border-bottom: hidden;}

En mettant l'image à l'intérieur de #centre, elle ne s'affiche pas en dehors si je la pousse sur le côté.
A l'exterieur, en lui mettant la propriété "float: right" elle disparait tout simplement, "padding" et "margin" ne marchent pas vu qu'ils se font par rapport à <body> et non à #corps.

Si quelqu'un connais une façon "d'accrocher" l'image à droite de cette bordure, ma reconnaissance lui en serais éternelle !

Par avance merci,
Édité le 09/02/2010 à 18:08:29 par Zealoth
Publicité # Posté le 09/02/2010 à 18:07:08

Connecté bibou34 # Posté le 09/02/2010 à 19:11:29
Vive les lamas
Avatar
moi je pense a un truc, mais ça ne suffit pas meme si ça fais un bon début, tu peut faire en html:
Code : HTML
1
<div id="contenu"><div id="centre">...</div><div id="image"></div></div>


Aprés tu peut placé ton div image avec du css.

Sinon, tu peut aussi utiliser les % comme unité, et faire:
Exemple

Et donc avec un margin-left de 30%. Mais il te faut donc utiliser ton code que tu as proposé.
Édité le 09/02/2010 à 19:50:48 par bibou34
Fan de minecraft - Web développeur amateur - <3 apple
"Mac, c'était pas mon idée, mais c'est quand même vachement mieux!"
MineForZeros.fr - Serveur Minecraft gratuit - 3 modes de jeu: FreeBuild - PVP - RP
 
Hors ligne Zealoth # Posté le 09/02/2010 à 19:45:25
Avatar
Salut,

Super, le margin avec un pourcentage et le div en plus marche nickel!

Un grand merci à toi : )
Connecté bibou34 # Posté le 09/02/2010 à 19:50:03
Vive les lamas
Avatar
De rien. Je me suis trompé, c'était margin-left.
Édité le 09/02/2010 à 19:51:09 par bibou34
Fan de minecraft - Web développeur amateur - <3 apple
"Mac, c'était pas mon idée, mais c'est quand même vachement mieux!"
MineForZeros.fr - Serveur Minecraft gratuit - 3 modes de jeu: FreeBuild - PVP - RP
 

Retour au forum "HTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx