Titre: Probleme avec les float
Posté par: Euphorik le le 27-09-2012 a 15:48:35
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_
|
Titre: Re:Probleme avec les float
Posté par: Euphorik le le 27-09-2012 a 15:55:49
Probleme avec les images :-[ je les reupload
|
Titre: Re:Probleme avec les float
Posté par: Euphorik le le 27-09-2012 a 18:00:24
Titre: Re:Probleme avec les float
Posté par: FOTOTEK le le 27-09-2012 a 19:28:32
| Si tu ne fais pas floater à gauche les autres, ça ne va pas le faire... |
Titre: Re:Probleme avec les float
Posté par: Euphorik le le 28-09-2012 a 08:08:58
| 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 :/ |
Titre: Re:Probleme avec les float
Posté par: FOTOTEK le le 28-09-2012 a 09:13:34
| 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). |
Titre: Re:Probleme avec les float
Posté par: Euphorik le le 28-09-2012 a 12:33:02
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>
<!-- Rajouter les balises Div : header, sidebar, content, navigation + diviser en 4 pages -->
<div id="header">
<h1><a href="index.html">Premier Site</a></h1>
<p>réalisation d’un site internet valide</p>
</div><!-- end header -->
<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><!-- end sidebar -->
<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><!-- end content -->
</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 :) |
Titre: Re:Probleme avec les float
Posté par: WebVitrine le le 28-09-2012 a 12:51:08
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 ;D |
Titre: Re:Probleme avec les float
Posté par: Euphorik le le 28-09-2012 a 14:07:40
Merci beaucoup :D Je vais cogiter a tout sa et je vous tiens au courant.
Encore merci |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|