table?quote:Op zondag 4 oktober 2009 21:06 schreef daReaper het volgende:
als ik nou deze html heb:
[ code verwijderd ]
Hoe zorg ik er dan voor dat de tekst netjes naast de radiobutton komt te staan? In FF krijg ik het wel voor elkaar, maar IE wil absoluut niet wat ik wil.
ongeveer zo dus:
o Dit is de tekst die over
meerdere regels doorloopt
maar op alle regels is
geïndent.
Nee ik zet mijn vraagtekens bij het indelen van een rij als lijst. Ik zou het dan nog eerder onder tabulaire data scharen (tab delimited).quote:Op woensdag 30 september 2009 17:05 schreef Roy_T het volgende:
[..]
Je verwart nu semantiek met de standaard rendering van browsers, terwijl ze niets met elkaar te maken hebben.
Die <p> een breedte meegeven en float:left geven misschien?quote:Op zondag 4 oktober 2009 21:06 schreef daReaper het volgende:
als ik nou deze html heb:
[ code verwijderd ]
Hoe zorg ik er dan voor dat de tekst netjes naast de radiobutton komt te staan? In FF krijg ik het wel voor elkaar, maar IE wil absoluut niet wat ik wil.
ongeveer zo dus:
o Dit is de tekst die over
meerdere regels doorloopt
maar op alle regels is
geïndent.
Ik heb een zodanige afkeer van tabellen dat ik die dingen alleen gebruik als er geen andere oplossing is. Je kunt erover discussieren of het een lijst moet zijn, maar een tabel is wmb geen optie. Een tabel is niet fatsoenlijk te stylen. Of iig, ik heb er altijd ruzie mee. En ik durf te stellen dat ik wel enige CSS-kennis heb.quote:Op zondag 4 oktober 2009 22:08 schreef Swetsenegger het volgende:
[..]
Nee ik zet mijn vraagtekens bij het indelen van een rij als lijst. Ik zou het dan nog eerder onder tabulaire data scharen (tab delimited).
Het ligt natuurlijk ook aan het ontwerp of je wegkomt met een rijtje <a>'s achter elkaar.quote:Verder weet ik dat je uren slap kan lullen of het nu tussen <ul> tags moet met een berg CSS of gewoon een rijtje hrefs achter elkaar kan zetten waarbij het uiteindelijk voor de functionaliteit geen ruk uitmaakt.
Goed renderen en goed geindexeerd worden is idd ook belangrijk. Belangrijker dan de vraag of je twee linkjes wel of niet als lijst moet zien.quote:Zolang ik een website heb die perfect rendert in IE7,8 firefox 3, safari 4, chrome en Opera 10 op 3 verschillende OS' EN goed geindexeerd wordt door google zal semantiek me voor dat rijtje links aan mijn reet roesten eigenlijk. Semantiek is mooi, maar laten we in godsnaam niet doorslaan en als we twee linkjes naast elkaar hebben dit gaan betitelen als 'lijst'. Kom op zeg.
In een semantische discussie is dat geen argument natuurlijkquote:Op zondag 4 oktober 2009 23:09 schreef Light het volgende:
[..]
Ik heb een zodanige afkeer van tabellen dat ik die dingen alleen gebruik als er geen andere oplossing is. Je kunt erover discussieren of het een lijst moet zijn, maar een tabel is wmb geen optie. Een tabel is niet fatsoenlijk te stylen. Of iig, ik heb er altijd ruzie mee. En ik durf te stellen dat ik wel enige CSS-kennis heb.
Uiteraard, als je echt 'knoppen' wil is het sowieso al handiger om een stijlbaar element te pakken.quote:Het ligt natuurlijk ook aan het ontwerp of je wegkomt met een rijtje <a>'s achter elkaar.
Dat is eigenlijk wat ik bedoel. Ik denk dat er de laatste jaren iets te strak gepredikt wordt met betrekking tot de 'tabellen zijn evil', 'STANDAARDEN VERDOMME!!!!' en 'Semantiek is King' discussies. Als jij met een simpel tabelletje crossbrowser precies dat kan doen wat je nodig hebt op jouw website moet je dat niet willen omzetten naar een ander, wellicht semantisch iets correcter, methode die bv weer meer styling nodig heeft.quote:Goed renderen en goed geindexeerd worden is idd ook belangrijk. Belangrijker dan de vraag of je twee linkjes wel of niet als lijst moet zien.
quote:Op maandag 5 oktober 2009 09:03 schreef Swetsenegger het volgende:
Als jij met een simpel tabelletje crossbrowser precies dat kan doen wat je nodig hebt op jouw website moet je dat niet willen omzetten naar een ander, wellicht semantisch iets correcter, methode die bv weer meer styling nodig heeft.
Wil het graag voor je uitvogelen, het lukt me nu alleen (niet meer) uit mn hoofd en ik zit op een openbare, alleen van een browser voorziene, computer.quote:
met flow elementen.quote:Op maandag 5 oktober 2009 11:58 schreef woopehh het volgende:
Iemand enig idee hoe ik dit voor alle browsers (IE<6 hoeft niet) voor elkaar krijg? (zonder quirksmode)
[ afbeelding ]
Flow elementen??quote:Op maandag 5 oktober 2009 12:29 schreef Swetsenegger het volgende:
[..]
met flow elementen.
Dus een relatief gepositioneerd header element met een vaste hoogte
dan 2 div's met left flow (of de linker flow:left; en de rechter flow:right;) en een overflow op de linker layer.
Dan een relatief gepositioneerde footer (vergeet de clear:both niet in de CSS)
quote:
1 2 3 4 5 6 7 8 9 10 11 | flow:left; height:500px; width:25%; } .right{ flow:left; height:500px; overflow:auto; } |
Ah, DAT vertelde je er niet bij. 100% height van het canvas ga je niet redden zonder nasty hacks of met.... tabellen.quote:Op maandag 5 oktober 2009 12:33 schreef woopehh het volgende:
Oja nog vergeten.. het totaal moet dus 100% height zijn..
Ja, vrij essentieel inderdaad en bedacht me iets te laat dat dat niet echt duidelijk werd in de tekening.quote:Op maandag 5 oktober 2009 12:37 schreef Swetsenegger het volgende:
[..]
Ah, DAT vertelde je er niet bij. 100% height van het canvas ga je niet redden zonder nasty hacks of met.... tabellen.
Dat iedereen vooral een eigen mening moet hebben, maar die instelling is tegenwoordig toch echt niet meer overeind te houden in de beroepspraktijk (ja, ik weet het, dit is een hobbyforum).quote:
Jaquote:Op maandag 5 oktober 2009 12:47 schreef woopehh het volgende:
[..]
Ja, vrij essentieel inderdaad en bedacht me iets te laat dat dat niet echt duidelijk werd in de tekening.
Bedoel je niet float ipv flow trouwens?
Dus je denkt dat de gemiddelde commerciele ontwikkelaar voor 5 linkjes liever een stuk css ontwikkeld dan gewoon 5 linkjes achter elkaar zet als er geen 'knop' idee noodzakelijk is? Ik denk van niet en ik geef 'm groot gelijk.quote:Op maandag 5 oktober 2009 16:49 schreef Roy_T het volgende:
[..]
Dat iedereen vooral een eigen mening moet hebben, maar die instelling is tegenwoordig toch echt niet meer overeind te houden in de beroepspraktijk (ja, ik weet het, dit is een hobbyforum).
Sterker nog: dat weet ik wel zeker.quote:Op maandag 5 oktober 2009 19:12 schreef Swetsenegger het volgende:
Dus je denkt dat de gemiddelde commerciele ontwikkelaar voor 5 linkjes liever een stuk css ontwikkeld dan gewoon 5 linkjes achter elkaar zet als er geen 'knop' idee noodzakelijk is? Ik denk van niet en ik geef 'm groot gelijk.
Daar zijn wel oplossingen voor. Even uit m'n hoofd: html en body een height: 100% meegeven. De container waar de site in moet komen ook een height: 100% en een margin-bottom van min de footerhoogte. Als laatste elementen in de container zet je een clearfooter (met dezeflde hoogte als de footer) en de footer zelf. De clearfooter moet voorkomen dat er tekst door de footer kan lopen (vanwege de negatieve margin-bottom van de container).quote:Op maandag 5 oktober 2009 12:53 schreef woopehh het volgende:
Weet er iemand trouwens wel een manier om het zonder quirksmode aan te zetten voor elkaar te krijgen? Liever wat hackjes dan dat of tabellen/frames :p
Tja das fijn. Ik heb andere ervaringen. Wat wil je nu bereiken met dit soort stupide oneliners?quote:
Semantiek is simpelweg voor interpretatie vatbaar. En een website hooft echt niet semantisch correct te zijn om te valideren.quote:Op maandag 5 oktober 2009 19:31 schreef snkr-xxx het volgende:
Voordat HTML 5 overal ondersteund wordt zijn we wel weer een tijdje verder..
Al werk ik nu ook niet in HTML 4 maar in XHTML 1 dus waarschijnlijk ga ik eerder over op XHTML 2.
Ik persoonlijk ben gewoon iemand die er van houdt net werk af te leveren, dus ik werk graag semantisch en met Doctype Strict en alles ook valid. Maar goed, ik ben hiervoor opgeleid, heb hier plezier in en mijn werkgever hecht hier ook erg veel waarde aan.
Moet zeggen dat als bijv front enden je beroep is, dat dit toch echt wel aspecten zijn die een hedendaagse werkgever van je verwacht hoor. Je zal er raar van opkijken.
Nog een reden die ik aan kan dragen voor het niet willen van die scrollbalk? (Het is niet voor mezelf)quote:Op maandag 5 oktober 2009 19:40 schreef Light het volgende:
[..]
Daar zijn wel oplossingen voor. Even uit m'n hoofd: html en body een height: 100% meegeven. De container waar de site in moet komen ook een height: 100% en een margin-bottom van min de footerhoogte. Als laatste elementen in de container zet je een clearfooter (met dezeflde hoogte als de footer) en de footer zelf. De clearfooter moet voorkomen dat er tekst door de footer kan lopen (vanwege de negatieve margin-bottom van de container).
Height zou ook min-height kunnen zijn, dat weet ik niet zeker meer. Als je menu en content een andere achtergrond wilt geven, moet je eens zoeken op faux columns.
--
Oh, ik lees nu dat de content-div een scrollbalk moet krijgen bij teveel tekst. Punt 1, dat wil je niet.
Als je het toch doet, zul je waarschijnlijk naar javascript moeten grijpen om de hoogte van de content-div in te stellen. Met alleen css ga je dat niet redden, voor zover ik weet althans.
Het kan wel:quote:Op maandag 5 oktober 2009 11:58 schreef woopehh het volgende:
Iemand enig idee hoe ik dit voor alle browsers (IE<6 hoeft niet) voor elkaar krijg? (zonder quirksmode)
[ afbeelding ]
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 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="nl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Work in progress.</title> <link rel="stylesheet" href="default.css" type="text/css" media="screen"/> </head> <body> <div id="header"> </div><!-- einde #header --> <div class="navigation container"> <div id="navigation"> <ul> <li>Optie 05</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> <li>Optie 01</li> </ul> </div><!-- einde #navigation --> </div><!-- einde .navigation container --> <div class="content container"> <div id="content"> <p> Horem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div><!-- einde #content --> </div><!-- einde .content container --> <div id="footer"> </div><!-- einde #footer --> </body> </html> CSS /* RESET CSS */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0 none; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1.6; font-family: inherit; text-align: left; vertical-align: baseline; } a img, :link img, :visited img { border: 0 none; } ol, ul { list-style: none; } a { text-decoration: none; border: 0 none; } body { font-family: Helvetica, Arial; font-size: 62.5%; } /* DIV BASICS */ body { height: auto; width: 100%; background: yellow; } #header { height: 200px; width: 100%; background: black; position: fixed; background: red; z-index: 5; } #navigation, #content { width: 100%; height: auto; position: absolute; margin: 200px 0 0 0; padding: 0 0 20px 0; z-index: 0; } .navigation, .content { height: auto; position: absolute; } .navigation { width: 25%; margin: 0 75% 0 0; } .content { width: 75%; margin: 0 0 0 25%; } #footer { background: green; height: 20px; width: 100%; position: fixed; top: 100%; margin: -20px 0 0 0; } /* DIV SPECIFICS */ #content { } /* ETC. */ |
Tip: open 'm niet met IE. En al helemáál niet met IE6. Scheelt je een hoop frustraties.quote:Op maandag 5 oktober 2009 21:39 schreef n8n het volgende:
[..]
Het kan wel:
[ afbeelding ]
[ code verwijderd ]
Getest onder Safari 4, Opera 10 & Firefox 3.5
En ja ik gebruik een reset css maar dat is een andere discussie
Trekken 7 en 8 'm ook niet dan, want dat is wel zorgelijkquote:Op maandag 5 oktober 2009 22:15 schreef Dhr.Donder het volgende:
[..]
Tip: open 'm niet met IE. En al helemáál niet met IE6. Scheelt je een hoop frustraties.
is browsershots.org down dan?quote:Op dinsdag 6 oktober 2009 10:27 schreef n8n het volgende:
Kan iemand trouwens ff een screenshot onder IE7/8 produceren? Heb er nu zelf geen mogelijkheid toe en ben wel benieuwd
Kan op mijn eigen computer niet van internet gebruik maken en op deze geen website hosten, mede omdat de ftp-poort geblokkerd isquote:
Jij stelt een vraag, ik geef antwoord. Validatie is gewoon overrated; ik kan een site bouwen met tabellen waar Google e.d. niets mee kunnen en die prima valideert. Maar dat is nog geen reden om het te doen.quote:Op maandag 5 oktober 2009 20:11 schreef Swetsenegger het volgende:
Tja das fijn. Ik heb andere ervaringen. Wat wil je nu bereiken met dit soort stupide oneliners?
...En dan toch doen heh..quote:Op dinsdag 6 oktober 2009 11:12 schreef Roy_T het volgende:
Dan hoef ik verder niet uit te leggen waar HTML voor is (betekenis geven aan data, niet de weergave ervan op een grafische manier).
Haha ja het was dus wél de bedoeling dat het in ie6 zou werkenquote:Op maandag 5 oktober 2009 22:15 schreef Dhr.Donder het volgende:
[..]
Tip: open 'm niet met IE. En al helemáál niet met IE6. Scheelt je een hoop frustraties.
Dan ook een tip voor jou: maak je site zo dattie perfect werkt in standard-compliant browsers en IE7 en IE8, en zorg dat'ie in IE6 opzich wel bruikbaar, maar heb schijt aan glitches en layout-imperfecties.quote:Op dinsdag 6 oktober 2009 13:37 schreef woopehh het volgende:
[..]
Haha ja het was dus wél de bedoeling dat het in ie6 zou werken
Retorische vragen ontgaan je blijkbaar.quote:Op dinsdag 6 oktober 2009 11:12 schreef Roy_T het volgende:
[..]
Jij stelt een vraag, ik geef antwoord.
Dat was dan ook geen punt van mijquote:Validatie is gewoon overrated; ik kan een site bouwen met tabellen waar Google e.d. niets mee kunnen en die prima valideert. Maar dat is nog geen reden om het te doen.
Wijs me even aan waar ik precies zeg dat semantiek uberhaupt NIET belangrijk is? Ik zeg dat semantiekquote:Semantiek is zoveel meer belangrijker dan validatie, etc. Als je dat niet wilt snappen, prima.
En als jij niet wil snappen dat het gewoon voor kan komen dat je 5 linkjes achter elkaar zet omdat je... 5 linkjes nodig hebt zonder dat je daar een lijst omheen gaat bouwen INCLUSIEF css omdat ik anders simpelweg 5 linkjes onder elkaar krijgt in plaats van naast elkaar zoals het bedoeld was hoef ik je niet uit te leggen dat er zoiets bestaat als rendement.quote:Dan hoef ik verder niet uit te leggen waar HTML voor is (betekenis geven aan data, niet de weergave ervan op een grafische manier).
Omdat #sidebar ul in de weg staat.quote:Op woensdag 7 oktober 2009 21:56 schreef Banzaiaap het volgende:
Verdorie, dacht dat ik wel wat wist van CSS maar het schiet hier nu een beetje te kort.![]()
http://youtubehd.banzaidesign.nl
De box rechtsonderin, met de "Want to Share?" header erboven, zit naar beneden verschoven. Why?
Niet in IE getest, dus gewoon lekker in Firefox of Safari openen.
Okee even kijken, die heb ik wel hoor, maar zelfs daarmee kon ik het niet vinden..quote:Op donderdag 8 oktober 2009 02:32 schreef Dhr.Donder het volgende:
[..]
Omdat #sidebar ul in de weg staat.
Had je deze nog niet?
Omdat je alle elementen uit de natuurlijke float haalt.quote:Op maandag 12 oktober 2009 17:38 schreef Banzaiaap het volgende:
Hmm, waarom krijgt de OL in de comments div geen hoogte door de content die er in zit?
http://youtubehd.banzaidesign.nl/gymkhana-awesome/
Hij collapsed nu gewoon die hele div..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | display: block; position: fixed; top: 10px; left: 10px; height: 40px; z-index: 999; background-color: red; border:1px solid black; } #content { Position: relative; } |
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |