Uiterlijk css aanpassen door images?

[Martijn31]

Hallo Helpmij,

Ik ben bezig met een standaard layout van html en css. Het gaat allemaal wel zoals ik wil maar ik vind het allemaal zo standaard en blokkerig.
Nu was mijn vraag of je het uiterlijk van je website ook kan veranderen door plaatjes? in css
bijvoorbeeld: het menu die is nou vierkant afgewerkt maar ik wil de hoeken rond hebben hier een voorbeeld:


Nu wil ik dat doen door de balk zelf te tekenen en een link te plaatsen in de css naar de afbeelding op de site
wanneer mijn webpagina dan geladen word dat hij de afbeelding gebruikt als menubalk

Ik weet niet of dat mogelijk maar lijkt me wel, ik hoop dat iemand het begrijpt want het is nogal lastig uit te leggen.
ik zal de css ook nog even toevoegen en een voorbeeld van de huidige site

CSS:

body {background-color:#00CC33;
} 
#head-container
{
	color: #00CC33;
	background: #00CC33;
}

#header
{
	margin: 0 auto;
	width: 860px;
	padding: 5px;
	background: #00CC33;
}

#header h1 { margin: 0; }

#navigation-container
{
	float: left;
	width: 100%;
	color: #000;
	background: #000;
}

#navigation
{
	margin: 0 auto;
	width: 900px;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
	float: left;
	width: 100%;
	color: #000
	background: #000;
}

#content-container2
{
	margin: 0 auto;
	width: 900px;
}

#content-container3
{
	float: left;
	width: 900px;
	background: #FFF url(two-fixed-background.gif) repeat-y 100% 0;
}

#content
{
	clear: left;
	float: left;
	width: 560px;
	padding: 20px 0;
	margin: 0 0 0 30px;
	display: inline;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 240px;
	padding: 20px 0;
	margin: 0 20px 0 0;
	display: inline;
}

#aside h3 { margin: 0; }

#footer-container
{
	clear: left;
	color: #fff;
	background: #000;
}

#footer
{
	margin: 0 auto;
	width: 900px;
	text-align: right;
	padding: 20px;
	height: 1%;
}

 

[csshunter]

Hoi Martijn,
Het voorbeeld van de huidige site mis ik, maar het is zeker mogelijk ronde hoekjes te maken met een image: een background-image dat je met css achter je menubalk zet.
Een hele serie voorbeelden + artikel erover.

Als je het jezelf makkelijker wilt maken, dan kan je ook de knoppen van de menubalk als image tekenen (ipv html-tekst); dan hoef je geen rekening te houden met eventuele vergroting van de letters (= verandering hoogte van de menubalk) door de bezoeker.

En nog makkelijker: de css3-eigenschap "border-radius" gebruiken, bv.: #menu { border-radius: 5px }. Klaar!

• Dat laatste werkt niet in Internet Explorer 8, maar daarvoor kan je bv. het javacript css3pie te hulp roepen.

Met vriendelijke groet,
CSShunter