[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5
[CSS] voor dummies - deel 6
[CSS] voor dummies - Deel 7
Mijn laatste post:
quote:Vraag:Wat nog vager is: Mijn link probleem in IE. Kijk eens op www.beerwheels.nl met IE 6. Ik heb wel van Install all IE ofzoiets. Maar als je eenlink weergeeft wordt de pagina wit
Zullen we een mooie OP maken? Met wat handige links?
> Doe je ding!
quote:Heb het niet meer gezien toenOp zaterdag 2 februari 2008 13:35 schreef fokME2 het volgende:
@Flaccid: De vorige keer dat ik zoiets vroeg (Javascript voor dummies) werd er gezegd dat ik maar wat moois moest maken.
> Doe je ding!
I'll give it a shot!
quote:?Op zaterdag 2 februari 2008 14:01 schreef Tarabass het volgende:
Ik zie er niets aan. Wat moet ik doen om het probleem te simuleren?
quote:Helpt het als je "<br />" gebruikt (dus met een space)? Het is namelijk een known bug dat IE problemen heeft met de versie zonder space.
quote:Op zaterdag 2 februari 2008 11:33 schreef Chandler het volgende:
Ik heb een vraagje
Ik wil graag afbeeldingen in een horizontale box laten zien met alleen een horizontale scrollbar.
Hoogte: 150; breedte: 500; Afbeeldingen 128px hoog/breed
Nu heb ik een div met een vaste breedte maar overflow: auto; echter komen de afbeeldingen toch onderelkaar en krijg ik een schollbalk aan de rechterkant terwijl ik deze aan de onderkant wil.
Weet iemand een oplossing hiervoor? of een voorbeeld? (Iframe is geen oplossing
quote:Ja ik vroeg of je een voorbeeld je kan doen hoe je je afbeeldingen plaatst?Op zaterdag 2 februari 2008 17:49 schreef Chandler het volgende:
tvp, iemand nog een antwoord op mijn vraag
[..]
kan je stukje code geven?
quote:Dat weet ik niet, en 'k kan het hier ook niet testen. Geen IE thuisOp zaterdag 2 februari 2008 17:38 schreef CraZaay het volgende:
[..]
Helpt het als je "<br />" gebruikt (dus met een space)? Het is namelijk een known bug dat IE problemen heeft met de versie zonder space.
quote:Kun je het hierin niet testen: http://browsershots.org/Op zaterdag 2 februari 2008 19:18 schreef Light het volgende:
[..]
Dat weet ik niet, en 'k kan het hier ook niet testen. Geen IE thuis
quote:SimpelOp zaterdag 2 februari 2008 18:25 schreef Flaccid het volgende:
[..]
Ja ik vroeg of je een voorbeeld je kan doen hoe je je afbeeldingen plaatst?
kan je stukje code geven?
| 1 2 3 4 5 6 7 | <img src="x.png" width="128" height="128" style="float: left; padding: 10px;"> <img src="x.png" width="128" height="128" style="float: left; padding: 10px;"> <img src="x.png" width="128" height="128" style="float: left; padding: 10px;"> <img src="x.png" width="128" height="128" style="float: left; padding: 10px;"> <img src="x.png" width="128" height="128" style="float: left; padding: 10px;"> </div> |
Maar dan nog blijven ze onder elkaar staan :{
| 1 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
Doe ik nu. Is dit verantwoord?
quote:Die is prima, mits je daarna ook echt XHTML gebruikt.Op zondag 3 februari 2008 19:21 schreef Flaccid het volgende:
Welke shizzle als DOCTYPE moet je voor je html zetten?
[ code verwijderd ]
Doe ik nu. Is dit verantwoord?
quote:CSS heeft nog een andere optieOp zondag 3 februari 2008 08:55 schreef Chandler het volgende:
[..]
Simpel
[ code verwijderd ]
Maar dan nog blijven ze onder elkaar staan :{
| 1 |
dan heb je alleen een verticale scrollbar
quote:die wordt voggesmij niet gesupport door IE 6.Op zondag 3 februari 2008 19:41 schreef BabeWatcher het volgende:
[..]
CSS heeft nog een andere optie
[ code verwijderd ]
dan heb je alleen een verticale scrollbar
is het waar dat je kan kijken met welke editor een site gemaakt is?
| 1 2 3 4 5 6 7 8 9 10 11 | <div style="width: auto;"> <img src="#" height="128" width="128" style="padding: 10px;"> <img src="#" height="128" width="128" style="padding: 10px;"> <img src="#" height="128" width="128" style="padding: 10px;"> <img src="#" height="128" width="128" style="padding: 10px;"> <img src="#" height="128" width="128" style="padding: 10px;"> <img src="#" height="128" width="128" style="padding: 10px;"> <img src="#" height="128" width="128" style="padding: 10px;"> </div> </div> |
Anyone? :D
quote:iframe denk ik danOp zondag 3 februari 2008 20:26 schreef Chandler het volgende:
Helaas, het werkt niet, wat ik ook probeer.
[ code verwijderd ]
Anyone?
Ik heb een achtergrond die anders scrollt dan mijn div.
www.joristimes.nl/test
Als je het scherm groter of kleiner maatk zit er af en toe 1 pixel verschil tussen de border van de achtergrond en de rode div
[ Bericht 13% gewijzigd door Flaccid op 03-02-2008 20:43:06 ]
quote:niet helemaal goed gelezen, probeer overflow-x: scroll;Op zondag 3 februari 2008 20:26 schreef Chandler het volgende:
Helaas, het werkt niet, wat ik ook probeer.
[ code verwijderd ]
Anyone?
| 1 2 3 4 5 6 7 8 9 10 11 | <div style="width: 1500px; height: 148px;"> <img src="#" height="128" width="128" style="padding: 10px;" /> <img src="#" height="128" width="128" style="padding: 10px;" /> <img src="#" height="128" width="128" style="padding: 10px;" /> <img src="#" height="128" width="128" style="padding: 10px;" /> <img src="#" height="128" width="128" style="padding: 10px;" /> <img src="#" height="128" width="128" style="padding: 10px;" /> <img src="#" height="128" width="128" style="padding: 10px;" /> </div> </div> |
quote:Nee, tenzij je dit expliciet in de source zet.Op zondag 3 februari 2008 20:26 schreef Flaccid het volgende:
is het waar dat je kan kijken met welke editor een site gemaakt is?
quote:Nee, dat kan niet het beste: dat moet zelfs. Niet meer, en niet minderOp maandag 4 februari 2008 13:30 schreef Flaccid het volgende:
Wat kan je het beste voor je <html> tag zetten, doctype enzo?
quote:Welke doctype moet ik gebruiken?Op maandag 4 februari 2008 14:17 schreef CraZaay het volgende:
[..]
Nee, tenzij je dit expliciet in de source zet.
[..]
Nee, dat kan niet het beste: dat moet zelfs. Niet meer, en niet minder
http://www.w3schools.com/tags/tag_doctype.asp
quote:Die pagina lijkt me vrij helder? Transitional HTML 4.01 of XHTML 1.0 is altijd een veilige keuze.Op maandag 4 februari 2008 14:52 schreef Flaccid het volgende:
[..]
Welke doctype moet ik gebruiken?
http://www.w3schools.com/tags/tag_doctype.asp
quote:Deze werkt idd goed, echter is nu het probleem dat je met een vaste maat werkt. Met 10 afbeeldingen is dat geen probleem maar heb je tussen de 2 en 20 afbeeldingen dan werkt deze oplossing niet!
Als ik de site die ik voor een vriend van me aan het maken ben, bekijk in IE, dan is het menu een beetje opgeschoven, kan iemand de fout spotten?
http://www.dje-rik.nl/test/DJERIK/index.html
quote:Ook voor jou: haal eerst de 32 html-bugs er eens uit!Op maandag 4 februari 2008 23:57 schreef Banzaiaap het volgende:
Kan iemand me met het volgende probleem helpen..
Als ik de site die ik voor een vriend van me aan het maken ben, bekijk in IE, dan is het menu een beetje opgeschoven, kan iemand de fout spotten?
http://www.dje-rik.nl/test/DJERIK/index.html
quote:Ja dat heb ik reeds een dag gedaan (tussendoor) maar kom er gewoon niet uitOp maandag 4 februari 2008 20:58 schreef CraZaay het volgende:
Desnoods doe je het met JS, heb ik ook weleens gedaan, Maar CSS moet ook kunnen lijkt me. Vrolijk verder spelen zou ik zeggen
quote:Als je php hebt draaien kan je het met een variable oplossen, waarbij je het aantal plaatjes in een dir telt en dan de width uitrekent en die als breedte meegeeft. Wat je ook kan doen is alles in een table gooien:Op maandag 4 februari 2008 19:10 schreef Chandler het volgende:
[..]
Deze werkt idd goed, echter is nu het probleem dat je met een vaste maat werkt. Met 10 afbeeldingen is dat geen probleem maar heb je tussen de 2 en 20 afbeeldingen dan werkt deze oplossing niet!
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <table cellpadding="0" cellspacing="0" style="border: none"> <tr> <td><img src="#" style="width: 128px; height: 128px; margin: 10px;" /><td> <td style="padding: 10px;"><img src="#" height="128" width="128" /><td> <td style="padding: 10px;"><img src="#" height="128" width="128" /><td> <td style="padding: 10px;"><img src="#" height="128" width="128" /><td> <td style="padding: 10px;"><img src="#" height="128" width="128" /><td> <td style="padding: 10px;"><img src="#" height="128" width="128" /><td> <td style="padding: 10px;"><img src="#" height="128" width="128" /><td> </tr> </table> </div> |
quote:het is inderdaad een oplossing maar helaas niet de gene die ik zoekOp dinsdag 5 februari 2008 10:19 schreef Tarabass het volgende:
Als je php hebt draaien kan je het met een variable oplossen, waarbij je het aantal plaatjes in een dir telt en dan de width uitrekent en die als breedte meegeeft. Wat je ook kan doen is alles in een table gooien:
[ code verwijderd ]
maar toch tnx! Verder zit ik met iets vaags, ik heb de volgende code
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=1" border="0" onClick="preview('animals', '1');"></a> <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=11" border="0" onClick="preview('animals', '11');"></a> <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=12" border="0" onClick="preview('animals', '12');"></a> <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=14" border="0" onClick="preview('animals', '14');"></a> <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=2" border="0" onClick="preview('animals', '2');"></a> <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=3" border="0" onClick="preview('animals', '3');"></a> </div> |
en krijg dit als uitkomst
maar wil 3x een blok naast elkaar van 130px breed en 130px hoog waarin de afbeelding gecentreerd staat, echter worden de afbeeldingen weer gegeven in een blok met de eigen grote!? wat doe ik fout?
[ Bericht 10% gewijzigd door Chandler op 07-02-2008 10:20:05 ]
quote:Zou geen probleem mogen geven, zo gebruik ik het ook (alleen dan achter de eigenlijk kop ipv ervoor).Op donderdag 7 februari 2008 11:05 schreef Geqxon het volgende:
Dummytijd: Is het af te raden om naast tekst ook objecten in een header te zetten? Ik wil hetzelfde als Wikipedia doen, een onderstreepte H2 met compleet rechts op de lijn een [edit] tekst. Wikipedia lost dit op met een constructrie als "<h2><span>[edit]</span>Title</h2>", maar is dit wel zoals het hoort? Krijg ik hier geen accessibility issues mee?
quote:Zo doet wiki dat niet. Wiki doet dit:Op donderdag 7 februari 2008 11:05 schreef Geqxon het volgende:
Dummytijd: Is het af te raden om naast tekst ook objecten in een header te zetten? Ik wil hetzelfde als Wikipedia doen, een onderstreepte H2 met compleet rechts op de lijn een [edit] tekst. Wikipedia lost dit op met een constructrie als "<h2><span>[edit]</span>Title</h2>", maar is dit wel zoals het hoort? Krijg ik hier geen accessibility issues mee?
| 1 |
quote:Is exact hetzelfde principe toch?Op donderdag 7 februari 2008 12:36 schreef Tarabass het volgende:
[..]
Zo doet wiki dat niet. Wiki doet dit:
[ code verwijderd ]
quote:Dat, en ik vind de tweede span niet correct, en vooral onhandig als je een keer geen extra optie-tekst hebt. Daarnaast moet je in dit geval met diverse classes te werk gaan, en ook dat is bij mij geen favoriet.Op donderdag 7 februari 2008 12:48 schreef CraZaay het volgende:
[..]
Is exact hetzelfde principe toch?
quote:Nee. De h2-tag staat er in dit geval omheen om zo zoekmachines etc. beter hun werkt te laten doen qua indexeren. De span-tags krijgen de stijlen mee via css-classes. Dit is imo netter en de h2 is beter her te gebruiken. Maar het uiteindelijke resultaat zal inderdaad hetzelfde zijn, dus eigenlijk ook niet iets om druk over te maken..Op donderdag 7 februari 2008 12:48 schreef CraZaay het volgende:
[..]
Is exact hetzelfde principe toch?
quote:Ik ben bezig met een site voor een vriend van mij, die een site nodig heeft waar hij zijn muziek kan laten horen, en waar informatie over optredens en dergelijke te vinden is. Heel simpel zou je zeggen.. Ik heb de site ontworpen in Photoshop, stukken eruit geslicet en daarna opgebouwd met XHTML en CSS. Echter, nou ziet de site er heel anders uit in Firefox dan in IE7 (Ik heb vanuit Firefox gebouwd, omdat dat mijn standaard browser is, maar nu blijkt het toch makkelijker geweest om de site eerst in IE te checken. De layout klopt totaal niet meer in IE7, terwijl het er in FF prima uitziet.
Ik heb even een testversie [url="http://www.dje-rik.nl/test/DJERIK/index.html"]hier[/url] geupload, het is nog niet af, maar het was meer om de layout te testen.
Kan iemand me uitleggen wat ik verkeerd doe? (Ik ben nog maar een klein half jaar hier mee bezig, dus reken me aub niet te hard af
quote:In Geqxon's voorbeeld staat de H2 er ook omheen toch?Op donderdag 7 februari 2008 13:09 schreef Tarabass het volgende:
[..]
Nee. De h2-tag staat er in dit geval omheen om zo zoekmachines etc. beter hun werkt te laten doen qua indexeren. De span-tags krijgen de stijlen mee via css-classes. Dit is imo netter en de h2 is beter her te gebruiken. Maar het uiteindelijke resultaat zal inderdaad hetzelfde zijn, dus eigenlijk ook niet iets om druk over te maken..
quote:Begin met die 32 HTML errors (zie validator), en daarna praten we verderOp donderdag 7 februari 2008 13:51 schreef Banzaiaap het volgende:
Ik had dit ook al op tweakers gepost, maar misschien weten jullie ook een oplossing
quote:Sorry klopt, is gedaanOp donderdag 7 februari 2008 14:04 schreef CraZaay het volgende:
[..]
Begin met die 32 HTML errors (zie validator), en daarna praten we verder
quote:Anyone? zie ik nou gewoon wat over het hoofd?Op donderdag 7 februari 2008 00:47 schreef Chandler het volgende:
[..]
het is inderdaad een oplossing maar helaas niet de gene die ik zoek
Verder zit ik met iets vaags, ik heb de volgende code
[ code verwijderd ]
en krijg dit als uitkomst
[ afbeelding ]
maar wil 3x een blok naast elkaar van 130px breed en 130px hoog waarin de afbeelding gecentreerd staat, echter worden de afbeeldingen weer gegeven in een blok met de eigen grote!? wat doe ik fout?
quote:Ik heb het voor de grap eens `from scratch´ gedaan:Op donderdag 7 februari 2008 14:25 schreef Chandler het volgende:
[..]
Anyone? zie ik nou gewoon wat over het hoofd? :D
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | width: 402px; height: 402px; margin: 0; padding: 0; border: 1px #000 solid; } ul.imageblock li{ width: 130px; height: 130px; float: left; padding: 0; margin: 1px; text-align: center; line-height: 130px; list-style-type: none; border: 1px #AAA solid; } |
| 1 2 3 4 5 6 7 8 9 10 | <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> </ul> |
Zoiets doet het hier prima.
quote:Heb je een doc-type staan? Anders eens style="" in de tag plaatsenOp donderdag 7 februari 2008 14:25 schreef Chandler het volgende:
[..]
Anyone? zie ik nou gewoon wat over het hoofd?
quote:Iemand?Op donderdag 7 februari 2008 13:51 schreef Banzaiaap het volgende:
Ik had dit ook al op tweakers gepost, maar misschien weten jullie ook een oplossing
Ik ben bezig met een site voor een vriend van mij, die een site nodig heeft waar hij zijn muziek kan laten horen, en waar informatie over optredens en dergelijke te vinden is. Heel simpel zou je zeggen.. Ik heb de site ontworpen in Photoshop, stukken eruit geslicet en daarna opgebouwd met XHTML en CSS. Echter, nou ziet de site er heel anders uit in Firefox dan in IE7 (Ik heb vanuit Firefox gebouwd, omdat dat mijn standaard browser is, maar nu blijkt het toch makkelijker geweest om de site eerst in IE te checken. De layout klopt totaal niet meer in IE7, terwijl het er in FF prima uitziet.
Ik heb even een testversie [url="http://www.dje-rik.nl/test/DJERIK/index.html"]hier[/url] geupload, het is nog niet af, maar het was meer om de layout te testen.
Kan iemand me uitleggen wat ik verkeerd doe? (Ik ben nog maar een klein half jaar hier mee bezig, dus reken me aub niet te hard af )
Edit: Ik heb het nu tijdelijk opgelost met de volgende code.
| 1 2 3 4 5 6 7 8 9 | <!--[if IE]> <style> #main { top:33px; } </style> <![endif]--> |
[ Bericht 12% gewijzigd door Banzaiaap op 07-02-2008 16:44:41 ]
quote:Die van jou is inderdaad veel beter, is er ook een optie ipv links floaten dat het gecentreerd staat.. Stel ik heb maar 2 plaatjes dat deze dan in het midden van het kader komen te staan?Op donderdag 7 februari 2008 14:53 schreef Geqxon het volgende:
[..]
Ik heb het voor de grap eens `from scratch´ gedaan:
[ code verwijderd ]
[ code verwijderd ]
Zoiets doet het hier prima.
ik heb dit zelf al geprobeerd maar helaas quote:Edit: Eens even kijken...Op donderdag 7 februari 2008 16:59 schreef Chandler het volgende:
[..]
Die van jou is inderdaad veel beter, is er ook een optie ipv links floaten dat het gecentreerd staat.. Stel ik heb maar 2 plaatjes dat deze dan in het midden van het kader komen te staan?
quote:Dat kan alleen op het parent element door align/text-alignOp donderdag 7 februari 2008 16:59 schreef Chandler het volgende:
[..]
Die van jou is inderdaad veel beter, is er ook een optie ipv links floaten dat het gecentreerd staat.. Stel ik heb maar 2 plaatjes dat deze dan in het midden van het kader komen te staan?
quote:Ik ben zo'n leek, kun je dit eens voor Chandler N00bie gemakkelijker uitleggenOp donderdag 7 februari 2008 17:12 schreef Tarabass het volgende:
Dat kan alleen op het parent element door align/text-align
quote:Onder de categorie "et moet en zal met CSS", mijn prachtige meesterwerk:Op donderdag 7 februari 2008 17:34 schreef Chandler het volgende:
[..]
Ik ben zo'n leek, kun je dit eens voor Chandler N00bie gemakkelijker uitleggen
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <li> <ul class="three"> <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> </ul> </li> <li> <ul class="three"> <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> </ul> </li> <li> <ul class="two"> <li><a href="#">baz</a></li> <li><a href="#">baz</a></li> </ul> </li> </ul> |
| 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 | width: 402px; padding: 0; border: 1px #000 solid; } ul.imageblock li{ height: 134px; list-style-type: none; } ul.imageblock li ul{ margin: 0 auto; padding: 0; } ul.imageblock li ul.one{ width: 132px; } ul.imageblock li ul.two{ width: 268px; } ul.imageblock li ul.three{ width: 402px; } ul.imageblock li ul li{ float: left; width: 130px; height: 130px; margin: 1px; text-align: center; line-height: 130px; border: 1px #AAA solid; } |
Ik ben denk ik wat doorgeschoten. Maar het werkt wel!
| 1 2 3 4 5 6 7 8 9 10 11 | <!-- Grote foto en tekst --> <div style="width: 390px; float:left;"> <!-- Foto --> <div style="width: 390px; height: 390px; background-color:#99FF00">Foto</div> <!-- Tekst links --> <div style="width: 390px; background-color:#FF66CC;">Tekst links</div> </div> <!-- Tekst rechts --> <div style="width: 390px; background-color:#FF0000; float: right;">Tekst rechts</div> </div> |
Hoe kan het nou weer dat FF dat niet goed op pakt?
Ik gok overigens dat je ergens iets uit de flow haalt en verwacht dat een gefloat element binnen een niet-gefloat element ervoor zorgt dat de tweede meeschaalt.
quote:ok ik heb het even anders gedaanOp donderdag 7 februari 2008 21:58 schreef CraZaay het volgende:
Welke div moet precies met welke div's meeschalen? Geef ze even id's en leg het aan de hand daarvan uit. Dit is onleesbaar zo.
Ik gok overigens dat je ergens iets uit de flow haalt en verwacht dat een gefloat element binnen een niet-gefloat element ervoor zorgt dat de tweede meeschaalt.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #content{margin: auto; width: 780px; background-color:#FFFFFF; float:inherit;} #left{width: 390px; float:left;} #left_foto{width: 390px; height: 390px; background-color:#99FF00;} #left_text{width: 390px; background-color:#FF66CC;} #right{width: 390px; background-color:#FF0000; float: right;} </style> <div id="content"> <div id="left"> <div id="left_foto">Foto</div> <div id="left_text">Tekst links</div> </div> <div id="right">Tekst rechts</div> </div> |
begrijp je zo wat ik bedoel? er is een grote div content
daarbinnen zitten twee divjes naast elkaar, left en right
binnen left zitten twee divs boven elkaar.
de div waar de foto in komt, links boven, is al op hoogte, bij wijze van test.
de div content gaat niet mee in hoogte met de andere divs als deze in height groter worden. hoe zorg ik er voor dat deze dat wel doet? tenminste in FF. in IE werkt het wel zoals ik zou willen.
quote:dan gaat de content div wel mee naar de hoogte van de andere divs.. maar staat ie helemaal links in het scherm.. das ook weer niet de bedoeling. Het hele boeltje staat gecentreerd..Op donderdag 7 februari 2008 22:40 schreef CraZaay het volgende:
Als je #content "float: left" geeft ipv inherit, wat gebeurt er dan?
quote:Haal dat divje eens weg en geef #content geen float, maar "overflow: auto" (geen hoogte definieren!). Zou moeten werkenOp donderdag 7 februari 2008 22:43 schreef markiemark het volgende:
Ik heb er nog een divje om heen gelegd, ook gecentreerd net als de rest van de site. En dat gaat wel goed. Thnx!
Het probleem is dat in FF de linkermarge niet op 19px wordt gezet en dat de tekst niet 23px inspringt.
| 1 2 | <span class="topMenu"><span class="menuItemHome"><a href="index.php">Home</a></span> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | { margin-left: 19px; font: bold 12px tahoma,verdana,arial,sans-serif; letter-spacing: 0; background-position: center center; background-repeat: no-repeat; border: none; cursor: pointer; text-align: left; line-height: 2; text-decoration: none; } .menuItemHome { margin-left: 0px; background: url("afbeeldingen/home.gif") no-repeat 0 0; width: 70px; height: 16px; text-indent:23px; } |
quote:Klopt je html wel? Ik die 2 regels zie ik 2x een <span> en maar 1 </span>Op zondag 10 februari 2008 21:46 schreef mrbombastic het volgende:
Het menu van een bepaalde site ziet er in IE6 goed uit, maar in FF niet.
Het probleem is dat in FF de linkermarge niet op 19px wordt gezet en dat de tekst niet 23px inspringt.
[ code verwijderd ]
[ code verwijderd ]
quote:Volgens mij wil je wat properties gebruiken die alleen geschikt zijn voor block-level elementen, terwijl een span een inline element is. Ik vraag me overigens af of een element zonder een duidelijke semantische betekenis (span) het meest geschikt is in deze situatie, maar dat terzijde.Op zondag 10 februari 2008 21:46 schreef mrbombastic het volgende:
Het menu van een bepaalde site ziet er in IE6 goed uit, maar in FF niet.
Het probleem is dat in FF de linkermarge niet op 19px wordt gezet en dat de tekst niet 23px inspringt.
quote:Bedankt, ik heb er nu een div van gemaakt en met nog wat wijzigingen staat dit nu wel goed.Op zondag 10 februari 2008 23:31 schreef CraZaay het volgende:
[..]
Volgens mij wil je wat properties gebruiken die alleen geschikt zijn voor block-level elementen, terwijl een span een inline element is. Ik vraag me overigens af of een element zonder een duidelijke semantische betekenis (span) het meest geschikt is in deze situatie, maar dat terzijde.
Nu heb ik nog een probleem, zie www.kraket.nl. Ik heb een maindiv class waar ik een linkermarge van 19px wil hebben. Dit lukt wel in IE6, maar in FF springen alle menu items weer terug.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | { width:260px; margin-left: 19px; } .item { font: bold 12px tahoma,verdana,arial,sans-serif; letter-spacing: 0; background: url("afbeeldingen/no-arrow.gif") no-repeat 0 0; background-position: center center; background-repeat: no-repeat; width: 245px; height: 25px; cursor: pointer; text-indent: 15px; text-align: left; line-height: 21px; } |
Ik heb een stuk tekst op een pagina staan waarvan de source te vergelijken is met het volgende:
| 1 2 | <p>Dit is normale tekst</p> |
Nu zit ik alleen met het probleem dat ik met geen mogelijkheid die strong tag gestyled krijg. Ik krijg de inhoud zelf (inclusief html formatting) vanuit een CMS waar ik geen wijzigingen in kan aanbrengen.
Hoe kan ik ervoor zorgen dat ik bijvoorbeeld de lettergrootte van de tekst binnen de <strong> tags kan aanpassen?
Alvast dank
| 1 2 3 | font-weight: 700; } |
?
Geen flauw idee of dat gaat werken...
quote:Dit heb ik inderdaad ook al geprobeert, maar dat werkt niet... de styling van de <p> tag lijkt altijd de voorkeur te krijgen boven de styling van de <strong> tagOp maandag 11 februari 2008 16:35 schreef Geqxon het volgende:
Iets als:
[ code verwijderd ]
?
Geen flauw idee of dat gaat werken...
quote:Probeer eens padding ipv margin? Btw: de letter-spacing is default al 0.Op maandag 11 februari 2008 11:25 schreef mrbombastic het volgende:
[..]
Bedankt, ik heb er nu een div van gemaakt en met nog wat wijzigingen staat dit nu wel goed.
Nu heb ik nog een probleem, zie www.kraket.nl. Ik heb een maindiv class waar ik een linkermarge van 19px wil hebben. Dit lukt wel in IE6, maar in FF springen alle menu items weer terug.
quote:Bedankt. Padding werkt inderdaad wel.Op maandag 11 februari 2008 17:07 schreef CraZaay het volgende:
[..]
Probeer eens padding ipv margin? Btw: de letter-spacing is default al 0.
Verder heb ik nog 2 probleempjes. In IE6 krijg ik een horizontale scrollbar. Daarvoor heb ik nu
| 1 |
gebruikt, maar mss zijn er betere alternatieven.
Verder vraag ik me af of het drop-down menu, zie www.kraket.nl, ook links uitgelijnd kan worden ipv rechts wat ie standaard doet.
[ Bericht 3% gewijzigd door mrbombastic op 11-02-2008 23:44:39 ]
[ Bericht 98% gewijzigd door mrbombastic op 11-02-2008 23:43:28 ]
quote:Ja, zorgen dat je content binnen de viewport past in de breedte, dan heb je er geen last vanOp maandag 11 februari 2008 23:35 schreef mrbombastic het volgende:
Verder heb ik nog 2 probleempjes. In IE6 krijg ik een horizontale scrollbar. Daarvoor heb ik nu
[ code verwijderd ]
gebruikt, maar mss zijn er betere alternatieven.
Is het te smal, omdat iemand op een lage resolutie kijkt, dan zullen ze horizontaal moeten scrollen.quote:Daar heb je inderdaad gelijk in. De problemen zijn inmiddels opgelost. Het bleek dat ergens bovenin mn code nog <div align="center"> stondOp dinsdag 12 februari 2008 08:55 schreef CraZaay het volgende:
[..]
Ja, zorgen dat je content binnen de viewport past in de breedte, dan heb je er geen last van
.quote:Quotes rond je attributen zetten en van "middle" "absmiddle" maken.Op woensdag 13 februari 2008 15:50 schreef Banzaiaap het volgende:
Ik ben nu zo goed als klaar met de site van een maat van mij: DjE-rik.nl, maar op de contact pagina staat de afbeelding met het emailadres erin niet helemaal goed, is een kleinigheidje, maar weet iemand waarom?
quote:Thanks, dat was em.Op woensdag 13 februari 2008 15:57 schreef CraZaay het volgende:
[..]
Quotes rond je attributen zetten en van "middle" "absmiddle" maken.
Edit: Align blijkt geen valid html transitional te zijn..
http://validator.w3.org/check?uri=http%3A%2F%2Fdje-rik.nl%2Fcontact.html&charset=(detect+automatically)&doctype=Inline&group=0
[ Bericht 33% gewijzigd door Banzaiaap op 13-02-2008 16:09:52 ]
quote:Ja die bedoelde ik
, enig alternatief?quote:Met CSS "vertical-align: middle"?Op woensdag 13 februari 2008 16:41 schreef Banzaiaap het volgende:
[..]
Ja die bedoelde ik
quote:vertical-align rekent notepad++ niet goed bij mij..Op woensdag 13 februari 2008 16:53 schreef CraZaay het volgende:
[..]
Met CSS "vertical-align: middle"?
quote:notepad++ moet niet zeiken.Op woensdag 13 februari 2008 17:17 schreef Banzaiaap het volgende:
[..]
vertical-align rekent notepad++ niet goed bij mij..
quote:
Sorry 
quote:Mijn allereerste CSS met DIVjes
/edit
Cool, een vervanging gevonden voor:
| 1 2 3 4 5 6 7 8 9 10 | Vervang ik met; body { background-image: url('bg.jpg'); background-repeat: repeat-x } |
quote:In principe kun je alles dat met opmaak te maken heeft doormiddel van CSS doen.Op donderdag 14 februari 2008 13:20 schreef saban het volgende:
[..]
Mijn allereerste CSS met DIVjes
/edit
Cool, een vervanging gevonden voor:
[ code verwijderd ]
http://www.csszengarden.com/ is daar een prachtig voorbeeld van.
quote:En in principe hoort dat ook zo.Op donderdag 14 februari 2008 13:50 schreef Geqxon het volgende:
[..]
In principe kun je alles dat met opmaak te maken heeft doormiddel van CSS doen.
quote:Dat klopt, maar voor een beginner telt dat natuurlijk wat minder zwaar.Op donderdag 14 februari 2008 14:18 schreef Tuvai.net het volgende:
[..]
En in principe hoort dat ook zo.
quote:Daarom kun je beter goed beginnen dan dat je eerst helemaal aan tabellen gehecht raakt, en vervolgens met divjes moet gaan werken.Op donderdag 14 februari 2008 14:52 schreef Geqxon het volgende:
[..]
Dat klopt, maar voor een beginner telt dat natuurlijk wat minder zwaar.
Er zijn nog steeds een heleboel mensen die steevast blijven hangen bij tabelletjes omdat ze divjes niet fijn vinden. Ik was tot een paar jaren geleden zelf nog zo.
| 1 2 3 4 5 6 7 8 9 10 11 12 | position: absolute; left:260px; top:135px; width:660px; padding:10px; background:#e8ebbe; font-family: tahoma; font-size: 11px; font-weight: bold; color: #fff; } |
De hoogte van #midcontent variert, dus kan ik aan de nieuwe vlak geen top:xx px meegeven.
Hoe gaat dat op zijn werk?
quote:Ik heb tot nu toe ook altijd met tabellen gewerkt, css/div heb ik nooit begrepen, maar nu probeer ik het me aan te lerenOp donderdag 14 februari 2008 15:07 schreef Tuvai.net het volgende:
[..]
Daarom kun je beter goed beginnen dan dat je eerst helemaal aan tabellen gehecht raakt, en vervolgens met divjes moet gaan werken.
Er zijn nog steeds een heleboel mensen die steevast blijven hangen bij tabelletjes omdat ze divjes niet fijn vinden. Ik was tot een paar jaren geleden zelf nog zo.
quote:Jep. Op het moment schrijf ik dan ook altijd eerst een semantisch correcte HTML, en dan pas maak ik de stylesheet, zonder aan de HTML te komen. Goeie manier om het jezelf te forceren.Op donderdag 14 februari 2008 15:07 schreef Tuvai.net het volgende:
[..]
Daarom kun je beter goed beginnen dan dat je eerst helemaal aan tabellen gehecht raakt, en vervolgens met divjes moet gaan werken.
Er zijn nog steeds een heleboel mensen die steevast blijven hangen bij tabelletjes omdat ze divjes niet fijn vinden. Ik was tot een paar jaren geleden zelf nog zo.
quote:Tabellen vervangen voor div's is net zo slecht als tabellen gebruiken imo. Semantiek, people!Op donderdag 14 februari 2008 15:03 schreef saban het volgende:
Ik vind het van me zelf al knap dat ik niet met tabellen werk maar met DIV
http://webxact.watchfire.com/
Dat tooltje gebruikte ik best veel.
quote:geen 'position: absolute' gebruikenOp donderdag 14 februari 2008 15:08 schreef saban het volgende:
Hoe kan ik onder mijn midcontent nog een vlak weergeven?
[ code verwijderd ]
De hoogte van #midcontent variert, dus kan ik aan de nieuwe vlak geen top:xx px meegeven.
Hoe gaat dat op zijn werk?
'position: absolute' is zeer 'evil', het betekent feitelijk dat een element uit de 'flow' van een pagina gehaald wordt en dus niet meer beinvloed door elementen erboven of zelf geen elementen eromheen kan en mag beinvloeddden...
De beste oplossing is eerst om te proberen geheel zonder 'position:absolute uit te komen, meestal levert dat je betere, flexibelere layouts op..
lukt het je niet, is de oplossing om om je element heen een ander element te plaatsen en dàt de position: absolute te geven en alle positionerings-properties (top, left etc.) en binnen dat element kunnen dan je content elementen vallen
quote:Ik helaas wel, moest laatst iets bouwen wat als het even kon ook in IE4 moest werken...Op donderdag 14 februari 2008 16:13 schreef mcDavid het volgende:
Ik zou nieteens wéten hoe je een site bouwt met tables
quote:Was de klant iemand van een stenen tijdperk of zo?Op donderdag 14 februari 2008 16:17 schreef CraZaay het volgende:
[..]
Ik helaas wel, moest laatst iets bouwen wat als het even kon ook in IE4 moest werken...
quote:Iemand die met geen enkele statistiek ervan te overtuigen was dat IE6+ écht prima is. En binnenkort alsnog herbouwen naar IE6+, omdat er natuurlijk wel allerlei web 2.0 "dingen" in moetenOp donderdag 14 februari 2008 16:20 schreef Tuvai.net het volgende:
[..]
Was de klant iemand van een stenen tijdperk of zo?
quote:ImageReadyOp donderdag 14 februari 2008 16:13 schreef mcDavid het volgende:
Ik zou nieteens wéten hoe je een site bouwt met tables
quote:firefox op zijn pc zetten en het "Internet Explorer 4" noemen en het icoontje aanpassen!Op donderdag 14 februari 2008 16:22 schreef CraZaay het volgende:
[..]
Iemand die met geen enkele statistiek ervan te overtuigen was dat IE6+ écht prima is. En binnenkort alsnog herbouwen naar IE6+, omdat er natuurlijk wel allerlei web 2.0 "dingen" in moeten
Hoe het hoort, in firefox
IE trouble.Sorry voor crappy kwaliteit, maar zoals je ziet springt ie 1pixel. Waaraan kan het liggen?
Dit is een serieuze layout, kan ik hem hier laten staan? Of wordt ie dan gejat?
Maar een online testcase is de enige optie in dit geval ben ik bang. Zonder code kan ik net zo goed roepen dat het aan die 1 pixel brede spacer.gif ligt
quote:Owja. Hier:Op donderdag 14 februari 2008 20:19 schreef CraZaay het volgende:
Da's het nadeel van iedere website: mensen kunnen 'm zien en dus jatten :P
Maar een online testcase is de enige optie in dit geval ben ik bang. Zonder code kan ik net zo goed roepen dat het aan die 1 pixel brede spacer.gif ligt ;)
| 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 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | body{ background-image:url(img/bodybg.png); background-color:#FFFFFF; background-repeat:repeat-y; background-position: center; padding: 0; margin: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; height: 100%; } a:link { text-decoration: none; color:#333333; } a:visited { text-decoration: none; color:#333333; } a:active { text-decoration: none; color:#333333; } a:hover { text-decoration: underline; color: #666666; } #container{ width: 798px; margin: 0 auto; } #header{ height: 189px; width: 798px; background-color:#66FF66; background-image:url(img/header.png); background-repeat:no-repeat; background-position:center; padding: 0px; margin: 0px; } #logincontainer{ margin-left: 525px; height: 158px; width: 234px; padding-top: 15px; } #loginbg{ height: 158px; width: 234px; padding: 0px; } #loginform{ position: relative; margin-top: -158px; z-index: 1; padding-top: 12px; padding-left: 8px; } img.login{ behavior: url("pngbehavior.htc"); } input.text{ height: 24px; font-size: 18px; vertical-align:middle; background-image:url(img/input.png); border:1px solid #999999; width: 192px; padding-left: 2px; } ul{ margin: 0px; padding: 0px; padding-top: 0px; } li{ margin: 0px; display: compact; padding: 2px; list-style: none; width: 156px; border-bottom: 1px solid #C9C9C9; } input.search{ height: 20px; font-size: 16px; background-position:left; background-image:url(img/searchbar.png); background-repeat:repeat-x; border:1px solid #a5a5a5; color:#333333; width: 160px; padding-left: 28px; } input.login{ height: 20px; font-size: 12px; font-weight:bold; background-position:left; background-image:url(img/loginbutton.png); background-repeat:repeat-x; border:1px solid #a5a5a5; color:#333333; width: 160px; } #infobar{ padding-top: 3px; padding-right: 4px; height: 27px; background-image:url(img/infobar.png); background-repeat:no-repeat; background-position:right; float: right; text-align:right; } .searchbutton{ display: none; } #menu{ margin: 0px; padding: 0px; width: 160px; float: left; } #content{ width: 630px; padding-top: 3px; padding-right: 3px; float:right; } form{ padding: 0px; margin: 0px; } #informatie{ font-size: 10px; padding: 5px; width: 150px; } #footer{ font-size: 10px; width: 798px; text-align: center; float: left; } |
| 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 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>KM Webhosting</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="favicon.ico" > </head> <body> <script type="text/javascript" src="js/wz_tooltip.js"></script> <div id="container"> <div id="header"> <div id="logincontainer"> <div id="loginbg"> <img src="img/logindialog.png" class="login" height="158" width="234" /> </div> <div id="loginform"> <form method="post" action="login.php"> <table cellpadding="4" style="border-collapse: collapse" bordercolor="#0000FF" border="0"> <tr> <td><input value="Username" onclick="this.value=''" name='user' class="text" type="text" /></td> <td style="padding:0px;"><a href="#" onmouseover="Tip('De loginnaam waarmee je normaal inlogt op Direct Admin')">?</a></td> </tr> <tr> <td><input value="Password" onClick="this.value=''" name='pass' class="text" type="text" /></td> <td style="padding:0px;"><a href="#" onmouseover="Tip('Het wachtwoord wat je normaal gebruikt om in te loggen op Direct Admin')">?</a></td> </tr> <tr> <td><input value="Domain" onclick="this.value=''" name='domain' class="text" type="text" /></td> <td style="padding:0px;"><a href="#" onmouseover="Tip('De domeinnaam waar je op wil inloggen. bijvoorbeeld kmwebhosting.nl')">?</a></td> </tr> <tr> <td align="center"><input class="login" type="submit" value="Login" /></td> </tr> </table> </form> </div> </div> </div> <div id="infobar"> <form><input type="text" class="search" /><input class="searchbutton" type="submit" value=">>" /></form> </div> <div id="menu"> <img class="menu" src="img/algemeen.png" /> <ul> <li><a href="#">Homepage</a></li> <li><a href="#">Over Ons</a></li> <li><a href="#">Contact</a></li> </ul> <img class="menu" src="img/diensten.png" /> <ul> <li><a href="#">Webhosting</a></li> <li><a href="#">Reseller Hosting</a></li> <li><a href="#">Domein Registratie</a></li> <li><a href="#">Domein Verhuizing</a></li> <li><a href="#">Realtime Registrar</a></li> <li><a href="#">Dedicated Server</a></li> <li><a href="#">Colocated</a></li> </ul> <img class="menu" src="img/informatie.png" /> <ul> <li><a href="#">Netwerk en Servers</a></li> <li><a href="#">Support Systeem</a></li> </ul> <div id="informatie"> <b>KM Webhosting</b><br /><br /> <table cellpadding="0" cellspacing="0"> <tr> <td>Tel:</td> <td>0592-853911</td> </tr> <tr> <td>Mob:</td> <td>06-54384529</td> </tr> <tr> <td>Fax:</td> <td>0842-248278</td> </tr> </table> <br /> info@karnakmedia.nl<br /> www.karnakmedia.nl <p> <img src="img/karnakmediaklein.png" /> </p> Design door <a href='http://jc-c.nl'>JC-C</a> © 2008 </div> </div> <div id="content"> [Dummytekst ff weggehaald] </div> </div> </body> </html> |
quote:klopt. maar hij is nog niet online. daarna maakt het me niet uit (bij wijze van spreken, want je kan wat er daarna gebeurd niet controleren). maar ik vind het jammer dat er 1 pixeltje is. Ik heb hier wamp server draaien, maar die ga ik niet online gooien want dan kan je zo mn settings in.Op donderdag 14 februari 2008 20:35 schreef NiteSpeed het volgende:
En als je hem uiteindelijk online zet, wordt hij alsnog wel gejat. HTML en CSS zijn voor iedere boerenlul uit te lezen.
Hoe zorg ik ervoor dat als ik een menu, dat op elke pagina hetzelfde moet zijn, ook overal hetzelfde is en dat ik door 1 aanpassing gelijk het op alle pagina's aanpas?
quote:Met een php include lijkt me dat het makkelijksteOp donderdag 14 februari 2008 23:13 schreef Banzaiaap het volgende:
Euhm.. ik weet niet of het hier hoort, maar het is toch een korte vraag dus ik waag het er op:
Hoe zorg ik ervoor dat als ik een menu, dat op elke pagina hetzelfde moet zijn, ook overal hetzelfde is en dat ik door 1 aanpassing gelijk het op alle pagina's aanpas?
quote:Kun je dit niet ff ergens online zetten? Niet vanaf je eigen bak, maar bij je ISP ofzo? Zie het niet zo zitten om dit zelf te gaan copy/pasten naar HTML- en CSS-bestandenOp donderdag 14 februari 2008 20:26 schreef Flaccid het volgende:
[..]
Owja. Hier:
[ code verwijderd ]
[ code verwijderd ]
Dat debugged een stuk eenvoudiger namelijk.quote:Ligt er aan welke aanpassingen het zijn. Als het alleen grafische aanpassingen zijn gewoon middels CSS werken. Als je ook bijvoorbeeld de links e.d. in het menu in één keer wilt veranderen, een serverside taaltje (PHP, ASP.NET) gebruiken.Op donderdag 14 februari 2008 23:13 schreef Banzaiaap het volgende:
Euhm.. ik weet niet of het hier hoort, maar het is toch een korte vraag dus ik waag het er op:
Hoe zorg ik ervoor dat als ik een menu, dat op elke pagina hetzelfde moet zijn, ook overal hetzelfde is en dat ik door 1 aanpassing gelijk het op alle pagina's aanpas?
quote:Someone?Op donderdag 14 februari 2008 15:08 schreef saban het volgende:
Hoe kan ik onder mijn midcontent nog een vlak weergeven?
[ code verwijderd ]
De hoogte van #midcontent variert, dus kan ik aan de nieuwe vlak geen top:xx px meegeven.
Hoe gaat dat op zijn werk?
quote:Is al beantwoord toch? Gewoon in principe nooit "position: absolute" gebruiken.
Om de plaatjes en divs naast elkaar te krijgen geef ik ze float:left. In FF werkt het wel, maar in IE6/7 ontstaat er toch ruimte tussen de plaatjes. Ik snap niet waar het vandaan komt en ik krijg het ook niet weg
voorbeeld
quote:In strict mode werkt het prima, dus het ligt echt aan quirksOp vrijdag 15 februari 2008 09:51 schreef CraZaay het volgende:
Bizar. Ik krijg het ook niet voor elkaar. Quirks-bug neem ik aan dan?
quote:Is de afbeeldingen als background-image in een <div>je stoppen geen optie?Op vrijdag 15 februari 2008 09:53 schreef SuperRembo het volgende:
[..]
In strict mode werkt het prima, dus het ligt echt aan quirks
quote:Je DIV images zijn toch gewoon goed naast elkaar?Op vrijdag 15 februari 2008 09:23 schreef SuperRembo het volgende:
Ik krijg het niet voor elkaar om een aantal plaatjes en divs naast elkaar te krijgen zonder ruimte er tussen. De pagina's met dit probleem draaien in quirks mode, en dat is ook niet eenvoudig aan te passen.
Om de plaatjes en divs naast elkaar te krijgen geef ik ze float:left. In FF werkt het wel, maar in IE6/7 ontstaat er toch ruimte tussen de plaatjes. Ik snap niet waar het vandaan komt en ik krijg het ook niet weg
voorbeeld
quote:Ja, daar zat ik ook al aan te denken. Dat is waarschijnlijk de makkelijkste oplossing. Maar het blijft vreemd.Op vrijdag 15 februari 2008 09:55 schreef Tuvai.net het volgende:
[..]
Is de afbeeldingen als background-image in een <div>je stoppen geen optie?
zie http://www.positioniseverything.net/explorer.html
enkele bekende 'oplossingen' lijken echter niet te werken (haslayout: true; of zoom: 1 toewijzen, of het element display: inline geven)..
andere oplossingne die nog wel toegepast worden zijn bv de lelijkere 'hacks', dus via conditional comments ( <!--[if IE < 8 ] <style>IMG { margin-left: -3px; margin-right: -3px } </style>[endif]-->) een 'fix' inbouwen; ik zou wel expliciet inbouwen dat de fix niet actief blijft voor eventuele latere IE-browsers omdat die de neiging hebben de meeste bugs te fixen (en dan opeens weer nieuwe bugs te geven bij dezelfde effecten, zoals nu bij IE7 en waarschijnlijk ook weer bij IE8 )
quote:Zeker ook bij IE8, want die rendert standaard als IE7Op vrijdag 15 februari 2008 10:34 schreef RM-rf het volgende:
zoals nu bij IE7 en waarschijnlijk ook weer bij IE8
quote:Vaak is dat op te lossen door je css te beginnen met de volgende regel:Op vrijdag 15 februari 2008 09:23 schreef SuperRembo het volgende:
Ik krijg het niet voor elkaar om een aantal plaatjes en divs naast elkaar te krijgen zonder ruimte er tussen. De pagina's met dit probleem draaien in quirks mode, en dat is ook niet eenvoudig aan te passen.
Om de plaatjes en divs naast elkaar te krijgen geef ik ze float:left. In FF werkt het wel, maar in IE6/7 ontstaat er toch ruimte tussen de plaatjes. Ik snap niet waar het vandaan komt en ik krijg het ook niet weg
voorbeeld
* {margin:0;padding:0}
* is een wildcard dus zo krijgen alle elementen standaard een marge en padding van 0, wat wel handig is aangezien de standaard margin en padding per browser verschilt.
Het kwam in dit geval door een browserbug van IE in quirksmode.
het is juist een pro om zoveel mogelijk binnen je HTML+CSS de ruimte te laten voor specifieke user-bepaalde layout tenzij er een duidelijke grond is dat niet te willen...
dat bv Header-elementen, P-alinea-elementen of UL+LI's een eigen margin en padding hebben die per browser (of in sommige gevallen per user) verschilt is geen probleem zolang je maar het werk van een visuele designer ziet als een 'extensie' op de door de user bepaalde voorkeurslayout
Als om wat voor reden ook de stylesheet niet geladen wordt wordt dat *{margin:0;padding:0} ook niet geladen dus dan gaat gewoon de browsers stanaardlayout in.
-edit-
en ja ik heb het wel gedaan, omdat ik eerst bij zo'n beetje ieder element apart margin en padding 0 aangegeven had. Dan scheelt het nogal.
quote:In Firefox: Beeld -> PaginaStijl -> Geen stijl. Heerlijke feature.Op vrijdag 15 februari 2008 12:40 schreef mcDavid het volgende:
een duidelijke grond om dat niet te willen lijkt me dat je gewoon wilt dat je site er fatsoenlijk uitziet. Anders kun je al je websites net zo goed als plain text op gaan slaan.
Als om wat voor reden ook de stylesheet niet geladen wordt wordt dat *{margin:0;padding:0} ook niet geladen dus dan gaat gewoon de browsers stanaardlayout in.
quote:Ik zou niet weten waarom ik dat zou gebruiken.Op vrijdag 15 februari 2008 12:43 schreef Tuvai.net het volgende:
[..]
In Firefox: Beeld -> PaginaStijl -> Geen stijl. Heerlijke feature.
Wellicht als een pagina écht gigantisch irritant is opgemaakt, maar met datsoort gepruts staat de styling ook meestal in de HTML dus dan heb je niets aan die optie.
quote:Het is een ideaal hulpmiddeltje om gewoon even snel je Stylesheet uit te zetten of van Stylesheet et switchen, om te zien hoe een pagina zonder opmaak er uit ziet. Bij met tabellen opgezette sites heeft dat inderdaad al geen nut meer nee, omdat alles door elkaar staat.Op vrijdag 15 februari 2008 12:45 schreef mcDavid het volgende:
[..]
Ik zou niet weten waarom ik dat zou gebruiken.
Wellicht als een pagina écht gigantisch irritant is opgemaakt, maar met datsoort gepruts staat de styling ook meestal in de HTML dus dan heb je niets aan die optie.
Overigens doe ik ook altijd een check-ronde door een website die ik maak, zonder stylesheet, vooral wanneer ik er formulieren, functionaliteit en dergelijke aan ga hangen. Ik wil dat al mijn websites te lezen én te gebruiken zijn, ook zonder stylesheet.
quote:Dat is erg lomp als algemene "oplossing". En in dit geval maakt het ook niets uit.Op vrijdag 15 februari 2008 11:35 schreef mcDavid het volgende:
[..]
Vaak is dat op te lossen door je css te beginnen met de volgende regel:
* {margin:0;padding:0}
quote:Ja, of om een site die in FF echt heel brak is nog enigszins leesbaar te krijgen. Ctrl+Shift+S in de dev-toolbar, alleen is die sneltoets in FF3 gekoppeld aan een eigen printscreen functie van FFOp vrijdag 15 februari 2008 12:53 schreef CraZaay het volgende:
Een site bekijken zonder stylesheet is de ideale manier om te testen of de html semantisch correct gebruikt is imo
quote:Ik bied zelf als alternate stylesheet een CSS bestand aan waarmee de pagina erg minimalistisch wordt. Die kun je in FF dus kiezen via Beeld -> PaginaStijl -> Minimalistic. Handig om al je gebruikers te kunnen bedienen.Op vrijdag 15 februari 2008 12:43 schreef Tuvai.net het volgende:
[..]
In Firefox: Beeld -> PaginaStijl -> Geen stijl. Heerlijke feature.
Overigens: http://diveintoaccessibility.org/. Verplicht leesvoer.
quote:Ja is slimmer.Op donderdag 14 februari 2008 23:49 schreef CraZaay het volgende:
[..]
Kun je dit niet ff ergens online zetten? Niet vanaf je eigen bak, maar bij je ISP ofzo? Zie het niet zo zitten om dit zelf te gaan copy/pasten naar HTML- en CSS-bestanden
http://beerwheels.nl/km/
Ik had een heel handig link met allemaal voorbeelden, echter ben ik deze kwijt
Ik zoek eigelijk; als je met je muis over 'iets' heen gaat, dat er een veld/blok verschijnt met tekst erin.
quote:Jawel, ik wil de informatie pas ophalen als je met de muis erover heen gaat. De data wordt dus pas bekend bij het 'Scroll over', dat is toch AJAX?
quote:Het is pas AJAX wanneer jij de gegevens pas van de server download als je met je muis over het tekstveld gaat.Op woensdag 20 februari 2008 11:00 schreef saban het volgende:
[..]
Jawel, ik wil de informatie pas ophalen als je met de muis erover heen gaat. De data wordt dus pas bekend bij het 'Scroll over', dat is toch AJAX?
quote:Dat zeg ik toch?Op woensdag 20 februari 2008 11:01 schreef Geqxon het volgende:
[..]
Het is pas AJAX wanneer jij de gegevens pas van de server download als je met je muis over het tekstveld gaat.
quote:
Koffie. Eerst koffie, en dan praten we verder.
quote:Saban kan ook wel wat koffie gebruiken, dit is het CSS voor dummies topic, niet JavaScript voor dummiesOp woensdag 20 februari 2008 11:10 schreef Geqxon het volgende:
[..]
Koffie. Eerst koffie, en dan praten we verder.
quote:Ik wou er geen apart topic voor startenOp woensdag 20 februari 2008 11:13 schreef SuperRembo het volgende:
[..]
Saban kan ook wel wat koffie gebruiken, dit is het CSS voor dummies topic, niet JavaScript voor dummies
Trouwens doe mij maar cappuchino
quote:99% van de tijd wordt een reeds bestaande div (in de DOM) getoond/verborgen met CSS/JS. Beetje afhankelijk van de situatie of het zinnig is om daar steeds een HTTP-request voor te maken.Op woensdag 20 februari 2008 11:00 schreef saban het volgende:
[..]
Jawel, ik wil de informatie pas ophalen als je met de muis erover heen gaat. De data wordt dus pas bekend bij het 'Scroll over', dat is toch AJAX?
quote:ajax is het pas als je op het moment dat een gebruiker een bepaalde handeling doet, daadwerkelijk een nieuw request maakt naar de server en deze informatie opvraagt die na het inladen verder verwerkt worden....Op woensdag 20 februari 2008 10:32 schreef saban het volgende:
Hebben jullie handige links met AJAX voorbeelden?
Ik had een heel handig link met allemaal voorbeelden, echter ben ik deze kwijt
Ik zoek eigelijk; als je met je muis over 'iets' heen gaat, dat er een veld/blok verschijnt met tekst erin.
wat je beschrijft is gewoon een normaal 'onmouseover-event waarbij bepaalde informatie eerst niet getoond wordt, maar pas getoond wordt bij die onmouseover... als het verder geen nut heeft om een 'asynchroon request te doen voor die informatie en die informatie ook an sich bij het allereerste laden van de pagina al meegestuurd kan worden (maar enkel niet zichtbaar op de pagina dan getoond wordt), is het aan te raden dat te doen, het is nutteloos enkel modewoordjes te willen toepassen als deze niet expliciet een meerwaarde hebben tov een eenvoudigere manier (eenvoudiger is altijd beter als het aan je eisen ook voldoet)
quote:Kun je eindeloos op door debateren. Vaak hoor je mensen zeggen dat AJAX niet té overmatig gebruikt word omdat je anders een overkill aan HTTP requests krijgt, maar dan kun je je afvragen wat nou zwaarder is; een HTTP request die een lijst met dynamische gegevens opvragen op het moment dat een gebruiker deze opvraagt (bijvoorbeeld door een druk op een knop), of standaard op elke pagina in een onzichtbare div deze lijst gooien, maar die niet altijd gebruikt word.Op woensdag 20 februari 2008 12:12 schreef CraZaay het volgende:
[..]
99% van de tijd wordt een reeds bestaande div (in de DOM) getoond/verborgen met CSS/JS. Beetje afhankelijk van de situatie of het zinnig is om daar steeds een HTTP-request voor te maken.
quote:Absoluut, vandaar dat ik aangaf dat het afhankelijk is van de situatie in de hoeveelheid data. je moet een beetje de "sweet spot" zoeken inderdaad,Op woensdag 20 februari 2008 13:09 schreef Tuvai.net het volgende:
[..]
Kun je eindeloos op door debateren. Vaak hoor je mensen zeggen dat AJAX niet té overmatig gebruikt word omdat je anders een overkill aan HTTP requests krijgt, maar dan kun je je afvragen wat nou zwaarder is; een HTTP request die een lijst met dynamische gegevens opvragen op het moment dat een gebruiker deze opvraagt (bijvoorbeeld door een druk op een knop), of standaard op elke pagina in een onzichtbare div deze lijst gooien, maar die niet altijd gebruikt word.
quote:Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.Op woensdag 20 februari 2008 12:22 schreef NiteSpeed het volgende:
saban, het is geen ajax. Die 2 KB tekst en CSS gegevens kan je wel hiden en showen op een mouseover zonder serverside processing.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
Heeft dus weinig met CSS te maken, totdat je de boel wilt gaan opmaken.
quote:Je moet het andersom zien.... kennelijk moet je een hele extra oplossing gaan bedenken en uitvoeren (en de techniek an sich ook eerst nog ontdekken) om je probleem 'asynchroon' op te lossen, terwijl in je eisenpakket verder nergens asynchroniteit vereist of dit een duidelijke meerwaarde bied..Op woensdag 20 februari 2008 14:00 schreef saban het volgende:
[..]
Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
de 'server-load' is hier redelijk irrelevant.. je verlicht iig vrijwel geen enkele structurele belasting op de server met een 'ajax-oplossing' tov een oplossing waar de info direkt meegestuurd wordt... dus blijft de vraag 'wat is de reden dat je ajax wilt gebruiken' en weegt dat op tegen de extra moeite die je moet doen het op die manier uit te voeren?
quote:Je kunt eventueel ook met meerdere pagina's werken, of een zoekfunctie? Misschien dat iemand het ID intypt voor informatie?Op woensdag 20 februari 2008 14:00 schreef saban het volgende:
[..]
Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
quote:Wat is 'alle info"? Hoeveel info heb je per ID? Desnoods zet je het niet in de DOM maar in een JS object (JSON bijv.) en haal je het daar uit. Scheelt een hoop HTML.Op woensdag 20 februari 2008 14:00 schreef saban het volgende:
[..]
Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
quote:Met AJAX komt niet direct alle gegevens mee. Pas wanneer je het laat aanvragen.Op woensdag 20 februari 2008 14:13 schreef RM-rf het volgende:
[..]
Je moet het andersom zien.... kennelijk moet je een hele extra oplossing gaan bedenken en uitvoeren (en de techniek an sich ook eerst nog ontdekken) om je probleem 'asynchroon' op te lossen, terwijl in je eisenpakket verder nergens asynchroniteit vereist of dit een duidelijke meerwaarde bied..
de 'server-load' is hier redelijk irrelevant.. je verlicht iig vrijwel geen enkele structurele belasting op de server met een 'ajax-oplossing' tov een oplossing waar de info direkt meegestuurd wordt... dus blijft de vraag 'wat is de reden dat je ajax wilt gebruiken' en weegt dat op tegen de extra moeite die je moet doen het op die manier uit te voeren?
Indien ik het zonder AJAX wil doen, dus alle gegevens direct opvragen en hiden met CSS is dat zeker wel zwaarder voor de serverload.
quote:Natuurlijk kan datOp woensdag 20 februari 2008 14:17 schreef Geqxon het volgende:
[..]
Je kunt eventueel ook met meerdere pagina's werken, of een zoekfunctie? Misschien dat iemand het ID intypt voor informatie?
Was alleen aan het rondkijken/vragen/zoeken of het mogelijk was (tuurlijk wel), maar of het ook efficient is voor de tijd dat ik er in stop quote:Per ID nu 15 velden (in zelfde tabel), dit later uitgebreid worden door info ook uit andere tabellen op te vragen.Op woensdag 20 februari 2008 14:45 schreef CraZaay het volgende:
[..]
Wat is 'alle info"? Hoeveel info heb je per ID? Desnoods zet je het niet in de DOM maar in een JS object (JSON bijv.) en haal je het daar uit. Scheelt een hoop HTML.
De hoeveelheid ID kan verschillen, van tien tot een paar honderd.
quote:Dat is onzin, serverload is geen 2-dimensionale absoluutheid..Op donderdag 21 februari 2008 09:14 schreef saban het volgende:
[..]
Met AJAX komt niet direct alle gegevens mee. Pas wanneer je het laat aanvragen.
Indien ik het zonder AJAX wil doen, dus alle gegevens direct opvragen en hiden met CSS is dat zeker wel zwaarder voor de serverload.
ik zei niet voor niks dat het gebruik van ajax in deze 'verlicht iig vrijwel geen enkele structurele belasting op de server'
het enige verschil dat je zou 'winnen' zou een enkele sqlquery zijn om de betreffende data op te vragen (ervanuitgaande dat de data uit een db komt) wat milli-microseconden rendertijd en een paar bytes aan data...
zodra echter een gebruik enthousiast met zn muis over de elementen beweegt krijg je een veel zwaardere belasting, omdat voor iedere mouseover dus een separate reqiuest komt, een aparte query uitgevoerd moet worden... iedere 'winst' wat betreft serverbelasting is minimaal en niet structureel die je had verlies je razend snel zodra er ook gebruik van gemaakt wordt..
bedenk ook dat een server helemaal geen problemen ermee heeft ipv in 0.135 seconde in 0.137 seconde een pagina te renderen en server en of deze ipv 6.056 ipv 6.012 Bytes groot is...
een 'que' aan requests kan eerder laadproblemen opleveren, zowel aan de serverside (het aantal connecties welke een server aankan zal eerder beperkt zijn en hierdoor kunnen request in de wachtrij geplaatst).. maar ook aan de clientside, meestal betekent ajax toch dat er na het event dat het request ooproept eventjes gewacht moet worden totdat het request geplaatst is en de data teruggelezen... juist zulk een vertraging is bij mouseovers mogelijk een ergenis, helemaal als het gaat om een hele rij van elementen die op een mouseover zo'n request oproepen (het effect dat je kunt krijgen is dat als de gebruiker toevallig met zn muispointer over de elementen heenbeweegt zelfs zonder te weten hermee data op te vragen, opeens meerdere requests geplaats worden en het enkele seconden duurt voor deze afgehandeld zijn).
maar als je zo nodig het beter wilt weten, moet je het vooral gaan uitvoeren en zul je zelf merken wat de nadelen zijn...
Als ik het beter zou weten was ik hier niet terecht.
Zo leer ik nog eens wat
quote:Dat laatste zinnetje verneukt echt je hele post, waar misschien toch wel een kern van waarheid in zatOp donderdag 21 februari 2008 10:47 schreef RM-rf het volgende:
[..]
maar als je zo nodig het beter wilt weten, moet je het vooral gaan uitvoeren en zul je zelf merken wat de nadelen zijn...
quote:Hij mag het later nog eens proberen.Op donderdag 21 februari 2008 14:27 schreef CraZaay het volgende:
Sterker nog, inhoudelijk was 'ie correct
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | height: 100%; } #header { position: relative; width: 100%; } #content { position: relative; margin-bottom: 20px; } #footer { position: relative; height: 20px; } |
Als ik dan vervolgens zo'n pagina er in gooi:
| 1 2 3 4 5 6 7 8 9 10 | <div id="content"> <p> <img src="plaatje.jpg" alt="Een plaatje van meer dan een regel tekst"> Hier dan een regel tekst </p> </div> <div id="footer"> En hier dan de footer</div> |
Dan komt de footer dus onderaan de tekst, en loopt hij dus over het plaatje heen. Ik wil dat de tekst onderaan de gehele content blijft staan.
Geprobeerd:
content height: 100% geven, maar dan loopt bij veel content de tekst door tot voorbij de content
conten min-height: 100%; geven, maar dan staat de footer bij weinig content te ver weg
img display:block; geven,. vond ik op internet, hielp niets
margins van footer of content aanpassen werkt wel maar geeft ook weer te veel witruimte, en is bovendien geen permanente oplossing.
Kortom, hoe kan ik er voor zorgen dat de img meegeteld wordt als de hoogte van de div waar de footer onder komt?
Hier gaat het verder gewoon goed als ik bovenstaande code test.
css
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | margin: 0; padding: 0; min-height: 100%; } #container { min-height: 100% margin-bottom: -20px; } #clearfooter { height: 20px; } #footer { height: 20px; } |
html
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body> <div id="container"> <div id="header">Title</div> <div id="content"> <p> <img src="plaatje.jpg" alt="Een plaatje van meer dan een regel tekst"> Hier dan een regel tekst </p> <div id="clearfooter"></div> </div> <div id="footer">Hier de footer</div> </body> </html> |
Daar moeten dan nog wel een paar IE-hacks bij.
quote:Ik heb even nagekeken, en het plaatje heeft een align: right waardoor het mis gaat. Zonder die align gaat het wel goed (maar komt er uiteraard geen plaatje rond de tekst). Kortom, de vraag is, hoe kan ik een plaatje goed in de tekst plaatsen terwijl de footer blijft staan?Op zaterdag 1 maart 2008 17:22 schreef mcDavid het volgende:
Waarschijnlijk heeft het plaatje een position:absolute edit of een float:left/right
Hier gaat het verder gewoon goed als ik bovenstaande code test.
Bah. Dat ziet er niet uit. In Safari is-ie wel mooi en zelfs in Internet explorer. Ik wil dus graag dat de tekst die de gebruiker invoert mooi verticaal gecentreerd is. Met paddings etc zou ik het kunnen forceren, maar dat zou betekenen dat t er in Safari ed. niet mooi meer uitziet (de invoertekst te dicht tegen de onderrand aan.
Mijn css voor de input
| 1 2 3 4 5 6 7 8 9 10 11 12 | { border: 1px solid #000000; background-image: url('../img/inputback.jpg'); background-repeat: repeat-x; font-family: Arial; font-size: 14px; font-weight: normal; color: #322F33; height: 21px; line-height: 21px } |
Heeft iemand een idee?
Edit: Handig om erbij te vermelden dat het dus niet netjes in Firefox wordt weergegeven
[ Bericht 6% gewijzigd door GVRuud op 06-03-2008 19:49:24 (stom) ]
Maar los daarvan: wat is het probleem als je boven en onder dezelfde padding gebruikt? Dan staat 'ie gewoon in het midden.
quote:Plaatje floaten en de float clearen op het element dat je er altijd onder wilt hebben (footer in dit geval)?Op maandag 3 maart 2008 20:50 schreef De_Hertog het volgende:
[..]
Ik heb even nagekeken, en het plaatje heeft een align: right waardoor het mis gaat. Zonder die align gaat het wel goed (maar komt er uiteraard geen plaatje rond de tekst). Kortom, de vraag is, hoe kan ik een plaatje goed in de tekst plaatsen terwijl de footer blijft staan?
quote:Safari heeft sinds versie 3 ook cssbare form elementen.Op donderdag 6 maart 2008 19:59 schreef CraZaay het volgende:
Safari doet sowieso niets met die paddings toch? Voor zover ik weet worden de form elementen door Safari helemaal onafhankelijk van de CSS gerenderd.
Maar los daarvan: wat is het probleem als je boven en onder dezelfde padding gebruikt? Dan staat 'ie gewoon in het midden.
Met die paddings lukt inderdaad wel als ik ze boven en onder opgeef...
Na 8 uur prutsen aan dit project ben ik blijkbaar niet meer zo scherp... deadlines...
Maar ergens anders heb ik diezelfde input-elementen, alleen met een kleinere lettergrootte. De input wordt dan ook automatisch kleiner, en met het aanpassen van de paddings zou dit idd wel te verhelpen zijn. Is er niet een mogelijkheid dat-ie de inputtekst altijd centreert in het inputveld, ongeacht de height die ik opgeef?
222111111111111111111111111111
222555555555555555444444444444
222555555555555555444444444444
333
333
Nu wordt dat in IE goed weergegeven(gek genoeg), maar in FireFox wordt het vlak 5, 1 rij naar boven gedrukt.
Het bovenste gedeelte van vlak 5 verdwijnt dus onder vlak 1 in FF. Is dit een veel voorkomend probleem? En is er een duidelijke oplossing voor?
Mocht dit niet genoeg informatie zijn, dan kan ik altijd de code nog erbij zetten. Ik heb ook screenshots gemaakt, heb alleen geen webspace.
Mvg. Machiel
PS. Mijn excuses als dit niet goed gepost is
quote:Heb je de pagina online staan? Moeten natuurlijk wel je code kunnen bekijken om te zien wat er mis is.Op dinsdag 11 maart 2008 10:01 schreef allesisgekozen het volgende:
Ik heb een CSS probleem. Het gaat hierbij om het positioneren van vlakken. Ik positioneer 5 vlakken op de volgende manier:
222111111111111111111111111111
222555555555555555444444444444
222555555555555555444444444444
333
333
Nu wordt dat in IE goed weergegeven(gek genoeg), maar in FireFox wordt het vlak 5, 1 rij naar boven gedrukt.
Het bovenste gedeelte van vlak 5 verdwijnt dus onder vlak 1 in FF. Is dit een veel voorkomend probleem? En is er een duidelijke oplossing voor?
Mocht dit niet genoeg informatie zijn, dan kan ik altijd de code nog erbij zetten. Ik heb ook screenshots gemaakt, heb alleen geen webspace.
Mvg. Machiel
PS. Mijn excuses als dit niet goed gepost is
Even een tip geheel terzijde. Als je een nieuwe layout gaat maken, begin dan altijd met de standaardindeling/basis en geef deze desnoods felle kleuren mee zodat je goed kunt zien hoe ze weergeven worden. In je voorbeeld die ik in feite een layout vrij recht toe recht aan ingedeeld is.
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html, body {
width: 100%;
height: 100%;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", arial, verdana;
font-size: 11px;
color: #b5bce8;
background: url('../images/body_bg.jpg') repeat-x 0px 0px #b5bce8;
}
input {
font-family: "Lucida Sans Unicode", "Lucida Grande", arial, verdana, helvetiva;
font-size: 11px;
}
#wrapper {
margin: 0 auto;
width: 1076px;
min-height: 100%;
height: auto !important;
height: 100%;
background: url('../images/wrapper_bg.jpg') repeat-y 0px 0px;
}
#breadcrumb {
width: 905px;
height: 40px;
background-color: red;
float:right;
}
#menu {
width: 171px;
height: 430px;
background-color: yellow;
float: left;
}
#logo {
width: 171px;
height: 170px;
background-color: green;
}
#fotoblok {
width: 338px;
height: 290px;
float: right;
background-color: orange;
}
#titelblok {
height: 130px;
background-color: black;
}
#maintekst {
width: 567px;
height: 100%;
min-height: 400px;
background-color: purple;
}
En de HTML:
<body>
<div id="wrapper">
<div id="breadcrumb"></div>
<div id="menu">
<div id="logo"></div>
</div>
<div id="fotoblok"></div>
<div id="titelblok"></div>
<div id="maintekst"></div>
</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" dir="ltr">
is dat de slechte variant?
Ik snap er geen yota meer van. Ik had allang alles met position gedaan.
quote:Omdat je alles uit de flow haalt, al doe je dat met floats ook gedeeltelijkOp dinsdag 11 maart 2008 15:01 schreef allesisgekozen het volgende:
met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.
quote:Als je objecten absoluut positioneert, houden ze geen rekening meer met elkaar. Soms is dit gewenst, soms niet. Het ligt er natuurlijk maar net aan wat je wil doen.Op dinsdag 11 maart 2008 15:01 schreef allesisgekozen het volgende:
met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.
quote:jepOp dinsdag 11 maart 2008 15:01 schreef allesisgekozen het volgende:
met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.
geef eerst die wrapper een position: relative, daarna kun je alle div's m.b.v. position:absolute gewoon exact positioneren.
Het is gewoon een goeie methode om te positioneren. Je moet alleen wel oppassen dat je je html semantisch houdt. Als je alles absolute positioneert maakt het namelijk geen reet meer uit waar je wat neerzet (je kunt bijv. de div met de header helemaal onderaan zetten) en dat kan chaos opleveren.
Vandaar dat over het algemeen het advies is indien mogelijk liever geen position:absolute te gebruiken.
-edit-
er is wel wat voor te zeggen zoveel mogelijk div's in de float te houden, maar met een layout met een fixed breedte zoals die van jou lijkt me dat niet erg noodzakelijk.
eerste wat ik morgenvroeg doe is uitproberen met position.
Firefox vindt het dan allemaal heel mooi, en klopt dus ook. Maar IE zegt dan: nee, ik doe het lekker allemaal 10px meer naar rechts. ik _haat_ verschillende browsers!
en trouwens, IE neemt met position absolute een paar pxs meer naar rechts, met position relative neemt FF de wrapper en IE de vorige gemaakte div's. Wellicht regel ik even een stukje webspace zodat het makkelijker is om ernaar te kijken
quote:heerlijk, double-margin-bug.Op woensdag 12 maart 2008 09:46 schreef allesisgekozen het volgende:
Zo, zojuist ermee zitten klooien.
Firefox vindt het dan allemaal heel mooi, en klopt dus ook. Maar IE zegt dan: nee, ik doe het lekker allemaal 10px meer naar rechts. ik _haat_ verschillende browsers!
In principe moet het als je alles absolute positioneert altijd goed gaan.
http://preview.anchormen.nl/css-test/
Het gaat hier dus om de zwarte en paarse balk. in IE loopt het goed, in FF schuift ie de balken onder mekaar
quote:Precies, vandaar dat ik vroeg of 'ie nog floats gebruikteOp woensdag 12 maart 2008 10:58 schreef mcDavid het volgende:
[..]
heerlijk, double-margin-bug.
In principe moet het als je alles absolute positioneert altijd goed gaan.
quote:Wat gebeurt er eigenlijk als je in alle div's wat tekst zet?Op woensdag 12 maart 2008 11:32 schreef allesisgekozen het volgende:
zo, heb het even online gezet:
http://preview.anchormen.nl/css-test/
Het gaat hier dus om de zwarte en paarse balk. in IE loopt het goed, in FF schuift ie de balken onder mekaar
-edit-
ff geprobeerd.. het gekke is: de tekst schuift níét onder de andere divs! (maar de div zelf dus wel)
http://duft.nl/web/css-test.htm
[ Bericht 8% gewijzigd door mcDavid op 12-03-2008 13:34:04 ]
maar tekst ziet ie anders als de divs?
quote:Ik vind het zelf ook een beetje vaag.Op woensdag 12 maart 2008 13:53 schreef allesisgekozen het volgende:
hmmm..nu zegt mij dat natuurlijk helemaal niks (post niet voor niks op newbie forum :p)
maar tekst ziet ie anders als de divs?
De site die je online hebt gezet werkt nog volledig met de floats.
De div's #titelblok en #maintekst verdwijnen gedeeltelijk onder andere divs
Maar de tekst in die divs staat wél op de goeie positie, in de float.
Wat je nog kunt proberen is wat er gebeurt als je alle tags m.b.t. de grootte van die divs eruit haalt, zodat de grootte puur bepaald wordt door de hoeveelheid tekst die erin staat
quote:Dat is op te lossen door #titelblok een breedte mee te geven. En een float: right, natuurlijk.Op woensdag 12 maart 2008 11:32 schreef allesisgekozen het volgende:
zo, heb het even online gezet:
http://preview.anchormen.nl/css-test/
Het gaat hier dus om de zwarte en paarse balk. in IE loopt het goed, in FF schuift ie de balken onder mekaar
alles werkt nu. alle anderen natuurlijk ook bedankt
Weet iemand trouwens of het m.b.v. CSS mogelijk is woorden die zo gigantisch lang zijn dat ze niet in een div of table-cel passen, tóch af te kappen?
quote:Nee, dat kan niet. Je kan hoogstens de parent overflow: hidden geven, that's it.Op woensdag 12 maart 2008 22:18 schreef mcDavid het volgende:
Soms kan het zoiets stoms zijn heh
Weet iemand trouwens of het m.b.v. CSS mogelijk is woorden die zo gigantisch lang zijn dat ze niet in een div of table-cel passen, tóch af te kappen?
| 1 2 3 4 5 | <li><a href="link1.html"><img src="plaatje1.gif"/></a></li> <li><a href="link2.html"><img src="plaatje2.gif"/></a></li> <li><a href="link3.html"><img src="plaatje3.gif"/></a></li> <ul> |
De bedoeling is dat de plaatjes netjes tegen elkaar aan komen te liggen. Dat lukt in FF, maar niet in IE.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | list-style-type: none; margin: 0; padding: 0; } li img { margin: 0; padding: 0; } li a { margin: 0; padding: 0; } |
Uiteraard valide CSS. Het html-bestand is valide XHTML 1.0 Transitional (met doctype). Wat hierboven staat is dus niet het volledige bestand, maar dat lijkt me ook niet nodig.
quote:Er bestaat ook nog een line-heightOp woensdag 12 maart 2008 23:14 schreef Light het volgende:
Ik heb ook nog een probleempje waar ik wel wat hulp bij kan gebruiken. Ik probeer een menu te maken. Relevante html:
[ code verwijderd ]
De bedoeling is dat de plaatjes netjes tegen elkaar aan komen te liggen. Dat lukt in FF, maar niet in IE.
[ code verwijderd ]
Uiteraard valide CSS. Het html-bestand is valide XHTML 1.0 Transitional (met doctype). Wat hierboven staat is dus niet het volledige bestand, maar dat lijkt me ook niet nodig.
-edit-
en ik wil je erop wijzen dat links met een plaatje ipv tekst lastig zijn voor zoekmachines, textbrowsers, enz.
Een herhaalde achtergrondafbeelding met tekst is een betere optie.
[ Bericht 10% gewijzigd door mcDavid op 12-03-2008 23:54:27 ]
quote:Daar kan ik nog wel mee gaan spelen morgen.
quote:Ik gebruik wel alt-teksten-edit-
en ik wil je erop wijzen dat links met een plaatje ipv tekst lastig zijn voor zoekmachines, textbrowsers, enz.
Een herhaalde achtergrondafbeelding met tekst is een betere optie.
En de ontwerper van de layout heeft een lettertype gekozen dat niet standaard als font beschikbaar is.quote:Dan nog horen de afbeeldingen wat mij betreft in de CSS, en niet in de HTMLOp donderdag 13 maart 2008 00:03 schreef Light het volgende:
Ik gebruik wel alt-teksten
quote:Er bestaan ook manieren om je eigen font mee te sturen.Op donderdag 13 maart 2008 00:03 schreef Light het volgende:
[..]
Daar kan ik nog wel mee gaan spelen morgen.
[..]
Ik gebruik wel alt-teksten
quote:Zoveel mogelijk, dat ben ik met je eens. Als je suggesties hebt hoe ik tekst in de HTML kan gebruiken en dat kan vervangen met een afbeelding in CSS zonder dat de functionaliteit aangetast wordt dan houd ik me aanbevolen. Bij voorkeur zo dat ik een andere afbeelding kan kiezen op het moment dat iemand met z'n muis over het plaatje fietst.Op donderdag 13 maart 2008 00:07 schreef CraZaay het volgende:
[..]
Dan nog horen de afbeeldingen wat mij betreft in de CSS, en niet in de HTML
quote:Geen nette manier, lijkt me. Sowieso vind ik niet dat je mensen kunt verplichten iets te installeren als ze op je site komen.Op donderdag 13 maart 2008 00:31 schreef mcDavid het volgende:
[..]
Er bestaan ook manieren om je eigen font mee te sturen.
quote:HTML:Op donderdag 13 maart 2008 07:30 schreef Light het volgende:
Zoveel mogelijk, dat ben ik met je eens. Als je suggesties hebt hoe ik tekst in de HTML kan gebruiken en dat kan vervangen met een afbeelding in CSS zonder dat de functionaliteit aangetast wordt dan houd ik me aanbevolen. Bij voorkeur zo dat ik een andere afbeelding kan kiezen op het moment dat iemand met z'n muis over het plaatje fietst.
| 1 2 | screenreaders en mensen zonder CSS zien</a> |
CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 | width: 100px; height: 20px; display: block; background: url(plaatje.gif); text-indent: -9999px; overflow: hidden } a.link_met_plaatje_als_achtergrond:hover { background: url(plaatje2.gif); } |
quote:Daar kan ik wel wat mee, dankOp donderdag 13 maart 2008 08:24 schreef CraZaay het volgende:
[..]
HTML:
[ code verwijderd ]
CSS:
[ code verwijderd ]
Het lost ook het eerdere probleem op, waarbij de plaatjes niet goed aansloten.quote:Je hebt gelijk. Ik dacht ooit dat ik zoiets gezien had, maar de enige mogelijkheden werken óf alleen in IE, óf werken met flash.Op donderdag 13 maart 2008 07:32 schreef Light het volgende:
[..]
Geen nette manier, lijkt me. Sowieso vind ik niet dat je mensen kunt verplichten iets te installeren als ze op je site komen.
In html4.01 sluit je enkele tags zo af <br> en in xhtml <br />
Maar de validator keurt mijn <br /> wel gewoon goed, terwijl ik ik 4.01 doctype heb, waarom is dit?
Ik kon het in de officiële documentatie niet terug vinden.
quote:de validator van W3c is eigenlijk gewoon een xml-based validator, traditioneel HTML kent eigenlijk geen validatie aangezien de browsers gewoon sowieso altijd moeite moeten doen een document weer te geven en ook 'interpretaties' te doen van elementen... HTML4.01 'herkent' dus ook gewoon een BR mét een traling slash.Op donderdag 13 maart 2008 17:14 schreef splendor het volgende:
Bij gebrek aan een centraal html topic vraag ik het hier maar even..
In html4.01 sluit je enkele tags zo af <br> en in xhtml <br />
Maar de validator keurt mijn <br /> wel gewoon goed, terwijl ik ik 4.01 doctype heb, waarom is dit?
Ik kon het in de officiële documentatie niet terug vinden.
'officiele' HTML dient eigenlijk zo streng te zijn dat als iets _niet_ valideert, het hele document eigenlijk niet verder verwerkt 'mag' worden (om data-integriteit te waarborgen, non-validatie betekent dat er iets mis is met de data)
Bij mij pikt'ie ze er gewoon tussenuit hoor met html4.01 transitional!
en idd wat RM-rf zegt. Als je site het in alle browsers prima doet ondanks een paar 'bugs' in de html, dan is dat geen probleem. Valideren is meer een hulpmiddel om fouten op te sporen, maar niet per se de enige heilige manier.
Weet iemand wat dit kan zijn? Fout in de code?
http://www.meesterbrein.com/menu_style.css
Ik heb trouwens de code hiervandaan: http://www.deansabatino.com/suckerfish/suckerfish.html
Heb dezelfde code gebruikt, maar hier werkt het wel gewoon met IE6 en op mijn site niet.
Erg vreemd, want voor zover ik weet ligt het verschil tussen IE6 en IE7 vooral in de hover. Waarom werkt bij mij het halve menu dan niet?
quote:Bij dat suckerfish menu gebruiken ze een javascript hack voor IE6, omdat die de psuedo-class :hover niet kent voor list-items.Op vrijdag 14 maart 2008 12:07 schreef HetMeesterbrein het volgende:
Na wat problemen met een ander CSS menu op mijn website (in mijn sig.) heb ik op advies een ander CSS menu geprobeerd. Maar nu werkt het alsnog niet op IE6. In IE7 en Firefox en de rest werkt het perfect, maar in IE6 krijg ik niet eens de links te zien.
Weet iemand wat dit kan zijn? Fout in de code?
http://www.meesterbrein.com/menu_style.css
Ik heb trouwens de code hiervandaan: http://www.deansabatino.com/suckerfish/suckerfish.html
Heb dezelfde code gebruikt, maar hier werkt het wel gewoon met IE6 en op mijn site niet.
Erg vreemd, want voor zover ik weet ligt het verschil tussen IE6 en IE7 vooral in de hover. Waarom werkt bij mij het halve menu dan niet?
Enneuh, heb je wel eens gehoord van relatieve url paden?
Dat ze een javascript hack voor hover gebruiken weet ik al. Die gebruik ik ook.
Weet je misschien waarom het menu niet werkt? Dat was namelijk mijn vraag
155 fouten gevonden in je html-code. Misschien moet je er daar eens een paar van wegwerken?
Enneuh ik weet niet wie je dat van die SEO verteld heeft, maar dat slaat echt als een tang op een varken. Eén ding kan ik je wel vertellen: google e.d. worden niet blij van bestandsnamen als "onze-ogen-hebben-vanaf-de-geboorte-dezelfde-grootte-maar-onze-neus-en-oren-groeien-altijd.html". Kijk niet raar op als ze besluiten je niet te indexen.
quote:Ja, je JS werkt niet. Er hoort on hover een class op de LI gezet te worden, maar Firebug ziet dat niet gebeuren.Op vrijdag 14 maart 2008 13:05 schreef HetMeesterbrein het volgende:
Dat ze een javascript hack voor hover gebruiken weet ik al. Die gebruik ik ook.
Weet je misschien waarom het menu niet werkt? Dat was namelijk mijn vraag
quote:Oooh dan moet ik daar eens naar gaan kijken. Heb het script in een apart .js bestand gezet.Op vrijdag 14 maart 2008 13:19 schreef CraZaay het volgende:
[..]
Ja, je JS werkt niet. Er hoort on hover een class op de LI gezet te worden, maar Firebug ziet dat niet gebeuren.
quote:Op vrijdag 14 maart 2008 13:17 schreef mcDavid het volgende:
Oh, euh...
155 fouten gevonden in je html-code. Misschien moet je er daar eens een paar van wegwerken?
Enneuh ik weet niet wie je dat van die SEO verteld heeft, maar dat slaat echt als een tang op een varken. Eén ding kan ik je wel vertellen: google e.d. worden niet blij van bestandsnamen als "onze-ogen-hebben-vanaf-de-geboorte-dezelfde-grootte-maar-onze-neus-en-oren-groeien-altijd.html". Kijk niet raar op als ze besluiten je niet te indexen.
quote:Klopt. Ook bij cutenews is het handig, omdat hij anders gaat openen in view.php/index.php en dan werkt het niet goed.Op vrijdag 14 maart 2008 13:12 schreef Geqxon het volgende:
Absolute paths vind ik wel fijn, vooral als je veel met mod_rewrite werkt.
| 1 |
Probleem is dat ik dit als output krijg:
| 1 2 | zijn okee oleeee |
maar ik wil het zo
| 1 |
quote:Een div is een block level element van 100% breed. Waar heb je die div voor nodig?Op vrijdag 14 maart 2008 16:41 schreef wobbel het volgende:
Ik heb dit:
[ code verwijderd ]
Probleem is dat ik dit als output krijg:
[ code verwijderd ]
maar ik wil het zo
[ code verwijderd ]
quote:Werkt prima.Op vrijdag 14 maart 2008 19:27 schreef HetMeesterbrein het volgende:
Ik heb het menu aangepast in een ander menu. Heb geen IE6 hier bij de hand.. kan iemand even zeggen of het werkt met IE6?
quote:zou je dat niet liever met een <span> doen?Op vrijdag 14 maart 2008 16:41 schreef wobbel het volgende:
Ik heb dit:
[ code verwijderd ]
Probleem is dat ik dit als output krijg:
[ code verwijderd ]
maar ik wil het zo
[ code verwijderd ]
quote:deze doet het wel goedOp vrijdag 14 maart 2008 19:27 schreef HetMeesterbrein het volgende:
Ik heb het menu aangepast in een ander menu. Heb geen IE6 hier bij de hand.. kan iemand even zeggen of het werkt met IE6?
Voorbeeld wat het verschil is:
FF:
IE:
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 | width: 769px; height: 30px; position: relative; padding-left: 39px; letter-spacing: -1px; background-image: url(menubg.png); background-repeat: no-repeat; background-position: 31px; } #menu .keuzes { padding-top: 9px; height: 30px; width: 769px; } #menu .keuzes .keuze a,a:active{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #515151; font-weight: bold; text-decoration: none; /*margin-right: 17px;*/ float: left; } |
HTML:
| 1 2 3 4 5 6 7 8 9 | <div class="keuzes"> <span class="keuze"><a href="./" style="color:#385c88;margin-right:17px;">collectie</a></span> <span class="keuze"><a href="./algemene_informatie.php" style="margin-right:18px;">over ons</a></span> <span class="keuze"><a href="./faq.php" style="margin-right:16px;">contact</a></span> <span class="keuze"><a href="./inschrijven.php" style="margin-right:480px;">links</a></span> <span class="keuze"><a href="./inschrijven.php">english</a></span> </div> </div> |
tnx :)
Als je problemen hebt met verschillende marges, moet je ze gewoon definiëren. Verschillende browsers houden nou eenmaal verschillende standaardmarges aan.
@Geqxon
Ik zie niet in waarom niet? Zolang browsers er niet moeilijk over doen (en dat lijkt me niet...)
Ben een site aan het bouwen met een container die 100% hoog is. Nu werkt het allemaal goed in IE 5.0+,FF,NS,Safari en Opera. Echter, bij de laatste 2 voegt hij nog een aantal pixels lege ruimte onderaan toe (zo'n 20px volgens mij), en ik heb geen idee hoe dat komt en hoe ik ervanaf kom.
HTML (sterk ingekort ;)):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"> <head> <link rel="stylesheet" type="text/css" media="screen, projection" href="general.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" /> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen, projection" href="iehack.css" /> <![endif]--> </head> <body> <div id="container"> </div> </body> </html> |
Met bijbehorende CSS:
general.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 | margin: 0px; padding: 0px; } /* commented backslash mac IE hack \*/ html,body { height: 100%; } /* end hack */ body { font-family: "Trebuchet MS",Verdana, Tahoma, Arial, Sans-serif; font-size: 62.5%; /* 10px */ text-align: center; background: #eaeaea url('px/bg.png') repeat-x 0 0; } #container { position: relative; margin: 0px auto; font-size: 110%; min-height:100%; width: 790px; text-align: left; background: #ffffff url('px/mainbg.png') repeat-y 100% 0; } |
iehack.css
| 1 2 3 | height: 100%; } |
Zaken 100% hoog willen maken is altijd een gigantische pain in the ass. Waarom wil je dit? In 99% van de gevallen is het beoogde effect namelijk op veel makkelijkere manieren te bereiken, bijvoorbeeld door die background gewoon aan de body te hangen. De hoogte van de #container maakt dan niets meer uit.
quote:ik heb onderaan de pagina nog gegevens gegooid, kvk nummer/rek.nummer/disclaimer. Dat soort informatie. En het werkt allemaal goed hoor, alleen snap ik niet waarom opera en safari nog een paar pixels aan het document toevoegen.Op woensdag 19 maart 2008 07:44 schreef CraZaay het volgende:
IE voor de Mac wordt niet meer gebruikt, dus die hack zou ik er lekker uit gooien
Zaken 100% hoog willen maken is altijd een gigantische pain in the ass. Waarom wil je dit? In 99% van de gevallen is het beoogde effect namelijk op veel makkelijkere manieren te bereiken, bijvoorbeeld door die background gewoon aan de body te hangen. De hoogte van de #container maakt dan niets meer uit.
Doordat ik een div in de container een margin-bottom had gegeven reageerden Opera en Safari als beschreven, ook al was die div een stuk kleiner dan het scherm. Aangezien het ook met padding werkte in dit geval heb ik het zo maar opgelost.
Ik ben sinds enkele dagen voor het eerst bezig met css en ik begin het steeds leuker te vinden
. Ik heb twee vragen.1. Kan ik met CSS door middel van de a:hover selector een geluidje af laten spelen zodra je ergens over heen 'hovered'. Wellicht via behaviors (is behaviors nog css?)?
2. Mijn layout is opgemaakt uit een aantal div-elementen. Een aantal divs zijn relatief gepositioneerd, aldaar maak ik dus gebruik van de 'normal document flow'. Een van deze divs is bv zelf ook een parent voor twee andere child divs en deze child divs floaten naar links, resp. rechts om ze goed naast elkaar te krijgen. Weer een ander div element staat helemaal rechts in de main parent container door, idd: float rechts.
Op zich werkt dit aardig goed, alleen krijg ik het mede ivm borders en padding niet echt voor elkaar om alles werkelijk naadloos op elkaar aan te sluiten. Ook ontstaat er soms een gele stippellijn om een div element heen; alsof deze overlapping vindt met aan ander div element. Dat zou m.i. helemaal niet mogen aangezien er genoeg ruimte is voor het div element.
Mijn vraag: is het problematisch als child div elementen ruimte tussen elkaar hebben of overlap hebben (ik neem aan dat de gele stippellijnen overlap betekent)?
Geluidje afspelen: kan idd niet met CSS, en je kan je afvragen of je het wel moet willen. Als het onmisbaar is voor je app, dan is HTML niet de taal om 'm in te bouwen
Verder snap ik er zo weinig van, dus gooi eens het een en ander online ergens
!2. Overlap/ruimte ertussen maakt natuurlijk geen reet uit, zolang het in alle browsers maar goed staat.
Het kan soms lastig zijn om de borders netjes te krijgen als elementen overlappen.
. Ok dan weet ik dat.Wat betreft die divs, die gele stippellijnen komen voor in dreamweaver, niet in de browser. Hier is de code (alles is nog conceptmatig, png zit er niet bij
):| 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 124 125 126 127 128 129 | background-color: #000000; } html, body { margin:0; padding:0; height:100%; } #divDistance{ width:1px; height:50%; margin-bottom:-295px; float:left; } #divPaintings { height: 100px; width: 100px; float: right; } #divContainer{ position:relative; clear:left; margin:0 auto; width:990px; height:590px; border:1px solid #000000; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; } #divMaintext { float: right; height: 273px; width: 340px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; padding: 5px; } #divNav { float: left; height: 258px; width: 145px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font-size: 12px; text-align: left; padding-top: 20px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } #divNav a { color: #F9F9FF; text-decoration: none; display: block; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #000099; border-bottom-color: #000099; font-weight: bold; padding-top: 8px; padding-right: 5px; padding-bottom: 8px; padding-left: 5px; margin-top: 17px; margin-right: 5px; margin-bottom: 17px; margin-left: 5px; } #divNav a:hover { background-color: #000066; } #divBottomleft { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; position: relative; height: 285px; width: 510px; } #divPaintingnav { padding: 5px; height: 200px; width: 500px; position: relative; border: 1px solid #000000; } #divLogo { position: relative; height: 75px; width: 500px; padding: 5px; border: 1px solid #F0F0F0; } #divPaintings { padding: 5px; height: 574px; width: 465px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; float: right; } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="divDistance"></div> <div id="divContainer"> <div id="divPaintings">divPaintings</div> <div id="divPaintingnav"></div> <div id="divLogo"><img src="Default image/Logo.png" width="503" height="75" /></div> <div id="divBottomleft"> <div id="divMaintext">divMaintext</div> <div id="divNav"> <p><a href="Index.html">> HOME</a><a href="Index.html">> SCHILDERIJEN</a><a href="Index.html">> KUNSTMARKTEN</a><a href="Index.html">> CONTACT</a></p> </div> </div> </div> </div> </body> |
en wanneer ik het browservenster breder zou maken zou het er zo uit moeten zien
Het centreren van het groene vlak kan in css met margins
| 1 2 3 4 5 6 7 | { background-color:#00FF00; width: 150px; margin-left: auto; margin-right: auto } |
Het probleem hier alleen is dat ik geen idee heb hoe ik #rood en #blauw moet CSS'en. Wanneer ik een container maak, dan zou die slechts 1 achtergrondkleur (rood of blauw) kunnen hebben.
Een afbeelding als container-achtergrond vind ik geen goede oplossing (enorm breed plaatje moet dat dan worden, en het oplossen met scripts wil ik ook liever niet.
Iemand een idee?
quote:Dat kan, maar het werkt niet in IE.Op woensdag 19 maart 2008 15:34 schreef GVRuud het volgende:
Ik heb (voor mijn doen iig) een 'brein'breker...
[ afbeelding ]
en wanneer ik het browservenster breder zou maken zou het er zo uit moeten zien
[ afbeelding ]
Het centreren van het groene vlak kan in css met margins
[ code verwijderd ]
quote:Je kunt het volgende proberen:Het probleem hier alleen is dat ik geen idee heb hoe ik #rood en #blauw moet CSS'en. Wanneer ik een container maak, dan zou die slechts 1 achtergrondkleur (rood of blauw) kunnen hebben.
Een afbeelding als container-achtergrond vind ik geen goede oplossing (enorm breed plaatje moet dat dan worden, en het oplossen met scripts wil ik ook liever niet.
Iemand een idee?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | background-color: #F00; width: 50%; margin-right: -75px; /* de helft van de breedte van #groen */ } #groen { background-color: #0F0; width: 150px; } #blauw { background-color: #00F; width: 50%; margin-left: -75px; /* de helft van de breedte van #groen */ } #rood, #groen, #blauw { height: 150px; float: left; } |
Niet getest overigens.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | background-color: #F00; width: 50%; margin-left: -75px; /* de helft van de breedte van #groen */ float: left; } #groen { background-color: #0F0; width: 150px; float: left; } #blauw { background-color: #00F; width: 50%; margin-left: -75px; /* de helft van de breedte van #groen */ float: right; } #rood, #groen, #blauw { height: 150px; } |
En in de html
| 1 2 3 | <div id="blauw"></div> <div id="groen"></div> |
De volgorde is belangrijk.
De fouten in IE6
http://upload.bruggema.nl/view/1380554357/foutlijst.JPG
Hier staan de foto's niet goed op een rij...
http://upload.bruggema.nl/view/1380554357/foutpopup.JPG
popup moet 100% breedte hebben maar helaas..
quote:Held!Op woensdag 19 maart 2008 18:31 schreef Light het volgende:
Getest in FF en Safari:
[ code verwijderd ]
En in de html
[ code verwijderd ]
De volgorde is belangrijk.
Heb beide varianten even geprobeerd, en nog een overflow-x:hidden op de container toegevoegd.
Ik zie alleen bij de float: left,left,right versie dat er soms een witte ruimte tussen #groen en #blauw ontstaat (ik denk door afrondingen die de browser doet door de 50% en de negatieve margin). De float left,left,left variant heeft dit niet, maar wanneer het venster smaller is dan de breedte van #groen, dan wrapt #blauw onder #groen... Ik ga weer even geinspireerd proberen
quote:Ik had juist altijd een overlap van blauw over groen bij left, left, left (en de volgorde rood, groen, blauw) Vandaar dat ik met left, left, right ging proberen.Op woensdag 19 maart 2008 20:36 schreef GVRuud het volgende:
[..]
Held!
Heb beide varianten even geprobeerd, en nog een overflow-x:hidden op de container toegevoegd.
Ik zie alleen bij de float: left,left,right versie dat er soms een witte ruimte tussen #groen en #blauw ontstaat (ik denk door afrondingen die de browser doet door de 50% en de negatieve margin). De float left,left,left variant heeft dit niet, maar wanneer het venster smaller is dan de breedte van #groen, dan wrapt #blauw onder #groen... Ik ga weer even geinspireerd proberen
Trouwens, is het de bedoeling dat de vakken rood en blauw ook gebruikt worden voor wat anders dan alleen de achtergrondkleur? Zo nee, dan is er een andere oplossing mogelijk
quote:Ik kan je site uberhaupt niet openen in IE6Op woensdag 19 maart 2008 19:12 schreef Chandler het volgende:
Heeft iemand een oplossing voor deze fouten?
De fouten in IE6
http://upload.bruggema.nl/view/1380554357/foutlijst.JPG
Hier staan de foto's niet goed op een rij...
http://upload.bruggema.nl/view/1380554357/foutpopup.JPG
popup moet 100% breedte hebben maar helaas..
Fx, IE7 en opera geen probleem...
quote:Ik krijg geen witruimte tussen blauw en groen (en ook niet tussen rood en groen). Wel kan het handig zijn om margin en padding van de container (body?) op 0 te zetten. Een horizontale scrollbalk krijg ik ook niet. Maar ik heb geen IE bij de hand om het daarmee te testen.Op woensdag 19 maart 2008 20:55 schreef GVRuud het volgende:
#rood en #blauw krijgen een background-image toegekend die aansluit op het siteontwerp wat in #groen komt te staan. Deze twee zijkanten zijn echter niet gelijk, en omdat ze ook 'oneindig' mee moeten rekken tot aan de randen van het browservenster, is de oplossing van 3 divs op een rij volgensmij de enige juiste. Wanneer de witruimte niet voorkwam zou ik de perfecte oplossing hebben..
Verder staan alle paddings/margins etc op 0 en gebruik ik een reset.css voor basisinstellingen. Als ik die weglaat, blijft de scrollbalk nogsteeds.
quote:IE7 & de laatste versie van FF geven het allemaal heel netjes weerOp woensdag 19 maart 2008 21:10 schreef mcDavid het volgende:
[..]
Ik kan je site uberhaupt niet openen in IE6
Fx, IE7 en opera geen probleem...
Ik zit dus alleen met 100% width en de juiste manier van de afbeeldingen naast en onder elkaar te zetten.
quote:Uiteindelijk ben ik toch maar bezweken onder een beunhaasmethode omdat ik er echt niet aan uit kwam en de html wel een keertje af mocht zijn...Op woensdag 19 maart 2008 21:51 schreef GVRuud het volgende:
Zie http://bus.nimeon.nl/. De lijntjes die links en rechts van de header doorlopen worden nu met javascript gepositioneerd.
Toch heel erg bedankt voor je moeite!
quote:BahOp donderdag 20 maart 2008 12:17 schreef GVRuud het volgende:
Zie http://bus.nimeon.nl/. De lijntjes die links en rechts van de header doorlopen worden nu met javascript gepositioneerd.
Waarom niet gewoon die header 100% breed en een breed plaatje met die lijnen maken en die gecentreerd als achtergrond voor de header gebruiken? De afbeelding wordt daar misschien 1 kilobyte groter van.quote:Je kunt het ook doen net als die gast hiervoor met die rode/groene/blauwe div's.Op donderdag 20 maart 2008 14:56 schreef GVRuud het volgende:
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
En dan die achterste 2 dus een achtergrondplaatje geven met repeat-x
quote:Waarom niet? Je moet natuurlijk afwegen hoeveel van je bezoekers fullscreen browsen op een scherm van 25" of groterOp donderdag 20 maart 2008 14:56 schreef GVRuud het volgende:
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
Javascript gebruiken voor lay-out, terwijl het voor gedrag bedoeld is, vind ik helemaal ranzig. Maar ieder z'n meug
quote:Een randje eromheen zetten wil nog wel eens helpen om te kijken wat er precies gebeurtOp donderdag 20 maart 2008 07:29 schreef Chandler het volgende:
[..]
IE7 & de laatste versie van FF geven het allemaal heel netjes weer
Ik zit dus alleen met 100% width en de juiste manier van de afbeeldingen naast en onder elkaar te zetten.
http://duft.nl/web/test2.html
Zo te zien zijn die 2 plaatjes linksboven net te hoog, waardoor de plaatjes daaronder naar een volgende regel worden verplaatst ofzo....
Hoe zou ik dat kunnen oplossen?
quote:Al die blokjes een vaste hoogte geven?Op donderdag 20 maart 2008 18:55 schreef Chandler het volgende:
Het probleem is dat ik het niet zie
Hoe zou ik dat kunnen oplossen?
Wat ik wil is een site opgedeeld in 6 divs. Een container die de rest bevat, namelijk de header, de body (bevat een div menu en een div content) en de footer.
Voorbeeld/vooruitgang is hier te zien: www.bugworks.eu/stuff/fok/div.html
Alles lijkt goed te zijn tot het moment ik het menu aan ga passen (meer regels/tekst), dan overlapt hij de footer. Doe ik hetzelfde bij de content dan wordt de footer netjes zoals bedoeld opgeschoven naar beneden. Nu heb ik al vanalles geprobeerd, maar ik kan geen oplossing vinden. Weet iemand van jullie waar het aan ligt? Alvast bedankt. :Y
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 | border: 1px solid; padding: 10px; margin-left: 150px; margin-right: 250px; } #page_header { border: 1px solid; height: 100px; margin-bottom: 10px; } #page_body { border: 1px solid; } #page_menu { position: absolute; width: 190px; border: 1px solid; } #page_content { margin-left: 200px; border: 1px solid; } #page_footer { border: 1px solid; height: 50px; margin-top: 10px; } |
HTML/divjes
| 1 2 3 4 5 6 7 8 | <div id="page_header">Header</div> <div id="page_body"> <div id="page_menu">Menu<br /><br /><br /><br /><br /><br />Menu</div> <div id="page_content">Content<br /><br /><br />Content</div> </div> <div id="page_footer">Footer</div> </div> |
Als je 'm gewoon positioneert met margins, zou het in principe goed moeten gaan.
Maar ondanks bovenstaande blijft het menu nog steeds over het footer div gaan
.Een extra divje met clear:both was de truc!
Weltrusten
.Slaap lekker
quote:zou idd ook kunnen, en dan de footer clear:both geven (of misschien is dat nieteens nodig)Op donderdag 20 maart 2008 23:38 schreef CraZaay het volgende:
Zonder #page_body kan het ook prima, scheelt weer een element
Maar misschien moet die #page_body nog een bepaalde opmaak krijgen...
quote:#page_body had ik eigenlijk als container div, hoeft dus geen opmaak oid.Op donderdag 20 maart 2008 23:39 schreef mcDavid het volgende:
[..]
zou idd ook kunnen, en dan de footer clear:both geven (of misschien is dat nieteens nodig)
Maar misschien moet die #page_body nog een bepaalde opmaak krijgen...
quote:dan die skippen idd. Veel makkelijker.Op donderdag 20 maart 2008 23:40 schreef BugWorks het volgende:
[..]
#page_body had ik eigenlijk als container div, hoeft dus geen opmaak oid.
quote:Heb het nu net even aangepast, dus zonder die body div. Dat werkt idd, alleen is jouw oplossing voor een groot deel dus overbodig geworden, maar toch bedankt voor je moeiteOp donderdag 20 maart 2008 23:42 schreef mcDavid het volgende:
[..]
dan die skippen idd. Veel makkelijker.
.Edit
Je extra div lijkt dus toch noodzakelijk.
[ Bericht 5% gewijzigd door BugWorks op 20-03-2008 23:51:41 ]
quote:Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.Op donderdag 20 maart 2008 16:08 schreef CraZaay het volgende:
[..]
Waarom niet? Je moet natuurlijk afwegen hoeveel van je bezoekers fullscreen browsen op een scherm van 25" of groter
Javascript gebruiken voor lay-out, terwijl het voor gedrag bedoeld is, vind ik helemaal ranzig. Maar ieder z'n meug
quote:Het is visueel en dus layout wat mij betreft, ook als het niets toevoegt aan de gebruikersbeleving. Ik snap wel dat je het zo gedaan hebt hoor en ik heb ook echt weleens het een en ander gepositioneerd met JS. Je moet aan afweging maken tussen twee kwaden in dit geval, en ik kies dan altijd voor zo min mogelijk elementen in de HTML die alleen voor opmaak gebruikt worden en geen JS, dus dan kom je uit op een oplossing met een brede achtergrondafbeelding. Neemt niet weg dat beide punten verdedigbaar zijnOp vrijdag 21 maart 2008 03:03 schreef GVRuud het volgende:
Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
quote:Nogmaals: kijk even onderaan de vorige pagina. Die gast die links en rechts een verschillende kleur background wil. Als je het precies zo doet gaat het ook goed. Doe je alleen een achtergrondafbeelding ipv een achtergrondkleur!Op vrijdag 21 maart 2008 03:03 schreef GVRuud het volgende:
[..]
Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
quote:Volgens mij zou je ook de footer kunnen gebruiken ipv die extra div. Geef die ff een clear:both (dit geeft aan dat er aan beide kanten van die div geen float-objecten mogen staan) en kijk wat er gebeurt.Op donderdag 20 maart 2008 23:44 schreef BugWorks het volgende:
[..]
Heb het nu net even aangepast, dus zonder die body div. Dat werkt idd, alleen is jouw oplossing voor een groot deel dus overbodig geworden, maar toch bedankt voor je moeite
Edit
Je extra div lijkt dus toch noodzakelijk.
quote:IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!Op vrijdag 21 maart 2008 12:40 schreef DionysuZ het volgende:
ik erger me weer dood aan microsoft. Aangezien ze opacity nog steeds niet accepteren in IE7, ben ik genoodzaakt alpha filter erop te gebruiken. Maar wat hebben ze nou geflikt? Ze hebben cleartype gewoon uitgezet voor elementen waar dxtransform op plaatsvindt.
IE6 dan weer niet wat idd bloedirritant is
quote:dat is gelukkig wel gefixt jah. Maar als in PNG met alpha wil gebruiken moet ik nog altijdOp vrijdag 21 maart 2008 12:54 schreef mcDavid het volgende:
[..]
IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!
IE6 dan weer niet wat idd bloedirritant is
| 1 2 3 | <link rel="stylesheet" type="text/css" media="screen, projection" href="/iehack.css" /> <![endif]--> |
met daarin dxtransform filters gebruiken om het werkend te krijgen voor IE6 ;).
Maar dat was mijn issue niet. Probeer eens een divje voor 70% transparant te maken, met tekst erin (die dus ook transparant moet zijn), dan werkt dat mooi zoals het hoort in de meeste browsers. Maar ten eerste support IE de opacity css regel nog niet, dus moet je weer een filter gaan toepassen. Maar wat hebben die klojo's nou dus gedaan, cleartype UITGEZET voor alle elementen waar zoiets op toegepast wordt.
Resultaat is dus een divje met gewoon hakkelige tekst erin. :(
Nahjah heb gelukkig een workaround gevonden voor waar ik het voor nodig had. Klant blijft koning he :P
quote:Dat had ik gedaan, 130 hoogte en breedte;Op donderdag 20 maart 2008 19:07 schreef mcDavid het volgende:
[..]
Al die blokjes een vaste hoogte geven?
quote:En IE7 heeft wat afwijkingen in de weergave van kleuren van PNG's.Op vrijdag 21 maart 2008 12:54 schreef mcDavid het volgende:
[..]
IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!
IE6 dan weer niet wat idd bloedirritant is
quote:In plaats van een div met opacity kun je ook gewoon een 1x1 pixel PNG gebruiken.Op vrijdag 21 maart 2008 13:15 schreef DionysuZ het volgende:
[..]
dat is gelukkig wel gefixt jah. Maar als in PNG met alpha wil gebruiken moet ik nog altijd
[ code verwijderd ]
met daarin dxtransform filters gebruiken om het werkend te krijgen voor IE6
Maar dat was mijn issue niet. Probeer eens een divje voor 70% transparant te maken, met tekst erin (die dus ook transparant moet zijn), dan werkt dat mooi zoals het hoort in de meeste browsers. Maar ten eerste support IE de opacity css regel nog niet, dus moet je weer een filter gaan toepassen. Maar wat hebben die klojo's nou dus gedaan, cleartype UITGEZET voor alle elementen waar zoiets op toegepast wordt.
Resultaat is dus een divje met gewoon hakkelige tekst erin.
Nahjah heb gelukkig een workaround gevonden voor waar ik het voor nodig had. Klant blijft koning he
quote:ik weet het..... dat is toch ook niet wat ik bedoel? als je tekst een alpha channel wil geven.Op vrijdag 21 maart 2008 14:45 schreef Geqxon het volgende:
[..]
In plaats van een div met opacity kun je ook gewoon een 1x1 pixel PNG gebruiken.
quote:Probeer eens 140 ofzo? Klaarblijkelijk worden 2 van de cellen opgerekt in IE6...Op vrijdag 21 maart 2008 13:35 schreef Chandler het volgende:
[..]
Dat had ik gedaan, 130 hoogte en breedte;
quote:Als ik dat doe houdt hij geen rekening met de opgegeven margin van de footer, zit dus gelijk tegen de langste div aan (menu of content). Tot op dit moment werkt dit goed dus ik houd het ook zo.Op vrijdag 21 maart 2008 12:50 schreef mcDavid het volgende:
[..]
Volgens mij zou je ook de footer kunnen gebruiken ipv die extra div. Geef die ff een clear:both (dit geeft aan dat er aan beide kanten van die div geen float-objecten mogen staan) en kijk wat er gebeurt.
quote:Klopt, margin-top heb je dan weinig meer aan, maar padding lost een hoop opOp vrijdag 21 maart 2008 16:27 schreef BugWorks het volgende:
[..]
Als ik dat doe houdt hij geen rekening met de opgegeven margin van de footer, zit dus gelijk tegen de langste div aan (menu of content). Tot op dit moment werkt dit goed dus ik houd het ook zo.
quote:Ik heb het nu al aangepast naar 135px maar kan helaas zelf niet controlleren (slecht hé);Op vrijdag 21 maart 2008 15:23 schreef mcDavid het volgende:
[..]
Probeer eens 140 ofzo? Klaarblijkelijk worden 2 van de cellen opgerekt in IE6...
En een ander probleem was dat wanneer je op een van de plaatjes klikt je een popup krijgt die 100% breed hoort te zijn maar helaas dat is deze niet
misschien moet ik block mee geven aan de div?quote:Het is van nature al een block level elementOp vrijdag 21 maart 2008 16:42 schreef Chandler het volgende:
misschien moet ik block mee geven aan de div?
quote:Ze staan nu zowel in Fx2.x als in MSIE 6 als 3 rijen van 2Op vrijdag 21 maart 2008 16:42 schreef Chandler het volgende:
[..]
Ik heb het nu al aangepast naar 135px maar kan helaas zelf niet controlleren (slecht hé);
En een ander probleem was dat wanneer je op een van de plaatjes klikt je een popup krijgt die 100% breed hoort te zijn maar helaas dat is deze niet
iig consequenter
dus moet nu in IE6 ook goed zichtbaar zijn Ik heb een grote div en daarin zitten allemaal divjes.
de onderste twee zijn er twee die naast elkaar staan. Namelijk een sidebar en daarnaast de daadwerkelijke content.
De sidebar is niet zo lang en de content varieert in lengte. Nu wil ik natuurlijk dat mijn sidebar ook altijd net zo lang is als mijn content.
Het is vast iets met min-height: contentheight
ofzo wat. Maar hoe zit het precies?
-edit-
gewoon een achtergrondafbeelding gebruiken dus
M'n idee is namelijk dat je iets wilt wat op te lossen is dmv zogenaamde "faux colums" (google)
quote:Ja ik zat er ook al aan te denken om met de footer een beetje vals te spelen. Toch grappig dat het toch allemaal zo kneuterig is dat je de meeste simpele dingen gewoon moet gaan faken. Ik zit overigens nu ook weer gezellig te worstelen met het verschil in boxing model tussen IE en FF. Dacht dat ik er bijna was totdat ik IE opendeOp maandag 24 maart 2008 15:44 schreef CraZaay het volgende:
Dan zet je dat in een element wat onder beide kolommen komt, en dus altijd onderaan staat ongeacht de hoogte van de kolommen?
. quote:Jup dat is het.Op maandag 24 maart 2008 15:46 schreef Fliepke het volgende:
[..]
Ja ik zat er ook al aan te denken om met de footer een beetje vals te spelen. Toch grappig dat het toch allemaal zo kneuterig is dat je de meeste simpele dingen gewoon moet gaan faken. Ik zit overigens nu ook weer gezellig te worstelen met het verschil in boxing model tussen IE en FF. Dacht dat ik er bijna was totdat ik IE opende
Weet iemand trouwens of Firefox3 weer anders om zal gaan met css en html dan firefox 2? Dat we dan met een browser extra rekening moeten houden?
http://www.intensivstatio(...)es/2/template-1.html
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px"); }
The content-div has a left margin. Setting a min-height assures that the content area is always higher than the navigation.
IE on MAC doesn't interprets min-height. The dynamic properties (i.e. expression) used in explorer are proprietary by Microsoft. This prevents the css from validating according to W3C.
«-- back
Firefox 3 zal er net zo mee omgaan als Firefox 2, namelijk standards compliant conform de W3C richtlijnen
En voor box model problemen: met welk doctype?