Résolu [Positionnement - CSS] Aside & Section

Statut
N'est pas ouverte pour d'autres réponses.
Wazau

Wazau

ʇûoɐ ǝznop
Premium
Inscription
12 Août 2012
Messages
1 281
Réactions
283
Points
20 278
RGCoins
65
Bonjour, me voici avec un petit soucis de positionnement en css... Encore...

Ma structure est la suivante :

HEADER (avec un nav dedans)
ASIDE SECTION
FOOTER

Le problème est que je n'arrive pas à placer mon Aside et Section cote à cote...

Voici mes codes :

HTML :

HTML: 
<header>blabla</header>
<aside>Mon aside en rouge</aside>
<section>Ma section en vert</section>
<footer>blablabla</footer>

CSS :

Code: 
aside, section {
 display: inline-block;
}
aside {
 background: red;
 width: 15%;
 height: 100%;
}
section{
 background: green;
 width: 85%;
 height: 100%;
}

mais voici ce que cela me donne..
60d9ac1d23d033a7fbd841f24281027a.png

(lien image :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
)

Merci d'avance pour votre aide !
 
Trier par date Trier par votes
Wazau a dit:
Bonjour, me voici avec un petit soucis de positionnement en css... Encore...

Ma structure est la suivante :

HEADER (avec un nav dedans)
ASIDE SECTION
FOOTER

Le problème est que je n'arrive pas à placer mon Aside et Section cote à cote...

Voici mes codes :

HTML :

HTML: 
<header>blabla</header>
<aside>Mon aside en rouge</aside>
<section>Ma section en vert</section>
<footer>blablabla</footer>

CSS :

Code: 
aside, section {
 display: inline-block;
}
aside {
 background: red;
 width: 15%;
 height: 100%;
}
section{
 background: green;
 width: 85%;
 height: 100%;
}

mais voici ce que cela me donne..
60d9ac1d23d033a7fbd841f24281027a.png

(lien image :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
)

Merci d'avance pour votre aide !
Cliquez pour agrandir...
Salut,

Si tu veux les placer côte à côté il faut utiliser la fonction float

float: left pour le bonjour en rouge
float: right pour le bonjour en vert :-)
 
Voter positivement 0 Voter négativement
Bonjour,

Pour ton problème tu peux utiliser la technique du flexbox :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Ou utiliser tout simplement la fonction float :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Bonne soirée,
Lagger
 
Voter positivement 0 Voter négativement
Bonjour en fait, je viens de voir pourquoi cela ne fonctionnait pas. C'est du à un autre partie de mon css :

Code: 
html, body {
      height: 100%;
        min-width: 700px;
        text-align: justify;
}
body {
      display: flex;
      flex-direction: column;
        flex-wrap: nowrap;
        margin: 0;
}
section {
      flex: 1 0 auto;
      margin:0px;
        max-width: 100%;
}

Le code indiquer dans mon premier message était juste. Néanmoins c'est le code au dessus qui le rend inutilisable tout comme pour l'utilisation de float etc...
Néanmoins j'ai besoin de ce code ( ci dessus ) pour mettre le footer en fin de page facilement.
 
Voter positivement 0 Voter négativement
Wazau a dit:
Bonjour en fait, je viens de voir pourquoi cela ne fonctionnait pas. C'est du à un autre partie de mon css :

Code: 
html, body {
      height: 100%;
        min-width: 700px;
        text-align: justify;
}
body {
      display: flex;
      flex-direction: column;
        flex-wrap: nowrap;
        margin: 0;
}
section {
      flex: 1 0 auto;
      margin:0px;
        max-width: 100%;
}

Le code indiquer dans mon premier message était juste. Néanmoins c'est le code au dessus qui le rend inutilisable tout comme pour l'utilisation de float etc...
Néanmoins j'ai besoin de ce code ( ci dessus ) pour mettre le footer en fin de page facilement.
Cliquez pour agrandir...
Et en forcant le code avec un !important ?
 
Voter positivement 0 Voter négativement
J'ai réussi a avoir un début de ce que je souhaitai !
J'ai utilisé:
Code: 
<section>
<aside>bonjour</aside>
<article>bonjour</article>
<section>

et

Code: 
html, body {
     height: 100%;
       min-width: 700px;
       text-align: justify;
}
body {
     display: flex;
     flex-direction: column;
       flex-wrap: nowrap;
       margin: 0;
}
section {
     flex: 1 0 auto;
     margin:0px;
       max-width: 100%;
}
aside, article {
 display: inline-block;
}
aside {
 background: red;
 width: 15%;
 height: 100%;
}
article{
 background: green;
 width: 85%;
 height: 100%;
}

Le seul problème maintenant c'est qu'il ne prend pas tous l'espace disponible.
Il y a sans doute un rapport avec la propriété flex de la balise section. Mais je ne suis pas encore très performant avec les flexbox. (@Lagger )
 
Voter positivement 0 Voter négativement
Wazau a dit:
J'ai réussi a avoir un début de ce que je souhaitai !
J'ai utilisé:
Code: 
<section>
<aside>bonjour</aside>
<article>bonjour</article>
<section>

et

Code: 
html, body {
     height: 100%;
       min-width: 700px;
       text-align: justify;
}
body {
     display: flex;
     flex-direction: column;
       flex-wrap: nowrap;
       margin: 0;
}
section {
     flex: 1 0 auto;
     margin:0px;
       max-width: 100%;
}
aside, article {
 display: inline-block;
}
aside {
 background: red;
 width: 15%;
 height: 100%;
}
article{
 background: green;
 width: 85%;
 height: 100%;
}

Le seul problème maintenant c'est qu'il ne prend pas tous l'espace disponible.
Il y a sans doute un rapport avec la propriété flex de la balise section. Mais je ne suis pas encore très performant avec les flexbox. (@Lagger )
Cliquez pour agrandir...
Si tu veux l'espace souhaité pourquoi pas utiliser du responsive ( % ) à la place des px ? :p
 
Voter positivement 0 Voter négativement
Flown' iT a dit:
C'est vrai, bon après je ne fais que m'entraîner au CSS donc je ne peux pas t'en dire plus,
Cependant @Paul GTP lui pourra trouver ta solution. ::p:

Bonne fin de soirée
Cliquez pour agrandir...
Merci pour toute l'aide que tu m'as apporté en tout cas.
En attendant d'autre solution .
 
Voter positivement 0 Voter négativement
Statut
N'est pas ouverte pour d'autres réponses.
Retour
Haut