La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML
(Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Pointillés sur toute la hauteur en CSS
« Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: Pointillés sur toute la hauteur en CSS  (Lu 1007 fois)
Pointillés sur toute la hauteur en CSS
« sur: le 07-09-2004 a 20:06:30 »
erwinol
Iznogoud Deluxe
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1845



Que la FARCE soit avec toi

Voir le Profil    WWW
Répondre avec citation

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

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

Rapporter au modérateur  

MySeoBox soumet vos sites sur des milliers d'annuaire
Vous possédez un annuaire ? Gagnez de l'argent avec celui-ci grâce à l'affiliation MySeoBox !

Re:Pointillés sur toute la hauteur en CSS
« Répondre #1 sur: le 07-09-2004 a 20:49:01 »
calenfeaion
Habitué
***

Hors-Ligne

Sexe: Male
Messages: 269





Voir le Profil    WWW
Répondre avec citation

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

Rapporter au modérateur  

Re:Pointillés sur toute la hauteur en CSS
« Répondre #2 sur: le 07-09-2004 a 21:11:39 »
willy
Habitué
***

Hors-Ligne

Sexe: Male
Messages: 278



paix

Voir le Profil    WWW
Répondre avec citation

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.

Rapporter au modérateur  

Mer et littoral 
Plongée enfants
Re:Pointillés sur toute la hauteur en CSS
« Répondre #3 sur: le 07-09-2004 a 23:38:48 »
Netah
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1256



ZoneB.org
netah_x@yahoo.com
Voir le Profil    WWW
Répondre avec citation

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.

Rapporter au modérateur  

skalae.frStages photo - Blog Webmaster - Twitter TLS
Re:Pointillés sur toute la hauteur en CSS
« Répondre #4 sur: le 07-09-2004 a 23:45:25 »
willy
Habitué
***

Hors-Ligne

Sexe: Male
Messages: 278



paix

Voir le Profil    WWW
Répondre avec citation

il peut remplir le contenu avec des sauts de lignes ou lui donner une taille mini correspondant au menu 

Rapporter au modérateur  

Mer et littoral 
Plongée enfants
Re:Pointillés sur toute la hauteur en CSS
« Répondre #5 sur: le 08-09-2004 a 00:11:25 »
Netah
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1256



ZoneB.org
netah_x@yahoo.com
Voir le Profil    WWW
Répondre avec citation

lol

Rapporter au modérateur  

skalae.frStages photo - Blog Webmaster - Twitter TLS
Re:Pointillés sur toute la hauteur en CSS
« Répondre #6 sur: le 08-09-2004 a 02:12:33 »
erwinol
Iznogoud Deluxe
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1845



Que la FARCE soit avec toi

Voir le Profil    WWW
Répondre avec citation

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

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 ?

« Dernière Édition: le 08-09-2004 a 02:13:14 par erwinol » Rapporter au modérateur  

MySeoBox soumet vos sites sur des milliers d'annuaire
Vous possédez un annuaire ? Gagnez de l'argent avec celui-ci grâce à l'affiliation MySeoBox !
Re:Pointillés sur toute la hauteur en CSS
« Répondre #7 sur: le 08-09-2004 a 09:11:04 »
Netah
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1256



ZoneB.org
netah_x@yahoo.com
Voir le Profil    WWW
Répondre avec citation

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 !

« Dernière Édition: le 08-09-2004 a 09:11:50 par Netah » Rapporter au modérateur  

skalae.frStages photo - Blog Webmaster - Twitter TLS
Re:Pointillés sur toute la hauteur en CSS
« Répondre #8 sur: le 08-09-2004 a 11:40:29 »
erwinol
Iznogoud Deluxe
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1845



Que la FARCE soit avec toi

Voir le Profil    WWW
Répondre avec citation

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

Rapporter au modérateur  

MySeoBox soumet vos sites sur des milliers d'annuaire
Vous possédez un annuaire ? Gagnez de l'argent avec celui-ci grâce à l'affiliation MySeoBox !
Re:Pointillés sur toute la hauteur en CSS
« Répondre #9 sur: le 09-09-2004 a 20:44:06 »
erwinol
Iznogoud Deluxe
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1845



Que la FARCE soit avec toi

Voir le Profil    WWW
Répondre avec citation

Netah > aucune de tes astuces ne fonctionne

Rapporter au modérateur  

MySeoBox soumet vos sites sur des milliers d'annuaire
Vous possédez un annuaire ? Gagnez de l'argent avec celui-ci grâce à l'affiliation MySeoBox !
Re:Pointillés sur toute la hauteur en CSS
« Répondre #10 sur: le 09-09-2004 a 23:23:24 »
Netah
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1256



ZoneB.org
netah_x@yahoo.com
Voir le Profil    WWW
Répondre avec citation

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

Rapporter au modérateur  

skalae.frStages photo - Blog Webmaster - Twitter TLS
Re:Pointillés sur toute la hauteur en CSS
« Répondre #11 sur: le 10-09-2004 a 21:54:08 »
Netah
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1256



ZoneB.org
netah_x@yahoo.com
Voir le Profil    WWW
Répondre avec citation

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>

Rapporter au modérateur  

skalae.frStages photo - Blog Webmaster - Twitter TLS
Re:Pointillés sur toute la hauteur en CSS
« Répondre #12 sur: le 11-09-2004 a 17:28:17 »
erwinol
Iznogoud Deluxe
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1845



Que la FARCE soit avec toi

Voir le Profil    WWW
Répondre avec citation

C'est parfait sous IE mais pas tout à fait sous FireFox ... enfin je me contenterai ça ça

Merci bcp !

« Dernière Édition: le 11-09-2004 a 17:31:53 par erwinol » Rapporter au modérateur  

MySeoBox soumet vos sites sur des milliers d'annuaire
Vous possédez un annuaire ? Gagnez de l'argent avec celui-ci grâce à l'affiliation MySeoBox !
Re:Pointillés sur toute la hauteur en CSS
« Répondre #13 sur: le 11-09-2004 a 19:05:02 »
erwinol
Iznogoud Deluxe
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1845



Que la FARCE soit avec toi

Voir le Profil    WWW
Répondre avec citation

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

Voilà comment arranger un problème par hasard

Rapporter au modérateur  

MySeoBox soumet vos sites sur des milliers d'annuaire
Vous possédez un annuaire ? Gagnez de l'argent avec celui-ci grâce à l'affiliation MySeoBox !
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg