Problème de mise en page CSS
Ixion
-
Nico -
Nico -
Bonjour,
Actuellement je crée un site web, mais je rencontre des problèmes de mise en page avec les feuilles de style CSS. Mes div se chevauchent, ou ne restent pas l'une à côté de l'autre, même en modifiant les propriétés comme vu sur certains sites d'entraide. Du coup, je préférerais recommencer à zéro en demandant votre aide.
Quel code metteriez-vous pour obtenir plusieurs "cadres" sur une page d'accueil ? Disposés comme ceci :
http://img254.imageshack.us/img254/5378/cssri9.jpg
En somme, cela donnerait ceci avec menu et header (sachant que ma page d'accueil est inclu dans la page index) :
http://img441.imageshack.us/img441/9859/miseenpagecssel3.jpg
Vous remerciant à l'avance, je vous souhaite de passer une belle journée (malgré le temps ;-))
Ixion
Actuellement je crée un site web, mais je rencontre des problèmes de mise en page avec les feuilles de style CSS. Mes div se chevauchent, ou ne restent pas l'une à côté de l'autre, même en modifiant les propriétés comme vu sur certains sites d'entraide. Du coup, je préférerais recommencer à zéro en demandant votre aide.
Quel code metteriez-vous pour obtenir plusieurs "cadres" sur une page d'accueil ? Disposés comme ceci :
http://img254.imageshack.us/img254/5378/cssri9.jpg
En somme, cela donnerait ceci avec menu et header (sachant que ma page d'accueil est inclu dans la page index) :
http://img441.imageshack.us/img441/9859/miseenpagecssel3.jpg
Vous remerciant à l'avance, je vous souhaite de passer une belle journée (malgré le temps ;-))
Ixion
A voir également:
- Problème de mise en page CSS
- Mise en forme conditionnelle excel - Guide
- Impossible de supprimer une page word - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
- Mettre google en page d'accueil - Guide
12 réponses
salut Gihef, salut tout le monde !
oui pour le coup de main c'est même ce que j'attendais, le plus intéressant à mon avis sur une question aussi ouverte c'est de confronter nos points de vue et nos savoir-faire.
je me suis permis de mettre ta version en ligne, j'ai juste ajouté une règle pour être compatible avec IE.
je me demande même si ça ne vaudrait pas le coup de pousser l'expérience un peu plus loin pour avoir une comparaison de mises en page fixe/fluide à disposition.
avantages/inconvénients :
avec ces deux versions tu peux déjà voir que selon ce qui est attendu du site, les propositions divergent.
si tu as beaucoup de contenu à afficher ma version sera bien trop étriquée et contraindra l'utilisateur à défiler la page pendant des kilomètres.
à l'inverse si tes pages ne contiennent qu'une image et un petit paragraphe de texte, la version de Gihef sera démesurément vide, surtout sur un moniteur avec une grosse résolution.
et on pourrait en imaginer beaucoup d'autres…
oui pour le coup de main c'est même ce que j'attendais, le plus intéressant à mon avis sur une question aussi ouverte c'est de confronter nos points de vue et nos savoir-faire.
je me suis permis de mettre ta version en ligne, j'ai juste ajouté une règle pour être compatible avec IE.
#navigation
{
background-color:#9acd32;
position:absolute;
left:0;
width:180px;
}
je me demande même si ça ne vaudrait pas le coup de pousser l'expérience un peu plus loin pour avoir une comparaison de mises en page fixe/fluide à disposition.
avantages/inconvénients :
avec ces deux versions tu peux déjà voir que selon ce qui est attendu du site, les propositions divergent.
si tu as beaucoup de contenu à afficher ma version sera bien trop étriquée et contraindra l'utilisateur à défiler la page pendant des kilomètres.
à l'inverse si tes pages ne contiennent qu'une image et un petit paragraphe de texte, la version de Gihef sera démesurément vide, surtout sur un moniteur avec une grosse résolution.
et on pourrait en imaginer beaucoup d'autres…
salut,
je te propose ça, j'ai juste fait la mise en place des <div> et je n'ai pas cherché à respecter les proportions.
j'ai utilisé {position:absolute;} plutôt que le flottement.
je te propose ça, j'ai juste fait la mise en place des <div> et je n'ai pas cherché à respecter les proportions.
j'ai utilisé {position:absolute;} plutôt que le flottement.
Merci Dalida pour cette réponse si complète. Tout fonctionne à merveille pour mes cadres de page d'accueil.
Reste que je n'arrive pas à régler un autre problème même en reprenant votre exemple pour la structure du site cette fois-ci. Mon div "content" passe en dessous du div "navigation" lors que j'ouvre mes favoris ou redimensionne la fenêtre par exemple.
J'ai ceci dans ma feuille de style :
div#navigation
{
background-color:#9acd32;
position:absolute;
width:190px;
margin: 0 82% 0 0;
padding: 0px;
}
div#content
{
padding-left:190px;
position:relative;
float:right;
width: 78%;
margin: 0;
padding: 20px 3% 0 0;
}
Je vous remercie encore et j'espère ne pas prendre trop de votre temps.
Salutations,
Ixion
Reste que je n'arrive pas à régler un autre problème même en reprenant votre exemple pour la structure du site cette fois-ci. Mon div "content" passe en dessous du div "navigation" lors que j'ouvre mes favoris ou redimensionne la fenêtre par exemple.
J'ai ceci dans ma feuille de style :
div#navigation
{
background-color:#9acd32;
position:absolute;
width:190px;
margin: 0 82% 0 0;
padding: 0px;
}
div#content
{
padding-left:190px;
position:relative;
float:right;
width: 78%;
margin: 0;
padding: 20px 3% 0 0;
}
Je vous remercie encore et j'espère ne pas prendre trop de votre temps.
Salutations,
Ixion
En relative ou en absolute, les div se chevauchent toujours. Idem avec les floats...
Enfin, disons plutôt que le contenu du "content" passe sous l'autre div. J'ai également essayé en mettant une largeur fixe et en utilisant "min-width". Le problème persiste.
Ixion
Enfin, disons plutôt que le contenu du "content" passe sous l'autre div. J'ai également essayé en mettant une largeur fixe et en utilisant "min-width". Le problème persiste.
Ixion
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
re,
je ne vois pas très bien ce que tu as fait.
dans div#navigation, le {margin: 0 82% 0 0;} doit être inutile puisque tu as défini la largeur et que la positon est absolue.
dans div#content, c'est aussi le mic-mac.
le {padding-left:190px;} est remplacé par la valeur de {padding: 20px 3% 0 0;}.
et normalement {float:right;} et {width: 78%; } ne sont pas utiles.
si tu souhaite adapter ma solution, il faut la prendre en entier et ensuite ajouter du design.
si tu l'appliques partiellement tu vas te retrouver avec des conflits.
soit dit en passant je ne dis pas que ma proposition soit la plus adaptée à ton site !
je ne vois pas très bien ce que tu as fait.
dans div#navigation, le {margin: 0 82% 0 0;} doit être inutile puisque tu as défini la largeur et que la positon est absolue.
dans div#content, c'est aussi le mic-mac.
le {padding-left:190px;} est remplacé par la valeur de {padding: 20px 3% 0 0;}.
et normalement {float:right;} et {width: 78%; } ne sont pas utiles.
si tu souhaite adapter ma solution, il faut la prendre en entier et ensuite ajouter du design.
si tu l'appliques partiellement tu vas te retrouver avec des conflits.
soit dit en passant je ne dis pas que ma proposition soit la plus adaptée à ton site !
Bonjour,
Un petit coup de main extérieur ?
C'est vrai qu'on a du mal à comprendre ce que tu souhaites et comment tu t'y prends.
Pour ça, il serait préférable que tu donnes plus d'info.
Cependant, on peu supposer…
Je te propose d'essayer cette adaptation du code de Dalida (salut à toi) :
--
Un petit coup de main extérieur ?
C'est vrai qu'on a du mal à comprendre ce que tu souhaites et comment tu t'y prends.
Pour ça, il serait préférable que tu donnes plus d'info.
Cependant, on peu supposer…
Je te propose d'essayer cette adaptation du code de Dalida (salut à toi) :
<style type="text/css">
html {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
margin:0;
padding:0;
}
body {
font-size:.8em;
width:95%;
margin:0;
padding:0;
border-right:1px solid #999;
border-bottom:1px solid #999;
}
#header {
/* padding-left:180px;*/
height:80px;
line-height:80px;
text-align:center;
background-color:#add8e6;
}
#navigation {
background-color:#9acd32;
position:absolute;
width:180px;
}
#content {
margin-left:180px;
position:relative;
}
#preamble, #text {
margin-right:180px;
margin-left:40px;
}
#preamble {
padding:.6em 0;
text-align:center;
font-style:italic;
/* margin-right:140px;*/
margin-top : 40px;
background-color:#ffdead;
}
#preamble p {
margin:0;
}
#text {
text-align:justify;
/* margin-right:140px;*/
background-color:#ffb6c1;
}
#text p {
margin:0;
padding:.5em 0 0 0;
}
#extra {
width:140px;
position:absolute;
right:0;
top:-40px;
background-color:#ffd700;
text-align:right;
}
h1, ul {
margin:0;
padding:0;
}
</style>
Tu as pu remarquer l'utilisation de “%” et l'augmentation des marges.
--
Bonjour à tous les deux et merci
En fait, la solution avec les % m'aurait paru plus appropriée (bon, je ne suis pas franchement professionnel :-)) : la page s'adapterait en quelque sorte en fonction de la résolution utilisée par l'internaute. Cependant, dans ce cas, le menu placé à gauche risque d'être trop réduit sur de petites résolutions. Donc il faudrait une largeur fixe pour le menu (ou alors une largeur minimale de 200px par exemple).
Je vais essayer vos deux solutions l'une après l'autre et je vous dis ce qui fontionne ou convient le mieux.
Merci encore
Bonne journée
Ixion
En fait, la solution avec les % m'aurait paru plus appropriée (bon, je ne suis pas franchement professionnel :-)) : la page s'adapterait en quelque sorte en fonction de la résolution utilisée par l'internaute. Cependant, dans ce cas, le menu placé à gauche risque d'être trop réduit sur de petites résolutions. Donc il faudrait une largeur fixe pour le menu (ou alors une largeur minimale de 200px par exemple).
Je vais essayer vos deux solutions l'une après l'autre et je vous dis ce qui fontionne ou convient le mieux.
Merci encore
Bonne journée
Ixion
re,
le menu dans les deux cas est de largeur fixe.
le menu dans les deux cas est de largeur fixe.
#navigation {
background-color:#9acd32;
position:absolute;
width:180px;
}
Oui effectivement. Vos deux versions fontionnent à merveille ! D'après ce que tu me disais, celle de Gihef serait plus appropriée dans mon cas. En essayant, je dois dire que c'est ce que je voulais. Je règle juste un petit problème venant de mon "include" qui appelle une page contenant des div et qui - semble-t-il - empêche le div "navigation" de s'afficher correctement.
Je poste ensuite.
Je poste ensuite.
Re coucou
Voilà, problème réglé. En fait, c'était juste un problème de superposition de calques, réglé avec les "z-index".
Je vous remercie sincèrement de votre aide sans laquelle je serais encore en train de chercher.
Donc en fait, pour ceux que ça intéresse, les deux solutions proposées fontionnent.
Voir le message de Dalida pour les explications :
probleme de mise en page css?Acces=1#6
Merci, merci encore. Un travail de qualité :-)
Salutations,
Ixion
Voilà, problème réglé. En fait, c'était juste un problème de superposition de calques, réglé avec les "z-index".
Je vous remercie sincèrement de votre aide sans laquelle je serais encore en train de chercher.
Donc en fait, pour ceux que ça intéresse, les deux solutions proposées fontionnent.
Voir le message de Dalida pour les explications :
probleme de mise en page css?Acces=1#6
Merci, merci encore. Un travail de qualité :-)
Salutations,
Ixion