Archief - CSS:relative positioning in hyperlinks

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
N

NaaiT

Legacy Member
Oi,
ik ben mn portfolio aan het maken, door zoveel mogelijk gebruik te maken van css. Nu wil ik een menu maken, waar de menuitems relatief gepositioneerd staan tov hun voorganger. Dit wil ik doen omdak ik later de mogelijkheid wil inbrengen tot een collapsable menu, waardoor de posities van de knoppen eronder worden verschoven.

Verder zou ik ook een css-preload willen hebben. Ik heb al gezocht op het forum & een preloadfunctie gevonden (door gebruik te maken van 1 image en de positie te veranderen) Deze werkt echter niet echt, aangezien mn cursor in IE nog altijd een zandlopertje geeft bij hovering.

http://www.klep2mania.be/Portfolio
&
http://www.klep2mania.be/Portfolio/_style.css

thx!
s

servi

Legacy Member
hoeft helemaal niet relatief te zijn, dit werkt immers ook :


Code: 
<div>titel van menu
  <div id="menu" style="display : none">
       <div id="element">element 1</div>
       <div id="element">element 2</div>
       ....
   </div>
</div>


zo kan je dus je menu zoveel uitbreiden als je wil zonder te moeten knoeien met relative posities.

Als je het menu dan tevoorschijn wil halen kan je dit bijvoorbeeld via javascript doen :
document.getElementById('menu').style.display="block";
en terug menu intrekken
document.getElementById('menu').style.display="none";
N

NaaiT

Legacy Member
maar daarvoor moet je juist toch wel relatief werken? Als je absoluut werkt, staan je buttons toch op een positie tov je frame? Als je dan 2 buttons ergens tussenvoegt als je op een trigger klikt, dan moeten die andere buttons eronder ook veranderen en absoluut zouden ze toch blijven staan?
D

DarkBone

Legacy Member
Standaard volgen elementen de FLOW van je pagina, dus je hoeft helemaal niks relatief af absoluut te positioneren. Ik heb al altijd mijn websites gemaakt zonder ook maar 1 ding absoluut te positioneren.
D

DieselPower

Legacy Member
kweet ni wa sneller laad, slices of 1 afbeelding, maar 1 afbeelding komt zo onprofessioneel over...
N

NaaiT

Legacy Member
kheb em weer gesliced.
http://www.klep2mania.be/Portfolio/

=> heb nu idd die positionering weggelaten, maar qua code is dit mss niet zo mega proper opgelost:

Code: 
<a href="#1" class="menuItem"><div class="menuItem"></div></a>
Voor mozilla heb ik die div nodig, voor ie heb ik de a nodig. Een div in een a is niet Xhtml strict, dus daar zit ik nog mee. Nog een prob is dat mn muiscursor in ie niet verandert on hover?

thx :)
N

NaaiT

Legacy Member
thx, nice tutke :)

wel nog volgend probleem: aangezien alles hetzelfde is, zou ik willen werken met een verwijzing naar 1 soort klasse vb:
Code: 
<li class="list"><a class="item" href="#" title="Thomas Gainsborough">Thomas Gainsborough</a></li>
<li class="list"><a class="item" href="#" title="Henri Matisse">Henri Matisse</a></li>
Nu het rare eraan: met a class="item" lukt het niet, met a id="item" wel. Id is voor uniek gebruik en dus niet Xhtml goedgekeurd bij meerdere keren gebruik. Ik snap niet echt waarom het met een id wel gaat, en een class niet.

dit is mn css code, wsl staan daar wat dingen die niet hoeven, maar kheb de meeste gehouden vanuit die tut:
Code: 
#menu {
	position: absolute;
	top: 159px;
	left: 37px;
	width: 97px;
	height: 100%;
	display: block;
}
#menu ul {margin:0; padding:0; list-style-type:none;}
#menu li {float:left; margin-right:1px;}
#menu a {display:block; width:97px; height:0; padding-top:22px; color:#000; overflow:hidden;}
* html #menu a:link, * html #menu a:visited {height:100%; he\ight:0;}
#menu a#item:hover {background:transparent url("images/buttonhover.gif") 0 0 no-repeat; z-index:50;}
* html #menu a:hover {height:100%; he\ight:0;}
Dno ook wat die he\ight daar doet?
D

DarkBone

Legacy Member
Waarom aan iedere li een klasse geven, geef gewoon een ID aan je <ul> en dan kun je als volgt werken:

<ul id="nav">
<li>...</li>
<li>...</li>
</ul>

ul#nav li
{
css hier...
}

ps: classes duidt je aan met een . en niet met een #
N

NaaiT

Legacy Member
ow sry was ff verstrooid, dacht ff omgekeerd ;) Die ul/li id's heb ik niet echt meer nodig. Al het overbodige heb ik er denk ik uitgesmeten. (hopelijk niet TE veel, in IE & mozilla werkt alles perfect)

wat wil die he\ight doen? Is dat ergens goed voor of..?

thx!
L

Lashknife

Legacy Member
DarkBone zei:
ul#nav li
{
css hier...
}
Klik om te vergroten...

ul.nav (als het een classname is)
#nav (als het een id is)

maar ul#nav? mss werkt het maar is het niet totaal onlogisch om een id achter een tag te plakken? id is zowiezo toch al uniek (of mss was je effe in de war :p )

#nav li { ... }
N

NaaiT

Legacy Member
lol :p

die he\ight is dus toch belangrijk, anders is het in IE helemaal f*cked up
D

DarkBone

Legacy Member
Idd, da's net GEEN typo, 't staat er toch zelf bijdat het een CSS hack is om het in IE werkende te krijgen? :)

@lashknife, dat is helemaal nie onlogisch ik wil namelijk afdwingen dat die id alleen effect heeft op een ul, anders kan je die id ook op een div,span,table, ... gaan hangen. en dat is niet de bedoeling. Maar zonder die ul erbij kan natuurlijk ook, het blijft uw verantwoordelijkheid waar ge het zet natuurlijk.
N

NaaiT

Legacy Member
het menu begint een beetje te lukken:
http://www.klep2mania.be/Portfolio/

De code zal mss wel nog niet echt optimaal zijn, maar dit is dan ook de eerste keer dat ik mn layout in css maak ;) Ik heb wel nog een probleempje ivm spacers: aangezien het menu een variabele lengte moet hebben, ben ik verplicht om de rest ook te laten aanpassen aan het menu.
Als je eens kijkt naar mn site: onder 'about me' eindigt de header, en begint het variabele gedeelte. Dit heeft nu 'informatica' & 'mijn werk' als grootte, maar deze menu's kunnen beiden expanderen. Normaal komen daaronder nog de menu's 'links', 'questions' en 'contact', maar deze eerste 2 zijn overschreven door de 2 variabele menu's. De rest van mn layout moet dus ook nog aangepast worden, zodanig dat dit opgelost geraakt. Kheb die height zo al overal gezet, en het is soms gelukt in IE maar niet in mozilla.

Any suggestions?
thx :)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan