plusieurs "float"

Sujet résolu

18 décembre 2005 à 20:48:00

Bonsoir!
Je voulais savoir s'il était possible de mettre 3 parties images cote à cote à l'aide des "float"?
en fait ce que je voudrais arrivé à faire c'est ca:
http://bogdanov.free.fr/Divers/apercu.jpg
J'ai déjà réussi à mettre les menu "derniers ajouts", "concert", "cds" à gauche avec un float left de façon à mettre la partie centrale grise au centre! Mais je n'arrive pas à mettre la partie de droite (forum, sondage, changement de style)!
Voici mon code css pour l'instant :

body
{
width: 1000px;
margin: auto;
margin-top: 10px;
margin-bottom: 20px;
background-color: #B1B1B1;
background-image: url("images/fond.jpg");
background-repeat: no-repeat;
background-position: center;
}
a img
{
border: none;
}

#en_tete
{
margin-bottom: 5px;
margin-left: 12px;
margin-top: 10px;
}

#menu
{
margin-bottom: 10px;
margin-left: 12px;
}

#menu_gauche
{
float: left;
width: 245px;
}

.menu_ajouts
{
height: 351px;
margin-bottom: 5px;
margin-left: 10px;
background-image: url("images/dernierajouts.gif");
background-repeat: no-repeat;
}

.menu_concerts
{
height: 234px;
margin-bottom: 5px;
margin-left: 10px;
background-image: url("images/concert.gif");
background-repeat: no-repeat;
}

.menu_cds
{
height: 234px;
margin-bottom: 5px;
margin-left: 10px;
background-image: url("images/cds.gif");
background-repeat: no-repeat;
}

#corps
{

width: 532px;
height: 833px;
margin-left: 250px;
background-image: url("images/centre.jpg");
background-repeat: no-repeat;
}

Vous savez comment faire?

Jokester

18 décembre 2005 à 20:53:13

tu appliques un float: left; à ton bloc gauche un float : right; à ton bloc droit, et rien du tout en float pour ton bloc central.
en xhtml il faut seulement les annoncer dans cet ordre :
<div class="blocgauche"></div>
<div class="blocdroit"></div>
<div class="bloccentral"></div>

atly

18 décembre 2005 à 22:57:28

Je te conseille plutôt un

<div id="conteneur">
<div id=="header"></div>

<div class="blocgauche"></div>
<div class="bloccentral"></div>
<div class="blocdroit"></div>
</div>
<div id="footer"></div>

Avec comme CSS un float:left pour blocgauche, bloccentral _et_ blocdroit, ainsi qu'un clear:both sur #footer.

Grichka

19 décembre 2005 à 14:38:50

alors j'ai essayer vos solutions et soit ca marche pas, soit je m'y prend mal!
Déjà pour ta solution Lyrics, je peux pas mettre de id="conteneur", car je suis obligé de mettre les 3 blocs en id et non en class car 2 de ces blocs (le gauche et le droit) sont composé chacun de 3 éléments (voir lien image dans le 1er message) qui sont chacun en class.

voici ce que j'arrive à obtenir au "mieux" :
http://bogdanov.free.fr/Divers/truc1.JPG
grace à ce code html :

<!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="Design sombre" href="test1.css" />
</head>
<body>

<div id="en_tete">
<a href="http://seaoflies.free.fr/"><img src="images/header.gif" alt="header"></a>
</div>

