CSS : placement sur la page
samsoul
-
samsoul -
samsoul -
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
:-)
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:
- CSS : placement sur la page
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
2 réponses
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>
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>
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
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
Je vais essayer de mettre ça en application.
Comment remédier à ce problème ??
Merci d'avance