Problème de mise en forme [Résolu]

Signaler
Messages postés
110
Date d'inscription
dimanche 23 janvier 2005
Statut
Membre
Dernière intervention
2 avril 2010
-
Messages postés
110
Date d'inscription
dimanche 23 janvier 2005
Statut
Membre
Dernière intervention
2 avril 2010
-
Bonjour!

Alors voila je souhaite avoir un site avec comme maquette :

- Un menu en haut centré sur toute la longueur
- A gauche une div avec un bg qui se répète en x, même chose a droite avec un bg différent
- Au milieu une bannière avec en dessous le contenu du site (le tout centré)

Déjà je n'ai pas réussi à faire cela en pure CSS, normal je pense (à moins que quelqu'un ait la solution miracle! :D)

Ensuite en mettant un peu de JS j'y arrive!

Mais bizarrement dès qu'une scroll apparait mon div de droite passe en dessous de tout!

Voici la page html de base :

<!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" xml:lang="fr" lang="fr">
<head>

<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<style>
body, html { height:100%; margin:0; width:100%; }

#centm { width:100%; height:50px; float:left;background-color:#cecece;}
#menu { width:1000px; background-color:purple; height:50px; margin: 0 auto;};

#all {  width:1000px; height:100%; margin: 0 auto; background-color:#bbbbbb; float:left;}

#gauche {  height:100%; background-color:Aqua; float:left;}
#droite { height:100%; background-color:green; float:left;}

#centre { width:1000px; background-color:blue; float:left; margin:0;}

#ban { width:1000px; height:120px; background-color:red;}
#content { width:1000px; background-color:yellow;}
</style>

<script>
function Browser () {
//Détection plate-forme
if (navigator.appVersion.indexOf('Win') != -1) this.win=true;
if (navigator.appVersion.indexOf('Mac') != -1) this.mac=true;
if (navigator.appVersion.indexOf('Linux') != -1) this.linux=true;
if(this.win) this.plateForme = 'Windows';
if(this.mac) this.plateForme = 'Macintosh';
if(this.linux) this.plateForme = 'Linux';

//Détection du navigateur
if(navigator.userAgent.indexOf('Opera')!=-1) this.opera=true;
if(navigator.userAgent.indexOf('Konqueror')!=-1) this.konqueror=true;
if(navigator.userAgent.indexOf('Safari')!=-1) this.safari=true;
if(navigator.userAgent.indexOf('Firefox')!=-1) this.firefox=true;
if(navigator.userAgent.indexOf('Netscape')!=-1) this.netscape=true;
if(navigator.userAgent.indexOf('MSIE 6')!=-1) this.ie6=true;
if(navigator.userAgent.indexOf('MSIE 7')!=-1) this.ie7=true;
if(navigator.userAgent.indexOf('MSIE 8')!=-1) this.ie8=true;
if(this.opera) this.nav="Opera";
if(this.konqueror) this.nav="Konqueror";
if(this.safari) this.nav="Safari";
if(this.firefox) this.nav="Firefox";
if(this.netscape) this.nav="Netscape";
if(this.ie6) this.nav="Internet Explorer 6";
if(this.ie7 || this.ie8) this.nav="Internet Explorer > 6";
if(!this.nav) this.nav= "Inconnu";

if(this.ie6 || this.ie7 || this.ie8) this.idnav="ie";

if(this.idnav=='ie') {
this.winH = document.documentElement.clientHeight;
this.winW = document.documentElement.clientWidth;
} else {
this.winH = window.innerHeight;
this.winW = window.innerWidth;
}
}


$(document).ready( function() {

or=(document.getElementById('content').offsetHeight);
tot=document.getElementById('gauche').offsetHeight;

m=$("#menu").css('height');
m=parseInt(m.substr(0,m.indexOf('px')));

b=$("#ban").css('height');
b=parseInt(b.substr(0,b.indexOf('px')));

C=tot-(b+m);

if(C<or) C=(or+20);

$("#gauche").css('height', (C+b)+'px');
$("#droite").css('height', (C+b)+'px');
$("#content").css('height', C+'px');

var browser = new Browser;

winH = browser.winH;
winW=((browser.winW-1000)/2);

$("#droite").css('width', winW+'px');
$("#gauche").css('width', winW+'px');
});
</script>

</head>





Menu





Gauche







BAN



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget nisi sed neque consequat laoreet ut quis nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nulla scelerisque posuere lacus sagittis blandit. Nam fermentum fringilla laoreet. Pellentesque sed eros quis velit tempor viverra nec nec mauris. Suspendisse sit amet eros nunc. Nullam mi mauris, mollis in eleifend vel, adipiscing fermentum leo. Curabitur vitae felis sed tortor aliquet pharetra. Fusce porttitor viverra rutrum. Curabitur ultricies massa sit amet erat blandit egestas molestie enim elementum. Aliquam bibendum, lectus sodales scelerisque volutpat, erat tortor elementum sem, eu eleifend nisl urna vel quam. Cras fermentum accumsan quam, quis tristique tellus luctus at. In imperdiet massa vitae mauris ullamcorper congue. Ut quam est, tincidunt et tristique quis, hendrerit eu ligula. Phasellus ac sapien felis. Aenean vulputate gravida aliquam. Pellentesque ac magna nunc.
 









Droite



</html> 


Voila cette page "fonctionne", tout est bien niquel, mais si je rajoute quelques paragraphes, la scroll apparait et mon div de droite passe en dessous!

Si quelqu'un à une meilleure idée qui puisse m'enlever du JS je suis preneur :D

Merci d'avance!

8 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
le fait de mettre des float:left sur tous tes DIVs fait que ils sont mis bout à bout dans le flux du document, donc s'il n'y a pas assez de place à droite cela passe à la ligne.
Une solution, outre les TABLEs, reste d'affecter à la DIV de gauche un float:left, à celle de droite un float:right et celle du centre ocuupera la place restante.

Attention à l'ordre de déclaration des DIV dans le flux...
- Gauche en premier avec float : left et width définie
- Droite ensuite avec float : right et width définie
- Centre pour finir sans rien
exemple:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
body {
  margin : 10px;
  padding : 0;
  font-size : 13px;
  font-family: Verdana;
}
div {
  height : 350px;
}
div#D_GAUCHE {
  float : left;
  width : 150px;
  border : 1px solid #8080f0;
}
div#D_DROITE {
  float : right;
  width : 150px;
  border : 1px solid #f08080;
}
div#D_CENTRE {
  margin-left : 160px;
  margin-right : 160px;
  border : 1px solid #80f080;
}
</style>
</head>


Gauche


Droite


Centre


</html>

à toi de jouer...
;O)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
c'est de la faute au float:left.

;O)
Messages postés
110
Date d'inscription
dimanche 23 janvier 2005
Statut
Membre
Dernière intervention
2 avril 2010

Lut!

Heu lequel?

Parce-que au niveau de mon gauche - centre -droite si je ne met pas de float, ils passent les uns sous les autres
Messages postés
110
Date d'inscription
dimanche 23 janvier 2005
Statut
Membre
Dernière intervention
2 avril 2010

Ah ok! Je test ça mais je devrais tout de même définir des width à mes div gauche et droite en JS :)
Messages postés
110
Date d'inscription
dimanche 23 janvier 2005
Statut
Membre
Dernière intervention
2 avril 2010

Me revoila! J'ai réduit le code pour en arriver la :

<!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" xml:lang="fr" lang="fr">
<head>

<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<style>
body, html { height:100%; margin:0; width:100%; }

#centm { width:100%; height:50px; float:left;background-color:#cecece;}
#menu { width:1000px; background-color:purple; height:50px; margin: 0 auto;};

#all {  width:1000px; height:100%; margin: 0 auto; background-color:#bbbbbb; float:left;}

#gauche {  height:100%; background-color:Aqua; float:left;}
#droite { height:100%; background-color:green; float:right;}

#centre { width:100%; background-color:blue; margin:0;}

#ban { height:120px; background-color:red; top:50px;}
#content { background-color:yellow; padding:10px; top:170px; }
</style>

<script>
function Browser () {
//Détection plate-forme
if (navigator.appVersion.indexOf('Win') != -1) this.win=true;
if (navigator.appVersion.indexOf('Mac') != -1) this.mac=true;
if (navigator.appVersion.indexOf('Linux') != -1) this.linux=true;
if(this.win) this.plateForme = 'Windows';
if(this.mac) this.plateForme = 'Macintosh';
if(this.linux) this.plateForme = 'Linux';

//Détection du navigateur
if(navigator.userAgent.indexOf('Opera')!=-1) this.opera=true;
if(navigator.userAgent.indexOf('Konqueror')!=-1) this.konqueror=true;
if(navigator.userAgent.indexOf('Safari')!=-1) this.safari=true;
if(navigator.userAgent.indexOf('Firefox')!=-1) this.firefox=true;
if(navigator.userAgent.indexOf('Netscape')!=-1) this.netscape=true;
if(navigator.userAgent.indexOf('MSIE 6')!=-1) this.ie6=true;
if(navigator.userAgent.indexOf('MSIE 7')!=-1) this.ie7=true;
if(navigator.userAgent.indexOf('MSIE 8')!=-1) this.ie8=true;
if(this.opera) this.nav="Opera";
if(this.konqueror) this.nav="Konqueror";
if(this.safari) this.nav="Safari";
if(this.firefox) this.nav="Firefox";
if(this.netscape) this.nav="Netscape";
if(this.ie6) this.nav="Internet Explorer 6";
if(this.ie7 || this.ie8) this.nav="Internet Explorer > 6";
if(!this.nav) this.nav= "Inconnu";

if(this.ie6 || this.ie7 || this.ie8) this.idnav="ie";

if(this.idnav=='ie') {
this.winH = document.documentElement.clientHeight;
this.winW = document.documentElement.clientWidth;
} else {
this.winH = window.innerHeight;
this.winW = window.innerWidth;
}
}


$(document).ready( function() {

or=(document.getElementById('content').offsetHeight);
tot=document.getElementById('gauche').offsetHeight;

m=$("#menu").css('height');
m=parseInt(m.substr(0,m.indexOf('px')));

b=$("#ban").css('height');
b=parseInt(b.substr(0,b.indexOf('px')));

C=tot-(b+m);

if(C<or) C=(or+20);

$("#gauche").css('height', (C+b)+'px');
$("#droite").css('height', (C+b)+'px');
$("#content").css('height', (C+m-20)+'px');

var browser = new Browser;

winH = browser.winH;
winW=((browser.winW-1000)/2);

$("#droite").css('width', winW+'px');
$("#gauche").css('width', winW+'px');
$("#content").css('width', (winW+1000)+'px');
$("#ban").css('width', (winW+1000)+'px');
});

</script>

</head>





Menu





Gauche


Droite




BAN




vvvvdddddddddddddddddddddddddddddddddddddvvvvddddvvvvdddddddddddddddddddddddddddd








</html> 


Seulement, si mon texte est trop long (s'il dépasse la div) il ne reviens pas a la ligne mais il passe en dessous des divs! C'est assez bizarre oO

Merci pour ton aide!
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
peu de chance qu'un mot soit aussi long sans césure, mais bon,
il te faut mettre sur la DIV du centre un overflow : hidden ou encore auto, à toi de choisir
;O)
Messages postés
110
Date d'inscription
dimanche 23 janvier 2005
Statut
Membre
Dernière intervention
2 avril 2010

Ah ok c'est parce-qu'il n'y avais pas de césure xD bon ben merci pour tout je vais tenter d'appliquer tout ça à ma maquette
Messages postés
110
Date d'inscription
dimanche 23 janvier 2005
Statut
Membre
Dernière intervention
2 avril 2010

Impec! J'ai eu quelques modifs à faire mais maintenant ça passe niquel sur tout les navs

Merci encore