Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: zibjovial le le 03-06-2005 a 16:54:06

Titre: mise en page css
Posté par: zibjovial le le 03-06-2005 a 16:54:06

bonjour,
je doit créer un site en div avec css j'ai pour faire simple :
bannière
contenu
pied

je voudrais que mon contenu s'agrandisse en fonction du contenu et que le pied de page suivent comme avec les tableau 100% mais ici avec des calques

voici une page avec son css
Si quelqu'un a une solution je suis preneur
merci d'avance
<html>
<head>
<title>test min-height</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-style-type" content="text/css" />
<link href="css/explorer100.css" rel="stylesheet" type="text/css" />

<script>/*détection du browser utilisé et de sa version
var Browser;
navigateur=navigator.appName;
version=navigator.appVersion;

//table des navigateurs
var nav=new Array();
nav[0]="Microsoft Internet Explorer";
nav[1]="Netscape";

if (nav[0] == navigator.appName)//test avec le navigateur client
   {
   //config css pour windows
   document.write("<link type='text/css' rel='stylesheet' title='style1' href='css/explorer.css'>");
   }
   else
      {
      //config css pour netscape
      document.write("<link type='text/css' rel='stylesheet' title='style2' href='css/firefox.css'>");
      }
*/
</script>

<body>
<center>
<div id="global">
   <div id="menu"></div>
<div id="banniere"></div>
   <div id="login"></div>
   <div id="contenutop"></div>
<div id="contenu"></div>
   <div id="texte"></div>
   <div id="contenubottom"></div>
<div id="pied"></div>
</div>
</center>
</body>
</html>

* {padding: 0; margin: 0;}
html, body {
   background-color: #FFFFFF;
}
div#global {
   height:598px;
   width: 700px;
   text-align: left;
   position: relative;
}
div#menu {
   background: #CCCCCC;
   height: 39px;
   width: 700px;
   top: 0px;
   left: 0px;
   position: absolute;
}
div#banniere {
   background: #eeeCCC;
   height: 148px;
   width: 700px;
   left: 0px;
   top: 39px;
   position: absolute;
}
div#login {
   height: 25px;
   width: 700px;
   left: 0px;
   top: 161px;
   position: absolute;
   background: #CC0000;
}
div#contenutop {
   background: #fffCCC;
   height: 32px;
   width: 700px;
   left: 0px;
   top: 187px;
   position: absolute;

}
div#contenu {
   background: #aaaCCC;
   width: 700px;
   top: 219px;
   left: 0px;
   position: absolute;
   height: 329px;
   font-size: 12px;
   font-family: Geneva, Arial, Helvetica, sans-serif;
   color: #316AC5;

}
div#texte {
   width: 682px;
   top: 217px;
   left: 0px;
   position: absolute;
   height: 329px;
   font-size: 12px;
   font-family: Geneva, Arial, Helvetica, sans-serif;
   color: #316AC5;
   overflow: auto;
   padding-right: 30px;
   padding-left: 40px;
   text-align: justify;
}
div#contenubottom {
   background: #000CCC;
   height: 28px;
   width: 700px;
   left: 0px;
   position: absolute;
   bottom: 25px;
}
div#pied {
   background: #CCC000;
   height: 25px;
   width: 700px;
   left: 0px;
   position: absolute;
   font-size: 10px;
   color: #000000;
   text-align: center;
   bottom: 0px;
}

Titre: Re:mise en page css
Posté par: jb_gfx le le 05-06-2005 a 03:47:36

Salut,

Ton script pour passer une feuille de style par navigateur est des plus foireux, tu devrais t'en débarasser. Déjà il ne fonctionne pas correctement (les navigateurs avec user agent imitant IE se verront envoyer ta feuille de style IE) ensuite il ne sert à rien.

Si tu tiens vraiment à passer des styles spécifiques pour IE il vaut beaucoup mieux utiliser des commentaires conditionnels qui eux ne fonctionneront que sous IE. Et tu sert ta feuille de style normal pour les navigateurs réspectueux des standards (et pas seulement FireFox).

Exemple :

Code:

<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />

Titre: Re:mise en page css
Posté par: Gatsu35 le le 09-06-2005 a 10:42:01

vous n'avez pas plus crade les mecs ? :o

perso autant directement modifier les styles dans la feuille de style elle meme

border:1px solid red; /*pour firefox*/
_border:1px solid blue; /*Pour IE*/
et basta

les attributs avec _ devant, ne seront lus ke par IE
donc autant se debrouiller comme ca