Archief - CSS: Absolute Positioning in Opera

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

daboykefke

Legacy Member
http://www.daboykefke.be/index.php?n=about

in IE en Mozilla Firefox werkt alles zoals het moet, maar Opera doet moeilijk :) tekst verspringt als je erover gaat (ook als er geen mouseover voor gedefineerd is) en pfff kvind het niet :)

iemand die kan helpen? anders los ik het wel anders op :)

edit: en als je ondertussen fouten vindt in mijn Engels, zeg het gerust want mijn Engels is verre van perfect :D
L

LunchBox

Legacy Member
je moet niet overdrijven met absolute positioning he - gebruik divs om je algemene zaken te positioneren (layout + modules) maar niet om 3 woorden die naast mekaar staan elk apart ge plaatsen.. dan mist het weer volledig zijn doel. bovendien is er meer dan margins; top / left zijn veel interessanter om te gebruiken.

Code: 
div.aboutSelectedInterests{
background-color:#A8B3C6;
border:1px solid #4B4C5A;
color:#4B4C5A;
margin-left:110px;
margin-top:50px;
padding:2px;
position:absolute;
width:100px;
}
div.aboutSelectedProfile{
background-color:#A8B3C6;
border:1px solid #4B4C5A;
color:#4B4C5A;
margin-top:50px;
padding:2px;
position:absolute;
width:100px;
}
div.aboutSelectedSkills{
background-color:#A8B3C6;
border:1px solid #4B4C5A;
color:#4B4C5A;
margin-left:220px;
margin-top:50px;
padding:2px;
position:absolute;
width:100px;
}
div.aboutShowInterests{
background-color:#A8B3C6;
border:1px solid #4B4C5A;
color:#4B4C5A;
font-weight:bold;
margin-left:110px;
margin-top:70px;
padding:2px;
position:absolute;
width:100px;
}
div.aboutShowProfile{
background-color:#A8B3C6;
border:1px solid #4B4C5A;
color:#4B4C5A;
font-weight:bold;
margin-top:70px;
padding:2px;
position:absolute;
width:100px;
}
div.aboutShowSkills{
background-color:#A8B3C6;
border:1px solid #4B4C5A;
color:#4B4C5A;
font-weight:bold;
margin-left:220px;
margin-top:70px;
padding:2px;
position:absolute;
width:100px;
}
als ik hier zie dat je voor drie woorden die er hetzelfde uitzien en gewoon naast mekaar staan steeds een nieuwe klasse maakt met praktisch dezelfde inhoud ben je dus al volledig verkeerd bezig.

bovendien is heel de layout zelf nog met tables opgebouwd, ofwel ben je nog in "the process of rebuilding it" maar zoals je nu werkt is het dus precies het tegenovergestelden van hoe je zou moeten werken. layout = divs, tabulaire content = tables.
d

daboykefke

Legacy Member
how jongens, ff rustig ;) ik weet ook wel dat er in mijn css nog veeeeel te veel staat, maar ik zorg altijd eerst dat alles werkt, en dan verfijn ik (doe dat altijd zo, is een gewoonte)

en als ik met top, left, .. werk dan krijg ik die handel nooit goed voor gelijk welke resolutie (omdat mijn site gecentreerd is)..

ik ben hier ook maar om bij te leren, moest ik alles kunnen had ik de vraag niet gesteld :) feit is, in Internet Explorer en Firefox werkt het, Opera niet
D

DarkBone

Legacy Member
Moraal van het verhaal:
voor hetgeen jij wilt bereiken gebruik je doodgewoon een tabel!
breek dus je kop niet over die positionering
L

LunchBox

Legacy Member
wel en ik zeg, werk met top/left ipv hoofdzakelijk margins.. weinig brains nodig om je in te beelden dat wanneer je grote groep mensen in een grid wil uitlijnen en zegt -- steek allemaal je arm uit naar de persoon naast je je sneller fouten hebt in positioning van de grid dan wanneer je zegt, jij gaat op die uitgemeten stip staan - jij op die stip enzovoort.

het argument dat je niet met 'top'/'left' kan werken in een gecentreerde layout is trouwens onwaar.. mijn tip is zelfs, maak eerst alles links tegen de kant - en zet alles dan nogmaals binnen een center-div die je volgens de welgekende "50% negative margin"-methode naar het midden van je scherm brengt.

