Results 1 to 1 of 1

Thread: possition menu background image need help

  1. #1
    Join Date
    Nov 2009
    Location
    All around Europe
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default possition menu background image need help

    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 ?

    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;*/
    }
    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

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

    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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>
    Last edited by iv4o; 01-18-2010 at 01:33 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •