[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_57342706
quote:
Op donderdag 13 maart 2008 00:03 schreef Light het volgende:

[..]

Daar kan ik nog wel mee gaan spelen morgen.
[..]

Ik gebruik wel alt-teksten En de ontwerper van de layout heeft een lettertype gekozen dat niet standaard als font beschikbaar is.
Er bestaan ook manieren om je eigen font mee te sturen.
pi_57344533
quote:
Op donderdag 13 maart 2008 00:07 schreef CraZaay het volgende:

[..]

Dan nog horen de afbeeldingen wat mij betreft in de CSS, en niet in de HTML
Zoveel mogelijk, dat ben ik met je eens. Als je suggesties hebt hoe ik tekst in de HTML kan gebruiken en dat kan vervangen met een afbeelding in CSS zonder dat de functionaliteit aangetast wordt dan houd ik me aanbevolen. Bij voorkeur zo dat ik een andere afbeelding kan kiezen op het moment dat iemand met z'n muis over het plaatje fietst.
fokstok.nl
pi_57344542
quote:
Op donderdag 13 maart 2008 00:31 schreef mcDavid het volgende:

[..]

Er bestaan ook manieren om je eigen font mee te sturen.
Geen nette manier, lijkt me. Sowieso vind ik niet dat je mensen kunt verplichten iets te installeren als ze op je site komen.
fokstok.nl
  donderdag 13 maart 2008 @ 08:24:30 #206
12880 CraZaay
prettig gestoord
pi_57344900
quote:
Op donderdag 13 maart 2008 07:30 schreef Light het volgende:

Zoveel mogelijk, dat ben ik met je eens. Als je suggesties hebt hoe ik tekst in de HTML kan gebruiken en dat kan vervangen met een afbeelding in CSS zonder dat de functionaliteit aangetast wordt dan houd ik me aanbevolen. Bij voorkeur zo dat ik een andere afbeelding kan kiezen op het moment dat iemand met z'n muis over het plaatje fietst.
HTML:
1
2		<a href="link.html" class="link_met_plaatje_als_achtergrond">Tekst die Google,
screenreaders en mensen zonder CSS zien</a>


CSS:
1
2
3
4
5
6
7
8
9
10
11
12		a.link_met_plaatje_als_achtergrond {
   width: 100px;
   height: 20px;
   display: block;
   background: url(plaatje.gif);
   text-indent: -9999px;
   overflow: hidden
}

a.link_met_plaatje_als_achtergrond:hover {
   background: url(plaatje2.gif);
}
pi_57346388
quote:
Op donderdag 13 maart 2008 08:24 schreef CraZaay het volgende:

[..]

HTML:
[ code verwijderd ]

CSS:
[ code verwijderd ]
Daar kan ik wel wat mee, dank Het lost ook het eerdere probleem op, waarbij de plaatjes niet goed aansloten.
fokstok.nl
pi_57353931
quote:
Op donderdag 13 maart 2008 07:32 schreef Light het volgende:

[..]

Geen nette manier, lijkt me. Sowieso vind ik niet dat je mensen kunt verplichten iets te installeren als ze op je site komen.
Je hebt gelijk. Ik dacht ooit dat ik zoiets gezien had, maar de enige mogelijkheden werken óf alleen in IE, óf werken met flash.
pi_57355094
Bij gebrek aan een centraal html topic vraag ik het hier maar even..

In html4.01 sluit je enkele tags zo af <br> en in xhtml <br />
Maar de validator keurt mijn <br /> wel gewoon goed, terwijl ik ik 4.01 doctype heb, waarom is dit?
Ik kon het in de officiële documentatie niet terug vinden.
-
pi_57355892
quote:
Op donderdag 13 maart 2008 17:14 schreef splendor het volgende:
Bij gebrek aan een centraal html topic vraag ik het hier maar even..

In html4.01 sluit je enkele tags zo af <br> en in xhtml <br />
Maar de validator keurt mijn <br /> wel gewoon goed, terwijl ik ik 4.01 doctype heb, waarom is dit?
Ik kon het in de officiële documentatie niet terug vinden.
de validator van W3c is eigenlijk gewoon een xml-based validator, traditioneel HTML kent eigenlijk geen validatie aangezien de browsers gewoon sowieso altijd moeite moeten doen een document weer te geven en ook 'interpretaties' te doen van elementen... HTML4.01 'herkent' dus ook gewoon een BR mét een traling slash.

'officiele' HTML dient eigenlijk zo streng te zijn dat als iets _niet_ valideert, het hele document eigenlijk niet verder verwerkt 'mag' worden (om data-integriteit te waarborgen, non-validatie betekent dat er iets mis is met de data)
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_57355901
Heb je een voorbeeld?
Bij mij pikt'ie ze er gewoon tussenuit hoor met html4.01 transitional!

en idd wat RM-rf zegt. Als je site het in alle browsers prima doet ondanks een paar 'bugs' in de html, dan is dat geen probleem. Valideren is meer een hulpmiddel om fouten op te sporen, maar niet per se de enige heilige manier.
pi_57371730
Na wat problemen met een ander CSS menu op mijn website (in mijn sig.) heb ik op advies een ander CSS menu geprobeerd. Maar nu werkt het alsnog niet op IE6. In IE7 en Firefox en de rest werkt het perfect, maar in IE6 krijg ik niet eens de links te zien.

Weet iemand wat dit kan zijn? Fout in de code?

http://www.meesterbrein.com/menu_style.css

Ik heb trouwens de code hiervandaan: http://www.deansabatino.com/suckerfish/suckerfish.html
Heb dezelfde code gebruikt, maar hier werkt het wel gewoon met IE6 en op mijn site niet.

Erg vreemd, want voor zover ik weet ligt het verschil tussen IE6 en IE7 vooral in de hover. Waarom werkt bij mij het halve menu dan niet?
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
pi_57371901
quote:
Op vrijdag 14 maart 2008 12:07 schreef HetMeesterbrein het volgende:
Na wat problemen met een ander CSS menu op mijn website (in mijn sig.) heb ik op advies een ander CSS menu geprobeerd. Maar nu werkt het alsnog niet op IE6. In IE7 en Firefox en de rest werkt het perfect, maar in IE6 krijg ik niet eens de links te zien.

Weet iemand wat dit kan zijn? Fout in de code?

http://www.meesterbrein.com/menu_style.css

Ik heb trouwens de code hiervandaan: http://www.deansabatino.com/suckerfish/suckerfish.html
Heb dezelfde code gebruikt, maar hier werkt het wel gewoon met IE6 en op mijn site niet.

Erg vreemd, want voor zover ik weet ligt het verschil tussen IE6 en IE7 vooral in de hover. Waarom werkt bij mij het halve menu dan niet?
Bij dat suckerfish menu gebruiken ze een javascript hack voor IE6, omdat die de psuedo-class :hover niet kent voor list-items.

Enneuh, heb je wel eens gehoord van relatieve url paden?
pi_57373045
Ja, maar hoorde dat het beter is voor SEO als je hele pad neerzet. Zie ook het nadeel er niet van eigenlijk.

Dat ze een javascript hack voor hover gebruiken weet ik al. Die gebruik ik ook.

Weet je misschien waarom het menu niet werkt? Dat was namelijk mijn vraag
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
pi_57373197
Absolute paths vind ik wel fijn, vooral als je veel met mod_rewrite werkt.
pi_57373323
Oh, euh...
155 fouten gevonden in je html-code. Misschien moet je er daar eens een paar van wegwerken?

Enneuh ik weet niet wie je dat van die SEO verteld heeft, maar dat slaat echt als een tang op een varken. Eén ding kan ik je wel vertellen: google e.d. worden niet blij van bestandsnamen als "onze-ogen-hebben-vanaf-de-geboorte-dezelfde-grootte-maar-onze-neus-en-oren-groeien-altijd.html". Kijk niet raar op als ze besluiten je niet te indexen.
  vrijdag 14 maart 2008 @ 13:19:27 #217
12880 CraZaay
prettig gestoord
pi_57373363
quote:
Op vrijdag 14 maart 2008 13:05 schreef HetMeesterbrein het volgende:

Dat ze een javascript hack voor hover gebruiken weet ik al. Die gebruik ik ook.

Weet je misschien waarom het menu niet werkt? Dat was namelijk mijn vraag
Ja, je JS werkt niet. Er hoort on hover een class op de LI gezet te worden, maar Firebug ziet dat niet gebeuren.
pi_57373887
quote:
Op vrijdag 14 maart 2008 13:19 schreef CraZaay het volgende:

[..]

Ja, je JS werkt niet. Er hoort on hover een class op de LI gezet te worden, maar Firebug ziet dat niet gebeuren.
Oooh dan moet ik daar eens naar gaan kijken. Heb het script in een apart .js bestand gezet.
quote:
Op vrijdag 14 maart 2008 13:17 schreef mcDavid het volgende:
Oh, euh...
155 fouten gevonden in je html-code. Misschien moet je er daar eens een paar van wegwerken?

Enneuh ik weet niet wie je dat van die SEO verteld heeft, maar dat slaat echt als een tang op een varken. Eén ding kan ik je wel vertellen: google e.d. worden niet blij van bestandsnamen als "onze-ogen-hebben-vanaf-de-geboorte-dezelfde-grootte-maar-onze-neus-en-oren-groeien-altijd.html". Kijk niet raar op als ze besluiten je niet te indexen.
quote:
Op vrijdag 14 maart 2008 13:12 schreef Geqxon het volgende:
Absolute paths vind ik wel fijn, vooral als je veel met mod_rewrite werkt.
Klopt. Ook bij cutenews is het handig, omdat hij anders gaat openen in view.php/index.php en dan werkt het niet goed.
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
pi_57373931
Je moet het zelf weten
  vrijdag 14 maart 2008 @ 16:41:16 #220
37634 wobbel
Da WoBBeL King
pi_57377884
Ik heb dit:

1Bier en tieten <div id="bier">zijn okee oleeee</div>


Probleem is dat ik dit als output krijg:

1
2		Bier en tieten 
zijn okee oleeee


maar ik wil het zo
1Bier en tieten zijn okee oleeee
Hosted VoIP SIP trunks Vast mobiel VoIP
  vrijdag 14 maart 2008 @ 17:13:14 #221
12880 CraZaay
prettig gestoord
pi_57378542
quote:
Op vrijdag 14 maart 2008 16:41 schreef wobbel het volgende:
Ik heb dit:
[ code verwijderd ]

Probleem is dat ik dit als output krijg:
[ code verwijderd ]

maar ik wil het zo
[ code verwijderd ]
Een div is een block level element van 100% breed. Waar heb je die div voor nodig?
pi_57381442
Ik heb het menu aangepast in een ander menu. Heb geen IE6 hier bij de hand.. kan iemand even zeggen of het werkt met IE6?
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
  vrijdag 14 maart 2008 @ 20:04:18 #223
12880 CraZaay
prettig gestoord
pi_57382305
quote:
Op vrijdag 14 maart 2008 19:27 schreef HetMeesterbrein het volgende:
Ik heb het menu aangepast in een ander menu. Heb geen IE6 hier bij de hand.. kan iemand even zeggen of het werkt met IE6?
Werkt prima.
pi_57382456
quote:
Op vrijdag 14 maart 2008 16:41 schreef wobbel het volgende:
Ik heb dit:


[ code verwijderd ]


Probleem is dat ik dit als output krijg:


[ code verwijderd ]


maar ik wil het zo

[ code verwijderd ]
zou je dat niet liever met een <span> doen?
quote:
Op vrijdag 14 maart 2008 19:27 schreef HetMeesterbrein het volgende:
Ik heb het menu aangepast in een ander menu. Heb geen IE6 hier bij de hand.. kan iemand even zeggen of het werkt met IE6?
deze doet het wel goed
pi_57383218
Oke mooi. Dan nog iets kleins. Tussen het menu en de adsense reclame zit een regel wit. Ik heb dit niet ingesteld, heb het liefst dat het tegen elkaar aan zit, maar ik weet niet hoe ik het weg kan krijgen...
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
  maandag 17 maart 2008 @ 00:59:25 #226
135268 USAF
Sarcastisch als altijd
pi_57424849
Ik heb een probleempje, voor het menu bij een website lijken IE en FF beide verschillende afstanden voor de margins te gebruiken... Nu zal er vast een hele simpele oplossing zijn maar ik heb m nog niet gevonden ;)

