Hello,
Im trying to make my first web design and need some help to make my menu background image 100% heigh & weight to fill all the panel. The problem is with every browser the weight and height appear different (
example in Opera- the background image appear much more down then Mozilla.
Example link i upload here; http://ivo.netau.net/ this is the link.
Is it possible the to have auto weight & height ?
EDIT// the hosting checking this website for malicious content. May take up to 4hrs, sorry for that.Code:#menu_nav{ position:absolute; width: 200px; /*Width of left column*/ height: 1268px; margin: -152px 1px 4px 2px; text-decoration: none; background-image: url('/var/www/djamilla/images/menu_background.png'); background-repeat: repeat-x; /*border: 1px solid #000;*/ }
I uploading the files from my localhost;
style.css
index.htmlCode:body{ font-family: Lucida Grande,Trebuchet MS,Verdana,Helvetica, sans-serif; font-color: #292421; margin:2px 50px 20px 50px; line-height: 1.5em; background-color: #FFF; height:100% } h1 {color:#C8332A} h3 {color:#C8332A} b{font-size: 110%;} em{color: red;} #header_top{ font: 13px bold Lucida Grande; /*border: 0px;*/ color: #FFF; background-image: url('/var/www/djamilla/images/bg.png'); background-repeat:repeat-x; margin:2px 2px 2px 207px; /*margin-top: 1px; margin-left: 207px;*/ padding: 0px; height: 120px; /*Height of top section*/ border-right: 1px solid #848484; } #header_top h1{ font-family: Lucida Grande,Trebuchet MS,Verdana,Helvetica,oblique, sans-serif; font: oblique 25px Lucida Grande; position:absolute; color: #FFF; margin:0px 2px 0px; padding-top: 40px; font-size: 15; } #menu_nav{ position:absolute; width: 200px; /*Width of left column*/ height: 1268px; margin: -152px 1px 4px 2px; text-decoration: none; background-image: url('/var/www/djamilla/images/menu_background.png'); background-repeat: repeat-x; /*border: 1px solid #000;*/ } #menu_nav a{ font: bold oblique 13px Lucida Grande; display: block; padding: 10px; padding-left: 10px; color: #292421; text-decoration: none; position:relative; top:270px; border-bottom: 1px solid #848484; } #menu_nav a:hover{ background-color: #f88205; color: white; text-shadow: black 0.1em 0.1em 0.2em; } #contentwrapper{ float: left; width: 100%; /*border: 1px solid #000;*/ } #contentcolumn{ font-family: Lucida Grande,Trebuchet MS,Verdana,Helvetica, sans-serif; font: bold oblique 13px Lucida Grande; float: center; padding: 20px; height: auto; margin: 0px 2px 4px 207px; margin-left: 207px; /*Set left margin to LeftColumnWidth*/ background:#d9d9d9; /*border: 1px solid #000;*/ border-right: 1px solid #848484; } #footer{ clear: center; margin: 2px 2px 20px 2px; padding: 4px 1px; height: 20px; background-image: url('/var/www/djamilla/images/bg.png'); background-repeat:repeat-x; color: #000000; text-align: center; text-shadow: black 0.1em 0.1em 0.2em; /*border: 1px solid #000;*/ } #footer a{ color: #FFF; text-decoration: none; } .innertube{ font-family: Lucida Grande,Trebuchet MS,Verdana,Helvetica, sans-serif; font: 13px bold Lucida Grande; margin: 0px 10px; /*Margins for inner DIV inside each column (to provide padding)*/ /*border: 1px solid #fff;*/ } div.background { width: auto; height: auto; top: 50px; background: url(klematis.jpg) repeat; border: 1px white; /*border: 1px solid #000;*/ } div.transbox { width: auto; height: auto; margin: 3px 0px; background-color: #FFF; border: 1px solid #848484; border-style: solid ; border-right: 0; filter:alpha(opacity=60); opacity:0.9; } div.transbox p { margin: 30px 40px; font-weight: bold; color: #000000; /*border: 1px solid #000;*/ } .shadows{ box-shadow: 7px 7px 8px #818181; -webkit-box-shadow: 7px 7px 8px #818181; -moz-box-shadow: 7px 7px 8px #818181; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true); } .curved { -moz-border-radius:10px; -webkit-border-radius:10px; behavior:url(border-radius.htc); } .myparagraph:first-letter { font-size:200%; float:left top; color: #C8332A; }
Code:<!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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>DF-consulting</title> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="shortcut icon" href="/var/www/djamilla/images/favicon.ico" type="image/x-icon"> </head> <body> <div id="maincontainer"> <div id="menu_nav"> <a href="#">Accueil</a> <a href="#">Les projets de mobilité</a> <a href="#">Le space planning</a> <a href="#">L'outil i.Transferts®</a> <a href="#">Former et Conseiller</a> <a href="#">Réalisations</a> <a href="#">Nous contacter</a> </div> <div id="header_top"><div class="innertube"><h1 style="text-shadow: black 0.1em 0.1em 0.2em"><strong>Les spécialistes de l'espace </h1></div></div> <div id="contentwrapper"> <div id="contentcolumn"> <div class="innertube"><h1><p align="right">Présentation</h1></p></div> <h3> La priorité de DF Consulting</h3> <div class="shadows"> <div class="background"> <div class="transbox"> <p class="myparagraph">Dans une période où l'Entreprise vit de profondes et rapides mutations, la mobilité des salariés contribue à la réussite des changements stratégiques engagés. La priorité de DF Consulting est de ramener les questions liées à la mobilité des salariés au même plan que toutes les actions qui visent à améliorer la productivité dans l’Entreprise.</p> </div> </div> </div> <h3> Ses services</h3> <div class="shadows"> <div class="background"> <div class="transbox"> <ul> <p align="left"><font color="#f88205">Les projets de mobilité :</font>Adapter des méthodes spécifiques dans le cadre :</p> <li> de locaux occupés à réorganiser</li> <li> de locaux vides : en rénovation ou en construction</li> </ul> <ul type="circle"> <p align="left"><font color="#f88205">Le space planning :</font>Collecter, sélectionner et gérer tous les types d’informations liées:</p> <li> de locaux occupés à réorganiser</li> <li> de locaux vides : en rénovation ou en construction</li> </ul> <td align="center"> <ul type="disc"> <p align="left"><font color="#f88205"> L'outil i.Transferts® :</font>Collecter, sélectionner et gérer tous les types d’informations liées :</p> <li> au projet de mobilité</li> <li> a la gestion logistique des salariés</li> </ul> <ul type="upper-roman"> <p align="left"><font color="#f88205">Former et Conseiller :</font>Adapter des programmes de formation Autocad en fonction :</p> <li> des objectifs souhaités</li> <li> du niveau des stagiaires</li> </ul> <br /> </div> </div> </div> <h3> Ses Clients</h3> <div class="shadows"> <div class="background"> <div class="transbox"> <ul type="lower-alpha"> <li> Les dirigeants des entreprises PME</li> <li> Les responsables des services de logistique et d'informatique</li> <li> Les responsables des services immobiliers des entreprises</li> <li> Les responsables d'Asset Management: valorisation des espaces à la vente ou à la location</li> </ul> <br /> </div> </div> </div> </div> <div id="footer"><a href="http://www.df-consulting.fr">© 2010 DF-consulting.fr</a></div> </div> </body> </html>



Reply With Quote
Bookmarks