[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5
quote: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 bepalenOp 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
quote:ThanksOp 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 ]
) 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 ]
quote: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).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.
quote: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.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.
quote:het lijkt me sterk dat het komt door u { } en u staat ook niet voor underlined.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
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.
quote:super-muffin = heldOp 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
zulk soort complimenten moedigen aan om door te gaan met helpen.
quote:HahaOp 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.
daar ben ik blij om Nu je er toch bent, weet jij ook een goede site voor CSS tips, afkortingen etc?
quote:Puur voor CU2 / myspace truukjes? Of CSS in het algemeen?Op dinsdag 13 februari 2007 16:34 schreef DutchErrorist het volgende:
[..]
Haha
Nu je er toch bent, weet jij ook een goede site voor CSS tips, afkortingen etc?
quote:Beide eigenlijkOp 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 het echte CSS gebruik ik vaak www.w3schools.com en af en toe gigadesign.be
quote:Haha bedanktOp 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]
quote:Lijkt mij een mooie kandidaat voor een unordered listOp 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
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 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
quote: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.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.
| 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?
| 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 ]
quote:Misschien snapt Safari het wel als je de eerste cell een colspan=1 geeft?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?
quote:Je bent sowieso een accolade vergeten aan het einde.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
quote:de accolade sotnd er wel maar was niet mee gekopieerd per ongelukOp 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 ?..
| 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 :)
quote:gelukt, dankje!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 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?
quote: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 100Op 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.
quote:Heb je hier wat aan?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/
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 ]
quote:Je layout hoeft geen flexibele breedte te hebben, maar een vaste breedte voor de hele site?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!
quote:]http://bluerobot.com/web/css/center1.html[/quote][/url]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.
| 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
Om maar over de engszins perfectionistische punt-slash aan het begin te zwijgen
[ Bericht 34% gewijzigd door Whizzkith op 11-03-2007 10:46:00 ]
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.
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?
Nog een vraag:
1 regel
2 woorden, warvan het ene links uitgelijnd moet worden, en het andere rechts. Hoe doe je dat?
quote:Het rechter woord in een span, en een float:right erin?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?
quote: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.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.
quote:ik ben er nog steeds niet uit. met percentages werken is geen optie. iemand nog?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.
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?
:active zou hiervoor moeten werken, maar werkt niet (het werkt wel: het menu komt na de klik wel zichtbaar, maar gaat direct weer weg...
quote:sinds IE7 niet meer (wordt ook op andere elementen ondersteund)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
quote:zie de eerste link, die werkt onder FF, IE6 & 7 (daar heb ik em onder getestOp 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 ]
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.
quote:das waarOp 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.
quote:...die javascript aan heeft staanOp zaterdag 17 maart 2007 13:11 schreef SuperRembo het volgende:
Ja met javascript erbij lukt het natuurlijk in elke browser.
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:ik heb em niet zelf gebouwd, was een kant en klaar templateOp 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.
quote:tis op z'n zachts gezegd vreemd als je anno 2007 je JS uit hebt staan..Op zondag 18 maart 2007 10:59 schreef CraZaay het volgende:
[..]
...die javascript aan heeft staan
dan doet grofweg 70% v/d sites het niet (goed) meer.
quote: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".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.
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?
quote: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..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".
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?
| 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 ]
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
quote: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.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..
quote:Dat doe je dan vast met IE, die verbergt dat je backslashes gebruikt en gooit ze direct om naar normale slashes. Firefox niet.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..
quote:uhhh heOp 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..
quote:Mierenneuken op verkeerde slashes? Nee, FF doet wat jij vraagt, IE hoopt dat je het zo bedoelt. Verschil!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..
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?
Of een <br class=clear /> .clear { clear: both }
Ik had al iets geprobeerd met dat overflow: auto, maar toen had ik een typfout gemaakt zie ik nu
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
quote:Ja, maar de padding wordt wordt wel bij de afmetingen van de box opgeteld. Dus: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
-edit- maar hoe bedoel je dit met een handig element?
Ik zal nu dan even het stukje style sheet aanpassen..
quote: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.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.| 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
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:
quote:Heb je enig idee waarom ik een H2 koos voor de titel, en niet een P?ik heb het net even met een P element geprobeerd maar dit wil ook niet echt lukken
quote: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).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 ]
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?
quote: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.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
quote:'diepe block', wat moet ik me daar bij voorstellen? Padding en 'display: inline' gaan niet echt goed samenNu is de uitkomst goed, en maakt het niet uit hoeveel a'tjes ik gebruik
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.
quote: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.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
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?
quote:En waarom zou dat bij die H2 niet kunnenOp 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; } |
| 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?
quote: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.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
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
| 1 2 3 4 5 6 7 | color: white; padding-top: 1px; padding-left: 5px; font-size: 15px; background-color: blue; margin: 0; |
quote: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.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>.
quote: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 zienOp woensdag 21 maart 2007 17:01 schreef SuperRembo het volgende:
Maar als je er geen normale link achter zet dan is het behoorlijk nutteloos.
quote:Die milliseconden zullen ze toch wel overleven?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.
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
quote:Qua PHP bedoel je? Dat zou normaliter toch echt niet merkbaar moeten zijn volgens mij.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!
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
quote:Mijn laatste opmerking was op basis van de sourcesOp 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).
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
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)
Google had wel wat oplossingen maar dan werden het hidden inputs icm javascript en dat wil ik niet.
Nouja pech dan.
Mijn file upload is ook niet gestyled.
Anders wordt het inderdaad Javascript. Ook een optie natuurlijk
| 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
quote:Dan kan je dat plaatje als background op de list items zetten.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
quote:dat is nog eens een ideeOp 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 isquote:Mooi. En de volgende keer als iets ff niet lukt niet naar tabellen grijpen; als anderen het zonder kunnen, kun jij het ook
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?
| 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.
Resized dat onderste divje van de onderste laag (volgen we het nog
) dan ook mee, zodat die background dus blijft repeaten?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.
| 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.
Alleen zit ik nu nog met een footer, hoe doe je dat?
.quote: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: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).
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 :).
.Alleen die code kan ik nu even niet bij
.quote: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 naarOp 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
.
.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.
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.
CSS is dus hier niet Counter-Strike Source
Het zijn Cascading Style Sheets. Voor jou CSS moet je in Games & Consoles wezen.
thanks, ik peer em al 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; } |
Bedankt!
quote:# is voor id's: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'
quote:Graag gedaan. Beetje aparte gok als je weet dat een element iets anders dan een id op een element, maar dat terzijdeOp woensdag 11 april 2007 22:06 schreef Geqxon het volgende:
Zo ver gaat mijn kennis nog wel, ik gokte puur wat. Maar alsnog bedankt
Ik had gewoon even een stil moment tussen mijn oren, vandaag iets teveel gewerkt
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
quote: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.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
quote: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!.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.
quote:Misschien zijn er tags niet goed afgesloten?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
quote:Dat is mooie praat, maar je pagina werkt nu niet, dus toegankelijk is hij op het moment niet.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.
quote:Al eens getest met een tijdelijk bordertje rond die DIV?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.
quote: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.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.
quote: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%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.
quote:Je, en daarom kom ik hier vragen waarom. Laat je kutposts dus achterwege of kom met een oplossing.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.
quote: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.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.
quote: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.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.
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?
[ Bericht 96% gewijzigd door Qunix op 24-04-2007 13:15:59 ]
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
???Ik gebruik zelf hiervoor trouwens altijd een ul met li's erin.
quote:mijn dank is groot! terwijl ik al zo vaak met flaot: left heb gewerktOp 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.
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 :)
quote: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.Op woensdag 25 april 2007 10:27 schreef hornage het volgende:
elk item is een a, die komen standaard onder elkaar.
quote: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.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? :)
quote: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.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.
quote:CSS: zelfde als boven, maar dan met padding-top, dus: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 |
quote:My god, dat was nog simpeler dan ik dacht. Super, dit werkt echt geweldig!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?
quote:In welke browsers is dat allemaal getest? Ik hoor 'm nu voor het eerst namelijk en ben wel benieuwd hoe bruikbaar 'ie isOp 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?
quote:Je knop moet dus 200px hoog worden (height + padding)?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 ]
quote:Even getest: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.
quote:Dat was inderdaad het probleem, dank jeOp zondag 29 april 2007 10:36 schreef CraZaay het volgende:
[..]
Je knop moet dus 200px hoog worden (height + padding)?
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:IE6- niet dus, maar IE6 zelf wel? Firefox en Safari ook getest toevallig (of een testcase online waar ik dan kan doenOp 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.
)?quote:Met dat doctype gaat het in IE ook werkenOp zondag 29 april 2007 13:17 schreef De_Hertog het volgende:
[..]
Dat was inderdaad het probleem, dank je
Alleen als je geen doctype zou gebruiken zou de padding er in IE niet bijgeteld worden (idem voor border).
quote: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.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 ]
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?
quote:Laat eerst maar eens zien hoe je je pagina hebt opgebouwd.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?
quote:float, google d'r maar 's op.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?
quote:Je class names zijn iig niet zo goed, los van je probleemOp 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
Hoe krijg je je site in het midden maar text-alignment gewoon left?
quote: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 zettenOp zondag 6 mei 2007 00:11 schreef Flaccid het volgende:
Vraagje:
Hoe krijg je je site in het midden maar text-alignment gewoon left?
.quote:de body dan he (die margin: 0 auto)?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
quote:Dat werkt prima in IE, mits je een pagina hebt die een standaard volgt en dus een correct doctype gebruikt.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
quote:RanzigOp 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 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 een wrapper div met een gedefinieerde breedte (anders is 'ie 100% breed en staat 'ie in feite dus al in het midden).
[ Bericht 87% gewijzigd door Flaccid op 12-05-2007 19:16:12 ]
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?
quote:Altijd onderaan de viewport of altijd onderaan je content?Op donderdag 10 mei 2007 20:05 schreef Flaccid het volgende:
Hoe krijg ik mijn footer altijd met mijn layout naar beneden (minimaal dan)?
quote:Gaat het om de 'visibility' of 'display' property?
quote: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 makenOp zaterdag 12 mei 2007 23:51 schreef CraZaay het volgende:
[..]
Gaat het om de 'visibility' of 'display' property?
quote:viewportOp zaterdag 12 mei 2007 23:50 schreef CraZaay het volgende:
[..]
Altijd onderaan de viewport of altijd onderaan je content?
[----------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?
| 1 2 3 4 5 6 7 8 | float:left; width: 130px; } #content{ margin-left: 130px; } |
quote: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.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;'); } |
quote:Niet met CSS alleen. Daar heb je (flink) wat javascript voor nodig.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?
quote:Met Javascript ja (DOM bewerken = gedrag = Javascript)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.
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.
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.
quote:dank voor de opschoning, maar hij werkt nog steeds niet bij mij :/ Hover gaat wel goed, maar na klikken blijft ie niet wit...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.
quote: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.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...
quote: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.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.
quote:Dat ben ik niet met je eens. W3C schrijft voor: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.
quote: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".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...
quote:Of je gebruikt http://www.xs4all.nl/~peterned/csshover.htmlOp 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.
.| 1 |
bv, of een van de vele anderen niet :{
quote: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.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 ]
eventueel met een kleur over de image heen...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? :)
| 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.
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 ]
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.
Achja ik pruts wel wat.. doe wel gewoon position: fixed, en dan heeft IE6 last van een niet meescrollend logootje, pech..
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.
edit: laatmaar, je hebt al float: left; op de menu's staan..
quote:Erven de elementen daaronder die positionering toevallig? dan zou het wel logisch zijnOp 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 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
.quote: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.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
quote: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.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.
quote:Aha, dat had ik nog niet gezien. Dat verklaart het inderdaad.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).
quote: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...Hierdoor wordt de content div te breed waardoor die niet meer naast de andere twee divs past.
quote:oe moet deze doctype er dan uit komen te zien?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...
quote:Ahh oke, dat was dus alles.... nu werkt het inderdaad!! Dank je!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.
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?
.
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?
quote: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.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?
quote:Als ik hem relative maak gaat het niet goed geloof ik.... Hoe los ik dit dan op?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.
Het is alleen in Internet Explorer zo....
quote:Je bedoeltOp donderdag 31 mei 2007 11:35 schreef Qunix het volgende:
<br clear="all" /> en het is opgelost.
| 1 |
De / is enkel nodig in XHTML.
quote:Bedoel ik jaOp donderdag 31 mei 2007 11:37 schreef cyberstalker het volgende:
[..]
Je bedoelt
[ code verwijderd ]
De / is enkel nodig in XHTML.
quote:Hij is nu wel goed....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
Heb 'm nog nooit hiervoor gebruikt iig.| 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?
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.
quote:Ik heb m nu zo: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
quote:Vreemd, bij mij doet dit het wel. Zowel in IE7 als FireFox 2...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?
http://www.quirksmode.org/css/quirksmode.html
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)
quote:0 is geldig. 0 is 0. Of het nou 0 px, em, %, pt, of wat dan ook is.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)
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 laat eens wat code zien
quote:Gaat 't alleen fout in IE6 of ouder?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
In dat geval kan je het (voor IE5.5 en IE6) "oplossen" door er een iframe achter te plakken (zie voorbeeldje)
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
quote:Waarom is dat geen oplossing?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)
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)
| 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 ]
Dan moet je niet text-align gebruiken, maar een float:right
| 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 :)
Heeft overigens niets met "Web 2.0" te maken, maar met semantiek.
quote: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.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
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?
| 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
| 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 ]
Beiden de top veranderd met position; absolute...
[ Bericht 81% gewijzigd door Chandler op 08-06-2007 11:34:57 ]
.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?
maar schets je voorbeeld eens quote:Je kan niet zonder meer breedte opgeven als je display: inline gebruikt. Dat geeft verschillende resultaten bij verschillende browsers/DTD's.
tvp
quote:Kun je ze niet gewoon floaten? Dan kun je namelijk wel een grootte opgeven en ze toch mooi achter elkaar zeten.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?
quote:Ja dat wist ik, maar je kan ze toch gewoon floaten?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
quote:Bedankt, dat was hem! Weer een stukje verder met de websiteOp 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.
quote:Gewoon een style attribuut meegeven? Bv.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 |
quote: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 meedenkenOp vrijdag 8 juni 2007 17:44 schreef Bigs het volgende:
[..]
Gewoon een style attribuut meegeven? Bv.
[ code verwijderd ]
Ik ga toch maar eens aan m'n baas vragen of ik iets met de CSS mag doen, schiet niet op zo.quote:Als de link bijvoorbeeld in de div genaamd "Boekhouding zit" :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 } |
:)
quote: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..Op vrijdag 8 juni 2007 18:29 schreef Geqxon het volgende:
[..]
Als de link bijvoorbeeld in de div genaamd "Boekhouding zit" :
[ code verwijderd ]
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)
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
En omdat jij het bent:
http://www.danielpunt.nl/geqxon.html
Als ik je tenminste goed begrepen heb.
quote: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 floatsOp 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
quote:Dat hebben we allemaal wel eens.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
En meestal zijn het dan ook van die lullige oplossingen, dan denk je gewoon te moeilijk.Voor de rest wat Bigs zegt dus
quote: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.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*
quote:Nu is dit wel een heel ander voorbeeldOp 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
quote:Gedeeltelijk waar, maar semantisch gezien klopt er ook gewoon geen hol van en de html voldoet op tig punten niet aan de standaardenOp 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.
Maf hé?