Positionement des elements sur une page web [resolu]

Question

adel01

20 Feb 2009 à 05:47

bien le salut a vous Smiley smile

voila j'ai un probleme concernant le positionement des elements sur mes pages web,donc sur cette exemple que je vous expose je n'arrive pas a mettre des image dans les espaces qui restent vide .
exemple je n'ai pas pu mettre une image sous le menu "position 2".
une fois que j'ai designé mes blocs a l'aide de balise <div> y a des endroit qui reste vide ou je veux mettre des images, comment dois je faire ?
amicalement adel
Smiley smile

soit disant que les espaces représenté en noir sur l'image "1,2,3,4" sont des espaces vide sur ma page ou je veux mettre des images par exemple comment dois je m'y prendre ? Smiley smile

Modifié par adel01 (24 Feb 2009 - 05:21)

Laurie-Anne

20 Feb 2009 à 09:08

Bonjour,

Il est difficile de te répondre, sans savoir ce que tu as déjà fait.

Aurais-tu un lien à nous proposer ?

Dans la partie CSS, tu devrais trouver de quoi mieux comprendre le positionnement en CSS.
Modifié par Laurie-Anne (20 Feb 2009 - 09:08)

Felipe

Administrateur

20 Feb 2009 à 12:36

Bonjour,

* en faisant l'hypothèse que tu veux afficher des images de décoration (pour faire zouli) et pas des images apportant de l'information (un titre en image par exemple) *

Si tu souhaites une image de décoration de 150px de haut sous le menu (zone 2 entourée en noir dans ton image), tu peux donc dans ta feuille CSS définir:

#menu {
background: url(images/super-image.jpg) left bottom no-repeat;
padding-bottom: 150px;
}

soit coller une image de fond en BAS de #menu (à condition qu'il n'y ait pas déjà une image de fond pour le menu ...) et empêcher le menu d'empiéter sur les 150 pixels du bas.

C'est une des 10 méthodes possibles Smiley smile

adel01

21 Feb 2009 à 00:23

bien le salut a vous laurie anne et felipe Smiley smile

je vous remercie pour vos reponses .
voila j'ai essayé ta methode felipe, j'ai eu l'image comme arriere plan du menu mais pas en dessous Smiley smile

voici le xhtml que j'ai fais:

<!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" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="pratique.css"/>
</head>
<body>
<div id="en_tete">
</div>

<div id="menu">

<ul id="sous_menu">
<li>
<a href="acceuil.html">Acceuil</a>
</li>
<li>
<a href="offres.html">Offres</a>
</li>
<li>
<a href="News.html">News</a>
</li>
<li>
<a href="Livre d'or.html">Livre d'or</a>
</li>
<li>
<a href="Forum.html">Forum</a>
</li>
<li>
<a href="Connexion.html">Connexion</a>
</li>
<li>
<a href="Inscription.html">Inscription</a>
</li>
</ul>
</div>

<div id="corp">

</div>

</body>
</html>

et voici le css que j'ai fais :

body
{
width:1010px;
margin:auto;
background-color:#fafcd3;
background-image:url("souris.png");
background-repeat:no-repeat;
background-position:800px 180px;

}
#en_tete
{
width:1000px;
height:150px;
background-image:url("banniere01.png");
background-repeat;no-repeat;
margin-bottom: 10px;
}

#menu
{
background: url("buraux.png") left bottom no-repeat;
padding-bottom:150px;
margin-top:10px;

}
#menu
{
float:left;
width:100px;

}
#sous_menu
{
list-style-type:none;
margin:0;
padding:0;
width:100px;
border: solid 1px #05a777;
border-bottom:none;
}

#sous_menu li
{
margin:0;
padding:0;

border-bottom: 1px solid #05a777;
}
#sous_menu a
{
text-decoration:none;
display:block;
color:#294f79;
padding-left:1.5em;
}

#sous_menu a:hover
{
background-color: #e9eefb;
color:#294f79;
}

p
{

text-indent: 10px;
font-family: Arial, "Times New Roman", "Arial black", serif;
font-size: 12px;
color:black;
}
p
{
first-letter:upper-case;
color:green;
}
#corp
{

width:600px;
margin-left:120px;
margin-bottom:20px;
padding:5px;
color:#B3B3B3;
}
et comme vous pouvez le constatez j'ai du mettre l'image de la souris dans body comme arriere plan pour pouvoir l'affiché (2).
quant au menu tu peux voir le resultat felipe (1).

amicalement adel Smiley smile

Sujet clos

Sémantique web et HTML

Positionement des elements sur une page web [resolu]