28172 sujets

CSS et mise en forme, CSS3

Width 100 heigh 100 moins div à gauche

Bonjour tout le monde pour mon premier message.

Je créé actuellement un site et j'aimerai le composer comme ci-dessous :

image

Je suis débutant dans le domaine et je suis bloqué en ce qui concerne la partie "contenu".
Je n'arrive pas à lui faire prendre toute la largeur de la page moins les 300px de la partie "info".
J'ai vu plusieurs fois la propriété box-sizing dans mes recherches mais jusqu'a présent elle ne résout pas mon problème...
Que me conseillez-vous?

Mon code en résumé :

<body>
    <div id="info">
          <header>
          </header>
          <footer>
          </footer>
    </div>
    <ul id="menu">
    </ul>
    <div id="contenu">
    </div>
</body>



#info {
	width:300px;
	float:left;
}
footer {
        position:fixed;
        bottom:0;
#menu {
	position:absolute;
	height:50px;
        width:500px
	margin-left:300px;
}
#contenu {
????
}


J'espère avoir été compréhensible Smiley smile .

Merci !
Modifié par lsdesign (04 Oct 2013 - 11:36)
Update : J'ai réussi à faire prendre toute la largeur de la page à "contenu" moins les 300px de "info" (je m'acharnais à mettre un width:100% alors qu'il suffisait de ne pas mettre de width) mais cela ne fonctionne qu'avec une hauteur fixe (avec un height:100% ou sans height, le bloc disparait)...

Une idée ?
salut,
avec ton code, en utilisant une position absolue, tu ne fais que feindre le fait que ta <div> "contenu" soit égale à 100%-300px. Il existe une technique en utilisant les flottants et un contexte de formatage particulier en passant à ta <div> un "overflow:hidden".

<div id="info"></div>
<div id="contenu">
	<nav></nav>
</div>



html, body {margin:0;min-width:800px;min-height:300px;height:100%;}
#info {float:left;width:300px;height:100%;background:red;}
#contenu {overflow:hidden;height:100%;background:#c6c6c6;}
#contenu nav {width:500px;height:50px;background:#ffec3d;}

Tu devrais franchement éviter les positions absolues inutiles (comme dans ce cas).
Merci pour ta réponse.

J'ai indiqué une position absolute dans le code pour simplifié mais dans mon vrai code j'ai évité la position absolute en appliquant display:inline-block à info et menu. Sachant que ca ne change rien dans mon design si "contenu" n'est pas superposé avec le menu. Le background de body et menu étant le même.
Ce schema marche aussi : Image
Vaut-il quand même mieux utiliser overflow?
Modifié par lsdesign (04 Oct 2013 - 12:37)
Bonjour isdesign.

Je viens de te faire une simple ébauche de ta demande d'une mise en forme de ta page.
J'ai l'habitude faire un reset très simplifié pour montrer un exemple, mais ce n'est pas ainsi qu'il faut faire lorsque tu vas héberger ton document html+css.
On faire mieux, mais comme tu est débutant, restons simple.

<html lang="fr">
<head>
<meta charset="utf-8" />
<title>exemple</title>

<style>
* {
		margin			: 0;
		border			: 0 none;
		padding			: 0;
}

html, body {
		height			: 100%;
}

section {
		height			: 100%;
}

aside {
		position			: relative;
		float				: left;
		background-color	: lightblue;
		width			: 300px;
		height			: 100%;
}

header {
		background-color	: lightyellow;
		padding			: 10px;
}

footer {
		position			: absolute;
		bottom			: 0;
		right				: 0;
		left				: 0;
		background-color	: lightyellow;
		padding			: 10px;
}

article {
		background-color	: lightpink;
		height			: 50%;
}

nav {
		background-color	: lightgrey;
		width			: 500px;
		height			: 50px;
}
</style>

<body>
<section>
	<aside>
		<header>En-tête</header>
		<footer>Pied de Page</footer>
	</aside>

	<article>
		<nav>Menu</nav>
		partie haute de ton contenu
	</article>

	<article>
		partie basse de ton contenu
	</article>
</section>
</body>
</html>

@+
Merci bien tournikoti ! Je vais regarder ça.

Petite question : les balises <aside> et <article> ont-elle des restrictions au niveau de leurs contenus ?
Peuvent-elles contenir des images, des listes voir des scripts ?

« L’élément aside représente une section de la page qui renferme du contenu qui est tangentiellement relatif au contenu autour de l’élément aside, et qui peut être considéré comme étant séparé de ce contenu.»
Ca me chauffe un peu les neurones ça... Smiley confus
Bonjour isdesign.

lsdesign a écrit :
Petite question : les balises &lt;aside&gt; et &lt;article&gt; ont-elle des restrictions au niveau de leurs contenus ?
Peuvent-elles contenir des images, des listes voir des scripts ?

A priori, aucune restriction dans ces balises.
Mais il existe des puristes qui considères qui la balise <nav> est faite pour la navigation et donc réservé exclusivement au menu. Le mieux est de respecter la signification sémantique des balises.

Quand je désire créer un bloc général, j'utilise "section".
Si je désire faire un découpage verticale dans cette section, j'utilise plusieurs "article" pour le même niveau.
Si je dois à nouveau découper article, je reviens alors sur "section". En fait, j'alterne "section" et "article" selon le niveau de profondeur..

Si je fais un découpage horizontal en deux blocs, comme dans l'exemple ci-dessus, j'utilise "nav" pour mettre un menu et par opposition je mets "aside".

lsdesign a écrit :
« L’élément aside représente une section de la page qui renferme du contenu qui est tangentiellement relatif au contenu autour de l’élément aside, et qui peut être considéré comme étant séparé de ce contenu.»
Ca me chauffe un peu les neurones ça... Smiley confus

Je n'ai rien compris de ce que tu racontes ????

Un oubli de ma part. Voila ce que c'est de faire cela rapidement. Dans les CSS, j'ai oublié de mettre ceci :
aside {
content : "";
height : 0;
display : block;
clear : both;


@+
Modifié par tournikoti (05 Oct 2013 - 21:38)
bonsoir,

j'ajoute, pour info, une approche avec bg, height/min-height et contexte de formatage (avec un gradient remplaçable par une image), où le clear:both, dans la gestion du bg , n'est pas vraiment utile.
La technique n'est rien d'autre que le " fausse colonnes" éprouvé depuis des lustres Smiley smile .

http://codepen.io/gcyrillus/pen/qvfIu

Cdt

edit:Les balises ont une valeur sémantique et ne sont pas restrictive tant qu'il y a cohérence (type inline ou block sont un reflet de leur usage sémantique ).
Ceci dit on attend plutôt des liens dans un <nav> Smiley cligne .
Modifié par gc-nomade (05 Oct 2013 - 21:25)
Bonsoir gc-nomade.

Merci à toi de nous enrichir de ta connaissance !

Je ne connais pas cette balise "main". C'est nouveau ? Cela vient de sortir depuis quand ?
Il faut dire que je ne fais pas de veille technologique en ce qui concerne le web. Mais bon, c'est toujours bon à prendre.
Vu son nom, j'aurai tendance à dire qu'il sert de balise conteneur au plus haut niveau dans un document html. Si tu pouvais m'en dire plus, je serais heureux de m'enrichir par cette nouvelle connaissance.

A bien te comprendre, il n'est pas nécessaire de faire un clear:both sur la balise "section" car elle se trouve d'une part au plus haut niveau d'encapsulation et d'autre part qu'il n'y a rien après elle. Sinon, je n'ai pas compris l'exemple que tu nous a donnés et en particulier de l'usage que l'on fait de cette balise main.

@+
salut tournikoti ,
pour la balise , voici : http://www.w3.org/TR/2012/WD-html-main-element-20121217/ , plutôt que me lancer dans un discours confus Smiley smile .

Pour le clear:both; il n'est pas vraiment utile ici (>technique fausse colonnes dessinné via html ), car html et body ont le même background , il sera donc affiché , quoiqu'il arrive, html donne une scrollbar au besoin et dessine le fond de fenêtre du navigateur.

si HTML n'as pas de fond défini, celui de BODY s'y transfère, Si ils sont identiques ou différents , ils se superposent.
Cdt,
Modifié par gc-nomade (05 Oct 2013 - 22:05)
Bonjour et merci gc-nomade pour ta participation.

Si je comprends bien, la difference dans ta technique viens de l'utilisation de <main> pour le contenu et de l'application d'un faux dégradé au background pour créer la barre latérale c'est ça?

J'ai adapté mon code en fonction de l'exemple de tournikoti et cela fonctionne bien.
J'ai cependant un problème lorsque le contenu est plus haut que la fenêtre, lorsque l'on scroll vers la bas, tout le contenu de la page remonte, y compris <aside> et <nav>.

Pour éviter que le header et le footer ne se superposent si on réduit la fenêtre en hauteur, je n'ai pas trouvé d'autre solution que d'ajouter une section en absolute avec un min-height dans la balise aside :


<aside>
    <section id="laterale">
        <header>
        </header>
        <footer>
        </footer>
    </section>
</aside>




aside {
	width:300px;
	height:100%;	
	float:left;
}
#laterale {
	position:absolute;
	min-height:600px;
	width:300px;
	height:100%;
}
header {
	width:300px;
	height:300px;
}
footer {
	width:300px;
	height:300px;
	position:absolute;
	bottom:0;
}


C'est correct d'après vous ?

Merci !
Modifié par lsdesign (06 Oct 2013 - 14:10)
lsdesign a écrit :
Bonjour et merci gc-nomade pour ta participation.

Si je comprends bien, la difference dans ta technique viens de l'utilisation de &lt;main&gt; pour le contenu et de l'application d'un faux dégradé au background pour créer la barre latérale c'est ça?

