DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Neee, dat bedoel ik niet, maar voor iemand zegt dat hij gezellig de content aan moet gaan passen en hij denkt dat dat de PHP is en hij dat weer gaat verneuken...quote:Op woensdag 5 januari 2011 14:45 schreef Tegan het volgende:
[..]
Ik weet echt wel wat php is, beter dan dat ik css ken. Maar dat soort details hoef je een newbie niet mee te vervelen leek mij.
Er is toch een #comments? Daar moet je denk ik in gaan zoeken, gewoon proberen. Werkt het niet? Haal je het weer weg.quote:
[..]
Ah ok, dit is de CSS, maar ik kan er geen wijs uit worden waar ik een aanpassing moet doorvoeren
[ code verwijderd ]
Ik had verwacht dat de oplossing wat ingewikkelder zou zijn in de CSS dan dat, maar in de eerste poging al gevondenquote:
[..]
Er is toch een #comments? Daar moet je denk ik in gaan zoeken, gewoon proberen. Werkt het niet? Haal je het weer weg.
Dank allen voor de hulp, het is voor elkaar!
.
Soms is het retemakkelijk en soms niet!quote:
[..]
Ik had verwacht dat de oplossing wat ingewikkelder zou zijn in de CSS dan dat, maar in de eerste poging al gevonden
Ik vind het trouwens nog altijd raar dat in de css alles is "font-family" "text-align", en dat de kleur van je text opeens alleen "color" is.
Random brainfart, ik ga weer.
Klopt, ik typ in de haast nog weleens color, als ik background-color bedoel.quote:
[..]
Soms is het retemakkelijk en soms niet!
Ik vind het trouwens nog altijd raar dat in de css alles is "font-family" "text-align", en dat de kleur van je text opeens alleen "color" is.
Random brainfart, ik ga weer.
Maargoed text-color of color, scheelt toch weer 5 bytes
Echt waar, in een CSS-topic?quote:
Zet er <font color="black"> voor en </font> achter?
Nee.
Oke. Ik heb het nu getest met het alignen, en de helft werkt.
Bij de test heb ik deze code gebruikt:
Dit werkt.
In mijn werkelijke project heb ik het geprobeerd erin te gooien, dit is daarvan de code:
En wat er hier gebeurt, is dat al mijn text verdwenen is. Wtf? Halp?
Goed, de div met text is terecht. Hij is helemaal naar linksboven geschoven. Dit is nogal kut. Ik wil namelijk wel met margins werken, maar dat heeft geen nut als je een andere resolutie hebt lijkt me. Maar de text is gecentreerd
[ Bericht 2% gewijzigd door RenRen- op 06-01-2011 09:31:58 ]
Bij de test heb ik deze code gebruikt:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #test{ background-color:#fff; font-size:12px; height:100px; width:100px; display:table; position:absolute; left:0; top:0; } p.testtest{ display:table-cell; vertical-align:middle; } |
Dit werkt.
In mijn werkelijke project heb ik het geprobeerd erin te gooien, dit is daarvan de code:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #contentleft{ width:392px; height:307px; text-align:center; float:left; font-family:myriad pro; font-size:18px; display:table; position:absolute; left:0; top:0; } p.alignmiddle{ display:table-cell; vertical-align:middle; } |
En wat er hier gebeurt, is dat al mijn text verdwenen is. Wtf? Halp?
Goed, de div met text is terecht. Hij is helemaal naar linksboven geschoven. Dit is nogal kut. Ik wil namelijk wel met margins werken, maar dat heeft geen nut als je een andere resolutie hebt lijkt me.
Maar de text is gecentreerd[ Bericht 2% gewijzigd door RenRen- op 06-01-2011 09:31:58 ]
Het werkt, maar ik had toen ik dat tikte ook een probleem met een paragraph die niet helemaal goed wou centreren. Dus toen was ik het zat.quote:Op donderdag 6 januari 2011 10:41 schreef KomtTijd... het volgende:
Als dat werkt, moet een div met display:table-cell net zo goed werken.
Weet jij toevallig waarom mijn td de hoogte lijkt te negeren?
Hierdoor verspringt alles continu namelijk.
| 1 2 3 4 5 6 7 | td.logo{ border:none; width:390px; height:200px; text-align:center; padding-top:60px; } |
Hierdoor verspringt alles continu namelijk.
Misschien doordat de padding + content groter is dan de hoogte?
Tables werken compleet anders met overflow enzo.
Tables werken compleet anders met overflow enzo.
Hij verspringt altijd, alsof hij de hoogte gewoon negeert. Althans, hij staat in het midden, en de hoogte aan de bovenkant snapt hij, maar aan de onderkant niet.quote:
Misschien doordat de padding + content groter is dan de hoogte?
Tables werken compleet anders met overflow enzo.
Geen enkel plaatje is hoger dan 200px, dus dat zou niet mogen. Ook geen padding oid.
Ik maak een gradient in de achtergrond van een site op het moment, dmv CSS.
Het rare waar ik tegenaan loop is dat de gradient niet doorloopt, maar ophoudt. De hoogte wordt overgenomen door de hoogte van de container, maar de gradient bevindt zich wel in de body.
Weet iemand waar dit aan ligt?
Ik zie wel dat het op te lossen is door de body een vaste hoogte te geven. Maar dit lijkt me niet slim om te doen, omdat mensen dan onnodig zullen scrollen. Of, bij mensen met een hoger beeldscherm dan 900px, zien weer de gradient opnieuw beginnen.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | body{ height:auto; background: #008800; background: -moz-linear-gradient(top, #5E5E5E, #000000); background: -webkit-gradient(linear, left top, right top, from(#5E5E5E), to(#000000)); filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#5E5E5E', EndColorStr='#000000', GradientType=1); } #container{ width:900px; height:200px; margin: 0 auto; margin-top:200px; } |
Het rare waar ik tegenaan loop is dat de gradient niet doorloopt, maar ophoudt. De hoogte wordt overgenomen door de hoogte van de container, maar de gradient bevindt zich wel in de body.
Weet iemand waar dit aan ligt?
Ik zie wel dat het op te lossen is door de body een vaste hoogte te geven. Maar dit lijkt me niet slim om te doen, omdat mensen dan onnodig zullen scrollen. Of, bij mensen met een hoger beeldscherm dan 900px, zien weer de gradient opnieuw beginnen.
De hoogte van de body is precies genoeg voor de site zelf. De rest van het scherm wordt opgevuld door html.quote:
Het rare waar ik tegenaan loop is dat de gradient niet doorloopt, maar ophoudt. De hoogte wordt overgenomen door de hoogte van de container, maar de gradient bevindt zich wel in de body.
Weet iemand waar dit aan ligt?
Ik gebruik meestal
| 1 | html, body { ... } |
Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaatquote:
[..]
De hoogte van de body is precies genoeg voor de site zelf. De rest van het scherm wordt opgevuld door html.
Ik gebruik meestal
[ code verwijderd ]
Regel 2 uit het stukje wat je gepost hebt, voegt niets toe. Die kun je beter weglaten.
De gradient die ik in de body heb gestopt, neemt de hoogte van de container over. Dus elke 200 pixels begint de gradient opnieuw.
Geef je body min-height: 100%quote:
[..]
Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaat
Nou, ik heb nooit met een gradient achtergrondkleur gewerkt maar ik heb wel vaak gezien dat de hoogte van html groter is dan die van body. Ik nam aan dat dat hier ook het probleem was. Ik had alleen geen kans om het te testen, dus ik heb als educated guess een mogelijke oplossing neergegooid. Helaas zat ik er deze keer naastquote:
[..]
Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaat
Ohh, maar ik had eerst ook geen hoogte gegeven aan de body. Leek me useless, maar als hij zo doet ga ik ook maar wat doen. Kan gebeuren joh. Waarschijnlijk was ik ook niet zo clear.quote:
[..]
Nou, ik heb nooit met een gradient achtergrondkleur gewerkt maar ik heb wel vaak gezien dat de hoogte van html groter is dan die van body. Ik nam aan dat dat hier ook het probleem was. Ik had alleen geen kans om het te testen, dus ik heb als educated guess een mogelijke oplossing neergegooid. Helaas zat ik er deze keer naast
Nop, nogsteeds doetie het verkeerd.quote:
[..]
Geef je body min-height: 100%
Oplossing: kleurverloop op html, niet op body. En html ook min-height: 100% gevenquote:
[..]
Ohh, maar ik had eerst ook geen hoogte gegeven aan de body. Leek me useless, maar als hij zo doet ga ik ook maar wat doen. Kan gebeuren joh. Waarschijnlijk was ik ook niet zo clear.
[..]
Nop, nogsteeds doetie het verkeerd.
Hoe zet ik code van CSS naar HTML dan?quote:
[..]
Oplossing: kleurverloop op html, niet op body. En html ook min-height: 100% geven
Of gewoon boven de body zetten?
| 1 2 3 4 5 6 7 8 | html, body { margin: 0; padding: 0; } html { background: -moz-linear-gradient(top, #5E5E5E, #000000); min-height: 100%; } |
quote:
De min-height op regel 12 hoort niet bij body maar bij html.
Opgelost, dankje!
ik gebruik voor een gradient achtergrond (ter vervanging van een plaatje dat geladen werd) de volgende stukje css:
dit werkt prima in IE7/8/9 en FF3.6 (en bedankt RenRen- voor die laatste regel )
echter probeer ik dit nu op een stuk css dat een <a href> aanpast en daar functioneert hij niet correct onder IE7, nou is dat niet echt een probleem maar ben ik wel benieuwd of iemand weet hoe dit komt
| 1 2 3 | background: -moz-linear-gradient(top, #e5e7e6, #eaeceb); background: -webkit-gradient(linear,top,bottom,from(#e5e7e6),to(#eaeceb)); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#e5e7e6', EndColorStr='#eaeceb'); |
)echter probeer ik dit nu op een stuk css dat een <a href> aanpast en daar functioneert hij niet correct onder IE7, nou is dat niet echt een probleem maar ben ik wel benieuwd of iemand weet hoe dit komt
DXImageTransform is gigantisch traag en buggy. Indien mogelijk zou ik gewoon een PNG blijven gebruiken, werkt over het algemeen stukken beter.quote:
ik gebruik voor een gradient achtergrond (ter vervanging van een plaatje dat geladen werd) de volgende stukje css:
[ code verwijderd ]
dit werkt prima in IE7/8/9 en FF3.6 (en bedankt RenRen- voor die laatste regel
echter probeer ik dit nu op een stuk css dat een <a href> aanpast en daar functioneert hij niet correct onder IE7, nou is dat niet echt een probleem maar ben ik wel benieuwd of iemand weet hoe dit komt
