créer un site


Une sucette comme recompense a celle ou celui qui m'aidera

Poster un nouveau sujet sur css   Répondre au sujet à css:Une sucette comme recompense a celle ou celui qui m'aidera    Accueil Forum -> css
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
basti
frontpage mioche
frontpage mioche
MessageUne sucette comme recompense a celle ou celui qui m'aidera , Posté le: 22-02-2004 13:39

Mes colonnes gauche et droite qui sont respectivement positionner en float:left et float:right dans en un contenu ne veulent pas s'adapter en hauteur et on observe donc un depassement comme vous pouvez l'apercevoir sur l'image si dessous :




le bloque test aura une taille variable donc la taille totale du site ne peut pas etre determiner d'avance d'ou la propriété height:100%

Je narrive vas a regler se probleme merci davance pour votre aide
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>gauche droite fluide</title>

<style type="text/css">
<!--
html, body {
margin: 0;
background-color: #fff; /*couleur de fond blanche*/
height: 100%;
}
.conteneur {
width: 800px;
background-color: green;
height: 100%;
}
.gauche {
float: left;
width: 160px;
height: 100%;
background-color: yellow;;
}
.droite {
float: right;
width: 160px;
height: 100%;
background-color: yellow;

}
.test {
float: left;
width: 480px;
height: 150px;;
background-color:#cccccc;
margin-top:5px;
}
-->
</style>
</head>

<body>
<div class="conteneur">
   <div class="gauche">partie gauche</div>
   <div class="droite">partie droite</div>
   <div class="test">test</div>
   <div class="test">test</div>
   <div class="test">test</div>
   <div class="test">test</div>
</div>
</body>
</html>
rorschach
dreamweaver mioche
dreamweaver mioche
MessageUne sucette comme recompense a celle ou celui qui m'aidera , Posté le: 22-02-2004 16:32

tu souhaite que les partie jaune descendent jusqu'en bas de la page ? c'est déjà le cas chez moi sur IE et mozilla... ou alors j'ai pas compris ton problème !
basti
frontpage mioche
frontpage mioche
MessageUne sucette comme recompense a celle ou celui qui m'aidera , Posté le: 22-02-2004 17:29

oui je souhaite que les colonnes jaune descends jusque en bas mais dans l'exemple jai pas mis assez de bloque test ,rajoutes en une dizaine et tu verras le debordement.
rorschach
dreamweaver mioche
dreamweaver mioche
MessageUne sucette comme recompense a celle ou celui qui m'aidera , Posté le: 22-02-2004 17:40

