Basard en div

Float, clear et tout le basard

Sujet résolu

21 avril 2006 à 20:47:42

Salut, Ô grand Zér0 qui vien m'aider,

Voici mon problème :

Je suis vraiment tout nouveau en xHTML et je voudrais faire une page de la forme :

Le principe de la CSS est décrit dans les commentaires, vous devriez comprendre.

Je crois que je m'y prend mal pour faire ce genre de choses, car le float ne doit pas être la meilleure solution.

Merci par avance pour toute aide

streeter

21 avril 2006 à 20:49:25

il faut que tu commence par fermer tes <div></div> ensuite je ne vois pas trop ta question

Dolerho

21 avril 2006 à 20:54:29

C'est édité (j'avais mal fermé mes commentaires)

Et bien en fait, ma question, c'est comment faire pour que le calques "corps" ne soit pas sous les 2 calques du header, là j'y comprend plus rien :/

Gaga971

21 avril 2006 à 21:00:15

Tien déjà

<div id="header">
<div id="logo">
<!-- Le calque du logo est aligné à gauche et sa taille est de 20% ->
</div>
<div id="menu">
<!-- Le calque du logo est aligné à droit et sa taille est de 80% ->
</div>
<div id="corps">
<!-- Ce calque a un margin-top: 4px et une taille de 100% ->
</div>
</div> tu ne l'avais pas fermé

ton site serait ca :
HEADER
MENU
CORPS

Les uns après les autres? o_O

ou non

Dolerho

21 avril 2006 à 21:03:40

Mais sous Dreamweaver je l'avais fait, je n'ai pas recopié directement.

L'affichage se fait très mal, je vous donne la CSS et la page, comme ça plus de problème

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
<div id="logo">
Ici on met le logo, il fait x% du header
</div>
<div id="menu">
Ici on met le menu, x% du header
</div>
</div>
<div id="#corps">
Ici, on met tout le reste
</div>
</body>
</html>

#header {
width: 100%;
}
#header #logo {
float: left;
width: 35%;
}
#header #menu {
float: right;
width: 60%;
}
#corps {
clear: both;
margin-top: 4px;
}

Gaga971

21 avril 2006 à 21:09:33

Bah pour que corp ne soit pas en-dessous t'enlève "clear:both" qui fait automatiquement "#corps" être en dessous de #header#
donne un exemple de site pour voir comment tu veux que ton site soit.

Dolerho

21 avril 2006 à 21:15:30

Voilà ce à quoi je voudrais que ça ressemble.

Merci de votre aide

Gaga971

21 avril 2006 à 21:18:29

ok je regarde.

/* LOGO */
DIV#logo{
float:left; /*pour que logo soit a gauche*/
width:20%; /* La taill est de 20%*/

tu dois mettre un margin-left de plus de 20% pour que il soit sur la meme "ligne"
et pour le "corp" tu fait

clear:both; width:100%;

Je pense jsuis pas sûr

Riko

21 avril 2006 à 21:30:39

Salut, je pense que ce code fonctionne.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="header">
<div id="logo">
<p>Ici on met le logo, il fait x% du header</p>
</div>

<div id="menu">
<p>Ici on met le menu, x% du header</p>
</div>
</div>

<div id="corps">
<p>Ici, on met tout le reste </p>

</div>
</body>
</html>

#header {
height: 50px;
}

#logo {
float: left;
width: 35%;
height: 50px;
background-color: #0066CC;
}

#menu {
float: right;
width: 60%;
height: 50px;
background-color: #FF3300;
}

#corps {
width: 100%;
height: 150px;
background-color: #66CC66;
margin-top: 10px;
}

J'ai ajouté des couleurs pour mieux visualiser.

Dolerho

21 avril 2006 à 21:31:07

Non, ça n'a pas l'air de fonctionner :'(

EDIT : Après avoir vu la 2ème solution, je test et je vois que ça fonctionne bien, un grand merci à tous.

Et chapeau à Riko

Basard en div

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Basard en div

Float, clear et tout le basard

Basard en div

Supprimer

Modérer

Signaler le message aux modérateurs