[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_57342009
quote:
Op woensdag 12 maart 2008 23:46 schreef mcDavid het volgende:

[..]

Er bestaat ook nog een line-height
Daar kan ik nog wel mee gaan spelen morgen.
quote:
-edit-
en ik wil je erop wijzen dat links met een plaatje ipv tekst lastig zijn voor zoekmachines, textbrowsers, enz.
Een herhaalde achtergrondafbeelding met tekst is een betere optie.
Ik gebruik wel alt-teksten En de ontwerper van de layout heeft een lettertype gekozen dat niet standaard als font beschikbaar is.
fokstok.nl
  donderdag 13 maart 2008 @ 00:07:06 #202
12880 CraZaay
prettig gestoord
pi_57342074
quote:
Op donderdag 13 maart 2008 00:03 schreef Light het volgende:

Ik gebruik wel alt-teksten En de ontwerper van de layout heeft een lettertype gekozen dat niet standaard als font beschikbaar is.
Dan nog horen de afbeeldingen wat mij betreft in de CSS, en niet in de HTML
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...
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deeltje 8
Index

» digital corner

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