28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je m'excuse si la question a déjà été posée mais après maintes recherches (d'une journée Smiley decu ), je n'ai pas encore trouvé ...

Voici le problème exposé tout simplement :

Je cherche l'équivalent de :


#container{
	position:fixed;
	display:block;
	top:0;
	right:0;
	left:200px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	bottom:0;
	background-color:black;
}


avec absolute

Ceci me crée juste une grande division noire occupant toute la page excepté une colonne de 200 pixels sur la gauche (enfin vous l'aurez compris en regardant le code).
Je cherche donc un équivalent en utilisant la position absolue, car je me suis un peu laissé emporté sur les fixed et je suis maintenant bien eu en ce qui concerne Ie 6 Smiley decu .

J'ai bien sur essayer de juste remplacer fixed par absolute, sachant que ma div container a pour parent body, cela fonctionne pour IE7 et FF mais pas sous IE6 qui doit considérer la taille de la div comme nulle.

Voila merci beaucoup de votre aide, le problème semble relativement simple mais je n'ai pas était capable de trouver la solution de toute la journée ...

Cordialement

++

Edit : J'ai oublié de donner une adresse pour que vous puissiez voir ce que donne le site actuellement (qui marche avec IE7 et FF) :

www.homeexchangeguru.com

Vous l'aurez compris la div container contient quasi tout à par le menu et la gestion de la langue)

Avec Ie 6 c'est déjà un peu moins terrible car j'ai recommencer des feuille de style pour lui, car avant ça ressemblait vraiment à rien Smiley smile (enfin c'est pas comme si ça ressemblait à quelques chose maintenant mais bon ...)
Modifié par Toj (16 Jul 2008 - 05:20)
Je fais la même chose avec ça :
    
div#contenu 
    {
    position:relative;
    overflow:auto;
    margin-left:200px;
    height:100%;
    background-color:white;
    text-align:center;
    margin-right:auto;
    margin-left:180px;
    padding-right:0px;
    padding-left:0px;
    }


Par contre, sur ton web et sous ie6, tu n'as pas trouvé une solution pour que ton contenu soit "scrollable" depuis le navigateur et non le bloc ?
Salut

merci pour ta réponse.

En effet il semble que je m'étais mal orienté, j'ai réussi aussi en mettant le conteneur en relatif. Il prend donc bien toute le fenêtre moins la colonne de gauche. Cependant maintenant j'ai le même soucis au sein de ce conteneur, et la je ne peut pas le résoudre de la même façon.

En effet je voudrais qu'une div "content" contienne donc le contenu en lui même de la page, qui commence à une hauteur fixe et qui s'étende jusqu'au bas le las page et donc scrollable si il y a beaucoup de contenu (voir le résultat sous FF ou IE7 pour ceux qui n'auraient pas compris pas magnifique explication Smiley smile ). Or IE6 n'a l'air de prendre le overflow, seulement si je spécifie une hauteur fixe, chose que je ne souhaite pas ici puisque la hauteur dépend de la hauteur de la fenêtre.

Pour ta question nicoarrf, est-ce la même chose que je viens d'expliquer ou totalement autre chose, je m'excuse mais je ne suis pa sur d'avoir bien compris.

Sinon j'ai poster mon avancement sous IE6 à la même adresse pour voir ce que ça donne maintenant (c'est pas trop mal mais la div content n'a pas le scroll et c'est tout qui descend ...

Merci encore de votre aide

Cordialement

++
Je pense que je viens de saisir ce que tu demandais. Tu veux que le résultat sois identique que maintenant (sous FF et IE7) sauf qua la scrollbar soit celle du navigateur et non de la div ?

A vrai dire je m'étais pas trop posé la question, le résultat me convenant comme ça. Peut être que si tu fais une div de toute la hauteur avec un padding suffisant pour combler le vide ?

Ce n'est qu'une idée qui m'a pas l'aire très bonne, désolé mais je débute en css ... Des pros auront surement la solution

Cordialement

++
Pour la hauteur si tu spécifies height:100% avec overflow-y:scroll ça ne passe pas ?
Pour le défilement en effet tu a bien compris. Par exemple, pour ton site, il faut presque que je me mette en plein écran (1024) pour pouvoir faire défiler le contenu.
Idem pour le mien, or 50% des visites se font en 1024 et 30% sous IE6. C'est pour ça que je voudrais "scroller" le contenu depuis le navigateur. Or si je met un overflow-y sur le body du coup mon menu "scroll" en même temps que mon contenu.
Merci pour vos réponses.

@nicoarrf : et non height:100% correspondant à 100% du conteneur qui fait toute la page de haut, donc ma div fait la hauteur complète de la page, et fini donc 150px plus bas que la page (puisque mon header fait 150px). Sinon que tu dois mettre en pleine écran, normalement la div rétrécit avec l'écran donc la barre tu peux l'utiliser avec n'importe quel taille, c'est juste qu'elle ne fait pas toute la hauteur. Mais la j'ai spécifié une largeur minimum qui doit être un peut grande si tu n'arrive pas à voir la barre je vais arranger ça, tu me diras si l'ergonomie en est améliorée pour toi.

Une idée pour ce que tu veux faire serait peut être de faire une div de 100% de haut (genre mon conteneur), de commencer le texte assez bas et d'y superposer un header en absolu sur le haut, ça ne sera pas vraiment la barre du navigateur mais presque comme ci ...

@Changaco : je les ais déjà épluché dans tous les sens, je n'ai pas trouvé de header à taille fixe, avec en dessous une div scrollable s'étendant jusqu'au bas de la fenêtre, mais peut être suis-je passé à coté. (le header est généralement en pour cent ce qui forcement rend les chose beaucoup plus facile ...)

Cordialement

++

Edit : trop de fautes d'orthographe
Modifié par Toj (17 Jul 2008 - 21:21)
Salut,

J'ai finalement laissé tomber au profit de tout le container scrollable (ce qui est beaucoup plus simple puisqu'on peut lui attribué une taille fixe de 100%.

J'aimerai toutefois si quelqu'un sait avoir la réponse, comment faire une partition avec les quatre bord fixé sous Ie 6 ? (chose réalisable en fixant right top left bottom avec un navigateur récent)

Cordialement

++
Modifié par Toj (17 Jul 2008 - 23:57)
Toj a écrit :
J'aimerai toutefois si quelqu'un sait avoir la réponse, comment faire une partition avec les quatre bord fixé sous Ie 6 ? (chose réalisable en fixant right top left bottom avec un navigateur récent)

En bidouillant beaucoup on peut obtenir quelque chose de moyennement convaincant avec IE6. Autant oublier ces manipulations ésotériques, et basculer sur un rendu plus classique pour papy IE6.
@Toj desolé d'empiéter sur ton post Smiley cligne Pour ton site maintenant c'est bon pour moi, le contenu est "scrollable" avec une petite fenêtre de navigateur.

@Changaco : Effectivement, je veux le modèle 14 mais il plante avec mon contenu et le reste de mon CSS :
Sous IE6, il faut retoucher les dimensions de la fenêtre (et dans ce cas c'est bon) sinon le body est "margé" (il n'occupe pas toute la fenêtre) et en plus c'est aléatoire.
Sous netscape 7.1 c'est tout le body qui scroll.... Smiley decu
Sous IE7, FF2 et FF3 Ok.

Bon, alors, a tous, est-il correct de mettre un code comme celui-ci ?


<body>
<div id="menu">
</div>
<div id="contenu">
    <div id="enTete"></div>
    <div id="chapitre1" class=".chapitre"></div>
    <div id="chapitre2" class=".chapitre">
        <p></p>
        <div class=".conteneur"></div>
        <div class=".conteneur" style="height: 300px;">
            <div class="imageAdroite" style="width: 330px; float:right;"></div>
            <p class="textAgauche"></p>
        </div>
        <div class=".conteneur" style="height: 300px;">
            <div class="imageAgauche" style="width: 330px; float:left;"></div>
            <p class="textAdroite"></p>
        </div>
    </div>
<div>


j'essaie d'isoler ce qui plante et vous tiendrais au courant.
Bonne journée.
Voila les résultats :
- Un doctype xhtml stricte et un css séparé ne me fonctionnent pas sous netscape, sans ce doctype c'est bon.
- L'exemple n°14 ne fonctionne pas sous ie6 lorsque qu'un bloc du contenu + celle du menu est supérieure à la largeur du navigateur.
Merci a tous et bon we.
Salut,

a écrit :

En bidouillant beaucoup on peut obtenir quelque chose de moyennement convaincant avec IE6. Autant oublier ces manipulations ésotériques, et basculer sur un rendu plus classique pour papy IE6.


Ok c'est noté, c'est de toute façon ce que je m'étais résigné à faire pour IE6, tout le container et devenu scrollable à défaut de ne faire que le contenu scrollable.

Merci pour la précision.

++