28234 sujets

CSS et mise en forme, CSS3

[résolu] Présentation "fixe / fluide" => prob avec IE

Bonjour,

je souhaite réaliser une page web avec une présentation en css. Je n'arrive pas à faire ce que je veux, et que j'ai représenté sur cette image :
http://skoni.free.fr/question.gif

Voici le code de ma feuille css : 

body {
    margin:0px;
    padding-top:50px;
    padding-left:50px;
    background:#000000;
    color:#FFFFFF;
    font-family:Verdana, Arial, times;
    font-size:12px;
    line-height:1.4em;
    text-align:right;
}
#bloc1 {
    margin:0;
    padding:0;
    float:left;
    width:100%;
    height:128px;
    background:url("bgh.gif") repeat-x left top;
    text-align:center;
    display:block;
}
#bloc2 {
    top:0px;
    left:0px;
    float:left;
    width:400px;
    height:128px;
}
#bloc3 {
    margin:0;
    padding:0;
    top:0px;
    width:50px;
    height:128px;
}


le bloc1 occupe toute la largeur de la page et contient les blocs 2 et 3.
le bloc2 est aligné à gauche et fais une largeur fixe.
le bloc3 est centré sur le reste de la page (c'est-a-dire sur 100%-la largeur du bloc2), ce bloc3 ne contient qu'une image.

Jusque là, j'arrive à faire ca avec des div.
Je voudrais maintenant que le bloc3 ne passe pas en-dessous du bloc2 quand la page est redimensionnée (ou si l'écran n'est pas assez large). Je veux donc que les deux blocs (2 et 3) restent cote à cote et que la scrollbar apparaisse si la largeur n'est pas suffisante.

Je souhaite finalement avoir une partie haute "fluide" à partir d'une certaine largeur, et "fixée" en dessous d'une certaine largeur.
Quelqu'un a-t-il une idée pour réaliser cela en css ? en utilisant éventuellement une autre méthode que celle que j'essaie de faire.

merci par avance,
tonyo
Modifié par tonyo (08 Mar 2005 - 23:11)
Administrateur
Bonjour Tonyo et bienvenue ici Smiley cligne

Pourrais-tu, comme le suggère l'Aide du forum, donner un titre explicite et précis à ton sujet ?

Tu conviendras qu'on ne sait pas trop de quoi parle un sujet nommé "Question sur les blocs css". Surtout qu'on se doute que ça parle de CSS, sans le salon CSS Smiley smile

Pour info :
Aide a écrit :
11- Conventions d'écriture
L'emploi des majuscules est à utiliser avec parcimonie dans les titres de sujet comme dans les messages. En effet, un texte entièrement rédigé en majuscules donne l'impression que la personne crie sur un ton agressif, sur internet. Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau, et non pas simplement 'Question', 'HELP', 'Problème!' ou 'URGENT!!!!'...
Bonjour, j'ai finalement réussi à faire ce que je veux mais cela ne marche qu'avec Firefox !
Quel est le problème qui fait que ca ne marche pas bien avec IE ?

Exemple : ici

Code de la page : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />


<style type="text/css" media="screen">
body {
    margin:0px;
    padding-top:50px;
    padding-left:50px;
    background:#000000;
    color:#FFFFFF;
    font-family:Verdana, Arial, times;
    text-align:right;
}
img {
    border:0;
}


#haut {
    margin:0;
    padding:0;
    float:left;
    width:100%;
    height:128px;
    background-color:#00FF00;
    text-align:center;
}
#haut_a {
    top:0px;
    left:0px;
    float:left;
    width:400px;
    height:124px;
    background-color:#00FFFF;
    color:#000000;
}
#haut_b {
    margin:0;
    padding-left:400px;
    top:0px;
    height:124px;
}
#haut_b img {
    margin-left:10px;
    margin-right:10px;
}



</style>
</head>

<body>

        <div id="haut">
        <div id="haut_a">
            haut_a
        </div>
        <div id="haut_b">
            <img src="image.gif" alt="image" />
        </div>
        </div>

</body>
</html>


Merci
tonyo
Modifié par tonyo (07 Mar 2005 - 18:59)
oui, le copier-coller en a oublié un bout ! Smiley langue
Smiley cligne

En fait le problème ne dépend pas de ca, mais j'ai ajouté le début du code source.
J'ai regardé ton dernier lien sous Mac avec Safari, IE, Firefox... tout s'affiche pareil et fonctionne, c'est à dire qu'en redimensionnant vers la gauche l'image vient buter sur le bloc bleu de gauche.
Salut,

Effectivement, petit souci sous IE6/Win. Pour régler ça, rien de tel qu'un peu de positionnement : pour commencer, le div "#haut" qui est flottant en "position:relative;" donc il reste en place et comme ça on peut positionner son contenu, notamment le div "#haut_a" en "position:absolute;" pour forcer sa position et tout est cette fois OK sou IE6/Win et Firefox/Win.

Tu confirmes ? Smiley cligne
oui. l'affichage est désormais correct, il fallait tout simplement bloquer la position du div "haut_a" en position absolute.

Merci
tonyo
Sujet clos
Aller à