Je kan de breedte niet bepalen omdat het a element een inline element is. Zet de a op 'display: block' en je kunt de breedte wel bepalenquote:Op dinsdag 13 februari 2007 01:14 schreef Geqxon het volgende:
Klein putnje alleen, als ik er het a-element voor gebruik kan ik de breedte niet bepalen.
Daar waar het een blok ik zag ik het in eerste instantie als paragraaf, misschien een beetje dom. Maar so far is een paragraaf het enige dat werkt
Thanksquote:Op dinsdag 13 februari 2007 08:07 schreef CraZaay het volgende:
[..]
Je kan de breedte niet bepalen omdat het a element een inline element is. Zet de a op 'display: block' en je kunt de breedte wel bepalen
Paragraaf als link met onclick, niet doen
Hij maakt er een block level element van, en die neemt de beschikbare ruimte in (en dwingt daarmee het volgende item naar de volgende regel).quote:Op dinsdag 13 februari 2007 09:25 schreef Geqxon het volgende:
Het punt van het attribuut block binnen het display property is echter wel dat hij er een line-break achteraan gooit, iets dat ik eigenlijk totaal niet zoek. Zo'n button maken, doe ik dat eigenlijk wel goed?
Aan de bovenkant van mijn pagina wil ik vier buttons naast elkaar hebben, 200 pixel breed, met een padding van 10 pixels. Deze hebben een href die naar een platte pagina verwijzen, en een onclick die een ajax-functie aanroept, die een bepaalde tekst in een [div] inlaad.quote:Op dinsdag 13 februari 2007 16:04 schreef CraZaay het volgende:
[..]
Hij maakt er een block level element van, en die neemt de beschikbare ruimte in (en dwingt daarmee het volgende item naar de volgende regel).
Staat de button op zich, of in een list ofzo? Of dit de goede manier is, hangt af van de functie. Is het gewoon een link naar een andere pagina, doe het dan gewoon zo (met het a element dus). Daar is het immers voor, los van hoe je het gaa stylen.
het lijkt me sterk dat het komt door u { } en u staat ook niet voor underlined.quote:Op dinsdag 13 februari 2007 15:34 schreef DutchErrorist het volgende:
Okay ik zat dus zo even mijn myspace aan te passen (lach me maar uit) in ieder geval dat is ook in CSS en ik wilde net een klikbaar plaatje maken, maar nu komt er een rand om heen... een zwarte.. En nu schijnt dat samen te hangen met dat u{
Maar dat lijkt me sterk want ik neem aan dat dat voor underlined staat...
Kan iemand mij vertellen hoe ik die rand weg kan halen?
Ben totaal een CSS n00b vandaar, maar ik wil het wat beter begrijpen...:
alvast bedankt!
super-muffin = heldquote:Op dinsdag 13 februari 2007 16:10 schreef super-muffin het volgende:
[..]
het lijkt me sterk dat het komt door u { } en u staat ook niet voor underlined.
probeer eens dit:
a img { border: 0 }
als dat niet werkt, mag ik dan een link.
Hahaquote:Op dinsdag 13 februari 2007 16:31 schreef super-muffin het volgende:
haha graag gedaan
zulk soort complimenten moedigen aan om door te gaan met helpen.
Puur voor CU2 / myspace truukjes? Of CSS in het algemeen?quote:Op dinsdag 13 februari 2007 16:34 schreef DutchErrorist het volgende:
[..]
Hahadaar ben ik blij om
Nu je er toch bent, weet jij ook een goede site voor CSS tips, afkortingen etc?![]()
Beide eigenlijkquote:Op dinsdag 13 februari 2007 16:35 schreef Geqxon het volgende:
[..]
Puur voor CU2 / myspace truukjes? Of CSS in het algemeen?
Haha bedanktquote:Op dinsdag 13 februari 2007 16:42 schreef super-muffin het volgende:
Voor CU2 had je toch mycu2.nl?
Voor het echte CSS gebruik ik vaak www.w3schools.com en af en toe gigadesign.be
Lijkt mij een mooie kandidaat voor een unordered listquote:Op dinsdag 13 februari 2007 16:07 schreef Geqxon het volgende:
[..]
Aan de bovenkant van mijn pagina wil ik vier buttons naast elkaar hebben, 200 pixel breed, met een padding van 10 pixels. Deze hebben een href die naar een platte pagina verwijzen, en een onclick die een ajax-functie aanroept, die een bepaalde tekst in een [div] inlaad.
Hm, zoiets heb ik al. De linkerdiv is absoluut gepositioneerd (waarmee ik dus het probleem krijg dat hij te hoog wordt bij 100%). De body heeft een margin-left van 210px, waardoor de rest van de panels niks met de linkerdiv te maken hebben.quote:Op zaterdag 3 maart 2007 17:12 schreef Geqxon het volgende:
Ik zeg: Twee grote divs naast elkaar, en daar stop je vervolgend de kleine divjes zoals de indexservice, TV-guide en statistics in.
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> |
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> |
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; |
Misschien snapt Safari het wel als je de eerste cell een colspan=1 geeft?quote:Op zondag 4 maart 2007 02:15 schreef Geqxon het volgende:
Safari keurt dit pas goed zodra ik colspan="7" verander in colspan="8", terwijl ik zelf toch echt 7 kolommen tel? Iemand tips?
Je bent sowieso een accolade vergeten aan het einde.quote:Op zondag 4 maart 2007 09:36 schreef BaggerUser het volgende:
simpel probleem:
[ code verwijderd ]
en css formulier
[ code verwijderd ]
het probleem is zodra er float wordt gebruikt nemen de menu en content div de achtergrond kleur niet meer over van de main div.. en worden ze grijs.. terwijl ze wit moeten blijven..
iemand ?
de accolade sotnd er wel maar was niet mee gekopieerd per ongelukquote:Op zondag 4 maart 2007 13:27 schreef super-muffin het volgende:
[..]
Je bent sowieso een accolade vergeten aan het einde.
maar je moet dan overflow: auto; aan de parent geven, wat #main is in dit geval
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; } |
gelukt, dankje!quote:Op zondag 4 maart 2007 14:28 schreef super-muffin het volgende:
Volgens mij moet je dan een <br /> aan het einde van de #main doen.
[ code verwijderd ]
Maar dat weet ik niet zeker, ik heb geen IE hier
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> |
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; } |
shit, dat ga je niet menen... Geen idee hoe het op een andere visueel nette manier op te lossen. Zul je nog zien dat ik dadelijk mijn content moet gaan overvullen met <br> en dat keer 100quote:Op maandag 5 maart 2007 19:03 schreef CraZaay het volgende:
Close to impossible. Er is al genoeg over geschreven her en der, maar ik heb geen enkele versie kunnen vinden die cross-browser precies deed wat 'ie hoorde te doen.
Heb je hier wat aan?quote:Op maandag 5 maart 2007 19:01 schreef Coelho het volgende:
Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:
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> |
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; } |
Je layout hoeft geen flexibele breedte te hebben, maar een vaste breedte voor de hele site?quote:Op maandag 5 maart 2007 19:01 schreef Coelho het volgende:
Ik ben wat aan het knutselen met CSS, en hoop dat iemand mij kan helpen. Pagina wordt gecentreerd weergegeven dmv een supercontainer DIV die voor de achtergrond zorgt. Hierin een container die gecentreerd is en een vaste breedte heeft. De container bevat een header en een footer met daartussen 3 kolommen: left, content, right. Positioneren lijkt goed te gaan, bij een meer dan schermvullende content stretcht alles mooi mee, echter wanneer de content maar een kwart pagina bevat, zweeft de footer ergens halverwege het scherm en zie je onderaan nog een stuk achtergrondkleur die ik ook links en rechts van het te centreren blok heb gebruikt.
Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:
HTML:
[ code verwijderd ]
CSS
[ code verwijderd ]
Wie heeft de gouden tip?
]http://bluerobot.com/web/css/center1.html[/quote][/url]quote:Op woensdag 7 maart 2007 13:16 schreef ManInLove het volgende:
Wat ik op mijn site heb gedaan is deze basishack gebruiken voor de supercontainer, die werkt zowel in IE als in firefox:
[url=http://bluerobot.com/web/css/center1.html
1 |
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |