Problème de CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problème de CSS

darkgloom

Bonjour,

Je vous expose mon problème, je suis en train de réaliser un site web et j'ai un petit souci au niveau du CSS.
J'ai un design centré de largeur fixe, composé de 2 blocs (la bannière/menu et le contenu) et je voudrais que le contenu occupe au moins la place restante.
Question, comment faire ?

Voici mon CSS existant :

Code :

body {
position : absolute ;
margin-left : -350px ;
left : 50% ;
height : 100% ;
margin-top: 0px;
margin-bottom : 0px ;
}
.haut {
height : 150px;
width : 700px ;
}
.contenu {
min-height : 600px ;
top : 150px;
width: 680px;
}

Merci d'avance

Publicité

macgawel

Si je comprends bien tu as ça

|-------------------------|
| | Ma bannière | |
| |-------------| |
| | Mon contenu | |
| |-------------| |
| |
|-------------------------|

Et tu voudrais

|-------------------------|
| | Ma bannière | |
| |-------------| |
| | Mon contenu | |
| | | |
| | | |
|-------------------------|

On triche un peu :
En fait, le contenu va faire toute la page, mais comme on le met en-dessous du haut ça ne se verra pas.

Code :

#contenu{
    position:absolute; /* On veut le placer précisément */
    top:0; 
    bottom:0; 
    z-index:3; /* Le z-index sert à le mettre "en dessous" du haut */
    width:700px;
    padding-top:150px; /* On laisse la hauteur du haut avant de commencer à écrire */
}
#haut{
    position:absolute; 
    top:0; 
    height: 150px;
    width:700px; 
    z-index:5; 
}

tpierron

Tu pourrais utiliser la propriété min-height: 100%, de cette manière :

Code :

<html>
<head>
<style type="text/css">
body {
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
margin-left: 50%;
height: 100% ;
}
.haut {
height: 150px;
width: 700px;
margin-left: -350px;
background-color: red;
position: relative;
z-index: 1;
}
.contenu  {
min-height: 100%;
margin-top: -150px;
margin-left: -350px;
width: 700px;
background-color: blue;
}
#padding {
padding-top: 150px;
}
</style>
</head>
<body>
<div class="haut">Haut<br><input type="button" value="Ajouter contenu" onclick="document.getElementById('padding').innerHTML +=
document.getElementById('padding').innerHTML"></div>
<div class="contenu"><div id="padding">Contenu<br>Contenu<br>Contenu<br>Contenu<br>Contenu<br>Contenu<br>
Contenu<br>Contenu<br>Contenu<br>Contenu<br></div></div>
</body>
</html>

Mais évidemment ça ne fonctionne pas sous IE. Pour cette bouse, il doit y avoir moyen de simuler le min-height à coup de javascript direcement dans la CSS (extension propre à IE).

Message édité par tpierron le 11-03-2009 à 16:51:27

darkgloom

Ça marche niquel, merci

Par contre j'ai un petit souci, j'ai un background en dégradé qui se raccorde la bannière.

Est-il possible de faire commencer ce background une fois qu'on passe au dessus de la bannière ?

Sinon je peux toujours rajouter 150px en haut mais si jamais il y a une solution

Merci encore

edit : En effet je n'avais pas pensé à ta solution non plus tpieron, mais bon la première à l'avantage de fonctionner sur le merveilleux IE =D

Message édité par darkgloom le 11-03-2009 à 17:00:04

tpierron

Pour la première solution, fait attention à l'overflow. Si ça déborde, le div contenant ne sera pas étendu. D'un autre coté, si tu es sûr ça ne débordera pas, c'est effectivement largement plus garantie de fonctionner partout.

Edit: j'avais cru comprendre que tu voulais qu'initialement la page occupe toute la hauteur du navigateur, puis que la hauteur s'adapte si jamais il y a davantage de texte.

Message édité par tpierron le 11-03-2009 à 18:24:50

darkgloom

Ah oui en effet le div ne s'étend pas..

Il y a un moyen de simuler une continuité ?
Je ne suis pas sur que ça ne déborde pas, et c'est même le contraire en fait, je suis sur que ça débordera.

tpierron

Edit: décidément, c'est pas mon jour. j'ai parlé trop vite, ça ne fonctionne qu'en mode "quirks". Pas terrible.

Ah, ha, je pensais que ça allait être plus long que ça, mais finalement premier lien dans google pour la recherche "min-height ie", semble avoir trouvé le "hack" adéquat :

http://www.dustindiaz.com/min-height-fast-hack/

Avec la CSS de mon exemple modifiée, ça fonctionner sur IE7/FF/Safari/... (pas testé avec IE6, mais l'auteur semble dire que ça fonctionne aussi):

Code :

body {
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
margin-left: 50%;
height: 100% ;
}
.haut {
height: 150px;
width: 700px;
margin-left: -350px;
background-color: red;
position: relative;
z-index: 1;
}
.contenu  {
min-height: 100%;
height: auto !important;
height: 100%;
margin-top: -150px;
margin-left: -350px;
width: 700px;
background-color: blue;
}
#padding {
padding-top: 150px;
}

Message édité par tpierron le 11-03-2009 à 18:55:07

darkgloom

Voila ce que j'obtiens :

http://avalanchedimages.free.fr/test

Si on ne met pas de contenu dans la div contenu, elle n'apparait pas.

Message cité 1 fois
Message édité par darkgloom le 11-03-2009 à 19:06:48

tpierron

darkgloom a écrit :

Voila ce que j'obtiens :

http://avalanchedimages.free.fr/

Si on ne met pas de contenu dans la div contenu, elle n'apparait pas.

Ouais, normal, il te manque le div#padding.

Tiens, spécial sans rapport. Je viens encore de tomber sur un joli bug de IE en testant mon exemple. Si on prends mon exemple tel quel et qu'on l'affiche dans IE, pouf, le <input type="button"> n'est pas affiché.

Pourquoi ? Apparement la règle "margin-left: -350px" sur le div.haut est aussi appliquée sur la balise "input". Si on ajoute un bloc à la suite différent de input, il n'est pas décalé. [:opus dei] Haha, qu'est ce qu'on s'amuse avec IE.

Message édité par tpierron le 11-03-2009 à 19:12:31

darkgloom

Ah moi il s'affiche tiens, j'ai la version 8 c'est surement pour ça.

Par contre j'ai bien mis le div#padding, et le bloc contenu ne prend pas toute la place.

Publicité

darkgloom

edit : cétoké

Message édité par darkgloom le 11-03-2009 à 23:20:25

FORUM HardWare.fr

Programmation

HTML/CSS

Problème de CSS

Sujets relatifs
[Résolu] Problème de CSS sur un tri ajax d'un tableau	CSS problème de roll over en couleur ....
Problème placement de boite en CSS	[CSS] Probleme centrage texte
Problème alignement bloc CSS [terminé]	Problème d'image d'arrière-plan en CSS
[HTML/CSS] problème d'organisation - Résolu.	Problème d'affichage d'un menu en CSS (résolu)
Problème De HTML et CSS	Probleme de disposition en CSS
Plus de sujets relatifs à : Problème de CSS

Page générée en 0.069 secondes