Accueil > Forum > > > > Problème de mise en forme
 Problème de mise en forme
jeudi 1 avril 2010 à 09:39:01 |
Problème de mise en forme
croftman
|
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 :
Code HTML : <!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>
<body >
<div id="centm">
<div id="menu">Menu</div>
</div>
<div id="gauche">Gauche</div>
<div id="all">
<div id="centre">
<div id="ban">BAN</div>
<div id="content">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.
</div>
</div>
</div>
<div id="droite">Droite</div>
</body>
</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! |
|
jeudi 1 avril 2010 à 22:17:42 |
Re : Problème de mise en forme
PetoleTeam
|
Bonjour,
c'est de la faute au float:left.
;O)
|
|
vendredi 2 avril 2010 à 09:05:17 |
Re : Problème de mise en forme
croftman
|
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  |
|
vendredi 2 avril 2010 à 12:29:08 |
Re : Problème de mise en forme
PetoleTeam
|
Réponse acceptée !
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:
Code HTML : <!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>
<body>
<div id = "D_GAUCHE">Gauche</div>
<div id = "D_DROITE">Droite</div>
<div id = "D_CENTRE">Centre</div>
</body>
</html>à toi de jouer...
;O)
|
|
vendredi 2 avril 2010 à 12:51:32 |
Re : Problème de mise en forme
croftman
|
Ah ok! Je test ça mais je devrais tout de même définir des width à mes div gauche et droite en JS :)
|
|
vendredi 2 avril 2010 à 14:26:12 |
Re : Problème de mise en forme
croftman
|
Me revoila! J'ai réduit le code pour en arriver la :
Code HTML : <!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>
<body >
<div id="centm">
<div id="menu">Menu</div>
</div>
<div id="gauche">Gauche</div>
<div id="droite">Droite</div>
<div id="ban">BAN</div>
<div id="content">
vvvvdddddddddddddddddddddddddddddddddddddvvvvddddvvvvdddddddddddddddddddddddddddd
</div>
</body>
</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! |
|
vendredi 2 avril 2010 à 15:40:53 |
Re : Problème de mise en forme
PetoleTeam
|
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)
|
|
vendredi 2 avril 2010 à 15:48:34 |
Re : Problème de mise en forme
|
vendredi 2 avril 2010 à 16:49:38 |
Re : Problème de mise en forme
croftman
|
Impec! J'ai eu quelques modifs à faire mais maintenant ça passe niquel sur tout les navs 
Merci encore  |
|
Cette discussion est classée dans : true, height, navigator, indexof, if
 Répondre à ce message
 Sujets en rapport avec ce message
optimiser navigateur [ par gobgob74 ]
bonjourje n'arrive pas a créer la la suite de ce code permettant la compatibilité de mon index.html chargant un clip flash avec tous les navigateur in
probleme de chaine [ par dritz100 ]
bonjours a tousje vous salut voila j'ai um probleme avec cette petite partie de code javascript qui est pour controler un ''textarea'' afin que la
navigator.appName [ par sikove ]
Salut ^^quelqu'un sait si ce code peut fonctionner sur fiefox d'une autre maniere : var Nom = navigator.appName;if (Nom == 'Netscape') {alert("firefox
Problème sorttable.js [ par Loulouu ]
Bonjour, je souhaitais utiliser la librairie très pratique sorttable.js, mais j'ai un problème, ca ne marche pas, pourtant j'ai bien fait ce qu'il fal
javascript, resolution ecran et css [ par chiktika ]
Bonjour,voila je détecte la résolution du client en javascript comme ceci :if (screen.height>=1024){ ...}else{ ...}ensuite j'ai besoin de redime
Problème de listes déroulantes liées / incompatibilité [ par dulcigirl ]
Bonjour a tous ! Je suis étudiante et dans le cadre d'un projet, j'ai besoin de de réaliser des listes déroulantes liées.Jusque là, aucun soucis, les
Problème temps de retour avec XMLHttpRequest [ par destiny ]
Bonjour,Avec XMLHttpRequest, j'effectue un traitement PHP assez conscéquent (environ 2/3s). Dans ma fonction ci-dessous, j'ai mis des tests qui normal
faire varier la taille de la fenetre navigateur dans le temps (incrementation?) [ par crasse ]
salut toutes et tous !j'essai de faire varier la taille de la fenetre du navigateur dans le temps, c'est a dire que par exemple, disons que la fenetre
changer titre page dynamiquement [ par dareman ]
salut, je cherche a modifier dynamiquement le contenu de la balise , en ajax uniquement (pas droit d'utiliser du php pour ce travail). je cherche don
Fonction AJAX qui ne se déclenche pas [ par Shivan0910 ]
Bonjour, Je sollicite de votre bienveillance dans la résolution de ce problème qui tend à m'épuiser J'ai deux fonctions function creationXHR() { var
 Livres en rapport
|
Derniers Blogs
 POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|