Voorbeeld wat het verschil is:
FF:

IE:


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		#menu {
   width: 769px;
   height: 30px;
   position: relative;
   padding-left: 39px;
   letter-spacing: -1px;
   background-image: url(menubg.png);
   background-repeat: no-repeat;
   background-position: 31px;
}

#menu .keuzes {
   padding-top: 9px;
   height: 30px;
   width: 769px;
}

#menu .keuzes .keuze a,a:active{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10pt;
   color: #515151;
   font-weight: bold;
   text-decoration: none;
   /*margin-right: 17px;*/
   float: left;
}


HTML:
1
2
3
4
5
6
7
8
9		<div id="menu">
   <div class="keuzes">
       <span class="keuze"><a href="./" style="color:#385c88;margin-right:17px;">collectie</a></span>
        <span class="keuze"><a href="./algemene_informatie.php" style="margin-right:18px;">over ons</a></span>
      <span class="keuze"><a href="./faq.php" style="margin-right:16px;">contact</a></span>
      <span class="keuze"><a href="./inschrijven.php" style="margin-right:480px;">links</a></span>
      <span class="keuze"><a href="./inschrijven.php">english</a></span> 
   </div>
</div>


tnx :)
Commander of the Joint Chiefs
  maandag 17 maart 2008 @ 08:04:46 #227
