[CSS] voor dummies - Deel 4 | Digital Corner (DIG)

zaterdag 22 april 2006 @ 23:03:48 #126

Qunix

Ik heb in css dit:

1
2
3
4
5

.container2 {
    color: #FFFFFF;
    background-color: #000000;
    border-right: 1px solid #660000;
}

En in de index een div met de class:

1
2
3

En toch laat hij geen border zien... Kan iemand me helpen?

zaterdag 22 april 2006 @ 23:25:20 #127

SuperRembo

Sinds 1998

Daar is niets mis mee. De fout moet ergens anders zitten.

zaterdag 22 april 2006 @ 23:27:40 #128

SuperRembo

Sinds 1998

quote:
Op zaterdag 22 april 2006 20:20 schreef mrbombastic het volgende:
Hmm dat bedoelde ik niet. Ik zie net dat mn post ook niet echt duidelijk was.
Het probleem is dat de border overal 5px is, maar tussen de rechthoeken is de border 10px.

Dat was idd niet duidelijk.
Misschien helpt border-collapse: collapse. Ik weet niet of dat toegestaan is op li's.

zondag 23 april 2006 @ 03:09:12 #129

Misan

iemand enig idee voor een mooi beginnersboek css?

zondag 23 april 2006 @ 03:22:04 #130

Leshy

Held met sokken.

quote:
Op zaterdag 22 april 2006 20:20 schreef mrbombastic het volgende:
Hmm dat bedoelde ik niet. Ik zie net dat mn post ook niet echt duidelijk was.
Het probleem is dat de border overal 5px is, maar tussen de rechthoeken is de border 10px.

Dit komt omdat de li's aan alle kanten een border hebben van 5px. Als je er dus twee tegen elkaar zet, krijg je er een border van 5px + 5px tussen. Je kunt eventueel het volgende toevoegen:

1
2
3
4

ul li {
[...]
margin-bottom: -5px;
}

Dit zorgt ervoor dat de li's steeds 5 pixels over de bovenstaande heen worden gerenderd, wat het probleem met de dubbele borders oplost. Enigszins cru, maar effectief.

quote:
Op zondag 23 april 2006 03:09 schreef Misanthropist het volgende:
iemand enig idee voor een mooi beginnersboek css?

Persoonlijk vind ik de "[...] voor dummies" serie vaak erg goed, ongetwijfeld is er ook eentje voor CSS.

zondag 23 april 2006 @ 10:23:26 #131

wonko

Fap

quote:
Op zondag 23 april 2006 03:09 schreef Misanthropist het volgende:
iemand enig idee voor een mooi beginnersboek css?

Kijk eens naar Jeffrey Zeldman...goed boek...ook als e-book te bestellen bij de lokale internet verdeler.

Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.

zondag 23 april 2006 @ 12:21:48 #132

CrazyByte

quote:
Op zondag 23 april 2006 03:22 schreef Leshy het volgende:

[..]

Dit komt omdat de li's aan alle kanten een border hebben van 5px. Als je er dus twee tegen elkaar zet, krijg je er een border van 5px + 5px tussen. Je kunt eventueel het volgende toevoegen:
[ code verwijderd ]

Dit zorgt ervoor dat de li's steeds 5 pixels over de bovenstaande heen worden gerenderd, wat het probleem met de dubbele borders oplost. Enigszins cru, maar effectief.
[..]

Dat is wel een heel lelijke oplossing.
Makkelijkste is om de UL zelf een bottom-border te geven en de LI-elementen allemaal niet.

Zoiets als dit dus:

1
2
3
4
5
6
7
8
9

UL {
border-bottom: 1px solid #000;
}

UL LI {
border-style: solid;
border-color: #000;
border-width: 1px 1px 0px 1px;
}

[ Bericht 8% gewijzigd door CrazyByte op 23-04-2006 12:55:26 ]

zondag 23 april 2006 @ 12:50:21 #133

SuperRembo

Sinds 1998

Dan moet je er wel voor zorgen dat de ul en li even breed zijn.
Jammer dat IE geen :first-child ondersteunt, dat zou de mooiste oplossing zijn.
_{bottom-border moet border-bottom zijn, en er ontbreekt een ;}

zondag 23 april 2006 @ 12:59:15 #134

CrazyByte

