[DIV] position:absolute verschilt tussen IE en Mozilla. - Softwareontwikkeling

woensdag 18 augustus 2004 21:42

Acties:

I void warranty

Topicstarter

Geachte Webdevers,

Ik probeer bij uw clan te komen, maar heb nog veel te leren, en veel te googlen. Ik ben de hele dag bezig geweest met het maken van een webpage. Deze web page is te vinden op http://ks.spugium.net/willem/front3.html

Mijn probleem ligt bij de positie van de topic titel. In dit geval nog "Willem, onze Man." deze heeft een absolute positie, maar deze absolute positie verschilt tussen IE en Mozilla. Ik kan zelfs na een dag zoeken niet bepalen waar dit ligt, en hoe ik dit mogelijk kan verhelpen. Voor de duidelijkheid een deel van de source...

<BODY leftmargin="0" topmargin="0" marginheight=0 marginwidth=0>

<pre><img><img2><br><img3></pre>
<div STYLE="position:absolute; top:15px; left:420px; width:310px; height:25px" align="bottom"><h2>Willem, onze Man.</h2></div>
<div STYLE="position:absolute; top:250px; left:10px; width:90px; height:270px">Home en andere nav links</div>
<div STYLE="position:absolute; top:200px; left:200px; width:600px; height:400px">Main Tekst van pagina.</div>

</BODY>

Ik hoop dat ik het niveau van de Webdev niet naar beneden breng door het posten van deze vraag. Maar ik kan het echt niet vinden.

(tegen faq in:)
Mvg. Four

[ Voor 22% gewijzigd door Four op 18-08-2004 21:43 ]

dwyslexy != luiheid !! Taalpuristen sla uw slag

woensdag 18 augustus 2004 21:46

Acties:

Not Pingu

Dumbass ex machina

Ten eerste wordt je H2 tag niet afgesloten. Zou ik even doen.
Ten tweede: stel de margin-top property van de H2 tag eens in op 0 ofzo

Ten derde, je gebruikt attributes (bijv. leftmargin in de body) en inline CSS, ik kan je van harte aanraden om dat soort dingen allemaal in een extern CSS bestand te pleuren. Een stuk overzichtelijker.

Certified smart block developer op de agile darkchain stack. PM voor info.

woensdag 18 augustus 2004 22:09

Acties:

Verwijderd

Four schreef op 18 augustus 2004 @ 21:42:
Ik hoop dat ik het niveau van de Webdev niet naar beneden breng door het posten van deze vraag. Maar ik kan het echt niet vinden.

Goed onderbouwde vraagstellingen brengen geen enkel niveau omlaag, en met de vraagstelling is niets mis

woensdag 18 augustus 2004 22:11

Acties:

Four

I void warranty

Topicstarter

Ik volg dat CSS nog niet helemaal. Maar daar zal ik mee aan de slag gaan. Verder, die H2 wordt toch wel af gesloten? Ik zie een: <h2>Willem, onze Man.</h2>

Ten slot, de margin-top:0 moet toch als volgt in gevoerd worden:
<div STYLE="position:absolute; top:15px; left:420px; width:310px; height;25px" margin-top:"0"><h2>Willem, onze Man.</h2></div> ??

Dit heeft nog geen effect, al heb ik idd na het zoeken op deze margin-top gevonden dat mozilla standaard zo'n 20 pixels pakt. Dus daar ligt me probleem neem ik aan. Ik ga nog even met die margin-top:0.

Ik voer die margin toch wel goed in zo?

dwyslexy != luiheid !! Taalpuristen sla uw slag

woensdag 18 augustus 2004 22:12

Acties:

crisp

Devver

Pixelated

Browsers hanteren eigen ingebouwde styles voor veel elementen waaronder elementen; die wijken nog wel eens af tussen browsers onderling, maar kan je overrulen in je eigen stylesheet (denk dan aan paddings, margins en font-sizes).
Verder zou ik zoals gunp01nt terecht aandraagt ook zoveel mogelijk attributen vervangen door CSS, en het liefst buiten je opmaak plaatsen.

zoiets:

Cascading Stylesheet:

body {
  margin: 0px;
  padding: 0px;
}
div1 {
  position: absolute;
  top:15px;
  left:420px;
  width:310px;
  height:25px;
}
div1 h2 {
  margin: 0px;
}

HTML:

<body>
<div id="div1">
  <h2>titeltje</h2>
</div>
<!-- etcetera -->
</body>

in plaats van de div zou je ook de position direct op de h2 kunnen zetten. position:absolute is echter niet in alle gevallen de beste oplossing...

ik zou die plaatjes trouwens gewoon als background zetten.

[ Voor 47% gewijzigd door crisp op 18-08-2004 22:20 ]

Intentionally left blank

woensdag 18 augustus 2004 22:26

Acties:

Four

I void warranty

Topicstarter

Ok, bedankt voor ze zeer complete informatie!

Ik ga er even mee aan de gang en zal nog wel laten weten hoe ik het uit eindelijk allemaal op gelost heb. Ik zit nog wel een beetje met die margin-top:"0" welk ik nog niet helemaal kan plaatsen, maar na uit gezocht te hebben hoe de css verder moet (kwa extern bestand en zo) zal ik nog even laten weten hoe het uit eindelijk gegaan is. Maar ik weet zeker dat margin-top:"0" dan geen "uitdaging" meer is voor deze uber noob

Nogmaals bedankt voor de info

Edit:
Als ik het goed begrijp, moet ik enkel nog in de head iets van
<LINK rel="Stylesheet" href="/path/naar/stylesheet.css" type="text/css">
zetten, en dan kan ik gewoon crisp's voorbeeld volgen... Mogelijk voor mede noobs in de toekomst handig dit stukje info erbij te hebben.

Edit2:
Even terug op die CSS, maar dit: http://kroonsteen.spugium.net/willem/css/front3.html wil niet werken. Nou begin in imho het niveau wel naar beneden we werken, maar dit klopt toch kwa source??

[ Voor 47% gewijzigd door Four op 18-08-2004 22:53 ]

dwyslexy != luiheid !! Taalpuristen sla uw slag

woensdag 18 augustus 2004 22:58

Acties:

Not Pingu

Dumbass ex machina

Four schreef op 18 augustus 2004 @ 22:11:
Ik volg dat CSS nog niet helemaal. Maar daar zal ik mee aan de slag gaan. Verder, die H2 wordt toch wel af gesloten? Ik zie een: <h2>Willem, onze Man.</h2>

Verrek, ik zou toch zweren dat die </h2> er toenstraks niet stond

Mja, heb te snel willen posten denk ik

Four schreef op 18 augustus 2004 @ 22:11:

Ten slot, de margin-top:0 moet toch als volgt in gevoerd worden:
<div STYLE="position:absolute; top:15px; left:420px; width:310px; height;25px" margin-top:"0"><h2>Willem, onze Man.</h2></div> ??

Hier probeer je margin-top als HTML attribute toe te voegen (maar ook weer een beetje als CSS erdoorheen). Het is gewoon een CSS property, en dan is de syntax als volgt:
<div style="margin-top: 0px;">

Maar geef die div gewoon een class of een id en zet een regel in je CSS.
CSS kan extern via de <link> tag in de <head> van je pagina, maar ook intern binnen <style></style> tags in je header.

Certified smart block developer op de agile darkchain stack. PM voor info.

woensdag 18 augustus 2004 23:06

Acties:

Four

I void warranty

Topicstarter

Gunp01nt schreef op 18 augustus 2004 @ 22:58:
Hier probeer je margin-top als HTML attribute toe te voegen (maar ook weer een beetje als CSS erdoorheen [...]

Stom stom stom, Idd ik probeer html/css samen te gebruiken, als ik het zo terug lees ziet het er flink stom uit

Maar geef die div gewoon een class of een id en zet een regel in je CSS.
CSS kan extern via de <link> tag in de <head> van je pagina, maar ook intern binnen <style></style> tags in je header.

Die class heb ik gegeven. Ik heb het enkel nog niet voor elkaar, http://kroonsteen.spugium.net/willem/css/front3.html
Ik begijp als noob zijnde niet wat ik fout doe, maar ben aan t googlen

[ Voor 4% gewijzigd door Four op 18-08-2004 23:07 ]

dwyslexy != luiheid !! Taalpuristen sla uw slag

woensdag 18 augustus 2004 23:09

Acties:

crisp

Devver

Pixelated

hier alvast een linkje: http://www.w3schools.com/css/

Intentionally left blank

woensdag 18 augustus 2004 23:31

Acties:

Four

I void warranty

Topicstarter

Dank u, dank u.

Maar nu eerst slaap

. Morgen zal ik die w3 even gaan door spitten.

Nogmaals bedankt voor de extreme hoeveelheid reacties.

Edit:
Stiekem toch nog maar even door gegaan

Heb die css nu wel gaande, maar die margin-top:0; wil nog niet echt. Ik heb nog steeds een verschil tussen IE en Mozilla van zo'n 10 pixels.

Wat doe ik verkeerd in CSS file? De plaatsing van de tekst klopt. Zodoende begrijp ik nog niet helemaal waarom me probleem niet is opgelost. Mijn CSS file:

div.div1 {
position:absolute;
top:15px;
left:420px;
width:310px;
height:25px;
margin-top:0px;
}

Dan moeten Mozilla en IE toch de zelfde locatie geven voor de tekst van de titel?

Ook de body gaat niet goed. Ik heb het volgende als body in me CSS:

body {
leftmargin:0px;
topmargin:0px;
marginheight:0px;
marginwidth:0px;
}

Maar hij geeft toch een margin. Kunnen jullie nog meer suggesties geven? Met name die Tutorials zijn goed

Maar ik dacht dat ik die goed gevolgd had voor de body.

[ Voor 108% gewijzigd door Four op 19-08-2004 00:38 ]

dwyslexy != luiheid !! Taalpuristen sla uw slag

donderdag 19 augustus 2004 01:26

Acties:

Intru

Dat komt omdat je hier geen css margins in je css zet, maar html. Volgens mij was je hier zelf ook wel vanzelf achter gekomen, aangezien je het verder in je css wel goed doet.

Cascading Stylesheet:

body {
    margin-left:0;
    margin-top:0;
}

Dit is volgens mij wat je bedoeld.

edit:
Verder nog even een tip, het is handiger om je div's namen te geven die meer beschrijven. Div1/2/3 zegt nogal weinig, en als je site groter wordt kan dit het overzicht weghalen. Je kan ze bijvoorbeeld 'header' of 'menu' noemen. Verder zou ik nog ff je html doorkijken, hier kan ook zeker nog het een en ander aan verbeterd worden

[ Voor 39% gewijzigd door Intru op 19-08-2004 01:33 ]

donderdag 19 augustus 2004 09:08

Acties:

Four

I void warranty

Topicstarter

Intru schreef op 19 augustus 2004 @ 01:26:
Dat komt ... verbeterd worden

Dank je. Dit werkt idd met die margins. Dit zijn van die dingen waar je als noob uren naar kan zoeken.

Bedankt!

Ik zit nog wel steeds met die positie:absolute, Ik blijf een verschil houden tussen Mozilla en IE. Die margin-top wordt nu toch gebruikt?

Doe ik hiermee nog iets anders verkeerd? Ik krijg die titel nml niet op dezelfde positie...

edit:
http://kroonsteen.spugium.net/willem/css/front3.html

[ Voor 8% gewijzigd door Four op 19-08-2004 09:31 ]

dwyslexy != luiheid !! Taalpuristen sla uw slag

donderdag 19 augustus 2004 09:51

Acties:

Schonhose

Retro Icoon

Wat ik wel zie is dat je <h2> element niet in de div zit.

Afbeeldingslocatie: http://home.wanadoo.nl/dennis.mooibroek/willem.png

Wanneer je deze verwijderd (dus <h2></h2> even weghalen) dan staat het wel goed.
Misschien wat CSS toevoegen aan <h2> element? Ik heb er wat mee zitten spelen maar ik kom er niet uit.

offtopic:
Komt ook door de pijn van mijn enkel momenteel dat ik niet helder kan nadenken

"The thing under my bed waiting to grab my ankle isn't real. I know that, and I also know that if I'm careful to keep my foot under the covers, it will never be able to grab my ankle." - Stephen King
Quinta: 3 januari 2005

donderdag 19 augustus 2004 10:31

Acties:

Verwijderd

Een paar tips. Definieer altijd zowel 'padding' als 'margin'. Beide properties kunnen 4 waarden aannemen:

code:

1	margin:top right bottom left;

... die kun je afzonderlijk wijzigen als in:

code:

1
2
3

margin-top:3px;
margin-left:2em;
/* etc. */

Zoals crisp al noteerde wil je voor het BODY element, zowel 'padding' als 'margin' op '0' zetten. Als je '0' gebruikt is er geen reden om er een eenheid, zoals 'px', 'em', 'pt', 'pc' et cetera erachter te zetten.

Verder kun je de plaatjes beter met de 'background' property definieren en positioneren. Het zou handig zijn als je wat leert over doctypes en doctype switching. Iets leren over semantiek en structuur kan ook geen kwaad. En verder nog iets over web standaarden.

Uiteraard is het erg overweldigend en waarschijnlijk teveel informatie voor in het begin, maar doorlezen kan geen kwaad.

donderdag 19 augustus 2004 10:42

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Schonhose schreef op 19 augustus 2004 @ 09:51:
(dus <h2></h2> even weghalen) dan staat het wel goed.)

