Forum : Le positionnement en CSS : à l'aide !

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]

</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

Benjamin Derepas,

il y a 12 ans

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 ?

lorraineS,

il y a 12 ans

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... :)

lorraineS,

il y a 12 ans

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.