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

donderdag 13 april 2006 @ 16:14:02 #101

RM-rf

1/998001

quote:
Op donderdag 13 april 2006 14:03 schreef MadGuy het volgende:

Waarom lopen de divjes bovenaan naar rechts zo afwisselend door? Ik wil juist dat deze vergroten en verkleinen naarmate de resolutie die gebruikt wordt door de gebruiker groter of kleiner is. Is hier een oplossing voor?

je DIV met id '#menuelement2' heeft een absolute positie van 'left: 779px;' en de breedte is 'width:100%'

Dat betekent dat de breedte van dat element de viewbox wordt en dat is in dit geval het venster zelf, je krijgt dus altijd een lelijke verticale scrollbar en dat element steekt rechts uit...

het probleem is eigenlijk al je code opzet, dat kruent onder een vorm van DIV-geilheid, oftewel teveel nutteloze div-jes, die vervolgens allemaal een harde absolute positiering krijgen ...

wil je een goede opzet hebben, moet je beginnen met een gestroomlijnde, nette code opzet, gebruik zo min mogelijk verschillende tags en zeker het liefste niet voor 'lege' elementen ...

als voorbeeld hier een andere opzet, vooral van de HTMLcode van de header, waarbij de html-code minimaal gehouden is en puur met CSS bepaalde structuren gezet (niet zo'n typische 'slicing' opzet dus maar structruele HTML)
http://judi.kw.nl/uploads/fok/temp/

"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25

donderdag 13 april 2006 @ 16:23:10 #102

MadGuy

Fever Ray

Bedankt voor de site, Berkery. Die ga ik zeker eens uitpluizen.

@ RM-f. Bedankt zeg! Ik heb de pagina opgeslagen en ik ga het vanavond even nader bekijken. Het ziet er wel veel logischer uit.

Ik ben nog slechts een CSS/ HTML n00bie en ik stel enorme prijs op dit soort hulp.

last.fm
marksluymers.nl

woensdag 19 april 2006 @ 12:14:05 #103

ExCibular

Ik ben bezig met een site en heb een probleem. De layout is verschillend in IE 6/5.5 tov IE 7, FF Opera etc.

Dit is de 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

[<html>
<head>
<title>Welkom op mijn website!</title>
<style type="text/css">

</style>
</head>
<body>
<div id="banner"><div id="Layer2"></div>
<div id="Layer3"><h1 class="title">Mijn Domein</h1>
<img class="logo" src="images/logo.jpg" alt="logo"/></div>
<div id="menu_container"></div></div>
</body>
</html>

Hoe kan ik dit soort verschillen het best wegwerken?

woensdag 19 april 2006 @ 12:40:31 #104

RM-rf

1/998001

Wat is er verschillend? moeten we dat raden?

als het een probleem met het boxmodel is, mozilla/Opera en IE6 bij valide pagina's met correct DOCTYPE een ander boxmodel inpassen als msie5 en 5.5, en msie6 in quirky mode...
het kan soms helpen om voor mozilla de CSS box-sizing:border-box tioe te passen, mozilla volgt dan eigenlijk de foute rendering van explorer....

een andere optie zijn de ettelijke box-model hacks of workarounds...

"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25

woensdag 19 april 2006 @ 14:51:47 #105

ExCibular

quote:
Op woensdag 19 april 2006 12:40 schreef RM-rf het volgende:
Wat is er verschillend? moeten we dat raden?

als het een probleem met het boxmodel is, mozilla/Opera en IE6 bij valide pagina's met correct DOCTYPE een ander boxmodel inpassen als msie5 en 5.5, en msie6 in quirky mode...
het kan soms helpen om voor mozilla de CSS box-sizing:border-box tioe te passen, mozilla volgt dan eigenlijk de foute rendering van explorer....

een andere optie zijn de ettelijke box-model hacks of workarounds...

Er is een verschil in de grote van `layout 2` onder IE en FF. In FF is hij de de 50px hoog die hij moet zijn in IE is hij echter 2 keer zo groot.
Ik zal even zoeken op boxmodel om te kijken of dat het probleem is.

woensdag 19 april 2006 @ 17:11:19 #106

RM-rf

1/998001

die DIV#banner heeft een height van 110 px en een bottom-margin van 20px....

in explorer blijft de hoogte 110px en wordt de margin aan de onderkant daar gewoon weer bij opgeteld (border-box-model)...
terwijl volgens het officiele model de opgegeven hoogte altijd inclusief margins-paddings en border moet zijn.... oftewel de binnenruimte van de box is in mozilla/firefox/opera en msie6 in valid mode 90px (110px - 20px margin: het box-sizing-model)

Dat is idd een box-model probleem.

"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25

donderdag 20 april 2006 @ 11:05:23 #107

ExCibular

quote:
Op woensdag 19 april 2006 17:11 schreef RM-rf het volgende:
die DIV#banner heeft een height van 110 px en een bottom-margin van 20px....

in explorer blijft de hoogte 110px en wordt de margin aan de onderkant daar gewoon weer bij opgeteld (border-box-model)...
terwijl volgens het officiele model de opgegeven hoogte altijd inclusief margins-paddings en border moet zijn.... oftewel de binnenruimte van de box is in mozilla/firefox/opera en msie6 in valid mode 90px (110px - 20px margin: het box-sizing-model)

Dat is idd een box-model probleem.

Dank je wel voor je reactie.
Ik heb gisteren niet echt veel tijd gehad maar ga er vandaag aan werken. Ik laat straks wel even weten of het gelukt is.

donderdag 20 april 2006 @ 12:44:45 #108

ExCibular

Ik ben nu even aan het spelen geweest met de boxmodel theorie. Maar volgens mij ligt hier het probleem daar niet. Het probleem zit em in het logo. Om een of andere reden maakt IE extra ruimte onder het plaatje. Dit gebeurt in FF niet.

Hoe krijg ik die ruimte weg onder het logo?

Edit-------------

Ik heb deoplossing gevonden. Door het logo absolute te positioneren en de rest relative was het probleem opgelost.

[ Bericht 21% gewijzigd door ExCibular op 20-04-2006 19:52:08 ]

FOK!-Schrikkelbaas donderdag 20 april 2006 @ 21:01:15 #109

Swetsenegger

Egocentrische Narcist

Waarom werkt dit niet in FF

.naam {
position:relative;
height:100px;
overflow:visible;
}

Firefox toont de overflow wel, maar volgens mij zou de box met de overflow mee moeten groeien toch?

Als ik height door min-height vervang werkt het wel in firefox, maar niet in IE

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

donderdag 20 april 2006 @ 21:54:09 #110

Light

quote:
Op donderdag 20 april 2006 21:01 schreef Swetsenegger het volgende:
Waarom werkt dit niet in FF

.naam {
position:relative;
height:100px;
overflow:visible;
}

Firefox toont de overflow wel, maar volgens mij zou de box met de overflow mee moeten groeien toch?

Als ik height door min-height vervang werkt het wel in firefox, maar niet in IE

Ik kan uit de CSS specificatie niet halen dat de box mee zou moeten groeien.

En IE behandelt height als min-height, da's niet helemaal volgens de specs.

Hoe lijkt:

1
2
3
4
5

.naam {
        position:relative;
   height:100px;
   min-height:100px;
}

fokstok.nl

FOK!-Schrikkelbaas donderdag 20 april 2006 @ 22:22:51 #111

Swetsenegger

Egocentrische Narcist

quote:
Op donderdag 20 april 2006 21:54 schreef Light het volgende:

[..]

Ik kan uit de CSS specificatie niet halen dat de box mee zou moeten groeien.

En IE behandelt height als min-height, da's niet helemaal volgens de specs.

Hoe lijkt:
[ code verwijderd ]

Volgens handleiding html zou de box mee moeten groeien, maar dat is dus niet het geval ben ik nu ook achter.

Ik heb dus min-height nodig. Dat ondersteunt IE niet.
Dus heb ik inderdaad het zelfde geprobeerd als wat jij nu post. Maar dan maakt firefox het weer gewoon max 100px.

Kortom, ik heb een box nodig van minimaal 100px hoog, maar indien de content groter is moet hij mee groeien met de content.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

FOK!-Schrikkelbaas donderdag 20 april 2006 @ 22:24:48 #112

Swetsenegger

Egocentrische Narcist

Opgelost. Ik heb de meest smerige hack ooit toegepast denk ik.
min-height van 100px voor firefox.
en in de box float ik nu een divje van 100px height en 1 px width voor IE.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

donderdag 20 april 2006 @ 22:31:11 #113

SuperRembo

Sinds 1998

Met de underscore hack:

1 2	_height: 100px;/* IE5/6 / min-height: 100px; / other */

Ondersteunt IE7beta nou inmiddels min-height of niet?

donderdag 20 april 2006 @ 22:50:36 #114

super-muffin

Ik heb een pagina met aan elke kant een balk van 20px.

Die zet ik neer voor Safari en FF als :

1 2	position:fixed; left:0px;

en dat gaat perfect. En dit gebruik ik voor IE, de underscore hack dus.

1
2
3

_position:absolute;
_left:expression(document.body.scrollTop+document.body.clientHeight-
this.clientHeight);

maar dat werkt niet. Ik heb dan een scrollbalk horizontaal, die er niet horen te staan. En hoe meer ik naar beneden scroll, hoe meer de balken naar het midden komen.

de bovenste en onderste doen het wel goed.
Dit staat gewoon in een class die #links heet, in de pagina is het gewoon <div id="links"></div> en ze staan in de code boven de content.

Steam - SC2

donderdag 20 april 2006 @ 22:55:59 #115

SuperRembo

Sinds 1998

Een voorbeeldje zou handig zijn

FOK!-Schrikkelbaas donderdag 20 april 2006 @ 23:07:50 #116

Swetsenegger

Egocentrische Narcist

quote:
Op donderdag 20 april 2006 22:31 schreef SuperRembo het volgende:
Met de underscore hack:
[ code verwijderd ]

Ondersteunt IE7beta nou inmiddels min-height of niet?

Negeert firefox de underscore?

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

donderdag 20 april 2006 @ 23:15:08 #117

super-muffin

quote:
Op donderdag 20 april 2006 22:55 schreef SuperRembo het volgende:
Een voorbeeldje zou handig zijn

http://62.212.92.93/~danielpunt/blah/

en ja, FF negeert die underscore. Nadeel is wel dat je CSS niet meer valide is, maar jammer dan.

[ Bericht 29% gewijzigd door super-muffin op 21-04-2006 15:38:01 ]

Steam - SC2

donderdag 20 april 2006 @ 23:30:21 #118

SuperRembo

Sinds 1998

quote:
Op donderdag 20 april 2006 23:07 schreef Swetsenegger het volgende:

[..]

Negeert firefox de underscore?

IE5/6 negeert alleen de underscore en ziet "height", en die property bestaat wel.
Andere browsers negeren de property waar een underscore in zit, omdat de property "_height" niet bestaat.

donderdag 20 april 2006 @ 23:33:30 #119

SuperRembo

Sinds 1998

@super-muffin
Waarom heb je die expressions ook op left en right? Geeft wel een grappig effect trouwens

vrijdag 21 april 2006 @ 15:38:57 #120

super-muffin

Oke, ik heb het nu zo ver dat die balken links en rechts blijven staan, maar als ik scroll lopen ze niet door.

Als ik thuis ben zal ik het ff oploaden, heb hier geen internet op mn laptop.

Steam - SC2

vrijdag 21 april 2006 @ 15:41:28 #121

Roonaan

Strictly

quote:
Op donderdag 20 april 2006 22:24 schreef Swetsenegger het volgende:
Opgelost. Ik heb de meest smerige hack ooit toegepast denk ik.
min-height van 100px voor firefox.
en in de box float ik nu een divje van 100px height en 1 px width voor IE.

What about:

1
2
3

height:auto !important;
min-height:100px;
height:100px;

FOK!-Schrikkelbaas vrijdag 21 april 2006 @ 16:53:37 #122

Swetsenegger

Egocentrische Narcist

@roonaan.

Ik dacht een dusdanige consturctie geprobeerd te hebben, maar die ga ik nog even testen. Kan niet gelijk wat zeggen, want het staat al live, dus ik moet even op input wachten

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

zaterdag 22 april 2006 @ 19:55:29 #123

mrbombastic

Ik ben bezig met een lijst die ik met CSS wat wil aanpassen.
De horizontale tussenruimte is echter te groot.

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

<HTML>
<HEAD>
<TITLE>CSS</TITLE>

<STYLE type=text/css>
ul {
  list-style: none;
  margin: 0;
}
ul li {
  width: 100px;
  line-height: 40px;
  background: red;
  text-align: middle;
  vertical-align: text-bottom;
  border:5px solid black;
}

</STYLE>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

</BODY></HTML>

zaterdag 22 april 2006 @ 20:12:49 #124

super-muffin

dan zet je de line-height naar bv 20px.

Steam - SC2

zaterdag 22 april 2006 @ 20:20:50 #125

mrbombastic

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.

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

dinsdag 25 april 2006 @ 15:33:36 #151

ZeroSletje

WaSTeD

misschien is dit wel eerder geroepen maar kijk anders eens bij css zen http://www.csszengarden.com/

daar staan zoveel IE en FF hacks... Zeeer goede site

They execute an american tourist, we tactically nuke an entire city...

dinsdag 25 april 2006 @ 16:02:09 #152

super-muffin

Oh, het is al opgelost.

Ik heb bij #vol en bij #content de height: 100% weggehaalt

Steam - SC2

dinsdag 25 april 2006 @ 16:48:25 #153

super-muffin

oh nee, dan is het weer niet goed als het niet in de pagina past.

dan moet toch min-height voldoen? (+ de hack voor IE?)

Steam - SC2

dinsdag 25 april 2006 @ 20:30:40 #154

mrbombastic

Klopt het dat in IE6 en FF de font-size niet wordt geërfd door tabellen?
In onderstaand voorbeeld krijg ik dat de bovenste regel tekst groter wordt weergegeven dan de onderste.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>

<head>

<style>
html, body {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 12px;
}
</style>

</head>

<body>
<table>
   <tr>
      <td>Deze tekst is groter dan onderstaande.</td>
   </tr>
</table>

Deze tekst is kleiner dan bovenstaande tekst.
</body>

</html>

dinsdag 25 april 2006 @ 22:21:55 #155

super-muffin

quote:
Op vrijdag 21 april 2006 15:38 schreef super-muffin het volgende:
Oke, ik heb het nu zo ver dat die balken links en rechts blijven staan, maar als ik scroll lopen ze niet door.

Als ik thuis ben zal ik het ff oploaden, heb hier geen internet op mn laptop.

http://danielpunt.nl/2/

Steam - SC2

woensdag 26 april 2006 @ 15:53:58 #156

TC03

Catch you on the flipside

Weet niet of het bekend is maar wou dit toch even zeggen, ik vind dit echt een perfecte hack om dingen speciaal voor IE te speciferen.

1
2
3

Zo handig.

Ten percent faster with a sturdier frame

woensdag 26 april 2006 @ 19:29:17 #157

super-muffin

Kun je dat ook in je CSS bestand zetten?
maar dan als

1
2
3

en hoe doe je dat voor alle versies op IE? Of alle versies lager dan 6?

Steam - SC2

donderdag 27 april 2006 @ 03:33:57 #158

Castor

Obey the rules, miss the fun

quote:
Op dinsdag 25 april 2006 20:30 schreef mrbombastic het volgende:
Klopt het dat in IE6 en FF de font-size niet wordt geërfd door tabellen?
In onderstaand voorbeeld krijg ik dat de bovenste regel tekst groter wordt weergegeven dan de onderste.
[ code verwijderd ]

Dat komt doordat je geen DOCTYPE neerzet, dan werken de browsers in quirksmode. De volgende code moet het oplossen:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
/*<![CDATA[*/
html, body {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 12px;

}
/*]]>*/
</style>
<title></title>
</head>
<body>
<table>
<tr>
<td>Deze tekst is groter dan onderstaande.</td>
</tr>
</table>
<p>Deze tekst is kleiner dan bovenstaande tekst.</p>

</body>
</html>

Castor's Photostream op Flickr

donderdag 27 april 2006 @ 20:01:04 #159

mrbombastic

quote:
Op donderdag 27 april 2006 03:33 schreef Castor het volgende:

[..]

Dat komt doordat je geen DOCTYPE neerzet, dan werken de browsers in quirksmode. De volgende code moet het oplossen:
[ code verwijderd ]

Ah oke, weer wat geleerd

.

donderdag 27 april 2006 @ 20:24:18 #160

mrbombastic

Net ook erachter gekomen dat FF itt tot IE geen spaties tussen een nummer en een eenheid accepteert. Zo is left:480 px uit den boze.

vrijdag 28 april 2006 @ 04:37:18 #161

Misan

net zoald een border bij IE buiten de div valt en bij FF in de div...

vrijdag 28 april 2006 @ 10:59:27 #162

MadGuy

Fever Ray

quote:
Op vrijdag 28 april 2006 04:37 schreef Misanthropist het volgende:
net zoald een border bij IE buiten de div valt en bij FF in de div...

Dat vind ik inderdaad erg naar. Volgens mij gaat IE hier tegen de standaard in toch? Waarom?! WAAAAROM?!

last.fm
marksluymers.nl

vrijdag 28 april 2006 @ 11:19:50 #163

Berkery

Fat bastard

quote:
Op woensdag 26 april 2006 15:53 schreef TC03 het volgende:
Weet niet of het bekend is maar wou dit toch even zeggen, ik vind dit echt een perfecte hack om dingen speciaal voor IE te speciferen.
[ code verwijderd ]

Zo handig.

Als we PPK mogen geloven is dat ook de enige hack die je nodig hebt. Behalve als je nog rekening houdt met NS 4.x of IE 5 voor de Mac

Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars

FOK!-Schrikkelbaas vrijdag 28 april 2006 @ 11:48:20 #164

Swetsenegger

Egocentrische Narcist

quote:
Op vrijdag 28 april 2006 04:37 schreef Misanthropist het volgende:
net zoald een border bij IE buiten de div valt en bij FF in de div...

volgens mij toch alleen in quircksmode?

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

zaterdag 29 april 2006 @ 16:54:10 #165

ExCibular

ik ben bezig met een website met een fluid design.
Nou heb ik header en een footer die precies doen wat ik wil alleen het lukt me nog niet goed om het middenstuk voor elkaar te krijgen.

1
2
3
4
5
6
7
8
9

#home {
   margin-bottom: 20px;
   border: 2px solid #00337F;
   text-align: left;
   background-color:#FFFFFF;
   height: 350px;
   padding: 0px;
   overflow:invisible;
   }

In dexe container wil ik een stuk tekst die fluid is en twee kolommen met een vaste breedte van 225px. Alleen het lukt mij niet echt om die kolommen goed voor elkaar te krijgen dat ze er mooi naast staan.

Ik dacht het op deze manier te doen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#tekst
{
float:left;
margin-right:450px;}

#column1{
position:relative;
width:250px;
border-left:1px solid black;
float:right;
padding:0px;
margin:0px
}
#column2{
position:relative;
float:right;
border-left:1px solid black;
padding:0px;
margin:0px
}

Heeft iemand een idee wat ik fout doe?

zondag 30 april 2006 @ 04:06:34 #166

Castor

Obey the rules, miss the fun

quote:
Op zaterdag 29 april 2006 16:54 schreef ExCibular het volgende:
ik ben bezig met een website met een fluid design.
Nou heb ik header en een footer die precies doen wat ik wil alleen het lukt me nog niet goed om het middenstuk voor elkaar te krijgen.
[ code verwijderd ]

In dexe container wil ik een stuk tekst die fluid is en twee kolommen met een vaste breedte van 225px. Alleen het lukt mij niet echt om die kolommen goed voor elkaar te krijgen dat ze er mooi naast staan.

Ik dacht het op deze manier te doen:
[ code verwijderd ]

Heeft iemand een idee wat ik fout doe?

Ik begrijp niet helemaal wat je voor elkaar probeert te krijgen, vaak helpt het als je de HTML en volledige CSS post of linkt. Maar "overflow: invisible" bestaat iig niet. Dat moet zijn "overflow: hidden;"

Castor's Photostream op Flickr

zondag 30 april 2006 @ 19:58:11 #167

ExCibular

sorry het moet zijn overflow visible, typefoutje gemaakt.
html is vrij simpel div home is de container met daarin de 3 divjes die de content moeten verzorgen (div als container met daarin inhoud om event. box model problemen te voorkomen).
Ik heb niet echt een voorbeeld kunnen vinden. Maar ik heb even een plaatje gemaakt van wat ik wil bereiken

Afhankelijk van de lengte van de teksten in de kolommen of in de tekst moet de alles langer zijn dan 350 px.

[ Bericht 11% gewijzigd door ExCibular op 30-04-2006 20:06:16 ]

zaterdag 6 mei 2006 @ 22:59:57 #168

Castor

Obey the rules, miss the fun

quote:
Op zondag 30 april 2006 19:58 schreef ExCibular het volgende:
sorry het moet zijn overflow visible, typefoutje gemaakt.
html is vrij simpel div home is de container met daarin de 3 divjes die de content moeten verzorgen (div als container met daarin inhoud om event. box model problemen te voorkomen).
Ik heb niet echt een voorbeeld kunnen vinden. Maar ik heb even een plaatje gemaakt van wat ik wil bereiken
[afbeelding]

Afhankelijk van de lengte van de teksten in de kolommen of in de tekst moet de alles langer zijn dan 350 px.

Is dit wat je bedoeld?

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
/*<![CDATA[*/
  #home {float:left;border:1px solid red;}
  #tekst {background-color:yellow;float:left;margin-right:450px;}
  #column1 {width:225px;background-color:lightblue;float:left;margin-left:-450px;}
  #column2 {width:225px;background-color:blue;float:left;margin-left:-225px;}
/*]]>*/
</style>
</head>
<body>
<div id="home">
<div id="tekst">Nam vel nisi vitae odio congue tempus. Etiam leo justo,
interdum dictum, accumsan at, accumsan quis, nisl. Sed ipsum orci,
eleifend sit amet, congue ac, nonummy et, metus. Ut mollis mauris ac lectus.
</div>
<div id="column1">Column 1</div>
<div id="column2">Column 2</div>
</div>
</body>
</html>

Castor's Photostream op Flickr

vrijdag 12 mei 2006 @ 23:20:09 #169

Da_Koen

De basis van CSS(tutor van w3schools) ken ik wel, maar ik denk nog altijd in tabellen ipv div's. Eigenlijk gebruik ik bijna overal tabellen voor wat eigenlijk niet goed is, hier wil ik dus vanaf.

Weet iemand een goede tutorial over het indelen van je website dmv CSS? Of kan iemand me een voorbeeldje geven.

Neem nou bijvoorbeeld een contactformuliertje. Dit zet ik altijd in een tabel omdat alles dan netjes oonder elkaar en uitgelijnd is. Hoe zou ik zoiets in CSS kunnen aanpakken?

Verstuur ringtones en Foto's gratis naar je mobiel

zaterdag 13 mei 2006 @ 01:13:46 #170

the_disheaver

quote:
Op vrijdag 12 mei 2006 23:20 schreef Da_Koen het volgende:
De basis van CSS(tutor van w3schools) ken ik wel, maar ik denk nog altijd in tabellen ipv div's. Eigenlijk gebruik ik bijna overal tabellen voor wat eigenlijk niet goed is, hier wil ik dus vanaf.

Weet iemand een goede tutorial over het indelen van je website dmv CSS? Of kan iemand me een voorbeeldje geven.

