Utilisation de la balise float

Version imprimable

14/03/2013, 18h00
kpone59168

Utilisation de la balise float

Bonjour,

Je débute le css depuis peut et j'ai un soucis.

Je désire découper le header de mon site en 3 parties Pour y déposer à gauche des informations, au milieu une image et enfin à droite une autre image.

Il n'y à aucun soucis j'ai adopté dans mon html les balises <header></header>
Définis une class pour chacune de mes parties.

le soucis c'est que quand j'indique float: left pour la partie une, ce qui est en dessous de la page se superpose à mon image.

En dessous j'ai créer un texte exemple : hello world et il viens dès que j'ai ajouté la balise float dans mon .css, le texte viens se superposer à l'image.

je n'ai aucune idée du comment, pourriez vous m'aider un quelque peut.

Ps: j'ai tenté d'ajouter une class à mon texte et d'employer la balise margin-top et là, j'ai le texte qui descend avec l'image tout en restant supperposé hahaha.
14/03/2013, 18h26
NoSmoking

Bonjour,
les éléments en float:left|right sont partiellement retirés du flux et n’impactent pas la taille du parent de ce fait ton header à une hauteur nulle, il te faut donc lui mettre une height.
14/03/2013, 19h05
kpone59168

Edit :

Sa ne fonctionne pas vraiment. j'ai laissé la float et ajouté la height mais rien ne change.

Et excusez moi encore désolé, mais je débute seulement.
J'ai créer deux sections mises dans un <header></header>
J'aimerais qu'elles soient côte à côte mais l'une se situe en dessous de l'autre.

ps: je ne vois pas le bouton résolu.
14/03/2013, 21h38
NoSmoking

Il faut que tu nous mettes le code HTML pour que l'on ait une vision de ton problème, le CSS serait le bien venu.

Citation:

ps: je ne vois pas le bouton résolu.

voir en bas de page.

voici mon html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>|Tellandris Site Web|</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
<!-- Debut corps de page -->  
  <body>
<!-- Debut en-tête de page -->
    <header class="hautpage">
<!-- Info serveur, mumble -->
        <section class="infoserv"> 
            <p> infoserv </p>
        </section>
<!-- Logo Site -->
        <section class="logosite"> 
        </section>
<!-- Bouton VIP -->
        <section> 
        </section>
    </header>
<!-- Fin en-tête de page -->
<!-- Debut Menu de navigation -->
    <nav class="menunav">
    </nav>
<!-- Fin Menu de navigation -->
<!-- Debut Section DROITE -->
    <section class="sectiondroite"> 
        <p> Section Droite </p>
    </section>
<!-- Fin Section DROITE -->
<!-- Debut Section GAUCHE -->
    <section class="sectiongauche">   
        <p> Section Gauche </p>
    </section>
<!-- Fin Section GAUCHE -->
<!-- Debut Pied de page -->
    <footer>
        <p> footer </p>
    </footer>
<!-- Fin Pied de page -->  
<!-- Debut scripts -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
<!-- Fin scripts -->
  </body>
  <!-- Fin corps de page -->
</html>

Et là mon css (sans le bootstrap) :

Code:

1
2
3
4
5
6
7
/*Header*/
 .infoserv
 {
    height: 50px;
    width: 150px;
    border: 3px #000000 solid;
 }

ps : Merci pour le bouton résolu. Faudrait peut être le positionner à côté du bouton éditer du premier post car pas facile à voir hahaha.

15/03/2013, 15h21
franck31

Pour éviter que le contenu de ton header ne se superpose du au float, il te faut ajouter une balise avant la fermeture du header et tu la mets en clear:both ce qui obligera le bloc header à prendre toute la hauteur.
15/03/2013, 18h06
kpone59168

Merci c'est super :)

Et pour mètre côte à côte deux sections ?

Exemple je fais 2 sections donc chacune contiens le texte : SECTION1et SECTION2

et je désire avoir :

SECTION1 SECTION2

et non avoir :

SECTION1
SECTION2

Si vous comprenez. Ah que c'est compliqué le positionnement.
15/03/2013, 18h20
rodolphebrd

Bonjour, en en lisant que le dernier message je dirais

Code:

section1, section2 {float:left;}

Le positionnement n'est pas compliqué, il suffit de l'aborder méthodiquement.:)

Bonjour, cela ne fonctionne pas. Voici quelques morceau de mes codes :
Code:

1 2 3 4 5 6 7 8 9 10 <header class="hautpage">  <section class="infoserv"> <p> infoserv </p> </section>  <section class="logosite"> <p> logosite </p> </section> </header>
et là le code css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 .infoserv { height: 50px; width: 150px; border: 3px #000000 solid; } .logosite { height: 50px; width: 150px; border: 3px #000000 solid; }
Voici un screen de ce qui m'est sur ma page web.

http://image.noelshack.com/fichiers/...tion-objet.jpg

EDIT : J'ai trouvé seul mon erreur. En refouillant les tutoriaux sur le css j'avais totalement zappé le passage sur le positionnement avec display et donc le positionnement inline-block.

Du coup pour les intéressés j'ai changé mon code css pour :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 .infoserv { display: inline-block; height: 50px; width: 150px; border: 3px #000000 solid; } .logosite { display: inline-block; height: 50px; width: 150px; border: 3px #000000 solid; }
Pour clore juste une petite question, est-il possible de regrouper plusieurs class dans un css ? genre pour ajouter des propriétés à un h1 il suffit de faire h1 {propriété} et pour plusieurs h1, h2, h3... {propriété} mais pour les class je n'ai pas encore trouvé genre faire .class1, .class2 {propriété} Disons que cela me ferais gagner un peut de place :)

16/03/2013, 08h40
NoSmoking

Citation:

Pour clore juste une petite question, est-il possible de regrouper plusieurs class dans un css ? genre pour ajouter des propriétés à un h1 il suffit de faire h1 {propriété} et pour plusieurs h1, h2, h3... {propriété} mais pour les class je n'ai pas encore trouvé genre faire .class1, .class2 {propriété}

:faq: Comment appliquer un style à plusieurs éléments/classes/identifiants ?

Mais pourquoi créer plusieurs class ayant les mêmes propriétés???
:faq: Comment appliquer plusieurs styles à un élément ?
16/03/2013, 12h10
kpone59168

pour plus de rapidité. merci :)
16/03/2013, 13h19
rodolphebrd

Je ne vois pas ce qui ne marche pas avec la solution que je vous ai donnée.

exemple