Als je puur visueel die kolommen tot onder door wilt laten lopen zou ik kiezen voor een oplossing als faux columns.quote:Op woensdag 17 mei 2006 16:25 schreef super-muffin het volgende:
dan nog steeds niet.
Maar ik wil eerst even dat andere probleem oplossen, dan kan ik verder.
De gene waar voor ik die website maak wil dat die tot de onderkant loopt. Het moet dus, hoe kan ik het oplossen met Javascript of moet ik heel de code anders in elkaar zetten?
Dat heb ik nu ook toegepast op mijn eigen website, maar dat is gewoon 1 lange div, daar staat geen header boven zoals in dit gevalquote:Op woensdag 17 mei 2006 16:39 schreef Desdinova het volgende:
voor javascript kan je beter naar het javascript topic, kan ik je ook niet mee verder helpen helaas..
en anders als backgroundimage in je body. want dit is in mijn ervaring een regelrechte CSS hel. en ik heb er nooit degelijk antwoord op gekregen ook.
in iexplore zou je iig gewoon een height: 100%; op kunnen geven. en voor ff/ns/opera min-height: 100%;. maar zodra je content eroverheen loopt gaat het de zeik in bij ff/ns/opera.
Dit zou moeten werken:quote:Op woensdag 17 mei 2006 19:29 schreef super-muffin het volgende:
[..]
Dat heb ik nu ook toegepast op mijn eigen website, maar dat is gewoon 1 lange div, daar staat geen header boven zoals in dit geval
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | width:750px; height: 100%; overflow:hidden; background-color: #0099ff; margin: 0px auto; text-align:left; background: url(header.jpg) top left no-repeat;} #content { width:400px; height: 87%; margin-bottom: 0; float:left; background: #fff url(bg-content.gif) no-repeat right bottom;} |
Volkomen afhankelijk van de afmetingen van de viewport van de gebruiker, en daarom een ongeschikte oplossing imo.quote:Op zaterdag 20 mei 2006 01:52 schreef Castor het volgende:
[..]
Dit zou moeten werken:
[ code verwijderd ]
#box op een height van 100% gezet met een overflow hidden. Vervolgens de #content een height geven van ongeveer 90%.
Het is een simpele oplossing die met de meest gangbare resoluties prima werkt. Het enige is dat je bij een kleinere viewport niet de complete background image ziet. Niet echt onoverkomelijk imho.quote:Op zondag 21 mei 2006 11:14 schreef CraZaay het volgende:
[..]
Volkomen afhankelijk van de afmetingen van de viewport van de gebruiker, en daarom een ongeschikte oplossing imo.
Dat is inderdaad een persoonlijke afweging die je moet maken. Persoonlijk vind ik het volkomen onacceptabel om geen volledige controle te hebben over het resultaat van de code, maar dat ben ikquote:Op maandag 22 mei 2006 01:18 schreef Castor het volgende:
[..]
Het is een simpele oplossing die met de meest gangbare resoluties prima werkt. Het enige is dat je bij een kleinere viewport niet de complete background image ziet. Niet echt onoverkomelijk imho.
Ik vind het ook geen goede oplossing, maar wel bedankt voor het mee mee denkenquote:Op maandag 22 mei 2006 09:11 schreef CraZaay het volgende:
[..]
Dat is inderdaad een persoonlijke afweging die je moet maken. Persoonlijk vind ik het volkomen onacceptabel om geen volledige controle te hebben over het resultaat van de code, maar dat ben ik
ik denk dat er problemen zijn met de paddingquote:Op maandag 22 mei 2006 16:11 schreef Desdinova het volgende:
@nevermind
geef je content-div eens een backgroundkleurtje? ik denk dattie zich verstopt
1 |
Totaal los van je vraag toch een tip: bouw je html semantisch. Met andere woorden: gebruik minder div's en meer beschrijvende elementen. Je kop kan bijvoorbeeld prima uit de div en in een h1, en de div rond je ul is in principe ook onnodig.quote:Op maandag 22 mei 2006 15:37 schreef Nevermind het volgende:
Waarom ziet dit er in Firefox zo Mooi en Strak uit, en laat IE de halve pagina niet zien?
Jammer Die tabellen heb je toch ook moeten leren te gebruiken? CSS leren kan soms frustrerend zijn, maar is om tig redenen beter dan tabellen (uit puristisch oogpunt gezien, maar zeker ook qua toegankelijkheid voor o.a. zoekmachines en visueel gehandicapten).quote:Op maandag 22 mei 2006 18:05 schreef Nevermind het volgende:
Pff, ik stap wel weer over op tabellen. Een hele middag kloten terwijl ik het in een minuut in elkaar heb met tabellen. En bedankt voor de tip CraZaay
Niets is bedoeld voor lay-out En alles is bedoeld voor het aangeven van de structuur van de data Dat je al deze beschrijvende elementen kan stylen is natuurlijk heel mooi meegenomen (scheiding van structuur en weergave).quote:Op maandag 22 mei 2006 19:09 schreef DionysuZ het volgende:
tabellen zijn niet bedoeld voor layout.
Ik weet het. Maar mijn doorzettingsvermogen heeft zijn grenzen. Vooral omdat ik, zoals je zag, bezig ben met een cms, en niet dagen bezig wil zijn om verschillende browsers compatibel te krijgen met een site (die waarschijnlijk alleen door mij en mijn huisgenoot gebruikt wordt ).quote:Op maandag 22 mei 2006 18:47 schreef CraZaay het volgende:
[..]
Jammer Die tabellen heb je toch ook moeten leren te gebruiken? CSS leren kan soms frustrerend zijn, maar is om tig redenen beter dan tabellen (uit puristisch oogpunt gezien, maar zeker ook qua toegankelijkheid voor o.a. zoekmachines en visueel gehandicapten).
Dat is OF heel erg knap, OF je maakt erg simpele sites. De meeste gewone stervelingen moeten voor sommige complexe CSS toch wel een of meerdere "hacks" gebruiken.quote:Op maandag 22 mei 2006 19:53 schreef CraZaay het volgende:
Het blijft een kwestie van ervaring. Ik maak tig sites en kan het me niet herinneren wanneer ik voor het laatst een CSS hack heb moeten gebruiken om iets voor elkaar te krijgen wat in iedere browser werkt (IE6+, dat wel). Doorrrrrgaan zou Barry Stevens zeggen
Laten we het houden op een goed inzicht in structuren, want ik wil niet van mezelf zeggen dat ik knap ben, maar ook allerminst dat ik simpele sites html/css.quote:Op dinsdag 23 mei 2006 01:08 schreef Castor het volgende:
[..]
Dat is OF heel erg knap, OF je maakt erg simpele sites. De meeste gewone stervelingen moeten voor sommige complexe CSS toch wel een of meerdere "hacks" gebruiken.
De namen zeggen het al een beetje, een id (identifier) moet uniek zijn en mag je op een pagina maar één keer gebruiken, een terwijl meerdere elementen tot een bepaalde class (klasse) kunnen behoren.quote:Op maandag 29 mei 2006 21:33 schreef Da_Koen het volgende:
Kan iemand me misschien uitleggen wat het verschil is tussen id="iets" en class="iets"? Er gebeurt namelijk het zelfde, maar er zal vast een duidelijk verschill tussen zijn
thx voor de linkquote:Op maandag 29 mei 2006 21:46 schreef Berkery het volgende:
[..]
De namen zeggen het al een beetje, een id (identifier) moet uniek zijn en mag je op een pagina maar één keer gebruiken, een terwijl meerdere elementen tot een bepaalde class (klasse) kunnen behoren.
Zie ook http://www.handleidinghtml.nl/css/selectors/selectors04.html
ik heb het opgelost door:quote:Op maandag 29 mei 2006 21:35 schreef DionysuZ het volgende:
ik heb een vraagje waar ik maar niet uitkom. Ben bezig met een site die met 3 kolommen werkt. Nu moeten die drie kolommen van dezelfde lengte zijn. De middelste kolom is degene waarin een tekst van variabele lengte komt te staan en de anderen zijn menukolommen. Nu gebruikte ik altijd de faux columns manier om dit op te lossen (eerder in deze topic gelinkt), maar in dit specifieke geval is dit niet mogelijk. De achtergrond van de kolommen is nl. een image ipv gewoon een kleur. Weet iemand hoe ik dit kan oplossen?
1 2 3 4 5 | background: #ffffff url(./images/shadow.gif) repeat-y 506px 120px; } |
link doet het nietquote:Op maandag 29 mei 2006 22:21 schreef DionysuZ het volgende:
nee daar heb ik helaas niets aan omdat de body al een achtergrond heeft. kijk op http://mankind2.clickthis.nl voor een voorbeeld. In IE ziet het er goed uit, firefox helaas niet.
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 | <head> <title>OBN toevoegen</title> <style type="text/css"> p { width: 300px; } span { width: 100px; } </style> <head> <body> <p> <span>dsssss</span> sss ssss sssssss ssssss ssssss ssssss sssssss ss sssssss sfsdf sdfsdfsd fsdf sdfsdf sdfsdf </p> <p> <span>dsssss</span> dssss svsss ssssv vsss ssss ssvv sssss ssss s ssssss sssss ss ssss ssssss fsdf sdf sdfsd fsdf sdfs df sdfsdf </p> </body> </html> |
Een span is "display: inline" maak er "display:block" van en dan kun je er een width aan geven.quote:Op maandag 29 mei 2006 23:09 schreef Da_Koen het volgende:
Weer een vraagje
Is het mogelijk om een span een bepaalde lengte te geven? Het volgende werkt namelijk niet:
1 Code verwijderd.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | width: 157px; height: 120px; /*border:1px dotted;*/ margin-top:13px; margin-left:1px; background: #D3E6CF url(schaduw.jpg) no-repeat 0 0; } div#box2a2{ width: 150px; height: 113px; /*border:1px dotted;*/ margin-top:10px; margin-left:7px; background: #D3E6CF url(test.jpg) no-repeat 0 0; } |
1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | width: 157px; height: 120px; /*border:1px dotted;*/ margin-top:13px; background: #D3E6CF url(schaduw.jpg) no-repeat 0 0; } div#box2a2{ width: 150px; height: 113px; /*border:1px dotted;*/ margin-left:7px; background: #D3E6CF url(test.jpg) no-repeat 0 0; } |
quote:Op woensdag 31 mei 2006 15:39 schreef super-muffin het volgende:
[ code verwijderd ]
lost het op
waarom is de de border een comment overigens?
1 2 3 4 5 6 | height: 100%; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; |
1 |
Probeer eens 'overflow: auto' op je bodyquote:Op vrijdag 2 juni 2006 16:51 schreef mrbombastic het volgende:
Als ik in quirksmode werk dan krijg ik geen verticale scrollbalk, anders wel.
Hoe kom ik van mijn verticale scrollbalk af (op een nette manier).
Ten eerste, je kunt die margin in 2 property gooien.quote:Op vrijdag 2 juni 2006 16:51 schreef mrbombastic het volgende:
Als ik in quirksmode werk dan krijg ik geen verticale scrollbalk, anders wel.
Hoe kom ik van mijn verticale scrollbalk af (op een nette manier).
Begin CSS code
[ code verwijderd ]
Tabel
[ code verwijderd ]
1 |
1 2 3 4 5 6 7 8 9 | height: 100%; margin: 0; } #naam { width: 100%; height: 100%; background-color: #ffe4b5; } |
1 2 3 | inhoud van deze DIV </div> |
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 | Naam: <input name="naam" type="text" id="naam" size="35"> <br> Achternaam: <input name="achternaam" type="text" id="achternaam" size="35"> <br> Man <input type="radio" name="radiobutton" value="man" checked> Vrouw <input type="radio" name="radiobutton" value="vrouw"> <br> straat: <input name="straat" type="text" id="straat"> <input name="nr" type="text" id="nr" size="6" maxlength="6"> <br> postcode: <input name="postcode" type="text" id="postcode" size="6" maxlength="6"> <br> plaats: <input name="plaats" type="text" id="plaats" size="35"> <br> Email: <input name="mail" type="text" id="mail" onBlur="MM_validateForm ('naam','','R','mail','','RisEmail');return document.MM_returnValue" value="" size="35"> <br> Bericht: <textarea name="Bericht" cols="27" id="Bericht"></textarea> <br> <input type="submit" name="Submit" value="send"> <input type="reset" name="Reset" value="reset"> <input name="MailToAddress" type="hidden" value="...@hotmail.com"> </form> |
Labels gebruiken en deze met CSS een bepaalde breedte geven.quote:Op dinsdag 13 juni 2006 17:06 schreef Hunchy het volgende:
Hoe krijg ik de invulvakken van de volgende code netjes onder elkaar zonder gebruik te maken van tabellen? Ik wil het realiseren m.b.v. css. Wat is de meest snelle/logische manier? Nu worden ze direct achter de tekt uitgelijnt.
Aan die blauwe balken een class hangen (dus aan de td of div of wat je ook gebruikt), en dan in de css:quote:Op vrijdag 16 juni 2006 17:35 schreef FredvZ het volgende:
Hoe krijg ik met CSS voor elkaar dat alleen de linkjes in de blauwe balken "bold #FFFFEE" worden?
1 2 3 4 | color: #FFFFEE; font-weight: bold; } |
hmja, dat snap ik, maar zo ging het vroeger met html...quote:Op vrijdag 16 juni 2006 18:17 schreef SuperRembo het volgende:
Haal eerst eens al die <font> <center> bgcolor="" en border="" zooi weg anders wordt het nooit wat.
thnxquote:Op vrijdag 16 juni 2006 18:27 schreef CraZaay het volgende:
Aan die blauwe balken een class hangen (dus aan de td of div of wat je ook gebruikt), en dan in de css:
[ code verwijderd ]
Dus géén class aan de links zelf hangen, want dat moet je dat voor iedere link doen en da's dus nogal wat redundante code
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |