1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Problème de mise en forme

Résolu
croftman Messages postés 110 Date d'inscription dimanche 23 janvier 2005 Statut Membre Dernière intervention 2 avril 2010 - 1 avril 2010 à 09:39
croftman Messages postés 110 Date d'inscription dimanche 23 janvier 2005 Statut Membre Dernière intervention 2 avril 2010 - 2 avril 2010 à 16:49
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

Réponse 1 / 8
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 16
2 avril 2010 à 12:29
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)
3
Réponse 2 / 8
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 16
1 avril 2010 à 22:17
Bonjour,
c'est de la faute au float:left.

;O)
0
Réponse 3 / 8
croftman Messages postés 110 Date d'inscription dimanche 23 janvier 2005 Statut Membre Dernière intervention 2 avril 2010
2 avril 2010 à 09:05
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
0
Réponse 4 / 8
croftman Messages postés 110 Date d'inscription dimanche 23 janvier 2005 Statut Membre Dernière intervention 2 avril 2010
2 avril 2010 à 12:51
Ah ok! Je test ça mais je devrais tout de même définir des width à mes div gauche et droite en JS :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
croftman Messages postés 110 Date d'inscription dimanche 23 janvier 2005 Statut Membre Dernière intervention 2 avril 2010
2 avril 2010 à 14:26
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!
0
Réponse 6 / 8
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 16
2 avril 2010 à 15:40
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)
0
Réponse 7 / 8
croftman Messages postés 110 Date d'inscription dimanche 23 janvier 2005 Statut Membre Dernière intervention 2 avril 2010
2 avril 2010 à 15:48
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
0
Réponse 8 / 8
croftman Messages postés 110 Date d'inscription dimanche 23 janvier 2005 Statut Membre Dernière intervention 2 avril 2010
2 avril 2010 à 16:49
Impec! J'ai eu quelques modifs à faire mais maintenant ça passe niquel sur tout les navs

Merci encore
0
Rejoignez-nous