Faneblads menu hvordan?

Tror det er lavet i photoshop, som er rimmelig dyrt. Aner ikke om man kan lave det i css..

Hvis det er lavet i photoshop kan du finde 1000vis af tutorials om, rundt omkring på nettet.

her er et meget enkelt eksempel på et tabs-system (langt fra så flot som på den side du angav):
<div id="top">
<a href="side1.php" id="side1">Side 1</a><a href="side2.php" id="side2">Side 2</a><a href="side3.php" id="side3" style="border-right-width:1px;">Side 3</a>
Dette er et banner
</div>

og stylesheetet:
<style type="text/css">
#top A {
    display:block;
    width:100px;
    height:20px;
    font-size:12px;
    font-weight:bold;
    background-color:#CECEDE;
    float:left;
    color:#000;
    border:1px solid #000;
    text-align:center;
    text-decoration:none;
    border-right-width:0px;
    position:relative;
    top:-25px;
    left:-4px;
}
BODY.side1 #top #side1, BODY.side2 #top #side2, BODY.side3 #top #side3 {
    border-bottom-width:0px;
    background-color:#AEAEBE;
    padding-bottom:1px;
}
#top {
    background-color:#AEAEBE;
    width:500px;
    height:50px;
    border:1px solid #000;
    padding-top:3px;
    padding-left:3px;
    margin-top:30px;
}
</style>

Teknikken er at du på dine sider laver en bestemt class til din body - hvis der fx står:
<body class="side1">
så vil linket med id'en side1 blive en anden farve. Dette gøres på denne måde:
BODY.side1 #top #side1

Håber du forstår teknikken - det er sådan set det der er det vigtigste. Du kan også lave det med billeder som de gør på comigang.dk. Hvis dit banner/top skifter farve, skal du blot lave flere seperate styles for de enkelte tabpunkter fx:
BODY.side1 #top #side1, BODY.side2 #top #side2, BODY.side3 #top #side3 {
    border-bottom-width:0px;
    padding-bottom:1px;
}
BODY.side1 #top #side1 {background-color:#f00;}
BODY.side2 #top #side2 {background-color:#0f0;}
osv.

Den menu på www.comigang.dk  er da ikke andet 4 billeder placeret øverst i en tabel, spm så bliver skiftet når man åbner en ny side.

det kan gøres rimelig let med java script:
<head>
<script type="text/javascript">
function changePicture(bld,url) {
    document.getElementById(bld).src = url;
}
</script>
<style type="text/css">
#tabs IMG {
      float:left;
      width:150px;
      height:20px;
  }
</style>
</head>
<body onload="changePicture('bld3','bld3b.png');">¨

<div id="tabs">
<img src="bld1.png" id="bld1" /><img src="bld2.png" id="bld2" /><img src="bld3.png" id="bld3" /><img src="bld4.png" id="bld4" />
</div>

På hver side skriver du altså
<body onload="changePicture('det billededs id som du vil skifte','billedet der skal vises i stedet');">

det kan også gøres med css:
<style type="text/css">
  #tabs DIV {
      float:left;
      width:150px;
      height:20px;
      background-repeat:no-repeat;
  }
  #tab1 {background-image:url('tab1.png');}
  #tab2 {background-image:url('tab2.png');}
  #tab3 {background-image:url('tab3.png');}
  #tab4 {background-image:url('tab4.png');}
  BODY.tab1 #tabs #tab1 {background-image:url('tab1b.png');}
  BODY.tab2 #tabs #tab2 {background-image:url('tab2b.png');}
  BODY.tab3 #tabs #tab3 {background-image:url('tab3b.png');}
  BODY.tab4 #tabs #tab4 {background-image:url('tab4b.png');}
</style>
<body class="tab1">
<div id="tabs">
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>
</div>
</body>

igen bruger jeg det samme system med klassen i body til at bestemme billedet (som nævnt tidligere).

tak skovenborg smid 1 svar ;D

værsgo' - håber du forstår teknikken bag tabsene :-)

uhhhh - lige præcist tabs kan laves på mange fikse måde - den smarteste er via CSS, Lists og Sliding-doors teknik ;)

læs A List Apart's articler om emnet og du ville kunne lave nogle vædigt frække tabs...

http://alistapart.com/articles/taminglists/
http://alistapart.com/articles/slidingdoors/
http://alistapart.com/articles/slidingdoors2/

Morten