<main> , ou <div> ou <section> sont des elements de type block , leur valeur sémantique n'a aucune importance quand il s'agit de les styler (sauf a faire d'un <span> un <h1> visuel, bien sur).
Pour le cas de main (element block), on ne joue que sur le contexte de formatage (idem pour <nav>) pour qu'il s’accole a coté du flottant sans passer dessous.

La technique des fausse colonnes en fond , sont appliqué via HTML/BODY, il n'est pas necessaire de mettre à nouveau les fonds dans <aside> ni <main>
lsdesign a écrit :

J'ai adapté mon code en fonction de l'exemple de tournikoti et cela fonctionne bien.
J'ai cependant un problème lorsque le contenu est plus haut que la fenêtre, lorsque l'on scroll vers la bas, tout le contenu de la page remonte, y compris &lt;aside&gt; et &lt;nav&gt;.

c'est le comportement normal.
lsdesign a écrit :

Pour éviter que le header et le footer ne se superposent si on réduit la fenêtre en hauteur, je n'ai pas trouvé d'autre solution que d'ajouter une section en absolute avec un min-height dans la balise aside :

heu, qu'elle est l'idée initiale ?
lsdesign a écrit :


&lt;aside&gt;
    &lt;section id=&quot;laterale&quot;&gt;
        &lt;header&gt;
        &lt;/header&gt;
        &lt;footer&gt;
        &lt;/footer&gt;
    &lt;/section&gt;
&lt;/aside&gt;


pourquoi un section ? y'a t-il quelque chose entre header et footer ?
lsdesign a écrit :


aside {
	width:300px;
	height:100%;	
	float:left;
}
#laterale {
	position:absolute;
	min-height:600px;
	width:300px;
	height:100%;
}
header {
	width:300px;
	height:300px;
}
footer {
	width:300px;
	height:300px;
	position:absolute;
	bottom:0;
}


C'est correct d'après vous ?

Merci !

Je ne vois pas le code HTML associé a ce CSS.

- Cependant, du min-height plutôt que du height serait moins rigide.
- position:relative/absolute aident a maitriser le positionnement dans des zones précises.
- Des marges internes/externes peuvent dégager de la place pour des éléments en dehors du flux.

je ne suis pas certains de comprendre le comportement final de ta page entre peu de contenu et beaucoup de contenu.
++
Modifié par gc-nomade (06 Oct 2013 - 15:19)
Bonjour à toutes et à tous.

Et je n'ai pas droit à des remerciements ??????? Smiley lol
Non mais ! Smiley fache

"isdesign" a écrit :
J'ai adapté mon code en fonction de l'exemple de tournikoti et cela fonctionne bien.
J'ai cependant un problème lorsque le contenu est plus haut que la fenêtre, lorsque l'on scroll vers la bas, tout le contenu de la page remonte, y compris <aside> et <nav>.

Bien sûr que cela fonctionne, puisque je l'ai testé avant de te le fournir.
Mais tes spécifications n'étant pas suffisamment explicites, il a fallu interpréter ce que tu désirais faire.
Vu que tu utilisais 100% pour qualifier la hauteur de ta page, j'ai cru comprendre qu'elle ne dépassait pas la taille de la fenêtre.

Donc si tu changes la règle de présentation, tu auras un comportement différent, et vu comme le dit gc-nomme :

"gc-nomade" a écrit :
c'est le comportement normal.

Reprenons les explications.

1) une partie gauche que tu nommes "info".
Largeur : 300px

Jusque là, ça va ! Mais en ce qui concerne la hauteur, 100% n'est pas suffisamment clair.
Veux-tu qu'elle soit toujours fixe 'position:fixed' par rapport à la fenêtre ?
Dépasse-t-elle la hauteur de la fenêtre ?
Veux-tu que cette colonne s'ajuste avec celle de droite ou pas ?
En quelque mots, essaye de définir son usage.
Ensuite on verra comment procéder pour te satisfaire.

2) une partie droite que tu nommes "contenu".
Vu le dessin, j'ai vaguement compris que le "menu" était d'une hauteur et d'une largeur fixe.
Mais ce bloc, se trouve-t-il dans le bloc contenu ou à l'extérieur ?
Et que se passe-t-il à droite de ce "menu" ?

Ensuite, la partie du dessous, c'est bien ton "contenu".
Et je suppose que tu désires qu'elle prenne toute la largeur restante de la fenêtre.
Et quand est-il de la hauteur de ce bloc ?

Question subsidiaire. Que vas-tu y mettre à l'intérieur de ce contenu ?
Y-a-t-il encore un autre découpage ? Du genre multi-colonne colonne avec des pavés contenant texte et images, comme dans un journal.
Ou bien un formulaire ? Du texte libre sans image comme dans un livre ?
La mise en page dépend d'abord de ce que tu veux faire.
Afin de ne pas passer son temps soit à refaire la mise en page, soit à bidouiller sans cesse, il faut mieux fixer dès le départ ce que tu as en tête.

Évite de trop surcharger le css avec des 'position:absolute' ou avec des 'float:left' si cela n'est pas nécessaire Il faut toujours rester dans le flux et faire simple tant que c'est possible. Après on adapte.

Personnellement, je préfère des explications et un beau dessin, même compliqué, que du code !

Cordialement. Smiley cligne
Tournikoti.
@+
Sujet clos
Aller à