Aller au contenu

Probleme de float (css)


DilM

Messages recommandés

Membre, Posté(e)
DilM Membre 22 messages
Baby Forumeur‚
Posté(e)

Bonjour a tous !

Voici mon soucis :

J'ai créé un design pour un futur site web et j'ai effectuer le découpage.

Mon problème se situe au niveau du menu qui comporte 6 découpe que je voudrai aligner.

J'ai entendu parler de la commande "float" mais j'ai du mal a comprendre l'utilisation.

Pour schématisé mon site se présente ainsi :

HEADER

acceuil | club | équipe | calendrier | classement | infos <-- (problème)

CORP

FOOTER

Merci a vous !

Lien à poster
Partager sur d’autres sites

Annonces
Maintenant
Membre, Posté(e)
DilM Membre 22 messages
Baby Forumeur‚
Posté(e)

Merci beaucoup pour le lien seulement je ne comprend pas vraiment tout ^^.

Je vois comment ca fonctionne pour aligner du texte mais je ne vois pas comment faire pour aligner des images.

Lien à poster
Partager sur d’autres sites

Invité StyphaX
Invités, Posté(e)
Invité StyphaX
Invité StyphaX Invités 0 message
Posté(e)

Hello,

float te permet juste de caler à gauche ou droite, pas de faire ce que tu veux :yahoo:

Pour ton cas, je vois une méthode, je sais pas si c'est super catho mais bon, mais ça sera mieux que ce que je fais en général. (Perso dès que j'ai plus de 2 div à foutre comme ça je fais un tableau :rtfm: Tellement simple de faire des colonnes :o°

Bref, crée un div global qui fais exactement la largeur et la hauteur de ton menu. En espérant que tous les blocs du menu fassent la même hauteur :D

Par la suite, tu as juste a mettre tout tes div à l'intérieur en paramétrant exactement la même hauteur que ton div global. Tu leur applique aussi la balise float:left; et c'est bon. N'oublie pas de fermer tes float par un clear:both appliqué au div suivant (corps).

En gros tu auras pour ton div global de menu de 180px de large et 20px de haut:

#global{
width:180px;
height:20px;
}

Puis pour chacun de tes div de menu (il y en aura 4 de 45px = 180px):

#menu1{
width:45px;
height:20px;
float:left;
}
#menu2{
width:45px;
height:20px;
float:left;
}
#menu3{
width:45px;
height:20px;
float:left;
}
#menu4{
width:45px;
height:20px;
float:left;
}

Ton code resemblera donc à: (note qu'il y a une classe différente par DIV car je ne sais pas si tes blocs sont tous de même largeur, mais si tous tes blocs font la même taille ne crée qu'une seule classe et applique là a tous tes div, et dans ce cas remplace id= par class=, puis vire le #menu1 et met un .menu1 à la place dans ta CSS. Un ID ne s'applique qu'a un seul objet.)

<div id="global">
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
<div id="menu4"></div>
</div>
<div id="corps">
<p></p>
</div>

Pour le corps, ajoute juste un clear:both; dans sa propriété CSS, ce qui fermera les blocs flottants du dessus.

Note que j'ai testé ma solution, ça fonctionne.

Si jamais tu as des questions: je suis toujours là :o°

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
DilM Membre 22 messages
Baby Forumeur‚
Posté(e)

Niquel, je vais essayer ca, je te tiens au courant =)

Merci beaucoup !

Lien à poster
Partager sur d’autres sites

Invité StyphaX
Invités, Posté(e)
Invité StyphaX
Invité StyphaX Invités 0 message
Posté(e)

De rien :yahoo:

Mais n'essaie pas, réussis, car ça ne peut que marcher :rtfm:

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
DilM Membre 22 messages
Baby Forumeur‚
Posté(e)

Un débutant est capable de tout, meme de raté ce qui ne peux etre raté héhé =)

Bon j'arrive meme pas a voir le résultat sur le navigateur web...

code css :

body
{
background-color: #000000;
}

