28234 sujets

CSS et mise en forme, CSS3

Positionnement CSS

Bonjour,

Je dois développer un petit site pour une amie, j'ai trouvé ici un tuto qui semble correspondre à ce que je cherche, j'ai essayé de l'appliquer, mais je me heurte à 2 problèmes :

- le texte de la div "content" est décalé à l'extrême droite, alors qu'il devrait être calé sous l'image de l'entête.

- moins grave, je ne parviens pas à créer un séparateur vertical entre les div.

Le résultat est visible ici : http://chemin26.pagesperso-orange.fr/

Merci d'avance pour votre aide!

voici le code HTML :

<html lang="fr">
    <head>
	<link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="header">
            <h1>Chemin 26</h1>
        </div>
        <div id="center">
            <div id="content">
                <h2>contenu</h2>
                <p>Texte du contenu
            </div><!-- #content -->
            <div id="sidebar">
                <h2>Navigation</h2>
                <ul id="menu">
                    <li><a href="#" title="menu 1">menu 1</a></li>
                    <li><a href="#" title="menu 2">menu 2</a></li>
                </ul>
            </div> <!-- #sidebar -->
        </div><!-- #center -->

        <div id="footer">
            <p>pied de page</p>
        </div><!-- #footer -->
    </body>
</html>


et le CSS :

html, body {
	height: 100%;
	margin: 0;
	}
html {
	background: #ffce5e url(fond.png);
	}
div#global {
    min-height: 100%;
    width: 750px;
    padding: 0 10px;
    margin: 0 auto;
    position: relative;
	padding: 0 10px;
	background: #ffce5e url(separateur.png) center repeat-y;
}
div#center {
    /* Pour éviter la superposition du pied de page et du contenu : */
    padding-bottom: 50px; 
	overflow: auto;
}
div#content {
    float: right;
    width: 530px;
}
div#sidebar {
    float: left;
    width: 200px;
}
div#header {
    background: #7fcf2e url(entete.png) no-repeat;
	color: #fff;
    height: 201px;
}
div#header h1 {
    margin: 0;
}
div#footer {
    position: absolute;
    width: 750px;
    bottom: 0;
	left: 10px;
    background: #7fcf2e url(footer.png) repeat-x;
    color: #fff;
}
Bonjour

orionis26240 a écrit :
- le texte de la div#content est décalé à l'extrême droite, alors qu'il devrait être calé sous l'image de l'entête.
Je ne comprends pas ce passage, en effet, via le lien fournit la DIV#content se comporte normalement. Positionnée en Float:right, elle vient se caler le plus possible à droite du container (ici body) en fonction de sa propre largeur.
Si cela signifie que tu souhaites enlever l'espace entre l'image et la DIV#center je pense qu'il te faut travailler le padding appliqué sur celle-ci ainsi que les marges appliquées aux div#content et #sidebar.

orionis26240 a écrit :
- moins grave, je ne parviens pas à créer un séparateur vertical entre les div.
Pour ce faire, je vois la possibilité d'appliquer une bordure à gauche de la DIV#content qui je pense, est le moyen le plus simple et qui reste facilement personnalisable.

Qu'en penses-tu ?
Déjà merci pour ta réponse.

a écrit :
Si cela signifie que tu souhaites enlever l'espace entre l'image et la DIV#center je pense qu'il te faut travailler le padding appliqué sur celle-ci ainsi que les marges appliquées aux div#content et #sidebar.

En fait, je voudrais que la largeur cumulée des 2 div sidebar et content soient identique à celle de la div header, ce qui semble fonctionner dans le tuto d'origine.

a écrit :
Pour ce faire, je vois la possibilité d'appliquer une bordure à gauche de la DIV#content qui je pense, est le moyen le plus simple et qui reste facilement personnalisable.


J'ai tenté :
div#content {
    float: right;
    width: 530px;
	border-width:1px;
	border-color: black;
}

... mais ça n'affiche aucune bordure.
Je reviendrais sur le premier point un peu plus tard (manque de temps) mais concernant la bordure, il faut en définir le style. Je ne vois pas pourquoi 
border-left:1px solid black;
ne fonctionnerait pas...


EDIT: et appliquer un width:100% sur DIV#center et #header, ça le fait, non ?
Modifié par Greg_Lumiere (09 Dec 2014 - 13:49)
Greg_Lumiere a écrit :
Je reviendrais sur le premier point un peu plus tard (manque de temps) mais concernant la bordure, il faut en définir le style. Je ne vois pas pourquoi 
border-left:1px solid black;
ne fonctionnerait pas...


OK, ça fonctionne.

a écrit :
: et appliquer un width:100% sur DIV#center et #header, ça le fait, non ?


Non, ça ne change rien...
orionis26240 a écrit :
le texte de la div "content" est décalé à l'extrême droite, alors qu'il devrait être calé sous l'image de l'entête.

salut,
pour avoir ce comportement, il faut que tes <div> aient une largeur prédéfinie/maximale pour les harmoniser. Tu feras ensuite en sorte de les centrer avec un "margin:auto".
Si tes <div> (header, center, footer) faisaient par exemple "960px" de large, tu obtiendrais le résultat désiré (tu devras soit enlever soit réajuster la largeur de ta <div> content).

PS : passe au HTML5 !
J'ai tenté d'appliquer tes conseils, ça change un peu, mais ce n'est pas encore ça (le résultat est visible sur la page en question) :

html, body {
	height: 100%;
	margin: 0;
	}
html {
	background: #ffce5e url(fond.png);
	}
div#global {
    min-height: 100%;
    width: 750px;
    padding: 0 10px;
    margin: 0 auto;
    position: relative;
	padding: 0 10px;
}
div#center {
    /* Pour éviter la superposition du pied de page et du contenu : */
    padding-bottom: 50px; 
	overflow: auto;
	margin: auto;
}
div#content {
    float: right;
    width: 600px;
	border-left:3px solid #7fcf2e;
	margin: auto;
}
div#sidebar {
    width: 200px;
	margin: auto;
}
div#header {
    background: #7fcf2e url(entete.png) no-repeat;
	color: #fff;
	 width: 800px;
    height: 201px;
	margin: auto;
}
div#header h1 {
    margin: 0;
}
div#footer {
    position: absolute;
    width: 800px;
	margin: auto;
    bottom: 0;
    background: #7fcf2e url(footer.png) repeat-x;
    color: black;
}
Bonsoir,

J'ai préparé le terrain sur une feuille Codepen.

Pourrais-tu décrire le résultat attendu car à part quelques erreurs minimes, je ne vois pas trop ce que tu t'attends à avoir ?

Bonne soirée

PS : Elle est où la DIV#global ?
Greg_Lumiere a écrit :
Bonjour
Pourrais-tu décrire le résultat attendu car à part quelques erreurs minimes, je ne vois pas trop ce que tu t'attends à avoir ?

En fait, j'aimerais que l'ensemble des données de la page soit aligné sous l'image de l'entête (de largeur 800px), avec la div Sidebar calée à gauche et la div Content à sa droite, et la div Footer en bas (forcément!), toujours axée sous l'entête.
Le temps me manque...

Et si :
* on applique 800px de large à div#content,
* on place ce div#content en position relative (il y est déjà mais servira de référent).
* on place div#scrollbar en position absolue (top:0)
* on place aussi le #footer en position relative avec margin:0 auto pour qu'il se centre et soit dans le prolongement de ce qui est situé au dessus.

D'autre part concernant #scrollbar :
Il pourrait être préférable de ne pas fixer sa taille mais plutôt de jouer sur le padding, non ?
bonjour,
Le site est quasiment terminé, reste plus qu'à gérer les couleurs et photos, autant dire presque rien!
Juste un petit souci : sur cette page, lorsqu'elle est affichée sur un petit écran, il n'y a pas d'ascenseur vertical.
Comment y remédier?
Sujet clos
Aller à