Bonsoir à tous. Dans le cadre de mes études, je dois réaliser un portfolio plutôt complexe. Et, je suis confronté à plusieurs problèmes : Plutôt que de vous linker mon code, je préfère exposer mon problème pour tenter de les résoudre moi-même, grâce (je l'espère :p) à vos indications. Pour commencer, je tiens à préciser que j'ai suivi les tutoriels sur Grafikart (positionnement CSS, créer un site de A à Z...), j'ai lu les tutoriels du site du zéro, mais j'ai toujours un énorme (et handicapant) problème : le positionnement en CSS. J'ai bien compris qu'il y avait 3 types : **FLOAT** (left, right), **POSITION** (absolute, relative), **DISPLAY** (block, inline, inline-block), et je sais toujours pas quand et comment les utiliser. Par exemple, pour aligner 3 colonnes, je ne saurais pas dire si float est plus adapté que display. (ça fonctionne dans les deux cas je sais, mais vous avez compris...). Mon principal problème est ici, **quand**, **comment**, **pourquoi** utiliser ce positionnement plutôt qu'un autre. Egalement, me vient une question : Aujourd'hui en 2013, quel est le type de positionnement à privilégier ? Mr X dit float, Mr Y parle du display, et Mlle B de position... J'ai passé plus de 100 heures depuis septembre à lire des bouquins, à essayer de coder par moi-même. J'y arrive, mais c'est très long, et je ne comprends même pas ce que je fais. "Oh tiens, pourquoi le inline à positionné mon texte comme il fallait ?..." Je perds un temps précieux, et je me décide aujourd'hui à vous demander directement si vous aviez des astuces à partager, des explications à me fournir, pour tenter de m'éclaircir... Merci par avance. EDIT : question "technique" : Je veux un site en 960px de large mais le **bakcground** du menu de navigation doit-être illimité. Le menu lui, est basé sur une width de 960px. Pour faire simple, il n'y a que le background du menu qui est "infini". Le menu est placé à droite, car un logo est à sa gauche. Voir schéma : [url=http://www.casimages.com/img.php?i=131107112925414270.png][img]http://nsa33.casimages.com/img/2013/11/07/mini\_131107112925414270.png[/img][/url] Voici comment j'ai procédé (ce n'est qu'un squelette) Qu'en pensez-vous ? Ma structure est correcte ? : [code]
<link rel="stylesheet" href="style.css">/* menu top : logo a gauche, menu à droite */<section id="top" class="col960">
<img src="">
<nav>
<ul><a href="">Accueil</a></ul>
<ul><a href="">A Propos</a></ul>
<ul><a href="">Contact</a></ul>
</nav>
</section><section id="slider" class="col960">
</section>[/code] Je n'ai aucune idée (ou presque) de comment procéder pour styliser ça. J'ai simplement pensé à créer une class avec les valeurs suivantes : [code].col960 { width: 960px; margin: auto; } [/code] Ce qui peut me permettre, de donner à la div que je veux une width de 960px. Et comme je n'ai rien mentionné dans le body, il prend automatiquement tout l'écran (j'ai juste ?). Merci encore. :)
3 réponses
Par défaut, les éléments "block" prennent la largeur total .
Supposons que tu veux un header qui prenne toute la largeur et un contenu qui prend 960px :
<header id="top">
<div class="col960">
<img id="logo" src="logo.png">
<nav id="top-nav"> <!-- ton menu --> </nav>
</div>
</header>
<div id="wrap">
<!-- mon superbe contenu -->
</div>Et niveau CSS :
body{
margin: 0;
}
header#top{
width:100%; /* inutile de le préciser */
height:30px;
background:DeepSkyBlue;
}
.col960{
width: 960px;
margin:0 auto; /* règle les marges à gauches / droite automatiquement */
}
#logo{float:left;}
#top-nav{float:right;}De cette manière, tu aura un header (et donc son background) de la taille de ta fenêtre, un conteneur de 960px dedans, dans ce dernier au aura ton logo à gauche, et ton menu à droite .
J'espère avoir résolu ton problème ?
Salut.
Oui c'est bon, merci. :)
En revanche je désespère sur autre chose (toujours le positionnement en css) si tu pouvais m'apporter ton savoir encore une fois... :p
Voici un screenshot du résultat final :
Et mon résultat pour le moment :
Le code :
<! DOCTYPE html >
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="col980">
<img src="img/logo.png" alt ="">
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</nav>
</div>
</header>
<div class="col980">
<section id="slider">
<div id="hello">
<h1>HELLO !</h1>
</div>
</section>
</div>
</body>
</html>
body {
margin: 0;
background-color: #9c9c9c;
}
/* grid 960 px */
.col980 {
width: 980px;
margin: 0 auto;
}
header {
height: 113px;
background-color: #636363;
position: relative;
}
header img {
float: left;
margin-top: 35px;
}
header nav {
float: right;
position: absolute;
bottom:0; right: 0;
}
header nav ul li {
display: inline;
padding-right: 95px; /* pour espacer les catégories */
}
section#slider {
height: 503px;
/* pas besoin de préciser le background-color car c'est lui du body */
}
section#slider #hello {
height: 403px;
border: 1px solid rgba(109,109,109,.13);
background-color: #bfbfbf;
margin-top: 25px;
position: relative;
}
section#slider #hello h1 {
color: #238bb5;
font-size: 160px;
position: absolute; /* est censé se positionner en absolute par rapport à son block parent (lui même positionné en relative) */
top:5px;
}Alors plusieurs choses :
- Je n'arrive pas à aligner correctement le menu sur une base de 980px. Le float:right l'aligne vraiment trop à droite, je ne comprends pas... d'ailleurs est-il autorisé de mélanger un float avec un position (c'est ce que j'ai fait pour placer mon menu en bas, j'ai trouvé que ça... :p).
- Impossible de mettre le "HELLO !" à 25px du top. J'ai l'impression que sa taille (160px) pose problème, car si je le met à 16px, ça fonctionne...
Une dernière chose :
Quand on positionne un élément en position: absolute; faut-il obligatoirement mettre un position:relative; à son élément parent ?
Merci pour ton aide en tout cas... :)
J'ai résolu le problème d'alignement de mon menu avec la propriété line:height: px;. Concernant le margin invisible du h1, il faut simplement déclarer sa marge à 0. Je sais pas trop pourquoi, mais bon... ça fonctionne.