1

onsdag, 11. august 2010, 09:47


Jeg har et lille problem med en CSS baseret navigationsmenu jeg har lavet. Har fulgt dénne guide, men da jeg har brug for noget spacer afstand imellem knapperne har jeg måttet hugge lidt i koden for at få det til at virke grundlæggende - men det er noget rod!

Som I kan se har jeg måttet lave falske links for at få CSS delen til at vise noget billede i navigationsbaren - kan jeg slippe for dette?

Selve HTML koden. (Det er LI Class området)

Kildekode

1
2
3
4
5
6
7
8
9
10
11
<ul class="cssmenu">
<li class="spacer"><a href="#"></span></a></li>
<li class="home"><a href="index.html" title="Home"></span></a></li>
<li class="spacer"><a href="#"></span></a></li>
<li class="about"><a href="about.html" title="About"></span></a></li>
<li class="spacer"><a href="#"></span></a></li>
<li class="contact"><a href="contact.html" title="Contact"></span></a></li>
<li class="spacer"><a href="#"></span></a></li>
<li class="spacer"><a href="#"></span></a></li>
<li class="spacer"><a href="#"></span></a></li>
<li class="spacer"><a href="#"></span></a></li> </ul>


CSS koden

Kildekode

1
ul.cssmenu { list-style: none; padding: 0px; } .displace { position: absolute; left: -5000px; } ul.cssmenu li { float: left; } ul.cssmenu li a { display: block; width: 100px; height: 55px; background: url('navbar.png'); } /* * Normal Links */ ul.cssmenu li.spacer a { background-position: 0 0; } ul.cssmenu li.home a { background-position: 100px 0; } ul.cssmenu li.about a { background-position: 200px 0; } ul.cssmenu li.contact a { background-position: 300px 0; } /* * Hover Links */ ul.cssmenu li.home a:hover { background-position: 100px -55px; } ul.cssmenu li.about a:hover { background-position: 200px -55px; } ul.cssmenu li.contact a:hover { background-position: 300px -55px; }


2

onsdag, 11. august 2010, 12:26


Når du nu alligevel har givet de forskellige menupunket hver sin klasse, så brug da denne til at få lavet de afstande du skal bruge.

/ask

IBM t42 and IBM t23 still alive and kicking

3

onsdag, 11. august 2010, 12:29


Hvordan? Og det hjælper jo ikke rigtigt på mit problem da hvert menupunkt bruger et baggrundsbillede til onhover funktionen. Hvis jeg laver afstand så er der jo bare gråt bagved hvert link? (Jeg er absolut ikke trænet i CSS)


4

onsdag, 11. august 2010, 14:29


Kan du ikke lige lægge det op et sted så man kan se og pille. Evt. også ligge et billede op af hvordan det skal se ud.

/ask

IBM t42 and IBM t23 still alive and kicking

5

onsdag, 11. august 2010, 15:19


Joda. Det fikser jeg lige når jeg kommer hjem :)


6

onsdag, 18. august 2010, 00:20


Fandt du ud af det?


7

onsdag, 18. august 2010, 00:22


Ikke endnu - fik et mindre setback da krypteringen på min bærbare røg sig en tur og efterlod alt data på den ubrugeligt. Så der går nok lige et par dage før jeg kommer igang igen. :rolleyes:


8

onsdag, 18. august 2010, 08:32


:boxed: det var da nok pis.... fik du hældt cola i den ? :pokey:

Dyas

Lian Li TYR pc-x 2000 full tower - Corsair HX1000W Modular psu - Asus Rampage II Extreme
Intel® Core™ i7 965 Extreme Edition @3,6 Ghz + Thermalright Ultra-120 eXtreme Rev.c
gigabyte GTX570 "super overclock" - 6 GB Kingston HyperX 16000
80GB Intel SSD - Samsung Syncmaster TA950 27" - Logitech Z5450 THX Sorround + Sennheizer HD650

Laptop
PS3
Wii

9

onsdag, 18. august 2010, 08:46


Harddisken begyndte at spytte fejl ud, hvilket truecrypt ikke var glad for. Men maskinen er oppe og køre igen med en ny disk, og heldigvis havde jeg det meste af mit arbejde i min dropbox :9xo


10

onsdag, 18. august 2010, 10:53


Kan du ikke komme med et billede af hvordan du ønsker at menuen opfører sig? Så tror jeg godt jeg kan bakse noget css og tilhørende markup sammen til dig..


11

onsdag, 18. august 2010, 11:16


Bakser lige hvad jeg har fået lavet indtil videre sammen i en zip fil når der er frokost pause :)

Edit: Så har jeg pakket alle filerne sammen hér.

Idéen er som sagt at lave en navigationsbar som ved "hover" ændrer udseende - men altså kun ved hjælp af CSS. Der skal være spacere som ikke skal linke eller skifte imellem knapperne, og knapperne har ikke alle samme størrelse. :(


Dette indlæg er blevet redigeret 1 gange, senest redigeret af "HerrMansen" (18.08.2010, 11:30)


12

onsdag, 18. august 2010, 12:18


Så mangler du bare en tegning af hvordan det skal se ud.

/ask

IBM t42 and IBM t23 still alive and kicking

13

onsdag, 18. august 2010, 12:22


Det skal se ud om i den .zip fil jeg har vedhæftet (index.html), men med de features jeg har nævnt i min edit. Har fået det til at køre delvist på egen hånd, men der mangler som sagt muligheden for noget spacer og linkknapper i forskellige størrelser.


14

onsdag, 18. august 2010, 13:01


Jeg kan ikke helt se hvordan det skal se ud, ud fra den zip-fil.. Forstår nemlig ikke helt præcist hvad du mener med spacers i "forskellig" størrelse.. Det er nemlig der css har sin største mangel, det er ikke rigtigt dynamisk..

Jeg bruger ikke lister til navigationer, men det er næsten samme princip:
<div class="navigation">
<a href="#">Side 1</a>
<span class="spacer size1" />
<a href="#">Side 2</a>
<span class="spacer size3" />
<a href="#">Side 3</a>
<span class="spacer size1" />
<a href="#">Side 4</a>
<span class="spacer size2" />
<a href="#">Side 5</a>
</div>

div.navigation a, div.navigation span.spacer {
display: block;
float: left;
}
div.navigation a {
// Udseende til links her
}
div.navigation span.spacer.size1 {
width: 30px;
}
div.navigation span.spacer.size2 {
width: 43px;
}
div.navigation span.spacer.size3 {
width: 56px;
}

Er det sådan noget du har brug for? Hvis det er helt præcise størrelser for hvert eneste link så ville jeg droppe size-klasserne og sætte inline-width istedet.. Den smule ekstra i index-filen gør ikke meget skade for SEO..


15

onsdag, 18. august 2010, 13:08


Så må jeg forklare mig bedre :)

Sådan som navigationen fungerer nu håndterer CSS det ved at definere små kasser af ens størrelse, hvor knapperne/kasser/links faktisk er en background, der så "rykkes" en tand ned (se vedhæftningens øverste og næstøverste lag) hvilket i sig selv fungerer fint.

Problemet er bare at jeg ikke kan definere en "spacer" - altså en kasse uden et link imellem réele links - eller lave kasser i forskellige størrelse (til links der kræver mere skriveplads) da størrelsen er predefineret på forhånd og ikke er dynamisk.

Giver det mening? Ellers giver jeg sgu snart op :))

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "HerrMansen" (18.08.2010, 13:08)


16

onsdag, 18. august 2010, 14:00


Så ville jeg sætte padding på dine links i stedet for en bredde.. På den måde sikrer du dig den samme bredde mellem det egentlige indhold i hvert link.. Hvis du vil have en helt speciel bredde mellem hvert link, så er du nødt til at lægge et eller andet form for element ind eller give hvert link en separat klasseangivelse


17

onsdag, 18. august 2010, 14:47


Bortset fra en enkel, så er alle dine menupunkter med ens baggrund. Hvorfor ikke bruge et baggrundsbillede med kun 2 "mænd" og så have et enkelt med den "skudte".

Du kan ramme hvert enkelt punkt med:

ul.navbar li.XXX {}

Hvis du styler på den kan du lave baggrund og bredde som det passer dig på hvert enkelt menupunkt

/ask

IBM t42 and IBM t23 still alive and kicking

Nyeste Videoer og Trailers

Indsend nyhed
Har du fundet en fed nyhed så indsend den så alle andre på Tweak.dk kan få glæde af den.