12880 CraZaay
prettig gestoord
pi_57425989
Ik zie weinig verschil? Maar begin eens met je menu semantisch correct te maken zou ik zeggen (een lijst voor je opsomming van menu items), deze "divitis" is net zo erg als het gebruiken van tabellen voor je lay-out
pi_57428603
Het is geen CSS, maar wat ik mij afvroeg: Is het "stout" om na de HTML sluit-tag nog commentaar in de code te plaatsen? Ik wil voor debug-doeleinden op het einde van mijn pagina een paar regeltjes als bv. de parse-tijd en het aantal gebruikte queries neerplempen.
pi_57428765
@USAF
Als je problemen hebt met verschillende marges, moet je ze gewoon definiëren. Verschillende browsers houden nou eenmaal verschillende standaardmarges aan.

@Geqxon
Ik zie niet in waarom niet? Zolang browsers er niet moeilijk over doen (en dat lijkt me niet...)
  dinsdag 18 maart 2008 @ 23:12:59 #230
32768 DionysuZ
Respect my authority!
pi_57465180
Ik heb weer eens een CSS vraag.

Ben een site aan het bouwen met een container die 100% hoog is. Nu werkt het allemaal goed in IE 5.0+,FF,NS,Safari en Opera. Echter, bij de laatste 2 voegt hij nog een aantal pixels lege ruimte onderaan toe (zo'n 20px volgens mij), en ik heb geen idee hoe dat komt en hoe ik ervanaf kom.

HTML (sterk ingekort ;)):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

  <head>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="general.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
    
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="iehack.css" />
    <![endif]--> 
  </head>

  <body>
    <div id="container">
    </div>
  </body>
</html>


Met bijbehorende CSS:
general.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		* {
  margin: 0px;
  padding: 0px;
}

/* commented backslash mac IE hack \*/
html,body {
  height: 100%;
}
/* end hack */

body {
  font-family: "Trebuchet MS",Verdana, Tahoma, Arial, Sans-serif;
  font-size: 62.5%;  /* 10px */
  text-align: center;
  background: #eaeaea url('px/bg.png') repeat-x 0 0;
}

#container {
  position: relative;
  margin: 0px auto;
  font-size: 110%;
  min-height:100%;
  width: 790px;
  text-align: left;
  background: #ffffff url('px/mainbg.png') repeat-y 100% 0;
}


iehack.css
1
2
3		#container {
  height: 100%;
}
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  woensdag 19 maart 2008 @ 07:44:45 #231
12880 CraZaay
prettig gestoord
pi_57469115
IE voor de Mac wordt niet meer gebruikt, dus die hack zou ik er lekker uit gooien

Zaken 100% hoog willen maken is altijd een gigantische pain in the ass. Waarom wil je dit? In 99% van de gevallen is het beoogde effect namelijk op veel makkelijkere manieren te bereiken, bijvoorbeeld door die background gewoon aan de body te hangen. De hoogte van de #container maakt dan niets meer uit.
  woensdag 19 maart 2008 @ 08:18:59 #232
32768 DionysuZ
Respect my authority!
pi_57469356
quote:
Op woensdag 19 maart 2008 07:44 schreef CraZaay het volgende:
IE voor de Mac wordt niet meer gebruikt, dus die hack zou ik er lekker uit gooien

Zaken 100% hoog willen maken is altijd een gigantische pain in the ass. Waarom wil je dit? In 99% van de gevallen is het beoogde effect namelijk op veel makkelijkere manieren te bereiken, bijvoorbeeld door die background gewoon aan de body te hangen. De hoogte van de #container maakt dan niets meer uit.
ik heb onderaan de pagina nog gegevens gegooid, kvk nummer/rek.nummer/disclaimer. Dat soort informatie. En het werkt allemaal goed hoor, alleen snap ik niet waarom opera en safari nog een paar pixels aan het document toevoegen.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  woensdag 19 maart 2008 @ 09:46:10 #233
32768 DionysuZ
Respect my authority!
pi_57470478
Solved.

Doordat ik een div in de container een margin-bottom had gegeven reageerden Opera en Safari als beschreven, ook al was die div een stuk kleiner dan het scherm. Aangezien het ook met padding werkte in dit geval heb ik het zo maar opgelost.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_57475075
Css freaks!

Ik ben sinds enkele dagen voor het eerst bezig met css en ik begin het steeds leuker te vinden . Ik heb twee vragen.

1. Kan ik met CSS door middel van de a:hover selector een geluidje af laten spelen zodra je ergens over heen 'hovered'. Wellicht via behaviors (is behaviors nog css?)?

2. Mijn layout is opgemaakt uit een aantal div-elementen. Een aantal divs zijn relatief gepositioneerd, aldaar maak ik dus gebruik van de 'normal document flow'. Een van deze divs is bv zelf ook een parent voor twee andere child divs en deze child divs floaten naar links, resp. rechts om ze goed naast elkaar te krijgen. Weer een ander div element staat helemaal rechts in de main parent container door, idd: float rechts.
Op zich werkt dit aardig goed, alleen krijg ik het mede ivm borders en padding niet echt voor elkaar om alles werkelijk naadloos op elkaar aan te sluiten. Ook ontstaat er soms een gele stippellijn om een div element heen; alsof deze overlapping vindt met aan ander div element. Dat zou m.i. helemaal niet mogen aangezien er genoeg ruimte is voor het div element.
Mijn vraag: is het problematisch als child div elementen ruimte tussen elkaar hebben of overlap hebben (ik neem aan dat de gele stippellijnen overlap betekent)?
  woensdag 19 maart 2008 @ 14:05:24 #235
12880 CraZaay
prettig gestoord
pi_57475736
Die gele stippellijnen komen "ergens" vandaan, maar het is iig geen feature van je browser die daarmee overlap aan wil geven. Dat zit echt in je eigen CSS of een browser add-on ofzo.

Geluidje afspelen: kan idd niet met CSS, en je kan je afvragen of je het wel moet willen. Als het onmisbaar is voor je app, dan is HTML niet de taal om 'm in te bouwen

Verder snap ik er zo weinig van, dus gooi eens het een en ander online ergens
pi_57475774
1. Gelukkig niet. !
2. Overlap/ruimte ertussen maakt natuurlijk geen reet uit, zolang het in alle browsers maar goed staat.
Het kan soms lastig zijn om de borders netjes te krijgen als elementen overlappen.
pi_57476433
Ok guys. Tja een klein tikje als je over een link hovered vind ik wel lekker, geeft je een ander gevoel. Verder geen kermis-dingen . Ok dan weet ik dat.

Wat betreft die divs, die gele stippellijnen komen voor in dreamweaver, niet in de browser. Hier is de code (alles is nog conceptmatig, png zit er niet bij ):

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129		body {
   background-color: #000000;
}
html, body {
   margin:0;
   padding:0;  
   height:100%; 
}
#divDistance{
   width:1px;
   height:50%;
   margin-bottom:-295px;
   float:left;
}  
#divPaintings {
   height: 100px;
   width: 100px;
   float: right;
}

#divContainer{
   position:relative;
   clear:left;
   margin:0 auto;
   width:990px;
   height:590px;
   border:1px solid #000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #FFFFFF;
}
#divMaintext {
   float: right;
   height: 273px;
   width: 340px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   padding: 5px;
}
#divNav {
   float: left;
   height: 258px;
   width: 145px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   font-size: 12px;
   text-align: left;
   padding-top: 20px;
   padding-right: 5px;
   padding-bottom: 5px;
   padding-left: 5px;
}
#divNav a {
   color: #F9F9FF;
   text-decoration: none;
   display: block;
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-top-style: solid;
   border-bottom-style: solid;
   border-top-color: #000099;
   border-bottom-color: #000099;
   font-weight: bold;
   padding-top: 8px;
   padding-right: 5px;
   padding-bottom: 8px;
   padding-left: 5px;
   margin-top: 17px;
   margin-right: 5px;
   margin-bottom: 17px;
   margin-left: 5px;
}
#divNav a:hover {
   background-color: #000066;
}


#divBottomleft {
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   position: relative;
   height: 285px;
   width: 510px;
}
#divPaintingnav {
   padding: 5px;
   height: 200px;
   width: 500px;
   position: relative;
   border: 1px solid #000000;
}
#divLogo {
   position: relative;
   height: 75px;
   width: 500px;
   padding: 5px;
   border: 1px solid #F0F0F0;
}
#divPaintings {
   padding: 5px;
   height: 574px;
   width: 465px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   float: right;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<body>
<div id="divDistance"></div>
<div id="divContainer">
  <div id="divPaintings">divPaintings</div>
  <div id="divPaintingnav"></div>
  <div id="divLogo"><img src="Default image/Logo.png" width="503" height="75" /></div>
  <div id="divBottomleft">
    <div id="divMaintext">divMaintext</div>
    <div id="divNav">
      <p><a href="Index.html">&gt; HOME</a><a href="Index.html">&gt; SCHILDERIJEN</a><a href="Index.html">&gt; KUNSTMARKTEN</a><a href="Index.html">&gt; CONTACT</a></p>
    </div>
  </div>
</div>
</div>
</body>
pi_57477520
Ik heb (voor mijn doen iig) een 'brein'breker...



en wanneer ik het browservenster breder zou maken zou het er zo uit moeten zien



Het centreren van het groene vlak kan in css met margins

1
2
3
4
5
6
7		#groen
{
  background-color:#00FF00;
  width: 150px;
  margin-left: auto;
  margin-right: auto
}


Het probleem hier alleen is dat ik geen idee heb hoe ik #rood en #blauw moet CSS'en. Wanneer ik een container maak, dan zou die slechts 1 achtergrondkleur (rood of blauw) kunnen hebben.

Een afbeelding als container-achtergrond vind ik geen goede oplossing (enorm breed plaatje moet dat dan worden, en het oplossen met scripts wil ik ook liever niet.

Iemand een idee?
pi_57478664
ik heb een css probleempje op de indexpag van www.severjanin.nl. Links is een menu uit 3 floating blokjes, en op de homepagina staan rechts ook nog 2 floating blokjes. Maar om de een of andere reden staat de bovenste van deze 2 blokjes in Firefox op dezelfde hoogte als de onderste van de 3 linkerblokjes (bekijk hem met IE om te zien hoe het moet zijn). Kan iemand mij vertellen hoe ik dit oplos?
Trotse poster van het 37000000ste bericht ^O^
pi_57479147
Laat maar, ik heb het al opgelost (1 grote layer, float left, met daarin de 3 menu-layertjes zonder float, probleem opgelost)
Trotse poster van het 37000000ste bericht ^O^
pi_57480803
quote:
Op woensdag 19 maart 2008 15:34 schreef GVRuud het volgende:
Ik heb (voor mijn doen iig) een 'brein'breker...

[ afbeelding ]

en wanneer ik het browservenster breder zou maken zou het er zo uit moeten zien

[ afbeelding ]

Het centreren van het groene vlak kan in css met margins
[ code verwijderd ]
Dat kan, maar het werkt niet in IE.
quote:
Het probleem hier alleen is dat ik geen idee heb hoe ik #rood en #blauw moet CSS'en. Wanneer ik een container maak, dan zou die slechts 1 achtergrondkleur (rood of blauw) kunnen hebben.

Een afbeelding als container-achtergrond vind ik geen goede oplossing (enorm breed plaatje moet dat dan worden, en het oplossen met scripts wil ik ook liever niet.

Iemand een idee?
Je kunt het volgende proberen:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		#rood {
background-color: #F00;
width: 50%;
margin-right: -75px; /* de helft van de breedte van #groen */
}
#groen {
background-color: #0F0;
width: 150px;
}
#blauw {
background-color: #00F;
width: 50%;
margin-left: -75px; /* de helft van de breedte van #groen */
}
#rood, #groen, #blauw {
height: 150px;
float: left;
}

Niet getest overigens.
fokstok.nl
pi_57481350
Getest in FF en Safari:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20		#rood {
   background-color: #F00;
   width: 50%;
   margin-left: -75px; /* de helft van de breedte van #groen */
   float: left;
}
#groen {
   background-color: #0F0;
   width: 150px;
   float: left;
}
#blauw {
   background-color: #00F;
   width: 50%;
   margin-left: -75px; /* de helft van de breedte van #groen */
   float: right;
}
#rood, #groen, #blauw {
   height: 150px;
}

En in de html
1
2
3		<div id="rood"></div>
<div id="blauw"></div>
<div id="groen"></div>

De volgorde is belangrijk.
fokstok.nl
pi_57482362
Heeft iemand een oplossing voor deze fouten?

De fouten in IE6

http://upload.bruggema.nl/view/1380554357/foutlijst.JPG

Hier staan de foto's niet goed op een rij...

http://upload.bruggema.nl/view/1380554357/foutpopup.JPG

popup moet 100% breedte hebben maar helaas..
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_57484460
quote:
Op woensdag 19 maart 2008 18:31 schreef Light het volgende:
Getest in FF en Safari:
[ code verwijderd ]

En in de html
[ code verwijderd ]

De volgorde is belangrijk.
Held!

Heb beide varianten even geprobeerd, en nog een overflow-x:hidden op de container toegevoegd.

Ik zie alleen bij de float: left,left,right versie dat er soms een witte ruimte tussen #groen en #blauw ontstaat (ik denk door afrondingen die de browser doet door de 50% en de negatieve margin). De float left,left,left variant heeft dit niet, maar wanneer het venster smaller is dan de breedte van #groen, dan wrapt #blauw onder #groen... Ik ga weer even geinspireerd proberen
pi_57484714
quote:
Op woensdag 19 maart 2008 20:36 schreef GVRuud het volgende:

[..]

Held!

Heb beide varianten even geprobeerd, en nog een overflow-x:hidden op de container toegevoegd.

Ik zie alleen bij de float: left,left,right versie dat er soms een witte ruimte tussen #groen en #blauw ontstaat (ik denk door afrondingen die de browser doet door de 50% en de negatieve margin). De float left,left,left variant heeft dit niet, maar wanneer het venster smaller is dan de breedte van #groen, dan wrapt #blauw onder #groen... Ik ga weer even geinspireerd proberen
Ik had juist altijd een overlap van blauw over groen bij left, left, left (en de volgorde rood, groen, blauw) Vandaar dat ik met left, left, right ging proberen.

Trouwens, is het de bedoeling dat de vakken rood en blauw ook gebruikt worden voor wat anders dan alleen de achtergrondkleur? Zo nee, dan is er een andere oplossing mogelijk
fokstok.nl
pi_57484947
#rood en #blauw krijgen een background-image toegekend die aansluit op het siteontwerp wat in #groen komt te staan. Deze twee zijkanten zijn echter niet gelijk, en omdat ze ook 'oneindig' mee moeten rekken tot aan de randen van het browservenster, is de oplossing van 3 divs op een rij volgensmij de enige juiste. Wanneer de witruimte niet voorkwam zou ik de perfecte oplossing hebben..
pi_57485412
quote:
Op woensdag 19 maart 2008 19:12 schreef Chandler het volgende:
Heeft iemand een oplossing voor deze fouten?

De fouten in IE6

http://upload.bruggema.nl/view/1380554357/foutlijst.JPG

Hier staan de foto's niet goed op een rij...

http://upload.bruggema.nl/view/1380554357/foutpopup.JPG

popup moet 100% breedte hebben maar helaas..
Ik kan je site uberhaupt niet openen in IE6
Fx, IE7 en opera geen probleem...
pi_57486465
quote:
Op woensdag 19 maart 2008 20:55 schreef GVRuud het volgende:
#rood en #blauw krijgen een background-image toegekend die aansluit op het siteontwerp wat in #groen komt te staan. Deze twee zijkanten zijn echter niet gelijk, en omdat ze ook 'oneindig' mee moeten rekken tot aan de randen van het browservenster, is de oplossing van 3 divs op een rij volgensmij de enige juiste. Wanneer de witruimte niet voorkwam zou ik de perfecte oplossing hebben..
Ik krijg geen witruimte tussen blauw en groen (en ook niet tussen rood en groen). Wel kan het handig zijn om margin en padding van de container (body?) op 0 te zetten. Een horizontale scrollbalk krijg ik ook niet. Maar ik heb geen IE bij de hand om het daarmee te testen.
fokstok.nl
pi_57486797
Die witruimte is er ook niet altijd. Als je de venstergrootte veranderd, dan zie je 'live' alles verschuiven zoals het hoort. Echter soms (ik denk bij een oneven getal als breedte), krijg ik een wit lijntje tussen groen en blauw. Dit is in safari, firefox en opera. Bij internet explorer 6 en 7 springt blauw er soms onder zie ik net...

Verder staan alle paddings/margins etc op 0 en gebruik ik een reset.css voor basisinstellingen. Als ik die weglaat, blijft de scrollbalk nogsteeds.
pi_57493207
quote:
Op woensdag 19 maart 2008 21:10 schreef mcDavid het volgende:

[..]

Ik kan je site uberhaupt niet openen in IE6
Fx, IE7 en opera geen probleem...
IE7 & de laatste versie van FF geven het allemaal heel netjes weer

Ik zit dus alleen met 100% width en de juiste manier van de afbeeldingen naast en onder elkaar te zetten.
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_57497673
quote:
Op woensdag 19 maart 2008 21:51 schreef GVRuud het volgende:
Uiteindelijk ben ik toch maar bezweken onder een beunhaasmethode omdat ik er echt niet aan uit kwam en de html wel een keertje af mocht zijn...

Zie http://bus.nimeon.nl/. De lijntjes die links en rechts van de header doorlopen worden nu met javascript gepositioneerd.

Toch heel erg bedankt voor je moeite!
  donderdag 20 maart 2008 @ 13:58:20 #252
12880 CraZaay
prettig gestoord
pi_57499904
quote:
Op donderdag 20 maart 2008 12:17 schreef GVRuud het volgende:

Zie http://bus.nimeon.nl/. De lijntjes die links en rechts van de header doorlopen worden nu met javascript gepositioneerd.
Bah Waarom niet gewoon die header 100% breed en een breed plaatje met die lijnen maken en die gecentreerd als achtergrond voor de header gebruiken? De afbeelding wordt daar misschien 1 kilobyte groter van.
pi_57500975
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
pi_57502103
quote:
Op donderdag 20 maart 2008 14:56 schreef GVRuud het volgende:
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
Je kunt het ook doen net als die gast hiervoor met die rode/groene/blauwe div's.
En dan die achterste 2 dus een achtergrondplaatje geven met repeat-x
  donderdag 20 maart 2008 @ 16:08:40 #255
12880 CraZaay
prettig gestoord
pi_57502393
quote:
Op donderdag 20 maart 2008 14:56 schreef GVRuud het volgende:
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
Waarom niet? Je moet natuurlijk afwegen hoeveel van je bezoekers fullscreen browsen op een scherm van 25" of groter

Javascript gebruiken voor lay-out, terwijl het voor gedrag bedoeld is, vind ik helemaal ranzig. Maar ieder z'n meug
pi_57502649
quote:
Op donderdag 20 maart 2008 07:29 schreef Chandler het volgende:

[..]

IE7 & de laatste versie van FF geven het allemaal heel netjes weer

Ik zit dus alleen met 100% width en de juiste manier van de afbeeldingen naast en onder elkaar te zetten.
Een randje eromheen zetten wil nog wel eens helpen om te kijken wat er precies gebeurt
http://duft.nl/web/test2.html

Zo te zien zijn die 2 plaatjes linksboven net te hoog, waardoor de plaatjes daaronder naar een volgende regel worden verplaatst ofzo....
pi_57505441
Het probleem is dat ik het niet zie

Hoe zou ik dat kunnen oplossen?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_57505687
quote:
Op donderdag 20 maart 2008 18:55 schreef Chandler het volgende:
Het probleem is dat ik het niet zie

Hoe zou ik dat kunnen oplossen?
Al die blokjes een vaste hoogte geven?
pi_57510638
Na tijdenlang websites gemaakt te hebben wil ik het nu met divjes proberen. Aangezien het nog nieuw voor me is en het me (mijn mening) toch redelijk wil lukken, loop ik al enkele dagen tegen hetzelfde probleem aan.

Wat ik wil is een site opgedeeld in 6 divs. Een container die de rest bevat, namelijk de header, de body (bevat een div menu en een div content) en de footer.
Voorbeeld/vooruitgang is hier te zien: www.bugworks.eu/stuff/fok/div.html

Alles lijkt goed te zijn tot het moment ik het menu aan ga passen (meer regels/tekst), dan overlapt hij de footer. Doe ik hetzelfde bij de content dan wordt de footer netjes zoals bedoeld opgeschoven naar beneden. Nu heb ik al vanalles geprobeerd, maar ik kan geen oplossing vinden. Weet iemand van jullie waar het aan ligt? Alvast bedankt. :Y

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		#page_container {
border: 1px solid;
padding: 10px;
margin-left: 150px;
margin-right: 250px;
}
#page_header {
border: 1px solid;
height: 100px;
margin-bottom: 10px;
}
#page_body {
border: 1px solid;
}
#page_menu {
position: absolute;
width: 190px;
border: 1px solid;
}
#page_content {
margin-left: 200px;
border: 1px solid;
}
#page_footer {
border: 1px solid;
height: 50px;
margin-top: 10px;
}


HTML/divjes
1
2
3
4
5
6
7
8		<div id="page_container">
  <div id="page_header">Header</div>
  <div id="page_body">
    <div id="page_menu">Menu<br /><br /><br /><br /><br /><br />Menu</div>
    <div id="page_content">Content<br /><br /><br />Content</div>
  </div>
  <div id="page_footer">Footer</div>
</div>
pi_57510731
Je menu heeft een position:absolute. Daarmee haal je 'm uit de natuurlijke float, dus de rest houdt geen rekening meer met de grootte van je menu.

Als je 'm gewoon positioneert met margins, zou het in principe goed moeten gaan.
pi_57511232
Het de position:absolute weggehaald en "margin-top: -150px;" toegevoegd aan #page_content, het enige nadeel is dat hij uitgaat van het einde (laagste) van het menu div, dus dat verschilt nogal.

Maar ondanks bovenstaande blijft het menu nog steeds over het footer div gaan .
pi_57511479
als je het mij vraagt moet je helemaal niet met zulke grote marges hoeven werken.. Ik ga er even op los!
pi_57511997
http://duft.nl/web/div.html
Een extra divje met clear:both was de truc!
Weltrusten
  donderdag 20 maart 2008 @ 23:38:02 #264
12880 CraZaay
prettig gestoord
pi_57512024
Zonder #page_body kan het ook prima, scheelt weer een element
pi_57512055
Dank je .

Slaap lekker
pi_57512058
quote:
Op donderdag 20 maart 2008 23:38 schreef CraZaay het volgende:
Zonder #page_body kan het ook prima, scheelt weer een element
zou idd ook kunnen, en dan de footer clear:both geven (of misschien is dat nieteens nodig)

Maar misschien moet die #page_body nog een bepaalde opmaak krijgen...
pi_57512100
quote:
Op donderdag 20 maart 2008 23:39 schreef mcDavid het volgende:

[..]

zou idd ook kunnen, en dan de footer clear:both geven (of misschien is dat nieteens nodig)

Maar misschien moet die #page_body nog een bepaalde opmaak krijgen...
#page_body had ik eigenlijk als container div, hoeft dus geen opmaak oid.
pi_57512142
quote:
Op donderdag 20 maart 2008 23:40 schreef BugWorks het volgende:

[..]

#page_body had ik eigenlijk als container div, hoeft dus geen opmaak oid.
dan die skippen idd. Veel makkelijker.
pi_57512193
quote:
Op donderdag 20 maart 2008 23:42 schreef mcDavid het volgende:

[..]

dan die skippen idd. Veel makkelijker.
Heb het nu net even aangepast, dus zonder die body div. Dat werkt idd, alleen is jouw oplossing voor een groot deel dus overbodig geworden, maar toch bedankt voor je moeite .

Edit
Je extra div lijkt dus toch noodzakelijk.

[ Bericht 5% gewijzigd door BugWorks op 20-03-2008 23:51:41 ]
pi_57514094
quote:
Op donderdag 20 maart 2008 16:08 schreef CraZaay het volgende:

[..]

Waarom niet? Je moet natuurlijk afwegen hoeveel van je bezoekers fullscreen browsen op een scherm van 25" of groter

Javascript gebruiken voor lay-out, terwijl het voor gedrag bedoeld is, vind ik helemaal ranzig. Maar ieder z'n meug
Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
  vrijdag 21 maart 2008 @ 03:39:03 #271
32768 DionysuZ
Respect my authority!
pi_57514146
die lijntjes kun je heus wel op een andere manier oplossen zonder javascript te gebruiken =). Wees creatief
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  vrijdag 21 maart 2008 @ 08:07:29 #272
12880 CraZaay
prettig gestoord
pi_57514616
quote:
Op vrijdag 21 maart 2008 03:03 schreef GVRuud het volgende:

Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
Het is visueel en dus layout wat mij betreft, ook als het niets toevoegt aan de gebruikersbeleving. Ik snap wel dat je het zo gedaan hebt hoor en ik heb ook echt weleens het een en ander gepositioneerd met JS. Je moet aan afweging maken tussen twee kwaden in dit geval, en ik kies dan altijd voor zo min mogelijk elementen in de HTML die alleen voor opmaak gebruikt worden en geen JS, dus dan kom je uit op een oplossing met een brede achtergrondafbeelding. Neemt niet weg dat beide punten verdedigbaar zijn
  vrijdag 21 maart 2008 @ 12:40:11 #273
32768 DionysuZ
Respect my authority!
pi_57518546
ik erger me weer dood aan microsoft. Aangezien ze opacity nog steeds niet accepteren in IE7, ben ik genoodzaakt alpha filter erop te gebruiken. Maar wat hebben ze nou geflikt? Ze hebben cleartype gewoon uitgezet voor elementen waar dxtransform op plaatsvindt.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_57518718
quote:
Op vrijdag 21 maart 2008 03:03 schreef GVRuud het volgende:

[..]

Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
Nogmaals: kijk even onderaan de vorige pagina. Die gast die links en rechts een verschillende kleur background wil. Als je het precies zo doet gaat het ook goed. Doe je alleen een achtergrondafbeelding ipv een achtergrondkleur!
pi_57518771
quote:
Op donderdag 20 maart 2008 23:44 schreef BugWorks het volgende:

[..]

Heb het nu net even aangepast, dus zonder die body div. Dat werkt idd, alleen is jouw oplossing voor een groot deel dus overbodig geworden, maar toch bedankt voor je moeite .

Edit
Je extra div lijkt dus toch noodzakelijk.
Volgens mij zou je ook de footer kunnen gebruiken ipv die extra div. Geef die ff een clear:both (dit geeft aan dat er aan beide kanten van die div geen float-objecten mogen staan) en kijk wat er gebeurt.
pi_57518835
quote:
Op vrijdag 21 maart 2008 12:40 schreef DionysuZ het volgende:
ik erger me weer dood aan microsoft. Aangezien ze opacity nog steeds niet accepteren in IE7, ben ik genoodzaakt alpha filter erop te gebruiken. Maar wat hebben ze nou geflikt? Ze hebben cleartype gewoon uitgezet voor elementen waar dxtransform op plaatsvindt.
IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!
IE6 dan weer niet wat idd bloedirritant is
  vrijdag 21 maart 2008 @ 13:15:23 #277
32768 DionysuZ
Respect my authority!
pi_57519222
quote:
Op vrijdag 21 maart 2008 12:54 schreef mcDavid het volgende:

[..]

IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!
IE6 dan weer niet wat idd bloedirritant is
dat is gelukkig wel gefixt jah. Maar als in PNG met alpha wil gebruiken moet ik nog altijd
1
2
3		    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="/iehack.css" />
    <![endif]--> 

met daarin dxtransform filters gebruiken om het werkend te krijgen voor IE6 ;).

Maar dat was mijn issue niet. Probeer eens een divje voor 70% transparant te maken, met tekst erin (die dus ook transparant moet zijn), dan werkt dat mooi zoals het hoort in de meeste browsers. Maar ten eerste support IE de opacity css regel nog niet, dus moet je weer een filter gaan toepassen. Maar wat hebben die klojo's nou dus gedaan, cleartype UITGEZET voor alle elementen waar zoiets op toegepast wordt.

Resultaat is dus een divje met gewoon hakkelige tekst erin. :(

Nahjah heb gelukkig een workaround gevonden voor waar ik het voor nodig had. Klant blijft koning he :P
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_57519643
quote:
Op donderdag 20 maart 2008 19:07 schreef mcDavid het volgende:

[..]

Al die blokjes een vaste hoogte geven?
Dat had ik gedaan, 130 hoogte en breedte;
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  vrijdag 21 maart 2008 @ 13:37:55 #279
32768 DionysuZ
Respect my authority!
pi_57519684
heb je ergens de code staan?
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  vrijdag 21 maart 2008 @ 14:42:16 #280
12880 CraZaay
prettig gestoord
pi_57520974
quote:
Op vrijdag 21 maart 2008 12:54 schreef mcDavid het volgende:

[..]

IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!
IE6 dan weer niet wat idd bloedirritant is
En IE7 heeft wat afwijkingen in de weergave van kleuren van PNG's.
pi_57521035
quote:
Op vrijdag 21 maart 2008 13:15 schreef DionysuZ het volgende:

[..]

dat is gelukkig wel gefixt jah. Maar als in PNG met alpha wil gebruiken moet ik nog altijd
[ code verwijderd ]

met daarin dxtransform filters gebruiken om het werkend te krijgen voor IE6 .

Maar dat was mijn issue niet. Probeer eens een divje voor 70% transparant te maken, met tekst erin (die dus ook transparant moet zijn), dan werkt dat mooi zoals het hoort in de meeste browsers. Maar ten eerste support IE de opacity css regel nog niet, dus moet je weer een filter gaan toepassen. Maar wat hebben die klojo's nou dus gedaan, cleartype UITGEZET voor alle elementen waar zoiets op toegepast wordt.

Resultaat is dus een divje met gewoon hakkelige tekst erin.

Nahjah heb gelukkig een workaround gevonden voor waar ik het voor nodig had. Klant blijft koning he
In plaats van een div met opacity kun je ook gewoon een 1x1 pixel PNG gebruiken.
  vrijdag 21 maart 2008 @ 15:14:36 #282
32768 DionysuZ
Respect my authority!
pi_57521595
quote:
Op vrijdag 21 maart 2008 14:45 schreef Geqxon het volgende:

[..]

In plaats van een div met opacity kun je ook gewoon een 1x1 pixel PNG gebruiken.
ik weet het..... dat is toch ook niet wat ik bedoel? als je tekst een alpha channel wil geven.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_57521758
quote:
Op vrijdag 21 maart 2008 13:35 schreef Chandler het volgende:

[..]

Dat had ik gedaan, 130 hoogte en breedte;
Probeer eens 140 ofzo? Klaarblijkelijk worden 2 van de cellen opgerekt in IE6...
pi_57522910
quote:
Op vrijdag 21 maart 2008 12:50 schreef mcDavid het volgende:

[..]

Volgens mij zou je ook de footer kunnen gebruiken ipv die extra div. Geef die ff een clear:both (dit geeft aan dat er aan beide kanten van die div geen float-objecten mogen staan) en kijk wat er gebeurt.
Als ik dat doe houdt hij geen rekening met de opgegeven margin van de footer, zit dus gelijk tegen de langste div aan (menu of content). Tot op dit moment werkt dit goed dus ik houd het ook zo.
  vrijdag 21 maart 2008 @ 16:37:27 #285
12880 CraZaay
prettig gestoord
pi_57523055
quote:
Op vrijdag 21 maart 2008 16:27 schreef BugWorks het volgende:

[..]

Als ik dat doe houdt hij geen rekening met de opgegeven margin van de footer, zit dus gelijk tegen de langste div aan (menu of content). Tot op dit moment werkt dit goed dus ik houd het ook zo.
Klopt, margin-top heb je dan weinig meer aan, maar padding lost een hoop op
pi_57523144
quote:
Op vrijdag 21 maart 2008 15:23 schreef mcDavid het volgende:

[..]

Probeer eens 140 ofzo? Klaarblijkelijk worden 2 van de cellen opgerekt in IE6...
Ik heb het nu al aangepast naar 135px maar kan helaas zelf niet controlleren (slecht hé);

En een ander probleem was dat wanneer je op een van de plaatjes klikt je een popup krijgt die 100% breed hoort te zijn maar helaas dat is deze niet misschien moet ik block mee geven aan de div?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  vrijdag 21 maart 2008 @ 16:52:18 #287
12880 CraZaay
prettig gestoord
pi_57523305
quote:
Op vrijdag 21 maart 2008 16:42 schreef Chandler het volgende:

misschien moet ik block mee geven aan de div?
Het is van nature al een block level element
pi_57525746
maar waarom is deze dan geen 100%
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_57539358
quote:
Op vrijdag 21 maart 2008 16:42 schreef Chandler het volgende:

[..]

Ik heb het nu al aangepast naar 135px maar kan helaas zelf niet controlleren (slecht hé);

En een ander probleem was dat wanneer je op een van de plaatjes klikt je een popup krijgt die 100% breed hoort te zijn maar helaas dat is deze niet misschien moet ik block mee geven aan de div?
Ze staan nu zowel in Fx2.x als in MSIE 6 als 3 rijen van 2
iig consequenter
pi_57544996
Haha, heb nu de thumbs maar op 110px gezet in een div van 125px die 5px padding gebruikt! dus moet nu in IE6 ook goed zichtbaar zijn
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  maandag 24 maart 2008 @ 13:07:19 #291
21410 Fliepke
Serieuze waarheid
pi_57577368
Klein probleempje dat vast heel simpel op te lossen is.
Ik heb een grote div en daarin zitten allemaal divjes.
de onderste twee zijn er twee die naast elkaar staan. Namelijk een sidebar en daarnaast de daadwerkelijke content.
De sidebar is niet zo lang en de content varieert in lengte. Nu wil ik natuurlijk dat mijn sidebar ook altijd net zo lang is als mijn content.
Het is vast iets met min-height: contentheight
ofzo wat. Maar hoe zit het precies?
  maandag 24 maart 2008 @ 14:12:40 #292
12880 CraZaay
prettig gestoord
pi_57578538
Leg eerst eens uit waarom je dat wilt Fliepke, en dan gaan we daarna waarschijnlijk "faux columns" roepen
  maandag 24 maart 2008 @ 14:44:10 #293
21410 Fliepke
Serieuze waarheid
pi_57579067
Omdat ik dat mooier vind?
pi_57579842
"Faux columns!"

-edit-
gewoon een achtergrondafbeelding gebruiken dus
  maandag 24 maart 2008 @ 15:25:24 #295
12880 CraZaay
prettig gestoord
pi_57579848
Ah, het gaat dus om iets visueels kennelijk. En wat wil je precies bereiken dan?

M'n idee is namelijk dat je iets wilt wat op te lossen is dmv zogenaamde "faux colums" (google)
  maandag 24 maart 2008 @ 15:39:15 #296
21410 Fliepke
Serieuze waarheid
pi_57580128
Dat werkt dus niet, want ik wil onderaan de sidebar een klein plaatje hebben. Dat zou door de achtergrond te "faken" dus nog steeds ergens in het midden staan.
  maandag 24 maart 2008 @ 15:44:23 #297
12880 CraZaay
prettig gestoord
pi_57580254
Dan zet je dat in een element wat onder beide kolommen komt, en dus altijd onderaan staat ongeacht de hoogte van de kolommen?
  maandag 24 maart 2008 @ 15:46:32 #298
21410 Fliepke
Serieuze waarheid
pi_57580294
quote:
Op maandag 24 maart 2008 15:44 schreef CraZaay het volgende:
Dan zet je dat in een element wat onder beide kolommen komt, en dus altijd onderaan staat ongeacht de hoogte van de kolommen?
Ja ik zat er ook al aan te denken om met de footer een beetje vals te spelen. Toch grappig dat het toch allemaal zo kneuterig is dat je de meeste simpele dingen gewoon moet gaan faken. Ik zit overigens nu ook weer gezellig te worstelen met het verschil in boxing model tussen IE en FF. Dacht dat ik er bijna was totdat ik IE opende .
pi_57580322
quote:
Op maandag 24 maart 2008 15:46 schreef Fliepke het volgende:

[..]

Ja ik zat er ook al aan te denken om met de footer een beetje vals te spelen. Toch grappig dat het toch allemaal zo kneuterig is dat je de meeste simpele dingen gewoon moet gaan faken. Ik zit overigens nu ook weer gezellig te worstelen met het verschil in boxing model tussen IE en FF. Dacht dat ik er bijna was totdat ik IE opende .
Jup dat is het.

Weet iemand trouwens of Firefox3 weer anders om zal gaan met css en html dan firefox 2? Dat we dan met een browser extra rekening moeten houden?
  maandag 24 maart 2008 @ 15:48:02 #300
21410 Fliepke
Serieuze waarheid
pi_57580323
Overigens staat hier een of andere oplossing
http://www.intensivstatio(...)es/2/template-1.html

div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px"); }

The content-div has a left margin. Setting a min-height assures that the content area is always higher than the navigation.

IE on MAC doesn't interprets min-height. The dynamic properties (i.e. expression) used in explorer are proprietary by Microsoft. This prevents the css from validating according to W3C.
«-- back
  maandag 24 maart 2008 @ 16:24:45 #301
12880 CraZaay
prettig gestoord
pi_57581064
IE voor de Mac moet je niet meer ondersteunen, niemand gebruikt die meer, wordt sinds 1999 niet meer ontwikkeld en kun je niet eens meer downloaden bij MS

Firefox 3 zal er net zo mee omgaan als Firefox 2, namelijk standards compliant conform de W3C richtlijnen

En voor box model problemen: met welk doctype?
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deeltje 8
Index

» digital corner

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