Journal Question de CSS

Posté par David Douard le 03 novembre 2003 à 16:47.

Étiquettes : aucune

nov.

2003

Salut gars journal,

j'ai une petite question tout bête, comme toujours. Est-il possible, sur une page comme celle des journaux de LinuxFR, par exemple, de faire en sorte que la leftbox s'agrandisse jusque le bas de la page (donc à hauteur de la bottom line de la nouvelle principale la plus basse de la liste des nouvelles principales), sachant que son contenu est beaucoup plus court...
En gros, j'aimerai savoir s'il est possible d'aligner la bottom line de la liste des nouvelles secondaires avec celle de la boite de nouvelle principale la plus ancienne (vers le bas, donc).

Est-ce possible un truc comme ça...

J'ai bien essayé un height: 100%; ou bottom: 0px, ca n'y fait rien (je suppose parceque c'est un float).

Des idées ?
David

# Re: Question de CSS

Posté par David Douard le 03 novembre 2003 à 16:49. Évalué à 1.

Ben ça ! Crébonsoir ! J'm'a gourré, j'voulions pas l'mettre en page principale... Sorry !
Faudrait peut-être que ce soit le comportement par défaut, d'être en page secondaire...
David
- [^] # Re: Question de CSS
  
  Posté par corn le 03 novembre 2003 à 16:55. Évalué à 2.
  
  Faudrait peut-être que ce soit le comportement par défaut, d'être en page secondaire...
  
  Quand c'etait comme ca tout le monde voulait le comportement inverse...
  - [^] # Re: Question de CSS
    
    Posté par XHTML/CSS inside (site web personnel) le 03 novembre 2003 à 16:56. Évalué à 2.
    
    Quand c'etait comme ca tout le monde voulait le comportement inverse...
    
    Bin oui, sinon c'est pas drôle !
  - [^] # Re: Question de CSS
    
    Posté par seginus le 03 novembre 2003 à 19:09. Évalué à 2.
    
    Ce qu'il y a, c'est qu'il y a eu deux changements simultanés. La case à cocher est passé par défaut en page principal, mais la gestion des pages secondaires à changé en même temps la rendant plus accessible.
    Avant nous avions donc des pages secondaires « inaccessibles » pour les autres qui était la page par défaut.
    Maintenant nous avons les pages secondaires accessibles qui ne sont plus par défaut.
    Je pense que c'est pour cela que les gens ne sont toujours pas content, et pas uniquement pour raler.
# Re: Question de CSS

Posté par XHTML/CSS inside (site web personnel) le 03 novembre 2003 à 16:55. Évalué à 1.

J'avais pensé à min-height (css 2)
Doc : http://selfhtml.selfhtml.com.fr/css/proprietes/positionnement.htm#m(...)

mais ça n'est pas géré par IE 5.x (je ne sais pas pour IE 6)

Si qqu'un connait un truc qui marche dans tous les cas, ça m'intéresse !

++
- [^] # Re: Question de CSS
  
  Posté par icyfemur le 03 novembre 2003 à 17:36. Évalué à 1.
  
  Moi aussi ca m'interesse beaucoup.
  
  « C'etait vraiement tres interessant »
  ---->[]
# Re: Question de CSS

Posté par Hardy Damien le 03 novembre 2003 à 17:18. Évalué à 1.

essaye en mettant dans ta CSS :

html { height: 100%; }

div#jsecondaire { height: 100%; }
- [^] # Re: Question de CSS
  
  Posté par David Douard le 03 novembre 2003 à 17:26. Évalué à 1.
  
  J'avais essayé en mettant height: 100%; dans le tag BODY, mais pas HTML.
  De toutes façons, cela ne fonctionne pas non plus (en tout cas sous Konqueror 3.1)...
  
  Merci qd même.
  
  David
# Re: Question de CSS

Posté par Robert Palmer (site web personnel) le 03 novembre 2003 à 18:31. Évalué à 1.

Essaye de t'inspirer de http://www.pixy.cz/blogg/clanky/css-3col-layout/(...)

En théorie c'est quelque chose de simple : il suffit de positionner la boite en positionnement absolu et de donner une hauteur implicite avec top et bottom :

div#boite-de-gauche {
position: absolute;
width: 150px;
top: 0;
bottom: 0;
}

Mais voilà ce cher IE ne supporte pas ce type de déclaration. Il lui faut une hauteur (height). D'où la construction pas franchement évidente proposée par Pixy faite à partir de DIV imbriqués.
Pensez à l'environnement avant d'imprimer ce commentaire - Please consider the environment before printing this comment
- [^] # Re: Question de CSS
  
  Posté par David Douard le 03 novembre 2003 à 19:09. Évalué à 1.
  J'ai essayé ce genre de choses, déjà, et cela ne fonctionne pas partout. Disons même que cela n'a fonctionné que sur assez peu de butineurs.
  En fait, le site visé contient des pages où : à gauche, il y a une "colonne" noire de 200px de large, de haut en bas du viewport. en haut, une sorte de barre de menu tout simple.
  Et le contenu même de la page, c'est une liste de réponses à une requête. Chaque ligne est constituée d'une vignette (image de 75px de large sur 100 de haut environ) qui doit être centrée sur la "colonne" de gauche (donc les images sont sur fond noir), et sur la partie blanche de droite, une liste d'infos organisées en 4 colonnes.
  J'ai bien réussi à faire quelquechose qui ressemble à ça, mais c'est très vilain, avec des tableaux, tout ça. Ca fait un truc un peu comme ça (oui je sais, c'est pas terrible) :
```
+----------+---------------------------------------------------+
| LOGO      |       Menu1 | Menu2 | Menu3	            Aide              |
|                |                                                                              |
|                |                                                                              |
| +------+ |                                                                               |
| |           | |    Blah1   |  blah2  | Blah3 | Blah4                           |
| |  o  o   | |                |            | blah3 |                                     |
| |    ^    | |                |             |          |                                     |
| |  `--'   | |                |             |          |                                     |
| +------+ |                                                                                |
|               |                                                                                |
    etc.              etc.
|               |                                                                                 |
+ --------+------------------------------------------------------+
```
  - [^] # Re: Question de CSS
    
    Posté par Robert Palmer (site web personnel) le 03 novembre 2003 à 19:43. Évalué à 2.
    
    Sinon pour simuler ta colonne de gauche qui doit s'étendre sur toute la hauteur du viewport, tu peux toujours mettre une image de fond...
    
    Cela dit d'après ton schéma, quelque chose comme ça devrait marcher :
    
    html, body {
    height: 100%;
    }
    
    body {
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: black;
    }
    
    div#pricipal{
    position: relative;
    height: 100%;
    }
    
    div#gauche {
    position: absolute;
    height: 100%;
    width: 200px;
    background-color: red;
    }
    
    div#droite {
    background-color: blue;
    padding-left: 200px;
    height: 100%;
    }
    
    <div id="principal">
    <div id="gauche">plop</div>
    <div id="droite">plop</div>
    </div>
    
    Après le tout est de savoir quel comportement tu veux avoir lorsque le contenu depasse la hauteur du viewport...
    Pensez à l'environnement avant d'imprimer ce commentaire - Please consider the environment before printing this comment
    - [^] # Re: Question de CSS
      
      Posté par David Douard le 03 novembre 2003 à 20:42. Évalué à 1.
      
      C'est le genre de truc que j'ai fait ; en fait, la body à un BG blanc, et la colonne fonctionne avec une image en BG, c'est la seule solution que j'ai réussi à faire fonctionner de façon assez acceptable sur tous les navigateurs...
      Mais c'est pas très propre comme truc, je trouve. D'où ma question...
      
      Merci beaucoup,
      David
      
      PS : tiens, c'est l'un des frères de mon beauf s'apelle comme ça... Il est même tout complètement Étatsunien...

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.