quote:
Op zondag 23 april 2006 12:50 schreef SuperRembo het volgende:
Dan moet je er wel voor zorgen dat de ul en li even breed zijn.
Jammer dat IE geen :first-child ondersteunt, dat zou de mooiste oplossing zijn.
_{bottom-border moet border-bottom zijn, en er ontbreekt een ;}

Heb het aangepast

De LI zijn allemaal even breed (gezien de css), dus alleen een kwestie van die breedte ook even opgeven bij de UL.

zondag 23 april 2006 @ 13:17:22 #135

SuperRembo

Sinds 1998

Dan zou ik de breedte alleen op de ul zetten. Voor Firefox moet je de padding op de ul op 0 zetten.

zondag 23 april 2006 @ 15:31:39 #136

Leshy

Held met sokken.

quote:
Op zondag 23 april 2006 12:21 schreef CrazyByte het volgende:
Dat is wel een heel lelijke oplossing.
Makkelijkste is om de UL zelf een bottom-border te geven en de LI-elementen allemaal niet.

Je hebt groot gelijk

Zo zie je maar kinderen, geen CSS om vijf uur 's nachts na het drinken

zondag 23 april 2006 @ 23:36:15 #137

Nevermind

(-_-)

Wat doe ik hier fout waardoor het er niet uit ziet in IE? Gebruik opera of firefox om te zien hoe het er uit behoort te zien.

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

maandag 24 april 2006 @ 00:13:59 #138

SuperRembo

Sinds 1998

Ik zie geen verschillen (FF1.5 / IE6, Win2k)

maandag 24 april 2006 @ 02:41:51 #139

Nevermind

(-_-)

Heu? Bij mij ziet het er zo uit:

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

maandag 24 april 2006 @ 02:42:33 #140

Castor

Obey the rules, miss the fun

quote:
Op zondag 23 april 2006 23:36 schreef Nevermind het volgende:
Wat doe ik hier fout waardoor het er niet uit ziet in IE? Gebruik opera of firefox om te zien hoe het er uit behoort te zien.

IE6 heeft problemen met het correct renderen van transparante png's. Lees bijvoorbeeld dit artikel of zoek naar andere artikelen .

Castor's Photostream op Flickr

maandag 24 april 2006 @ 02:47:11 #141

Nevermind

(-_-)

quote:
Op maandag 24 april 2006 02:42 schreef Castor het volgende:

[..]

IE6 heeft problemen met het correct renderen van transparante png's. Lees bijvoorbeeld dit artikel of zoek naar andere artikelen .

Dat heeft met alpha transparancy te maken. Met gifs zie ik geen verschil. Maar dat SR het niet ziet snap ik niet. Zie jij wel hetzelfde als ik in IE6?

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

maandag 24 april 2006 @ 02:50:03 #142

Castor

Obey the rules, miss the fun

quote:
Op maandag 24 april 2006 02:47 schreef Nevermind het volgende:

[..]

Dat heeft met alpha transparancy te maken. Met gifs zie ik geen verschil. Maar dat SR het niet ziet snap ik niet. Zie jij wel hetzelfde als ik in IE6?

Verdomd, je hebt gelijk

Ik zie idd hetzelfde als jij in IE6. Ik gebruik WinXP Home Edition (SP2). Ik ga nog eens verder kijken wat er aan de hand kan zijn.

Castor's Photostream op Flickr

maandag 24 april 2006 @ 02:52:02 #143

Nevermind

(-_-)

quote:
Op maandag 24 april 2006 02:50 schreef Castor het volgende:

[..]

Verdomd, je hebt gelijk

Ik zie idd hetzelfde als jij in IE6. Ik gebruik WinXP Home Edition (SP2). Ik ga nog eens verder kijken wat er aan de hand kan zijn.

Ik gebruik ook XP. Hebben we in ieder geval een verschil met SR. Het zal wel iets met marges te maken hebben, maar die staan allemaal op 0. Als ik dat ga veranderen werkt het uiteraard niet meer in andere browsers

Vaag probleem.

-edit- Met Win2k-IE6 heb ik exact dezelfde fout

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

maandag 24 april 2006 @ 03:40:10 #144

Castor

Obey the rules, miss the fun

quote:
Op maandag 24 april 2006 02:52 schreef Nevermind het volgende:

[..]

Ik gebruik ook XP. Hebben we in ieder geval een verschil met SR. Het zal wel iets met marges te maken hebben, maar die staan allemaal op 0. Als ik dat ga veranderen werkt het uiteraard niet meer in andere browsers Vaag probleem.

-edit- Met Win2k-IE6 heb ik exact dezelfde fout

De volgende CSS op .star-rating helpt al een beetje:

1	overflow:hidden;

Ik ben nu verder aan het kijken naar de background-position van .star-rating li.current-rating.

Castor's Photostream op Flickr

maandag 24 april 2006 @ 03:46:35 #145

Nevermind

(-_-)

quote:
Op maandag 24 april 2006 03:40 schreef Castor het volgende:

[..]

De volgende CSS op .star-rating helpt al een beetje:
[ code verwijderd ]

Ik ben nu verder aan het kijken naar de background-position van .star-rating li.current-rating.

Gaaf dat je mee-nachtbraakt

Ik teste je oplossing even, en het zag er inderdaad anders uit, maar nog niet plausibel. Ik kom net een minuut geleden achter de oplossing! Ik heb de 'top-center-bottom'-waarden vervangen door de waarden in pixels, en nu werkt het wel

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

maandag 24 april 2006 @ 03:57:09 #146

Castor

Obey the rules, miss the fun

quote:
Op maandag 24 april 2006 03:46 schreef Nevermind het volgende:

[..]

Gaaf dat je mee-nachtbraakt Ik teste je oplossing even, en het zag er inderdaad anders uit, maar nog niet plausibel. Ik kom net een minuut geleden achter de oplossing! Ik heb de 'top-center-bottom'-waarden vervangen door de waarden in pixels, en nu werkt het wel

Och, voor mij is nog niet zo laat (zit op Aruba, 6 uur eerder hier). Goed dat je de oplossing hebt gevonden! Had idd zo'n vermoeden dat het daaraan lag

>edit< Heb je al in FF gekeken? Daar is het niet helemaal goed meer. Misschien kun je beter je oplossing alleen voor IE toepassen...

>edit2< IE is ook niet helemaal goed, hij kapt de image af aan de onderkant...

Castor's Photostream op Flickr

maandag 24 april 2006 @ 04:02:58 #147

Castor

Obey the rules, miss the fun

Vraag me niet waarom, maar als je de orginele code pakt en daar de volgende regels aan toe voegt, dan zou hij het moeten doen in IE en FF:

1
2
3
4
5

* html .star-rating li a:hover{
background: url(images/stars.gif) repeat-x 0% 114%;}

* html .star-rating li.current-rating { background: url(images/stars.gif)
repeat-x 0% 56%;}

Castor's Photostream op Flickr

maandag 24 april 2006 @ 04:09:19 #148

Nevermind

(-_-)

quote:
Op maandag 24 april 2006 04:02 schreef Castor het volgende:
Vraag me niet waarom, maar als je de orginele code pakt en daar de volgende regels aan toe voegt, dan zou hij het moeten doen in IE en FF:
[ code verwijderd ]

Ik krijg daarbij weer een stukje van de gele sterren onderaan het plaatje

Ik ga toch maar even slapen, kan ik morgen wat helderder denken. Bedankt voor al je hulp!

-edit- Hoe werkt deze bij je?

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

maandag 24 april 2006 @ 04:21:20 #149

Castor

Obey the rules, miss the fun

quote:
Op maandag 24 april 2006 04:09 schreef Nevermind het volgende:

[..]

Ik krijg daarbij weer een stukje van de gele sterren onderaan het plaatje
Ik ga toch maar even slapen, kan ik morgen wat helderder denken. Bedankt voor al je hulp!

-edit- Hoe werkt deze bij je?

Oeps, vergat te zeggen "orginele code" + "mijn *html oplossing" + "overflow:hidden op .star-rating".

Maar volgens mij werkt je laatste oplossing (rating3.html) goed in zowel FF als IE!

Castor's Photostream op Flickr

dinsdag 25 april 2006 @ 14:46:14 #150

super-muffin

Wie kan mij vertellen waarom de #content niet door loopt in FF als de tekst te lang word?
In IE is het wel goed.

http://www.danielpunt.nl/temp.htm

Steam - SC2

Forum Opties
Forumhop:
Hop naar:	(afkorting, bv 'KLB')

[CSS] voor dummies - Deel 4

» digital corner

» digital corner