Utilisation de la balise float

**kpone59168** · 14/03/2013, 19h00

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.

**NoSmoking** · 14/03/2013, 19h26

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.

**kpone59168** · 14/03/2013, 20h05

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.

**NoSmoking** · 14/03/2013, 22h38

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.

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

voir en bas de page.

**kpone59168** · 15/03/2013, 13h22

voici mon html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**franck31** · 15/03/2013, 16h21

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.

Utilisation de la balise float

CSS

Vue hybride

Discussions similaires

Partager

Partager