[CSS] voor dummies - Deel 4

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_36848927
Hm ja, dat werkt inderdaad. Maar als ik rechts nu een andere kleur wil hebben? Zou ik daar dan een aparte div voor moeten creeëren?

Thanks again, btw!

[ Bericht 9% gewijzigd door MadGuy op 11-04-2006 10:54:53 ]
last.fm
marksluymers.nl
pi_36849178
quote:
Op dinsdag 11 april 2006 10:48 schreef MadGuy het volgende:
Hm ja, dat werkt inderdaad. Maar als ik rechts nu een andere kleur wil hebben? Zou ik daar dan een aparte div voor moeten creeëren?
Of de achtergrondimage danwel kleur aanpassen.
pi_36849584
Thanks. Dat moet nu wel gaan lukken, denk ik. Staat alleen het andere probleem nog.
last.fm
marksluymers.nl
pi_36850678
Hoe komt het overigens dat IE alles zo raar in elkaar drukt, terwijl Firefox het geheel perfect weergeeft? Vooral bij de grijze balk boven en de tekstballon banner boven mijn content is het goed te zien - het is net een tikkeltje verschoven...
last.fm
marksluymers.nl
pi_36920335
Toch even een kickje.

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?

Het tweede probleem is Internet Explorer. In Firefox en Netscape onder andere wordt de grootte van de container perfect weergegeven. Hij valt onder de lichtblauwe banner en is er perfect mee uitgelijnd. In IE is dit echter niet het geval. Ook de grijze balk bovenaan wordt in IE overlapt door de lichtblauwe banner. Kan ik dit rechttrekken?

pagina
CSS
last.fm
marksluymers.nl
pi_36922449
Ik heb zo 1-2-3 geen antwoord, maar waarom doe je alles met absolute positionering? Daar krijg je alleen maar grijze haren van...
No Dukes of Hazzard in the classroom
  donderdag 13 april 2006 @ 15:17:04 #97
25889 Sitethief
Fulltime Flapdrol
pi_36922750
Ik ben bezig met het uitproberen van mijn layout. Alleen nu staat echt alles in HTML en ik wil toch graag een gedeelte in CSS hebben.
Hoe krijg ik het background element(niet eens legal0 uit een <td> in CSS?

Zie: http://sitethief.nl/try/
Stroek: Sitethief, die is heel groot en sterk :Y.
Faat: *zucht* zoals gewoonlijk hoor Sitethief weer in de bocht &gt;:)
pi_36922823
quote:
Op donderdag 13 april 2006 15:17 schreef Sitethief het volgende:
Ik ben bezig met het uitproberen van mijn layout. Alleen nu staat echt alles in HTML en ik wil toch graag een gedeelte in CSS hebben.
Hoe krijg ik het background element(niet eens legal0 uit een <td> in CSS?

Zie: http://sitethief.nl/try/
td {background-color: #123456;}
pi_36923459
quote:
Op donderdag 13 april 2006 15:07 schreef Berkery het volgende:
Ik heb zo 1-2-3 geen antwoord, maar waarom doe je alles met absolute positionering? Daar krijg je alleen maar grijze haren van...
Hm ja, dat klopt wel een beetje. Ik wil echter dat mijn ontwerp hetzelfde is bij iedereen.

Wat zou je anders voorstellen dan?
last.fm
marksluymers.nl
  donderdag 13 april 2006 @ 15:56:58 #100
46794 Berkery
Fat bastard
pi_36924172
quote:
Op donderdag 13 april 2006 15:38 schreef MadGuy het volgende:

[..]

Hm ja, dat klopt wel een beetje. Ik wil echter dat mijn ontwerp hetzelfde is bij iedereen.

Wat zou je anders voorstellen dan?
Je zou hier een beetje mee kunnen spelen (menu): http://www.alistapart.com/articles/taminglists/

En voor de rest is het een kwestie van netjes centreren.
No Dukes of Hazzard in the classroom
pi_36924802
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
pi_36925123
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
pi_37091655
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">
<!--
#Layer2 {
   position:relative;
   width:72%;
   height:40px;
   background-color: #00337F;
   border-bottom: 2px solid #FF993F;
   border-right: 2px solid #FF993F;
   margin: 0px;
   padding: 0px;   
}
#Layer3 {
   position:relative;
   width:100%;
   height:50px;
   background-color:#FFFFFF;
   text-align:left;
   padding:0px;
   margin:0px;
   }
#banner {
   margin-bottom: 20px;
   border: 1px solid #00337F;
   text-align: left;
   background-color:#FFFFFF;
   height:110px;
   padding: 0px;
   }
h1.title {
font-family:bitsream vera serif;
font-size:2.3em;
margin:0px;
padding:0px;
font-weight: bolder;
color:#00337F;
position:relative;
top:8px;
left:60px;
}
img.logo {
position:relative;
top:-70px;
left:75%;
width:110px;
}
#menu_container
{
   position:relative;
   width:100%;
   height:20px;
   background-color:#FF993F;
}
-->
</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?
pi_37092318
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
pi_37095637
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.
pi_37100465
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
pi_37121325
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.
pi_37124067
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
1972 Swetsenegger
Egocentrische Narcist
pi_37139994
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
 | FOK! Schrikkelbaasch
pi_37142434
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
1972 Swetsenegger
Egocentrische Narcist
pi_37143887
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.
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas donderdag 20 april 2006 @ 22:24:48 #112
1972 Swetsenegger
Egocentrische Narcist
pi_37143976
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.
 | FOK! Schrikkelbaasch
pi_37144252
Met de underscore hack:

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

Ondersteunt IE7beta nou inmiddels min-height of niet?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_37145109
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
pi_37145339
Een voorbeeldje zou handig zijn
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  FOK!-Schrikkelbaas donderdag 20 april 2006 @ 23:07:50 #116
1972 Swetsenegger
Egocentrische Narcist
pi_37145927
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?
 | FOK! Schrikkelbaasch
pi_37146269
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
pi_37146972
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.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_37147094
@super-muffin
Waarom heb je die expressions ook op left en right? Geeft wel een grappig effect trouwens
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_37162668
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
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deel 4
Index

» digital corner

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