Titre: Pointillés sur toute la hauteur en CSS
Posté par: erwinol le le 07-09-2004 a 20:06:30
Salut à tous !
Une fois n'est pas coutume, j'ai un problème de CSS comme vous pouvez le voir sur cette page :http://www.francoo-network.com/divers/renta (http://www.francoo-network.com/divers/renta)
La ligne pointillée à droite du menu ne descend pas jusqu'en bas alors que c'est ce que je voudrais. J'ai essayé un tas de combinaisons de height, min-height, auto, 100%, 500px, etc... et je parviens pas à solutionner le problème.
Voici la version actuelle du code (parti centrale menu+contenu):
Code:
<div class="centre">
<div class="menu">
[contenu du menu]
</div>
<div class="contenu">
[contenu de la page]
</div>
</div> <!-- fin centre -->
|
|
et le fichier CSS :
Code:
.centre
{
}
.menu
{
float: left;
padding: 5px;
width: 125px;
height: auto;
border-right: 1px dashed #739A39;
background-color: #EFEFEF;
}
.contenu
{
float: left;
padding: 10px;
padding-top: 5px;
background-color: #EFEFEF;
}
|
|
Si l'un d'entre vous à une illumination ;) |
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: calenfeaion le le 07-09-2004 a 20:49:01
j'ai sais trop rien, mais c'est juste pour dire que sur firefox, c'est pas top...
enfin, j'imagine qu'on te la déjà dit :) |
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: willy le le 07-09-2004 a 21:11:39
bonsoir erwinol,
Pour utiliser les % il te faut une dim pour ton div centre, et si tu donnes une dim à ton menu il faut qu'elle soit plus grande que celle du contenu.
Je pense que le plus astucieux serait de mettre les pointillés sur la gauche de ton div contenu, puisque c'est lui qui pousse ton div centre, tes pointillés seraient ainsi toujours sur toute la hauteur. |
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: Netah le le 07-09-2004 a 23:38:48
| Il va te répondre (comme il l'a fait avec moi) que c'est bon si le contenu est plus long que le menu mais si sur certaines pages, le menu est plus long que le contenu, ca ne sera pas bon. |
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: willy le le 07-09-2004 a 23:45:25
| il peut remplir le contenu avec des sauts de lignes ou lui donner une taille mini correspondant au menu ;D |
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: Netah le le 08-09-2004 a 00:11:25
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: erwinol le le 08-09-2004 a 02:12:33
Le problème est résolu grâce aux modèles de Sibelius ... ouais je sais c'est de la triche mais au moins ça marche ;D
Celà dit, il me pose encore un problème au niveau du menu. Lorsque la page est longue, ça pousse le bas de page et tout est impeccable ! Mais dès que c'est le menu qui devient long (comme vous pouvez le voir en suivant à nouveau le lien que je vous avais donné), il dépasse du design. J'ai essayé d'y remédier en mentionnant une taille supérieure à la taille du menu mais rien à faire ! Le seule moyen d'avoir un long menu serait d'avoir un long contenu sur chaque page ... ce qui ne sera évidemment pas toujours possible.
Pourquoi un long contenu ne pose-t-il pas de soucis alors qu'un long menu en pose ?
Comment y remédier ?
Je vous donne la nouvelle version du CSS :
Code:
#menu
{
position: absolute;
left:0;
width: 125px;
padding: 5px;
height: 5000px;
}
#contenu
{
border-left: 1px dashed #739A39;
margin-left: 125px;
padding: 5px;
padding-left: 10px;
}
|
|
et du HTML :
Code:
<div id="menu">
[Ici c'est le menu]
</div>
<div id="contenu">
[Ici c'est le réel contenu de la page]
</div>
<div id="footer">
[le footer avec différents liens]
</div>
|
|
Alors ? Une illumination ? ;D
|
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: Netah le le 08-09-2004 a 09:11:04
1/ Modif de ton code
Code:
#menu
{
position: absolute;
left:0;
width: 125px;
padding: 5px;
}
#contenu
{
border-left: 1px dashed #739A39;
margin-left: 125px;
padding: 5px;
padding-left: 10px;
height: 350px; /* ici la hauteur du menu */
}
|
|
2/ autre solution
Sinon, ou si le menu est dynamique et destiné à changer, j'utiliserais une solution qui fonctionne à coup sur
Code:
<div class="conteneur">
<div class="menu"></div>
<div class="contenu"></div>
</div>
<div class="footer"></div>
|
|
Code:
.conteneur
{
width:750;
background-image: url(dashed.png);
background-repeat:repeat-y;
background-position:0% 0%;
background-attachment:nofixed;
}
.menu
{
float:left;
width:125px;
padding-left:5px;
padding-top:20px;
}
.contenu
{
float:right;
width:570px;
}
.footer
{
}
|
|
avec dashed.png étant une image de 125x4px avec sur l'extreme droite les deux pixel haut blanc et les deux dessous transparents. Le poids du png devrait etre extrement léger.
Je sais que tu ne voulais pas utiliser ca au départ mais au moins, pas de surprises ! |
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: erwinol le le 08-09-2004 a 11:40:29
La première solution ne fonctionne pas, je l'avais déjà testé. Même avec un menu de 5000 pixels il gardait la même taille. La seule manière de la faire grandir était de mettre un contenu plus long.
Je testerai ta 2ème solution ce soir et j'espère que ça va marcher parce que je voudrais pas passer tout mon temps à l'intégration alors que j'ai plein d'autres choses à faire.
Enfin une grade partie du code est déjà réalisée :) |
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: erwinol le le 09-09-2004 a 20:44:06
| Netah > aucune de tes astuces ne fonctionne :'( |
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: Netah le le 09-09-2004 a 23:23:24
| Ah si, la deuxieme fonctionne, c'est ce que j'utilise et ça fonctionne aussi tres bien avec mozilla. Je te fait une page pour demain soir |
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: Netah le le 10-09-2004 a 21:54:08
La page est testé et ca fonctionne bien
Code:
<html>
<head>
<style>
body
{
background-color=#FFAAAA;
}
.conteneur
{
width:750;
background-image: url(dashed.png);
background-repeat:repeat-y;
background-position:0% 0%;
background-attachment:nofixed;
background-color=#AAFFAA;
}
.menu
{
float:left;
width:125px;
padding-left:5px;
padding-top:20px;
}
.contenu
{
float:right;
width:625px;
background-color=#AAAAFF;
}
.footer
{
background-color=#AFAFAF;
height:30px;
width:750px;
}
</style>
</head>
<body>
<div class="conteneur">
<div class="menu">
menu
</div>
<div class="contenu">
Les bloc ont un fond pour les faire apparaitre, sauf le menu pour pouvoir voir le fond du conteneur... Et ca fonctionne.
</div>
</div>
<div class="footer"></div>
</body>
</html>
|
|
|
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: erwinol le le 11-09-2004 a 17:28:17
C'est parfait sous IE mais pas tout à fait sous FireFox ... enfin je me contenterai ça ça :)
Merci bcp ! |
Titre: Re:Pointillés sur toute la hauteur en CSS
Posté par: erwinol le le 11-09-2004 a 19:05:02
Finalement, j'obtiens bien le résultat désiré sous IE et FireFox (pas essayé les autres).
En fait la solution de Netah semble très logique mais Firefox adapte le pointillé au contenu ... ce qui est totalement illogique vu qu'on le met sur toute la partie centrale.
Je me suis alors résolu à le laisser tel quel vu que sous IE c'était impeccable et que sous Firefox le problème n'est pas gênant.
J'ai ensuite voulu ajouter la possibilité de mettre une note en bas de page ... ce que j'ai peiné à faire donc je suis passé par un système différent de ce que j'avais pensé au départ ... ce bas de page allonge le contenu de la page en le poussant tout en bas et donc le pontillé qui s'adapte à la longueur du contenu n'est plus un problème ;D
Voilà comment arranger un problème par hasard ;D |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|