Afbeelding rekt zich mee uit

[kconline11]

Ey hallo,

Ik heb een layout ontworpen en deze is gesliced en in Css gezet. Alleen zit ik met een probleem wat ik maar niet opgelost krijg. Hopelijk kunnen jullie mij helpen.

Het probleem zit zich daarin dat een afbeelding in het menu mee rekt naar onder toe. Zoals op afbeelding 1 zo moet die boog onder het menu blijven staan.
Nu gaat die telkens mee naar onder toe en krijg het maar niet gefixt.

Kunnen jullie helpen?

http://img202.imageshack.us/i/91859591.jpg/
http://img202.imageshack.us/i/59745311.jpg/

/* General */
body {
	margin:0;
	padding:0;
	background:#494444 url(img/body-background.png);
	font-family:Verdana;
}

a img { border:none; }
div.clear { clear:both; }
ul, li, fieldset { margin:0; padding:0; }
fieldset { border:none; }

/* Containers */
#header, #container, #footer { 
	position:relative; 
	margin:0 auto;
}

#container2 {
	float:left;
	width:100%;
	background:url(img/container2-background.gif) right bottom no-repeat;
}

/* Header */
#header {
	width:764px;
	height:131px;
	background-image:url(img/header-background.png);
}
#header h1 { display:none; }

/* Container */
#container {
	width:760px;
	border-style:solid;
	border-color:white;
	border-width:0 2px 2px 2px;
	background:white url(img/container-background.png) top right no-repeat;
}

/* Titel */
#titel {
	height:25px;
	background:url(img/titel-background.png) repeat-x;
	border-bottom:2px solid black;
}
#titel h2 {
	font-size:12px;
	margin:0;
	padding:3px 0 3px 50px;
	background:url(img/titel-item.gif) left 4px no-repeat;
}
* html body #titel h2 { padding-top:5px; } /* IE fix */


/* Main */
#main {
	width:526px;
	float:left;
	padding:2px 10px 5px 2px;
	font-size:10px;
	background-image:url(img/main-background.png);
}
#main p {
	margin:3px 0 10px;
	line-height:1.1;
}

/* Menu */
#menu {
	width:222px;
	float:left;
	background-color:white;
}
#menu ul { 
	list-style:none; 
	font-size:17px;
	font-weight:bold;
	margin-left:2px;
}
#menu li {
	height:25px;
	background:url(img/menu-background.png);
}
#menu li a {
	height:24px;
	display:block;
	padding-left:40px;
	padding-bottom:1px;
	background:url(img/menu-item.gif) 10px center no-repeat;
	text-decoration:none;
	color:black;
}
#menu li a:hover { 
	background-color:#D99E12; 
	background-image:url(img/menu-item-h.gif);
	border-bottom:1px solid #A3760D; 
	height:23px;	
}

/* Footer */
#footer {
	background-color:#19192B;
	font-size:10px;
	width:760px;
	border-style:solid;
	border-color:white;
	border-width:0 2px 2px 2px;
	text-align:center;
	color:white;
	font-weight:bold;
}

 

[Goeroeboeroe]

Daar is zo niets van te zeggen, behalve dat 't probleem duidelijk is door die plaatjes.
Maar ik zou niet weten welk plaatje die halve cirkel is, dus ik zou ook niet weten waar ik in de css moet kijken.
't Handigst zou zijn als je 'n link naar de code hebt, als die online staat.
Anders moet je in ieder geval hier ook de html neerzetten, dan kan de css (en dus ook de namen van de afbeeldingen) worden gekoppeld aan wat je op 't scherm ziet.

 

[kconline11]

Ja ik snap wat je bedoeld. Ik heb hem even online gezet kijk dit maar:

http://www.proquality.nl/offerte.php

En ga bijv eens naar home toe.

Het gaat dus om'

container-background en container-backgroundb


Hopelijk kun je me nu helpen dmv de bron en nu je de afbeeldingen kunt zien.

Bedankt alvast!

 

[killer4all2]

Waarom wil je uitrekken, het maakt het alleen maar lelijker

 

[Goeroeboeroe]

Die blauwe halve cirkel (of hoe 't ook heet) staat nu in #container2, aan de onderkant. Dus als die #container2 naar onderen groeit, zakt die background-image mee naar onderen.

Wat je zou kunnen proberen is om in de css voor #container2 te zetten:

background {transparent url(img/container2-background.gif) no-repeat scroll right 200px}

Dus bottom veranderen in 200px (vanaf de bovenkant). Of 'n andere maat natuurlijk. Dan staat hij vast op 'n bepaalde hoogte.

Beter is denk ik om de achtergrond te zetten waar hij bij hoort: in het menu. Dan houdt je het 'n beetje overzichtelijk.

Als je aan #menu toevoegt:

padding-bottom: 200px;
background: transparent url(img/container2-background.gif) no-repeat scroll right 200px;

Dan komt er onder het menu 200px extra ruimte (kun je natuurlijk meer of minder maken). En de background-image staat 200px vanaf de bovenkant, dus onder het menu. En blijft daar staan. Hoe groter je de padding maakt, hoe meer je ziet van de background-image.

Je kunt 't eventueel in plaats van bij #menu ook bij de ul zetten waar 't menu in staat.
En tja, of 't mooi is of niet, da's 'n kwestie van smaak