z-index probleempje? - Softwareontwikkeling

woensdag 14 november 2012 19:32

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Beste devvers,

Waarschijnlijk een beginnersvraagje, maar desondanks breek ik er toch al een tijdje mijn hoofd over.
Ben bezig met een website. Het volgende wil ik graag realiseren. Een javascript image slider (de Nivo slider) al sachtergrond voor mn header met daar boven op de navigatie en een logo. (zie http://www.ladolceverhuur.nl/home/ als voorbeeldje). Om een of andere reden doet de z-index helemaal niks. Kan niet vinden of ik de divs nou verkeerd heb genest of what ever. Als jullie iets kunnen vinden graag!

Voor m'n code: jsfiddle

[ Voor 86% gewijzigd door Verwijderd op 15-11-2012 18:43 ]

woensdag 14 november 2012 20:06

Acties:

0 Henk 'm!

C0rnelis

Ik snap je probleem niet, afgaande op je geleverde code krijgen we iets te zien als dit.

Heb je gekeken naar de gebruikte CSS op je voorbeeld site ? Wat heb je daaruit kunnen ontdeken, leren, af kunnen kijken of wat snap je daar niet van? Ik geef je een hint, vergeet z-index en bekijk position.

Je lijkt inderdaad een sluit-div-tag te veel te hebben voor de sluit-body-tag (wellicht zie ik dat verkeerd), maar dat heeft hoogstwaarschijnlijk niets te maken met je probleem.

Andere opmerkingen:
• html hoort het buitenste element te zijn, dus direct na de doctype declaratie en sluit er dus ook mee af
• Zet de title-tag in je head
• Zet de meta-tag met charset informatie als eerste element binnen head

quote: http://htmlpurifier.org/d...html#fixcharset-internals
Fortunately for us, the characters we need to write the META are in ASCII, which is pretty much universal over every character encoding that is in common use today. So, all the web-browser has to do is parse all the way down until it gets to the Content-Type tag, extract the character encoding tag, then re-parse the document according to this new information.

• In het cssmenu zie je een verandering in kleur bij mouseover, maar die margin-right in de zwarte kleur lijkt me niet gewenst?
• Zet de volgende keer een testcase online, zodat iedereen je probleem volledig kan bekijken en niet resources mist die jij wel hebt ... (css, nivoslider.js, afbeeldingen, etc), zie bijvoorbeeld http://jsfiddle.net/
• Je gebruikt <img> en <img/> door elkaar, niet erg consistent
• Je hebt tweemaal een element in je html met hetzelfde ID, http://ryanfait.com/artic...-between-ids-and-classes/

woensdag 14 november 2012 21:06

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

C0rnelis schreef op woensdag 14 november 2012 @ 20:06:Andere opmerkingen:
• html hoort het buitenste element te zijn, dus direct na de doctype declaratie en sluit er dus ook mee af
• Zet de title-tag in je head
• Zet de meta-tag met charset informatie als eerste element binnen head

Even voor jou: in HTML5 is dit allemaal toegelaten. Het document is wat deze drie punten betreft gewoon valid. M.a.w., de <html>, <head> en <body> tags zijn optioneel. De meta met charset ook? Nou ja, de quote die je aanhaalt is correct, maar je mag de charset ook weglaten als de server een correcte charset geeft in een response-header.

[ Voor 18% gewijzigd door _Thanatos_ op 14-11-2012 21:09 ]

日本！🎌

woensdag 14 november 2012 21:51

Acties:

0 Henk 'm!

C0rnelis

Enig bewijs voor je stellingen?

quote: http://dev.w3.org/html5/s...age.html#the-html-element
Contexts in which this element can be used:
• As the root element of a document.
• Wherever a subdocument fragment is allowed in a compound document.
Content model:
• A head element followed by a body element.

quote: http://dev.w3.org/html5/s...ge.html#the-title-element
Contexts in which this element can be used:
• In a head element containing no other title elements.

quote: http://dev.w3.org/html5/s...ge.html#document-metadata
Content model:
• If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content.
• Otherwise: One or more elements of metadata content, of which exactly one is a title element.

Even voor de goede orde:
Ik probeer met de opmerking over de charset-meta-tag alleen aan te geven dat het verstandig is om deze zo vroeg mogelijk in de html te plaatsen indien deze manier gebruikt wordt om het charset aan te duiden. In de website waar de quote vandaan komt wordt ook apache/htaccess/php opties genoemd als voorkeur (oftewel, stuur het mee in de headers in plaats van de payload), omdat anders de browser de html dus twee keer parsed: eens om het charset te vinden en, indien gevonden, overnieuw begint met dit gevonden charset in het achterhoofd.

[ Voor 31% gewijzigd door C0rnelis op 14-11-2012 21:54 ]

woensdag 14 november 2012 21:59

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

In de quotes die je aanhaalt staat nergens dat er buiten <html> niks mag staan, of dat je een <head> of <body> moet gebruiken. Bij mijn weten zijn die inderdaad niet verplicht. Een meta-tag met charset is helemaal niet zo belangrijk want dat is zoiets als iemand een lepel met een onbekende substantie te voeren en pas na het doorslikken te zeggen dat het vergif was. Charsets geef je door in je headers, je head tag is daar een leuke extra bij.

Dit alles gezegd hebbende is de HTML van de topicstarter inderdaad niet netjes en dient die opgeschoond te worden voordat er überhaupt naar problemen gekeken kan worden. Het is best mogelijk dat het specifiek hierdoor komt, bijvoorbeeld door het triggeren van quirks mode.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

woensdag 14 november 2012 22:04

Acties:

0 Henk 'm!

C0rnelis

Hoe interpreteer je dan de eerste quote? Er staat toch dat een html element de root is van een document, dit betekent per definitie dat dit element geen parent heeft. En dat de inhoud van een html element bestaat uit een head element, gevolgd door een body element lijkt mij vrij duidelijk ..

woensdag 14 november 2012 23:45

Acties:

0 Henk 'm!

Caelorum

Het zit hem in de woorden "can be used", dus hoeft niet. Daarnaast kan je best de html tag weglaten, maar als je het niet doet dan moet je wel de head en body tags meegeven als ik mij niet vergis.
Overigens is dit gewoon puur een stukje backwards compatibility met pagina's uit voor 1992 als ik het internet mag geloven. Omdat voor de HTML1.0 standaard de html, body en head tags niet bestonden. Ook in HTML4 zijn ze blijkbaar al optioneel.
Internet Explorer gooit echter roet in het eten door wat quirks te gaan vertonen. IE9 (en wss ook IE10) renderen HTML5-tags niet correct als je de html tag weglaat.

donderdag 15 november 2012 12:45

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

Er staat toch dat een html element de root is van een document, dit betekent per definitie dat dit element geen parent heeft.

Dat klopt, een html-element is altijd de root met als enige twee childnodes een head- en body-element.

Maar een element is geen tag. Tags die optioneel zijn, maar wel "nodig" zijn, worden inferred. Je verwardt dus tags met elementen, of sourcecode met de DOM.

日本！🎌

donderdag 15 november 2012 17:06

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Oke, in ieder geval bedankt voor de tips. Heb mn code even beetje geordend en alles in jsfiddle gezet. Hoop dat het voor jullie nu wat overzichtelijker is.

Wat ik eigenlijk wil bereiken heb ik even snel gephotoshopped:

Dropbox linkje

Misschien kan iemand mij nu vertellen wat ik fout doe? Het heeft namelijk tot op zekere hoogte gewerkt zoals ik wilde met z-index, maar dat krijg ik dus niet meer terug..

Bedankt!

donderdag 15 november 2012 22:09

Acties:

0 Henk 'm!

C0rnelis

Verwijderd schreef op donderdag 15 november 2012 @ 17:06:
Oke, in ieder geval bedankt voor de tips. Heb mn code even beetje geordend en alles in jsfiddle gezet. Hoop dat het voor jullie nu wat overzichtelijker is.

Wat ik eigenlijk wil bereiken heb ik even snel gephotoshopped:

Dropbox linkje

Misschien kan iemand mij nu vertellen wat ik fout doe? Het heeft namelijk tot op zekere hoogte gewerkt zoals ik wilde met z-index, maar dat krijg ik dus niet meer terug..

Bedankt!

C0rnelis schreef op woensdag 14 november 2012 @ 20:06:
Heb je gekeken naar de gebruikte CSS op je voorbeeld site ? Wat heb je daaruit kunnen ontdeken, leren, af kunnen kijken of wat snap je daar niet van? Ik geef je een hint, vergeet z-index en bekijk position.

maandag 19 november 2012 14:00

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Kijk dat is het hem dus een beetje. Ik snap de css/html van de voorbeeldpagina wel, aangezien ze het in mijn ogen ongeveer op dezelfde manier doen als ik, maar kan niet vinden waarom het bij mij niet werkt zoals het hoort.

Buiten het hele feit van de voorbeeldwebsite en nivo slider om, zou mijn html/css toch moeten werken? Alle position's zijn relative en de toegewezen z-index zou in ieder geval 'iets' met de layout moeten doen?

//Edit, oke probleem opgelost. Heel dom maar goed. Voor mensen die in de toekomst eventueel tegen dit probleem aan lopen. Als je divs ordent met z-index, moet je nog wel de positie zo aanpassen dat de elementen elkaar overlappen. In mijn geval moest ik top:-200px; toepassen op de slider, en toen verdween hij wel op de achtergrond. Zelfde soort oplossing voor het logo.

[ Voor 30% gewijzigd door Verwijderd op 19-11-2012 16:18 ]

woensdag 21 november 2012 16:08

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Verwijderd schreef op maandag 19 november 2012 @ 14:00:
Kijk dat is het hem dus een beetje. Ik snap de css/html van de voorbeeldpagina wel, aangezien ze het in mijn ogen ongeveer op dezelfde manier doen als ik, maar kan niet vinden waarom het bij mij niet werkt zoals het hoort.

Dan ga je een kleine test-case opbouwen en stap voor stap je code uitbouwen totdat het wel / niet werkt wat je wilt bereiken. We gaan niet zondermeer je problemen oplossen nav een complete code-dump.

Als je verder niet zo heel veel verstand hebt van HTML / CSS dan moet je je op die specifieke onderdelen wat gaan verdiepen.

Over het hele HTML gebeuren (check desnoods de WhatWG specificatie), dit is gewoon valid (HTML5

)

HTML:

<!doctype html>
<!-- I &hearts; HTML5 -->
<title>Anne&#8217;s Blog</title>
<link rel="stylesheet" href="/css/oldschool">
<link rel="alternate" type="application/atom+xml" href="/feeds/weblog">
<h1><a href="/">Anne van Kesteren</a></h1>
<nav><a href="/about">About</a> <a href="/archives">Archives</a> <a href="/test/">Test</a></nav>

Title is verplicht, html, body, head niet (want de elementen bepalen zelf al of het header of body elementen zijn

)

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.