Notifikationer

Markér alle som læst Log ud

super_glenn Nybegynder

19. marts 2004 - 20:38 Der er 7 kommentarer og
1 løsning

Faneblads menu hvordan?

Hey
jeg har i lang tid været på udkig efter en faneblads menu som på www.comigang.dk jeg har også søgt her på eksperten, men uden held... er der en der kan forklare hvad jeg skal gøre er det javascript, php eller hvordan?

Synes godt om

kack Nybegynder

19. marts 2004 - 20:56 #1

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.

Synes godt om

skovenborg Nybegynder

19. marts 2004 - 23:01 #2

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.

Synes godt om

knudgert Nybegynder

20. marts 2004 - 01:56 #3

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.

Synes godt om

skovenborg Nybegynder

21. marts 2004 - 00:39 #4

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');">

Synes godt om

skovenborg Nybegynder

21. marts 2004 - 00:44 #5

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).

Synes godt om

super_glenn Nybegynder

21. marts 2004 - 21:19 #6

tak skovenborg smid 1 svar ;D

Synes godt om

skovenborg Nybegynder

21. marts 2004 - 21:25 #7

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

Synes godt om

fangel Nybegynder

21. marts 2004 - 21:27 #8

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

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS