DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Misschien dat een van jullie het misschien weet:
Ik heb zeg maar onderstaande indeling van een webpagina opgebouwd met CSS.
De lichtblauwe achtergrond is een DIV (layer) met vaste plek (margin: 0 auto) zodat deze in het midden wordt uitgelijnd.
De andere zijn ook DIV's (met vaste plek).
Alleen het menu is "Floating: left".
De height staat niet vast, de margins en de paddings wel.
Echter wat er nu gebeurd is dat wanneer er te weinig tekst in het menu of in de content layer staan, de footer te hoog op de pagina komt waardoor de achtergrond weer te zien is.
Ik vraag mij dus af: Is het mogelijk om te zorgen dat de footer altijd dusdanig ver onderaan de pagina komt te staan zodat de achtergrond niet meer te zien is.
Ik heb zeg maar onderstaande indeling van een webpagina opgebouwd met CSS.
De lichtblauwe achtergrond is een DIV (layer) met vaste plek (margin: 0 auto) zodat deze in het midden wordt uitgelijnd.
De andere zijn ook DIV's (met vaste plek).
Alleen het menu is "Floating: left".
De height staat niet vast, de margins en de paddings wel.
Echter wat er nu gebeurd is dat wanneer er te weinig tekst in het menu of in de content layer staan, de footer te hoog op de pagina komt waardoor de achtergrond weer te zien is.
Ik vraag mij dus af: Is het mogelijk om te zorgen dat de footer altijd dusdanig ver onderaan de pagina komt te staan zodat de achtergrond niet meer te zien is.
Age of fruity enlightenment!
Bedankt AnGabhar, alleen krijg ik daaruit toch nog niet een duidelijke oplossing... zal wel aan mij liggen denk ik
zal wel aan mij liggen denk ik 
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Alistapart.com kan het beter uitleggenquote:Op vrijdag 25 november 2005 22:15 schreef FlowDesign het volgende:
Misschien dat een van jullie het misschien weet:
Ik heb zeg maar onderstaande indeling van een webpagina opgebouwd met CSS.
De lichtblauwe achtergrond is een DIV (layer) met vaste plek (margin: 0 auto) zodat deze in het midden wordt uitgelijnd.
De andere zijn ook DIV's (met vaste plek).
Alleen het menu is "Floating: left".
De height staat niet vast, de margins en de paddings wel.
Echter wat er nu gebeurd is dat wanneer er te weinig tekst in het menu of in de content layer staan, de footer te hoog op de pagina komt waardoor de achtergrond weer te zien is.
Ik vraag mij dus af: Is het mogelijk om te zorgen dat de footer altijd dusdanig ver onderaan de pagina komt te staan zodat de achtergrond niet meer te zien is.
* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*
en wie kan mij die andere uitleg beter uitleggen?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Tnx manquote:Op vrijdag 25 november 2005 22:53 schreef Quarks het volgende:
[..]
Alistapart.com kan het beter uitleggen
Ik heb het helemaal gelezen, maar dat stuk voor MAC ondersteuning ga ik niet gebruiken. Ik gebruik de pure-CSS oplossing (aangezien de desbetreffende website dan toch wel compatible is voor 99,9% van de bezoekers).
Age of fruity enlightenment!
Hmmzz... nu werkt het wel in FireFox, maar in IE (6) zet ie die footer weer niet onderaan.quote:Op zaterdag 26 november 2005 16:14 schreef FlowDesign het volgende:
[..]
Tnx man
Ik heb het helemaal gelezen, maar dat stuk voor MAC ondersteuning ga ik niet gebruiken. Ik gebruik de pure-CSS oplossing (aangezien de desbetreffende website dan toch wel compatible is voor 99,9% van de bezoekers).
Zie: http://eggsplosion.com/drupal/
De CSS-code
Zoals je momenteel ook kunt zien, valt op pagina's waar heel weinig tekst in het rechter deel van de pagina staat, heel de searchbox weg onder de footer
[ Bericht 12% gewijzigd door FlowDesign op 26-11-2005 18:44:56 ]
Age of fruity enlightenment!
Weet iemand of het mogelijk is om zulke borders met alleen CSS te genereren?
zou mooi zijn namelijk
zou mooi zijn namelijk
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
http://www.w3schools.com/css/pr_border-style.asp
je hebt de volgende borderstyles:
none Defines no border
hidden The same as "none", except in border conflict resolution for table elements
dotted Defines a dotted border. Renders as solid in most browsers
dashed Defines a dashed border. Renders as solid in most browsers
solid Defines a solid border
double Defines two borders. The width of the two borders are the same as the border-width value
groove Defines a 3D grooved border. The effect depends on the border-color value
ridge Defines a 3D ridged border. The effect depends on the border-color value
inset Defines a 3D inset border. The effect depends on the border-color value
outset Defines a 3D outset border. The effect depends on the border-color value
je hebt de volgende borderstyles:
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
maar je houdt zwarte randen hoe kom je daar vanaf....
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
hm vraagje.
ik heb 2 divs, de een genest in de ander. De eerste heeft een hoogte van 100% van het scherm. De tweede is absoluut gepositioneerd in de eerste en heeft een variabele hoogte. Nu is het zo dat als de inhoud van de tweede erg veel wordt, er tekst gaat wegvallen omdat de buitenste div niet mee resized. hoe los ik dat op?
ik heb 2 divs, de een genest in de ander. De eerste heeft een hoogte van 100% van het scherm. De tweede is absoluut gepositioneerd in de eerste en heeft een variabele hoogte. Nu is het zo dat als de inhoud van de tweede erg veel wordt, er tekst gaat wegvallen omdat de buitenste div niet mee resized. hoe los ik dat op?
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
Wat heb je bij height staan voor de tweede div?quote:Op donderdag 1 december 2005 22:59 schreef DionysuZ het volgende:
hm vraagje.
ik heb 2 divs, de een genest in de ander. De eerste heeft een hoogte van 100% van het scherm. De tweede is absoluut gepositioneerd in de eerste en heeft een variabele hoogte. Nu is het zo dat als de inhoud van de tweede erg veel wordt, er tekst gaat wegvallen omdat de buitenste div niet mee resized. hoe los ik dat op?
* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*
Een element dat absoluut gepositioneerd is valt buiten de flow. Jouw binnenste div zal er dus nooit voor zorgen dat je buitenste div oprekt.
Als je een element een hoogte geeft, dan rekt het niet mee met de inhoud. Tenminste, dat zou niet mogen, maar IE doet het toch. Je moet de hoogte als min-height opgeven, alleen snapt IE dat weer niet.
Als je een element een hoogte geeft, dan rekt het niet mee met de inhoud. Tenminste, dat zou niet mogen, maar IE doet het toch. Je moet de hoogte als min-height opgeven, alleen snapt IE dat weer niet.
| 1 2 3 4 5 6 7 | min-height: 100%;/* W3C */ _height: 100%;/* IE */ } #inner { /* GEEN position: absolute */ } |
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Iemand die beked is met vele CSS sites? zoek eingelijk een voorbeeld van CSS als in een Office XP menu oid ennuh velden zoals windows programma's... eingelijk dus gewoon alles wat met windows te maken heeft in CSS (en voorbeeld natuurlijk)..
Iemand ideeen?
Iemand ideeen?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Het is geen CSS site, maar de luitjes van Component-Art hebben van al hun controls ook een demo in Windows XP stijl. Bijvoorbeeld een menu en een tree .
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Tnx SuperRembo, maar bedoel meer de platte menu met vaste icons (zoals de bar bij winzip, add, extract, ennuh de korte tabs zoals in office (excel etc)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Hier staat vast wel tussen wat je zoekt.quote:Op zondag 4 december 2005 11:45 schreef Chandler het volgende:
Tnx SuperRembo, maar bedoel meer de platte menu met vaste icons (zoals de bar bij winzip, add, extract, ennuh de korte tabs zoals in office (excel etc)
* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*
die had ik ook al gezien maar dat is net niet wat ik zoek... je moet het zien als de button bar van (tool bar) van internet explorer... de stijle van de achtergrond etc
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Bedoel je zoiets?quote:Op zondag 4 december 2005 12:58 schreef Chandler het volgende:
die had ik ook al gezien maar dat is net niet wat ik zoek... je moet het zien als de button bar van (tool bar) van internet explorer... de stijle van de achtergrond etc
* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*
dat is het bijna maar dan de grote versie er van
ofzo
ofzo
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Waarom knip je niet gewooon die plaatjes uit en maak je het zelf; zo moeilijk is het niet.quote:Op zondag 4 december 2005 13:16 schreef Chandler het volgende:
dat is het bijna maar dan de grote versie er van
[afbeelding]
ofzo
* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*
Chandler, ik heb even voor je geknutseld: CSS IE Menu
Bekijken met firefox of opera, IE ondersteund geen PNG transperantie.
Bekijken met firefox of opera, IE ondersteund geen PNG transperantie.
* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*
ow ennuh als ik het nu wel in ie wil gebruiken? ruim 89% van alle gebruikers zit nog op IE
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Gaat goed, ik had alleen geen zin om voor elke knop een apart plaatje te gebruiken.quote:Op zondag 4 december 2005 16:27 schreef Chandler het volgende:
ow ennuh als ik het nu wel in ie wil gebruiken? ruim 89% van alle gebruikers zit nog op IE
In plaats van hover.png te gebruiken, maak je gewoon voor elke knop een plaatje dat je wilt gebruik als mouse-over.
Dus link1.gif link2.gif enz..
* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*
Ik weet dat het met een omweg mogelijk is, maar ik denk dat aparte plaatjes voor de imagemap toch makkelijker zijn voor Chandler.quote:
* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*
Ziet er mooi uit man.. Misschien ga ik er nog wat mee doen, ben al weer druk aan't puzzelen...
Ennuh die transparante PNG's die niet werken in IE... ach daarom werk ik nu gelukkig met PNGtjes die niet transparant zijn...
Ennuh die transparante PNG's die niet werken in IE... ach daarom werk ik nu gelukkig met PNGtjes die niet transparant zijn...
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Ik heb een vraag waarop ik het antwoord niet echt kan vinden. Ik wi een hover actie doen waarmee de achtergrond kleur van de hele layer verandert.Dus een layer die van kleur verandert bij een mouseover. Hovers met een hyperlink zijn geen probleem alleen dat is niet wat ik wil.het gaat hier specifiek om een hover voor de layer.
Kan dit met alleen css of moet ik hiervoor toch javascript gaan gebruiken?
Edit ik heb hem zelf al gevonden:
[ Bericht 19% gewijzigd door ExCibular op 23-12-2005 15:40:22 ]
Kan dit met alleen css of moet ik hiervoor toch javascript gaan gebruiken?
Edit ik heb hem zelf al gevonden:
| 1 2 3 4 5 6 7 | { display:block; height:100%; background-color:#EEEEEE; text-decoration:none; } |
[ Bericht 19% gewijzigd door ExCibular op 23-12-2005 15:40:22 ]
Bookmark!! Tanxquote:Op vrijdag 23 september 2005 07:44 schreef SuperRembo het volgende:
[..]
Bedoel je box-sizing?
[ code verwijderd ]
Zie ook Quirksmode.org over box model tweaking.
Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.
Lijkt me best simpel, maar het wil niet...
een div'je met tekst erin die ik een bepaalde breedte wil geven. Maar hij vult hem voor de gehele breedte van de pagina.
html:
css:
Zou toch moeten werken?
een div'je met tekst erin die ik een bepaalde breedte wil geven. Maar hij vult hem voor de gehele breedte van de pagina.
html:
| 1 2 3 | <?php echo content();?> </div> |
css:
| 1 2 3 4 5 6 | border: thin dotted #00FF00; position: absolute; top: 330px; width: 550px; } |
Zou toch moeten werken?
wat n fucking omweg die transparante pngtjes in dat artikel hierboven. Ik doe het als volgt:
ik laad mn standaard styles
ik voeg het volgende bijvoorbeeld toe onder aan mn header:
| 1 2 3 4 5 6 7 8 | <style type="text/css"> #menu a.menuitem:hover { background: transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='px/menu_hover.png',sizingMethod='scale'); } </style> <![endif]--> |
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
opgelost.quote:Op dinsdag 10 januari 2006 23:06 schreef the_disheaver het volgende:
Lijkt me best simpel, maar het wil niet...
een div'je met tekst erin die ik een bepaalde breedte wil geven. Maar hij vult hem voor de gehele breedte van de pagina.
html:
[ code verwijderd ]
css:
[ code verwijderd ]
Zou toch moeten werken?
Had ergens in het html '<dvi> ipv <div>
edit: hij is nu wel 800 pixel terwijl hij 550 moet zijn, maar het gaat de goede kant op
[ Bericht 12% gewijzigd door the_disheaver op 10-01-2006 23:53:31 ]
Je hebt toch wel id="content" staan en niet id "content"?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Nee, daar kwam ik ook veel te laat achterquote:Op woensdag 11 januari 2006 08:09 schreef SuperRembo het volgende:
Je hebt toch wel id="content" staan en niet id "content"?
Maar nu wel, en nu is ie echt 550 px! (genoeg wat nog niet goed is, maar goed)
Ik zit met een klein probleem met betrekking tot spacing in FF.
Zie het verschil tussen IE en FF van de menu's die helemaal beneden staan..
http://gfxpoll.bruggema.nl/new/
Iemand een idee hoe dit op te lossen in FF?
Zie het verschil tussen IE en FF van de menu's die helemaal beneden staan..
http://gfxpoll.bruggema.nl/new/
Iemand een idee hoe dit op te lossen in FF?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
ik heb hier geen IE, maar volgens mij doet ie wat het zou moeten doen.quote:Op vrijdag 13 januari 2006 18:40 schreef Chandler het volgende:
Ik zit met een klein probleem met betrekking tot spacing in FF.
Zie het verschil tussen IE en FF van de menu's die helemaal beneden staan..
http://gfxpoll.bruggema.nl/new/
Iemand een idee hoe dit op te lossen in FF?
Ik neem aan dat de padding-left een aantal pixels moet zijn, maar ik zie het nergens aangeven in de stylesheet.
| 1 2 3 4 5 6 | list-style-type:none; list-style-position: inside; margin: 0; padding: 0; } |
Ik wel eingelijk
daar zie je dat het 8 pixels van rechts moet staan en van boven 35... en in IE ziet dat er goed uit maar in FF dus niet dan pakt ie die pixels weer niet
| 1 2 3 4 5 6 7 8 9 | margin: 0; padding: 8px 0 0 35px; background: #C74700 url(images/menu_orange_top_bg.gif) no-repeat top left; height:22px; font-family: Tahoma; font-size: 10px; color:#ffffff; } |
daar zie je dat het 8 pixels van rechts moet staan en van boven 35... en in IE ziet dat er goed uit maar in FF dus niet dan pakt ie die pixels weer niet
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Wat zijn goeie fixed-width fonts die op alle systemen (Windows/Mac/*Nix) en in de meeste browsers er min of meer hetzelfde uitzien?
Net anders om toch? 8 pixels boven, en 35 van rechts. Dat lijkt hij ook te doen. Zou je een screenshot in IE kunnen maken?quote:Op vrijdag 13 januari 2006 20:49 schreef Chandler het volgende:
Ik wel eingelijk
[ code verwijderd ]
daar zie je dat het 8 pixels van rechts moet staan en van boven 35... en in IE ziet dat er goed uit maar in FF dus niet dan pakt ie die pixels weer niet
ik maak een screenshot voor je van ie en ff
FireFox
en natuurlijk Internet Explorer
FireFox
en natuurlijk Internet Explorer
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
| 1 2 3 4 5 6 7 8 9 | margin: 0; padding: 8px 0 0 35px; background: #C74700 url(images/menu_orange_top_bg.gif) no-repeat top left; height:22px; font-family: Tahoma; font-size: 10px; color:#ffffff; } |
Deze code slaat alleen op de h3-tag, en dus niet op de <ul> list eronder. Deze zal dus volgens de
#menus ul {} een padding van 0 krijgen.
Het handigste lijkt mij deze padding op 0 0 0 35px; (oid) te zettten.
Of anders.menu_orange ul{} aanmaken.
nu heb ik hetniet op ul gezet maar op li, want ul deed nix namelijk..
alleen gaat het dan wel weer goed in FF maar dan heeft IE opeens de dubbele spacing vanaf links...
zie pix
| 1 2 3 | padding: 0 0 0 8px; } |
alleen gaat het dan wel weer goed in FF maar dan heeft IE opeens de dubbele spacing vanaf links...
zie pix
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
List-style-position: inside; eruit
Margin en padding op ul en li op 0. Alleen padding-left en padding-right op de ul.
Margin en padding op ul en li op 0. Alleen padding-left en padding-right op de ul.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Je bent geweldig, het werkt namelijk nu in beide brouwers goed!! tnx.
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
ik ben net begonnen met een site te maken.. deze bestaat ui 6 pagina's ...
nu wil ik op elke pagina dezelfde tabel, maar met een andere kleur... dus op pagina 1 een oranje, op pagina 2 een blauwe etc.
moet ik dan 6 verschillende classes of divjes aanmaken ? of is er andere manier ?
nu wil ik op elke pagina dezelfde tabel, maar met een andere kleur... dus op pagina 1 een oranje, op pagina 2 een blauwe etc.
moet ik dan 6 verschillende classes of divjes aanmaken ? of is er andere manier ?
Je kan de tabellen toch een andere id of class geven? Dan verwijs je in de stylesheet naar die id/class.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
dus dan maak ik zeg maar
.tabel_oranje {
eigenschappen
}
.tabel_geel {
eigenschappen
}
en dan zo 6 keer...
.tabel_oranje {
eigenschappen
}
.tabel_geel {
eigenschappen
}
en dan zo 6 keer...
Nee, ik zou het anders doen.
Geef de pagina's een id, dus een id in de body-tag. Bijvoorbeeld <body id="appels"> en <body id="bananen">.
Geef ook de tabel een id, bijvoorbeeld <table id="eigenschappen">.
Geef de pagina's een id, dus een id in de body-tag. Bijvoorbeeld <body id="appels"> en <body id="bananen">.
Geef ook de tabel een id, bijvoorbeeld <table id="eigenschappen">.
| 1 2 3 4 5 6 7 8 9 10 11 12 | #eigenschappen { border: 1px solid #000; } /* stijl voor pagina appels */ #appels #eigenschappen { background-color: green; } /* stijl voor pagina bananen */ #bananen #eigenschappen { background-color: yellow; } |
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Dit krijg ik te zien in IE
edit: een plaatje is wat duidelijker
Kortweg: de marker voor 'Milieu' moet voor 'milieu' staan, en niet ergens in het midden van die 2de list.
En dit wil ik graag zien (en krijg ik wel te zien in FF en opera)
Niveau 2 heeft geen list-style-type. niveau 1 wel. item 1b heeft een list genest. Hierdoor wordt in IE de marker niet voor de tekst 'niveau 1b' geplaatst, maar ergens voor 'niveau 2a' (doordat het midden van de gebruikte hoogte door item 2b ongeveer daar ligt.
Kan dit door een element anders? (dat de vertical-aling van de marker op 'top' staat ingesteld)
css:
html:
[ Bericht 3% gewijzigd door the_disheaver op 16-01-2006 00:00:00 ]
edit: een plaatje is wat duidelijker
Kortweg: de marker voor 'Milieu' moet voor 'milieu' staan, en niet ergens in het midden van die 2de list.
| 1 2 3 4 5 | niveau 1b * niveau 2a niveau 2b * niveau 1c |
En dit wil ik graag zien (en krijg ik wel te zien in FF en opera)
| 1 2 3 4 5 | * niveau 1b niveau 2a niveau 2b * niveau 1c |
Niveau 2 heeft geen list-style-type. niveau 1 wel. item 1b heeft een list genest. Hierdoor wordt in IE de marker niet voor de tekst 'niveau 1b' geplaatst, maar ergens voor 'niveau 2a' (doordat het midden van de gebruikte hoogte door item 2b ongeveer daar ligt.
Kan dit door een element anders? (dat de vertical-aling van de marker op 'top' staat ingesteld)
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 | list-style-image: url(list-pijl.gif); list-style-type: square; list-style-position: inside; margin: 0; padding: 0; } ul.menulevel2{ list-style-type: none; margin: 0; padding: 0; } ul.menulevel1 li.doc1 { margin: 0; padding: 5px 0px 3px 15px; width: 200px; border-bottom: 1px solid #73D300; } ul.menulevel2 li.doc2 { margin: 0 0 0 5px; padding: 2px 0px 2px 5px; border-left: 3px solid #73D300; } |
html:
| 1 2 3 4 5 | <ul class="menulevel2"><li class="doc2"titel 1</li> <li class="doc2">titel 2</li></ul> </li> <li class="doc1">Onderwijs</li></ul> |
[ Bericht 3% gewijzigd door the_disheaver op 16-01-2006 00:00:00 ]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <tr style="color:black;font-weight:bold;background-image:url(../images/leeg.jpg);"> <td style="border-style:solid;border-width:1px 0 1px 1px;border-color:rgb(160,166,176)">Order ID</td> <td style="border-style:solid;border-width:1px 0;border-color:rgb(160,166,176)">Status</td> <td style="border-style:solid;border-width:1px 1px 1px 0;border-color:rgb(160,166,176)">datum</td> </tr> <tr> <td> <form name="form" action="<?=$_SERVER['PHP_SELF'];?>" method="post"> <select name="status" onChange="submit(this)"> <option value="0"<?if($row['status']==0){?> selected="selected"<?}?>>0</option> <option value="1"<?if($row['status']==1){?> selected="selected"<?}?>>1</option> <option value="2"<?if($row['status']==2){?> selected="selected"<?}?>>2</option> <option value="3"<?if($row['status']==3){?> selected="selected"<?}?>>3</option> </select> <input type="hidden" name="order_id" value="<?=$row['order_id'];?>" /> </form> </td> </tr> </table> |
Waarom zit er zoveel ruimte op mijn rijen ?
Ik heb ook select al een style met een height mee gegeven, de <tr> de <td>. Maakt onder IE niets uit en onder FF wordt de selectbox wel kleiner, maar de cel/rij blijft hoger dan noodzakelijk
Komt die ruimte niet door het form?
In FF zit daar in ieder geval standaard een margin-bottom: 1em op.
In FF zit daar in ieder geval standaard een margin-bottom: 1em op.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
quote:Op dinsdag 17 januari 2006 22:49 schreef SuperRembo het volgende:
Komt die ruimte niet door het form?
In FF zit daar in ieder geval standaard een margin-bottom: 1em op.
De ENIGE tag waar ik geen style in had gezet
Ik heb een divje, de container van het alles.
Daarin staat een afbeelding, met daarnaast een stukje tekst.
De tekst staat in een div. En nu wil ik het zo maken dat de tekst naast de afbeelding komt te staan.
Display:inline, heeft alleen effect op de eerste regel, en ik wil de hele div. Ik heb al met floats/clears zitten gochelen maar geen succes.
Daarin staat een afbeelding, met daarnaast een stukje tekst.
De tekst staat in een div. En nu wil ik het zo maken dat de tekst naast de afbeelding komt te staan.
Display:inline, heeft alleen effect op de eerste regel, en ik wil de hele div. Ik heb al met floats/clears zitten gochelen maar geen succes.
| 1 2 3 4 5 6 7 8 | <div style="float: left"> <img> </div> <div style="float: left"> <p>test</p> </div> </div> |
?
Of begrijp ik je niet goed?
Tis gelukt, met een clear: right; aan de text-div.quote:Op woensdag 25 januari 2006 19:46 schreef the_disheaver het volgende:
[ code verwijderd ]
?
Of begrijp ik je niet goed?
Een ander probleem. Ik heb dus nu het volgende:
En dit zo een aantal keer. Nu is het probleem dat wanneer de tekst korter is dan de afbeelding hoog is ie de volgende entry niet op een nieuwe regel zet.
Het gaat om deze pagina:
http://www.ruudmiddelrallyteam.nl/sponsoring.php
| 1 2 3 4 5 6 7 8 | <img style="float: left"> <div style="clear: right"> <p>test</p> </div> </div> <hr /> |
En dit zo een aantal keer. Nu is het probleem dat wanneer de tekst korter is dan de afbeelding hoog is ie de volgende entry niet op een nieuwe regel zet.
Het gaat om deze pagina:
http://www.ruudmiddelrallyteam.nl/sponsoring.php
| 1 2 3 4 5 6 7 8 | <img style="float: left" > <div style="clear: both"> <p>test</p> </div> </div> <hr /> |
ofwel: clear: both ipv clear: right
toch niet
Maar dit wel: clear: both in de <hr> zetten
| 1 2 3 4 5 6 7 8 | <img style="float: left" "> <div style="float: left"> <p>text</p> </div> </div> <hr style="clear: both" /> |
Thnx. .quote:Op woensdag 25 januari 2006 20:31 schreef the_disheaver het volgende:
Maar dit wel: clear: both in de <hr> zetten
[ code verwijderd ]
Paar kleine opmerkingen over je site:quote:
Voorbeeld:
| 1 |
en
| 1 |
Zou je beter als volgt kunnen neerzetten:
| 1 2 | <h2>Sponsoren van het Ruud Middel Rally Team</h2> |
Niet alleen beter te gebruiken voor mensen die je site zonder styles bekijken maar ook beter te "begrijpen" en dus beter te indexen door zoekmachines.
Verder ziet het er netjes uit hoor!
Even een vraagje. Ik probeer verticaal centreren nog steeds goed werkend te krijgen met css. Zie bijvoorbeeld http://www.ruudvandevoort.nl. Maar als ik deze met IE voor de mac bekijk dan ziet het er verneukt uit. Volgens mij ligt dat aan het html, body { height: 100%; } maar dat weet ik niet zeker, iemand een oplossing, eventuele mac ie hack, daarvoor?
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
Allemaal CSS hacks op een rijtje: http://w3development.de/css/hide_css_from_browsers/summary/ of http://www.quirksmode.org/browsers/explorer5mac.html
Maar ik heb begrepen dat IE op de Mac niet meer ontwikkeld wordt, en ook nauwelijks meer gebruikt wordt.
[ Bericht 1% gewijzigd door Berkery op 28-01-2006 17:03:33 ]
Maar ik heb begrepen dat IE op de Mac niet meer ontwikkeld wordt, en ook nauwelijks meer gebruikt wordt.
[ Bericht 1% gewijzigd door Berkery op 28-01-2006 17:03:33 ]
No Dukes of Hazzard in the classroom
Vergeet IE voor de mac. Klote browser, weinig gebruikt en wordt niet meer ondersteund. Ziet het er goed uit in Safari? Dan is het goed.quote:Op zaterdag 28 januari 2006 13:41 schreef DionysuZ het volgende:
Even een vraagje. Ik probeer verticaal centreren nog steeds goed werkend te krijgen met css. Zie bijvoorbeeld http://www.ruudvandevoort.nl. Maar als ik deze met IE voor de mac bekijk dan ziet het er verneukt uit. Volgens mij ligt dat aan het html, body { height: 100%; } maar dat weet ik niet zeker, iemand een oplossing, eventuele mac ie hack, daarvoor?
En om Quirksmode over Explorer 5.2 Mac te citeren:
quote:Bug ridden crash prone piece of junk
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Dit probleem heeft met javascript en css te maken, maar de laatste leek me belangrijker, dus post ik het hier.
Ik wil dat iets er zo uit komt te zien:
Maar, tot op heden ziet het er alleen in Firefox een beetje uit zoals het moet zien. Firefox verschuift het menuutje alleen als je het inklapt (even refreshen als het toevallig wel goed werkt, de ene keer werkt het, de andere keer niet )
http://82.168.244.204:1111/studio/studio.php
In IE werkt het javascript-gedeelte goed (geen overbodige ruimtes) en in Opera is het acceptabel als ik nog wat aanpassingen in de css doe.
Meld het even als de link het niet doet, het staat nu op mijn thuisserver.
Het CSS-probleem: Hoe krijg ik het goed in Opera en IE?
Het javascript-probleem (Firefox): Probeer het menuutje een paar keer in en uit te klappen en het verschuift naar beneden.
-edit-
Een tweede versie met wat kleine aanpassingen, blijft dezelfde fouten houden
[ Bericht 10% gewijzigd door Nevermind op 28-01-2006 21:08:29 ]
Ik wil dat iets er zo uit komt te zien:
Maar, tot op heden ziet het er alleen in Firefox een beetje uit zoals het moet zien. Firefox verschuift het menuutje alleen als je het inklapt (even refreshen als het toevallig wel goed werkt, de ene keer werkt het, de andere keer niet )
http://82.168.244.204:1111/studio/studio.php
In IE werkt het javascript-gedeelte goed (geen overbodige ruimtes) en in Opera is het acceptabel als ik nog wat aanpassingen in de css doe.
Meld het even als de link het niet doet, het staat nu op mijn thuisserver.
Het CSS-probleem: Hoe krijg ik het goed in Opera en IE?
Het javascript-probleem (Firefox): Probeer het menuutje een paar keer in en uit te klappen en het verschuift naar beneden.
-edit-
Een tweede versie met wat kleine aanpassingen, blijft dezelfde fouten houden
[ Bericht 10% gewijzigd door Nevermind op 28-01-2006 21:08:29 ]
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
Het probleem in FireFix is dat je de display style van de thead op 'block' zet. Dat is geen geldige waarde voor een thead element. Standaard heeft een thead element display:table-header-group. Het makkelijkste is het om style.display = 'block' te vervangen door style.display = ''. De lege string zorgt er voor dat de standaard waarde wordt gebruikt.
Een beetje vreemd dat je 2 keer een thead in een table hebt staan. Het lijkt me beter om 1 thead te gebruiken met 2 tr's.
[ Bericht 16% gewijzigd door SuperRembo op 28-01-2006 21:44:48 ]
Een beetje vreemd dat je 2 keer een thead in een table hebt staan. Het lijkt me beter om 1 thead te gebruiken met 2 tr's.
[ Bericht 16% gewijzigd door SuperRembo op 28-01-2006 21:44:48 ]
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
SR, je bent geweldig
-edit-
dat is in de tweede en derde versie gefixt. en deze laatste werkt nu
[ Bericht 30% gewijzigd door Nevermind op 28-01-2006 21:50:07 ]
-edit-
dat is in de tweede en derde versie gefixt. en deze laatste werkt nu
[ Bericht 30% gewijzigd door Nevermind op 28-01-2006 21:50:07 ]
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
Ik wil graag een fold-out menutje maken. Dus een menu met een aantal items die opengeklikt kunnen worden. Als de Windows verkenner.
Is dat mogelijk met css, of kan ik toch beter een oplossing met Javascript oid zoeken?
Is dat mogelijk met css, of kan ik toch beter een oplossing met Javascript oid zoeken?
Dit gaat je niet cross-browser lukken met alleen CSS, maar er zijn genoeg kant en klare menu's te vinden op de betere DHTML sites.
No Dukes of Hazzard in the classroom
ik heb een site met een aantal DIVs. om een voorbeeld te geven noem ik even de cda(.nl) site. stel dat elk vakje hier een eigen DIV is (denk even de onderste balk weg), en ik een resolutie van 2000x1500 draai (hypothetisch ), dan heb ik dus een open ruimte onderin. Hoe krijg ik de onderste DIVs helemaal uitgerekt tot onder? deze afstand is dus variabel per resolutie.
), dan heb ik dus een open ruimte onderin. Hoe krijg ik de onderste DIVs helemaal uitgerekt tot onder? deze afstand is dus variabel per resolutie.
As a rule, I never touch anything more sophisticated and delicate than myself.
Ik loop ook ff vast met css, ik ben met mijn site bezig: site
en in een poging om ook de achtergrondkleur van de de cellen naar css te laten verwijzen loop ik vast.
Nu gebruik ik dus gewoon <tr bgcolor=..... /tr> en die wil ik laten verwijzen naar een stylesheet. Probleem is alleen dat ie hem niet pakt zodra je "over" meerdere cellen of tabellen heen wilt gaan, het enige wat me lukt is de achtegrondkleur van een lijn tekst te veranderen, maar de rest van de cel houdt zich daar ook niet aan.
Iemand enig idee hoe dit op te lossen?
[ Bericht 9% gewijzigd door Autoreply op 31-01-2006 15:13:07 ]
en in een poging om ook de achtergrondkleur van de de cellen naar css te laten verwijzen loop ik vast.
Nu gebruik ik dus gewoon <tr bgcolor=..... /tr> en die wil ik laten verwijzen naar een stylesheet. Probleem is alleen dat ie hem niet pakt zodra je "over" meerdere cellen of tabellen heen wilt gaan, het enige wat me lukt is de achtegrondkleur van een lijn tekst te veranderen, maar de rest van de cel houdt zich daar ook niet aan.
Iemand enig idee hoe dit op te lossen?
[ Bericht 9% gewijzigd door Autoreply op 31-01-2006 15:13:07 ]
<td style="background-color: #000000;"> al geprobeerd?
of als je een externe stylesheet hebt;
style.css:
td.achtergrond { background-color: #000000; }
je htmlpagina:
<td class="achtergrond">
of als je een externe stylesheet hebt;
style.css:
td.achtergrond { background-color: #000000; }
je htmlpagina:
<td class="achtergrond">
As a rule, I never touch anything more sophisticated and delicate than myself.
Je bent een heldquote:Op dinsdag 31 januari 2006 15:10 schreef Desdinova het volgende:
<td style="background-color: #000000;"> al geprobeerd?
of als je een externe stylesheet hebt;
style.css:
td.achtergrond { background-color: #000000; }
je htmlpagina:
<td class="achtergrond">
Ik zit met nog een vraagje: in Mozilla draait ie prima, maar in ie worden de kopjes die 14 en 20 zijn met dezelfde grootte als de tekst weergegeven. Ik vermoed dat dit al eerder gedefinieerd is voor die stukken. Normaal gesproken zou een tag hier toch overheen moeten gaan
Ook in Opera klopt hij niet helemaal, daar schijnt de middelste kolom er raar uit te zien. (Niet zelf gezien.)
=> http://www.jarnonieuwenhuize.nl
En let niet op de kleuren
Ook in Opera klopt hij niet helemaal, daar schijnt de middelste kolom er raar uit te zien. (Niet zelf gezien.)
=> http://www.jarnonieuwenhuize.nl
En let niet op de kleuren
Heu, je hebt zelfs tags verzonnen: <kop1> en <kop2> - dat kan niet zomaar, dus de vraag is eigenlijk waarom Mozilla hier wel wat mee doet
En je moet in CSS altijd een eenheid meegeven bij de groottes:
font-size: 14 FOUT
font-size: 14px GOED.
<STYLE type="text/css">
en </style> horen ook niet in een externe style sheet.
En je moet in CSS altijd een eenheid meegeven bij de groottes:
font-size: 14 FOUT
font-size: 14px GOED.
<STYLE type="text/css">
en </style> horen ook niet in een externe style sheet.
No Dukes of Hazzard in the classroom
Ik ben bezig met de volgende pagina:
http://www.altijdlente.net/webdesign/portfolio/
Ik heb een container voor de content. Daarin staat het menu. Wanneer ik nu echter een andere div, bijvoorbeeld iets wat lijkt op een tabel in die content-container plaats komen de randen achter het menu door.
Heeft er iemand enig idee hoe ik dit op kan lossen?
http://www.altijdlente.net/webdesign/portfolio/
Ik heb een container voor de content. Daarin staat het menu. Wanneer ik nu echter een andere div, bijvoorbeeld iets wat lijkt op een tabel in die content-container plaats komen de randen achter het menu door.
Heeft er iemand enig idee hoe ik dit op kan lossen?
Waarom geef je een div display: table-cell: (en dan ook nog een dubbele punt aan het eind)
Je stylesheet eindigd me di, ontbreekt daar niet iets
Ik denk dat er een margin-left van ongeveer 200px ontbreekt op de content div.
Je stylesheet eindigd me di, ontbreekt daar niet iets
Ik denk dat er een margin-left van ongeveer 200px ontbreekt op de content div.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Danku, margin-left van 250px deed het. .quote:Op zaterdag 4 februari 2006 21:55 schreef SuperRembo het volgende:
Waarom geef je een div display: table-cell: (en dan ook nog een dubbele punt aan het eind)
Je stylesheet eindigd me di, ontbreekt daar niet iets
Ik denk dat er een margin-left van ongeveer 200px ontbreekt op de content div.
Ik snap die div met display: table-cell nog niet. Wat wil je daar me bereiken?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Ik had \\\'m er in eerste instantie neergezet om die content div naast het menu te krijgen. Maar nu blijkt het zonder ook te werken...quote:Op zaterdag 4 februari 2006 23:12 schreef SuperRembo het volgende:
Ik snap die div met display: table-cell nog niet. Wat wil je daar me bereiken?
Had ik nog een vraagje:
Als ik een afbeelding hebt, kan ik daar dan op een makkelijke manier de tekst linksbovenaan in een regel krijgen? Met een display:inline komt ie namelijk onderaan te staan.
En een float:left zorgt er weer voor dat de afbeelding op een of andere manier buiten de border valt.
Heeft er iemand nog toevallig de stylez.css van mijn site van gisteren in zijn temporary internet files staan?
Bedoel je deze?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Ik maak nog gebruik van een <marquee> op mijn site. Deze tag is echter niet toegestaan door de HTML validator van het W3C.
Deze geeft aan dat ik het effect moet bereiken door middel van CSS. Ik heb gezocht, maar ik kan geen CSS code vinden die dit doet.
Weet iemand het soms?
Deze geeft aan dat ik het effect moet bereiken door middel van CSS. Ik heb gezocht, maar ik kan geen CSS code vinden die dit doet.
Weet iemand het soms?
Schuimpje... mijn liefste. Verlaat mij nimmer weer...
Als je persé een scrollende tekst wilt hebben moet je gewoon marquee gebruiken, met CSS kan dit niet, met DHTML zal dit wel kunnen. Maar waarom moeilijk doen? Zelfs FF snapt <marquee>, en je krijgt heus niet de W3C politie op je dak.
No Dukes of Hazzard in the classroom
Ik ben bezig met de volgende; een layout zonder images ed, voor het realiseren van een projectje van mij. Echter is de layout in FF/IE totaal anders... en kan maar niet voor elkaar krijgen dat ze identiek er uit zien. De menu's zijn groter (hoger) in FF en in FF heb ik geen spacing onder 'onderdelen' die ik in IE wel heb iemand een idee?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>test</title> <style type="text/css"> * { font-family: Verdana; font-size: 13px;} h1 { font-size: 24px; border-bottom: 3px solid gray; margin-bottom: 5px;} h2 { font-size: 16px; padding-bottom: 5px; padding-top: 5px; } html { background: white;} body { margin: 0 auto; padding: 30px; background: #ddd; border-left: 1px solid gray; border-right: 1px solid gray;} #container { width: 600px; border-bottom: 3px solid gray;} #navcontainer { margin: 0; padding: 0; height: 22px; font: 13px Verdana, sans-serif; width: 100%; border-bottom: 1px solid #bbb; list-style-type: none; } #navlist li a#current:hover { border-bottom: 3px solid #f90; background: #eee; } #navlist li { float: left; margin: 0; padding: 0; width: auto; display: block; } #navlist li a, #navlist li a:link { font: 13px Verdana, sans-serif; color: #555; text-decoration: none; padding: 3px 5px 3px 5px; display: block; } #navlist li a:hover { font: 13px Verdana, sans-serif; color: #039; border-bottom: 3px solid #bbb; cursor: pointer; background: #eee; } #navlist li a#current, #navlist li a#current:link { color: #000; cursor: default; font-weight: bold; border-bottom: 3px solid #999; } #subcontainer { margin: 0; padding: 0; height: 15px; font: 9px Verdana, sans-serif; width: 100%; border-bottom: 1px solid #bbb; list-style-type: none; } .sublist ul { list-style-type: 0; } .sublist li, .sublist li a { list-style-type: none; text-decoration: none; color: gray; font: 9px Verdana, sans-serif; font-weight: bold; height: 15px; float: left; padding-top: 2px; padding-right: 10px;} .sublist li a:hover { color: black; list-style-type: none; text-decoration: none; } select { border: 1px solid gray; font: 9px Verdana, sans-serif; width: 250px; } .f_input { border: 1px solid gray; font: 9px Verdana, sans-serif; width: 250px;} .f_radio { border: 1px solid gray; width: 20px; } .f_check { border: 1px solid gray: width: 20px; } button { border: 1px solid gray; font: 9px Verdana, sans-serif; width: 250px; } textarea { border: 1px solid gray; width: 250px; height: 150px; } p { padding-left: 10px; padding-right: 10px; } .left { width: 200px; float: left; } .break { clear: both; } </style> <script language="javascript" type="javascript/text"> </script> </head> <body> <div id="container"> <h1>HEX2PHP Archive builder v2.0</h1> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Home</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Installer settings</a></li> <li><a href="#">Installer data</a></li> <li><a href="#">Help</a></li> </ul> </div> <div id="subcontainer"> <ul class="sublist"> <li><a href="#">Settings</a></li> <li><a href="#" id="current">Disclamer</a></li> <li><a href="#">Function checks</a></li> </ul> </div> <div id="subcontainer"> <ul class="sublist"> <li><a href="#" id="current">Files and paths</a></li> <li><a href="#">MySQL (database)</a></li> </ul> </div> <div id="home"> </div> <div id="settings"> <h2>Settings</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse tortor lorem, pellentesque quis, tristique id, iaculis eu, augue. Sed aliquet, enim a gravida mollis, pede mauris commodo nunc, in mollis eros mauris et urna. Cras adipiscing. Praesent viverra rutrum purus. Aliquam scelerisque vehicula nisi. Duis at libero. In ornare interdum mi. Aenean eget dolor pulvinar enim commodo tempus. Nulla facilisi. In et libero. Donec nonummy, tortor eu dapibus tempus, lorem dui lobortis nunc, at sodales mi metus vel leo. </p> <div class="left">Pulldown optie</div> <div class="left"> <select><option value="kut">Whahahahahahahaha</option></select> </div> <div class="break"></div> <div class="left">Input veld</div> <div class="left"> <input class="f_input" type="text" name="test" value="invoerveld" /> </div> <div class="break"></div> <div class="left">Button</div> <div class="left"> <input class="f_input" type="button" name="test" value="Button" /> </div> <div class="break"></div> <div class="left">Radio</div> <div class="left"> Yes <input class="f_radio" type="radio" name="test" value="Button" /> No <input class="f_radio" type="radio" name="test" value="Button" /> </div> <div class="break"></div> <h2>Profiles</h2> <div class="left">Check</div> <div class="left"> Yes <input class="f_check" type="checkbox" name="test" value="Button" /> No <input class="f_check" type="checkbox" name="test" value="Button" /> </div> <div class="break"></div> <div class="left">Textarea</div> <div class="left"> <textarea name="input">tralalala</textarea> </div> <div class="break"></div> </div> </div> </body> </html> |
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Ik ben een kneus met CSS. Ik zit er altijd mee te kutten. Zo ook vandaag.
Wat ik wil maken is een site met deze structuur.
Wat ik zou willen is dat als de sidebar wat korter uitvalt het er zo uitziet en dat als de sidebar wat langer uitvalt het er zo uitziet.
Het lukt me echter niet. Ik krijg steeds constructies die er zo of zo uitzien.
Ik heb geprobeerd te werken met de sidebar en de content als float:right en float:left. Ik heb ook absolute plaatsing geprobeerd. Maar het blijft kut.
Kan iemand me uitleggen hoe ik het wèl moet aanpakken?
Wat ik wil maken is een site met deze structuur.
Wat ik zou willen is dat als de sidebar wat korter uitvalt het er zo uitziet en dat als de sidebar wat langer uitvalt het er zo uitziet.
Het lukt me echter niet. Ik krijg steeds constructies die er zo of zo uitzien.
Ik heb geprobeerd te werken met de sidebar en de content als float:right en float:left. Ik heb ook absolute plaatsing geprobeerd. Maar het blijft kut.
Kan iemand me uitleggen hoe ik het wèl moet aanpakken?
Wat mij betreft niets, maar ik dacht dat dat uit den boze wasquote:Op woensdag 1 maart 2006 13:59 schreef Autoreply het volgende:
Wat is het bezwaar tegen tabellen?
@Tijn:
Zet de content en sidebar divs beide in de main div. Zet net voor het einde van de main div een div met alleen clear:both.
Zet de content en sidebar divs beide in de main div. Zet net voor het einde van de main div een div met alleen clear:both.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Zoiets?quote:Op woensdag 1 maart 2006 13:37 schreef Tijn het volgende:
Kan iemand me uitleggen hoe ik het wèl moet aanpakken?
[ Bericht 85% gewijzigd door Litpho op 01-03-2006 14:22:11 (kut IE) ]
"If you are depressed you shouldn't be in C major!" - Rick Beato
Geniaal! Het werkt!quote:Op woensdag 1 maart 2006 14:16 schreef SuperRembo het volgende:
@Tijn:
Zet de content en sidebar divs beide in de main div. Zet net voor het einde van de main div een div met alleen clear:both.
Maar is zo'n oplossing niet een lapmiddel? Of is er gewoon geen manier om dit goed te krijgen zonder onzichtbare divs te maken?
Misschien kan je in jouw geval de footer ook in de main div zetten en dan de clear:both op de footer.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Dat zou inderdaad ook wel werken. Maar dat vind ik qua structuur niet zo'n goeie oplossing. Ik ga me dan geheid een keer afvragen wat die dubbele </div> onderaan doet en haal het dan weg Dan doe ik het liever met de onzichtbare div.
Maar dit is wel waarom ik zo'n moeite met CSS heb, zelfs voor simpele dingen die voor m'n gevoel heel clean zouden moeten kunnen, moet je rare bokkensprongen maken.
Maar dit is wel waarom ik zo'n moeite met CSS heb, zelfs voor simpele dingen die voor m'n gevoel heel clean zouden moeten kunnen, moet je rare bokkensprongen maken.
Ik ben ook een kneus met css, maar gaat steeds iets beter... maar Sr, heb je geen idee wat er fout gaat bij mij?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Er zitten iig 2 kleine foutjes in je css.
Verder zullen de verschillen die je tussen IE en FF ziet wel komen door de verschillende box models (zie bijv quirksmode.org)
Je gebruikt ook meerdere keren dezelfde id, terwijl een id uniek moet zijn. Daardoor werkt je "current" style niet goed. (Dat gaat ook in IE fout)
Verder zullen de verschillen die je tussen IE en FF ziet wel komen door de verschillende box models (zie bijv quirksmode.org)
Je geeft vaak de breedte (of hoogte) van een element en ook een border of padding. Daardoor zie je de verschillen.quote:1. In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border.
2. In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.
Je gebruikt ook meerdere keren dezelfde id, terwijl een id uniek moet zijn. Daardoor werkt je "current" style niet goed. (Dat gaat ook in IE fout)
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Ik heb van deze site een menu gehaald, en het werkt perfect. Op 1 ding na.
Ik heb een aantal "hoofditems" naast elkaar, maar als het browser venster te smal word voor het totale menu, dan springt het laatste blokje naar de volgende regel. En dan werkt je menu niet meer zo lekker
Hoe zorg ik dat de hoofditems altijd naast elkaar blijven staan, en dat er dan gewoon een horizontale scrollbar komt. Ik heb al wat geprobeer met nowrap, en een div er omheen, maar dat werkt niet
Misschien dat jullie een oplossing weten?
Ik heb een aantal "hoofditems" naast elkaar, maar als het browser venster te smal word voor het totale menu, dan springt het laatste blokje naar de volgende regel. En dan werkt je menu niet meer zo lekker
Hoe zorg ik dat de hoofditems altijd naast elkaar blijven staan, en dat er dan gewoon een horizontale scrollbar komt. Ik heb al wat geprobeer met nowrap, en een div er omheen, maar dat werkt niet
Misschien dat jullie een oplossing weten?
ik denk dat je moet kijken naar je float
As a rule, I never touch anything more sophisticated and delicate than myself.
De enige manier om te zorgen dat opvolgende content onder je floats begint is om een element te plaatsen dat geen floats dult aan een van beide of beide kanten.quote:Op woensdag 1 maart 2006 14:21 schreef Tijn het volgende:
Geniaal! Het werkt!
Maar is zo'n oplossing niet een lapmiddel? Of is er gewoon geen manier om dit goed te krijgen zonder onzichtbare divs te maken?
Daarvoor kan je een lege clearing-div gebruiken zoals SR, of de clear-both toe te voegen aan je opvolgende content-element.
Verders is het zo dat floatende content de container div niet opstretchen in de hoogte. Om te zorgen dat je container toch de complete floats omvat kan je dat oplossen door te eindigen met een non-floating element; deze stretchen vervolgens je container wel op.
Omdat er vaak container divs zijn die enkel floatende elementen bevatten wordt weer de clearing-div gebruikt. Met of zonder content maakt eigenlijk niet uit, zolang je hij maar niet float :-)
