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.
Als je nou eens gewoon die Javascript-ellende weghaalt die voor je doctype staat, dan werken die hovers gewoon in Firefox.
Nee.
Hey wat leuk, die zooi zie ik niet staan in m'n header.php, dat wordt weer zoeken.
edit: lijkt op een login module, maar als ik die weghaal gebeurt er ook niks. Weird. Even bij wordpress topic kijken.
[ Bericht 30% gewijzigd door Mirel op 30-05-2011 17:25:53 ]
edit: lijkt op een login module, maar als ik die weghaal gebeurt er ook niks. Weird. Even bij wordpress topic kijken.
[ Bericht 30% gewijzigd door Mirel op 30-05-2011 17:25:53 ]
When all else fails, you always have delusion.
Er is geen andere CSS-regel, er is gewoon geen hover. Ik herhaal: GEEN hover. Niet. Nergens. Een hover die niet bestaat gaat het ook niet doen.quote:Op maandag 30 mei 2011 16:40 schreef Mirel het volgende:
[..]
Daar is niks mee gedaan. Die staan gewoon op dezelfde plek en opera en chrome lezen die gewoon uit, dus ikw eet het ook niet. Denk dat een andere css regel de boosdoener is.
Ik heb in Safari op de Mac ook gewoon een hover hoor. Die zijn schijnbaar minder kieskeurig wat betreft codes die voor de doctype komen. Ik zie in de CSS ook gewoon de diverse :hover-states staan hoor. Firebug ziet ze alleen niet door die Javascript-ellende voor de doctype.
Nee.
Hoi hoi. Net begonnen met een eigen site.
Ik wil 1 div herhalen helemaal rechtsonderaan. Ik kan er eentje daar wel neerzetten, maar nu blijkt het toch moeilijker dan ik dacht om er dan een andere links ernaast te herhalen. Wtf moet ik doen
Pas op het moment dat ik position: absolute; invoer, krijg ik de div rechtsonder. Maar op het moment dat ik de div kopieer, komen ze (denk ik) boven op elkaar. Ik zie er dan iig maar eentje.
Ik probeerde dit als voorbeeld te gebruiken: http://sonyakozlova.com/ Die website lijnt niet uit rechtsonderaan maar ik kan misschien met bepaalde trucjes (een container div onderaan) de boel wel naar beneden krijgen. Feit blijft wel dat ik mijn eerste post rechts wil hebben en mijn nieuwste post links. Zo zal je dan later naar rechts moeten scrollen om de oudere dingen te zien.
Ik zie sowieso niet hoe de boel naast elkaar is gezet op die website. Dat kan ik overigens nog wel zoals in bovenstaande code te zien is. Het is die klote position: absolute; die de boel verkloot.
[ Bericht 6% gewijzigd door Mirel op 05-06-2011 21:58:36 ]
Ik wil 1 div herhalen helemaal rechtsonderaan. Ik kan er eentje daar wel neerzetten, maar nu blijkt het toch moeilijker dan ik dacht om er dan een andere links ernaast te herhalen. Wtf moet ik doen
| 1 2 3 4 5 6 | <div class="post"> test1 </div> <div class="post"> test2 </div> |
| 1 2 3 4 5 6 7 8 | .post { bottom:0; right:0; width: 400px; background: white; float: right; margin-left: 40px; } |
Ik probeerde dit als voorbeeld te gebruiken: http://sonyakozlova.com/ Die website lijnt niet uit rechtsonderaan maar ik kan misschien met bepaalde trucjes (een container div onderaan) de boel wel naar beneden krijgen. Feit blijft wel dat ik mijn eerste post rechts wil hebben en mijn nieuwste post links. Zo zal je dan later naar rechts moeten scrollen om de oudere dingen te zien.
Ik zie sowieso niet hoe de boel naast elkaar is gezet op die website. Dat kan ik overigens nog wel zoals in bovenstaande code te zien is. Het is die klote position: absolute; die de boel verkloot.
[ Bericht 6% gewijzigd door Mirel op 05-06-2011 21:58:36 ]
When all else fails, you always have delusion.
Ik heb geen flauw idee wat je nou wilt bereiken, maar position:absolute gebruiken is (bijna) nooit een goed idee.
doe eens plaatje makenquote:
Hoi hoi. Net begonnen met een eigen site.
Ik wil 1 div herhalen helemaal rechtsonderaan. Ik kan er eentje daar wel neerzetten, maar nu blijkt het toch moeilijker dan ik dacht om er dan een andere links ernaast te herhalen. Wtf moet ik doen
[ code verwijderd ]
[ code verwijderd ]
Pas op het moment dat ik position: absolute; invoer, krijg ik de div rechtsonder. Maar op het moment dat ik de div kopieer, komen ze (denk ik) boven op elkaar. Ik zie er dan iig maar eentje.
Ik probeerde dit als voorbeeld te gebruiken: http://sonyakozlova.com/ Die website lijnt niet uit rechtsonderaan maar ik kan misschien met bepaalde trucjes (een container div onderaan) de boel wel naar beneden krijgen. Feit blijft wel dat ik mijn eerste post rechts wil hebben en mijn nieuwste post links. Zo zal je dan later naar rechts moeten scrollen om de oudere dingen te zien.
Ik zie sowieso niet hoe de boel naast elkaar is gezet op die website. Dat kan ik overigens nog wel zoals in bovenstaande code te zien is. Het is die klote position: absolute; die de boel verkloot.
“Specialization is for insects”.—Robert Heinlein
zijn altijd zo groot? blijven ten alle tijden daar staan (dus ook als je het venster van grootte veranderd of bij scrollen)?quote:
Hier bij www.mirelmasic.nl. Ik wil dat het zo wordt:
[ afbeelding ]
Het is dus 1 div class die ik 2x post.
indien beide ja zou ik gaan voor
ul#ding {
position: fixed;
bottom: 0px;
right: 0px;
height: 20px;
width: 600px;
}
ul#ding li {
background: white;
float: right;
widht: 200px;
height: inherit;
margin: 0 50px;
}
zou moeten werken i'd guess
“Specialization is for insects”.—Robert Heinlein
Nou ze worden 400 px hoog denk ik. en dan wil ik met wordpress er text in plaatsen, of thumbnails
When all else fails, you always have delusion.
in dat geval die "bottom" div 400px hoog maken, en rechtsonderin de hoek smijten met position:absolute. Je content een margin-bottom van 400px geven.quote:
Nou ze worden 400 px hoog denk ik. en dan wil ik met wordpress er text in plaatsen, of thumbnails
hoezo lists? Ik snap niet hoe je dit met 2 css entries doet. De ene voor de tekst en de andere voor de achtergrond zelf?
edit: oohhhh, even denken
edit2: ja ik ben most confused, werkt voor geen meter. Daarnaast komt er een volgende div van dezelfde class rechts ipv links
[ Bericht 43% gewijzigd door Mirel op 06-06-2011 13:05:08 ]
edit: oohhhh, even denken
edit2: ja ik ben most confused, werkt voor geen meter. Daarnaast komt er een volgende div van dezelfde class rechts ipv links
[ Bericht 43% gewijzigd door Mirel op 06-06-2011 13:05:08 ]
When all else fails, you always have delusion.
oh hee het lukt al. En ik wil dat het dezelfde class geeft omdat ik in wordpress die div wil gebruiken voor het posten. Iedere post komt in een kopie van die div terug. Als ik op een gegeven 10 posts hebt dan heb ik dus 10 van die vierkanten naast elkaarquote:
Waarom geef je die div geen andere classname dan?
When all else fails, you always have delusion.
je wilt horizontaal scrollen?quote:
[..]
oh hee het lukt al. En ik wil dat het dezelfde class geeft omdat ik in wordpress die div wil gebruiken voor het posten. Iedere post komt in een kopie van die div terug. Als ik op een gegeven 10 posts hebt dan heb ik dus 10 van die vierkanten naast elkaar
“Specialization is for insects”.—Robert Heinlein
Ja. Ik word hier trouwens helemaal gestoord van. Dat zoiets simpels en voor de hand liggends niet kan werken.
Kan je het alsjeblieft precies invullen hoe het moet? Ook met de goeie namen
, want ik ben nu te suf om als een normaal mens na te denken 
ik ben hier en daar aan het kutten geweest.
Kan je het alsjeblieft precies invullen hoe het moet? Ook met de goeie namen
, want ik ben nu te suf om als een normaal mens na te denken | 1 2 3 4 5 6 7 8 | <ul class="postwrapper"> <li class="post"> test1 </li> <li class="post"> test2 </li> <ul> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .postwrapper { position: fixed; bottom: 0px; right: 0px; height: 500px; width: 200px; } .post { float: right; width: 200px; height: 500px; } |
When all else fails, you always have delusion.
n8n.nl/temp/oi.html
al zou ik het persoonlijk iets anders doen, een scrollend element binnen een pagina is horrible
al zou ik het persoonlijk iets anders doen, een scrollend element binnen een pagina is horrible
“Specialization is for insects”.—Robert Heinlein
Ik heb het idee om iedere div uiteindelijk een gebouw te laten lijken. Ik wil gewoon stad bouwen met mijn posts. Leuk portfolio idee tochquote:Op maandag 6 juni 2011 13:43 schreef n8n het volgende:
n8n.nl/temp/oi.html
al zou ik het persoonlijk iets anders doen, een scrollend element binnen een pagina is horrible
When all else fails, you always have delusion.
dat kan wel, vergt wel extraspeciale kennis, kan het wel ff maken volgens mijquote:
[..]
Ik heb het idee om iedere div uiteindelijk een gebouw te laten lijken. Ik wil gewoon stad bouwen met mijn posts. Leuk portfolio idee toch
“Specialization is for insects”.—Robert Heinlein
Nou ik heb al een idee hoe ik dat in wordpress kan regelen met de loop, nu de css eers fixen. Mijn hosting is trouwens echt *zwaar* kut de laatste tijd. Ik ga even op de host van m'n school, want als ik nu de stylesheet verander, dan gebeurt er helemaal niks.
PCextreme
PCextreme
When all else fails, you always have delusion.
en een list reversen? Ik las iets over <ol reversed> maar dat werkt niet
[ Bericht 92% gewijzigd door Mirel op 06-06-2011 15:31:57 ]
[ Bericht 92% gewijzigd door Mirel op 06-06-2011 15:31:57 ]
When all else fails, you always have delusion.
Ik ben aan het werken met opacity in een div. De div is prima doorzichtig, maar de tekst ook. Lijkt me logisch, maar als ik een nieuwe div maak erin, neemt die ook nog de doorzichtigheid mee, dit neemt me niet de bedoeling. Is dit op te lossen? Of alleen door de opacity weg te halen?
Bedankt
Oh nvm, ik ga het proberen met een pixel met een lage opacity.
[ Bericht 10% gewijzigd door RenRen- op 06-06-2011 16:18:44 ]
Bedankt
Oh nvm, ik ga het proberen met een pixel met een lage opacity.
[ Bericht 10% gewijzigd door RenRen- op 06-06-2011 16:18:44 ]
Los ik altijd op door de div en de inhoud los te trekken om het vervolgens over elkaar te positioneren.quote:
Ik ben aan het werken met opacity in een div. De div is prima doorzichtig, maar de tekst ook. Lijkt me logisch, maar als ik een nieuwe div maak erin, neemt die ook nog de doorzichtigheid mee, dit neemt me niet de bedoeling. Is dit op te lossen? Of alleen door de opacity weg te halen?
Bedankt
background: rgba(0,0,0,0.5);quote:
Ik ben aan het werken met opacity in een div. De div is prima doorzichtig, maar de tekst ook. Lijkt me logisch, maar als ik een nieuwe div maak erin, neemt die ook nog de doorzichtigheid mee, dit neemt me niet de bedoeling. Is dit op te lossen? Of alleen door de opacity weg te halen?
Bedankt
1e 3 nullen zijn rgbwaarde (0 - 255), laatste is opacity (0 - 1)
“Specialization is for insects”.—Robert Heinlein
snap het nu, extra element om de <article> in mijn voorbeeld heen en die float: right; geven, hoogte, line-height en vertical-align van <section> overnemenquote:
en een list reversen? Ik las iets over <ol reversed> maar dat werkt niet
“Specialization is for insects”.—Robert Heinlein
Ik weet hoe dat zit, maar dat is niet helemaal de vraag. Ik wil de opacity opheffen in een div in de doorzichtige div zodat mijn tekst niet doorzichtig en vaag is.quote:Op maandag 6 juni 2011 16:16 schreef n8n het volgende:
[..]
background: rgba(0,0,0,0.5);
1e 3 nullen zijn rgbwaarde (0 - 255), laatste is opacity (0 - 1)
Oh serieus? Dat lijkt me niet helemaal handigquote:
[..]
Los ik altijd op door de div en de inhoud los te trekken om het vervolgens over elkaar te positioneren.
Of werkt dat juist altijd heel goed? Lijkt me dat je dan enorme verschillen krijgt in browsers.
Is exact de oplossing voor jouw probleem omdat het niet het hele element transparant maaktquote:
[..]
Ik weet hoe dat zit, maar dat is niet helemaal de vraag. Ik wil de opacity opheffen in een div in de doorzichtige div zodat mijn tekst niet doorzichtig en vaag is.
Dan het element met content relatief positioneren, een transparante span oid er in en dan absoluut positioneren met width en height 100%. Het kan dus ook zonder dat extra elementquote:[..]
Oh serieus? Dat lijkt me niet helemaal handig
“Specialization is for insects”.—Robert Heinlein
Ik begreep je verkeerd inderdaadquote:
[..]
Is exact de oplossing voor jouw probleem omdat het niet het hele element transparant maakt
[..]
Dan het element met content relatief positioneren, een transparante span oid er in en dan absoluut positioneren met width en height 100%. Het kan dus ook zonder dat extra element
Wou ik net komen zeggen. Even zien of dit ook in alle browsers werkt, thanks. Dat laatste doe ik maar niet, ik snap er niets van
laatstequote:
[..]
Ik begreep je verkeerd inderdaad
Dat laatste doe ik maar niet, ik snap er niets van
<div>
<span></span>
</div>
div {
position: relative;
}
div span {
position: absolute;
width: 100%;
height: 100%;
}
“Specialization is for insects”.—Robert Heinlein
iemand wel eens position: static; gebruikt? Even uitzoeken wat dat is nog nooit mee in aanraking geweest
edit: http://css-tricks.com/what-if-there-was-no-position-static/
ah, default waarde
edit: http://css-tricks.com/what-if-there-was-no-position-static/
ah, default waarde
“Specialization is for insects”.—Robert Heinlein
Bijna gelukt. Ik heb ipv jouw articles en sections gewoon divs enzo. Wat zijn articles en sections eigenlijk?quote:
[..]
snap het nu, extra element om de <article> in mijn voorbeeld heen en die float: right; geven, hoogte, line-height en vertical-align van <section> overnemen
When all else fails, you always have delusion.
semantiek, html5quote:
[..]
Bijna gelukt. Ik heb ipv jouw articles en sections gewoon divs enzo. Wat zijn articles en sections eigenlijk?
http://www.w3schools.com/html5/html5_reference.asp
“Specialization is for insects”.—Robert Heinlein
Ik ben nu thuis en heb het net even weer geprobeerd. Alles in html5. Wat ik kreeg is dat de elementen bovenaan stonden, met de lange stukken naar beneden uitstekend, en ik zag er maar 4 terwijl ik er meer had.
Ik heb het nu gewoon zo, en het werkt bijna: http://1577359.huweb.nl/ (als je nog tijd hebt, kan je het even niet in html5 uitleggen? Ik wil daar nog mee wachten
Wel tof wat je tot nu toe hebt laten zien. Inventieve wijze van floats gebruiken 
, en dat white-space ken ik nog niet eens)
html:
Ik heb het nu gewoon zo, en het werkt bijna: http://1577359.huweb.nl/ (als je nog tijd hebt, kan je het even niet in html5 uitleggen? Ik wil daar nog mee wachten
Wel tof wat je tot nu toe hebt laten zien. Inventieve wijze van floats gebruiken , en dat white-space ken ik nog niet eens)html:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <ul class="postwrapper"> <div class="ding"> <li class="post"> <h1>post 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim. Sed mi nibh, convallis vitae sodales vitae, auctor et justo. Quisque eget est odio. Donec ac arcu et elit tempus rhoncus vitae eu metus. Cras metus arcu, pulvinar quis volutpat sed, interdum at tortor.</p> </li> </div> <div class="ding"> <li class="post"> <h1>post 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim. Sed mi nibh, convallis vitae sodales vitae, auctor et justo.</p> </li> </div> <div class="ding"> <li class="post"> <h1>post 3</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacus purus.</p> </li> </div> <div class="ding"> <li class="post"> <h1>post 4</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim. Sed mi nibh.</p> </li> </div> <div class="ding"> <li class="post"> <h1>post 5</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim. Sed mi nibh, convallis vitae sodales vitae, auctor et justo. Quisque eget est odio. Donec ac arcu et elit tempus rhoncus vitae eu metus. Cras metus arcu, pulvinar quis volutpat sed, interdum at tortor.</p> </li> </div> <div class="ding"> <li class="post"> <h1>post 6</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim. Sed mi nibh, convallis vitae sodales vitae, auctor et justo.</p> </li> </div> <div class="ding"> <li class="post"> <h1>post 7</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacus purus.</p> </li> </div> <div class="ding"> <li class="post"> <h1>post 8</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim. Sed mi nibh.</p> </li> </div> <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 | .ding { float: right; vertical-align: bottom; width: 300px; height: 400px; } .postwrapper { position: absolute; width: 100%; height: 400px; vertical-align: bottom; bottom: 0px; right: 0px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .post { padding: 30px; background: white; width: 300px; height: 400px; display: inline-block; white-space: normal; vertical-align: bottom; } |
When all else fails, you always have delusion.
Je postwrapper is te smal. Maak die zo breed als alle post-divs (plus padding, margin en border) bij elkaar.
Eigenlijk snap ik niet waarom je niet gewoon een jquery plugin ofzo gebruikt hiervoor. Horizontaal scrollende layouts zijn een ramp met CSS.
Eigenlijk snap ik niet waarom je niet gewoon een jquery plugin ofzo gebruikt hiervoor. Horizontaal scrollende layouts zijn een ramp met CSS.
Werkt allemaal niet. Ik zal eens kijken wat JQuery kan dan. edit: dit gevonden: http://css-tricks.com/how(...)ally-scrolling-site/ Maar daar alignt hij niet bottom en right, en de eerste post staat links ipv rechts, dus ik vrees dat het niet gaat werken.
Ik denk dat ik dit idee op zal moeten geven
[ Bericht 28% gewijzigd door Mirel op 06-06-2011 23:01:43 ]
Maar daar alignt hij niet bottom en right, en de eerste post staat links ipv rechts, dus ik vrees dat het niet gaat werken.Ik denk dat ik dit idee op zal moeten geven
[ Bericht 28% gewijzigd door Mirel op 06-06-2011 23:01:43 ]
When all else fails, you always have delusion.
kan primaquote:Op maandag 6 juni 2011 22:05 schreef KomtTijd... het volgende:
Je postwrapper is te smal. Maak die zo breed als alle post-divs (plus padding, margin en border) bij elkaar.
Eigenlijk snap ik niet waarom je niet gewoon een jquery plugin ofzo gebruikt hiervoor. Horizontaal scrollende layouts zijn een ramp met CSS.
“Specialization is for insects”.—Robert Heinlein
Simpel vraagje:
Wil m'n container laten meeschalen, maar dat lukt me niet echt. Door hem te laten meeschalen zal ik hem, denk ik, de position: absolute moeten meegeven. Maar dan verdwijnt ie naar links.
Code:
Dit moet snel en eenvoudig op te lossen zijn lijkt me?
Wil m'n container laten meeschalen, maar dat lukt me niet echt. Door hem te laten meeschalen zal ik hem, denk ik, de position: absolute moeten meegeven. Maar dan verdwijnt ie naar links.
Code:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | body, html { background: url(../images/bg.png); margin: 0px; padding: 0px; text-align: center; } .container { background: #ffffff; margin: 0 auto; width: 900px; height: auto; position: absolute; } |
Dit moet snel en eenvoudig op te lossen zijn lijkt me?
Meeschalen hoe?
In de breedte kan niet als je hem een width geeft, in de hoogte gebeurt al standaard als je geen height geeft?
In de breedte kan niet als je hem een width geeft, in de hoogte gebeurt al standaard als je geen height geeft?
Eerst gecentreerd totdat het beeldvullend is bedoel je? Dat wordt lastig... Omdat de inhoud van de container variabel is.
M'n nieuwe site toont wat gebreken in IE8 en IE9 (oudere versies doen het prima), maar ik heb echt geen flauw idee waar het vandaan kan komen. Het gekke is namelijk dat het ene blok wel goed is neergezet, maar het andere niet. Dit terwijl ze zijn gegenereerd door PHP en dus precies dezelfde opmaak hebben.
Iemand enig idee?
site
stuk uit stylesheet:
Iemand enig idee?
site
stuk uit stylesheet:
SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.Php stuk:SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
Ik zou eens beginnen met wat orde te scheppen in je chaos.
Je hebt <a> tags zonder href, <a> tags die uberhaupt helemaal leeg zijn, <a> tags genest in <a> tags, divs zonder inhoud, div's genest in <a>tags, kortom 't is gewoon een janboel. En die CSS van 90 regels moet je ook makkelijk in 20 regels kunnen samenvatten.
Zul je zien, gaat het gelijk al een stuk beter.
Je hebt <a> tags zonder href, <a> tags die uberhaupt helemaal leeg zijn, <a> tags genest in <a> tags, divs zonder inhoud, div's genest in <a>tags, kortom 't is gewoon een janboel. En die CSS van 90 regels moet je ook makkelijk in 20 regels kunnen samenvatten.
Zul je zien, gaat het gelijk al een stuk beter.
Ik ben dus bezig met een site, die met de transparantie, en die boxen hebben ook een box-shadow.
Eén van de divs waar ik mee bezig was, schaalde niet mee met de content, niet met 100% of met auto, dus heb ik een overflow:auto eraan toegevoegd, en een height van 1%. Werkt perfect, op een klein detail na, de box-shadow doet een beetje raar.
Met overflow:auto en height:1%:
Zonder een van beiden:
Code van de div:
Iemand enig idee hoe dit komt?
Eén van de divs waar ik mee bezig was, schaalde niet mee met de content, niet met 100% of met auto, dus heb ik een overflow:auto eraan toegevoegd, en een height van 1%. Werkt perfect, op een klein detail na, de box-shadow doet een beetje raar.
Met overflow:auto en height:1%:
Zonder een van beiden:
Code van de div:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #content{ width:692px; height:533px; margin-left:12px; float:left; box-shadow: 0px 0px 10px #c7c7c7; -moz-box-shadow: 0px 0px 10px #c7c7c7; -webkit-box-shadow: 0px 0px 10px #c7c7c7; background:rgba(255,255,255,0.85); margin-top:12px; margin-bottom:12px; padding-left:10px; padding-right:10px; padding-top:15px; overflow:auto; height:1%; } |
Iemand enig idee hoe dit komt?
probeer :hidden;, of haal de float weg van de content in de transparente box
“Specialization is for insects”.—Robert Heinlein
Weer een voorbeeldje van je probleem bij de wortel aanpakken:quote:
Ik ben dus bezig met een site, die met de transparantie, en die boxen hebben ook een box-shadow.
Eén van de divs waar ik mee bezig was, schaalde niet mee met de content, niet met 100% of met auto, dus heb ik een overflow:auto eraan toegevoegd, en een height van 1%. Werkt perfect, op een klein detail na, de box-shadow doet een beetje raar.
Met overflow:auto en height:1%:
[ afbeelding ]
Zonder een van beiden:
[ afbeelding ]
Code van de div:
[ code verwijderd ]
Iemand enig idee hoe dit komt?
- een div schaalt niet mee
- je past een hack toe
- je hack introduceert een nieuw probleem
Waarschijnlijk kun je die div mee laten schalen door 'm overflow:visible of hidden te geven, of anders door een element met clear:both onderin de div te plaatsen. Heb je die hele hack niet nodig.
Hidden knipt het af waardoor de helft van de text dus verdwijnt, en de float kan helaas niet weg, anders komen ze onder elkaar te staan.quote:
probeer :hidden;, of haal de float weg van de content in de transparente box
Het moet echt perse naast elkaar.
Even zien welke ik dan clear:both moet geven... Ik denk de footer, thanksquote:
[..]
Weer een voorbeeldje van je probleem bij de wortel aanpakken:
- een div schaalt niet mee
- je past een hack toe
- je hack introduceert een nieuw probleem
Waarschijnlijk kun je die div mee laten schalen door 'm overflow:visible of hidden te geven, of anders door een element met clear:both onderin de div te plaatsen. Heb je die hele hack niet nodig.
Edit, footer heeft al clear:both... Hm. Ik ben confused
Overflow:visible werkt ook niet, schaalt-ie ook niet van mee.
is de height auto? inline-block zet het ook naast elkaar maar dan heb je een if[ie6] nodigquote:
[..]
Hidden knipt het af waardoor de helft van de text dus verdwijnt, en de float kan helaas niet weg, anders komen ze onder elkaar te staan.
“Specialization is for insects”.—Robert Heinlein
height auto werkte niet, 1% werkte wel, maar dus met die lelijkheidquote:
[..]
is de height auto? inline-block zet het ook naast elkaar maar dan heb je een if[ie6] nodig
Ik denk helaas dat de meeste mensen die die site gaan gebruiken IE gebruiken, vast ook oudere versies. Even zoeken wat die fix is dan
Bedankt voor het meedenken ook!
lijkt er op dat je div niet in het midden staat, deze dan ook maar een float geven geen mogelijkheid?
“Specialization is for insects”.—Robert Heinlein
| 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 | #left{ width:215px; height:533px; -moz-box-shadow: 0px 0px 10px #c7c7c7; -webkit-box-shadow: 0px 0px 10px #c7c7c7; box-shadow: 0px 0px 10px #c7c7c7; background:rgba(255,255,255,0.85); margin-top:12px; margin-bottom:12px; padding-left:10px; padding-right:10px; padding-top:15px; display:inline-block; } #content{ width:692px; height:533px; margin-left:12px; box-shadow: 0px 0px 10px #c7c7c7; -moz-box-shadow: 0px 0px 10px #c7c7c7; -webkit-box-shadow: 0px 0px 10px #c7c7c7; background:rgba(255,255,255,0.85); margin-top:12px; margin-bottom:12px; padding-left:10px; padding-right:10px; padding-top:15px; display:inline-block; height:auto; } |
Dit zou dan toch de nieuwe code moeten zijn? Zo ja, dit werkt niet
Welke div staat dan niet in het midden? Wacht, ik geef jullie een url.quote:
lijkt er op dat je div niet in het midden staat, deze dan ook maar een float geven geen mogelijkheid?
Het gaat om de inhoud van je content div. Die heeft (ook) een float, zo te zien. Díé moet je clearen, of de content-div overflow:hidden meegeven, dat heeft het zelfde effect.
-edit- nog beter: moet die inhoud uberhaupt wel gefloat? Kan het niet zonder? (dus niet je content div, maar de inhoud ván je content div)
-edit- nog beter: moet die inhoud uberhaupt wel gefloat? Kan het niet zonder? (dus niet je content div, maar de inhoud ván je content div)
Ik heb dus 2 blokken in het grote blok, en die moeten gefloat zijn, net als het grote blok, dat moet ook naast elkaar komen te staan. Hoe maakt me niet uit, als het maar naast elkaar blijftquote:
Het gaat om de inhoud van je content div. Die heeft (ook) een float, zo te zien. Díé moet je clearen, of de content-div overflow:hidden meegeven, dat heeft het zelfde effect.
-edit- nog beter: moet die inhoud uberhaupt wel gefloat? Kan het niet zonder? (dus niet je content div, maar de inhoud ván je content div)
Tabellen zijn geen optie vrees ik.
display: inline-block;
enkel ie6 werkt heeft dan een inline nodig meen ik
snap niet waarom de overflow-truc niet werkt http://webdesignerwall.co(...)floats-with-overflow
enkel ie6 werkt heeft dan een inline nodig meen ik
snap niet waarom de overflow-truc niet werkt http://webdesignerwall.co(...)floats-with-overflow
“Specialization is for insects”.—Robert Heinlein
Mijn manier is overigens om eerst de mark-up uiteen te zetten en dan zo clean mogelijk vorm te geven. Alleen de vlakverdeling met contrasterende kleuren opgevuld met wat faux content. Dan kom ik direct achter moeilijkheden en kan ik makkelijk de grenzen opzoeken door wat lorum ipsum extra erbij te kwakken. Wellicht een tip voor de volgende keer (en iedereen die dit verder leest).
“Specialization is for insects”.—Robert Heinlein
Nou ja, het is een zelfgebouwde template, dus ik was niet echt aan het werk met content, vooral met het bouwen, en daarom ben ik nu aan het finetunen. Normaal doe ik het ook zo, maar nu is het ook haasthaasthaast.quote:
Mijn manier is overigens om eerst de mark-up uiteen te zetten en dan zo clean mogelijk vorm te geven. Alleen de vlakverdeling met contrasterende kleuren opgevuld met wat faux content. Dan kom ik direct achter moeilijkheden en kan ik makkelijk de grenzen opzoeken door wat lorum ipsum extra erbij te kwakken. Wellicht een tip voor de volgende keer (en iedereen die dit verder leest).
dan helpt dit ook niet, gooi ff die inline-block er tegenaan ipv de float, dan heb je een block element naast elkaar. Voor IE moet dan maar een hack komenquote:
[..]
Nou ja, het is een zelfgebouwde template, dus ik was niet echt aan het werk met content, vooral met het bouwen, en daarom ben ik nu aan het finetunen. Normaal doe ik het ook zo, maar nu is het ook haasthaasthaast.
http://blog.mozilla.com/w(...)rowser-inline-block/
“Specialization is for insects”.—Robert Heinlein
Je hebt overal keihard een hoogte van 538 pixels instaan. Die moet je weg halen. Uit allebei je stylesheets.
Mooie website wel trouwens!
Mooie website wel trouwens!
Ohja, dan is het opgelost! Dankjeweeelquote:
Je hebt overal keihard een hoogte van 538 pixels instaan. Die moet je weg halen. Uit allebei je stylesheets.
Mooie website wel trouwens!
Maar. Wtf, er is maar 1 css, en #1 en #2 verwijzen naar hetzelfde bestand. Arghhhh, straks even een topic over openen elders thanks
Ik ben er wel blij mee.
Neequote:
Eerst gecentreerd totdat het beeldvullend is bedoel je? Dat wordt lastig... Omdat de inhoud van de container variabel is.
. Altijd gecentreerd, en de height moet meeschalen met de contentdiv die erin staat, en op elke pagina een andere grootte height heeft.
Ja dat dacht ik dus ook. Zo heb ik het ook ingesteld (met een height met vaste grootte), maar als ik die height eruit gooi dan verdwijnt heel m'n container.
Ik centreer mijn container altijd op deze manier:
Als ik nu de height van de container weg haal, en daar een position: absolute toevoeg, dan schaalt mijn container's height wel mee met de hoeveelheid tekst die er is. Maar dan is de container niet meer gecentreerd en ploft ie naar links.
Ik centreer mijn container altijd op deze manier:
| 1 2 3 4 5 6 7 8 9 10 11 | body, html { margin: 0px; padding: 0px; text-align: center; } .container { margin: 0 auto; width: xxpx; height: xxpx; } |
Als ik nu de height van de container weg haal, en daar een position: absolute toevoeg, dan schaalt mijn container's height wel mee met de hoeveelheid tekst die er is. Maar dan is de container niet meer gecentreerd en ploft ie naar links.
Als je container alleen floats bevat is het logisch dat ie verdwijnt. Absoluut positioneren is nergens voor nodig, je moet gebruik maken van een clearfix, bijvoorbeeld:
Door de class .group (of net wat je er van maakt, ik vind group mooier dan bijv. clearfix) toe te voegen zorg je er voor dat een container de floats die ie bevat bevat.
| 1 2 3 4 5 6 7 8 | .group:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; } |
Door de class .group (of net wat je er van maakt, ik vind group mooier dan bijv. clearfix) toe te voegen zorg je er voor dat een container de floats die ie bevat bevat.
Nee.
Oke, dat klinkt logisch. Ik gebruik inderdaad alleen floats.
Waar zou ik die clearfix precies moeten toevoegen?
Waar zou ik die clearfix precies moeten toevoegen?
Hoe krijg ik het voor elkaar om paragraph text te voorzien van een border ter grootte van de text in een div met een vaste breedte en hoogte?
Als ik ze nu een border-bottom of border-top meegeef dan krijgt de div aan de boven- en onderkant een mooie border in plaats van de text.
Als ik ze nu een border-bottom of border-top meegeef dan krijgt de div aan de boven- en onderkant een mooie border in plaats van de text.
wutwutwut?quote:
Hoe krijg ik het voor elkaar om paragraph text te voorzien van een border ter grootte van de text in een div met een vaste breedte en hoogte?
Als ik ze nu een border-bottom of border-top meegeef dan krijgt de div aan de boven- en onderkant een mooie border in plaats van de text.
Een paragraph een border ter grootte van de text in een div met vaste breedte en hoogte...
Dus:
- je hebt een paragraph (<p>) met tekst,
- je hebt een div,
- je wilt een border op de paragraph.
- De border komt op de div ipv op de paragraph.
Snap ik het zo goed?
Zo ja kom eens met een voorbeeld. En zo nee eigenlijk ook.
Je snapt hem helemaal, hier een voorbeeld:
Heb al wat gevonden al werkt het niet helemaal, text-decoration: underline overline.
Edit: nu met CSS van de div. P is verder niet gestyled.
[ Bericht 10% gewijzigd door Black-Hole op 08-06-2011 22:49:15 ]
| 1 2 3 4 5 6 | <div id="advert2text"> <p>IK Oude straatjes vol leuke boetiekjes.<br> JIJToe aan 'n dagje uit. Datum prikken?</p> </div> <!-- end text --> |
| 1 2 3 4 5 6 7 | #advert1text{ float: left; width: 315px; height: 94px; margin-bottom: 22px; background: url('../images/advertbg.jpg') no-repeat; } |
Heb al wat gevonden al werkt het niet helemaal, text-decoration: underline overline.
Edit: nu met CSS van de div. P is verder niet gestyled.
[ Bericht 10% gewijzigd door Black-Hole op 08-06-2011 22:49:15 ]
Er mag nog wat padding rondom te tekst nodig, stylen met line-height heeft helaas geen effect. Weet niet of dat effect heeft op een border-top/bottom eigenlijk...quote:
Wat is er mis met underline & overline dan?
| 1 2 3 4 5 | #advert1text p{ padding: 18px 0px 0px 10px; line-height: 30px; text-decoration: underline overline; } |
Helaas, geen effect. Kan het heel simpel oplossen met een plaatje maar daar heb ik geen zin in eigenlijk.quote:
Hij wil het toch op de tekst (iedere regel) en niet om de hele container (p of div) toch? Zo begrijp ik het iig...
Dan krijg ik dus een border rondom de div...en niet de p-text.quote:
Eerder: wat is er mis met simpelweg border-top en border-bottom op je p-element?
p {display:inline; border-top: ~; border-bottom: ~;}
“Specialization is for insects”.—Robert Heinlein
Dan is de vraag: "waarom gaat die boder rondom de div staan?"quote:
[..]
Dan krijg ik dus een border rondom de div...en niet de p-text.
en niet: "watvoor hack ga ik gebruiken zodat ik bovenstaande vraag niet hoef te beantwoorden?"
Het n8n, het is uiteindelijk gelukt met m'n css. Uiteindelijk had ik dat float gedoe niet eens hoeven te doen omdat Wordpress posts zelf rangschikt: www.mirelmasic.nl De nieuwste staat dus helemaal links
Ik heb wel een probleempje: In Firefox en IE staat alles naar beneden zoals het moet, maar in Opera niet. Opera is mijn standaard browser en het zou handig zijn als ik het daar ook goed kan krijgen
edit: ineens is na een update alles naar de klote. Heb nog een backupje: http://1577359.huweb.nl
[ Bericht 6% gewijzigd door Mirel op 09-06-2011 17:01:45 ]
Ik heb wel een probleempje: In Firefox en IE staat alles naar beneden zoals het moet, maar in Opera niet. Opera is mijn standaard browser en het zou handig zijn als ik het daar ook goed kan krijgen
edit: ineens is na een update alles naar de klote. Heb nog een backupje: http://1577359.huweb.nl
[ Bericht 6% gewijzigd door Mirel op 09-06-2011 17:01:45 ]
When all else fails, you always have delusion.
OK wtf, mijn hele layout is weg. Ik heb wel toevallig Wordpress net nog geupdate. Het vreemde is dat dit bij een klasgenoot vandaag ook gebeurd is. Hmm.
Edit: ineens weer terug.
Ik heb wel toevallig Wordpress net nog geupdate. Het vreemde is dat dit bij een klasgenoot vandaag ook gebeurd is. Hmm.Edit: ineens weer terug.
When all else fails, you always have delusion.
Wat is de netste of correcte methode?
1: style achter scr, met ;
2: style achter scr, zonder ;
3: style voor scr, met ;
4: style voor scr, zonder ;
1: style achter scr, met ;
| 1 | <a href="www.bla.bla"><img src="plaatje.jpg" width="468" height="60" alt="" title="" style="border: 1px solid #000000;" /></a> |
2: style achter scr, zonder ;
| 1 | <a href="www.bla.bla"><img src="plaatje.jpg" width="468" height="60" alt="" title="" style="border: 1px solid #000000" /></a> |
3: style voor scr, met ;
| 1 | <a href="www.bla.bla"><img style="border: 1px solid #000000;" src="plaatje.jpg" width="468" height="60" alt="" title="" /></a> |
4: style voor scr, zonder ;
| 1 | <a href="www.bla.bla"><img style="border: 1px solid #000000" src="plaatje.jpg" width="468" height="60" alt="" title="" /></a> |
Een ballonvaarder die door de mand valt is nooit grappig...
Het is allemaal om te huilen.
CSS hoort in een aparte stylesheet te staan. De enige reden waar ik inline CSS voor gebruik is voor bijv. dynamische achtergronden uit een CMS o.i.d. en eventueel via Javascript dingen aanpassen (hoewel ik dat indien het mogelijk is liever doe met het toevoegen van een class).
CSS hoort in een aparte stylesheet te staan. De enige reden waar ik inline CSS voor gebruik is voor bijv. dynamische achtergronden uit een CMS o.i.d. en eventueel via Javascript dingen aanpassen (hoewel ik dat indien het mogelijk is liever doe met het toevoegen van een class).
Nee.
Verklaar u nader.
Edit: je hebt je bericht al ge-edit met verklaring.
Edit: je hebt je bericht al ge-edit met verklaring.
Een ballonvaarder die door de mand valt is nooit grappig...
Vraagje, ik snap het niet meer.
ben sinds een kleine maand bezig met wat html5, css. Alleen ik snap niet waarom het volgende gebeurd: (getest in safari en chrome)
Het 'vlaggetje' moet gecentreerd op die grijze balk bovenaan.
Die 2 knoppen moeten gewoon netjes worden uitgelijnd op die grijze balk:
HTML:
CSS:
Wie snapt hem
?
(Sorry voor de rommelige code. en wie ziet van welke Mac App deze layout komt?)
[ Bericht 0% gewijzigd door Tazar_Yoot op 11-06-2011 01:13:40 ]
ben sinds een kleine maand bezig met wat html5, css. Alleen ik snap niet waarom het volgende gebeurd: (getest in safari en chrome)
Het 'vlaggetje' moet gecentreerd op die grijze balk bovenaan.
Die 2 knoppen moeten gewoon netjes worden uitgelijnd op die grijze balk:
HTML:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Area 007</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="navigation"> <img class="banner" src="../../../../../Desktop/flag.png" width="60" height="80" alt="banner"> <nav> <ul> <li><img src="img/bttn/spacer.gif"> <li class="home"><a href="http://google.com"><img src="img/bttn/portfolio.jpg" width="150" height="50" alt="portfolio"></a> <li><img src="img/bttn/spacer.gif"> <li class="portfolio"><a href="http://google.com"><img src="img/bttn/about.jpg" width="150" height="50" alt="about"></a> <li><img src="img/bttn/spacer.gif"> </ul> </nav> </div> <div id="content"> <header> <h1> Header Tekst </h1> </header> <section id="portfolio"> <article> <h2> Article one. </h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium ipsum vitae tellus sollicitudin cursus. Proin ac odio nec quam auctor placerat vel et risus. Vestibulum quis sem vel neque venenatis tincidunt malesuada sed leo. Etiam quis eros vel orci euismod fermentum. Donec eu dignissim est. </article> </section> </div> </div> </nav> </body> </html> |
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 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 | @charset "UTF-8"; /* CSS Document */ body{ background-image: url(img/bg.gif); margin:auto; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; } #container{ width:800px; height:500px; background-color:#FFFFFF; margin-left:auto; margin-right:auto; margin-top:60px; -moz-box-shadow: 0 0 100px #888; -webkit-box-shadow: 0 0 100px#888; box-shadow: 0 0 100px #888; } #navigation{ padding-top:150px; float:left; width:150px; background-color:#999999; background-image:url(img/navbg.png); background-repeat:repeat-y; height:350px; -webkit-box-shadow: inset -5px -0px 5px #000000; -moz-box-shadow: inset -5px -0px 5px #000000; box-shadow: inset -5px -0px 5px #000000; } section { padding:30px; } #content{ float:left; width:650px; } header { background-color:#FFFFFF; padding:10px 0px 0px 30px; } nav{ padding:0px; margin:0px; float:left; } a { color:#7f7f7f; text-decoration:none; } a:hover { color:#494949; text-decoration:none; } ul { list-style-type:none; float:left; } li { } .banner{ padding:10px 5px 200px 50x; } |
Wie snapt hem
?(Sorry voor de rommelige code. en wie ziet van welke Mac App deze layout komt
?)[ Bericht 0% gewijzigd door Tazar_Yoot op 11-06-2011 01:13:40 ]
Probeer het vlaggetje in een div te zetten ipv een img src tag. Die houden zich niet altijd aan de regels. Die div margin 0 auto geven.
When all else fails, you always have delusion.
nicequote:
Het n8n, het is uiteindelijk gelukt met m'n css.
jammer dat dit niet kan
| 1 2 3 4 5 | body header:hover { body { color: red; } } |
“Specialization is for insects”.—Robert Heinlein
Met een tool als LESS kun je dat soort CSS wel schrijven. Ik heb het een tijdje op kantoor gebruikt, maar ben er toch van terug gekomen. Ja, het maakt de code die je schrijft wat compacter enzo, maar toch liep ik iedere keer tegen problemen aan met bijv. CSS3-properties en dingen die niet juist werden gemerged/geminified.
Nee.
is dat javascript? ik bedoel dat je effect uitoefent op een bovenliggend element door een binnengesloten element te gebruikenquote:
Met een tool als LESS kun je dat soort CSS wel schrijven. Ik heb het een tijdje op kantoor gebruikt, maar ben er toch van terug gekomen. Ja, het maakt de code die je schrijft wat compacter enzo, maar toch liep ik iedere keer tegen problemen aan met bijv. CSS3-properties en dingen die niet juist werden gemerged/geminified.
“Specialization is for insects”.—Robert Heinlein
Waarom zou ik dat doenquote:
[..]
nice
jammer dat dit niet kan
[ code verwijderd ]
Of was het het 2e onderwerp in je post afzonderlijk van de nice gericht naar mij?
When all else fails, you always have delusion.
De nieuwe versie van LESS is wel Javascript-based ja, maar een oudere versie (die ik gebruikte) maakt gewoon op je systeem van een .less-file een .css-file.
werd dus
| 1 2 3 4 5 6 | body { color:red; div { color:blue; } } |
werd dus
| 1 2 | body { color:red; } body div { color:blue; } |
Nee.
Oh nee wacht, ik zie nu pas wat je wilt bereiken. Dat kan inderdaad niet, en daar heb je inderdaad Javascript voor nodig.
Nee.
Ik heb hem nu in een losse div staan. Ik krijg het alleen nog niet voor elkaar om hem helemaal bovenaan te krijgen in die navigation div.quote:
Probeer het vlaggetje in een div te zetten ipv een img src tag. Die houden zich niet altijd aan de regels. Die div margin 0 auto geven.
[ afbeelding ]
Is er een manier om een fix te zetten in Google Chrome voor een css probleem? Als je background: 100%; doet dan scrollt Chrome erg langzaam. 
http://1586563.huweb.nl/ hier bij body{
De hele site is gedurende het ontwikkelen naar de klote gegaan in verschillende browsers. We hebben besloten om het in Chrome te presenteren maar dat scrollen doet dus erg irritant.
http://1586563.huweb.nl/ hier bij body{
De hele site is gedurende het ontwikkelen naar de klote gegaan in verschillende browsers. We hebben besloten om het in Chrome te presenteren maar dat scrollen doet dus erg irritant.
When all else fails, you always have delusion.
Ik mis sowieso de "This website is best viewed with Google Chrome on a 1200x1024 or larger screen resolution" disclaimer op die website.
Geef #flag maar een negatieve margin-top, dan werkt het. Hoewel ik dit typisch een voorbeeld vind van iets wat ik absoluut zou positioneren.quote:
[..]
Hij stond nog nergens online
Nu wel.
klik
Nee.
Aangezien ik het liever gelijk goed wil doen dan, hoe positioneer ik hem absoluutquote:
[..]
Geef #flag maar een negatieve margin-top, dan werkt het. Hoewel ik dit typisch een voorbeeld vind van iets wat ik absoluut zou positioneren.
?edit: met margin-top:-150px; is het gelukt. alleen ben nu benieuwd naar hoe ik hem absoluut zou posioneren (link updated dus).
Koop maar een groot schermquote:
Ik mis sowieso de "This website is best viewed with Google Chrome on a 1200x1024 or larger screen resolution" disclaimer op die website.
When all else fails, you always have delusion.
Ahh, een nieuw probleem. De shadow functie in css werkt dus niet op afbeeldingen. Nu kan ik die shadow handmatig toevoegen in photoshop. Of kan ik het ook op een of andere manier zo doen dat hij de shadow wel op de buttons werkt?
linkje
linkje
shadows op een div (of een div eronder), en niet op het plaatje zelf?
When all else fails, you always have delusion.
Hoe gooi ik er een div op? Ik ben nog niet zo heel ver kwa kennis van html/css ehquote:
shadows op een div (of een div eronder), en niet op het plaatje zelf?
Worked out pretty neat so far right?quote:
Ik weet wel het een en ander, maar dingen als div's over elkaar? shoot me.
Als ik het zou weten zou ik het niet vragen eh
?so, can you help me?
Ok, ik zal stoppen trots zijn dat ik iets heb kunnen leren met een shitload aan tutorials en andere websites. Zou jij dan kunnen stoppen met m'n code kunnen afkraken en of feedback geven met verbeteringen, of gewoon niks? Dat werkt een stuk makkelijker.quote:
Al je content in een <nav> zou ik niet 'pretty neat' noemen.
[ Bericht 0% gewijzigd door Tazar_Yoot op 13-06-2011 15:07:47 ]
Bij mij heeft de volgende fix gewerkt (#div en color:red is even ter illustratie):quote:
Is er een manier om een fix te zetten in Google Chrome voor een css probleem? Als je background: 100%; doet dan scrollt Chrome erg langzaam.
http://1586563.huweb.nl/ hier bij body{
De hele site is gedurende het ontwikkelen naar de klote gegaan in verschillende browsers. We hebben besloten om het in Chrome te presenteren maar dat scrollen doet dus erg irritant.
| 1 2 3 4 | @media screen and (-webkit-min-device-pixel-ratio:0) { #div { color:red; } } |
Ehm?quote:
[..]
Bij mij heeft de volgende fix gewerkt (#div en color:red is even ter illustratie):
[ code verwijderd ]
Hoe moet ik dit hierin doen:| 1 2 3 4 5 6 7 8 9 10 11 | body { background-image: url('img/bgtest2.jpg'); background-size: 100%; background-repeat:no-repeat; background-position:center; height: inherit; font-family: arial; font-size: 13px; color: #242424; background-attachment: fixed; } |
When all else fails, you always have delusion.
Zo dus:quote:
[..]
Ehm?
[ code verwijderd ]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | @media screen and (-webkit-min-device-pixel-ratio:0) { body { background-image: url('img/bgtest2.jpg'); background-size: 100%; background-repeat:no-repeat; background-position:center; height: inherit; font-family: arial; font-size: 13px; color: #242424; background-attachment: fixed; } } |
Al zou ik alleen de elementen erin zetten die je voor Chrome gefixed wil hebben. Font-family is bijvoorbeeld (neem ik aan) het zelfde voor alle browsers, en hoeft er hier dus niet in.
Dat had ik al geprobeerd en het werkte niet. Ook met dingen los zetten maar erg verfijnd deed ik het niet, was alleen heel snel dingen aan het testen. Ik weet niet of je achter pixel-ratio:0 de ; vergat maar met en zonder was er geen verschil.
Een paar posts terug had n8n het erover dat je niet css binnen css kon doen:
Een paar posts terug had n8n het erover dat je niet css binnen css kon doen:
Ik zie dan geen reden dat hij deze code dan wel zou kunnen lezen.quote:
[..]
nice
jammer dat dit niet kan
[ code verwijderd ]
When all else fails, you always have delusion.
quote:
Dat had ik al geprobeerd en het werkte niet. Ook met dingen los zetten maar erg verfijnd deed ik het niet, was alleen heel snel dingen aan het testen. Ik weet niet of je achter pixel-ratio:0 de ; vergat maar met en zonder was er geen verschil.
Een paar posts terug had n8n het erover dat je niet css binnen css kon doen:
[..]
Ik zie dan geen reden dat hij deze code dan wel zou kunnen lezen.
“Specialization is for insects”.—Robert Heinlein
ehm wat 'css binnen css'?! Is dat nieuw?quote:
Dat had ik al geprobeerd en het werkte niet. Ook met dingen los zetten maar erg verfijnd deed ik het niet, was alleen heel snel dingen aan het testen. Ik weet niet of je achter pixel-ratio:0 de ; vergat maar met en zonder was er geen verschil.
Een paar posts terug had n8n het erover dat je niet css binnen css kon doen:
[..]
Ik zie dan geen reden dat hij deze code dan wel zou kunnen lezen.
ik gebruik zelf de hack om een invoerveld op de goede plek te positioneren, en het werkt prima!
Ik kwam net dit voorbeeld tegen:
http://trailers.apple.com(...)bestandthebrightest/
Onder het plaatje bij de synopsis, staat onderin het linkje "more" en als je erop klikt staat er "less"
hoe moeilijk is dit om in te bouwen?
http://trailers.apple.com(...)bestandthebrightest/
Onder het plaatje bij de synopsis, staat onderin het linkje "more" en als je erop klikt staat er "less"
hoe moeilijk is dit om in te bouwen?
Kan je doen met javascript, jQuery Expander lijkt me wat je zoekt.quote:
Ik kwam net dit voorbeeld tegen:
http://trailers.apple.com(...)bestandthebrightest/
Onder het plaatje bij de synopsis, staat onderin het linkje "more" en als je erop klikt staat er "less"
hoe moeilijk is dit om in te bouwen?
Met javascript is het een eitjequote:
Ik kwam net dit voorbeeld tegen:
http://trailers.apple.com(...)bestandthebrightest/
Onder het plaatje bij de synopsis, staat onderin het linkje "more" en als je erop klikt staat er "less"
hoe moeilijk is dit om in te bouwen?
js
css
correct me if i'm wrong js is nieuw voor me.
| 1 2 3 4 5 6 7 8 9 | function expander(id) { var e = document.getElementById(id); if (e.className == 'contracted') e.className = 'expanded'; else (e.className == 'expanded') e.className = 'contracted'; } |
css
| 1 2 3 | .hidden, p#moreoreless.contracted .less, p#moreoreless.expanded .more { display: none; } |
| 1 | <p id="moreorless" onclick="expander('moreorless');" class="contracted"><span class="more"><span class="hidden"> or </span><span class="less"></p> |
correct me if i'm wrong js is nieuw voor me.
“Specialization is for insects”.—Robert Heinlein
Oeh, ziet er simpel uit inderdaad. even inbouwen zo. is wel sjiek !
weer iets anders,
waarom werkt de hover van portfolio niet. code heb ik al 6x overgelezen:
En hoe kan ik nu nog een 'active' class inbouwen.
!weer iets anders,
waarom werkt de hover van portfolio niet. code heb ik al 6x overgelezen:
| 1 2 3 4 5 6 7 8 | <nav> <ul class="menu"> <li class="home"><a href="#"> </a></li> <li class="portfolio"><a href="#"> </a></li> <li class="info"><a href="#"> </a></li> <li class="contact"><a href="#"> </a></li> </ul> </nav> |
| 1 2 3 4 5 6 7 8 9 | .home{background-image:url(images/home-a.jpg);} .portfolio{background-image:url(images/portfolio-a.jpg);} .info{background-image:url(images/info-a.jpg) ; } .contact{background-image:url(images/contact-a.jpg); } .home a:hover{background-image:url(images/home-b.jpg) ; } .portfolio a:hover{background-image:url(images/home.b.jpg) ; } .info a:hover{background-image:url(images/info-b.jpg) ; } .contact a:hover{background-image:url(images/contact-b.jpg) ; } |
En hoe kan ik nu nog een 'active' class inbouwen.
1) Eerst zet je de achtergrondafbeelding op de li maar bij :hover op de a-tag.quote:
Oeh, ziet er simpel uit inderdaad. even inbouwen zo. is wel sjiek
weer iets anders,
waarom werkt de hover van portfolio niet. code heb ik al 6x overgelezen:
[ code verwijderd ]
[ code verwijderd ]
En hoe kan ik nu nog een 'active' class inbouwen.
2) een active class maak je door naast de naam van class een extra classname toe te voegen.
html: <li class="portfolio active">
css: li.portfolio.active {
wat je ook kan doen is de naam van de actieve pagina als class bij de ul opgeven.
<ul class="portfolio">
<li class="home"></li>
<li class="portfolio"></li>
</ul>
css: ul.portfolio li.portfolio {
met de laatste manier kan je ook invloed uitoefenen op alle andere li's
nog een paar tips:
- maak sprites van je afbeeldingen, dit kost minder bandbreedte maar belangrijker is dat de manier die je nu gebruikt een optische vertraging kan veroorzaken bij een :hover. De afbeelding moet nog laden en je ziet heel even niks.
- zet de naam van de link met tekst in de link en gebruik text-indent: -9999px;. Dit is beter voor de toegankelijkheid en indexatie van je website.
- kleintje: bij een afbeelding als achtergrond is "-image" overbodig.
“Specialization is for insects”.—Robert Heinlein
Woah, het probleem met de hover img is verholpen, hij doet het nu. En het idee van de sprite drong pas echt tot me door toen ik hem online zetten. Offline testing heb je er geen last van. ik ga er eens induiken. de volgende fase van mijn html avontuurquote:
[..]
1) Eerst zet je de achtergrondafbeelding op de li maar bij :hover op de a-tag.
2) een active class maak je door naast de naam van class een extra classname toe te voegen.
html: <li class="portfolio active">
css: li.portfolio.active {
wat je ook kan doen is de naam van de actieve pagina als class bij de ul opgeven.
<ul class="portfolio">
<li class="home"></li>
<li class="portfolio"></li>
</ul>
css: ul.portfolio li.portfolio {
met de laatste manier kan je ook invloed uitoefenen op alle andere li's
nog een paar tips:
- maak sprites van je afbeeldingen, dit kost minder bandbreedte maar belangrijker is dat de manier die je nu gebruikt een optische vertraging kan veroorzaken bij een :hover. De afbeelding moet nog laden en je ziet heel even niks.
- zet de naam van de link met tekst in de link en gebruik text-indent: -9999px;. Dit is beter voor de toegankelijkheid en indexatie van je website.
- kleintje: bij een afbeelding als achtergrond is "-image" overbodig.
.Verder je andere tips opgevolgd (die text indent ga ik er zometeen instoppen)
Al heb ik het nog niet echt kunnen werkend krijgen met die active class: KLIK
Ik heb het idee dat ik veel nutteloze code erin heb gezet nu.
Ben er al uit, kwam door de gebruikte spaties. css en spaties gaan niet goed samen blijkbaar. vervangen door _'s
Class is gewoon een spatiegesepareerde lijst van classnames. class="portfolio active" is dus in css te selecteren met zowel .portfolio als .active. Of .portfolio.active als je alleen objecten met beide classnames wilt selecteren.quote:
Ben er al uit, kwam door de gebruikte spaties. css en spaties gaan niet goed samen blijkbaar. vervangen door _'s
Weet iemand hier hoe ik een afbeelding op een pagina kan zetten die de hele achtergrond bezet en meescaled met grotere resoluties? Repeat wil dus niet, en als ik een hele grote afbeelding als achtergrond doe dan laat hij maar een klein stuk van die afbeelding zien op een kleine resolutie.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Ding absoluut positioneren. Maar dan krijg je wel problemen met de ratio.
In je HTML:
In je CSS:
Of met media-queries voor de verschillende resoluties een andere afbeelding gebruiken. Er zullen vast ook nog wel andere manieren zijn.
In je HTML:
| 1 | <img id="bg" src="lalala.jpg" alt="" /> |
In je CSS:
| 1 2 3 4 5 6 | #bg { left: 0; position: absolute; top: 0; width:100%; } |
Of met media-queries voor de verschillende resoluties een andere afbeelding gebruiken. Er zullen vast ook nog wel andere manieren zijn.
Nee.
Hmm. Nog niet echt goed nu. Ik heb een afbeelding van 1920x1280. Ik wil dat als ik de website bekijk op een resolutie van 1024x768 of 1336x768 dat hij hem dan ook in zijn geheel laat zien. Of tenminste grotendeels.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Laat die achtergrond eens zien dan. Ik denk niet dat er een oplossing is die gaat doen wat jij wilt. CSS3 heeft een background-size property waar je naar zou kunnen kijken, maar ik durf zo 1-2-3 eigenlijk niet te zeggen of dat goed werkt. Ik gok dat dat nog wel problemen gaat opleveren in bijv. IE8.
Nee.
Via PM een url gekregen, maar het voorbeeld wat ik geef van absoluut positioneren/width:100% werkt bij mij gewoon prima hoor met die afbeelding. Eventueel aangevuld met bottom:0 - hoewel je dan dus wel je aspect ratio verliest (hoewel ik me afvraag of dat a) zal opvallen b) hoeveel mensen een browservenster gebruiken dat heel hoog is, maar wel heel smal).
Nee.
Ik kan het beste een gebruiker laten switchen tussen 2 verschillende CSS
Een else if in de head of werkt dat niet?
Betere/Andere manieren?
Een else if in de head of werkt dat niet?
Betere/Andere manieren?
Ik zou serverside regelen welke css bestanden er worden geladen. Dat kan bijvoorbeeld met een cookie of een sessie. Afhankelijk van wat er wijzigt, is een volledige refresh misschien nodig als de bezoeker een andere css wil.quote:
Ik kan het beste een gebruiker laten switchen tussen 2 verschillende CSS
Een else if in de head of werkt dat niet?
Betere/Andere manieren?
ik snap m niet helemaal, misschien heb ik het ook niet helemaal goed uitgelegt.quote:
[..]
Ik zou serverside regelen welke css bestanden er worden geladen. Dat kan bijvoorbeeld met een cookie of een sessie. Afhankelijk van wat er wijzigt, is een volledige refresh misschien nodig als de bezoeker een andere css wil.
Ik wil dat de gebruiker kan switchen tussen 2 lettertypes eigenlijk, meer als geintje eigenlijk
1 is een strak lettertype
ander is een vrolijk lettertype
ik doe dat met @font-face (is wel traag trouwens)
je kunt toch gewoon een onclick-event maken die bijv. de body-style verandert?
Lijkt me meer een javascript vraag dit.
Lijkt me meer een javascript vraag dit.
als dat een goede oplossing is dan ga ik daar eens op zoekenquote:
je kunt toch gewoon een onclick-event maken die bijv. de body-style verandert?
Lijkt me meer een javascript vraag dit.
dus waarschijnlijk tot later in het js forum
Voor een lap tekst, moet ik een Meer/minder-knop hebben. Dat je een klein stuk tekst hebt dus, je klikt op Meer en dat het dan uitschuift (Dus geen nieuwe pagina)(Waarom geen nieuwe pagina, omdat de tekst waar het om gaat al in een aparte pagina staat), en het mag ook weer inschuiven.
Is dit mogelijk met alleen CSS? Of moet je hiervoor gelijk naar de javascript grijpen?
Thanks
Is dit mogelijk met alleen CSS? Of moet je hiervoor gelijk naar de javascript grijpen?
Thanks
| Forum Opties | |
|---|---|
| Forumhop: | |
| Hop naar: | |