Probleme avec les float - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Probleme avec les float

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Probleme avec les float (Lu 3230 fois)

Probleme avec les float
« sur: le 27-09-2012 a 15:48:35 »

Euphorik
Membre récent

Hors-Ligne

Sexe: Male

Messages: 9

Bonjour a tous
Je suis nouveau ici et j'aurais besoin de votre aide.

Je fait mes études en Webdesign et je rencontre un problème avec l'un des exercices que l'on doit faire un cours...
Il s'agit d'un site de 5 pages et dans la page index j'ai 3 div : header, sidebar et content.
Le probleme est le suivant : je n'arrive pas a faire en sorte que mon header et sidebar reste sur la gauche et le content sur la droite. Le content se met bien sur la droite mais ne veux pas remonter au meme niveau que le header.
Images pour que vous comprenez un peu mieux.

J'espere que vous aurez acces aux images.
Merci d'avance pour votre aide.

EuphoriK_

« Dernière Édition: le 27-09-2012 a 15:49:57 par Euphorik »

Rapporter au modérateur

Re:Probleme avec les float
« Répondre #1 sur: le 27-09-2012 a 15:55:49 »

Euphorik
Membre récent

Hors-Ligne

Sexe: Male

Messages: 9

Probleme avec les images je les reupload

Rapporter au modérateur

Re:Probleme avec les float
« Répondre #2 sur: le 27-09-2012 a 18:00:24 »

Euphorik
Membre récent

Hors-Ligne

Sexe: Male

Messages: 9

Help please

Rapporter au modérateur

Re:Probleme avec les float
« Répondre #3 sur: le 27-09-2012 a 19:28:32 »

FOTOTEK
Habitué

Hors-Ligne

Sexe: Male

Messages: 483

Je veille...

Si tu ne fais pas floater à gauche les autres, ça ne va pas le faire...

Rapporter au modérateur

Re:Probleme avec les float
« Répondre #4 sur: le 28-09-2012 a 08:08:58 »

Euphorik
Membre récent

Hors-Ligne

Sexe: Male

Messages: 9

Quand je fait flot left sur mon header et ma sidebar mon header est bien a gauche mais ma sidebar est a droite avec mon content en dessous :/

Rapporter au modérateur

Re:Probleme avec les float
« Répondre #5 sur: le 28-09-2012 a 09:13:34 »

FOTOTEK
Habitué

Hors-Ligne

Sexe: Male

Messages: 483

Je veille...

copie-colle le code du html et du css ici pour avoir une correction (mais utilise le bouton d'insertion de balise de code du forum).

Rapporter au modérateur

Re:Probleme avec les float
« Répondre #6 sur: le 28-09-2012 a 12:33:02 »

Euphorik
Membre récent

Hors-Ligne

Sexe: Male

Messages: 9

Voici l'html

Code:
<!DOCTYPE html>
<html lang="fr">
   <head>
      <title>Premier Site internet - 2TID1 HEAJ</title>
      <link rel="stylesheet" type="text/css" href="style.css" />
      <meta charset="UTF-8" />
   </head>
   <body>

      

   <div id="header">
      <h1><a href="index.html">Premier Site</a></h1>
      <p>réalisation d’un site internet valide</p>
   </div>

   <div id="sidebar">
         <ul id="navigation">
            <li><a href="index.html">Accueil</a></li>
            <li><a href="galerie.html">Galerie</a></li>
            <li><a href="ensavoirplus.html">En savoir plus</a></li>
            <li><a href="contact.html">Contact</a></li>
         </ul>
   </div>

   <div id="content">
      <h2>Bienvenue sur le premier site du cours d’HTML & CSS</h2>

      <p>Nous sommes des étudiants en deuxième année de l'école supérieure d'infographie Albert Jacquard (<abbr title="école supérieure d'infographie Albert Jacquard">esiaj</abbr>), dans le groupe de travail <em>web design & multimédia</em>. Le but du cours d’HTML & CSS est d’apprendre à construire un site internet qui <strong>respecte</strong> les standards du web et qui soit valide selon les normes <em>du <abbr title="World Wide Web Consortium">W3C</abbr></em>.</p>

      <p>Pour ce faire, voici les différents points que nous développerons en cours:</p>

      <ul>
         <li>Apprentissage des balises html</li>
         <li>Apprentissage des CSS</li>
         <li>Exercices sur la découpe de sites internet</li>
         <li>Construction de différents sites internet</li>
         <li>Comment et quand utiliser les tableaux html</li>
         <li>Mise en place d’un formulaire</li>
         <li>Mise en pratique des propriétés CSS3</li>
         <li>Introduction à l’HTML5</li>
      </ul>

      <a href="ensavoirplus.html"> Vous désirez en savoir plus? </a>

   </div>

   </body>
</html>

Et le CSS

Code:
body{

   margin: 0 auto;
   width: 768px;
   height: 1024px;
}

#header{
   float: left;
   width: 300px;
}

#sidebar{
   float: left;
   width: 300px;

}

#content{
   width: 468px;
   float: right;
}

Merci de bien vouloir y regarder

Rapporter au modérateur

Re:Probleme avec les float
« Répondre #7 sur: le 28-09-2012 a 12:51:08 »

WebVitrine
Superactif

Hors-Ligne

Sexe: Male

Messages: 639

Critique Mastery Max level !

Découpe ta page en plusieurs parties. A savoir :

- Tu as un bloc principal qui va englober toute ta page.tu l'appelleras wrapper. Tu lui donneras comme largeur 100%. De cette façon, tu vires le body de ton fichier CSS.

- Ensuite, dons ton bloc wrapper, tu as un bloc header que tu placeras en margin : 0 auto 0; tu définis le width, le height... Et tu places tes éléments à l'intérieur ( Logo, slogan, et autres).

- Tu as, en dessous, un bloc conteneur, avec à l'intérieur un side gauche pour ton menu, et un side droit avec le contenu. Donc, ton bloc conteneur tu lui donnes un margin : 0 auto 0: pour le centrer. Tu lui définis son width... Dans ton bloc conteneur, tu positionnes un bloc side gauche en float left, width... et enfin tu positionnes un bloc side droit avec un float left, width... De cette façon, et si tu en as besoin, tu pourras ajouter un troisième side toujours en float left à la suite des autres.

N'oublie pas de faire un clear : both; avant de fermer ton conteneur et ton wrapper.

Je te laisse cogiter là dessus. C'est à toi de faire l'exercice, pas à nous