A voir également:
- Problème de mise en page CSS
- Supprimer une page word - Guide
- Mise en forme conditionnelle excel - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Word numéro de page 1/2 - Guide
- Mise a jour windows 10 - Accueil - Mise à jour
12 réponses
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
31 août 2007 à 09:06
31 août 2007 à 09:06
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…
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
30 août 2007 à 14:03
30 août 2007 à 14:03
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
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
30 août 2007 à 21:50
30 août 2007 à 21:50
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 !
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 778
30 août 2007 à 23:22
30 août 2007 à 23:22
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
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
31 août 2007 à 11:09
31 août 2007 à 11:09
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
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
31 août 2007 à 12:44
31 août 2007 à 12:44
merci pour le compliment.
heureux d'avoir participé au dépannage et bon courage pour la suite !
heureux d'avoir participé au dépannage et bon courage pour la suite !
