iv4o
01-18-2010, 01:11 PM
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 ?
#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;*/
}
EDIT// the hosting checking this website for malicious content. May take up to 4hrs, sorry for that.
I uploading the files from my localhost;
style.css
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;
}
index.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" 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>
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 ?
#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;*/
}
EDIT// the hosting checking this website for malicious content. May take up to 4hrs, sorry for that.
I uploading the files from my localhost;
style.css
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;
}
index.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" 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>