ik zou het precies andersom doen, juist die H2 laten staan, maar die DIV weghalen, je kunt dan het H2 element laten positioneren. (eigenlijk behoort dat volgens mij ook gewoon een H1 te zijn, nl de eerste belangrijke titel in de Body-content)

overigens heeft een Hx (Heading-element) wel een eigen margin en padding, en die verschilt inderdaad per browser, wat mogelijk een verklaring is voor afwijkingen, definieer deze en je zit gebeiteld...

HTML:

1 2	<h1 style="position:absolute; top:15px; left:420px; width:310px; height:25px; margin:0; padding: 0;">Willem, onze Man.</h1>

offtopic:
agree met Gordijnstok, een goed gestelde vraag kan eigenlijk bijna nooit dom zijn

[ Voor 5% gewijzigd door RM-rf op 19-08-2004 11:01 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

donderdag 19 augustus 2004 10:53

Acties:

RwD

kloonikoon

HTML en CSS referentie: http://www.handleidinghtml.nl/

donderdag 19 augustus 2004 11:01

Acties:

Four

I void warranty

Topicstarter

Ik dank u allen voor de waardevolle reply's. Het lag idd bij de margin van de H2 tag, en ik ben er mee aan het spelen. Ook de links naar standaarden en dergelijke zijn ZEER waardevol.

Ik ga verder spelen. Het probleem is opgelost, dus ik zal mod's verzoeken om slotjes.

Mvg,
Four

dwyslexy != luiheid !! Taalpuristen sla uw slag

donderdag 19 augustus 2004 11:06

Acties:

BtM909

Watch out Guys...

Four schreef op 19 augustus 2004 @ 11:01:
Ik dank u allen voor de waardevolle reply's. Het lag idd bij de margin van de H2 tag, en ik ben er mee aan het spelen. Ook de links naar standaarden en dergelijke zijn ZEER waardevol.

Ik ga verder spelen. Het probleem is opgelost, dus ik zal mod's verzoeken om slotjes.

Mvg,
Four

Topic worden bijna nooit gesloten als het probleem is opgelost... Als niemand meer reageert, dan zakt het topic vanzelf wel naar beneden.

_{btw: groeten onder elke post hoeft niet meer; )}

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 19 augustus 2004 11:20

Acties:

Schonhose

Retro Icoon

RM-rf schreef op 19 augustus 2004 @ 10:42:
[...]

ik zou het precies andersom doen, juist die H2 laten staan, maar die DIV weghalen, je kunt dan het H2 element laten positioneren. (eigenlijk behoort dat volgens mij ook gewoon een H1 te zijn, nl de eerste belangrijke titel in de Body-content)

overigens heeft een Hx (Heading-element) wel een eigen margin en padding, en die verschilt inderdaad per browser, wat mogelijk een verklaring is voor afwijkingen, definieer deze en je zit gebeiteld...
HTML:
1
2
<h1 style="position:absolute; top:15px; left:420px; 
width:310px; height:25px; margin:0; padding: 0;">Willem, onze Man.</h1>
offtopic:
agree met Gordijnstok, een goed gestelde vraag kan eigenlijk bijna nooit dom zijn

Oeps, kijk daar ging ik de mist in... ik had een .h2 gedefineerd i.p.v. een H2 (zonder punt dus) bij het spelen met de CSS.

Jouw oplossing is nog mooier idd. Verwijder de div en positioneer gewoon de H2 element. Het is onlogisch om een div en een H2 te gebruiken. Tenminste ik zie hier geen voordelen in.

[ Voor 3% gewijzigd door Schonhose op 19-08-2004 11:20 ]

"The thing under my bed waiting to grab my ankle isn't real. I know that, and I also know that if I'm careful to keep my foot under the covers, it will never be able to grab my ankle." - Stephen King
Quinta: 3 januari 2005