Problème de positionnement relatif en css

Résolu

hitomi -
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention - 19 juil. 2010 à 22:09

Bonjour,

je suis en train de créer un site internet et je suis novice en la matière. Pour l'instant je cherche juste à positionner trois blocs à l'aide d'un fichier css en positionnement relatif.

En gros j'ai un bloc titre en haut et en dessous je veux deux blocs côte à côte. Si je n'indique pas de positionnement les deux derniers blocs se placent l'un en dessous de l'autre, logique.
J'ai donc indiqué la position que je voulais pour le dernier bloc, c'est-à-dire à côté du deuxième dans le fichier css. Il se place correctement mais son emplacement d'origine reste toujours présent (avec firefox) et j'ai donc une barre de défilement pour atteindre le bas du site alors qu'il n'y a rien.... Par contre sur internet explorer je n'ai pas ce soucis...

Je ne suis pas sûre d'avoir été bien claire, je vous copie mes lignes de code.

fichier html :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
<title>Titre</title>
</head>

<body>
<div id="en_tete"></div>
<div id="corps"></div>
<div id="menu"></div>
</body>
</html>

fichier css :

body
{
width: 1024px;
height: 640px;
margin: auto;
margin-top: 2px;
margin-bottom: 2px;
background-color: rgb(255,254,208)
}

#en_tete
{
width: 1024px;
height: 102px;
background-image: url("title.jpg");
background-repeat: no-repeat;
}

#corps
{
width: 657px;
height: 538px;
background-image: url("main.jpg");
background-repeat: no-repeat;
}

#menu
{
width: 367px;
height: 538px;
background-image: url("menu.jpg");
position: relative;
left: 657px;
bottom: 538px;
background-repeat: no repeat;
}

Si quelqu'un avait la solution à mon problème cela m'arrangerait.

Merci !

A voir également:

Problème de positionnement relatif en css
Logiciel positionnement gratuit - Guide
Dans le document à télécharger, positionnez l'image dans le cadre gris. mettez un espace de 1 cm autour de l'image. comment se prénomme la personne recherchée ? - Forum Word
La valeur relative de 9 dans 295 700 est - Forum Excel
Exemple test de positionnement greta - Forum Études / Formation High-Tech
Enlever le soulignement d'un lien css - Astuces et Solutions

3 réponses

Réponse 1 / 3

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

Salut.

Il faut utiliser la propriété float en CSS.

Tu peux te baser sur ces gabarits :
http://www.alsacreations.com/static/gabarits/liste.html

Réponse 2 / 3

hitomi

Merci ! Ca marche nickel.

Réponse 3 / 3

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

Pense à ajouter un élément avec « clear:both; », sinon si l'élément flottant est plus grand que l'autre, l'élément contenant les deux colonnes ne s'agrandira pas, il prendra la hauteur de l'élément non flottant, ce qui créera des problèmes si tu as des éléments en-dessous (pied de page).

Discussions similaires

tests du greta

Xiaomi/Redmi - problème de réseau et SMS de positionnement

test greta

Formation secrétaire comptable niveau IV

relation d'approbation

Votre réponse

Discussions similaires