1. #1

    Registered
    12/12/04
    Location
    Vlimmeren
    Posts
    343
    iTrader
    0
    Mentioned
    0 Post(s)

    stretch een relative div over de hele lengte

    Hai,

    Zoals je HIER kan zien staat er links van het menu een lijn schaduw. Deze lijn zou zich over de gehele lengte moeten uitstrekken, maar doet dit niet. De lijn staat als achtergrondafbeelding in de div 'menuwrapper'. Ik kan de div wel rekken met pixelwaardes, maar dat is niet echt optimaal natuurlijk, aangezien hij dan de lengte van de langste pagina moet hebben of een andere ID op elke pagina.
    De body staat op 100%, de wrapper waar de div instaat ook, en de div zelf ook. Ik veronderstel dat ik iets fout doe met de positions, maar ik heb geen idee wat.

    Alvast heel erg bedankt

    Michael

    CSS:
    Code:
    body {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 0.9em;
      margin: 0px;
      height:100%;
    }
    
    p {
      line-height: 1.5em;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size:14px;
    }
    
    h1 {
    	color: #39b54a;
    	font-size:24px;
    	font-family:"Times New Roman", Times, serif;
    	font-style: normal;
    	font-weight: lighter;
    }
    
    h2 {
    	color: #000000;
    	font-size:24px;
    	font-family:"Times New Roman", Times, serif;
    	font-style: normal;
    	font-weight: lighter;
    }
    
    h3 {
    	color: #000000;
    	font-size:14px;
    	font-family:"Times New Roman", Times, serif;
    	font-style: oblique;
    	font-weight: bold;
    	vertical-align:top;
    }
    
    table {
    	color: #000000;
    	font-size:14px;
    	font-family: Georgia, "Times New Roman", Times, serif;	font-style: normal;
    	font-weight: lighter;
    	vertical-align: top;
    }
    
    td {
    	padding: 5px;
    	vertical-align: top;
    
    }
    
    ul.menu, ul.menu ul {
      list-style-type:none;
      margin-left: 20px;
      padding-left: 0;
      width: 15em;
    }
    
    ul.menu a {
      display: block;
      text-decoration: none;	
    }
    
    ul.menu li {
      margin-top: 1px;
    }
    
    ul.menu li a {
      color: #464646;	
      padding: 0.25em;
      border-width: 2px;
      border-bottom-style: solid;
      border-color: #f9f9f9;
    }
    
    ul.menu li a:hover {
      font-weight: bold;
    }
    
    ul.menu li ul li a {
      color: #2d2d2d;
      font-size: 0.7em;
      padding-left: 20px;
      border-bottom: 0px;
    }
    
    ul.menu li ul li a:hover {
      padding-left: 15px;
    }
    
    .ortho a:hover {
      padding-left: 15px;
      border-left: 5px #39b54a solid;
    }
    		
    		.esthm a:hover {
    		  padding-left: 15px;
    		  border-left: 5px #6cccf8 solid;
    		}
    		
    		.esthv a:hover {
    		  padding-left: 15px;
    		  border-left: 5px #f699f5 solid;
    		}
    
    .onco a:hover {
      padding-left: 15px;
      border-left: 5px #b80000 solid;
    }
    
    .preproth a:hover {
      padding-left: 15px;
      border-left: 5px #4d97ff solid;
    }
    
    .wrapper{
    	margin: 0 auto;
    	width: 1000px;
    	height: 100%;
    }
    
    .menuwrapper {
    	position:relative;
    	width: 200px;
    	height: 100%;
    	float:left;
    	padding-top: 165px;
    	background-color:#ffffff;
    	background-image:url(images/shadowline.jpg);
    	background-repeat:repeat-y;
    	z-index:0
    	}
    
    .contentwrapper {
    	position:relative;
    	display:inline;
    	margin-top: 0px;
    	width: 800px;
    	height: 100%;
    	float:left;
    	background-image:url(images/bg.jpg);
    	background-repeat: no-repeat;
    	background-position:top;
    	background-color: #f5f5f5;
    	z-index:1;
    	border-top: 5px #ededed solid;;
    }
    
    
    				.contentwrapper-ortho {
    					position:relative;
    					display:inline;
    					margin-top: 0px;
    					width: 800px;
    					height: 100%;
    					float:left;
    					background-image:url(images/ortho-bg.jpg);
    					background-repeat: no-repeat;
    					background-position:top;
    					background-color: #f5f5f5;
    					z-index:1;
    					border-top: 5px #39b54a solid;
    				}
    				
    				.contentwrapperesth	 {
    					position:relative;
    					display:inline;
    					margin-top: 0px;
    					width: 800px;
    					height: 100%;
    					float:left;
    					background-image:url(images/esth-bg.jpg);
    					background-repeat: no-repeat;
    					background-position:top;
    					background-color: #f5f5f5;
    					z-index:1;
    					border-top: 5px #ffe300 solid;
    				}
    				
    				.contentwrapperonco {
    					position:relative;
    					display:inline;
    					margin-top: 0px;
    					width: 800px;
    					height: 100%;
    					float:left;
    					background-image:url(images/onco-bg.jpg);
    					background-repeat: no-repeat;
    					background-position:top;
    					border-top: 5px #4d97ff solid;
    					z-index:1;
    				}
    				
    				.contentwrapperpreproth {
    					position:relative;
    					display:inline;
    					margin-top: 0px;
    					width: 800px;
    					height: 100%;
    					float:left;
    					background-image:url(images/preproth-bg.jpg);
    					background-repeat: no-repeat;
    					background-position:top;
    					border-top: 5px #b80000 solid;
    					z-index:1;
    				}
    
    .textwrapper {
    	margin-top: 350px;
    	margin-left: 40px;
    	margin-right: 65px;
    }
    
    .disclaimer {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9px;
    	text-align: right;
    	padding-top: 8px;
    	background-color: #ffffff;
    }
    
    .pagename {
    	margin-top: 130px;
    	margin-left: 20px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 24px;
    	color: #cccccc;
    	clear: none;
    	font-weight: lighter;
    	position: absolute;
    	top: 515px;
    	z-index: 1;
    }
    
    
    .code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
    .code code { display: block; padding: 3px; margin-bottom: 0; }
    .code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
    .indent1 { padding-left: 1em; }
    .indent2 { padding-left: 2em; }
    Last edited by ::SaBeR::; 18-10-2010 at 10:54.
    no votes  

  2. #2
    coldvinc's Avatar
    Registered
    25/06/05
    Location
    9000feet dwn
    Posts
    3,611
    iTrader
    2 (100%)
    Mentioned
    0 Post(s)
    het pobleem is dat je schaduw zich in de div bevind van het menu, en deze div is maar zo lang is het menu omdat er geen hoogte aan meegegeven is.

    Je kan proberen om de schaduw aan de wrapper mee te geven.
    My fight towards financial independence: Fight to FI/RE
    no votes  

  3. #3

    Registered
    12/12/04
    Location
    Vlimmeren
    Posts
    343
    iTrader
    0
    Mentioned
    0 Post(s)
    Kan ik de div van het menu niet zo lang als de bovenliggende div maken?
    no votes  

  4. #4
    Accordis's Avatar
    Registered
    20/01/08
    Location
    Leuven
    Posts
    1,401
    iTrader
    10 (100%)
    Mentioned
    0 Post(s)
    Dat kan, maar werkt dan niet in alle browsers. Het beste is om een div rond de hele content te maken (bv. "wrapper") en deze achtergrond te geven, dit werkt altijd
    punt.
    no votes  

Posting Permissions

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

Log in

Log in