#header
{
background-image: url("../images/header.jpg);
width: 1000px;
height: 168px;
}

#global
{
width: 1000px;
height: 36px;
}

#menu1
{
background-image: url("../images/menu-acceuil.jpg);
width: 230px;
height: 36px;
float:left;
}

#menu2
{
background-image: url("../images/menu-club.jpg);
width: 116px;
height: 36px;
float:left;
}

#menu3
{
background-image: url("../images/menu-calendrier.jpg);
width: 154px;
height: 36px;
float:left;
}

#menu4
{
background-image: url("../images/menu-equipe.jpg);
width: 118px;
height: 36px;
float:left;
}

#menu5
{
background-image: url("../images/menu-classement.jpg);
width: 155px;
height: 36px;
float:left;
}

#menu6
{
background-image: url("../images/menu-infos.jpg);
width: 225px;
height: 36px;
float:left;
}

#intro
{
background-image: url("../images/intro.jpg);
width: 1000px;
height: 78px;
}

#corps1
{
background-image: url("../images/corps1(avcmnudrt).jpg);
background-repeat: repeat-y;
width: 1000px;
height: 10px;
}

#footer
{
background-image: url("../images/end.jpg);
width: 1000px;
height: 109px;
}

#conteneur
{
margin: auto;
width: 1000px;
}

code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>AS Mairy Football Club</title>
 <meta http-esquiv="Content-Type"
content="text/html; charset=iso-8859-1">
 <link rel="stylesheet" media="screen" type="text/css"
href="design.css">
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="global">
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
<div id="menu4"></div>
<div id="menu5"></div>
<div id="menu6"></div>
</div>
<div id="intro"></div>
<div id="corps1">blablablablablablablablablablablablablablablablablablablablablablablablablab
lablablablablablabla
blablablablablablablablablablablablablablablablablablablablablablablablablablabl
ablablablablablablablablablablablablablablablablablablablablablablablablablablab
l
ablabla</div>
<div id="footer">sdgqresgrhedtjsfg</div>
</div>
</body>
</html>

Lien à poster
Partager sur d’autres sites

Invité StyphaX
Invités, Posté(e)
Invité StyphaX
Invité StyphaX Invités 0 message
Posté(e)

Dans ton ID intro, rajoute le clear:both; sous height.

Et tu es sur que tes images existent? :yahoo:

Au pire rajoute un background-color:red; à tes menus pour voir si ils s'affichent :rtfm:

#intro
{
background-image: url("../images/intro.jpg);
width: 1000px;
height: 78px;
clear:both;
}

Ah au fait, pourquoi mettre tes images de menu en background si elles doivent être cliquables? Autant les mettre directement dans le code.

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
DilM Membre 22 messages
Baby Forumeur‚
Posté(e)
Dans ton ID intro, rajoute le clear:both; sous height.

Et tu es sur que tes images existent? :yahoo:

Au pire rajoute un background-color:red; à tes menus pour voir si ils s'affichent :rtfm:

#intro
{
background-image: url("../images/intro.jpg);
width: 1000px;
height: 78px;
clear:both;
}

Ah au fait, pourquoi mettre tes images de menu en background si elles doivent être cliquables? Autant les mettre directement dans le code.

J'ai fait ce que tu m'as dis (oui les images existent vraiment lol, j'ai fait le design sur photoshop ainsi que le découpage.)

résultat tout est sur mon ftp et ca me donne ceci regarde par toi meme : http://myteamhl2.free.fr (c'est un nom de domaine provisoir qui heberge mes test =p)

J'ai pas vraiment compris ta question. La découpe du menu a été faite sur photoshop et donc ce sont des image. Je voulais l'inserer comme le header et tout le reste puis créé un liens sur chaqu'une des images pour envoyer vers la page correspondante...

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
DilM Membre 22 messages
Baby Forumeur‚
Posté(e)

C'est bon j'ai réussi a placer la totalitée des découpes seulement j'ai un dernier soucis... Aucune de mes images n'apparaissent...

Help ? ^^'

Rendu (avec couleur pour montrer les différentes découpes sencés appairaitre...) : http://myteamhl2.free.fr

Je remet le code une fois au cas ou vous verriez une erreur :

body
{
background-color: #000000;
}

#header
{
background-image: url("../images/header.jpg);
width: 1000px;
height: 168px;
}

#global
{
width: 1000px;
height: 36px;
}

#menu1
{
background-color: red;
background-image: url("../images/menu-acceuil.jpg);
width: 230px;
height: 36px;
float:left;
}

#menu2
{
background-color: red;
background-image: url("../images/menu-club.jpg);
width: 116px;
height: 36px;
float:left;
}

#menu3
{
background-color: red;
background-image: url("../images/menu-calendrier.jpg);
width: 154px;
height: 36px;
float:left;
}

#menu4
{
background-color: red;
background-image: url("../images/menu-equipe.jpg);
width: 118px;
height: 36px;
float:left;
}

#menu5
{
background-color: red;
background-image: url("../images/menu-classement.jpg);
width: 155px;
height: 36px;
float:left;
}

#menu6
{
background-color: red;
background-image: url("../images/menu-infos.jpg);
width: 225px;
height: 36px;
float:left;
}

#intro
{
background-image: url("../images/intro.jpg);
width: 1000px;
height: 78px;
clear:both;
}

#global2
{
width: 1000px;
height: 479px;
}

#corps1
{
background-color: blue;
background-image: url("../images/corps1gauche.jpg);
width: 797px;
height: 479px;
float:left;
}

#corps2
{
background-color: yellow;
background-image: url("../images/corps2droite.jpg);
width: 203px;
height: 479px;
float:left;
}

#corps
{
background-color: white;
background-image: url("../images/corps.jpg);
background-repeat: repeat-y;
width: 1000px;
height: 9px;
clear:both;
}

#footer
{
background-image: url("../images/end.jpg);
width: 1000px;
height: 109px;
}

#conteneur
{
margin: auto;
width: 1000px;
}

code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>AS Mairy Football Club</title>
 <meta http-esquiv="Content-Type"
content="text/html; charset=iso-8859-1">
 <link rel="stylesheet" media="screen" type="text/css"
href="design.css">
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="global">
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
<div id="menu4"></div>
<div id="menu5"></div>
<div id="menu6"></div>
</div>
<div id="intro"></div>
<div id="global2">
<div id="corps1"></div>
<div id="corps2"></div>
</div>
<div id="corps"></div>
<div id="footer"></div>
</div>
</body>
</html>

Lien à poster
Partager sur d’autres sites

Invité StyphaX
Invités, Posté(e)
Invité StyphaX
Invité StyphaX Invités 0 message
Posté(e)

Hello, ça a été réglé je vois? :rtfm:

Désolé je fêtais mon anniversaire et la soirée se termine à peine :/

Si jamais il y a un souci, je serai dispo :yahoo:

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
DilM Membre 22 messages
Baby Forumeur‚
Posté(e)

Yep j'ai trouver l'erreur... c'etait tout bete, javais oublier le 2e " dans mes chemain d'images lol.

Par contre le padding-left et right ne fonctionnent pas.

Mon corps est divisé en 3 div (un a gauche, un a droite et un en dessous les 2) et quand j'utilise le padding top pour l'un, les autres div foutent le bordel et les div se mélengent...

Et bon anniv en passant =)

Lien à poster
Partager sur d’autres sites

Invité StyphaX
Invités, Posté(e)
Invité StyphaX
Invité StyphaX Invités 0 message
Posté(e)

Hello,

explique mieux sur quel bloc tu applique le padding-top :yahoo:

Au fait: padding = margie interne, si tu veux un décalage externe entre les div c'est du margin.

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
DilM Membre 22 messages
Baby Forumeur‚
Posté(e)
Hello,

explique mieux sur quel bloc tu applique le padding-top :yahoo:

Au fait: padding = margie interne, si tu veux un décalage externe entre les div c'est du margin.

Quand tu vas sur mon site http://myteamhl2.free.fr, tu as le header, le menu et en dessous tu a 2 colonne on va dire. Ces 2 colonne correspondent a 2 div. Dans ma css j'applique le padding right et left pour centrer le texte dans la colonne de gauche. mais quand je fait ca, mes div se mélengent, la colonne de droite se met sous celle de gauche...

En fait je pense que j'ai fait mon découpage comme un porc... mais je trouve pas d'autre solution pour que la colonne de droite ne descende pas tout en bas de la page inutilement. Du coup j'ai créé trois div "corps". La colonne droite, la colonne gauche et une bande de 5px du corps de droite avec du blanc a la place du corps de gauche... enfin jme comprend ^^'. Si t'as besoin de visualiser dis le moi, je ferais une image avec les différentes découpe du site.

Lien à poster
Partager sur d’autres sites

Invité StyphaX
Invités, Posté(e)
Invité StyphaX
Invité StyphaX Invités 0 message
Posté(e)

Tu as juste fais une coui* dans ta CSS.

Tu as ceci en gros:

HTML:

<div id="gauche"></div>

<div id="droite"></div>

CSS:

#gauche{float:left;}

#droite{float:left;}

Sachant que left = gauche, comment veux tu que ton div de droite reste à droite quand tu joue sur les tailles?^^

Ton div de droite, corps2 dois avoir un float:right :yahoo:

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
DilM Membre 22 messages
Baby Forumeur‚
Posté(e)

Daahhh ! Jsuis mauvais xD.

Merci ! je test ca =p

Heureusement que je peux compter sur toi ! Ca fait plaisir

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
DilM Membre 22 messages
Baby Forumeur‚
Posté(e)

Bon ca merde encore. Je pense que je vais refaire le design de facon a ce que je sois pas emmerder par ces histoire a la noix !

Regarde le resultat par toi meme lol : http://myteamhl2.free.fr

code css :

body
{
background-color: grey;
}

#header
{
background-image: url("images/header.jpg");
width: 1000px;
height: 163px;
}

#global
{
width: 1000px;
height: 40px;
}

#menu1
{
background-image: url("images/menu-acceuil.jpg");
width: 230px;
height: 40px;
float:left;
}

#menu1 a
{
display: block;
height: 40px;
width: 230px;
}

#menu2
{
background-image: url("images/menu-club.jpg");
width: 119px;
height: 40px;
float:left;
}

#menu2 a
{
display: block;
height: 40px;
width: 119px;
}

#menu3
{
background-image: url("images/menu-calendrier.jpg");
width: 151px;
height: 40px;
float:left;
}

#menu3 a
{
display: block;
height: 40px;
width: 151px;
}

#menu4
{
background-image: url("images/menu-equipe.jpg");
width: 128px;
height: 40px;
float:left;
}

#menu4 a
{
display: block;
height: 40px;
width: 128px;
}

#menu5
{
background-image: url("images/menu-classement.jpg");
width: 170px;
height: 40px;
float:left;
}

#menu5 a
{
display: block;
height: 40px;
width: 170px;
}

#menu6
{
background-image: url("images/menu-infos.jpg");
width: 202px;
height: 40px;
float:left;
}

#menu6 a
{
display: block;
height: 40px;
width: 202px;
}

#intro
{
background-image: url("images/intro.jpg");
width: 1000px;
height: 77px;
clear:both;
}

#global2
{
width: 1000px;
height: 480px;
}

#corps1
{
background-image: url("images/corps1gauche.jpg");
width: 798px;
height: 480px;
float:left;
}

#corps2
{
background-image: url("images/corps2droite.jpg");
width: 202px;
height: 480px;
float:left;
}

#corps
{
background-image: url("images/corps.jpg");
background-repeat: repeat-y;
width: 1000px;
height: 8px;
clear:both;
}

#footer
{
background-image: url("images/end.jpg");
width: 1000px;
height: 108px;
}

#conteneur
{
margin: auto;
width: 1000px;
}

Code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>AS Mairy Football Club</title>
 <meta http-esquiv="Content-Type"
content="text/html; charset=iso-8859-1">
 <link rel="stylesheet" media="screen" type="text/css"
href="design.css">
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="global">
<div id="menu1"><a href='index.htm'></a></div>
<div id="menu2"><a href='index.htm'></a></div>
<div id="menu3"><a href='index.htm'></a></div>
<div id="menu4"><a href='index.htm'></a></div>
<div id="menu5"><a href='index.htm'></a></div>
<div id="menu6"><a href='index.htm'></a>
</div>
</div>
<div id="intro"></div>
<div id="global2">
<div id="corps1">BLALUFUFTIYFUFdgsvsybvvyzyvzyzyz(yzyzyzyIT7FIFUGFUFUYFGUGFFYUTFUFTFUGFYIYFGYFUYFG7TFUFTFUG76YFUFUFUF76FU</div>
<div id="corps2"></div>
</div>
<div id="corps"></div>
<div id="footer"></div>
</div>
</body>
</html>

Lien à poster
Partager sur d’autres sites

Invité StyphaX
Invités, Posté(e)
Invité StyphaX
Invité StyphaX Invités 0 message
Posté(e)

Hello, ne t'inquiettes pas j'ai ton code déjà, d'ailleurs tu as copié le mauvaise code CSS là :rtfm:

Tu as pas le right sur corps2 et ton BLABLUMACHIN n'y est pas sur ton site :o°

Bref, je vais voir ça :yahoo:

Ps: ne met jamais de texte comme ça sans espace pour tester un design, ça déforme tout.

EDIT: ah tu as mis en ligne le code :o°

Lien à poster
Partager sur d’autres sites

Invité StyphaX
Invités, Posté(e)
Invité StyphaX
Invité StyphaX Invités 0 message
Posté(e)

Hello, j'ai compris le souci :yahoo:

En gros il ne faut pas foutre de padding quand on a une image de fond.

La soluce: créer un div dans ton div corps1.

J'ai créé un div corps1contenu et je lui ai appliqué tes paddings.

<div id="corps1"><div id="corps1contenu">pifpaf</div></div>

#corps1contenu{padding-left: 25px;
padding-right: 30px;}

:rtfm:

Après effectivement ya un truc con sur ta découpe: si tu as plus de texte que la hauteur de ton fond bah... voila :o°

Ton corps ne va pas pouvoir s'agrandir vers le bas, enfin si, il va le faire mais ton fond va se retrouver duppliqué et ça fera moche. Il aurait fallu découper en 3 parties tes corps1 et 2, le haut arrondis, le milieu avec juste les bordures de droite et gauche de tes blocs, et le bas arrondis qui serait descendu lorsque le bloc central s'agrandis vers le bas.

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
DilM Membre 22 messages
Baby Forumeur‚
Posté(e)
Hello, j'ai compris le souci :yahoo:

En gros il ne faut pas foutre de padding quand on a une image de fond.

La soluce: créer un div dans ton div corps1.

J'ai créé un div corps1contenu et je lui ai appliqué tes paddings.

<div id="corps1"><div id="corps1contenu">pifpaf</div></div>

#corps1contenu{padding-left: 25px;
padding-right: 30px;}

:rtfm:

Après effectivement ya un truc con sur ta découpe: si tu as plus de texte que la hauteur de ton fond bah... voila :o°

Ton corps ne va pas pouvoir s'agrandir vers le bas, enfin si, il va le faire mais ton fond va se retrouver duppliqué et ça fera moche. Il aurait fallu découper en 3 parties tes corps1 et 2, le haut arrondis, le milieu avec juste les bordures de droite et gauche de tes blocs, et le bas arrondis qui serait descendu lorsque le bloc central s'agrandis vers le bas.

Hey ! Merci !

Par contre ouai je voulais découper comme ca a la base mais j'aurais aimer que le 2e blocs ne se répète pas justement, comme le texte qui sera a l'interieur sera fixe...

Je test ce bout de code et je te dis =p

désolé de te surcharger =p

Ca marche niquel sauf que quand le texte ajouter est trop long, ca dépasse et ca ne viens pas a la ligne dans le bloc c'est normal ? =s

Sinon merci énormément pour toute l'aide que tu m'as apporté

Lien à poster
Partager sur d’autres sites

Annonces
Maintenant

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

×