Hoi,
weet iemand hoe je dit kan realiseren met css/een plaatje & html?
het heeft niet veel zin in de source te kijken en dan in de css want je vind het echt niet, geraakt er niet wijs uit. Begrijp niet hoe hij het doet als de links langer worden.
Bv Home/Music/Video/Contact die zijn allemaal ongeveer even lang maar als je dan bevoorbeeld guestbook of downloads hebt zal je toch een langer plaatje nodig hebben, kan iemand me hier meer over informeren of een voorbeeldje geven van hoe ik dit doe?
Ik rip het niet, ik wil gewoon weten hoe je dit doet omdat ik denk dat je daar heel mooie dingen mee kan maken =).
@ Thijs Damen;
Hoe wil je dat dan doen?
.button {
background: url('img/buttonLeft.png') left no-repeat;
background: url('img/buttonBg.png') center repeat-x;
background: url('img/buttonRight.png') right no-repeat;
}
Of kan dit niet? Ik heb werkelijk geen idee hoe je dit wil doen..
Drie elementen is niet nodig. Je neemt gewoon 1 achtergrondplaatje met ronde hoeken dat breed genoeg is voor het breedste menu-item. Dan geef je de a tags binnen je li tags een kleine margin aan de rechterkant. Voor je a tags gebruik je een achtergrondplaatje dat je links uitlijnt, en voor je li tags hetzelfde plaatje dat je rechts uitlijnt. Door de rechtermargin op de a tags zie je het achtergrondplaatje van de li tag.
Een voorbeeld:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation list - Rounded corners</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<style type="text/css" media="screen">
div#container {margin: 0 auto; width: 700px; font-family: verdana;}
div#header {height: 100px; padding: 20px 0;}
div#nav {}
div#nav ul {list-style-type: none;}
div#nav ul li {display: inline; float: left; margin: 0 10px 0 0; background: url(bg_item.gif) right top no-repeat;}
div#nav ul li a {display: block; padding: 2px 5px; margin: 0 5px 0 0; text-decoration: none; background: url(bg_item.gif) left top no-repeat; color: #fff;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Navigation list - Rounded corners</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">item 01</a></li>
<li><a href="#">item 02</a></li>
<li><a href="#">item 03 langere tekst</a></li>
</ul>
</div>
</div>
</body>
</html>