Neem nou bijvoorbeeld een contactformuliertje. Dit zet ik altijd in een tabel omdat alles dan netjes oonder elkaar en uitgelijnd is. Hoe zou ik zoiets in CSS kunnen aanpakken?

Je zou een divje kunnnen nemen met een bepaalde width. En deze voor elke divje gelijk brengen. Ernaast via float een divje erbij. Maar dit is niet ideaal aangezien je afhankelijk van de (breedte) van de inhoud ook de breedte van de eerste kolom wilt varieren.

Tabelgebruik daarvoor is gewoon wel gewoon beter.

Layout van de pagina zelf, en tekstvlakken waar je een object in wilt gooien, daar heb je css voor nodig.

div is net als table html-code. Dus als je met CSS bezig wilt zijn is het niet per definitie fout om een tabel te gebruiken.

zaterdag 13 mei 2006 @ 01:25:42 #171

Castor

Obey the rules, miss the fun

quote:
Op vrijdag 12 mei 2006 23:20 schreef Da_Koen het volgende:
De basis van CSS(tutor van w3schools) ken ik wel, maar ik denk nog altijd in tabellen ipv div's. Eigenlijk gebruik ik bijna overal tabellen voor wat eigenlijk niet goed is, hier wil ik dus vanaf.

Weet iemand een goede tutorial over het indelen van je website dmv CSS? Of kan iemand me een voorbeeldje geven.

Neem nou bijvoorbeeld een contactformuliertje. Dit zet ik altijd in een tabel omdat alles dan netjes oonder elkaar en uitgelijnd is. Hoe zou ik zoiets in CSS kunnen aanpakken?

Forms zijn wel een van de lastigere dingen om mee te beginnen in CSS. Je kunt hier een goed voorbeeld vinden hoe je form met CSS maakt.

Persoonlijk heb ik daar nog steeds wel moeite mee, vooral als je input fields niet even lang mogen zijn en als je ook nog een stel radio-buttons kwijt moet.

Castor's Photostream op Flickr

zaterdag 13 mei 2006 @ 01:25:53 #172

Castor

Obey the rules, miss the fun

dubbel

Castor's Photostream op Flickr

zondag 14 mei 2006 @ 11:25:11 #173

Da_Koen

quote:
Op zaterdag 13 mei 2006 01:25 schreef Castor het volgende:

[..]

Forms zijn wel een van de lastigere dingen om mee te beginnen in CSS. Je kunt hier een goed voorbeeld vinden hoe je form met CSS maakt.

Persoonlijk heb ik daar nog steeds wel moeite mee, vooral als je input fields niet even lang mogen zijn en als je ook nog een stel radio-buttons kwijt moet.

Thx, zelf heb ik deze ook nog gevonden. Dat begrijp ik nu wel.

Dan nog een vraagje. Als ik het goed heb betekent "em" de hoogte van een lettertype? Maar wat betekent width:4em; dan precies? Kan iemand me dat uitleggen?

Verstuur ringtones en Foto's gratis naar je mobiel

zondag 14 mei 2006 @ 11:32:40 #174

the_disheaver

1em = 16 pixels.

zondag 14 mei 2006 @ 11:37:42 #175

RM-rf

1/998001

quote:
Op vrijdag 12 mei 2006 23:20 schreef Da_Koen het volgende:
De basis van CSS(tutor van w3schools) ken ik wel, maar ik denk nog altijd in tabellen ipv div's. Eigenlijk gebruik ik bijna overal tabellen voor wat eigenlijk niet goed is, hier wil ik dus vanaf.

Weet iemand een goede tutorial over het indelen van je website dmv CSS? Of kan iemand me een voorbeeldje geven.

Neem nou bijvoorbeeld een contactformuliertje. Dit zet ik altijd in een tabel omdat alles dan netjes oonder elkaar en uitgelijnd is. Hoe zou ik zoiets in CSS kunnen aanpakken?

de beste truc is te leren je HTML-code semantisch op te zetten .... daarmee leer je om bij de opzet van je HTML code niet te denken aan de layout zelf, maar een logische structuur ervoor te bedenken, de consequent is en klopt met de informatie en elementen die je erin wilt verwerken ....

Pas daarna voeg je de gewenste Layout door CSS toe:

een formulier bv:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<form>
   <fieldset>
       <legend>Mijn formulier</legend>
        <ul>
               <li> <label for="input1">Eerste input</label>
                       <input name="mein_input" id="input1"> </li>
               <li> <label for="input2">Eerste input</label>
                       <input name="meer_input" id="input2"> </li>
               <li> <label for="input3">Eerste input</label>
                       <input name="laatste_input" id="input3"> </li>
                <li> <button type="submit">Verstuur</button> </li>
        </ul>
   </fieldset>
</form>

het mooi uitlijnen van zulke een formulier kun je doen door de CSS:

1 2	LABEL { display: block; float: left; width: 100px; } UL, LI { list-style: none; margin:0; padding: 0; }

meer over semantiek vind je bv op alistapart (goed tutorials) en verschillende sites over css (en zoeken op semantics of semantiek)

quote:
Op zondag 14 mei 2006 11:25 schreef Da_Koen het volgende:

Dan nog een vraagje. Als ik het goed heb betekent "em" de hoogte van een lettertype? Maar wat betekent width:4em; dan precies? Kan iemand me dat uitleggen?

'em' (en 'ex') zij maateenheden die beide afhankelijk zijn van het gekozen font en de fontgrootte:
De 'em' is eigenlijk de letterbreedte (gebaseerd op de breedte van de letter 'm', veelal de breedste letter), de 'ex' is de corpshoogte (gebaseerd op de letter 'x' welke precies de undercast-hoogte aangeeft)
kies je voor de em of ex als maateenheid, weet je redelijk zeker dat je amaat gerelateerd is aan je gekozen font... zou je de font vergoten schaal je box netjes mee ... dat is de grond waaro mensen zo'n maat kiezen (bv bij het aangeven van spatierings-maat of lijnhoogte, kiezen goede designers het liefste voor resp. em of ex.

[ Bericht 14% gewijzigd door RM-rf op 14-05-2006 11:52:02 ]

"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25

zondag 14 mei 2006 @ 11:41:51 #176

Da_Koen

quote:
Op zondag 14 mei 2006 11:32 schreef the_disheaver het volgende:
1em = 16 pixels.

In feite is em dus overbodig?

Verstuur ringtones en Foto's gratis naar je mobiel

zondag 14 mei 2006 @ 12:00:00 #177

super-muffin

nee, want als je je font grootte in px definieert kan het niet geschaald worden in IE door de gebruiker.

Steam - SC2

zondag 14 mei 2006 @ 13:02:08 #178

Light

quote:
Op zondag 14 mei 2006 11:32 schreef the_disheaver het volgende:
1em = 16 pixels.

1em heeft niet een vaste grootte, het is relatief. 1em geeft aan dat de lettergrootte 100% van de lettergrootte op die plek is. Uitleggen is lastig, een voorbeeld helpt waarschijnlijk meer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Let op het verschil in grootte van de letters C, terwijl de ze allemaal in een class c staan en dus een grootte 1em hebben. De letters X zijn op iedere regel even groot.

fokstok.nl

zondag 14 mei 2006 @ 15:00:43 #179

Da_Koen

quote:
Op zondag 14 mei 2006 13:02 schreef Light het volgende:

[..]

1em heeft niet een vaste grootte, het is relatief. 1em geeft aan dat de lettergrootte 100% van de lettergrootte op die plek is. Uitleggen is lastig, een voorbeeld helpt waarschijnlijk meer:
[ code verwijderd ]

Let op het verschil in grootte van de letters C, terwijl de ze allemaal in een class c staan en dus een grootte 1em hebben. De letters X zijn op iedere regel even groot.

Thx, dat is een duidelijk verhaal.

Maar waarom gebruikt men vaak width:4em;?? Heeft dit enkel te maken met het handmatig aanpassen van de fontsize in de browser? Dat de afstanden dan goed blijven?

edit:
Het beste zou dus zijn om je hele site in "em" te maken ipv "px"?

[ Bericht 5% gewijzigd door Da_Koen op 14-05-2006 16:24:51 ]

Verstuur ringtones en Foto's gratis naar je mobiel

zondag 14 mei 2006 @ 18:23:33 #180

Castor

Obey the rules, miss the fun

quote:
Op zondag 14 mei 2006 15:00 schreef Da_Koen het volgende:

[..]

Thx, dat is een duidelijk verhaal.

Maar waarom gebruikt men vaak width:4em;?? Heeft dit enkel te maken met het handmatig aanpassen van de fontsize in de browser? Dat de afstanden dan goed blijven?

edit:
Het beste zou dus zijn om je hele site in "em" te maken ipv "px"?

Klopt, als je de hele site in "em" maakt dan is hij compleet resizable als de tekst vergroot wordt.

Castor's Photostream op Flickr

zondag 14 mei 2006 @ 19:17:34 #181

super-muffin

quote:
Op zondag 14 mei 2006 15:00 schreef Da_Koen het volgende:

[..]

Thx, dat is een duidelijk verhaal.

Maar waarom gebruikt men vaak width:4em;?? Heeft dit enkel te maken met het handmatig aanpassen van de fontsize in de browser? Dat de afstanden dan goed blijven?

edit:
Het beste zou dus zijn om je hele site in "em" te maken ipv "px"?

Als je zou willen dat alles mee schaalt wel.

Steam - SC2

FOK!-Schrikkelbaas maandag 15 mei 2006 @ 17:37:12 #182

Swetsenegger

Egocentrische Narcist

http://webshop.xploise.nl/test/menu.htm

Bovenstaand voorbeeld is prima in FF. In zowel Opera als Internet explorer, zit er ruimte tussen de submenu's en ontbreekt de onderste border bij het laatste child. Het laatste wordt met een DOM object opgelost, maar werkt dusduidelijk niet op IE en Opera

Alle CSS en javascript staat in de html. Misschien dat iemand wat tips heeft om het menuutje crossbrowser mooi te krijgen.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

maandag 15 mei 2006 @ 20:08:43 #183

the_disheaver

quote:
Op maandag 15 mei 2006 17:37 schreef Swetsenegger het volgende:
http://webshop.xploise.nl/test/menu.htm

Bovenstaand voorbeeld is prima in FF. In zowel Opera als Internet explorer, zit er ruimte tussen de submenu's en ontbreekt de onderste border bij het laatste child. Het laatste wordt met een DOM object opgelost, maar werkt dusduidelijk niet op IE en Opera

Alle CSS en javascript staat in de html. Misschien dat iemand wat tips heeft om het menuutje crossbrowser mooi te krijgen.

1 ding: in opera 9 (beta 1) zit er geen ruimte tussen de submenu's. Wel geen border onderin

FOK!-Schrikkelbaas maandag 15 mei 2006 @ 23:25:46 #184

Swetsenegger

Egocentrische Narcist

quote:
Op maandag 15 mei 2006 20:08 schreef the_disheaver het volgende:

[..]

1 ding: in opera 9 (beta 1) zit er geen ruimte tussen de submenu's. Wel geen border onderin

Beta browsers trek ik me nog maar even niets van aan

Ik ben een stuk verder, menu komt nu volledig uit database. de nesting wordt correct geparsed dus dat is het probleem niet.
Een en ander ziet er nu prima uit onder FF en Opera. Onder IE is echter de background transparant (

) en en het menu valt steeds weg bij de onmouseover. Alleen als ik heeeeeeeeeeeeeel traag schuif gaat het goed.

url: http://webshop.xploise.nl/cart.php

relevante 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

#vertnav{
  list-style: none;
}

#vertnav{
     padding:0;
     margin:0;
}

#vertnav ul {
     padding: 0;
     margin:0;
     list-style: none;
     width:167px;
     z-index:99;
     position:absolute;
     overflow:visible;
}

#vertnav li {
     position: relative;
     cursor:pointer;
     cursor:hand;
     margin:0;
     width:171px;
     padding:0 2px;
     background-color:rgb(212,213,225);
     border-bottom:1px solid rgb(138, 139, 152);
     display:block;
     height:20px;
     line-height:20px;
}

#vertnav a {
     text-decoration:none;
     display:block;
     width:171px;
     height:20px;
}

#vertnav a:hover, #vertnav li:hover{
     background-color:rgb(179,181,196);
}
#vertnav ul li:hover, #vertnav ul li a:hover{
     background-color:rgb(179,181,196);
}

#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{
     display:none;
     position:absolute;
     top:0;
     left:175px;
}

/* non-IE browsers see this */
#vertnav ul li>ul, #vertnav ul ul li>ul{
     margin-top:0;
}

#vertnav li:hover ul ul, #vertnav li:hover ul ul ul, #vertnav li:hover ul ul ul ul, #vertnav li:hover ul ul ul ul ul{
     display:none;
}

#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul, #vertnav ul ul ul li:hover ul, #vertnav ul ul ul ul li:hover ul{
     display:block;
}

li>ul {
     top: -1px;
     left: -5px;
}
/* Win IE only \*/
* html #vertnav li{float:left;}
/* end holly hack */

[ Bericht 1% gewijzigd door Swetsenegger op 15-05-2006 23:37:28 ]

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

FOK!-Schrikkelbaas dinsdag 16 mei 2006 @ 08:37:51 #185

Swetsenegger

Egocentrische Narcist

Iemand een idee?
Ik krijg hetzelfde effect in Firefox wanneer ik de z-index weghaal in #vertnav ul

-edit-
Opgelost. Het menu schuift over een floating div, die ik nog een 'position: relative' had mee gegeven. Position uit die float gehaald en het werkt naar behoren

[ Bericht 55% gewijzigd door Swetsenegger op 16-05-2006 08:46:29 (Opgelost) ]

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

dinsdag 16 mei 2006 @ 12:22:28 #186

ExCibular

quote:
Op dinsdag 16 mei 2006 08:37 schreef Swetsenegger het volgende:
Iemand een idee?
Ik krijg hetzelfde effect in Firefox wanneer ik de z-index weghaal in #vertnav ul

-edit-
Opgelost. Het menu schuift over een floating div, die ik nog een 'position: relative' had mee gegeven. Position uit die float gehaald en het werkt naar behoren

Voor wat het waard is, in IE 7 beta werkt het ook goed!
Ik was naar je probleem aan het kijken terwijl dat je die al had opgelost

woensdag 17 mei 2006 @ 11:10:56 #187

super-muffin

Waarom is de div #inhoud niet tot de onderkant? maar issie 100% van het browser venster + header?
Ik snap niet waarom die dat doet

-edit-
linkje zou handig zijn

www.danielpunt.nl/akxifo

[ Bericht 19% gewijzigd door super-muffin op 17-05-2006 11:17:34 ]

Steam - SC2

woensdag 17 mei 2006 @ 11:25:38 #188

Desdinova

Olaa

als height 100% is, is hij de waarde van je hele website-toonbare deel van je browser. maar omdat je daarboven een header hebt, begint die div lager. terwijl hij wel de 100% hoogte heeft.

op mijn resolutie klopt je site helemaal niet verwacht ik, maar dat kan misschien door de nog-in-ontwikkeling-fase komen

er is geen manier om 100% - header te doen. tenzij je javascript zou gebruiken maar dat is weer omslachtig.

edit
in jouw geval zou ik de rode-witte-rode invulling een backgroundimage maken van 1px hoog, en die repeat-y doen in je body background, en je background-color dezelfde kleur maken als wat het nu is.

dan maak je je top-div daarbovenop met daarin je banner, zodat daar iig de background niet meer zichtbaar is. beetje spelen met afbeeldingmaat wanneer nodig.

waar je dan mee zit is de transparante afbeelding onderin je content-div. die zou je misschien in een eigen div kunnen zetten met een z-index lager dan je content-text. ofzo. het wordt een beetje spelen met float.

[ Bericht 37% gewijzigd door Desdinova op 17-05-2006 11:33:25 ]

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 17 mei 2006 @ 11:31:03 #189

qu63

..de tijd drinkt..

quote:
Op woensdag 17 mei 2006 11:10 schreef super-muffin het volgende:
Waarom is de div #inhoud niet tot de onderkant? maar issie 100% van het browser venster + header?
Ik snap niet waarom die dat doet

-edit-
linkje zou handig zijn
www.danielpunt.nl/akxifo

ik zou ook iig je alfabet-letters wat aanpassen in je lexicon. als ik nu op de E of de K ga staan blijven ze verspringen namelijk :'0

Als je er overheen gaat worden de letters groter, daardoor verspringt ie een regel naar beneden, dus staat mijn muis er niet meer op, en verspringt ie weer terug naar zn oorspronkelijke plekje, en begint het hele verhaal opnieuw

It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]

woensdag 17 mei 2006 @ 11:34:43 #190

super-muffin

quote:
Op woensdag 17 mei 2006 11:25 schreef Desdinova het volgende:
als height 100% is, is hij de waarde van je hele website-toonbare deel van je browser. maar omdat je daarboven een header hebt, begint die div lager. terwijl hij wel de 100% hoogte heeft.

op mijn resolutie klopt je site helemaal niet verwacht ik, maar dat kan misschien door de nog-in-ontwikkeling-fase komen

er is geen manier om 100% - header te doen. tenzij je javascript zou gebruiken maar dat is weer omslachtig.

hoe doe ik het met javascript? Ik ken zelf niet echt veel javascript, maar kan het wel gebruiken.
Tenzij iemand anders nog een oplossing heeft

maar wat klopt er niet op jou resolutie? Ik zit hier op 1024x768 en daar is alles oké.

qu63: dat weet ik, daar moet ik nog wat aan doen ja.

Steam - SC2

woensdag 17 mei 2006 @ 11:37:35 #191

RM-rf

1/998001

Om compleet te zijn... een percentuele hoogte betekent dat de hoogte bepaald wordt door het parent-element met 'layout' (wat betekent dat dat element een opgegeven breedte, hoogte of positionering moet kennen, eventueel gewoon hard 'position: relative;')..

In het geval van het element #content lijkt dat de viewbox te zijn, dat is het browservenster, eigenlijk te vertalen met het element HTML (in msie dacht ik de BODY tag, iig in quirky mode)

Volgens mij is dit probleem op te lossen door je element #head een position: relative; te geven:

1
2
3

#head {
position: relative;
}

"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25

woensdag 17 mei 2006 @ 11:38:36 #192

Desdinova

Olaa

ik zit op een laptop met 1400xnogiets. maar op 1600x1200 zal hij het ook niet prima doen. hij is geen 100% bij mij, maar houdt ongeveer 200px eerder op. in internet explorer dan. heb hem niet bekeken met opera/netscape/firefox

ik zou het probleem niet oplossen met javascript. je zou dan een of andere functie moeten hebben die het toonbare deel van je browser checkt (is 100%), en aan de hand daarvan de div-height aanpast door je header-height eraf te trekken.

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 17 mei 2006 @ 11:46:44 #193

CraZaay

prettig gestoord

quote:
Op woensdag 17 mei 2006 11:37 schreef RM-rf het volgende:
viewbox

viewport

woensdag 17 mei 2006 @ 12:24:34 #194

super-muffin

quote:
Op woensdag 17 mei 2006 11:37 schreef RM-rf het volgende:
Om compleet te zijn... een percentuele hoogte betekent dat de hoogte bepaald wordt door het parent-element met 'layout' (wat betekent dat dat element een opgegeven breedte, hoogte of positionering moet kennen, eventueel gewoon hard 'position: relative;')..

In het geval van het element #content lijkt dat de viewbox te zijn, dat is het browservenster, eigenlijk te vertalen met het element HTML (in msie dacht ik de BODY tag, iig in quirky mode)

Volgens mij is dit probleem op te lossen door je element #head een position: relative; te geven:
[ code verwijderd ]

nee, position: relative doet niks.

Is er echt geen andere oplossing

Trouwens, nog iets geks, het achtergrondplaatje in #content doet het niet in FF

Steam - SC2

woensdag 17 mei 2006 @ 12:25:51 #195

super-muffin

quote:
Op woensdag 17 mei 2006 11:38 schreef Desdinova het volgende:
ik zit op een laptop met 1400xnogiets. maar op 1600x1200 zal hij het ook niet prima doen. hij is geen 100% bij mij, maar houdt ongeveer 200px eerder op. in internet explorer dan. heb hem niet bekeken met opera/netscape/firefox

Dat kwam om dat #box een height heeft van 600px; dat is nu al opgelost.

Steam - SC2

woensdag 17 mei 2006 @ 12:33:21 #196

Desdinova

Olaa

dan heb je waarschijnlijk backslashes gebruikt (\) in plaats van forward (/) bij je link naar het plaatje

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 17 mei 2006 @ 12:43:32 #197

super-muffin

nee, hij staat gewoon in de root.

1	background: url(bg-content.gif) fixed no-repeat bottom right #fff;

Steam - SC2

woensdag 17 mei 2006 @ 12:50:26 #198

the_disheaver

quote:
Op woensdag 17 mei 2006 12:43 schreef super-muffin het volgende:
nee, hij staat gewoon in de root.
[ code verwijderd ]

quottjes omheen?

woensdag 17 mei 2006 @ 12:52:10 #199

Desdinova

Olaa

dan wordt je div waarschijnlijk niet geshowd (IE is wat flexibeler daarin). zet er maar even een border-width, border-style en border-color bij. effe tjekke wattie doet.

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 17 mei 2006 @ 13:44:11 #200

super-muffin

De DIV word wel geshowd, want het is die #content waar ik het hier boven over had

Als ik de property fixed weghaal doetie het wel.

-edit-

moet je kijken, als ik mn browserventer zo schaal komtie in eens te voorschijn

Wat is dit nu voor gekkigheid.

[ Bericht 41% gewijzigd door super-muffin op 17-05-2006 14:02:24 ]

Steam - SC2

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

[CSS] voor dummies - Deel 4

» digital corner

» digital corner