28220 sujets

CSS et mise en forme, CSS3

[résolu]Placement de div dans une page, margin et padding

Bonsoir,

Je suis en train de réaliser un site en css mais j'ai des soucis à placer les div dans ma page pour que les éléments soient placés à l'identique de ma maquette. voir la maquette
Ma page en conctruction est la suivante : http://idays.free.fr/site-luciol/accueil1.htm
y'a plusieurs choses que je ne comprend pas, par exemple pourquoi mon image du haut (barrenavigation) ne s'affiche pas entièrement ?
Je n'arrive pas à placer sur la meme ligne les 4 éléments du bas, pourtant j'ai mis des float left.

MERCI beaucoup

Ingrid Smiley smile
Modifié par poulette (23 May 2005 - 00:59)
Bonjour,

Vite regardé il y a un enchevêtrement de balises: tu ouvres une div avant <body>:

<div class="global">
<body>
Ok merci,
j'ai corrigé, j'ai réussi à aligner mes trois éléments seulement une dernière chose me dérange je ne comprend pas pourquoi quand je met une image en background elle ne s'affiche pas correctement.
C'est le cas pour mon image à coté du logo en bas à gauche qui décale mon menu vers le bas, ou encore de mon cadre à droite qui affiche un petit carré qui m'indique qu'il s'agit d'une image.

Code CSS pour mes background : 
encart-gauche img.bordure{
	background-image: url(../images/encart_gauche.jpg);
	background-repeat: no-repeat;
	width: 98px;
	height: 107px;


Code html : 
<div class="encart-gauche">
	<img class="bordure">
		<ul class="encartgauche">
    		<li><a href="">Conditions d'utilisation</a></li>
   			<li><a href="">Conditions d'utilisation</a></li>
    		<li><a href="">Conditions d'utilisation</a></li>
			<li><a href="">Conditions d'utilisation</a></li>
 		</ul>
	</div>


Merci de vos conseils

Ingrid Smiley cligne 
<div class="encart-gauche">
	[b][#darkred]<img class="bordure">[/#][/b]
		<ul class="encartgauche">
    		<li><a href="">Conditions d'utilisation</a></li>
   			<li><a href="">Conditions d'utilisation</a></li>
    		<li><a href="">Conditions d'utilisation</a></li>
			<li><a href="">Conditions d'utilisation</a></li>
 		</ul>
	</div>


Ca ne correspondont à rien de connu Smiley lol
Situ utilises une image en background de ta div (voire de ta liste), mais pas dans le contenu.
Modifié par Igor (17 May 2005 - 23:54)
Tu utilises l'élément image (<img>) mais tu ne précises pas de source à cette image, par contre tu souhaites avoir une image d'arrière-plan pour l'élément porteur de la classe "encart-gauche". Cette balise <img> n'a aucune raison d'être présente dans ton code.

J'ai l'impression que tu t'emmêle un peu dans les classes. Par exemple tu n'as pas de "."devant ta classe "encart-gauche". Elle devrait être déclarée:

.encart-gauche{}
J'ai corrigé mon problème, effectivement j'ai du m'emmeler un peu les pinceaux.
Par exemple si je crée une class "contenu" et que dedans je veux mettre plusieurs images avec des particularités à chacunes d'elles, il faut que je crée des classes pour chacunes de ses images non?
.contenu img.image1 {
}

Non?
Je te remercie
Ingrid Smiley murf
Soit tes images font partie de ton contenu et tu les intègres dans ton code html et styler leur apparence avec css avec une classe ou avec le sélecteur img directement:

html:
<img alt="Texte alternatif" src="monimage.jpeg" height="100" width="100" />


css:
img{/*style de ce sélecteur qui s'appliquera à tous les élément img de ta page*/
border: solid 1px #000;
padding:4px;
etc.}


Pourquoi pas avec des classes pour des affichages différents:

<img alt="Texte alternatif" src="monimage.jpeg" height="100" width="100" class="toto" />


.toto{
border: solid 3px #ccc;
padding:4px;
}


Ou bien suivant le contexte, si tes images sont dans un div identifiée par exemple:

#titi img{/*style des img dans <div id="titi">*/
border: solid 10px #cc0000;}


Si tes images sont de la simple décoration tu peux les mettre en arrière-plan d'aun élément:

#titi{
background-image: url(monimage.jpg);}
Sujet clos
Aller à