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

» digital corner

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