la solution que je connaisse est celle de Dan Cederholm mais comme je ne sais pas à quoi devra ressembler le look de ton site je sais pas si ça va t'aider, enfin c'est ici : Faux Columns [http://www.alistapart.com/articles/fauxcolumns/]
l'astuce consiste à utiliser une image en fond de page, comme l'image remplit toute la page on simule des colonnes qui descende jusqu'en bas de la page, c'est la méthode que j'ai choisi pour mon futur site : Mon site en construction [http://lfdlc.free.fr/]
basti
frontpage mioche
frontpage mioche
MessageUne sucette comme recompense a celle ou celui qui m'aidera , Posté le: 22-02-2004 18:45

voici mon site en préparation: http://hero.clix.free.fr/hc/ [http://hero.clix.free.fr/hc/]

Tu remarqueras les débordements a la 3eme news dans ce cas si j'ai fixé mes colonnes a 1000px. (mais si je mets en pourentage cest pire)

et voici mon ancien fait avec des tableau (la c'est pour la pub)
http://hero.clix.free.fr [http://hero.clix.free.fr]

j'avoue ne pas comprendre la technique du site que tu mas proposé mais je vais me concentrer dessus ca a l'aire de répondre a mon probleme.(désolé je suis pas tres fort en anglais)
rorschach
dreamweaver mioche
dreamweaver mioche
MessageUne sucette comme recompense a celle ou celui qui m'aidera , Posté le: 22-02-2004 19:51

la technique des "faux columns" est simple tu fait une image de ton fond comme ça :
http://membres.lycos.fr/lfdlc/images/fond.gif [http://membres.lycos.fr/lfdlc/images/fond.gif]

et ensuite dans ta feuille de style tu change ça :
Code:

html, body {
     margin: 0;
    padding-bottom:25px;
   
     background-color: #fff; /*couleur de fond blanche*/
     scrollbar-face-color: #000000;         /* couleur barre */
   scrollbar-arrow-color: #ffffff;         /* couleur fleche */
   scrollbar-track-color: #eeeeee;         /* couleur fond */
   scrollbar-3dlight-color: #000000;      /* couleur effet 3D */
   scrollbar-darkshadow-color: #000000;    /* couleur */
   scrollbar-shadow-color: #ffffff;       /* couleur */
   scrollbar-highlight-color: #ffffff;
   height: 100%;
}

en ça :
Code:

html, body {
     margin: 0;
    padding-bottom:25px;
   
     background-color: #fff; /*couleur de fond blanche*/
     scrollbar-face-color: #000000;         /* couleur barre */
   scrollbar-arrow-color: #ffffff;         /* couleur fleche */
   scrollbar-track-color: #eeeeee;         /* couleur fond */
   scrollbar-3dlight-color: #000000;      /* couleur effet 3D */
   scrollbar-darkshadow-color: #000000;    /* couleur */
   scrollbar-shadow-color: #ffffff;       /* couleur */
   scrollbar-highlight-color: #ffffff;
   height: 100%;

   background-image:  url(images/fond.gif);
   background-position : center ;
   background-repeat : repeat-y ;
}


ainsi ton fond se repete jusqu'en bas de la page ...
basti
frontpage mioche
frontpage mioche
MessageUne sucette comme recompense a celle ou celui qui m'aidera , Posté le: 22-02-2004 20:30

En effet ca marche je te remercie beauoup pour ton aide. En tout c'est une belle astuce.

http://hero.clix.free.fr/hc/ [http://hero.clix.free.fr/hc/]
Génius
flashmioche
flashmioche
MessageUne sucette comme recompense a celle ou celui qui m'aidera , Posté le: 22-02-2004 20:57

Mince j'arrive trop tard pour la sucette
Il la vouler RORSHACH...Smile

Jolie site moi j'adore les marvels les stranges et tous...
basti
frontpage mioche
frontpage mioche
MessageUne sucette comme recompense a celle ou celui qui m'aidera , Posté le: 22-02-2004 22:50

merci.

Mais un problème n'arrive jamais sans un autre c'est bien connu.

J'ai observé sous Netscape un décalage de l'image de fond et de mon interface (une rainure noir apparait)
Si je modifier la position du conteneur le probleme s'inverse et c'est sous Internet Exploreur qu'apparait l'erreur.

Arg !! je suis coincé.
Je fait donc encore une fois appelle a vous semi dieux que vous etes.


http://hero.clix.free.fr/hc/ [http://hero.clix.free.fr/hc/]
rorschach
dreamweaver mioche
dreamweaver mioche
MessageUne sucette comme recompense a celle ou celui qui m'aidera , Posté le: 22-02-2004 23:07

un décalage du fond par rapport au bloc que tu as définit... je connais ça, jusqu'ici j'ai pas trouver de solution, c'est en fait à cause de Internet explorer qui ne semble pas gerer le centrage d'une image de fond de la même facon qu'il centre un bloc css, ce qui à pour conséquence de faire apparaitre un décalage d'un pixel ou non suivant la taille de la fenetre du navigateur, faut essayer de déplacer le décalage sur le bas de la page là ou ça se voit po..

si tu regarde cette url : http://www.simplebits.com/contact/ [http://www.simplebits.com/contact/] avec IE tu remarquera le même problème ce qui me laisse penser que même le grand Dan Cederholm n'a pas la solution Sad ...

par contre sous Mozilla ou Firefox ce problème n'existe pas, voilà une raison de plus de laisser IE et de passer à mozilla ou firefox Smile
basti
frontpage mioche
frontpage mioche
MessageUne sucette comme recompense a celle ou celui qui m'aidera , Posté le: 22-02-2004 23:24

Ah la la Microsoft ils font jamais comme les autres.
C'est donc un combat perdu d'avance sniff.

Bas je te remercie beaucoup pour m'avoir aider.
Montrer les messages depuis:   
Poster un nouveau sujet sur css   Répondre au sujet à css:Une sucette comme recompense a celle ou celui qui m'aidera    Accueil Forum -> css Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales