Archief - CSS: Wat zie ik over het hoofd ?

b

brechtvm

Legacy Member

• 28 aug 2007

• #1

Code:

	<div id="menu">
		<ul>
			<li id="Menu_home"><a href="index.html">Home</a></li>
			<li id="Menu_portfolio"><a href="portfolio.html">Portfolio</a></li>
			<li id="Menu_blog"><a href="http://brechtvm.br.ohost.de/Test/Blog/">Blog</a></li>
			<li id="Menu_schoolLife"><a href="#">School-life</a></li>
			<li id="Menu_privateLife"><a href="#">Private-life</a></li>
			<li id="Menu_Conact"><a href="#">Contact</a></li>
		</ul>
		<p>v1.0</p>
	</div>

ik wil dus nu een menu maken met images erin..
ieder onderdeel (li) is dus een image..

nu doe ik het volgende in css :
(1 voorbeeldje van 1 item)

Code:

#Menu_home{
	background-image: url(Images/buttons/Home.png);
	background-repeat: no-repeat;
	width: 83px;
	height: 21px;
}

#Menu_home a{
	text-indent: -5000px;
}

Om één of andere reden blijven de items "over elkaar" verschijnen..

ik snap echter niet wat ik over het hoofd zie ?!

b

brechtvm

Legacy Member

• 28 aug 2007

• #2

edit :
afbeeldingen stonden allemaal doorgelinkt naar home, heb dit intussen aangepast, maar fieit blijft dat ze 'over elkaar' staan...

- dus die text-indent doet zn werk niet ?!

H

Homer`

Legacy Member

• 28 aug 2007

• #3

Waarom maakt ge er geen met Photoshop? en dan met vtf editor ofzo?

b

brechtvm

Legacy Member

• 28 aug 2007

• #4

Homer` zei:

Waarom maakt ge er geen met Photoshop? en dan met vtf editor ofzo?

Klik om te vergroten...

snap uw opmerking niet echt, ik heb de buttons hé... een gewone, en een 'over'...
maar de tekst wil blijkbaar niet weg...

m

mobman

Legacy Member

• 29 aug 2007

• #5

steek da gewoon in een class

<span class="hidden">home</span>

en dan in css

.hidden{
display:none;
}

dan heb je uw buttons en ziede uw tekst niet meer

B

Bram

Legacy Member

• 29 aug 2007

• #6

ik pas meestal geen id's toe op m'n li's maar op m'n a's.
dus bv
<ul>
<li><a href="#">bla</a><li>
</ul>
en dan in de css
ul { list-style: none; margin: 0; padding: 0}
li {float: left}
a {display: block; width: blapx; height: blapx; background: ; text-indent: -999em}

X

Xcessive-

Legacy Member

• 29 aug 2007

• #7

Zet eerst al eens display: block;

b

brechtvm

Legacy Member

• 30 aug 2007

• #8

Xcessive- zei:

Zet eerst al eens display: block;

Klik om te vergroten...

mobman zei:

steek da gewoon in een class

<span class="hidden">home</span>

en dan in css

.hidden{
display:none;
}

dan heb je uw buttons en ziede uw tekst niet meer

Klik om te vergroten...

solved, thx ! :applause:

m

mobman

Legacy Member

• 30 aug 2007

• #9

brechtvm zei:

solved, thx ! :applause:

Klik om te vergroten...

yw

b

brechtvm

Legacy Member

• 30 aug 2007

• #10

last question :

ik zie dat vele sites met een 'strip' werken als menu, met daar alle buttons in..
1 afbeelding dus..

zit dit principe als volgt in elkaar ?! :
padding instellen op image, en zo uw botton selecteren die moet weergegeven worden ?

oja, wat is het beste formaat (JPEG/GIF/PNG) om buttons weer te geven ?

X

Xcessive-

Legacy Member

• 30 aug 2007

• #11

Bij de css de achtergrond instellen van iedere list.

background: url(menu.jpg) x y;

En dan die verschuiven bij iedere list zodat je het juiste gedeelte te zien krijgt.
Dus x en y vervangen door getallen. Zo kun je dat ook doen met de hover image.

1 menu link is bv 30px hoog een 100px breed.

1ste menu item
background: url(menu.jpg) 0 0;

1ste menu item hver
background: url(menu.jpg) 0 -30px;

2de menu item
background: url(menu.jpg) -100px 0;

2de menu item hver
background: url(menu.jpg) -100px -30px;

Formaat maakt niet zoveel uit maar als je gradients hebt moet je al zeker geen gif gaan gebruiken.

b

brechtvm

Legacy Member

• 30 aug 2007

• #12

Xcessive- zei:

Bij de css de achtergrond instellen van iedere list.

background: url(menu.jpg) x y;

En dan die verschuiven bij iedere list zodat je het juiste gedeelte te zien krijgt.
Dus x en y vervangen door getallen. Zo kun je dat ook doen met de hover image.

1 menu link is bv 30px hoog een 100px breed.

1ste menu item
background: url(menu.jpg) 0 0;

1ste menu item hver
background: url(menu.jpg) 0 -30px;

2de menu item
background: url(menu.jpg) -100px 0;

2de menu item hver
background: url(menu.jpg) -100px -30px;

Formaat maakt niet zoveel uit maar als je gradients hebt moet je al zeker geen gif gaan gebruiken.

Klik om te vergroten...

fantastisch ! thx !

b

brechtvm

Legacy Member

• 2 sep 2007

• #13

heb een Menu_Strip.png file, met daarin dus een strip van mn menu...
700px lang dus, en en 20px hoog, met daarin mn buttons...

waar start die 0 0 ?
is dat in 'center' ?

edit : is al oké..
blijkbaar mag ik background-image niet gebruiken

b

brechtvm

Legacy Member

• 2 sep 2007

• #14

KLIK

Volgens mij staat alles juist zoals hierboven beschreven door Xcessive-.
Doch wilt hij de laatste 2 items niet weergeven..
Ik heb borders aangezet voor het menu zodat je duidelijk ziet wat het probleem is : hij wilt geen width toekennen, terwijl deze er wel degelijk staat in opmaak.css


Wie kan me helpen ?

X

Xcessive-

Legacy Member

• 3 sep 2007

• #15

Je ben bij die twee laatste bij de width de p van px vergeten.

b

brechtvm

Legacy Member

• 3 sep 2007

• #16

Xcessive- zei:

Je ben bij die twee laatste bij de width de p van px vergeten.

Klik om te vergroten...

inderdaad

superstomme fout :doh:

Shame on me

anyway : thanks !

b

brechtvm

Legacy Member

• 3 sep 2007

• #17

KLIK

waarom kan ik niet op mn images klikken ?

Code:

<li id="Menu_blog"><a href="http://brechtvm.br.ohost.de/Test/Blog/">Blog</a></li>

er zit toch duidelijk een A-element in ?

b

brechtvm

Legacy Member

• 6 sep 2007

• #18

niemand die me kan helpen ?

reden die ik intussen bedacht: ik kleef een li-element OVER mn a-element, waardoor ik het a-element niet meer kan aanspreken.

> klopt mijn redenering bij deze ? zoja, moet ik dan mn id van LI naar A verplaatsen ? (als énige oplossing)

H

HTrance

Legacy Member

• 6 sep 2007

• #19

Heb ff zitten testen en als je die "span class-hidden" weghaalt dan kun je op de link klikken en dan marcheert hij wel. Btw is 't niet beter om van uw links een image te maken ipv tekst? resultaat is denk 't zelfde en span is missch niet nodig dan ('k denk nu wel heel vlug dus 'k kan fout zitten)