Sujet Précédent Sujet Suivant

CSS : placement sur la page

Fermé
samsoul - 28 déc. 2008 à 03:52
 samsoul - 29 déc. 2008 à 02:25
Bonjour,

Je tente de refaire mon site et pour ce faire je souhaite utiliser des feuilles de style à la place de tableau.
A peine commencé et je bloque déjà (p'tet parce qu'il est tard ???)
Bref, si quelqu'un peut m'expliquer où je fais une (des) erreur(s) et m'aider à la (les) rectifier.
Voici le code html et css


HTML :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test5</title>
<link href="css_test5.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#333333">

<div class="logo"><!-- contient le logo -->
<img src="images/img_entier/contour-logo.png" class="logo">
</div><!-- fin de logo -->


<div class="login"><!-- contient le login -->
<img src="images/img_entier/login.png" class="login">
</div><!-- fin de login -->


<div class="recherche"><!-- contient la recherche -->
<img src="images/img_entier/recherche.png" class="recherche">
</div><!-- fin de recherche -->


<div class="menu"><!-- contient le menu -->
<img src="images/img_entier/menu.png" class="menu">
</div><!-- fin de menu -->

</body>
</html>


et le CSS


/* LOGO */
.logo{
width:366px;
height:205px;
background-color:#333333;
position:absolute;
top:0px;
left:0px;
}


/* LOGIN */
.login{
width:253px;
height:129px;
background-color:#333333;
position:absolute;
top:0px;
left:380px;
}


/* RECHERCHE */
.recherche{
width:400px;
height:129px;
background-color:#333333;
position:absolute;
top:0px;
left:700;
}

/* MENU */
.menu{
width:774px;
height:79px;
background-color:#333333;
position:absolute;
top:150px;
left:380;
}

et enfin ce que je souhaite obtenir :

Le LOGO en haut à gauche, le LOGIN à droite du LOGO, la RECHERCHE à droite du LOGIN et le MENU à droite du LOGO et en dessous du LOGIN et de la RECHERCHE...


L'attribut "position" pour les différentes "class" devrait me permettre de placer les différentes boites où je veux sur ma page. Mais visiblement j'ai loupé une tite astuce...

Merci d'avance pour votre aide

:-)
A voir également:

2 réponses

Réponse 1 / 2
garf
28 déc. 2008 à 12:17
oublie les "postion:absolute;"

je t''ai réecrit le code. ce n'est pas parfait mais ca suffira :
<style type="text/css">
#entete{width:100%;background:#333;color:#fff;}
#entete div{float:left;}

#menu{margin-left:366px;}/*décalage égal à la longeur du logo*/

div#spacer{clear:both;}/*permet de supprimer le float*/
</style>


<div id="entete">
<div id="logo">
logo
</div>
<div id="login">
login
</div>
<div id="recherche">
recherche
</div>

<div id="spacer"></div>

<div id="menu">
menu
</div>

</div>

<div id="spacer"></div>

<div id="page">
contenu du site
</div>
0
samsoul
28 déc. 2008 à 23:34
Merci pour ce ti bout de code.
Je vais essayer de mettre ça en application.
0
samsoul
29 déc. 2008 à 02:11
Arf, petit soucis après avoir effectué le test : le menu (son image pour l'instant) se trouve bien à droite du logo, il se place belle et bien sous le login et la recherche mais sur la hauteur, il se place sous le logo. Il y a donc un espace vide entre le menu et le login/recherche.
Comment remédier à ce problème ??

Merci d'avance
0
Réponse 2 / 2
samsoul
29 déc. 2008 à 02:25
Bon à force de batailler un peu sur tout ça j'ai un peu changé de méthode. Ca fonctionne mais je me pose des questions sur la validation et les normes : mon "code" y répond-t-il ??

HTML :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test3</title>
<link href="css/css_test6.css" rel="stylesheet" type="text/css">
</head>


<body bgcolor="#333333">

<div class="header"><!-- contient le logo, le login, la recherche et le menu -->


<div class="zonelogo"><!-- cadre pour le logo-->

<div class="logo"><!-- contient le logo -->
<img src="images/img_entier/contour-logo.png" class="logo">
</div><!-- fin de logo -->


<div class="loginrecherche">

<div class="zonelogin">
<div class="login"><!-- contient le login -->
<img src="images/img_entier/login.png" class="login">
</div><!-- fin de login -->



<div class="zonerecherche">
<div class="recherche"><!-- contient la recherche -->
<img src="images/img_entier/recherche.png" class="recherche">
</div><!-- fin de recherche -->

</div><!-- fin de zone recherche -->

</div><!-- fin de loginrecherche-->
</div><!-- fin de zone login -->

<div class="zonemenu">
<div class="menu"><!-- contient le menu -->
<div class="menu"><!-- contient le menu -->
<img src="images/img_entier/menu.png" class="menu">
</div><!-- fin de menu -->
</div><!-- fin de zone menu -->
</div><!--fin de zone login recherche-->

</div><!-- fin de zone logo -->
</div><!-- fin de header -->


Et le CSS :


/* HEADER */

.header{margin-left:0px; margin-top:0px;}


/* LOGO */

.logo{width:366px; height:205px; background-color:#333333; float:left; margin-left:0px; margin-top:0px; border:0px;}


/* LOGIN */

.login{width:253px; height:129px; background-color:#333333; float:left; margin-top:0px; margin-left:17px;}


/* RECHERCHE */

.recherche{width:500px; height:129px; background-color:#333333; margin-left:20px; float:left;}


/* MENU */

.menu{width:774px; height:79px; background-color:#333333; float:left; margin-top:0px; margin-left:10px;}


/* IMAGES */

img{border:0px;}



Cette façon de faire vous parait-elle correct ?? Efficace ?? Correspondre aux normes ??


Merci pour les réponses
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses