[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  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
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deeltje 8
Index

» digital corner

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