<div id="menu">
<div class="element_menu">
<A onmouseover="document.photo.src='images/accueil2.jpg'"
onmouseout="document.photo.src='images/accueil.jpg'"
href="accueil.html"><IMG src="images/accueil.jpg" name="photo"></A><A onmouseover="document.news.src='images/news2.jpg'"
onmouseout="document.news.src='images/news.jpg'"
href="news.html"><IMG src="images/news.jpg" name="news"></A><A onmouseover="document.chroniques.src='images/chroniques2.jpg'"
onmouseout="document.chroniques.src='images/chroniques.jpg'"
href="chroniques.html"><IMG src="images/chroniques.jpg" name="chroniques"></A><A onmouseover="document.livereports.src='images/live-reports2.jpg'"
onmouseout="document.livereports.src='images/live-reports.jpg'"
href="live-reports.html"><IMG src="images/live-reports.jpg" name="livereports"></A><A onmouseover="document.interviews.src='images/interviews2.jpg'"
onmouseout="document.interviews.src='images/interviews.jpg'"
href="interviews.html"><IMG src="images/interviews.jpg" name="interviews"></A><A onmouseover="document.staff.src='images/staff2.jpg'"
onmouseout="document.staff.src='images/staff.jpg'"
href="staff.html"><IMG src="images/staff.jpg" name="staff"></A><A onmouseover="document.liens.src='images/liens2.jpg'"
onmouseout="document.liens.src='images/liens.jpg'"
href="liens.html"><IMG src="images/liens.jpg" name="liens"></A><A onmouseover="document.forum.src='images/forum2.jpg'"
onmouseout="document.forum.src='images/forum.jpg'"
href="forum.html"><IMG src="images/forum.jpg" name="forum"></A>
</div>
</div>

<div id="menu_gauche">

<div class="menu_ajouts">

</div>

<div class="menu_concerts">

</div>

<div class="menu_cds">

   </div>
   </div>

   <div id="centre">
<div class="corps">

   </div>
   </div>

<div id="menu_droit">

<div class="menu_forum">

</div>
   </div>

<div id="footer">
</div>

et à ce code css :

body
{
width: 1000px;
margin: auto;
margin-top: 10px;
margin-bottom: 20px;
background-color: #B1B1B1;
background-image: url("images/fond.jpg");
background-repeat: no-repeat;
background-position: center;
}
a img
{
border: none;
}

#en_tete
{
margin-bottom: 5px;
margin-left: 12px;
margin-top: 10px;
}

#menu
{
margin-bottom: 10px;
margin-left: 12px;
}

#menu_gauche
{
float: left;
width: 245px;
}

.menu_ajouts
{
height: 351px;
margin-bottom: 5px;
margin-left: 10px;
background-image: url("images/dernierajouts.gif");
background-repeat: no-repeat;
}

.menu_concerts
{
height: 234px;
margin-bottom: 5px;
margin-left: 10px;
background-image: url("images/concert.gif");
background-repeat: no-repeat;
}

.menu_cds
{
height: 234px;
margin-bottom: 5px;
margin-left: 10px;
background-image: url("images/cds.gif");
background-repeat: no-repeat;
}

#centre
{
}
.corps
{
width: 532px;
height: 833px;
margin-left: 250px;
background-image: url("images/centre.jpg");
background-repeat: no-repeat;
}

#menu_droite
{
width: 195px;
}

.menu_forum
{
height: 349px;
margin-bottom: 5px;
margin-right: 10px;
background-image: url("images/mesforum.jpg");
background-repeat: no-repeat;
}

#footer
{
clear: both;
}

on peut voir que le cadre "derniers sujets forum" est tout en dessous au lieu d'etre à droite! :/

si je mets un float:left; sur le bloc central sa annule le float:left; du bloc gauche et du coup j'obtient ca :
http://bogdanov.free.fr/Divers/truc2.JPG
Donc la on peut voir le bloc central passé tout en dessous, et le bloc qui devrait être à droit passer en haut à gauche sous le bloc de gauche (en superposition)! :/

Comment je peux faire svp?

atly

19 décembre 2005 à 20:29:57

Citation : Grichka

Déjà pour ta solution Lyrics, je peux pas mettre de id="conteneur", car je suis obligé de mettre les 3 blocs en id et non en class car 2 de ces blocs (le gauche et le droit) sont composé chacun de 3 éléments (voir lien image dans le 1er message) qui sont chacun en class.

Hein ? Qu'est ce que tu racontes ? Le id "conteneur" était pour l'exemple, tu entoures juste tes trois blocs que tu veux mettre côte à côte par un div que moi j'appelé "conteneur", toi tu fais comme tu veux.

Grichka

20 décembre 2005 à 12:41:12

Ah oki! désolé! (je débute, donc je fais pas mal de connerie!^^)
Enfin j'ai réussi à le faire, en jouant sur les marge et sur le float left et right donc c'est cool!^^
Merci!!

plusieurs "float"

× 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.

plusieurs "float"

plusieurs "float"

Supprimer

Modérer

Signaler le message aux modérateurs