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.
Je kan de breedte niet bepalen omdat het a element een inline element is. Zet de a op 'display: block' en je kunt de breedte wel bepalenquote:Op dinsdag 13 februari 2007 01:14 schreef Geqxon het volgende:
Klein putnje alleen, als ik er het a-element voor gebruik kan ik de breedte niet bepalen.
Daar waar het een blok ik zag ik het in eerste instantie als paragraaf, misschien een beetje dom. Maar so far is een paragraaf het enige dat werkt
Paragraaf als link met onclick, niet doen
Thanksquote:Op dinsdag 13 februari 2007 08:07 schreef CraZaay het volgende:
[..]
Je kan de breedte niet bepalen omdat het a element een inline element is. Zet de a op 'display: block' en je kunt de breedte wel bepalen
Paragraaf als link met onclick, niet doen
Ben een beetje aan het spelen met CSS, aangezien ik op het moment vrij ranzige code maak, gecombineerd met vrij ruwe pagina's. Het kan altijd netter.
Het punt van het attribuut block binnen het display property is echter wel dat hij er een line-break achteraan gooit, iets dat ik eigenlijk totaal niet zoek. Zo'n button maken, doe ik dat eigenlijk wel goed?
[ Bericht 12% gewijzigd door Geqxon op 13-02-2007 09:33:33 ]
Okay ik zat dus zo even mijn myspace aan te passen (lach me maar uit ) in ieder geval dat is ook in CSS en ik wilde net een klikbaar plaatje maken, maar nu komt er een rand om heen... een zwarte.. En nu schijnt dat samen te hangen met dat u{ Maar dat lijkt me sterk want ik neem aan dat dat voor underlined staat...
Kan iemand mij vertellen hoe ik die rand weg kan halen?
Ben totaal een CSS n00b vandaar, maar ik wil het wat beter begrijpen...:
alvast bedankt!
[ Bericht 7% gewijzigd door DutchErrorist op 13-02-2007 15:43:35 ]
) in ieder geval dat is ook in CSS en ik wilde net een klikbaar plaatje maken, maar nu komt er een rand om heen... een zwarte.. En nu schijnt dat samen te hangen met dat u{ 
Maar dat lijkt me sterk want ik neem aan dat dat voor underlined staat...Kan iemand mij vertellen hoe ik die rand weg kan halen?
Ben totaal een CSS n00b vandaar, maar ik wil het wat beter begrijpen...:
alvast bedankt!
[ Bericht 7% gewijzigd door DutchErrorist op 13-02-2007 15:43:35 ]
Hij maakt er een block level element van, en die neemt de beschikbare ruimte in (en dwingt daarmee het volgende item naar de volgende regel).quote:Op dinsdag 13 februari 2007 09:25 schreef Geqxon het volgende:
Het punt van het attribuut block binnen het display property is echter wel dat hij er een line-break achteraan gooit, iets dat ik eigenlijk totaal niet zoek. Zo'n button maken, doe ik dat eigenlijk wel goed?
Staat de button op zich, of in een list ofzo? Of dit de goede manier is, hangt af van de functie. Is het gewoon een link naar een andere pagina, doe het dan gewoon zo (met het a element dus). Daar is het immers voor, los van hoe je het gaa stylen.
Aan de bovenkant van mijn pagina wil ik vier buttons naast elkaar hebben, 200 pixel breed, met een padding van 10 pixels. Deze hebben een href die naar een platte pagina verwijzen, en een onclick die een ajax-functie aanroept, die een bepaalde tekst in een [div] inlaad.quote:Op dinsdag 13 februari 2007 16:04 schreef CraZaay het volgende:
[..]
Hij maakt er een block level element van, en die neemt de beschikbare ruimte in (en dwingt daarmee het volgende item naar de volgende regel).
Staat de button op zich, of in een list ofzo? Of dit de goede manier is, hangt af van de functie. Is het gewoon een link naar een andere pagina, doe het dan gewoon zo (met het a element dus). Daar is het immers voor, los van hoe je het gaa stylen.
het lijkt me sterk dat het komt door u { } en u staat ook niet voor underlined.quote:Op dinsdag 13 februari 2007 15:34 schreef DutchErrorist het volgende:
Okay ik zat dus zo even mijn myspace aan te passen (lach me maar uit ) in ieder geval dat is ook in CSS en ik wilde net een klikbaar plaatje maken, maar nu komt er een rand om heen... een zwarte.. En nu schijnt dat samen te hangen met dat u{ Maar dat lijkt me sterk want ik neem aan dat dat voor underlined staat...
Kan iemand mij vertellen hoe ik die rand weg kan halen?
Ben totaal een CSS n00b vandaar, maar ik wil het wat beter begrijpen...:
alvast bedankt!
probeer eens dit:
a img { border: 0 }
als dat niet werkt, mag ik dan een link.
super-muffin = heldquote:Op dinsdag 13 februari 2007 16:10 schreef super-muffin het volgende:
[..]
het lijkt me sterk dat het komt door u { } en u staat ook niet voor underlined.
probeer eens dit:
a img { border: 0 }
als dat niet werkt, mag ik dan een link.
Nog bedank hé, het werkt namelijk
Haha daar ben ik blij omquote:Op dinsdag 13 februari 2007 16:31 schreef super-muffin het volgende:
haha graag gedaan
zulk soort complimenten moedigen aan om door te gaan met helpen.
Nu je er toch bent, weet jij ook een goede site voor CSS tips, afkortingen etc?
Puur voor CU2 / myspace truukjes? Of CSS in het algemeen?quote:Op dinsdag 13 februari 2007 16:34 schreef DutchErrorist het volgende:
[..]
Haha daar ben ik blij om
Nu je er toch bent, weet jij ook een goede site voor CSS tips, afkortingen etc?
Beide eigenlijkquote:Op dinsdag 13 februari 2007 16:35 schreef Geqxon het volgende:
[..]
Puur voor CU2 / myspace truukjes? Of CSS in het algemeen?
Ik bedoel myspace is een leuk opstapje om te beginnen, maar wil het toch een beetje beter beheren
Voor CU2 had je toch mycu2.nl?
Voor het echte CSS gebruik ik vaak www.w3schools.com en af en toe gigadesign.be
Voor het echte CSS gebruik ik vaak www.w3schools.com en af en toe gigadesign.be
Haha bedanktquote:Op dinsdag 13 februari 2007 16:42 schreef super-muffin het volgende:
Voor CU2 had je toch mycu2.nl?
Voor het echte CSS gebruik ik vaak www.w3schools.com en af en toe gigadesign.be
Maar ik heb geen cu2 of naja een hele oude dus:)
[edit] is er ook 1 specifiek voor myspace want mijn css-lijst is een beetje rommelig en wil hem eens van de grond opbouwen [/edit]
Lijkt mij een mooie kandidaat voor een unordered listquote:Op dinsdag 13 februari 2007 16:07 schreef Geqxon het volgende:
[..]
Aan de bovenkant van mijn pagina wil ik vier buttons naast elkaar hebben, 200 pixel breed, met een padding van 10 pixels. Deze hebben een href die naar een platte pagina verwijzen, en een onclick die een ajax-functie aanroept, die een bepaalde tekst in een [div] inlaad.
List items met daarbinnen de links. Links stylen als button, list items (li's) links floaten (of misschien dat 'display: inline' ook werkt) en klaar is Geqxon
Kan Internet Explorer niet omgaan met :before en :after pseudo-elementen, of doe ik iets verkeerd? In Firefox werkt het prima. Het is ook geen grote ramp, het ziet er visueel alleen mooier uit... Maar ik begin onderhand wel te balen van de uitzonderingen van IE...
IE7 blijkbaar ook niet. Bij Firefox wordt mijn :before elementje perfect weergegeven, maar bij IE7 dus niet. Jammer, het was slechts een detail, maar toch...
Ach, het is niets. Het is een visueel dingetje. Twee gekleurde blokjes voor een bepaald zinnetje dat een actie aan de gebruiker voorstelt. Het staat mooier, maar in IE werkt het gewoon niet, tenzij ik het overal handmatig invoer en daar heb ik geen zin in. Dan maar gewoon zo laten staan. Krijgen de Firefox gebruikers iets extra's, en IE-mensen moeten maar op een houtje bijten.
Al had het mijn navigatie of iets dergelijks danig in de war geschopt had ik er wel wat aan gedaan, maar nu vind ik het wel mooi zo...
Al had het mijn navigatie of iets dergelijks danig in de war geschopt had ik er wel wat aan gedaan, maar nu vind ik het wel mooi zo...
Ik heb wat newbiehulp nodig, volgens mij ben ik css verleerd ofzo
Ik wil aan de linkerkant een vast menu hebben, van boven tot onder aan de pagina met een hoogte van 100% en een breedte van 200px. Er omheen een margin van 5px.
Aan de rechterkant wil ik verschillende groottes aan 'panels' hebben. De pagina is opgedeeld in drie stukken, de panels kunnen 1/3e, 2/3e of de gehele breedte innemen. Hoe krijg ik dat netjes voor elkaar? Zoals je ziet staat het "TV guide" kopje te ver naar onderen, die moet automatisch naar boven schuiven. Verder is het "navigatie" kopje wel 100%, maar zorgt de marge van 5px ervoor dat er alsnog een scrollbar komt. Ik wil dus een hoogte van 100% - 10px hebben. Ook lijnen de 'panels' niet mooi uit, zoals je aan de rechterkant kunt zien.
Ik ga de css maar niet posten omdat ik beter overnieuw kan beginnen. Graag wat basics over hoe ik dit goed kan krijgen
FF ondersteuning maakt op zich niet zoveel uit, het is voor op de desktop. als het maar werkt in IE dus
Ik wil aan de linkerkant een vast menu hebben, van boven tot onder aan de pagina met een hoogte van 100% en een breedte van 200px. Er omheen een margin van 5px.
Aan de rechterkant wil ik verschillende groottes aan 'panels' hebben. De pagina is opgedeeld in drie stukken, de panels kunnen 1/3e, 2/3e of de gehele breedte innemen. Hoe krijg ik dat netjes voor elkaar? Zoals je ziet staat het "TV guide" kopje te ver naar onderen, die moet automatisch naar boven schuiven. Verder is het "navigatie" kopje wel 100%, maar zorgt de marge van 5px ervoor dat er alsnog een scrollbar komt. Ik wil dus een hoogte van 100% - 10px hebben. Ook lijnen de 'panels' niet mooi uit, zoals je aan de rechterkant kunt zien.
Ik ga de css maar niet posten omdat ik beter overnieuw kan beginnen. Graag wat basics over hoe ik dit goed kan krijgen
FF ondersteuning maakt op zich niet zoveel uit, het is voor op de desktop. als het maar werkt in IE dus
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
Ik zeg: Twee grote divs naast elkaar, en daar stop je vervolgend de kleine divjes zoals de indexservice, TV-guide en statistics in.
Hm, zoiets heb ik al. De linkerdiv is absoluut gepositioneerd (waarmee ik dus het probleem krijg dat hij te hoog wordt bij 100%). De body heeft een margin-left van 210px, waardoor de rest van de panels niks met de linkerdiv te maken hebben.quote:Op zaterdag 3 maart 2007 17:12 schreef Geqxon het volgende:
Ik zeg: Twee grote divs naast elkaar, en daar stop je vervolgend de kleine divjes zoals de indexservice, TV-guide en statistics in.
Maar dan blijven alle problemen bestaan. Ik heb even een schemaatje gemaakt, misschien maakt dat het probleem duidelijker:
Handig er bij te vermelden dat de panels niet een vaste plek hebben, dat verschilt per pagina.
Elk rood lijntje moet een 5px marge voorstellen. Blokje 5 moet dus aansluiten op blok 3. Blok 7 moet aansluiten op blok 6 en blok 4.
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
Niet echt CSS, maar toch:
Safari keurt dit pas goed zodra ik colspan="7" verander in colspan="8", terwijl ik zelf toch echt 7 kolommen tel? Iemand tips?
| 1 2 3 4 5 6 7 8 9 10 11 | <tr> <th width="150"><b>Titel 1</b></th> <th width="290" colspan="2"><b>Titel 2</b></th> <th width="80" colspan="2" class="centeralign borderleftright"><b>Titel 3</b></th> <th width="80" colspan="2" class="centeralign borderleftright"><b>Titel 4</b></th> </tr> <tr class="trdark"> <td colspan="7">No records found</td> </tr> </table> |
Safari keurt dit pas goed zodra ik colspan="7" verander in colspan="8", terwijl ik zelf toch echt 7 kolommen tel? Iemand tips?
simpel probleem:
en css formulier
het probleem is zodra er float wordt gebruikt nemen de menu en content div de achtergrond kleur niet meer over van de main div.. en worden ze grijs.. terwijl ze wit moeten blijven..
iemand ?
[ Bericht 0% gewijzigd door buzzer op 24-01-2008 20:26:17 ]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>BaggerUser</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="stylesheet.css" type="text/css" rel="stylesheet" /> </head> <body> <div id='main'> <div id='body'> <div id='container'> <div id='menu'>menu</div> <div id='content'>content</div> </div> </div> </div> </body> </html> |
en css formulier
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | ul,li {list-style-type: none;} body, textarea, input {background-color: #F5F5F5; color: #000000;font: 11px/18px Arial,Tahoma;} #main { background-color: #ffffff; } #body { } #container { } #menu { width: 300px; float: left; } #content { float: left; |
het probleem is zodra er float wordt gebruikt nemen de menu en content div de achtergrond kleur niet meer over van de main div.. en worden ze grijs.. terwijl ze wit moeten blijven..
iemand ?
[ Bericht 0% gewijzigd door buzzer op 24-01-2008 20:26:17 ]
Misschien snapt Safari het wel als je de eerste cell een colspan=1 geeft?quote:Op zondag 4 maart 2007 02:15 schreef Geqxon het volgende:
Safari keurt dit pas goed zodra ik colspan="7" verander in colspan="8", terwijl ik zelf toch echt 7 kolommen tel? Iemand tips?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Je bent sowieso een accolade vergeten aan het einde.quote:Op zondag 4 maart 2007 09:36 schreef BaggerUser het volgende:
simpel probleem:
[ code verwijderd ]
en css formulier
[ code verwijderd ]
het probleem is zodra er float wordt gebruikt nemen de menu en content div de achtergrond kleur niet meer over van de main div.. en worden ze grijs.. terwijl ze wit moeten blijven..
iemand ?
maar je moet dan overflow: auto; aan de parent geven, wat #main is in dit geval
de accolade sotnd er wel maar was niet mee gekopieerd per ongelukquote:Op zondag 4 maart 2007 13:27 schreef super-muffin het volgende:
[..]
Je bent sowieso een accolade vergeten aan het einde.
maar je moet dan overflow: auto; aan de parent geven, wat #main is in dit geval
maar overflow: auto; helpt in firefox idd, maar in ie hlpt het nog niet ? wat is de hack daarvoor ?..
Volgens mij moet je dan een <br /> aan het einde van de #main doen.
Maar dat weet ik niet zeker, ik heb geen IE hier :)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id='body'> <div id='container'> <div id='menu'>menu</div> <div id='content'>content</div> </div> </div> <br class="clear" /> </div> CSS: .clear { clear: both; } |
Maar dat weet ik niet zeker, ik heb geen IE hier :)
gelukt, dankje!quote:Op zondag 4 maart 2007 14:28 schreef super-muffin het volgende:
Volgens mij moet je dan een <br /> aan het einde van de #main doen.
[ code verwijderd ]
Maar dat weet ik niet zeker, ik heb geen IE hier
Ik ben wat aan het knutselen met CSS, en hoop dat iemand mij kan helpen. Pagina wordt gecentreerd weergegeven dmv een supercontainer DIV die voor de achtergrond zorgt. Hierin een container die gecentreerd is en een vaste breedte heeft. De container bevat een header en een footer met daartussen 3 kolommen: left, content, right. Positioneren lijkt goed te gaan, bij een meer dan schermvullende content stretcht alles mooi mee, echter wanneer de content maar een kwart pagina bevat, zweeft de footer ergens halverwege het scherm en zie je onderaan nog een stuk achtergrondkleur die ik ook links en rechts van het te centreren blok heb gebruikt.
Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:
HTML:
CSS
Wie heeft de gouden tip?
Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:
HTML:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="supercontainer"> <div id="container"> <div id="header"></div> <div id="left">menu</div> <div id="right">add</div> <div id="content">tekst</div> <div id="footer"></div> </div> </div> </body> |
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 | display:inline; top:0px; bottom:0px; background-color:#4b2f29; background-image:url(images/dubbelschaduw.gif); background-position:center; background-repeat:repeat-y; margin:0px auto; width:100%; height:100%; } #container { background-color: #fff9cd; border: 0px; color: #333333; margin:0px auto; width:770px; height:100%; } #header { background-color: #fff9cd; background-image:url(images/header.gif); border-bottom: 0px; height:125px; padding:0px; } #left { background-color: #fff9cd; float: left; margin: 0; padding: 5px; width: 125px; } #right { background-color: #fff9cd; border-color: #a27c65; border-style:dashed; border-width:1px; float: right; margin-right:5px; margin-top:20px; padding: 5px; width: 125px; } #content { border-left: 0; border-right: 0; margin-left: 140px; margin-right: 140px; padding:25px; } #footer { border-top: 1px solid gray; clear: both; margin:0px auto; padding:0px 0px 5px 0px; width:770px; height:60px; text-align:center; } |
Wie heeft de gouden tip?
Close to impossible. Er is al genoeg over geschreven her en der, maar ik heb geen enkele versie kunnen vinden die cross-browser precies deed wat 'ie hoorde te doen.
shit, dat ga je niet menen... Geen idee hoe het op een andere visueel nette manier op te lossen. Zul je nog zien dat ik dadelijk mijn content moet gaan overvullen met <br> en dat keer 100quote:Op maandag 5 maart 2007 19:03 schreef CraZaay het volgende:
Close to impossible. Er is al genoeg over geschreven her en der, maar ik heb geen enkele versie kunnen vinden die cross-browser precies deed wat 'ie hoorde te doen.
Als je een oplossing hebt die IE proof is dan ben ik (half) tevreden, ik heb niet het idee dat de doelgroep van mijn site allerlei exotische browsers gebruikt.
Heb je hier wat aan?quote:Op maandag 5 maart 2007 19:01 schreef Coelho het volgende:
Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:
http://www.themaninblue.com/experiment/footerStickAlt/
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
ik ben weer eens vastgelopen...
ben bezig met een klein ajax foto boekje maar het css gedeelde doet totaal noiet wat hjet zou moeten doen.. in FF neit en in IE niet.
even ter visualisatie zie: www.mijnnaam.nl
(zie fotoalbum en speel wat met die pijltjes)
de structuur:
de css file:
hoop dat jullie zien waar he taan lgit heb al diverse vage problem gehad net hiermee... opeens scrollbalken... opeens verschuivende divs maar verder dan dit kwam ik niet..
heb de content div een een ander kleurtje gegeven zodat het probleem nog duidelijker wordt.
tevens gaat de content div onder de menu div zitten en makt zich 100% breed terwijl hij er netjes naast zou moeten...
help!!
(ja ik ben wanhopig 
)
[ Bericht 1% gewijzigd door iteejer op 27-01-2008 10:02:31 ]
ben bezig met een klein ajax foto boekje maar het css gedeelde doet totaal noiet wat hjet zou moeten doen.. in FF neit en in IE niet.
even ter visualisatie zie: www.mijnnaam.nl
(zie fotoalbum en speel wat met die pijltjes)
de structuur:
| 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 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mijn Naam</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="stylesheet.css" type="text/css" rel="stylesheet" /> <script language='javascript' src='javascript/SubmitOnce.js'></script> <script language='javascript' src='javascript/clienthint.js'></script> </head> <body> <div id='main'> <div id='disclaimer'> <a href='http://validator.w3.org/check?uri=referer'>xhtml 1.0</a> | <a href='#'>contact</a> </div> <br /> <div id='body'> <div id='container'> <div id='menu'> <br /> <h4>menu</h4> <p> <img src='a.gif' alt=''/> 26.02.2007 <a href='http://esperanza-bolivia.com'>Esperanza-Bolivia</a> </p> </div> <div id='content_wrapper'> <br /> <div id='content'> <h4>welkom,</h4> <p> <a href="#" onClick='showHint("1")'>Fotoalbum</a> </p> </div> </div> </div> </div> </div> <div id='footer'></div> </body> </html> |
de css file:
| 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 | ul,li {list-style-type: none;} body, textarea, input {background-color: #F5F5F5; color: #000000;font: 11px/18px Arial,Tahoma;} a:active { color: #0984AE; text-decoration: underline; } a:hover { color: #0984AE; text-decoration: none; } a:link { color: #0984AE; text-decoration: underline; } a { color: #0984AE; text-decoration: underline; } h4 { font-size: 15px; } #main { background-color: #ffffff; width: 100%; overflow: auto; } #disclaimer { color: #999999; float: right; text-align: right; } #body { } #container { margin: 0 10px 0 10px; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-top-color: #E2E2E2; } #menu { width: 300px; float: left; } #content_wrapper { min-height: 300px; float: left; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 1px; border-left-style: solid; border-left-color: #E2E2E2; } * html #content_wrapper { height: 300px; } #content_wrapper #content { margin: 0 10px 0 10px; vertical-align: top; overflow: hidden; float: left; background-color: #0fffff; } #footer { font-size: 5px; height: 5px; width: 100%; background-color: #ECECEC; } |
hoop dat jullie zien waar he taan lgit heb al diverse vage problem gehad net hiermee... opeens scrollbalken... opeens verschuivende divs maar verder dan dit kwam ik niet..
heb de content div een een ander kleurtje gegeven zodat het probleem nog duidelijker wordt.
tevens gaat de content div onder de menu div zitten en makt zich 100% breed terwijl hij er netjes naast zou moeten...
help!!
(ja ik ben wanhopig ) [ Bericht 1% gewijzigd door iteejer op 27-01-2008 10:02:31 ]
En nu ga je ons precies vertellen wat er dan niet is zoals je verwacht? Hier zie ik in FF niets geks namelijks.
Je layout hoeft geen flexibele breedte te hebben, maar een vaste breedte voor de hele site?quote:Op maandag 5 maart 2007 19:01 schreef Coelho het volgende:
Ik ben wat aan het knutselen met CSS, en hoop dat iemand mij kan helpen. Pagina wordt gecentreerd weergegeven dmv een supercontainer DIV die voor de achtergrond zorgt. Hierin een container die gecentreerd is en een vaste breedte heeft. De container bevat een header en een footer met daartussen 3 kolommen: left, content, right. Positioneren lijkt goed te gaan, bij een meer dan schermvullende content stretcht alles mooi mee, echter wanneer de content maar een kwart pagina bevat, zweeft de footer ergens halverwege het scherm en zie je onderaan nog een stuk achtergrondkleur die ik ook links en rechts van het te centreren blok heb gebruikt.
Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:
HTML:
[ code verwijderd ]
CSS
[ code verwijderd ]
Wie heeft de gouden tip?
Dan zou ik in die supercontainer onder de header en boven de footer nog een tweede subcontainer-divje plaatsen en die relatief tov de supercontainer plaatsen. Zet dan je overige div's absoluut gepositioneerd in die subcontainer en dan kun je de uitlijning helemaal goed plaatsen.
Wat ik op mijn site heb gedaan is deze basishack gebruiken voor de supercontainer, die werkt zowel in IE als in firefox:
http://bluerobot.com/web/css/center1.html
Succes!
]http://bluerobot.com/web/css/center1.html[/quote][/url]quote:Op woensdag 7 maart 2007 13:16 schreef ManInLove het volgende:
Wat ik op mijn site heb gedaan is deze basishack gebruiken voor de supercontainer, die werkt zowel in IE als in firefox:
[url=http://bluerobot.com/web/css/center1.html
Ik zie geen hack, alleen normale CSS hoor
Die IE fix heb je niet echt nodig overigens, da's alleen voor IE5.x, "margin: 0 auto" zou afdoende moeten zijn.
My god, wat ik mij net toch tegen kwam:
Ik zie hier al twee zeer onzinnige punten :P
| 1 |
Ik zie hier al twee zeer onzinnige punten :P
Je vraagt je toch af waarom iemand daarvoor javascript gebruikt. Een verwoede poging om zo obtrusive mogelijk te werken
En ook heerlijk dat je door dit soort geintjes geen "Copy link" , "Add link to bookmarks" of "Open link in new tab" kan doen, heel de browser interpertation is door de war
Om maar over de engszins perfectionistische punt-slash aan het begin te zwijgen
Om maar over de engszins perfectionistische punt-slash aan het begin te zwijgen
http://chillosophy.nl/fok/test.html
Wat moet ik veranderen om het in IE aan de praat te krijgen? Het is helemaal niet van belang dat het andere browsers werkt, maar de browser waar het om gaat trekt zich niet echt veel aan van de boundaries en laat de tekst mooi doorlopen over de hele pagina.
De twee 'panels' waar het wel werkt hebben een height-waarde in de CSS. Dus daar zal het probleem waarschijnlijk zitten. Maar ik weet geen hoogte van de andere twee panels, omdat dat afhankelijk is van de schermgrootte.
Wat moet ik veranderen om het in IE aan de praat te krijgen? Het is helemaal niet van belang dat het andere browsers werkt, maar de browser waar het om gaat trekt zich niet echt veel aan van de boundaries en laat de tekst mooi doorlopen over de hele pagina.
De twee 'panels' waar het wel werkt hebben een height-waarde in de CSS. Dus daar zal het probleem waarschijnlijk zitten. Maar ik weet geen hoogte van de andere twee panels, omdat dat afhankelijk is van de schermgrootte.
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
Met percentages werken?
Ik heb ook een vraag.
Simpel opbouwtje:
header.png
content.png
footer.png
3 plaatjes die ik als achtergrond wil gebruiken, waarbij content.png in de hoogte uitgerekt moet worden, afhankelijk van de hoeveelheid content die er op dat moment in de pagina gepropt zit.
Ik heb nu een wrapper met 3 containers daarin, en dan de plaatjes als achtergrond in de containers.
Dat werkt allemaal leuk, maar als ik nou een stuk tekst in die middelste container wil gooien komt die echt helemaal tegen de rand aan. Logisch, maar niet netjes. Hoe los je dat op? Nog een divje in het divje dat al in een divje zit, of toch anders?
Ik heb ook een vraag.
Simpel opbouwtje:
header.png
content.png
footer.png
3 plaatjes die ik als achtergrond wil gebruiken, waarbij content.png in de hoogte uitgerekt moet worden, afhankelijk van de hoeveelheid content die er op dat moment in de pagina gepropt zit.
Ik heb nu een wrapper met 3 containers daarin, en dan de plaatjes als achtergrond in de containers.
Dat werkt allemaal leuk, maar als ik nou een stuk tekst in die middelste container wil gooien komt die echt helemaal tegen de rand aan. Logisch, maar niet netjes. Hoe los je dat op? Nog een divje in het divje dat al in een divje zit, of toch anders?
Werkte perfect, tnx!
Nog een vraag:
1 regel
2 woorden, warvan het ene links uitgelijnd moet worden, en het andere rechts. Hoe doe je dat?
Nog een vraag:
1 regel
2 woorden, warvan het ene links uitgelijnd moet worden, en het andere rechts. Hoe doe je dat?
Het rechter woord in een span, en een float:right erin?quote:Op woensdag 14 maart 2007 21:28 schreef veldmuis het volgende:
Werkte perfect, tnx!
Nog een vraag:
1 regel
2 woorden, warvan het ene links uitgelijnd moet worden, en het andere rechts. Hoe doe je dat?
Da's inderdaad zo'n beetje de enige optie. Of misschien dat "text-align: justify" op het containing element ook nog werkt, maar da's dan wel min of meer een hack.quote:Op woensdag 14 maart 2007 21:33 schreef Geqxon het volgende:
[..]
Het rechter woord in een span, en een float:right erin?
Daarnaast is het overigens meestal zo dat in het geval dat je het ene woord links wilt hebben en het andere rechts, deze qua semantiek allebei in een eigen element thuishoren, en je dus al hooks hebt om te floaten.
ik ben er nog steeds niet uit. met percentages werken is geen optie. iemand nog?quote:Op zondag 11 maart 2007 15:58 schreef Nevermind het volgende:
http://chillosophy.nl/fok/test.html
Wat moet ik veranderen om het in IE aan de praat te krijgen? Het is helemaal niet van belang dat het andere browsers werkt, maar de browser waar het om gaat trekt zich niet echt veel aan van de boundaries en laat de tekst mooi doorlopen over de hele pagina.
De twee 'panels' waar het wel werkt hebben een height-waarde in de CSS. Dus daar zal het probleem waarschijnlijk zitten. Maar ik weet geen hoogte van de andere twee panels, omdat dat afhankelijk is van de schermgrootte.
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
Heb ik weer een vraag.
Ik weet dat ik iets met een hover moet hebben, maar lees nu weer iets over dat het niet in IE gaat werken enzo: een menu-achtig iets wat weergegeven wordt als je op de knop klikt.
Is zoiets lastig te realiseren?
Ik weet dat ik iets met een hover moet hebben, maar lees nu weer iets over dat het niet in IE gaat werken enzo: een menu-achtig iets wat weergegeven wordt als je op de knop klikt.
Is zoiets lastig te realiseren?
Via :visited een hover-menu maken en van de link een random getal maken (zodat je niet als je nogmaals komt de menu uitgeklapt is...
:active zou hiervoor moeten werken, maar werkt niet (het werkt wel: het menu komt na de klik wel zichtbaar, maar gaat direct weer weg...
:active zou hiervoor moeten werken, maar werkt niet (het werkt wel: het menu komt na de klik wel zichtbaar, maar gaat direct weer weg...
Het punt is dus dat IE alleen :hover ondersteunt op een link, niet op andere elementen. Zie bijv Suckerfish Dropdowns.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
sinds IE7 niet meer (wordt ook op andere elementen ondersteund)quote:Op zaterdag 17 maart 2007 10:43 schreef SuperRembo het volgende:
Het punt is dus dat IE alleen :hover ondersteunt op een link, niet op andere elementen. Zie bijv Suckerfish Dropdowns.
zie hier:
http://home.mschol.eu/
en hier:
http://msdn.microsoft.com(...)properties/hover.asp
Ok, maar dan werkt het nog steeds bij 40% van de bezoekers niet
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
zie de eerste link, die werkt onder FF, IE6 & 7 (daar heb ik em onder getestquote:Op zaterdag 17 maart 2007 12:27 schreef SuperRembo het volgende:
Ok, maar dan werkt het nog steeds bij 40% van de bezoekers niet
dan hebbie voor grofweg 98% van de internetters em wel goed
[ Bericht 5% gewijzigd door mschol op 17-03-2007 13:12:21 ]
Ja met javascript erbij lukt het natuurlijk in elke browser. Een pure CSS oplossing werkt alleen cross browser (inclusief IE6) als je a:hover gebruikt.
Ik vind bij jou die mousemove handler op de body niet bepaald een fraaie oplossing. Helemaal omdat er naar de y-coördinaat gekeken wordt.
Ik vind bij jou die mousemove handler op de body niet bepaald een fraaie oplossing. Helemaal omdat er naar de y-coördinaat gekeken wordt.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
das waarquote:Op zaterdag 17 maart 2007 13:11 schreef SuperRembo het volgende:
Ja met javascript erbij lukt het natuurlijk in elke browser. Een pure CSS oplossing werkt alleen cross browser (incl IE6) als je a:hover gebruikt.
...die javascript aan heeft staan Als je niet zeker weet dat iedere bezoeker Javascript aan heeft staan, dan is het netjes om daar rekening mee te houden ('progressive enhancement').quote:Op zaterdag 17 maart 2007 13:11 schreef SuperRembo het volgende:
Ja met javascript erbij lukt het natuurlijk in elke browser.
ik heb em niet zelf gebouwd, was een kant en klaar templatequote:Op zaterdag 17 maart 2007 13:11 schreef SuperRembo het volgende:
Ik vind bij jou die mousemove handler op de body niet bepaald een fraaie oplossing. Helemaal omdat er naar de y-coördinaat gekeken wordt.
tis op z'n zachts gezegd vreemd als je anno 2007 je JS uit hebt staan..quote:Op zondag 18 maart 2007 10:59 schreef CraZaay het volgende:
[..]
...die javascript aan heeft staan Als je niet zeker weet dat iedere bezoeker Javascript aan heeft staan, dan is het netjes om daar rekening mee te houden ('progressive enhancement').
dan doet grofweg 70% v/d sites het niet (goed) meer.
Op mijn PDA staat Javascript standaard uit. Op m'n mobiel ook. Dat veel sites het dan niet meer doen is geen reden om het zelf dan niet goed te doen. Gevalletje "als hij in de sloot springt, doe jij dat dan ook".quote:Op zondag 18 maart 2007 11:03 schreef mschol het volgende:
[..]
tis op z'n zachts gezegd vreemd als je anno 2007 je JS uit hebt staan..
dan doet grofweg 70% v/d sites het niet (goed) meer.
Elke keer als ik denk dat ik snap hoe CSS werkt, gebeurt er weer iets waardoor ik de haren uit m'n hoofd wil trekken
Ik ben een website aan het maken en dit is hoe het er aan de bovenkant uit moet komen te zien:
Wat ik hiervoor heb gemaakt is een div met een class die "topbar" heet, met o.a. "vertical-align: middle", een achtergrondkleur en margin en padding op 0.
Om de knopjes aan de rechterkant te krijgen, heb ik een div gemaakt met een class genaamd "topbarButtonarea" die "float: right" heeft, zodat 'ie aan de rechterkant komt te zitten. Daarin zitten twee links waaraan de class "topbarButton" hangt, die zorgt voor een randje en een achtergrondkleur, zodat het er als een knopje uitziet.
Vervolgens heb ik de div eronder, waar het supermooie plaatje in moet, een class meegegeven waarin staat "clear: both" waarmee ik hoopte dat het resultaat eruit zou zien zoals het plaatje.
Echter ziet het er vervolgens ongeveer zo uit:
Zoals je kunt zien, vallen de knopjes uit de div waar 'ie in zit, en dat is niet de bedoeling!
Hoe moet m'n HTML en CSS eruit zien om wel het resultaat te verkrijgen wat ik voor ogen heb?
Ik ben een website aan het maken en dit is hoe het er aan de bovenkant uit moet komen te zien:
Wat ik hiervoor heb gemaakt is een div met een class die "topbar" heet, met o.a. "vertical-align: middle", een achtergrondkleur en margin en padding op 0.
Om de knopjes aan de rechterkant te krijgen, heb ik een div gemaakt met een class genaamd "topbarButtonarea" die "float: right" heeft, zodat 'ie aan de rechterkant komt te zitten. Daarin zitten twee links waaraan de class "topbarButton" hangt, die zorgt voor een randje en een achtergrondkleur, zodat het er als een knopje uitziet.
Vervolgens heb ik de div eronder, waar het supermooie plaatje in moet, een class meegegeven waarin staat "clear: both" waarmee ik hoopte dat het resultaat eruit zou zien zoals het plaatje.
Echter ziet het er vervolgens ongeveer zo uit:
Zoals je kunt zien, vallen de knopjes uit de div waar 'ie in zit, en dat is niet de bedoeling!
Hoe moet m'n HTML en CSS eruit zien om wel het resultaat te verkrijgen wat ik voor ogen heb?
met dit verschil dat de site sowieso niet te bekijken valt op PDA en/of mobiel (aangezien ik zelf zo'n beetje de enige zal zijn die er iets mee doet in het begin..quote:Op zondag 18 maart 2007 14:55 schreef CraZaay het volgende:
[..]
Op mijn PDA staat Javascript standaard uit. Op m'n mobiel ook. Dat veel sites het dan niet meer doen is geen reden om het zelf dan niet goed te doen. Gevalletje "als hij in de sloot springt, doe jij dat dan ook".
Ah, dat is een goeie, HuHu
Dan is het denk ik wel handig om het in "em" te doen en niet in pixels ofzo, want als mensen het lettertype groter willen hebben, valt het alsnog van de balk af, right?
Dan is het denk ik wel handig om het in "em" te doen en niet in pixels ofzo, want als mensen het lettertype groter willen hebben, valt het alsnog van de balk af, right?
Floats clearen gaat het mooist met overflow: auto.
Je moet de floats clearen op de container van de titel en de knopjes, clear: both op het plaatje helpt dus niet.
[ Bericht 4% gewijzigd door SuperRembo op 18-03-2007 22:48:44 ]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | overflow: auto; background-color: #666; } .titel { float: left; } .topbarButton { float: right; border: 1px solid #000; background-color: #fff; } |
| 1 2 3 4 5 6 7 | <div class="titel">Titel</div> <div class="topbarButtonarea"> <div class="topbarButton">knopje</div> <div class="topbarButton">knopje</div> </div> </div> |
Je moet de floats clearen op de container van de titel en de knopjes, clear: both op het plaatje helpt dus niet.
[ Bericht 4% gewijzigd door SuperRembo op 18-03-2007 22:48:44 ]
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Bedankt, SuperRembo Dit soort commentaar vind ik altijd prettig om te horen, want ik heb nog wel eens twijfels over de oplossingen die ik zelf bedenk
[edit] Nu heb ik overigens een probleem wat ik al eerder heb gehad... 2 rijen naast elkaar (links een lijst met links, rechts tekst) die even lang moeten worden. Het probleem is dat de ene keer de linkerkant meer inhoud heeft en de andere keer de rechterkant. Ik moet even opzoeken hoe ik het de vorige keer heb opgelost, maar als iemand nog een slimme truc heeft, hoor ik die graag
[edit] Nu heb ik overigens een probleem wat ik al eerder heb gehad... 2 rijen naast elkaar (links een lijst met links, rechts tekst) die even lang moeten worden. Het probleem is dat de ene keer de linkerkant meer inhoud heeft en de andere keer de rechterkant. Ik moet even opzoeken hoe ik het de vorige keer heb opgelost, maar als iemand nog een slimme truc heeft, hoor ik die graag
Dan is het in dit specifieke geval niet aan de orde, maar aangezien jij over "70% van alle gebruikers" begon was mijn uitspraak van toepassing op publiekssites in het algemeen.quote:Op zondag 18 maart 2007 21:12 schreef mschol het volgende:
[..]
met dit verschil dat de site sowieso niet te bekijken valt op PDA en/of mobiel (aangezien ik zelf zo'n beetje de enige zal zijn die er iets mee doet in het begin..
Dat doe je dan vast met IE, die verbergt dat je backslashes gebruikt en gooit ze direct om naar normale slashes. Firefox niet.quote:Op zondag 18 maart 2007 21:12 schreef mschol het volgende:
[..]
met dit verschil dat de site sowieso niet te bekijken valt op PDA en/of mobiel (aangezien ik zelf zo'n beetje de enige zal zijn die er iets mee doet in het begin..
uhhh hequote:Op maandag 19 maart 2007 07:51 schreef veldmuis het volgende:
[..]
Dat doe je dan vast met IE, die verbergt dat je backslashes gebruikt en gooit ze direct om naar normale slashes. Firefox niet.
--edit--
ow wacht ik zie wat je bedoelt..
tja force of habit..
en dat FF nou gaat mierenneuken op verkeerde slashes , daar kan ik niks aan doen
en ja ik doe het grootste deel onder IE, maar ook onder FF wordt de werking getest..
Mierenneuken op verkeerde slashes? Nee, FF doet wat jij vraagt, IE hoopt dat je het zo bedoelt. Verschil!quote:Op maandag 19 maart 2007 15:31 schreef mschol het volgende:
[..]
uhhh he
--edit--
ow wacht ik zie wat je bedoelt..
tja force of habit..
en dat FF nou gaat mierenneuken op verkeerde slashes , daar kan ik niks aan doen
en ja ik doe het grootste deel onder IE, maar ook onder FF wordt de werking getest..
Mijn god, wat is de zoekpagina van Google een rotzooi. Van een bedrijf dat dergelijke kennis van AJAX heeft, een enorme omzet maakt, en imho een enorme status heeft, is de sourcecode pure bagger. Geen doctype, geen XHTML, amper quotes om HTML eigenschappen, geen indents, niet alles net op losse regels, *ril*
Ik zit nog steeds wat te kutten met m'n CSS en hoop dat iemand me in de goede richting kan wijzen.
Een gedeelte van de website die ik aan het maken ben, bestaat uit twee tekstvakken: eentje links en eentje rechts. Beiden bevinden zich in een container met een achtergrondkleur. Ik heb de vakken nu allebei floating gemaakt en het is de bedoeling dat de achtergrond mee rekt met het grootste vak.
Zoiets dus:
of zo:
Achter lukt het me niet om het voor elkaar te krijgen.
Het wordt al gauw zoiets:
Maar dat is natuurlijk niet goed.
Ik heb wat met "clear: left", "clear: right" en "clear: both" zitten rommelen in de container, maar dan komen de vakken alleen maar onder elkaar te staan in plaats van naast elkaar.
Hoe zorg ik ervoor dat de container zo lang wordt als het langste vak?
Een gedeelte van de website die ik aan het maken ben, bestaat uit twee tekstvakken: eentje links en eentje rechts. Beiden bevinden zich in een container met een achtergrondkleur. Ik heb de vakken nu allebei floating gemaakt en het is de bedoeling dat de achtergrond mee rekt met het grootste vak.
Zoiets dus:
of zo:
Achter lukt het me niet om het voor elkaar te krijgen.
Het wordt al gauw zoiets:
Maar dat is natuurlijk niet goed.
Ik heb wat met "clear: left", "clear: right" en "clear: both" zitten rommelen in de container, maar dan komen de vakken alleen maar onder elkaar te staan in plaats van naast elkaar.
Hoe zorg ik ervoor dat de container zo lang wordt als het langste vak?
Ah, hartelijk dank!
Ik had al iets geprobeerd met dat overflow: auto, maar toen had ik een typfout gemaakt zie ik nu
Ik had al iets geprobeerd met dat overflow: auto, maar toen had ik een typfout gemaakt zie ik nu
Ik zit weer eens met een stom css ietsje..
Ik heb de volgende lap code
deze gebruik de volgende css code
en dan krijg je dit als uitkomst :{
nu snap ik het niet... want padding zorgt toch voor een 'inner' werking ipv buitenwerking? of doe ik iets erg fout? :D
Ik heb de volgende lap code
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class='head'> <div class='title'>C1-14</div> <div class='options'><a href='javascript:x(15);'><img src='./layout/images/x.gif' alt='close' border='0' /></a></div> <div class='clr'></div> </div> <div id='box15'> <ul> <li><a href="out.php?link=http://www.google.nl" title="googl" target="11">googl</a></li> </ul> </div> </div> |
deze gebruik de volgende css code
| 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 | padding: 10px; width: 30%; float: left; } .box .head { height: 24px; background-color: blue; color: white; } .box .title { width: 70%; float: left; padding: 2px 0px 2px 5px; } .box .options { width: 30%; float: left; text-align: center; padding: 2px 0px 2px 0px; } .box .clr { clear: both; } |
en dan krijg je dit als uitkomst :{
nu snap ik het niet... want padding zorgt toch voor een 'inner' werking ipv buitenwerking? of doe ik iets erg fout? :D
Just say hi!
Ja, maar de padding wordt wordt wel bij de afmetingen van de box opgeteld. Dus:quote:Op dinsdag 20 maart 2007 14:27 schreef Chandler het volgende:
nu snap ik het niet... want padding zorgt toch voor een 'inner' werking ipv buitenwerking? of doe ik iets erg fout?
box {
width: 100px;
height: 100px;
padding: 10px;
}
levert een box op van 120 bij 120 pixels.
En waarom gebruik je in hemelsnaam bijvoorbeeld een div voor de titel met class 'title'. Wat is er mis met een heading element? En doe die javascript eens netjes als <a href="#" onclick="actie(); return false">, en als je dan toch bezig bent kan dat kruisje ook mooi in de CSS en uit de HTML
CraZaay; je hebt gelijk maar ik probeerde nu te werken met % ipv vaste afmetingen en hoopte dat daarvoor dus ook een methode was om de juiste grootte te krijgen
-edit- maar hoe bedoel je dit met een handig element?
Ik zal nu dan even het stukje style sheet aanpassen..
-edit- maar hoe bedoel je dit met een handig element?
Ik zal nu dan even het stukje style sheet aanpassen..
Just say hi!
Die methode is of padding in percentages gebruiken, of binnen je element een div plaatsen die wel padding in pixels heeft (je hebt al elementen waarop dat zou kunnen lijkt me, zoals je ul). Dan werkt het wel.quote:Op woensdag 21 maart 2007 09:26 schreef Chandler het volgende:
CraZaay; je hebt gelijk maar ik probeerde nu te werken met % ipv vaste afmetingen en hoopte dat daarvoor dus ook een methode was om de juiste grootte te krijgen
-edit- maar hoe bedoel je dit met een handig element?
En ik zei 'heading' element Dus een H2 ofzo.
ik heb het net even met een P element geprobeerd maar dit wil ook niet echt lukken
met de volgende stylesheet
maar wat mij dan opvalt is 1. de image is geen width: 20px;! 2. de image komt onder de blauw box..
tevens heb ik geprobeerd om het P element er bv ook onder te zetten ipv boven ivm float: maar dit resulteerde ook in niets... ik zie blijkbaar iets erg over het hoofd
| 1 2 3 4 5 6 7 8 | <p>A1-1 test</p> <div class='options'> <a href='#' class='close' onclick='x(1);'> </a> </div> <div class='clr'></div> </div> |
met de volgende stylesheet
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | float: left; text-align: left; display:inline; } .box .options { float: right; text-align: right; padding-right: 5px; } .box .options .close { background-image: url(./layout/images/x.gif); width: 20px; height: 20px; } |
maar wat mij dan opvalt is 1. de image is geen width: 20px;! 2. de image komt onder de blauw box..
tevens heb ik geprobeerd om het P element er bv ook onder te zetten ipv boven ivm float: maar dit resulteerde ook in niets... ik zie blijkbaar iets erg over het hoofd
Just say hi!
Ik snap sowieso niet waarom het allemaal zo ingewikkeld moet.
Wat kun je niet in deze opzet?:
Lijntje en afmeting van 'boxje' in de CSS, h2 stylen en de ul stylen. Je kruisje mag je wat mij betreft dan absoluut rechtsboven positioneren ('boxje' heeft dan ook 'position: relative' nodig).
PS:
[ Bericht 13% gewijzigd door CraZaay op 21-03-2007 10:02:29 ]
Wat kun je niet in deze opzet?:
| 1 2 3 4 5 6 7 | <h2>Titel</h2> <a href="#" onclick="optionsdingen(); return false">kruisje</a> <ul> <li><a href="#">lijstje met links</li> </ul> </div> |
Lijntje en afmeting van 'boxje' in de CSS, h2 stylen en de ul stylen. Je kruisje mag je wat mij betreft dan absoluut rechtsboven positioneren ('boxje' heeft dan ook 'position: relative' nodig).
PS:
Heb je enig idee waarom ik een H2 koos voor de titel, en niet een P?quote:ik heb het net even met een P element geprobeerd maar dit wil ook niet echt lukken
De A op 'display: block' zetten. Een A is namelijk een inline element en daarvan kun je de afmetingen niet aanpassen, tenzij je er een block element van maakt. Als je nou ook nog tekst toevoegt aan de link (zoals 'sluiten') en dit verbergt via CSS ('text-indent: -9999px; overflow: hidden') dan heeft iemand zonder CSS er ook iets aan. Sterker nog, je zou kunnen overwegen om de sluit-icoontjes d.m.v. Javascript te plaatsen of zichtbaar te maken, aangezien iemand zonder Javascript er toch niets aan heeft. Die hoeft ze dan ook niet te zien. Doe dit dan wel in een apart JS-bestand (waarmee je door alle 'boxje's loopt en met DOM scripting het icoontje toevoegt danwel zichtbaar maakt).quote:maar wat mij dan opvalt is 1. de image is geen width: 20px;!
[ Bericht 13% gewijzigd door CraZaay op 21-03-2007 10:02:29 ]
CraZaay; je had idd gelijk m.b.t. het P element
Ik had in de tussentijd even deze opzet gemaakt om ook de image in CSS te verwerken maar dit resulteerde in slechte en brakke images nu heb ik de volgende opzet....
Nu is de uitkomst goed, en maakt het niet uit hoeveel a'tjes ik gebruik alleen zit ik met 1 klein probleem, de padding van top wil op een of andere manier niet met H2 als ik er tevens geen display: inline van maak krijg ik een hele diepe block....
- edit / toevoeging -
dat verbergen van de tekst is idd een handig idee, maar vraag me af of het enabelen van images m.b.t. het sluiten van velden wel echt handig is, want hoeveel gebruikers kunnen geen CSS of Javascript zien/gebruiken?
Ik had in de tussentijd even deze opzet gemaakt om ook de image in CSS te verwerken maar dit resulteerde in slechte en brakke images nu heb ik de volgende opzet....
| 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 | .box { width: 250px; border: 1px solid black; } .box .h { width: 100%; height: 22px; background-color: blue; color: white; } .box h2 { padding-top: 5px; padding-left: 5px; font-size: 14px; display: inline; } .box a { float: right; text-align: right; padding-right: 2px; } </style> <div class="box"> <div class="h"> <h2><a href="#" onclick="x();"><img src="close.gif" alt="close" /></a> <a href="#" id='close' onclick="x(); return false;"><img src="close.gif" alt="close" /></a> Hier komt de BOX titel</h2> </div> <ul style="margin: 0; padding-top: 5px;"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> |
Nu is de uitkomst goed, en maakt het niet uit hoeveel a'tjes ik gebruik alleen zit ik met 1 klein probleem, de padding van top wil op een of andere manier niet met H2 als ik er tevens geen display: inline van maak krijg ik een hele diepe block....
- edit / toevoeging -
dat verbergen van de tekst is idd een handig idee, maar vraag me af of het enabelen van images m.b.t. het sluiten van velden wel echt handig is, want hoeveel gebruikers kunnen geen CSS of Javascript zien/gebruiken?
Just say hi!
Dan zou ik eerder werken aan m'n skills zodat je dat alsnog goed krijgt, in plaats van dan maar een mindere oplossing te gebruiken.quote:Op woensdag 21 maart 2007 10:07 schreef Chandler het volgende:
Ik had in de tussentijd even deze opzet gemaakt om ook de image in CSS te verwerken maar dit resulteerde in slechte en brakke images nu heb ik de volgende opzet....
'diepe block', wat moet ik me daar bij voorstellen? Padding en 'display: inline' gaan niet echt goed samenquote:Nu is de uitkomst goed, en maakt het niet uit hoeveel a'tjes ik gebruik alleen zit ik met 1 klein probleem, de padding van top wil op een of andere manier niet met H2 als ik er tevens geen display: inline van maak krijg ik een hele diepe block....
Waarom staat er overigens een div om die H2? Die H2 is het enige element wat in die div staat; gewoon die H2 stylen dus.
Als jij het goed web development vindt om te denken "als 90% van de bezoekers ermee kan werken vind ik het wel best", dan kun je net zo goed weer met tabellen gaan werken. Ik heb op m'n PDA in ieder geval CSS uit staan en een screenreader kan vaak weinig met Javascript. Kortom: zowat alle andere user agents dan browsers hebben er potentieel problemen mee.quote:dat verbergen van de tekst is idd een handig idee, maar vraag me af of het enabelen van images m.b.t. het sluiten van velden wel echt handig is, want hoeveel gebruikers kunnen geen CSS of Javascript zien/gebruiken?
Wat mij betreft moet een website toegankelijk zijn voor een zo groot mogelijk publiek. Het is niet zo dat het de dubbele hoeveelheid werk kost ofzo, als je er continu rekening mee houdt ben je net zo snel klaar.
Op jouw manier ben je een beetje halverwege: je gebruikt geen tabellen meer, maar denkt zo nog wel. Begin de volgende keer gewoon met je HTML en zorg dat die semantisch correct is (gebruik de elementen dus waar ze voor zijn), en ga dan pas aan de slag met CSS. Als het dan echt niet lukt om iets goed te stylen, dan kun je nog extra 'hooks' toevoegen (bijvoorbeeld een overkoepelende div). Nu ben je steeds je HTML aan het aanpassen t.b.v. de presentatie, en dan heb je er nog niets aan.
"Scheiding van de macht" is immers de leus: structuur in HTML, presentatie in CSS en gedrag in Javascript. Dat betekent dus ook dat elementen t.b.v. de presentatie niet in de HTML horen (je 'sluit'-icoontje) maar in de CSS, dat al je inline styles komen te vervallen en je Javascript in een aparte .js hoort te staan. Je HTML is daarmee voor iedereen bruikbaar (en niet meer dan dat), en met Javascript voeg je voor de browsers die het ondersteunen later 'progressive enhancement' toe.
Tot zover mijn betoog, en ja ik ben een purist
Zow; weer een lange lap tekst
De div staat er omheen omdat ik dan de achtergrond/text kleur kan aanpassen en er eventueel een border omheen kan zetten.. en ik zal eens kijken hoe goed mijn javascript skills zijn
Maar je hebt blijkbaar een beter idee in je hoofd? want deels ben ik toch al aardig op de goede weg neem ik aan?
De div staat er omheen omdat ik dan de achtergrond/text kleur kan aanpassen en er eventueel een border omheen kan zetten.. en ik zal eens kijken hoe goed mijn javascript skills zijn
Maar je hebt blijkbaar een beter idee in je hoofd? want deels ben ik toch al aardig op de goede weg neem ik aan?
Just say hi!
En waarom zou dat bij die H2 niet kunnenquote:Op woensdag 21 maart 2007 10:52 schreef Chandler het volgende:
Zow; weer een lange lap tekst
De div staat er omheen omdat ik dan de achtergrond/text kleur kan aanpassen en er eventueel een border omheen kan zetten..
| 1 2 3 4 | background: blue; border: solid 1px black; } |
gosjimeine zeg
ziet er inderdaad heerlijk uit zonder die extra div... en dat met een blok element ik wist helemaal niet dat het eingelijk zo mooi kon!
-edit-
maar natuurlijk gaat het nooooooit zonder problemen
het rode gedeelte is fout, dit komt door de H2 hoogte oid?! alleen zie ik niet waar ik dit kan veranderen?
| 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 | .box { width: 250px; border: 1px solid black; } .box h2 { height: 22px; background-color: blue; color: white; padding-top: 1px; padding-left: 5px; font-size: 15px; display: block; background-color: blue; } .box a { float: right; text-align: right; padding-right: 2px; } </style> <div class="box"> <h2><a href="#" onclick="x(); return false;"><img src="close.gif" alt="close" /></a> <a href="#" id='close' onclick="x();"><img src="close.gif" alt="close" /></a> Hier komt de BOX titel</h2> <ul style="margin: 0; padding-top: 5px;"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> |
ziet er inderdaad heerlijk uit zonder die extra div... en dat met een blok element ik wist helemaal niet dat het eingelijk zo mooi kon!
-edit-
maar natuurlijk gaat het nooooooit zonder problemen
het rode gedeelte is fout, dit komt door de H2 hoogte oid?! alleen zie ik niet waar ik dit kan veranderen?
Just say hi!
Los hiervan: Je hebt sowieso twee keer "background-color: blue" erin staan dus dat kan eruit, en "display: block" ook, want een H2 is van zichzelf al een block element.quote:Op woensdag 21 maart 2007 11:03 schreef Chandler het volgende:
gosjimeine zeg
het rode gedeelte is fout, dit komt door de H2 hoogte oid?! alleen zie ik niet waar ik dit kan veranderen?
Ergens in je CSS heb je dat rood gedifnieerd, misschien standaard voor iedere H2 ofzo. Je browser verzint dat er niet zelf bij
Nee dat rooie heb ik er zelf ik gezet daarmee wil ik eingelijk zeggen dat de ul maximaal 5px gepadd is van boven en dit zijn al ruim 20pixels... weet dus niet waar dat vandaan komt
-edit- gefixt door margin op 0 te zetten
-edit- gefixt door margin op 0 te zetten
| 1 2 3 4 5 6 7 | color: white; padding-top: 1px; padding-left: 5px; font-size: 15px; background-color: blue; margin: 0; |
Just say hi!
En waarom zit de onclick niet meteen op het plaatje? Dat scheelt een <a>.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Dat plaatje hoort sowieso niet in de HTML, maar in de CSS. Een A is dan het meest voor de hand liggende element om die onclick aan te hangen en het achtergrondplaatje weer te geven, al kun je daar over twisten. Je zou daar ook gewoon een div voor kunnen gebruiken. Voordeel van een A is dat je 'm als normale link kunt laten werken voor gebruikers zonder Javascript.quote:Op woensdag 21 maart 2007 13:16 schreef SuperRembo het volgende:
En waarom zit de onclick niet meteen op het plaatje? Dat scheelt een <a>.
Maar als je er geen normale link achter zet dan is het behoorlijk nutteloos.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Klopt, en dan zou je zeker Javascript moeten gebruiken om het plaatje daar neer te zetten. Het is namelijk nog nuttelozer om een elememt op te nemen waar niet-Javascript gebruikers helemaal niets aan hebben maar toch zienquote:Op woensdag 21 maart 2007 17:01 schreef SuperRembo het volgende:
Maar als je er geen normale link achter zet dan is het behoorlijk nutteloos.
Mwah, daar zou ik me niet zo druk over maken. Het is mooi als een pagina ook zonder javascript bruikbaar is, maar ik heb liever een overbodig plaatje voor een (enkele) bezoeker zonder javascript dan dat (vele) andere een trager ladende pagina hebben.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Die milliseconden zullen ze toch wel overleven?quote:Op woensdag 21 maart 2007 19:57 schreef SuperRembo het volgende:
Mwah, daar zou ik me niet zo druk over maken. Het is mooi als een pagina ook zonder javascript bruikbaar is, maar ik heb liever een overbodig plaatje voor een (enkele) bezoeker zonder javascript dan dat (vele) andere een trager ladende pagina hebben.
@CraZaay;
Ik wilde mijn startpagina klaar voor templates maken en dat is mij gelukt, echter is de snelheid van het script aanzienlijk naar beneden gegaan maar goed, je moet er wat voor over hebben. Tevens is het nu volgens mij aardig CSS/XHTML gemaakt en zal morgen de puntjes op de I zetten.
Voorbeeld:
Oude: http://startpagina.bruggema.nl/index2.php
Nieuwe: http://startpagina.bruggema.nl/index.php
Zie't verschil
Ik wilde mijn startpagina klaar voor templates maken en dat is mij gelukt, echter is de snelheid van het script aanzienlijk naar beneden gegaan maar goed, je moet er wat voor over hebben. Tevens is het nu volgens mij aardig CSS/XHTML gemaakt en zal morgen de puntjes op de I zetten.
Voorbeeld:
Oude: http://startpagina.bruggema.nl/index2.php
Nieuwe: http://startpagina.bruggema.nl/index.php
Zie't verschil
Just say hi!
Qua PHP bedoel je? Dat zou normaliter toch echt niet merkbaar moeten zijn volgens mij.quote:Op woensdag 21 maart 2007 23:44 schreef Chandler het volgende:
Ik wilde mijn startpagina klaar voor templates maken en dat is mij gelukt, echter is de snelheid van het script aanzienlijk naar beneden gegaan
Anders gebruik je een MVC-framework als CodeIgniter ofzo? Zit standaard caching in en dan heb je nog fatsoenlijke "templating" ook (views dus). Maar da's redelijk off topic hier
En de nieuwe is echt stukken beter dan de oude!
Ja de scripting tijd is door het gebruik maken van templates behoorlijk naar beneden gegaan *5 maar toch ben ik blij dat ik het met mijn eigen template engine kon realiseren!. Tevens ziet de code er eindelijk uit zoals het er uit moet zien (HTML/CSS code) of heb je nog opmerkingen?
Je mag als je tijd hebt, beide sources wel inzien hoor
-edit-
tnx voor je toevoeging, vond het er zelf ook al stukken duidelijker en overzichtelijker uitzien, en sterker nog; het scheelt ook in de kb's
Je mag als je tijd hebt, beide sources wel inzien hoor
-edit-
tnx voor je toevoeging, vond het er zelf ook al stukken duidelijker en overzichtelijker uitzien, en sterker nog; het scheelt ook in de kb's
Just say hi!
Mijn laatste opmerking was op basis van de sourcesquote:Op woensdag 21 maart 2007 23:51 schreef Chandler het volgende:
Je mag als je tijd hebt, beide sources wel inzien hoor
Weer off topic, maar waarom wil je per se je eigen template engine gebruiken? Heb je ooit van MVC gehoord of eens gekeken op www.codeigniter.com (vergelijkbaar met CakePHP maar dan met documentatie, beide qua structuur gebaseerd op Rails)? Ik heb dit al vaker geroepen op Fok, maar de PHP'ers hebben hier nooit oren naar (waarschijnlijk omdat ze altijd zelf dingen brouwen en niet bekend zijn met dergelijke concepten).
Op basis van de HTML sources ja
Maar dat terzijde en nog even offtopic
Inderdaad heb ik er weinig intresse in om andere zaken te gaan gebruiken dan dat ik reeds heb, want natuurlijk is het leuk om een ander produkt te gaan benutten maar wat brengt het allemaal met zich mee? ik heb het nog niet ingezien hoor, dus praat misschien wel onwaarheden. Maar vaak zitten er ook ogen, haken en naalden aan en dat soort zaken zijn nou eenmaal niet gemakkelijk op te lossen als een produkt door iemand anders geschreven wordt (heb vaak van andere script fouten moeten fixen, en eigen werk is 1000x gemakkelijker
Tevens roept men ook zo vaak (bv) gebruik toch Smarty, nou ik heb niets met smarty, heb het al vaker geprobeerd te gebruiken maar helaas kreeg ik niet (snel) het resultaat dat ik in mijn hoofd had en wilde behalen en dat lukte me wel met mijn simpele template parser. Maar goed... Ik zal morgen eens wat meer interesse steken in de applicaties waar je zelf nogal van onder de indruk bent, misschien als ik er even wat tijd in steek dat ik ook geintresseerd raak
Maar dat terzijde en nog even offtopic
Inderdaad heb ik er weinig intresse in om andere zaken te gaan gebruiken dan dat ik reeds heb, want natuurlijk is het leuk om een ander produkt te gaan benutten maar wat brengt het allemaal met zich mee? ik heb het nog niet ingezien hoor, dus praat misschien wel onwaarheden. Maar vaak zitten er ook ogen, haken en naalden aan en dat soort zaken zijn nou eenmaal niet gemakkelijk op te lossen als een produkt door iemand anders geschreven wordt (heb vaak van andere script fouten moeten fixen, en eigen werk is 1000x gemakkelijker
Tevens roept men ook zo vaak (bv) gebruik toch Smarty, nou ik heb niets met smarty, heb het al vaker geprobeerd te gebruiken maar helaas kreeg ik niet (snel) het resultaat dat ik in mijn hoofd had en wilde behalen en dat lukte me wel met mijn simpele template parser. Maar goed... Ik zal morgen eens wat meer interesse steken in de applicaties waar je zelf nogal van onder de indruk bent, misschien als ik er even wat tijd in steek dat ik ook geintresseerd raak
Just say hi!
Smarty is gewoon een template engine, ik heb het over MVC-frameworks. Maar ik begrijp dat je hier niet bekend mee bent Voor andere talen is het heel gangbaar om dergelijke "door anderen gemaakt werk" te gebruiken, zoals in Ruby on Rails, Java, etc. PHP is immers ook gewoon door anderen gemaakt zonder dat je door invloed op hebt.
Ik ben overigens niet heel erg onder de indruk van de diverse PHP-frameworks, maar het is as good as it gets met PHP ben ik bang. Ik ontwikkel verder alleen nog maar op basis van Ruby on Rails (en wat PHP voor die ene klant die dat per se nodig heeft ).
Maar laten we dit voortzetten in het PHP topic (daar lurk ik ook nog wel mee)
Ik ben overigens niet heel erg onder de indruk van de diverse PHP-frameworks, maar het is as good as it gets met PHP ben ik bang. Ik ontwikkel verder alleen nog maar op basis van Ruby on Rails (en wat PHP voor die ene klant die dat per se nodig heeft ).
Maar laten we dit voortzetten in het PHP topic (daar lurk ik ook nog wel mee)
Is het mogelijk om met css in een formulier radiobuttons en checkboxes een style te geven? Vooral de background color?
Google had wel wat oplossingen maar dan werden het hidden inputs icm javascript en dat wil ik niet.
Google had wel wat oplossingen maar dan werden het hidden inputs icm javascript en dat wil ik niet.
-
Van checkboxes en radiobuttons kun je alleen de 'achtergrond kleur' en 'border' stijlen (natuurlijk ook padding etc) maar daar houdt het ook mee op...
Just say hi!
Ik heb het even met internet explorer geprobeerd en daar werkt het wel, firefox1.5 helaas niet.
Nouja pech dan.
Mijn file upload is ook niet gestyled.
Nouja pech dan.
Mijn file upload is ook niet gestyled.
-
Van radiobuttons en checkbox kun je helaas alleen de achtergrondkleur (+ al het andere) achter het rondje/vierkantje stylen, dus niet die krengen zelf.
Anders wordt het inderdaad Javascript. Ook een optie natuurlijk
Anders wordt het inderdaad Javascript. Ook een optie natuurlijk
html:
css:
geeft links in firefox en rechts in ie
De streepjes staan in FF goed.. (dus tegen de bodem aan) maar de tekst staat in ie goed (verticaal gecentreerd) iemand enige idee hoe ik dit goed krijg?
had het geprobeerd als list.. maar dat was helemaal geen succes (omdat ik dat plaatje met die stippeltjes tussen de links in moet hebben
8)7 krijg dr hoofdpijn van
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <table> <tr> <td>LOGIN</td> <td class="split"><img src="bestanden/split.gif" /></td> <td class="text">JANJAAP</td> <td class="split"><img src="bestanden/split.gif" /></td> <td class="text">PETERSEN</td> <td class="split"><img src="bestanden/split.gif" /></td> <td class="text">KLAASEN</td> </tr> </table> </div> |
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 | text-align: right; margin: 38px 10px 0 0; line-height: 1.3; color: #007204; } #navigatie { height: 38px; width:500px; float:left; } #navigatie td{ float:left; width:70px; display:block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-align: center; color: #B3B3B3; } #navigatie .split { width:3px; } #navigatie .tekst { } |
geeft links in firefox en rechts in ie
De streepjes staan in FF goed.. (dus tegen de bodem aan) maar de tekst staat in ie goed (verticaal gecentreerd) iemand enige idee hoe ik dit goed krijg?
had het geprobeerd als list.. maar dat was helemaal geen succes (omdat ik dat plaatje met die stippeltjes tussen de links in moet hebben
8)7 krijg dr hoofdpijn van
Dan kan je dat plaatje als background op de list items zetten.quote:Op woensdag 28 maart 2007 20:43 schreef BaggerUser het volgende:
had het geprobeerd als list.. maar dat was helemaal geen succes (omdat ik dat plaatje met die stippeltjes tussen de links in moet hebben
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
dat is nog eens een ideequote:Op woensdag 28 maart 2007 22:08 schreef SuperRembo het volgende:
[..]
Dan kan je dat plaatje als background op de list items zetten.
gelukt (alsnog na wat moeite met uitlijning)
* BaggerUser helemaal blij is
Mooi. En de volgende keer als iets ff niet lukt niet naar tabellen grijpen; als anderen het zonder kunnen, kun jij het ookquote:
Vraagje
Ik heb een stukje html/php en CSS getypt, maar ik weet geen oplossing voor het volgende:
Ik heb een flinke header, waarvan eigenlijk alleen het bovenste gedeelte de header is, en het stuk eronder een gradient is die rustig overgaat in een andere kleur. Op die gradient moet de content van de pagina al beginnen, en die moet overgaan op een stuk met een andere background. Volgt u het nog? Hoe los je zoiets op? stapel divjes en layeren maar? En kan dat, met een achtergrond van 1px hoog die uitgerekt/herhaald wordt?
Ik heb een stukje html/php en CSS getypt, maar ik weet geen oplossing voor het volgende:
Ik heb een flinke header, waarvan eigenlijk alleen het bovenste gedeelte de header is, en het stuk eronder een gradient is die rustig overgaat in een andere kleur. Op die gradient moet de content van de pagina al beginnen, en die moet overgaan op een stuk met een andere background. Volgt u het nog? Hoe los je zoiets op? stapel divjes en layeren maar? En kan dat, met een achtergrond van 1px hoog die uitgerekt/herhaald wordt?
Een achtergrond van 1 pixel hoog maken is goed mogelijk en best handig zelfs. Je kan dan het volgende in je CSS zetten:
Je kan bij de repeat kiezen uit:
no-repeat
repeat
repeat-x
repeat-y
Alles spreekt voor zich en de 'repeat' betekend dat in zowel de x als de y richting wordt herhaald.
| 1 2 3 | background-image:url(images/plaatje.gif); background-repeat:repeat-y; } |
Je kan bij de repeat kiezen uit:
Alles spreekt voor zich en de 'repeat' betekend dat in zowel de x als de y richting wordt herhaald.
En die overlopende header kan je inderdaad oplossen door 2 divjes over elkaar heen te positioneren en ze een verschillende z-index mee te geven.
Dan heb ik dus op de onderste laag een divje met de headerbackground en een divje met de andere background van 1px hoog, en daar 'overheen' leg ik een divje met de grootte van alleen de header en eentje waar de content komt?
Resized dat onderste divje van de onderste laag (volgen we het nog ) dan ook mee, zodat die background dus blijft repeaten?
Resized dat onderste divje van de onderste laag (volgen we het nog ) dan ook mee, zodat die background dus blijft repeaten?
Ik weet niet precies hoe je de pagina wilt hebben. In ieder geval kun je wel die twee header divjes samennemen, je hoeft niet een aparte div voor background en content te hebben.
De herhalende achtergrond hoeft misschien ook niet in een eigen div, als je die aan de body toevoegd.
De content komt wel in een eigen div, die deels over de header div heen ligt met een hogere z-index.
De herhalende achtergrond hoeft misschien ook niet in een eigen div, als je die aan de body toevoegd.
De content komt wel in een eigen div, die deels over de header div heen ligt met een hogere z-index.
Ik heb het even prachtig gevisualiseerd:
De HEADER is dus 1 grote div waarin de achtergrond en de inhoud van de header zit.
De CONTENT is een eigen div, die deels over de HEADER heen van, zodat de background van de HEADER zichtbaar is achter de content.
De pagina-achtergrond kan je eventueel, afhankelijk van je design, nog achter de content zetten, of toevoegen aan de body.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | | HEADER | | | | HEADER | |---------------------------------------------|| || CONTENT CONTENT || || || || || || || || || || CONTENT CONTENT || -|--------------------------------------------|- | | | | | | | | | CONTENT CONTENT | | | | | | | | | | CONTENT CONTENT | ---------------------------------------------- |
De HEADER is dus 1 grote div waarin de achtergrond en de inhoud van de header zit.
De CONTENT is een eigen div, die deels over de HEADER heen van, zodat de background van de HEADER zichtbaar is achter de content.
De pagina-achtergrond kan je eventueel, afhankelijk van je design, nog achter de content zetten, of toevoegen aan de body.
Op mijn eigen site heb ik een container div gemaakt, waar de HEADER, CONTENT en FOOTER in zitten. De footer positioneer ik dan als volgt:quote:Op vrijdag 6 april 2007 22:28 schreef veldmuis het volgende:
Tot zover werkend, dankjewel!
Alleen zit ik nu nog met een footer, hoe doe je dat? :P.
| 1 2 3 | position: absolute; bottom:-50px; } |
-50px kwam voor mij mooi uit, maar je kan met de bottom waarde dus een element positioneren ten opzichte van de onderkant van z'n parent (de container).
Danku, maar het werkt niet! ;(.
Ik zal de code er eens bij pakken:
Daar zou dan een footer onder moeten, maar dat gaat niet op die manier.
De footer onder dat midden-ding hangen werkt niet:
In het geval van te weinig content hangt dat ding ergens in de header,
Als er wel voldoende content is gaat de background van het middenstuk onder de background van de footer staan, en aangezien die gedeeltelijk transparant is is dat niet netjes. Niet transparant maken is een fijne workaround voor nu, maar een nettere oplossing is welkom :).
Ik zal de code er eens bij pakken:
| 1 2 3 4 5 6 7 | <div id="header"></div> <div id="midden"> content kan hier enzo, dat werkt dus, zolang het maar voldoende content is </div> </div> </body> |
| 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 | position:absolute; width: 454px;; top: 30px; left: 50%; margin-left: -227px; } #header { position:absolute; width: 454px; height:332px; margin: 0em auto; background-image:url(backheader.png); background-repeat:no-repeat; z-index:1; } #midden { position:absolute; width: 454px; margin: 0em auto; background-image:url(backmidden.png); background-repeat:repeat-y; z-index:2; top:100px; } |
Daar zou dan een footer onder moeten, maar dat gaat niet op die manier.
De footer onder dat midden-ding hangen werkt niet:
In het geval van te weinig content hangt dat ding ergens in de header,
Als er wel voldoende content is gaat de background van het middenstuk onder de background van de footer staan, en aangezien die gedeeltelijk transparant is is dat niet netjes. Niet transparant maken is een fijne workaround voor nu, maar een nettere oplossing is welkom :).
.
Er is een methode om je footer het volgende te laten doen: als er voldoende content is zit de footer onderaan de content, is er onvoldoende content dan zit de footer onderaan het scherm.
Alleen die code kan ik nu even niet bij .
Alleen die code kan ik nu even niet bij .
Het moet niet onderaan het scherm zijn he, maar direct onder de header, met dus nog witruimte eronder. Weet niet of dat ook kan met die code, maar als dat kan ben ik er erg benieuwd naar .quote:Op zaterdag 7 april 2007 18:23 schreef HuHu het volgende:
Er is een methode om je footer het volgende te laten doen: als er voldoende content is zit de footer onderaan de content, is er onvoldoende content dan zit de footer onderaan het scherm.
Alleen die code kan ik nu even niet bij .
.
Dat gaat daarmee niet. Hetzelfde probleem heb ik ook eens gehad. Je kan het prachtig oplossen door de min-height te gebruiken in je CSS. Die stel je dan zo in dat je content minimaal voorbij je header komt. Alleen IE ondersteunt dat niet .
Een oplossing die ik heb gebruikt is om ervoor te zorgen dat je content nooit te klein wordt. Dus als hij toch te klein is, dan stop je het in een extra div die er voor zorgt dat de pagina wordt opgerekt naar de minimale hoogte.
Dat werkt goed bij statische pagina's, waarbij je van te voren kunt zien hoe hoog hij moet worden. Als de content dynamisch erin wordt gezet gaat het lastig.
.Een oplossing die ik heb gebruikt is om ervoor te zorgen dat je content nooit te klein wordt. Dus als hij toch te klein is, dan stop je het in een extra div die er voor zorgt dat de pagina wordt opgerekt naar de minimale hoogte.
Dat werkt goed bij statische pagina's, waarbij je van te voren kunt zien hoe hoog hij moet worden. Als de content dynamisch erin wordt gezet gaat het lastig.
Er is wel een min-height CSS hack voor IE:
http://www.dustindiaz.com/min-height-fast-hack
Dan kan je dus een min-height aan je content div gooien, zodat deze nooit te klein wordt. En dan hang je de footer gewoon onder de content.
http://www.dustindiaz.com/min-height-fast-hack
Dan kan je dus een min-height aan je content div gooien, zodat deze nooit te klein wordt. En dan hang je de footer gewoon onder de content.
thanks, ik peer em al
Ik heb mijn hyperlinks donkergrijs, echter wil ik de hyperlinks die in een table-header (<th>) staan wit hebben.
Zowel "a" als "th" heb ik een eigen onderdeeltje in mijn stylesheet gegeven, moet ik nu iets als "th #a" doen?
Zowel "a" als "th" heb ik een eigen onderdeeltje in mijn stylesheet gegeven, moet ik nu iets als "th #a" doen?
| 1 2 | th a { color: donker-grijs; } |
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
# is voor id's:quote:Op woensdag 11 april 2007 20:34 schreef Geqxon het volgende:
Ik heb mijn hyperlinks donkergrijs, echter wil ik de hyperlinks die in een table-header (<th>) staan wit hebben.
Zowel "a" als "th" heb ik een eigen onderdeeltje in mijn stylesheet gegeven, moet ik nu iets als "th #a" doen?
"a" -> HTML element
"#a" -> element met id 'a'
".a" -> element met class 'a'
Graag gedaan. Beetje aparte gok als je weet dat een element iets anders dan een id op een element, maar dat terzijdequote:Op woensdag 11 april 2007 22:06 schreef Geqxon het volgende:
Zo ver gaat mijn kennis nog wel, ik gokte puur wat. Maar alsnog bedankt
WTF IE (6) probleem.
Het gaat om deze pagina. Rechts zie je een kopje 'Nieuw' staan waaronder de 10 meest recente boeken ingevoerd staan. Deze boeken stonden eerst in een <table> en werkte op zich prima, maar omdat de rest van de pagina ook netjes volgens het tableless principe gemaakt is en prima XHTML Strict en CSS valide is, besloot ik om daar ook maar <div>jes van te maken. Ziet ook mooier uit als je de pagina zonder stylesheet bekijkt zonder tabel natuurlijk.
Nu werkt het in Mozilla wel normaal, maar in IE6 gebeurt er iets heel mafs:
Hoe komt dit? :S
Het gaat om deze pagina. Rechts zie je een kopje 'Nieuw' staan waaronder de 10 meest recente boeken ingevoerd staan. Deze boeken stonden eerst in een <table> en werkte op zich prima, maar omdat de rest van de pagina ook netjes volgens het tableless principe gemaakt is en prima XHTML Strict en CSS valide is, besloot ik om daar ook maar <div>jes van te maken. Ziet ook mooier uit als je de pagina zonder stylesheet bekijkt zonder tabel natuurlijk.
Nu werkt het in Mozilla wel normaal, maar in IE6 gebeurt er iets heel mafs:
Hoe komt dit? :S
Ja, het is ook tabulaire data dus in feite 'mag' ik er een tabel voor gebruiken. Maar zoals ik al zei, is de rest van de pagina ook mooi tableless en conform de XHTML/CSS normpjes en 't ziet er leuker uit als je de pagina zonder stylesheet bekijkt. Tabellen met meer dan 2 kolommen zijn gewoon slordig zonder stylesheet.quote:Op donderdag 12 april 2007 09:12 schreef CraZaay het volgende:
Je kan je afvragen of dit geen tabullaire data is natuurlijk, al lost dit je probleem niet op
Wat mij betreft is die gedachtengang net zo erg als tabellen gebruiken voor lay-out. Je wilt nu koste wat kost geen tabellen gebruiken voor lay-out (lay-out zonder styling), terwijl het om de structuur gaat in de HTML. En binnen die structuur zou dit wat mij betreft gewoon in een tabel thuis horen. En dat is dan nog meer conform de HTML/CSS normpjes ook
Hmm, gaat me voornamelijk om hoe 't er zonder stylesheet uitziet, en als ik deze gegevens (waaronder een hoop imagelinks) in een tabel zet ziet het er gewoon rommelig uit. Qua structuur/semantiek maakt dit niks uit. Ik MAG er volgens de normen immers voor kiezen om dit in een tabel te proppen want het is in feite een beetje tabulaire data, maar kijk voor de lol eens in Mozilla met uitgeschakelde paginastijl. Deze structuur die je hier voor de Nieuwe boeken gebruikt ziet worden gaat later nog op héél véél pagina's op de site terug komen (boekenlijsten, striplijsten, reeksen, series, zoekresultaten, enz.) dus ik wil gewoon dat het mooi uitziet en werkt, niet dat de pagina zonder stylesheet gigantisch onoverzichtelijk is.
Zoekresultaten mogelijk wel, afhankelijk van de data die geretourneerd word. Maar een daadwerkelijk zoekformulier meestal niet hoor.
Ik snap het niet Tuvai.net. Kun je me eerst eens uitleggen waarom het er zonder CSS goed uit moet zien (voor zover dat kan)?
Ik streef dus altijd naar toegankelijkheid en een webpagina dient ook toegankelijk te zijn voor mensen zonder stylesheet. Denk hierbij ook aan gevallen als PDA's, WAP browsers, text-to-speech en textbrowsers (Lynx). Die lezen alles netjes van boven naar onder op, en in het geval van een tabel van links naar rechts. Als je in Mozilla Beeld > Paginastijl > Geen stijl selecteerd dan zie je de pagina zonder stylesheet. Doe dat bijvoorbeeld maar eens hier op Fok!.quote:Op donderdag 12 april 2007 17:51 schreef CraZaay het volgende:
Ik snap het niet Tuvai.net. Kun je me eerst eens uitleggen waarom het er zonder CSS goed uit moet zien (voor zover dat kan)?
Als het een tabel met daadwerkelijke tabulaire data is dan maakt dit niks uit, maar bij een grotere tabel waar ook plaatjes en dergelijke in voorkomen is het geen gezicht, en sommige programma's zullen dit dan ook niet goed oppikken. Verder is het natuurlijk ook puur een principekwestie van opmaak en inhoud gescheiden houden.
Misschien zijn er tags niet goed afgesloten?quote:Op donderdag 12 april 2007 00:22 schreef Tuvai.net het volgende:
WTF IE (6) probleem.
Het gaat om deze pagina. Rechts zie je een kopje 'Nieuw' staan waaronder de 10 meest recente boeken ingevoerd staan. Deze boeken stonden eerst in een <table> en werkte op zich prima, maar omdat de rest van de pagina ook netjes volgens het tableless principe gemaakt is en prima XHTML Strict en CSS valide is, besloot ik om daar ook maar <div>jes van te maken. Ziet ook mooier uit als je de pagina zonder stylesheet bekijkt zonder tabel natuurlijk.
Nu werkt het in Mozilla wel normaal, maar in IE6 gebeurt er iets heel mafs:
[afbeelding]
Hoe komt dit? :S
Dat is mooie praat, maar je pagina werkt nu niet, dus toegankelijk is hij op het moment niet.quote:Op donderdag 12 april 2007 18:16 schreef Tuvai.net het volgende:
[..]
Ik streef dus altijd naar toegankelijkheid en een webpagina dient ook toegankelijk te zijn voor mensen zonder stylesheet. Denk hierbij ook aan gevallen als PDA's, WAP browsers, text-to-speech en textbrowsers (Lynx). Die lezen alles netjes van boven naar onder op, en in het geval van een tabel van links naar rechts. Als je in Mozilla Beeld > Paginastijl > Geen stijl selecteerd dan zie je de pagina zonder stylesheet. Doe dat bijvoorbeeld maar eens hier op Fok!.
Als het een tabel met daadwerkelijke tabulaire data is dan maakt dit niks uit, maar bij een grotere tabel waar ook plaatjes en dergelijke in voorkomen is het geen gezicht, en sommige programma's zullen dit dan ook niet goed oppikken. Verder is het natuurlijk ook puur een principekwestie van opmaak en inhoud gescheiden houden.
Al eens getest met een tijdelijk bordertje rond die DIV?quote:Op donderdag 12 april 2007 00:22 schreef Tuvai.net het volgende:
WTF IE (6) probleem.
Het gaat om deze pagina. Rechts zie je een kopje 'Nieuw' staan waaronder de 10 meest recente boeken ingevoerd staan. Deze boeken stonden eerst in een <table> en werkte op zich prima, maar omdat de rest van de pagina ook netjes volgens het tableless principe gemaakt is en prima XHTML Strict en CSS valide is, besloot ik om daar ook maar <div>jes van te maken. Ziet ook mooier uit als je de pagina zonder stylesheet bekijkt zonder tabel natuurlijk.
Nu werkt het in Mozilla wel normaal, maar in IE6 gebeurt er iets heel mafs:
[afbeelding]
Hoe komt dit? :S
IE6 heeft problemen met 2 divs die nauw op elkaar aansluiten, ook naast elkaar te zetten. Op de een of andere manier heeft IE dus altijd een bepaalde marge ertussen nodig.
FF/Opera: 2 DIVs geloat op 50%/50% naast elkaar gaat goed, IE zet ze geheid onder elkaar.
dat dus.
Je pagina zou veel toegankelijker zijn wanneer je een tabel gebruikt, zeker met een goed gebruik van table headers. Een alternatieve user agent als een screen reader kan daarmee per regel een verband leggen tussen een kolom en de bijbehorende titel, wat het veel 'leesbaarder' maakt. Dit wordt ook zo opgelezen, en dus niet van boven naar onder. Je hoort dan per regel "auteur: naam, titel: naam", etc.quote:Op donderdag 12 april 2007 18:16 schreef Tuvai.net het volgende:
[..]
Ik streef dus altijd naar toegankelijkheid en een webpagina dient ook toegankelijk te zijn voor mensen zonder stylesheet. Denk hierbij ook aan gevallen als PDA's, WAP browsers, text-to-speech en textbrowsers (Lynx). Die lezen alles netjes van boven naar onder op, en in het geval van een tabel van links naar rechts. Als je in Mozilla Beeld > Paginastijl > Geen stijl selecteerd dan zie je de pagina zonder stylesheet. Doe dat bijvoorbeeld maar eens hier op Fok!.
Als het een tabel met daadwerkelijke tabulaire data is dan maakt dit niks uit, maar bij een grotere tabel waar ook plaatjes en dergelijke in voorkomen is het geen gezicht, en sommige programma's zullen dit dan ook niet goed oppikken. Verder is het natuurlijk ook puur een principekwestie van opmaak en inhoud gescheiden houden.
Een overzicht van boeken met per boek een auteur, titel, etc. is simpelweg tabulaire data. Dat het "geen gezicht" is, is wat mij betreft geen argument. Zo te lezen ben je net als ik een voorstander van een strikte scheiding van structuur, presentatie en gedrag. Dat het "geen gezicht" is doet er dus niet toe: de structuur is wanneer je een tabel gebruiikt simpelweg beter, omdat dit beter toegankelijk is voor alternatieve user agents. Hoe geef je anders aan in welk veld een titel staat, en in welk veld een auteur? Daarnaast kunnen zo'n beetje alle user agents prima omgaan met tabulaire data, inclusief PDA's, etc.
De principekwestie is inderdaad opmaak en inhoud gescheiden houden, en dat doe je dus niet wanneer je enkel betekenis (= structuur) geeft aan je data door middel van styling.
Heb je een test case hiervoor? Bij mij sluiten div's in IE namelijk ook altijd naadloos op elkaar aan. Daarnaast staan ze in FF en Opera ook onder elkaar wanneer je ze beide 50% breed maakt en er een border omheen zet (en een juist doctype gebruikt); de borders worden namelijk bij de breedte opgeteld waardoor 2 x 50% + border meer is dan 100%quote:Op donderdag 12 april 2007 20:19 schreef QM84 het volgende:
[..]
Al eens getest met een tijdelijk bordertje rond die DIV?
IE6 heeft problemen met 2 divs die nauw op elkaar aansluiten, ook naast elkaar te zetten. Op de een of andere manier heeft IE dus altijd een bepaalde marge ertussen nodig.
FF/Opera: 2 DIVs geloat op 50%/50% naast elkaar gaat goed, IE zet ze geheid onder elkaar.
Je, en daarom kom ik hier vragen waarom. Laat je kutposts dus achterwege of kom met een oplossing.quote:Op donderdag 12 april 2007 19:07 schreef Geqxon het volgende:
[..]
Dat is mooie praat, maar je pagina werkt nu niet, dus toegankelijk is hij op het moment niet.
Hmm, dus als ik table headers (<th>) gebruik dan leest bijvoorbeeld een text-to-speech programma bij elke kolom de bijbehorende table header op? Als dat zo is dan hoeft 't voor mij inderdaad niet per sé niet in een tabel te staan dus.quote:Op donderdag 12 april 2007 23:02 schreef CraZaay het volgende:
[..]
Je pagina zou veel toegankelijker zijn wanneer je een tabel gebruikt, zeker met een goed gebruik van table headers. Een alternatieve user agent als een screen reader kan daarmee per regel een verband leggen tussen een kolom en de bijbehorende titel, wat het veel 'leesbaarder' maakt. Dit wordt ook zo opgelezen, en dus niet van boven naar onder. Je hoort dan per regel "auteur: naam, titel: naam", etc.
Een overzicht van boeken met per boek een auteur, titel, etc. is simpelweg tabulaire data. Dat het "geen gezicht" is, is wat mij betreft geen argument. Zo te lezen ben je net als ik een voorstander van een strikte scheiding van structuur, presentatie en gedrag. Dat het "geen gezicht" is doet er dus niet toe: de structuur is wanneer je een tabel gebruiikt simpelweg beter, omdat dit beter toegankelijk is voor alternatieve user agents. Hoe geef je anders aan in welk veld een titel staat, en in welk veld een auteur? Daarnaast kunnen zo'n beetje alle user agents prima omgaan met tabulaire data, inclusief PDA's, etc.
De principekwestie is inderdaad opmaak en inhoud gescheiden houden, en dat doe je dus niet wanneer je enkel betekenis (= structuur) geeft aan je data door middel van styling.
Je kan nog aardig wat doen ook om dat te customizen (bijvoorbeeld wanneer de th "auter van het boek" is, een screen reader vertellen dat 'ie alleen "auteur" op moet lezen). Ik zal straks eens kijken of ik m'n bron terug kan vinden, volgens mij uit een boek wat op kantoor in de kast staat.quote:Op vrijdag 13 april 2007 08:30 schreef Tuvai.net het volgende:
[..]
Je, en daarom kom ik hier vragen waarom. Laat je kutposts dus achterwege of kom met een oplossing.
[..]
Hmm, dus als ik table headers (<th>) gebruik dan leest bijvoorbeeld een text-to-speech programma bij elke kolom de bijbehorende table header op? Als dat zo is dan hoeft 't voor mij inderdaad niet per sé niet in een tabel te staan dus.
en jawel hoor. Ik heb het design van een website gemaakt. Lekker opgebouwd. Ziet er goed uit in IE7, Opera 9.20 en FF 2.0.0.3.
Ik check in IE6, gaan er gewoon twee flinke dingen mis. Mijn middenstuk wordt eronder gebeukt en mijn menu is niet meer netjes gecentreerd. Dik balen dus.
Iemand een idee hoe ik dit op kan lossen want na flink klooien krijg ik het niet goed en mijn CSS lijkt me wel ok.
De website staat hier:
http://www.sieval.com/new/
Iemand dus een idee?
Ik check in IE6, gaan er gewoon twee flinke dingen mis. Mijn middenstuk wordt eronder gebeukt en mijn menu is niet meer netjes gecentreerd. Dik balen dus.
Iemand een idee hoe ik dit op kan lossen want na flink klooien krijg ik het niet goed en mijn CSS lijkt me wel ok.
De website staat hier:
http://www.sieval.com/new/
Iemand dus een idee?
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
Probleempje: ik heb nu hele leuke rollover buttontjes maar ik krijg ze enkel onder elkaar en niet nast elkaar! Iemand een idee hoe ik dat wel zo krijg?
CSS:
HTML:
uitkomst:
Iemand die me kan helpen ???
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 | display: block; width: 186px; height: 20px; background-image: url(../_gfx/menu/weblog.gif); background-position: 0 0; margin-bottom: 10; margin-right: 10; } a#buttonweblog:hover { background-position: -186px 0; } a#buttonphotos { display: block; width: 186px; height: 20px; background-image: url(../_gfx/menu/photos.gif); background-position: 0 0; margin: 0; } a#buttonphotos:hover { background-position: -186px 0; } a .alt { display: none; } |
HTML:
| 1 2 | <a id="buttonphotos" href="#"><span class="alt">Photogallery</span></a> |
uitkomst:
Iemand die me kan helpen ???
elk item is een a, die komen standaard onder elkaar. Als je ze naast elkaar wilt hebben kan je ze allebei een float:left meegeven css.
Ik gebruik zelf hiervoor trouwens altijd een ul met li's erin.
Ik gebruik zelf hiervoor trouwens altijd een ul met li's erin.
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
mijn dank is groot! terwijl ik al zo vaak met flaot: left heb gewerktquote:Op woensdag 25 april 2007 10:27 schreef hornage het volgende:
elk item is een a, die komen standaard onder elkaar. Als je ze naast elkaar wilt hebben kan je ze allebei een float:left meegeven css.
Ik gebruik zelf hiervoor trouwens altijd een ul met li's erin.
Na een tijdje geen sites meer te hebben gebouwd heb ik me eens verdiept in css en nu zit ik wat te knutselen en loop ik tegen (uiteraard :P) IE6 frustraties aan.
Ik wilde een simpele rollover button maken van een standaard linkje, dus zo dat je met
automatisch een mooi plaatje krijgt met rollover-effect. De tekst moet onder dat plaatje staan, en dat is het probleem.
Mijn css voor dit stukje is:
Dat truckje met line height gebruikte ik omdat IE 6 de tekst anders niet netjes onderaan kreeg. Maar nu neemt datzelfde IE6 juist weer te veel ruimte; hij pakt de totale line height als hoogte van het blok, in plaat van de height. Hoe kan ik dit aanpassen, of is er een andere manier om dit in IE6 werkend te krijgen? Alvast bedankt :)
Ik wilde een simpele rollover button maken van een standaard linkje, dus zo dat je met
| 1 |
automatisch een mooi plaatje krijgt met rollover-effect. De tekst moet onder dat plaatje staan, en dat is het probleem.
Mijn css voor dit stukje is:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | position: static; text-align: center; display: block; line-height: 190px; width: 90px; height: 120px; background: url("images/button_normal.jpg") 0 0 no-repeat; text-decoration: none; } a.rollover:hover { background: url("images/button_roll.jpg") 0 0 no-repeat; } |
Dat truckje met line height gebruikte ik omdat IE 6 de tekst anders niet netjes onderaan kreeg. Maar nu neemt datzelfde IE6 juist weer te veel ruimte; hij pakt de totale line height als hoogte van het blok, in plaat van de height. Hoe kan ik dit aanpassen, of is er een andere manier om dit in IE6 werkend te krijgen? Alvast bedankt :)
Mary had a little lamb
Then Mary had dessert
Then Mary had dessert
Daarmee ontstaat hetzelfde probleem als bij IE ook op andere browsers. En als ik die padding-top te laag zet, verschuift de tekst mee omhoog.
Mary had a little lamb
Then Mary had dessert
Then Mary had dessert
Nee, a's komen standaard naast elkaar. Ze komen hier onder elkaar vanwege de uitdrukkelijk opgegeven 'display: block'. Dat is dan ook wel weer nodig als je ze een breedte, hoogte, marge enz. wilt geven.quote:Op woensdag 25 april 2007 10:27 schreef hornage het volgende:
elk item is een a, die komen standaard onder elkaar.
Je wilt als ik het goed begrijp toch gewoon een link met een achtergrondafbeelding op de a en visueel de tekst onder die afbeelding? Zo ja, dan gaat padding-top prima werken.quote:Op woensdag 25 april 2007 14:08 schreef De_Hertog het volgende:
Daarmee ontstaat hetzelfde probleem als bij IE ook op andere browsers. En als ik die padding-top te laag zet, verschuift de tekst mee omhoog.
Welk doctype gebruik je en welke html/css heb je gebruikt icm padding-top?
| 1 2 3 4 5 6 7 8 9 10 11 12 | position: absolute; height: 100%; margin: 0px; margin-left: 15px; padding: 5px; border-left: 1px #000000 solid; border-right: 1px #000000 solid; background-color: #E9E9E9; } |
Lijkt mij enigszins duidelijk wat het doet. Wat mij niet lukt:
-Height 100% zorgt voor een kleine scrollbar vanwege de 5px padding
-Bij het verkleinen van mijn venster wordt de div "container" even groot als het venster, als ik dan naar beneden scroll is alle data die er daardoor niet meer oppast vanaf gevallen.
Hoe kan ik zoiets slim aanpaken? :)
Komt het resultaat meer in de buurt als je niet een height: 100% opgeeft maar de top- en bottom-waardes, afhankelijk van de dikte van padding en border?
Dat is inderdaad wat ik wil. Als ik Padding-top gebruik in de code hierboven, dan maakt hij de ruimte tussen de knoppen óók veel te groot.quote:Op woensdag 25 april 2007 23:23 schreef CraZaay het volgende:
[..]
Je wilt als ik het goed begrijp toch gewoon een link met een achtergrondafbeelding op de a en visueel de tekst onder die afbeelding? Zo ja, dan gaat padding-top prima werken.
CSS: zelfde als boven, maar dan met padding-top, dus:quote:Welk doctype gebruik je en welke html/css heb je gebruikt icm padding-top?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | position: static; text-align: center; display: block; padding-top: 80px; width: 90px; height: 120px; background: url("images/button_normal.jpg") 0 0 no-repeat; text-decoration: none; } a.rollover:hover { background: url("images/button_roll.jpg") 0 0 no-repeat; } |
Doctype:
| 1 |
Mary had a little lamb
Then Mary had dessert
Then Mary had dessert
My god, dat was nog simpeler dan ik dacht. Super, dit werkt echt geweldig!quote:Op zaterdag 28 april 2007 14:45 schreef AnGabhar het volgende:
Komt het resultaat meer in de buurt als je niet een height: 100% opgeeft maar de top- en bottom-waardes, afhankelijk van de dikte van padding en border?
In welke browsers is dat allemaal getest? Ik hoor 'm nu voor het eerst namelijk en ben wel benieuwd hoe bruikbaar 'ie isquote:Op zaterdag 28 april 2007 14:45 schreef AnGabhar het volgende:
Komt het resultaat meer in de buurt als je niet een height: 100% opgeeft maar de top- en bottom-waardes, afhankelijk van de dikte van padding en border?
Je knop moet dus 200px hoog worden (height + padding)?quote:Op zaterdag 28 april 2007 15:18 schreef De_Hertog het volgende:
[..]
Dat is inderdaad wat ik wil. Als ik Padding-top gebruik in de code hierboven, dan maakt hij de ruimte tussen de knoppen óók veel te groot.
[..]
CSS: zelfde als boven, maar dan met padding-top, dus:
[ code verwijderd ]
Even getest:quote:Op zondag 29 april 2007 10:34 schreef CraZaay het volgende:
[..]
In welke browsers is dat allemaal getest? Ik hoor 'm nu voor het eerst namelijk en ben wel benieuwd hoe bruikbaar 'ie is
Opera 4 t/m 9: check
Mozilla: check (vanaf Milestone 3)
IE7: check
IE 6-: fout
Netscape 4: fout (verrassing)
Aandachtspuntjes: standaardmodus (anders werkt IE niet); html, body {height: 100%; margin: 0; padding: 0} geeft misschien net iets meer kans op succes.
Dat was inderdaad het probleem, dank je Ik dacht dat hoogte de hoogte van het totale blok was en padding hoe ver het van de bovenkant binnen dat blok af stond, had niet door dat beide waardes bij elkaar werden opgeteld. Bedankt voor de tip, het werkt nu (al moet ik IE nog steeds testen, enig voorbehoud dus.. )quote:Op zondag 29 april 2007 10:36 schreef CraZaay het volgende:
[..]
Je knop moet dus 200px hoog worden (height + padding)?
Mary had a little lamb
Then Mary had dessert
Then Mary had dessert
IE6- niet dus, maar IE6 zelf wel? Firefox en Safari ook getest toevallig (of een testcase online waar ik dan kan doen )?quote:Op zondag 29 april 2007 13:07 schreef AnGabhar het volgende:
[..]
Even getest:
Opera 4 t/m 9: check
Mozilla: check (vanaf Milestone 3)
IE7: check
IE 6-: fout
Netscape 4: fout (verrassing)
Aandachtspuntjes: standaardmodus (anders werkt IE niet); html, body {height: 100%; margin: 0; padding: 0} geeft misschien net iets meer kans op succes.
Met dat doctype gaat het in IE ook werkenquote:Op zondag 29 april 2007 13:17 schreef De_Hertog het volgende:
[..]
Dat was inderdaad het probleem, dank je Ik dacht dat hoogte de hoogte van het totale blok was en padding hoe ver het van de bovenkant binnen dat blok af stond, had niet door dat beide waardes bij elkaar werden opgeteld. Bedankt voor de tip, het werkt nu (al moet ik IE nog steeds testen, enig voorbehoud dus.. )
Alleen als je geen doctype zou gebruiken zou de padding er in IE niet bijgeteld worden (idem voor border).
IE6 niet, voor zover ik kan zien. Ik heb alle IE-versies sinds 3 apart geïnstalleerd, maar die losse installaties schijnen nog wel eens iets anders te doen dan een 'echte'.quote:
Firefox komt uit de Mozilla-stal, en alle Mozilla-versies sinds 1999 lijken het goed te doen. Safari kan ik niet testen. Het über-brakke 'Swift' (Webkit for Windows) wil geen lokale testpagina's laden (voor zover het nog niet binnen twee microseconden was vastgelopen na het opstarten). Maar over het algemeen is Safari's CSS-ondersteuning best redelijk gelovik.quote:Firefox en Safari ook getest toevallig (of een testcase online waar ik dan kan doen )?
Edit: Hier zou je Safari moeten kunnen testen.
[ Bericht 6% gewijzigd door AnGabhar op 29-04-2007 18:22:06 ]
Ik heb ook een (vermoedt ik) makkelijk probleem voor iemand die veel ervaring heeft met CSS :)
Mijn rechter tables moet bovenin komen te staan, echter zet hij hem na de laatste linkse table:
Mijn CSS is als volgt:
Kan iemand zien wat ik verkeerd doe?
Mijn rechter tables moet bovenin komen te staan, echter zet hij hem na de laatste linkse table:
Mijn CSS is als volgt:
| 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 | { background: #404040; } a:link { color: #33357F; text-decoration: none; } a:visited { color: #33357F; text-decoration: none; } a:hover { color: #7E97B8; text-decoration: none; } a:active { color: #7E97B8; text-decoration: none; } div.headermain { border: solid 1px; background-color: #FF00FF; background-image: url('header.jpg'); width: 970px; height: 130px; margin-right: auto; } div.leftsidebartable { position: relative; border: solid 1px; background-color: #FF00FF; width: 235px; margin-right: auto; text-align: left; } div.rightsidebartable { position: relative; border: solid 1px; background-color: #FF00FF; width: 235px; margin-left: auto; text-align: left; } div.wrap { position: relative; width: 970px; margin: 0px auto; text-align: center; } |
Kan iemand zien wat ik verkeerd doe?
Laat eerst maar eens zien hoe je je pagina hebt opgebouwd.quote:Op donderdag 3 mei 2007 19:01 schreef JortK het volgende:
Ik heb ook een (vermoedt ik) makkelijk probleem voor iemand die veel ervaring heeft met CSS
Mijn rechter tables moet bovenin komen te staan, echter zet hij hem na de laatste linkse table:
[[url=http://img167.imagevenue.com/loc426/th_11272_css_122_426lo.jpg]afbeelding][/URL]
Mijn CSS is als volgt:
[ code verwijderd ]
Kan iemand zien wat ik verkeerd doe?
float, google d'r maar 's op.quote:Op donderdag 3 mei 2007 19:01 schreef JortK het volgende:
Ik heb ook een (vermoedt ik) makkelijk probleem voor iemand die veel ervaring heeft met CSS
Mijn rechter tables moet bovenin komen te staan, echter zet hij hem na de laatste linkse table:
[[url=http://img167.imagevenue.com/loc426/th_11272_css_122_426lo.jpg]afbeelding][/URL]
Mijn CSS is als volgt:
[ code verwijderd ]
Kan iemand zien wat ik verkeerd doe?
Je class names zijn iig niet zo goed, los van je probleemquote:Op donderdag 3 mei 2007 19:01 schreef JortK het volgende:
Kan iemand zien wat ik verkeerd doe?
Beschrijf de inhoud van een element en niet de positie. Rechts en links kan zomaar veranderen in een design en als je dat met CSS op wilt lossen (waar CSS immers voor is), dan is het zo raar als een element met de class "leftthing" opeens rechts staat
Door gewoon margin: 0 auto; te gebruiken. Maar dan werkt het niet in IE. Het antwoord is eigenlijk makkelijker, door simpelweg de alignment weer op left te zetten .quote:Op zondag 6 mei 2007 00:11 schreef Flaccid het volgende:
Vraagje:
Hoe krijg je je site in het midden maar text-alignment gewoon left?
Alles in een div, met een width van bijvoorbeeld 700px, een margin-left van -350px (50% negatief) en een left-attribuut van 50%?
de body dan he (die margin: 0 auto)?quote:Op zondag 6 mei 2007 02:21 schreef DorentuZ het volgende:
[..]
Door gewoon margin: 0 auto; te gebruiken. Maar dan werkt het niet in IE. Het antwoord is eigenlijk makkelijker, door simpelweg de alignment weer op left te zetten .
Dat werkt prima in IE, mits je een pagina hebt die een standaard volgt en dus een correct doctype gebruikt.quote:Op zondag 6 mei 2007 02:21 schreef DorentuZ het volgende:
[..]
Door gewoon margin: 0 auto; te gebruiken. Maar dan werkt het niet in IE. Het antwoord is eigenlijk makkelijker, door simpelweg de alignment weer op left te zetten .
Ranzig Op een lagere resolutie verdwijnt een deel uit beeld en het kan veel simpeler met het genoemde "margin: 0 auto" (als het ook in IE op de Mac moet werken "margin: 0 auto 0 auto").quote:Op zondag 6 mei 2007 02:48 schreef Geqxon het volgende:
Alles in een div, met een width van bijvoorbeeld 700px, een margin-left van -350px (50% negatief) en een left-attribuut van 50%?
Op een wrapper div met een gedefinieerde breedte (anders is 'ie 100% breed en staat 'ie in feite dus al in het midden).quote:
Het is inderdaad beter om gewoon een container div aan te maken, die een vaste breedte te geven en vervolgens margin:0 auto; er op toe te passen. Het komt niet meer héél vaak voor, maar er zijn nog stééds mensen met een resolutie van 800 x 600, of zelfs lager. Daar moet je ook rekening mee houden.
Hoe krijg ik mijn footer altijd met mijn layout naar beneden (minimaal dan)?
[ Bericht 87% gewijzigd door Flaccid op 12-05-2007 19:16:12 ]
[ Bericht 87% gewijzigd door Flaccid op 12-05-2007 19:16:12 ]
Ik heb denk ik een fix voor Safari zoek. Mijn pagina heeft een "hidden" tabel, en zodra ik de visibility daarvan via javascript op "Visible" zet, krijg ik mooi de tabel te zien
Werkt in IE6, werkt in IE7, werkt in Firefox, werkt in Safari. Alleen onder Safari heeft de tabel enkel boven en links een rand, rechts en onder niet. Wanneer ik mjn venster resize, wordt de pagina weer goedgezet, en ziet de tabel er weer netjes uit.
Iemand tips hoe ik zoiets oplos?
Werkt in IE6, werkt in IE7, werkt in Firefox, werkt in Safari. Alleen onder Safari heeft de tabel enkel boven en links een rand, rechts en onder niet. Wanneer ik mjn venster resize, wordt de pagina weer goedgezet, en ziet de tabel er weer netjes uit.
Iemand tips hoe ik zoiets oplos?
Altijd onderaan de viewport of altijd onderaan je content?quote:Op donderdag 10 mei 2007 20:05 schreef Flaccid het volgende:
Hoe krijg ik mijn footer altijd met mijn layout naar beneden (minimaal dan)?
Visibility. Zodat hij hem wel van te voren tekent, en als de tabel erg lang wordt hij alvast wat ruimte "reserveert" door de pagina wat langer te makenquote:Op zaterdag 12 mei 2007 23:51 schreef CraZaay het volgende:
[..]
Gaat het om de 'visibility' of 'display' property?
viewportquote:Op zaterdag 12 mei 2007 23:50 schreef CraZaay het volgende:
[..]
Altijd onderaan de viewport of altijd onderaan je content?
Help!
[----------130px--------------][-------------------------------------------rest van de pagina-------------------------]
ik heb 2 divs. De linker wil ik 130 pixels breed hebben, de rechter moet schermvullend zijn. Hoe moet dit?
[----------130px--------------][-------------------------------------------rest van de pagina-------------------------]
ik heb 2 divs. De linker wil ik 130 pixels breed hebben, de rechter moet schermvullend zijn. Hoe moet dit?
De linker een float links geven met breedte van 130px en de andere ernaast met een margin links van 130px
| 1 2 3 4 5 6 7 8 | float:left; width: 130px; } #content{ margin-left: 130px; } |
Ik weet niet of dit onder safari ook werkt (ik verwacht van wel) maar ik kan mij herinneren ooit tegen een Firefox javascript/css bug op te lopen waarbij adjacent-sibling selectors niet correct werden geupdate na het invoegen van een node.quote:Op zondag 13 mei 2007 00:13 schreef Geqxon het volgende:
[..]
Visibility. Zodat hij hem wel van te voren tekent, en als de tabel erg lang wordt hij alvast wat ruimte "reserveert" door de pagina wat langer te maken :)
De workaround was daar om de display: waarde van de body op none te zetten en daarna weer terug op block. De pagina wordt dan opnieuw gerendert en het probleem is opgelost.
In js ziet dat er ongeveer zo uit (untested)
| 1 2 3 4 5 6 7 | { var body = document.getElementsByTagName('body').item(0); body.setAttribute('style', 'display: none;'); body.setAttribute('style'. 'display: block;'); } |
Hope for the best, prepare for the worst.
Vraagje, is het mogelijk om een frameset te vervangen door divs inclusief de mogelijkheid om een cell breder of minderbreed te maken? bv?
Just say hi!
Niet met CSS alleen. Daar heb je (flink) wat javascript voor nodig.quote:Op woensdag 16 mei 2007 21:34 schreef Chandler het volgende:
Vraagje, is het mogelijk om een frameset te vervangen door divs inclusief de mogelijkheid om een cell breder of minderbreed te maken? bv?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Met Javascript ja (DOM bewerken = gedrag = Javascript)quote:Op woensdag 16 mei 2007 21:34 schreef Chandler het volgende:
Vraagje, is het mogelijk om een frameset te vervangen door divs inclusief de mogelijkheid om een cell breder of minderbreed te maken? bv?
Er zijn ongetwijfeld genoeg libraries waarmee dat eenvoudig kan.
Hallo,
ik zit met een klein CSS probleem dat in FF de kop op steek. Ik heb de volgende exteren stylesheet :
In MSIE werkt deze code prima, alleen in Firefox is het net of A:active 'niet werkt'. Zodra ik over een link ga, wordt ie mooi wit, maar als ik klik en de muis weg beweeg blijft ie niet wit. In MSIE doet ie dit wel. Iemand suggesties hoe ik dit op kan lossen?? Alvast hartelijk dank.
edit: In Opera werkt de active ook niet.
ik zit met een klein CSS probleem dat in FF de kop op steek. Ik heb de volgende exteren stylesheet :
| 1 2 3 4 5 6 7 | A:visited {font-family: verdana, Helvetica, sans-serif;font-size: 11px;color:#cccccc;text-decoration:none;font-weight: bold;} A:hover {font-family: verdana, Helvetica, sans-serif;font-size: 11px;color:#ffffff;text-decoration:none;font-weight: bold;} A:active {font-family: verdana, Helvetica, sans-serif;font-size: 11px;color:#ffffff;text-decoration:none;font-weight: bold;} |
In MSIE werkt deze code prima, alleen in Firefox is het net of A:active 'niet werkt'. Zodra ik over een link ga, wordt ie mooi wit, maar als ik klik en de muis weg beweeg blijft ie niet wit. In MSIE doet ie dit wel. Iemand suggesties hoe ik dit op kan lossen?? Alvast hartelijk dank.
edit: In Opera werkt de active ook niet.
probeer het eens met kleine letters. Dit werkt wel in FF (net getest)
En het kan sowiezo een stuk netter.
Ik vind het trouwens best ranzig gecode, zo alles op 1 regel.
En het kan sowiezo een stuk netter.
| 1 2 3 4 5 6 7 8 9 | a:link {color:#cccccc;} a:visited {color:#cccccc;} a:hover {color:#ffffff;} a:active {color:#ffffff;} |
Ik vind het trouwens best ranzig gecode, zo alles op 1 regel.
dank voor de opschoning, maar hij werkt nog steeds niet bij mij :/ Hover gaat wel goed, maar na klikken blijft ie niet wit...quote:Op donderdag 24 mei 2007 13:33 schreef super-muffin het volgende:
probeer het eens met kleine letters. Dit werkt wel in FF (net getest)
En het kan sowiezo een stuk netter.
[ code verwijderd ]
Ik vind het trouwens best ranzig gecode, zo alles op 1 regel.
Je moet niet uitgaan van het gedrag dat Internet Explorer vertoont, dat is niet-standaard. :active voor links geldt zolang je de muis erop ingedrukt houdt en hoort niet langer toegepast te worden als je de muis weer loslaat.quote:Op donderdag 24 mei 2007 13:38 schreef dewitteparel het volgende:
[..]
dank voor de opschoning, maar hij werkt nog steeds niet bij mij :/ Hover gaat wel goed, maar na klikken blijft ie niet wit...
Volgens W3C is dat een mogelijkheid waarop een client om kan gaan met a:active. De implementatie van IE is net zo geldig. Neemt niet weg dat dit browsergedrag is, en niet verder te beinvloeden met CSS.quote:Op donderdag 24 mei 2007 22:01 schreef AnGabhar het volgende:
[..]
Je moet niet uitgaan van het gedrag dat Internet Explorer vertoont, dat is niet-standaard. :active voor links geldt zolang je de muis erop ingedrukt houdt en hoort niet langer toegepast te worden als je de muis weer loslaat.
Dat ben ik niet met je eens. W3C schrijft voor:quote:Op donderdag 24 mei 2007 22:09 schreef CraZaay het volgende:
[..]
Volgens W3C is dat een mogelijkheid waarop een client om kan gaan met a:active. De implementatie van IE is net zo geldig. Neemt niet weg dat dit browsergedrag is, en niet verder te beinvloeden met CSS.
Nadat een gebruiker op een link geklikt heeft, of er een deel van heeft geselecteerd, valt niet meer te rijmen met de bewoording "is being activated".quote:The :active pseudo-class applies while an element is being activated by the user.
Intussen heeft het gedrag van IE geleid tot talloze script kiddies die een gefocuste link (zij het per muis of per toetsenbord) scriptmatig weer ontfocussen, wat tot grote toegankelijkheidsproblemen leidt voor toetsenbordgebruikers. Maar ik dwaal af...
Internet Eplorer 6 vertoont veel rare fratsen met :hover en :focus, IE7 gelukkig al wat minder. Misschien toch beter om er een Javascriptje achter te hangen wat reageert op een onclick/onkeyup attribuut.
Of je gebruikt http://www.xs4all.nl/~peterned/csshover.html .quote:Op donderdag 24 mei 2007 22:36 schreef Tuvai.net het volgende:
Internet Eplorer 6 vertoont veel rare fratsen met :hover en :focus, IE7 gelukkig al wat minder. Misschien toch beter om er een Javascriptje achter te hangen wat reageert op een onclick/onkeyup attribuut.
Hope for the best, prepare for the worst.
Klein vraagje; ik krijg in mijn MAP (image map) de cursor niet veranderd van de area's
bv, of een van de vele anderen niet :{
| 1 |
bv, of een van de vele anderen niet :{
Just say hi!
Voor zover ik weer is het stylen van een <area> niet mogelijk. Het is immers geen normaal block HTML element, en is enkel bedoeld om een klikbaar gebied van je <map> aan te duiden.quote:Op donderdag 24 mei 2007 23:34 schreef Chandler het volgende:
Klein vraagje; ik krijg in mijn MAP (image map) de cursor niet veranderd van de area's
[ code verwijderd ]
bv, of een van de vele anderen niet
[ Bericht 1% gewijzigd door Tuvai.net op 25-05-2007 08:41:47 ]
Dat is helaas niet de oplossing die ik zoek, want vaak gebruik ik niet een hele afbeelding qua areamap maar een gedeelte er van
Just say hi!
Eventueel zou je dit met javascript kunnen oplossen, of wanneer de toepassing het toe laat geen map gebruiken? Ik zou niet weten wanneer ik voor het laatst een map gebruikt heb
Ik wil het voor GFXPOLL gebruiken, dat je ook op het plaatje kan klikken ivm de keuze eventueel met een kleur over de image heen...
Just say hi!
Ik heb ook een css probleempje.. ik heb een div met een logootje erin, die ik onderaan de pagina wil plaatsen.. dat betekent onderaan het scherm indien de inhoud van de pagina korter is dan het scherm, en helemaal onderaan de pagina als de inhoud langer is.
Zoals ik het nu voor elkaar heb blijft het logo, ook als de inhoud hoger is dan het scherm, onderaan het venster staan, en niet onderaan de pagina..
Huidige code:
Deze div zet ik helemaal onderaan in de code, net voor het afsluiten van de body tag. De body heeft een hoogte van 100%.
Situatie doet zich overigens voor in zowel IE6, IE7 als FF
Hoe krijg ik dit voor elkaar? :)
Zoals ik het nu voor elkaar heb blijft het logo, ook als de inhoud hoger is dan het scherm, onderaan het venster staan, en niet onderaan de pagina..
Huidige code:
| 1 2 3 4 5 6 | position: absolute; clear: both; right: 0; bottom: 0; } |
Deze div zet ik helemaal onderaan in de code, net voor het afsluiten van de body tag. De body heeft een hoogte van 100%.
Situatie doet zich overigens voor in zowel IE6, IE7 als FF
Hoe krijg ik dit voor elkaar? :)
Zoiets in je css:
Alle inhoud in een div#content zetten, het logo daarna in een div#logo.
Lijkt te werken in Opera, Firefox en IE7.
Zorg ervoor dat de padding-bottom van div#content even groot is als (of iets groter dan) de hoogte van de div#logo, anders verdwijnt de tekst erachter.
| 1 2 3 4 | body {min-height: 100%; position: relative; margin: 0; padding: 0} div#content {padding: 8px 8px 150px 8px} div#logo {position: absolute; bottom: 0; width: 100%; height: 150px} |
Alle inhoud in een div#content zetten, het logo daarna in een div#logo.
Lijkt te werken in Opera, Firefox en IE7.
Zorg ervoor dat de padding-bottom van div#content even groot is als (of iets groter dan) de hoogte van de div#logo, anders verdwijnt de tekst erachter.
Helaas, dat werkt niet.. een dergelijke constructie had ik al uitgeprobeerd, maar de browser lijkt niet te snappen dat ik met bottom: 0; de onderkant van de pagina, en niet het venster bedoel
edit: wat overigens heel vaag is is dat als ik de div#logo opneem in de content-div, het logo helemaal bovenaan de pagina terecht komt
edit2: wat overigens een goed alternatief zou zijn is position: fixed, waardoor het logo als het ware meescrollt met de pagina, maar dat wordt niet ondersteund in IE6, en ik ben genoodzaakt ook die browser te ondersteunen..
[ Bericht 25% gewijzigd door Intrepidity op 25-05-2007 23:21:27 ]
edit: wat overigens heel vaag is is dat als ik de div#logo opneem in de content-div, het logo helemaal bovenaan de pagina terecht komt
edit2: wat overigens een goed alternatief zou zijn is position: fixed, waardoor het logo als het ware meescrollt met de pagina, maar dat wordt niet ondersteund in IE6, en ik ben genoodzaakt ook die browser te ondersteunen..
[ Bericht 25% gewijzigd door Intrepidity op 25-05-2007 23:21:27 ]
Tja, in alle andere browsers werkt dit. Toch maar een tabel dan?
Hoe lang blijven mensen IE6 ondersteunen trouwens? Die achterlijke browser houdt het web al vijf jaar tegen. Nu IE7 een klein half jaar uit is mag er wat mij betreft best een tweede browser upgrade campaign komen waarbij IE6 met zachte dwang het ravijn in wordt geduwd. Mensen die IE6 blijven gebruiken ondanks de uitleg moeten dan maar met iets minder grafisch genoegen tevreden zijn.
Hoe lang blijven mensen IE6 ondersteunen trouwens? Die achterlijke browser houdt het web al vijf jaar tegen. Nu IE7 een klein half jaar uit is mag er wat mij betreft best een tweede browser upgrade campaign komen waarbij IE6 met zachte dwang het ravijn in wordt geduwd. Mensen die IE6 blijven gebruiken ondanks de uitleg moeten dan maar met iets minder grafisch genoegen tevreden zijn.
Totaal mee eens, maar de klant wil dit zo..
Achja ik pruts wel wat.. doe wel gewoon position: fixed, en dan heeft IE6 last van een niet meescrollend logootje, pech..
Achja ik pruts wel wat.. doe wel gewoon position: fixed, en dan heeft IE6 last van een niet meescrollend logootje, pech..
Hey hallo,
Ik ben maar weer een poging gaan wagen om met div's te gaan werken. Tot nu toe ukt het redelijk, alleen zit ik met een probleem.
Ik had dit bericht ook al eerder geplaatst in een los topic, maar bij deze ook hier... Kom er nog steeds niet uit namelijk.
Op de volgende site http://www.huttenbouw.nl/2007/ zie je een voorbeeld van de site, is Firefox zie dit er goed uit, alleen in IE zit ik met een probleem met de plaatsing van de content div. Ik kom er niet uit wat dit nu moet zijn. Kan iemand mij helpen?
Ik heb trouwens als voorbeeld deze site gebruikt: http://blog.html.it/layoutgala/
Alvast bedankt.
Ik ben maar weer een poging gaan wagen om met div's te gaan werken. Tot nu toe ukt het redelijk, alleen zit ik met een probleem.
Ik had dit bericht ook al eerder geplaatst in een los topic, maar bij deze ook hier... Kom er nog steeds niet uit namelijk.
Op de volgende site http://www.huttenbouw.nl/2007/ zie je een voorbeeld van de site, is Firefox zie dit er goed uit, alleen in IE zit ik met een probleem met de plaatsing van de content div. Ik kom er niet uit wat dit nu moet zijn. Kan iemand mij helpen?
Ik heb trouwens als voorbeeld deze site gebruikt: http://blog.html.it/layoutgala/
Alvast bedankt.
Gretsch fan
tvp, ben wel benieuwd naar de oplossing voor het probleem van Leujel
Motorrijden is beter dan sex.Elke bocht een nieuw hoogtepunt.
Geen idee waarom, maar IE doet het ineens goed als je een div met position:absolute om de div#content heen wikkelt.
Erven de elementen daaronder die positionering toevallig? dan zou het wel logisch zijnquote:Op zaterdag 26 mei 2007 17:05 schreef AnGabhar het volgende:
Geen idee waarom, maar IE doet het ineens goed als je een div met position:absolute om de div#content heen wikkelt.
Positionering wordt niet geërfd.
Maar geheel afgezien daarvan is dit gewoon een bug in IE. Iedere verklaring die poogt op 'logisch' uit te komen is daarom overbodig, we hoeven alleen een würgaround te vinden waardoor het wel werkt .
Maar geheel afgezien daarvan is dit gewoon een bug in IE. Iedere verklaring die poogt op 'logisch' uit te komen is daarom overbodig, we hoeven alleen een würgaround te vinden waardoor het wel werkt .
mmm dan weet ik niet wat je doet, maar bij mij werkt het niet.... Zit er weer zwaar over te twijfelen of ik niet moet overstappen naar tables e.d.quote:Op zaterdag 26 mei 2007 17:05 schreef AnGabhar het volgende:
Geen idee waarom, maar IE doet het ineens goed als je een div met position:absolute om de div#content heen wikkelt.
Maar het zou zo gewoon moeten kunnen lijkt me
Gretsch fan
IE gebruikt (in quirks mode) een ander box model (content box) dan Firefox (border box). Hierdoor wordt de content div te breed waardoor die niet meer naast de andere twee divs past. IE draait hier in quirksmode door het commentaar dat voor de DTD staat. Als je dat weg haalt draait IE ook in strict mode en gebruikt dan ook de content box methode. Het ziet er dan hetzelfde uit als in Firefox.quote:Op zaterdag 26 mei 2007 17:18 schreef AnGabhar het volgende:
Maar geheel afgezien daarvan is dit gewoon een bug in IE. Iedere verklaring die poogt op 'logisch' uit te komen is daarom overbodig, we hoeven alleen een würgaround te vinden waardoor het wel werkt .
Zie Box model tweaking.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Aha, dat had ik nog niet gezien. Dat verklaart het inderdaad.quote:Op zaterdag 26 mei 2007 17:55 schreef SuperRembo het volgende:
IE gebruikt (in quirks mode) een ander box model (content box) dan Firefox (border box).
Nou ja, dat hoeft hij in feite ook niet, als het niet past moet het gewoon over de rand heen lopen. Maar blijkbaar houden de quirks van IE niet op bij box sizing...quote:Hierdoor wordt de content div te breed waardoor die niet meer naast de andere twee divs past.
oe moet deze doctype er dan uit komen te zien?quote:Op zaterdag 26 mei 2007 17:55 schreef SuperRembo het volgende:
[..]
IE gebruikt (in quirks mode) een ander box model (content box) dan Firefox (border box). Hierdoor wordt de content div te breed waardoor die niet meer naast de andere twee divs past. IE draait hier in quirksmode door het commentaar dat voor de DTD staat. Als je dat weg haalt draait IE ook in strict mode en gebruikt dan ook de content box methode. Het ziet er dan hetzelfde uit als in Firefox.
Zie Box model tweaking.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Ik ben ff de weg kwijt...
Gretsch fan
Die DTD is op zich goed, maar het moet wel meteen de eerste regel zijn.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Ahh oke, dat was dus alles.... nu werkt het inderdaad!! Dank je!quote:Op zondag 27 mei 2007 12:29 schreef SuperRembo het volgende:
Die DTD is op zich goed, maar het moet wel meteen de eerste regel zijn.
Gretsch fan
Ik zit met het probleem dat ik een semi transparante achtergrond wil, maar de tekst moet wel 100% zichtbaar zijn. Ik heb t nu zo:
Achtergrond v/d tekst:
En voor de tekst zelf:
Maar in ie en ff blijft de tekst 50% transparant :?. Iemand een idee?
Achtergrond v/d tekst:
| 1 2 3 4 5 6 7 8 9 10 11 | { background-color:#95cc00; width:135px; padding:2px; padding-left:3px; filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; margin-top:1px; } |
En voor de tekst zelf:
| 1 2 3 4 5 6 7 8 9 10 | { color:black; font-family:arial; font-size:8pt; text-align:left; filter:alpha (opacity=100); -moz-opacity:.100; opacity:.100; } |
Maar in ie en ff blijft de tekst 50% transparant :?. Iemand een idee?
De #content erft de transparantie. De eerste optie is de #content niet in maar op de #bg te plaatsen, of (wat ik prefereer, omdat het tagsoup voorkomt) een semi-transparante png als achtergrondafbeelding gebruiken (voor IE6 met de CSS 'filter'-property).
Ja, ik las t ook al op de meeste sites het beter was om het met een png te doen, dan probeer ik dat maar .
Ik heb een probleem:
Ik heb een container div (#5), genaamd "container" wat relative als eigenschap heeft en geen height. Wel een min-height en wel 700px, wat meer dan op de screenshot te zien is.
Ik heb een div (#1), genaamd "links" wat absolute is. Hier heb ik wel vaste maten opgegeven. Zo is hij 0px van de bovenkant en linkerkant. Zoals je ziet klopt dat. Deze div is IN de container div geplaatst. Evenals div #2, #3 en #4.
Ik heb de container div een achtergrond kleur gegeven. Hoe kan het zijn dat hij niet mee gaat met de hoogte van de divs erin?
Om het wat duidelijker te maken hier de css code:
Div #5 - container div:
Div #1 - left:
Div #2, #3, #4: (allemaal bijna hetzelfde)
Wie kan me helpen?
Ik heb een container div (#5), genaamd "container" wat relative als eigenschap heeft en geen height. Wel een min-height en wel 700px, wat meer dan op de screenshot te zien is.
Ik heb een div (#1), genaamd "links" wat absolute is. Hier heb ik wel vaste maten opgegeven. Zo is hij 0px van de bovenkant en linkerkant. Zoals je ziet klopt dat. Deze div is IN de container div geplaatst. Evenals div #2, #3 en #4.
Ik heb de container div een achtergrond kleur gegeven. Hoe kan het zijn dat hij niet mee gaat met de hoogte van de divs erin?
Om het wat duidelijker te maken hier de css code:
Div #5 - container div:
| 1 2 3 4 5 6 7 | position:relative; margin:auto; width:860px; top:0px; left:0px; } |
Div #1 - left:
| 1 2 3 4 5 6 7 | position:absolute; top:0px; left:0px; width:200px; background:#000000; } |
Div #2, #3, #4: (allemaal bijna hetzelfde)
| 1 2 3 4 5 6 7 8 | position: absolute; left:0px; width:200px; height:300px; top:0px; background:#000000; } |
Wie kan me helpen?
Dat komt doordat alle elementen in je container absoluut gepositioneerd zijn. Absoluut gepositioneerde elementen nemen geen ruimte in. De container gedraagt zich dus alsof er geen elementen in zitten.quote:Op dinsdag 29 mei 2007 22:05 schreef Qunix het volgende:
Ik heb een probleem:
[afbeelding]
Ik heb een container div (#5), genaamd "container" wat relative als eigenschap heeft en geen height. Wel een min-height en wel 700px, wat meer dan op de screenshot te zien is.
Ik heb een div (#1), genaamd "links" wat absolute is. Hier heb ik wel vaste maten opgegeven. Zo is hij 0px van de bovenkant en linkerkant. Zoals je ziet klopt dat. Deze div is IN de container div geplaatst. Evenals div #2, #3 en #4.
Ik heb de container div een achtergrond kleur gegeven. Hoe kan het zijn dat hij niet mee gaat met de hoogte van de divs erin?
Om het wat duidelijker te maken hier de css code:
Div #5 - container div:
[ code verwijderd ]
Div #1 - left:
[ code verwijderd ]
Div #2, #3, #4: (allemaal bijna hetzelfde)
[ code verwijderd ]
Wie kan me helpen?
Hope for the best, prepare for the worst.
Als ik hem relative maak gaat het niet goed geloof ik.... Hoe los ik dit dan op?quote:Op dinsdag 29 mei 2007 23:09 schreef cyberstalker het volgende:
[..]
Dat komt doordat alle elementen in je container absoluut gepositioneerd zijn. Absoluut gepositioneerde elementen nemen geen ruimte in. De container gedraagt zich dus alsof er geen elementen in zitten.
Je bedoeltquote:Op donderdag 31 mei 2007 11:35 schreef Qunix het volgende:
<br clear="all" /> en het is opgelost.
| 1 |
De / is enkel nodig in XHTML.
Hope for the best, prepare for the worst.
Bedoel ik jaquote:Op donderdag 31 mei 2007 11:37 schreef cyberstalker het volgende:
[..]
Je bedoelt
[ code verwijderd ]
De / is enkel nodig in XHTML.
Hij is nu wel goed....quote:Op donderdag 31 mei 2007 15:41 schreef CraZaay het volgende:
Er is niets gefloat, dus er zijn ook geen floats te clearen volgens mij
Ik heb een table element in mijn CSS:
Hiermee zou die de tabel moeten centreren op het scherm (vanwege margins die op auto staan).
Nu doet hij dit in Firefox wel, maar in IE7 niet, heeft iemand enig idee wat er verkeerd gaat?
| 1 2 3 4 5 6 7 8 | { width: 300px; margin-left: auto; margin-right: auto; border: 1px solid #4d7bd6; border-collapse: collapse; } |
Hiermee zou die de tabel moeten centreren op het scherm (vanwege margins die op auto staan).
Nu doet hij dit in Firefox wel, maar in IE7 niet, heeft iemand enig idee wat er verkeerd gaat?
Doe anders eens gewoon margin:0 auto;. Ik ondervind met oude IE versies ook wel eens problemen als ik left/right/top/bottom declareer bij bijvoorbeeld padding, margin, etc.
Voorbeeld:
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
werkt niet.
padding:5px; of padding:5px 5px 5px 5px; weer wel.
Voorbeeld:
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
werkt niet.
padding:5px; of padding:5px 5px 5px 5px; weer wel.
Ik heb m nu zo:quote:Op zondag 3 juni 2007 19:56 schreef Tuvai.net het volgende:
Doe anders eens gewoon margin:0 auto;. Ik ondervind met oude IE versies ook wel eens problemen als ik left/right/top/bottom declareer bij bijvoorbeeld padding, margin, etc. :)
Voorbeeld:
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
werkt niet.
padding:5px; of padding:5px 5px 5px 5px; weer wel. :)
| 1 2 3 4 5 6 7 | { width: 300px; margin: 0 auto; border: 1px solid #4D7BD6; border-collapse: collapse; } |
Doet het ook niet :N
Vreemd, bij mij doet dit het wel. Zowel in IE7 als FireFox 2...quote:Op zondag 3 juni 2007 19:34 schreef JortK het volgende:
Ik heb een table element in mijn CSS:
[ code verwijderd ]
Hiermee zou die de tabel moeten centreren op het scherm (vanwege margins die op auto staan).
Nu doet hij dit in Firefox wel, maar in IE7 niet, heeft iemand enig idee wat er verkeerd gaat?
Ook dit is in IE afhankelijk van standaard- vs. compatibiliteitsmodus. Gebruik je de juiste doctype?
http://www.quirksmode.org/css/quirksmode.html
http://www.quirksmode.org/css/quirksmode.html
over dat table verhaal
je moet het parent element
position:relative;
meegeven
en
margin:0 auto
is ongeldig, aantal een einheid noemen dus bv 0px
(heb niet alles gelezen, excuses als het er al stond)
je moet het parent element
position:relative;
meegeven
en
margin:0 auto
is ongeldig, aantal een einheid noemen dus bv 0px
(heb niet alles gelezen, excuses als het er al stond)
0 is geldig. 0 is 0. Of het nou 0 px, em, %, pt, of wat dan ook is.quote:Op zondag 3 juni 2007 22:53 schreef ErikN het volgende:
margin:0 auto
is ongeldig, aantal een einheid noemen dus bv 0px
(heb niet alles gelezen, excuses als het er al stond)
2501ste view
Maar gelijk met een vraagje.
Je ziet dat de select door het overlappende gedeelte heen komt.. Hoe kan ik dit voorkomen?
Ik heb zelf z-index van het overlappende stuk op 999 gezet en van de select op -1 maar daar zat het niet in
Maar gelijk met een vraagje.
Je ziet dat de select door het overlappende gedeelte heen komt.. Hoe kan ik dit voorkomen?
Ik heb zelf z-index van het overlappende stuk op 999 gezet en van de select op -1 maar daar zat het niet in
Just say hi!
wellicht een z-index aan het element waar die select in zit?
laat eens wat code zien
laat eens wat code zien
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
Gaat 't alleen fout in IE6 of ouder?quote:Op woensdag 6 juni 2007 15:14 schreef Chandler het volgende:
[...]
Ik heb zelf z-index van het overlappende stuk op 999 gezet en van de select op -1 maar daar zat het niet in
In dat geval kan je het (voor IE5.5 en IE6) "oplossen" door er een iframe achter te plakken (zie voorbeeldje)
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Er zit een z-index aan het select element. met -1
En inderdaad gaat het fout in IE6 kon FF niet testen omdat ik daar het overvallende element niet werkend ik kreeg, waarom weet ik nog niet
Maar een iframe is helaas niet voor mij de juiste oplossing
En inderdaad gaat het fout in IE6 kon FF niet testen omdat ik daar het overvallende element niet werkend ik kreeg, waarom weet ik nog niet
Maar een iframe is helaas niet voor mij de juiste oplossing
Just say hi!
Waarom is dat geen oplossing?quote:Op woensdag 6 juni 2007 16:08 schreef Chandler het volgende:
Maar een iframe is helaas niet voor mij de juiste oplossing
(De iframe wordt niet gebruikt om iets in te zetten, het wordt alleen gebruikt om die comboboxen af te dekken. Een vreemde constructie, maar het werkt echt)
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Omdat ik niet precies weet hoe ik het moet inbouwen
Tevens kan ik zelf wel leven met het idee dat het er gewoon even doorheen te zien is...
Als je wilt kan ik wel een voorbeeld online zetten (via PB dan)
Tevens kan ik zelf wel leven met het idee dat het er gewoon even doorheen te zien is...
Als je wilt kan ik wel een voorbeeld online zetten (via PB dan)
Just say hi!
Het wordt eens tijd de tabellen te vervangen, hoe gemakkelijk ze ook zijn.
Helaas blijven de twee spans angstig dicht bij elkaar.... iemand tips?
[ Bericht 12% gewijzigd door Geqxon op 06-06-2007 20:49:04 ]
| 1 2 3 4 | <span class="leftcolumn">Username:</span> <span class="rightcolumn">Bla</span> </div> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | width: 50%; text-align: left; } .rightcolumn{ width: 50%; text-align: right; } .message{ width: 281px; margin-bottom: 2px; padding-left: 4px; font-family: verdana; font-size: 11px; color: #000000; line-height: 18px; border: 1px #000000 solid; background-color: #F5F5F5; } |
Helaas blijven de twee spans angstig dicht bij elkaar.... iemand tips?
[ Bericht 12% gewijzigd door Geqxon op 06-06-2007 20:49:04 ]
je wilt die recht span echt helemaal rechts uitgelijnd in je div hebben?
Dan moet je niet text-align gebruiken, maar een float:right
Dan moet je niet text-align gebruiken, maar een float:right
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
Het nadeel van floaten, is dat als de hoofdtekst leeg is, de complete div 2 pixels hoog wordt, en de gefloate tekst maar wat rondzweeft. Geen float dus
dan moet je met een padding of margin left gaan werken met de rechter vrees ik
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
of je div een vaste hoogte geven
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
Het is geen tabulaire data, het is een inlog / registreer box. Dus:
En in web 2.0 zijn tabellen voor niet tabulaire data verboden, dus zoek ik een manier hoe ik het anders kan doen :)
| 1 2 3 4 5 6 7 | | Username:| [______] | +----------+----------+ | Password:| [xxxxxx] | +----------+----------+ | [ Inloggen ] | +----------+----------+ |
En in web 2.0 zijn tabellen voor niet tabulaire data verboden, dus zoek ik een manier hoe ik het anders kan doen :)
Wat is er 'gek' aan een float div te gebruiken en die een hoogte mee te geven? Gebruik ik zelf ook vrij vaak.
Omdat ik juist geen vaste hoogte wil hebben, maar ik het dynamisch wil hebben. Zodat ik het over mijn complete website kan toepassen, alles met dezelfde klasse
Het is een formulier, dus <label>'s gebruiken? Maakt het toegankelijker en is goed te stylen.
Heeft overigens niets met "Web 2.0" te maken, maar met semantiek.
Heeft overigens niets met "Web 2.0" te maken, maar met semantiek.
Als je de div waar je float inzit overflow: auto; meegeeft zou dat opgelost moeten zijn. Tenminste als ik je goed begrijp (dat de parent div onder de float 'inklapt'). Als dat niet werkt kun je onder de div met float ook gewoon een div met clear: both; zetten (zonder float), maar dat kan extra ruimte opleveren.quote:Op woensdag 6 juni 2007 21:26 schreef Geqxon het volgende:
Het nadeel van floaten, is dat als de hoofdtekst leeg is, de complete div 2 pixels hoog wordt, en de gefloate tekst maar wat rondzweeft. Geen float dus
Even iets anders m.b.t. CSS. Je kunt ook je tabel headers locken.
Ik heb meerdere sites gevonden maar kan er niet achter komen hoe ik dit kan inbouwen in mijn eigen tabel. Dit omdat ik graag de hoogte van het scherm wil aanhouden.
Ik heb al geprobeerd met een vaste hoogte (tbody) met z-index en dergelijke zaken maar helaas het wil niet lukken,..
http://web.tampabay.rr.co(...)cked-column-csv.html hier heb ik wat mee gespeeld maar kom er echt niet meer uit..
Anyone die mij kan vertellen wat ik moet toevoegen aan
thead, tbody en eventueel table?
Ik heb meerdere sites gevonden maar kan er niet achter komen hoe ik dit kan inbouwen in mijn eigen tabel. Dit omdat ik graag de hoogte van het scherm wil aanhouden.
Ik heb al geprobeerd met een vaste hoogte (tbody) met z-index en dergelijke zaken maar helaas het wil niet lukken,..
http://web.tampabay.rr.co(...)cked-column-csv.html hier heb ik wat mee gespeeld maar kom er echt niet meer uit..
Anyone die mij kan vertellen wat ik moet toevoegen aan
thead, tbody en eventueel table?
Just say hi!
Je kunt je TBODY een hoogte en overflow: scroll; meegeven, maar hier werkt het alleen in Firefox, niet in Safari. Dus ik denk dat het in IE ook niet gaat werken.
Die max-height heb ik erin gezet omdat ik meen dat IE daar wel iets mee doet
| 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 | <thead> <tr> <th>Kolom1</th> <th>Kolom2</th> </tr> </thead> <tbody style="max-height: 5em; height: 5em; overflow: scroll;"> <tr> <td>Rij 1</td> <td>Rij 1</td> </tr> <tr> <td>Rij 2</td> <td>Rij 2</td> </tr> <tr> <td>Rij 3</td> <td>Rij 3</td> </tr> <tr> <td>Rij 4</td> <td>Rij 4</td> </tr> <tr> <td>Rij 5</td> <td>Rij 5</td> </tr> </tbody> </table> |
Die max-height heb ik erin gezet omdat ik meen dat IE daar wel iets mee doet
Nee, het werkt idd niet. Vind het zelf raar... Jammer dat er niet een stap voor stap tutorial over te vinden is
Dit werkt weer wel maar weer niet in FF
[ Bericht 87% gewijzigd door Chandler op 07-06-2007 19:54:50 ]
| 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 | <table cellspacing="0" cellpadding="0" width="100%"> <thead> <tr style="position:relative; top:expression(this.offsetParent.scrollTop);background-color:#dddddd;"> <th nowrap>Header A</th> <th nowrap>Header B</th> <th nowrap>Header C</th> </tr> </thead> <tbody> <tr><td>aaaaaaaaaaaaaaaaaaa</td><td>b</td><td>ccccccccccccccccccc</td></tr> <tr><td>a</td><td>bbbbbbb</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> </tbody> </table> </div> |
Dit werkt weer wel maar weer niet in FF
[ Bericht 87% gewijzigd door Chandler op 07-06-2007 19:54:50 ]
Just say hi!
Heb het al klaar..
Beiden de top veranderd met position; absolute...
[ Bericht 81% gewijzigd door Chandler op 08-06-2007 11:34:57 ]
Beiden de top veranderd met position; absolute...
[ Bericht 81% gewijzigd door Chandler op 08-06-2007 11:34:57 ]
Just say hi!
Geqxon heeft weer eens een probleempje .
Vier buttons, en wat ik wil bereiken zijn inline DIVs met een vaste breedte. De buttons zijn vrij grafish met een tekst erop, dus ik heb een DIV, met een tekst erin, een achtergrond afbeelding, een breedte van 200px en een hoogte van 30px. Is dit mogelijk?
Vier buttons, en wat ik wil bereiken zijn inline DIVs met een vaste breedte. De buttons zijn vrij grafish met een tekst erop, dus ik heb een DIV, met een tekst erin, een achtergrond afbeelding, een breedte van 200px en een hoogte van 30px. Is dit mogelijk?
Je kan niet zonder meer breedte opgeven als je display: inline gebruikt. Dat geeft verschillende resultaten bij verschillende browsers/DTD's.quote:Op vrijdag 8 juni 2007 11:39 schreef super-muffin het volgende:
Ik snap je probleem niet.
tvp
Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars
Ich schlupf in Frauenkleider, und lummel mich in Bars
Kun je ze niet gewoon floaten? Dan kun je namelijk wel een grootte opgeven en ze toch mooi achter elkaar zeten.quote:Op vrijdag 8 juni 2007 11:29 schreef Geqxon het volgende:
Geqxon heeft weer eens een probleempje .
Vier buttons, en wat ik wil bereiken zijn inline DIVs met een vaste breedte. De buttons zijn vrij grafish met een tekst erop, dus ik heb een DIV, met een tekst erin, een achtergrond afbeelding, een breedte van 200px en een hoogte van 30px. Is dit mogelijk?
Ja dat wist ik, maar je kan ze toch gewoon floaten?quote:Op vrijdag 8 juni 2007 11:53 schreef Berkery het volgende:
[..]
Je kan niet zonder meer breedte opgeven als je display: inline gebruikt. Dat geeft verschillende resultaten bij verschillende browsers/DTD's.
tvp
Bedankt, dat was hem! Weer een stukje verder met de websitequote:Op vrijdag 8 juni 2007 11:55 schreef Bigs het volgende:
[..]
Kun je ze niet gewoon floaten? Dan kun je namelijk wel een grootte opgeven en ze toch mooi achter elkaar zeten.
Is het mogelijk om een link te maken die niet aan de standaard link instelling voldoet? Die dus geen css opmaak mee krijgt, zonder daar een aparte class voor te maken?
Mary had a little lamb
Then Mary had dessert
Then Mary had dessert
Gewoon een style attribuut meegeven? Bv.quote:Op vrijdag 8 juni 2007 17:34 schreef De_Hertog het volgende:
Is het mogelijk om een link te maken die niet aan de standaard link instelling voldoet? Die dus geen css opmaak mee krijgt, zonder daar een aparte class voor te maken?
| 1 |
Klinkt als een heel goed idee. Behalve dan dat het CMS systeem hier het hele attribuut lekker weg smijt. Grr. Maar toch bedankt voor het meedenken Ik ga toch maar eens aan m'n baas vragen of ik iets met de CSS mag doen, schiet niet op zo.quote:Op vrijdag 8 juni 2007 17:44 schreef Bigs het volgende:
[..]
Gewoon een style attribuut meegeven? Bv.
[ code verwijderd ]
Mary had a little lamb
Then Mary had dessert
Then Mary had dessert
Als de link bijvoorbeeld in de div genaamd "Boekhouding zit" :quote:Op vrijdag 8 juni 2007 17:54 schreef De_Hertog het volgende:
[..]
Klinkt als een heel goed idee. Behalve dan dat het CMS systeem hier het hele attribuut lekker weg smijt. Grr. Maar toch bedankt voor het meedenken ;) Ik ga toch maar eens aan m'n baas vragen of ik iets met de CSS mag doen, schiet niet op zo.
| 1 2 3 | text-decoration: none } |
:)
Oh, als ik bij de css kom is het geen probleem, maar daar moet ik toestemming voor hebben. Maar maakt niet uit, dat ga ik morgen regelen, dan is het zo opgelost. Ik probeerde het eerst te omzeilen, maar ja, als het cms niet mee werkt..quote:Op vrijdag 8 juni 2007 18:29 schreef Geqxon het volgende:
[..]
Als de link bijvoorbeeld in de div genaamd "Boekhouding zit" :
[ code verwijderd ]
Mary had a little lamb
Then Mary had dessert
Then Mary had dessert
Ik zit met een klein vaag iets.
Ik wil graag de cijfers op 2 pixels van de top en 2pixels van rechts maar dit krijg ik niet voor elkaar. Ik heb van alles geprobeerd maar helaas....
Stylesheet
:Y)
Ik wil graag de cijfers op 2 pixels van de top en 2pixels van rechts maar dit krijg ik niet voor elkaar. Ik heb van alles geprobeerd maar helaas....
Stylesheet
| 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 | padding: 0; margin-bottom: 20px; height: 75px; background-color: #d0c3ac; border: 1px solid #c8b99e; width; 90%; } .comment .big { position: absolute; top: 0; color: #d8cfbd; font-family: "Times New Roman", Times, serif; font-size: 77px; z-index: 10; margin: 0px; padding: 0px; padding-top: 0px; width: 100%; text-align: right; } .comment .body { padding: 5px; z-index: 10; } .comment .date { font-style: italic; font-size: 10px; display: inline; font-weight: bold; } .comment .author { font-size: 13px; padding: 0 0 2px 0; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; } div { position: relative; } |
:Y)
Just say hi!
Situatie: Ik heb een div met tekst erin. Links er rechts IN de div een lang en smal menu, die via absolute waarde ingesteld is.
Probleem: Als de tekst kleiner dan het menu, dan wordt de div uiteraard even groot als de tekst, de menu's boren zich dan dwars door de complete website heen.
Gewenst: De div wil ik het liefst zo maken dat hij altijd even lang als de menu's is, en als de tekst langer is dat hij de net zo lang als de tekst is.
Kan dit? Dus een clear:both voor een float zeg maar
Probleem: Als de tekst kleiner dan het menu, dan wordt de div uiteraard even groot als de tekst, de menu's boren zich dan dwars door de complete website heen.
Gewenst: De div wil ik het liefst zo maken dat hij altijd even lang als de menu's is, en als de tekst langer is dat hij de net zo lang als de tekst is.
Kan dit? Dus een clear:both voor een float zeg maar
Waarom absoluut? De de ene div links en de andere rechts floaten kan toch ook?
En omdat jij het bent:
http://www.danielpunt.nl/geqxon.html
Als ik je tenminste goed begrepen heb.
En omdat jij het bent:
http://www.danielpunt.nl/geqxon.html
Als ik je tenminste goed begrepen heb.
Je hebt mij perfect begrepen! En dit is een klassiek voorbeeld van uren lang gefixeerd op een bepaalde oplossing zitten, waarbij een frisse blik een goede oplossing kan bieden. Bedankt voor je frisse blik
Dit is al de tweede keer dat floaten de oplossing voor je probleem is. Als ik jou was zou ik me eens wat meer verdiepen in de mogelijkheden van floatsquote:Op donderdag 14 juni 2007 16:19 schreef Geqxon het volgende:
Je hebt mij perfect begrepen! En dit is een klassiek voorbeeld van uren lang gefixeerd op een bepaalde oplossing zitten, waarbij een frisse blik een goede oplossing kan bieden. Bedankt voor je frisse blik
Dat hebben we allemaal wel eens. En meestal zijn het dan ook van die lullige oplossingen, dan denk je gewoon te moeilijk.quote:Op donderdag 14 juni 2007 16:19 schreef Geqxon het volgende:
Je hebt mij perfect begrepen! En dit is een klassiek voorbeeld van uren lang gefixeerd op een bepaalde oplossing zitten, waarbij een frisse blik een goede oplossing kan bieden. Bedankt voor je frisse blik
Voor de rest wat Bigs zegt dus
Dat is *volgens mij* om bandbreedte uit te sparen. Door de indents, quotes en doctype ed weg te laten scheelt dat heel wat. Zeker voor een pagina als de Google startpagina die zo'n beetje overal als startpagina staat.quote:Op dinsdag 20 maart 2007 13:12 schreef Geqxon het volgende:
Mijn god, wat is de zoekpagina van Google een rotzooi. Van een bedrijf dat dergelijke kennis van AJAX heeft, een enorme omzet maakt, en imho een enorme status heeft, is de sourcecode pure bagger. Geen doctype, geen XHTML, amper quotes om HTML eigenschappen, geen indents, niet alles net op losse regels, *ril*
Nu is dit wel een heel ander voorbeeld .quote:Op donderdag 14 juni 2007 16:41 schreef Bigs het volgende:
[..]
Dit is al de tweede keer dat floaten de oplossing voor je probleem is. Als ik jou was zou ik me eens wat meer verdiepen in de mogelijkheden van floats
Mijn probleem zat hem er meer in dat ik een statische pagina dynamisch wou maken, en door de bergen code dacht ik gewoon even niet fris
Gedeeltelijk waar, maar semantisch gezien klopt er ook gewoon geen hol van en de html voldoet op tig punten niet aan de standaardenquote:Op donderdag 14 juni 2007 17:20 schreef super-muffin het volgende:
[..]
Dat is *volgens mij* om bandbreedte uit te sparen. Door de indents, quotes en doctype ed weg te laten scheelt dat heel wat. Zeker voor een pagina als de Google startpagina die zo'n beetje overal als startpagina staat.
