DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Als je zou willen dat alles mee schaalt wel.quote:Op zondag 14 mei 2006 15:00 schreef Da_Koen het volgende:
[..]
Thx, dat is een duidelijk verhaal.
Maar waarom gebruikt men vaak width:4em;?? Heeft dit enkel te maken met het handmatig aanpassen van de fontsize in de browser? Dat de afstanden dan goed blijven?
edit:
Het beste zou dus zijn om je hele site in "em" te maken ipv "px"?
http://webshop.xploise.nl/test/menu.htm
Bovenstaand voorbeeld is prima in FF. In zowel Opera als Internet explorer, zit er ruimte tussen de submenu's en ontbreekt de onderste border bij het laatste child. Het laatste wordt met een DOM object opgelost, maar werkt dusduidelijk niet op IE en Opera
Alle CSS en javascript staat in de html. Misschien dat iemand wat tips heeft om het menuutje crossbrowser mooi te krijgen.
Bovenstaand voorbeeld is prima in FF. In zowel Opera als Internet explorer, zit er ruimte tussen de submenu's en ontbreekt de onderste border bij het laatste child. Het laatste wordt met een DOM object opgelost, maar werkt dusduidelijk niet op IE en Opera
Alle CSS en javascript staat in de html. Misschien dat iemand wat tips heeft om het menuutje crossbrowser mooi te krijgen.
1 ding: in opera 9 (beta 1) zit er geen ruimte tussen de submenu's. Wel geen border onderinquote:Op maandag 15 mei 2006 17:37 schreef Swetsenegger het volgende:
http://webshop.xploise.nl/test/menu.htm
Bovenstaand voorbeeld is prima in FF. In zowel Opera als Internet explorer, zit er ruimte tussen de submenu's en ontbreekt de onderste border bij het laatste child. Het laatste wordt met een DOM object opgelost, maar werkt dusduidelijk niet op IE en Opera
Alle CSS en javascript staat in de html. Misschien dat iemand wat tips heeft om het menuutje crossbrowser mooi te krijgen.
Beta browsers trek ik me nog maar even niets van aanquote:Op maandag 15 mei 2006 20:08 schreef the_disheaver het volgende:
[..]
1 ding: in opera 9 (beta 1) zit er geen ruimte tussen de submenu's. Wel geen border onderin
Ik ben een stuk verder, menu komt nu volledig uit database. de nesting wordt correct geparsed dus dat is het probleem niet.
Een en ander ziet er nu prima uit onder FF en Opera. Onder IE is echter de background transparant ( ) en en het menu valt steeds weg bij de onmouseover. Alleen als ik heeeeeeeeeeeeeel traag schuif gaat het goed.
) en en het menu valt steeds weg bij de onmouseover. Alleen als ik heeeeeeeeeeeeeel traag schuif gaat het goed.url: http://webshop.xploise.nl/cart.php
relevante CSS
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | list-style: none; } #vertnav{ padding:0; margin:0; } #vertnav ul { padding: 0; margin:0; list-style: none; width:167px; z-index:99; position:absolute; overflow:visible; } #vertnav li { position: relative; cursor:pointer; cursor:hand; margin:0; width:171px; padding:0 2px; background-color:rgb(212,213,225); border-bottom:1px solid rgb(138, 139, 152); display:block; height:20px; line-height:20px; } #vertnav a { text-decoration:none; display:block; width:171px; height:20px; } #vertnav a:hover, #vertnav li:hover{ background-color:rgb(179,181,196); } #vertnav ul li:hover, #vertnav ul li a:hover{ background-color:rgb(179,181,196); } #vertnav ul, #vertnav ul ul, #vertnav ul ul ul{ display:none; position:absolute; top:0; left:175px; } /* non-IE browsers see this */ #vertnav ul li>ul, #vertnav ul ul li>ul{ margin-top:0; } #vertnav li:hover ul ul, #vertnav li:hover ul ul ul, #vertnav li:hover ul ul ul ul, #vertnav li:hover ul ul ul ul ul{ display:none; } #vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul, #vertnav ul ul ul li:hover ul, #vertnav ul ul ul ul li:hover ul{ display:block; } li>ul { top: -1px; left: -5px; } /* Win IE only \*/ * html #vertnav li{float:left;} /* end holly hack */ |
[ Bericht 1% gewijzigd door Swetsenegger op 15-05-2006 23:37:28 ]
Iemand een idee?
Ik krijg hetzelfde effect in Firefox wanneer ik de z-index weghaal in #vertnav ul
-edit-
Opgelost. Het menu schuift over een floating div, die ik nog een 'position: relative' had mee gegeven. Position uit die float gehaald en het werkt naar behoren
[ Bericht 55% gewijzigd door Swetsenegger op 16-05-2006 08:46:29 (Opgelost) ]
Ik krijg hetzelfde effect in Firefox wanneer ik de z-index weghaal in #vertnav ul
-edit-
Opgelost. Het menu schuift over een floating div, die ik nog een 'position: relative' had mee gegeven. Position uit die float gehaald en het werkt naar behoren
[ Bericht 55% gewijzigd door Swetsenegger op 16-05-2006 08:46:29 (Opgelost) ]
Voor wat het waard is, in IE 7 beta werkt het ook goed!quote:Op dinsdag 16 mei 2006 08:37 schreef Swetsenegger het volgende:
Iemand een idee?
Ik krijg hetzelfde effect in Firefox wanneer ik de z-index weghaal in #vertnav ul
-edit-
Opgelost. Het menu schuift over een floating div, die ik nog een 'position: relative' had mee gegeven. Position uit die float gehaald en het werkt naar behoren
Ik was naar je probleem aan het kijken terwijl dat je die al had opgelost
Waarom is de div #inhoud niet tot de onderkant? maar issie 100% van het browser venster + header?
Ik snap niet waarom die dat doet
-edit-
linkje zou handig zijn
www.danielpunt.nl/akxifo
[ Bericht 19% gewijzigd door super-muffin op 17-05-2006 11:17:34 ]
Ik snap niet waarom die dat doet
-edit-
linkje zou handig zijn
www.danielpunt.nl/akxifo
[ Bericht 19% gewijzigd door super-muffin op 17-05-2006 11:17:34 ]
als height 100% is, is hij de waarde van je hele website-toonbare deel van je browser. maar omdat je daarboven een header hebt, begint die div lager. terwijl hij wel de 100% hoogte heeft.
op mijn resolutie klopt je site helemaal niet verwacht ik, maar dat kan misschien door de nog-in-ontwikkeling-fase komen
er is geen manier om 100% - header te doen. tenzij je javascript zou gebruiken maar dat is weer omslachtig.
edit
in jouw geval zou ik de rode-witte-rode invulling een backgroundimage maken van 1px hoog, en die repeat-y doen in je body background, en je background-color dezelfde kleur maken als wat het nu is.
dan maak je je top-div daarbovenop met daarin je banner, zodat daar iig de background niet meer zichtbaar is. beetje spelen met afbeeldingmaat wanneer nodig.
waar je dan mee zit is de transparante afbeelding onderin je content-div. die zou je misschien in een eigen div kunnen zetten met een z-index lager dan je content-text. ofzo. het wordt een beetje spelen met float.
[ Bericht 37% gewijzigd door Desdinova op 17-05-2006 11:33:25 ]
op mijn resolutie klopt je site helemaal niet verwacht ik, maar dat kan misschien door de nog-in-ontwikkeling-fase komen
er is geen manier om 100% - header te doen. tenzij je javascript zou gebruiken maar dat is weer omslachtig.
edit
in jouw geval zou ik de rode-witte-rode invulling een backgroundimage maken van 1px hoog, en die repeat-y doen in je body background, en je background-color dezelfde kleur maken als wat het nu is.
dan maak je je top-div daarbovenop met daarin je banner, zodat daar iig de background niet meer zichtbaar is. beetje spelen met afbeeldingmaat wanneer nodig.
waar je dan mee zit is de transparante afbeelding onderin je content-div. die zou je misschien in een eigen div kunnen zetten met een z-index lager dan je content-text. ofzo. het wordt een beetje spelen met float.
[ Bericht 37% gewijzigd door Desdinova op 17-05-2006 11:33:25 ]
As a rule, I never touch anything more sophisticated and delicate than myself.
ik zou ook iig je alfabet-letters wat aanpassen in je lexicon. als ik nu op de E of de K ga staan blijven ze verspringen namelijk :'0quote:Op woensdag 17 mei 2006 11:10 schreef super-muffin het volgende:
Waarom is de div #inhoud niet tot de onderkant? maar issie 100% van het browser venster + header?
Ik snap niet waarom die dat doet
-edit-
linkje zou handig zijn
www.danielpunt.nl/akxifo
Als je er overheen gaat worden de letters groter, daardoor verspringt ie een regel naar beneden, dus staat mijn muis er niet meer op, en verspringt ie weer terug naar zn oorspronkelijke plekje, en begint het hele verhaal opnieuw
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
[i]What would life be like without rhethorical questions?[/i]
hoe doe ik het met javascript? Ik ken zelf niet echt veel javascript, maar kan het wel gebruiken.quote:Op woensdag 17 mei 2006 11:25 schreef Desdinova het volgende:
als height 100% is, is hij de waarde van je hele website-toonbare deel van je browser. maar omdat je daarboven een header hebt, begint die div lager. terwijl hij wel de 100% hoogte heeft.
op mijn resolutie klopt je site helemaal niet verwacht ik, maar dat kan misschien door de nog-in-ontwikkeling-fase komen
er is geen manier om 100% - header te doen. tenzij je javascript zou gebruiken maar dat is weer omslachtig.
Tenzij iemand anders nog een oplossing heeft maar wat klopt er niet op jou resolutie? Ik zit hier op 1024x768 en daar is alles oké.
qu63: dat weet ik, daar moet ik nog wat aan doen ja.
Om compleet te zijn... een percentuele hoogte betekent dat de hoogte bepaald wordt door het parent-element met 'layout' (wat betekent dat dat element een opgegeven breedte, hoogte of positionering moet kennen, eventueel gewoon hard 'position: relative;')..
In het geval van het element #content lijkt dat de viewbox te zijn, dat is het browservenster, eigenlijk te vertalen met het element HTML (in msie dacht ik de BODY tag, iig in quirky mode)
Volgens mij is dit probleem op te lossen door je element #head een position: relative; te geven:
In het geval van het element #content lijkt dat de viewbox te zijn, dat is het browservenster, eigenlijk te vertalen met het element HTML (in msie dacht ik de BODY tag, iig in quirky mode)
Volgens mij is dit probleem op te lossen door je element #head een position: relative; te geven:
| 1 2 3 | position: relative; } |
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
ik zit op een laptop met 1400xnogiets. maar op 1600x1200 zal hij het ook niet prima doen. hij is geen 100% bij mij, maar houdt ongeveer 200px eerder op. in internet explorer dan. heb hem niet bekeken met opera/netscape/firefox
ik zou het probleem niet oplossen met javascript. je zou dan een of andere functie moeten hebben die het toonbare deel van je browser checkt (is 100%), en aan de hand daarvan de div-height aanpast door je header-height eraf te trekken.
ik zou het probleem niet oplossen met javascript. je zou dan een of andere functie moeten hebben die het toonbare deel van je browser checkt (is 100%), en aan de hand daarvan de div-height aanpast door je header-height eraf te trekken.
As a rule, I never touch anything more sophisticated and delicate than myself.
nee, position: relative doet niks.quote:Op woensdag 17 mei 2006 11:37 schreef RM-rf het volgende:
Om compleet te zijn... een percentuele hoogte betekent dat de hoogte bepaald wordt door het parent-element met 'layout' (wat betekent dat dat element een opgegeven breedte, hoogte of positionering moet kennen, eventueel gewoon hard 'position: relative;')..
In het geval van het element #content lijkt dat de viewbox te zijn, dat is het browservenster, eigenlijk te vertalen met het element HTML (in msie dacht ik de BODY tag, iig in quirky mode)
Volgens mij is dit probleem op te lossen door je element #head een position: relative; te geven:
[ code verwijderd ]
Is er echt geen andere oplossing
Trouwens, nog iets geks, het achtergrondplaatje in #content doet het niet in FF
Dat kwam om dat #box een height heeft van 600px; dat is nu al opgelost.quote:Op woensdag 17 mei 2006 11:38 schreef Desdinova het volgende:
ik zit op een laptop met 1400xnogiets. maar op 1600x1200 zal hij het ook niet prima doen. hij is geen 100% bij mij, maar houdt ongeveer 200px eerder op. in internet explorer dan. heb hem niet bekeken met opera/netscape/firefox
dan heb je waarschijnlijk backslashes gebruikt (\) in plaats van forward (/) bij je link naar het plaatje
As a rule, I never touch anything more sophisticated and delicate than myself.
quottjes omheen?quote:Op woensdag 17 mei 2006 12:43 schreef super-muffin het volgende:
nee, hij staat gewoon in de root.
[ code verwijderd ]
dan wordt je div waarschijnlijk niet geshowd (IE is wat flexibeler daarin). zet er maar even een border-width, border-style en border-color bij. effe tjekke wattie doet.
As a rule, I never touch anything more sophisticated and delicate than myself.
De DIV word wel geshowd, want het is die #content waar ik het hier boven over had
Als ik de property fixed weghaal doetie het wel.
-edit-
moet je kijken, als ik mn browserventer zo schaal komtie in eens te voorschijn
Wat is dit nu voor gekkigheid.
[ Bericht 41% gewijzigd door super-muffin op 17-05-2006 14:02:24 ]
Als ik de property fixed weghaal doetie het wel.
-edit-
moet je kijken, als ik mn browserventer zo schaal komtie in eens te voorschijn
Wat is dit nu voor gekkigheid.
[ Bericht 41% gewijzigd door super-muffin op 17-05-2006 14:02:24 ]
zet er nou een border omheen dan zie je wat je div uitspookt
dan zie je wat je div uitspookt
As a rule, I never touch anything more sophisticated and delicate than myself.
okee. omdat je de shorthand versie gebruikt moet je waarschijnlijk alles defineren in de juiste volgorde:
background: <color><image><repeat><attachment><position>
background: <color><image><repeat><attachment><position>
As a rule, I never touch anything more sophisticated and delicate than myself.
voor javascript kan je beter naar het javascript topic, kan ik je ook niet mee verder helpen helaas..
en anders als backgroundimage in je body. want dit is in mijn ervaring een regelrechte CSS hel. en ik heb er nooit degelijk antwoord op gekregen ook.
in iexplore zou je iig gewoon een height: 100%; op kunnen geven. en voor ff/ns/opera min-height: 100%;. maar zodra je content eroverheen loopt gaat het de zeik in bij ff/ns/opera.
en anders als backgroundimage in je body. want dit is in mijn ervaring een regelrechte CSS hel. en ik heb er nooit degelijk antwoord op gekregen ook.
in iexplore zou je iig gewoon een height: 100%; op kunnen geven. en voor ff/ns/opera min-height: 100%;. maar zodra je content eroverheen loopt gaat het de zeik in bij ff/ns/opera.
As a rule, I never touch anything more sophisticated and delicate than myself.
Als je puur visueel die kolommen tot onder door wilt laten lopen zou ik kiezen voor een oplossing als faux columns.quote:Op woensdag 17 mei 2006 16:25 schreef super-muffin het volgende:
dan nog steeds niet.
Maar ik wil eerst even dat andere probleem oplossen, dan kan ik verder.
De gene waar voor ik die website maak wil dat die tot de onderkant loopt. Het moet dus, hoe kan ik het oplossen met Javascript of moet ik heel de code anders in elkaar zetten?
Dat heb ik nu ook toegepast op mijn eigen website, maar dat is gewoon 1 lange div, daar staat geen header boven zoals in dit gevalquote:Op woensdag 17 mei 2006 16:39 schreef Desdinova het volgende:
voor javascript kan je beter naar het javascript topic, kan ik je ook niet mee verder helpen helaas..
en anders als backgroundimage in je body. want dit is in mijn ervaring een regelrechte CSS hel. en ik heb er nooit degelijk antwoord op gekregen ook.
in iexplore zou je iig gewoon een height: 100%; op kunnen geven. en voor ff/ns/opera min-height: 100%;. maar zodra je content eroverheen loopt gaat het de zeik in bij ff/ns/opera.
Dit zou moeten werken:quote:Op woensdag 17 mei 2006 19:29 schreef super-muffin het volgende:
[..]
Dat heb ik nu ook toegepast op mijn eigen website, maar dat is gewoon 1 lange div, daar staat geen header boven zoals in dit geval
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | width:750px; height: 100%; overflow:hidden; background-color: #0099ff; margin: 0px auto; text-align:left; background: url(header.jpg) top left no-repeat;} #content { width:400px; height: 87%; margin-bottom: 0; float:left; background: #fff url(bg-content.gif) no-repeat right bottom;} |
#box op een height van 100% gezet met een overflow hidden. Vervolgens de #content een height geven van ongeveer 90%.
Volkomen afhankelijk van de afmetingen van de viewport van de gebruiker, en daarom een ongeschikte oplossing imo.quote:Op zaterdag 20 mei 2006 01:52 schreef Castor het volgende:
[..]
Dit zou moeten werken:
[ code verwijderd ]
#box op een height van 100% gezet met een overflow hidden. Vervolgens de #content een height geven van ongeveer 90%.
Het is een simpele oplossing die met de meest gangbare resoluties prima werkt. Het enige is dat je bij een kleinere viewport niet de complete background image ziet. Niet echt onoverkomelijk imho.quote:Op zondag 21 mei 2006 11:14 schreef CraZaay het volgende:
[..]
Volkomen afhankelijk van de afmetingen van de viewport van de gebruiker, en daarom een ongeschikte oplossing imo.