@darkbone: indeed - als je layout toch volledig met tables is gemaakt, breek dan je hoofd niet over zaken die men her en der in de gangen van het webdesign hoofdconsulaat mompelt ivm div positioning etc.
d

daboykefke

Legacy Member
mja, altijd die tabellen :) ik hou het toch bij divs, en zal blijven zoeken totdat die klerezooi werkt :D (als het in de andere browsers werkt moet het mogelijk zijn in Opera ook)

ps: al eens op die woorden geklikt? en dan over de rest gegaan? het is meer dan enkel 3 woordjes positioneren hé
d

daboykefke

Legacy Member
LunchBox zei:
wel en ik zeg, werk met top/left ipv hoofdzakelijk margins.. weinig brains nodig om je in te beelden dat wanneer je grote groep mensen in een grid wil uitlijnen en zegt -- steek allemaal je arm uit naar de persoon naast je je sneller fouten hebt in positioning van de grid dan wanneer je zegt, jij gaat op die uitgemeten stip staan - jij op die stip enzovoort.

het argument dat je niet met 'top'/'left' kan werken in een gecentreerde layout is trouwens onwaar.. mijn tip is zelfs, maak eerst alles links tegen de kant - en zet alles dan nogmaals binnen een center-div die je volgens de welgekende "50% negative margin"-methode naar het midden van je scherm brengt.

@darkbone: indeed - als je layout toch volledig met tables is gemaakt, breek dan je hoofd niet over zaken die men her en der in de gangen van het webdesign hoofdconsulaat mompelt ivm div positioning etc.
Klik om te vergroten...

ik ga dit eens uitzoeken.. bedankt voor de tip
d

daboykefke

Legacy Member
mag gesloten worden, kga het anders aanpakken :p (wijs besluit hé ;))
D

DarkBone

Legacy Member
Ik trek men woorden van daarnet in, ge moet geen tabel gebruiken, ik ging ervan uit dat het titeltjes waren waaronder data in rijen kwam. Fout dus.

Wat jij moet doen is een lijst gebruiken, en vervolgens die lijst opmaken. Da's het meest semantisch correcte, en zal je (indien goed gebruikt) geen problemen mogen opleveren in alle browsers.

http://www.alistapart.com/articles/taminglists/

Positionering is hier absoluut overbodig eigenlijk.
b

b0bbY

Legacy Member
nog een tip:

als je al je divs absoluut wilt positioneren is het voldoende 1 keer

div {psoition:absolute;} te declareren. Dat spaart weer enkele bytes uit ;)

Het is ontegensprekelijk goed dat je met CSS wilt leren werken, maar probeer het dan ook meteen goed te leren.

en wat de tables betreft. Ik zie geen tabulaire data op de site dus ook geen nood aan tables. Ik zie wel een navigatielijst, een subnavigatie en een content layer!

en zoals hierboven al aangegeven gebruik je het attribuut margin foutief. Margin is om een bepaalde afstand tussen 2 elementen te declareren. Padding gebruik je om binnen een bepaald element een afstand tussen de inhoud en de rand van datzelfde element te creëren. Om elementen te positioneren gebruik je position, left, right, top en bottom (al dan niet gecomibneerd met floats)

grtz

edit: idd padding gebruikt is juist ;) post edited
d

daboykefke

Legacy Member
b0bbY zei:
nog een tip:

als je al je divs absoluut wilt positioneren is het voldoende 1 keer

div {psoition:absolute;} te declareren. Dat spaart weer enkele bytes uit ;)

Het is ontegensprekelijk goed dat je met CSS wilt leren werken, maar probeer het dan ook meteen goed te leren.

en wat de tables betreft. Ik zie geen tabulaire data op de site dus ook geen nood aan tables. Ik zie wel een navigatielijst, een subnavigatie en een content layer!

en zoals hierboven al aangegeven gebruik je de attributen margin en padding foutief. Margin is om een bepaalde afstand tussen 2 elementen te declareren, padding gebruik je om binnen een bepaald element een afstand tussen de inhoud en de rand van datzelfde element te creëren. Om elemeneten te positioneren gebruik je position, left, right, top en bottom (al dan niet gecomibneerd met floats)

grtz
Klik om te vergroten...

hehe, mijn margin gebruik ik idd foutief, mijn padding (dacht ik) niet :) die padding gebruik ik zodat mijn tekst niet tegen de border zou komen
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