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!

A voir également:

Problème de mise en forme
Mise à jour sybase - Conseils pratiques -SQL
Vba mise en forme cellule ✓ - Forum VB.NET
Visual studio code mise en forme automatique ✓ - Forum Visual Basic 6
Garder une mise en forme avec vba ✓ - Forum Visual Basic
Mise en forme de cellule ( VBA - EXCEL ) - Forum Visual Basic

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 17
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)

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 17
1 avril 2010 à 22:17

Bonjour,
c'est de la faute au float:left.

;O)

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

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 :)

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!

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 17
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)

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

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

Discussions similaires

mise en forme automatique de Visual Studio >_<

reproduire mise en forme en VBA sous excel

mise en forme largeur de colonne datagrid automatique

changer un format de cellule excel en vba

Mise en forme Textbox

Votre réponse

Discussions similaires