[CSS] voor dummies - deel 9 | Digital Corner (DIG/DEV)

donderdag 17 april 2008 @ 17:06:20 #26

JJasperO

Sinds mijn vorige vraag over divjes en floats ben ik gestart met een nieuw/schoon ontwerp omdat ik niet tevreden was. Wat ik de vorige keer heb geleerd is dat de volgorde van je div elementen in de code van belang is: je moet beseffen dat de volgorde van de div elementen de 'normal document flow' bepaalt zolang het normal document flow blijft. Wat ik ook heb geleerd is dat floats ervoor zorgen dat de div elementen niet meer deelnemen aan de normal document flow. Als je echter veel floats gebruikt is alnog de volgorde van belang want ook met meerdere floats wordt de document flow bepaald door de volgorde in de code. Verder begrijp ik de functie van 'clear'.

Met deze kennis dacht ik volledig autonoom te kunnen zijn, maar nog steeds stuit ik op een klein probleem.

Eerst even de code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="file:///C|/Users/Administrator/Desktop/Test 03/Assets/styles.css" rel="stylesheet" type="text/css" />
<link href="Assets/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="containerDiv">
   <div id="rechterDiv"></div>
    <div id="headerDiv"></div>
    <div id="mainDiv"></div>
    <div id="footerDiv"></div>
    <div id="navigatieDiv"></div>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

@charset "utf-8";
#containerDiv {
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   height: 600px;
   width: 900px;
   background-color: #333333;
}
#rechterDiv {
   float: right;
   height: 500px;
   width: 100px;
   border: 1px solid #FFFFFF;
}
#headerDiv {
   float: right;
   height: 100px;
   width: 690px;
   border: 1px solid #FFFFFF;
}
#mainDiv {
   float: right;
   height: 300px;
   width: 690px;
   border: 1px solid #FFFFFF;
}
#footerDiv {
   float: right;
   height: 100px;
   width: 690px;
   border: 1px solid #FFFFFF;
}
#navigatieDiv {
   height: 500px;
   width: 100px;
   border: 1px solid #FFFFFF;
}

body {
   margin: 0px;
   background-color: #000000;
}

Als je deze codering overneemt zul je waarschijnlijk in je browser een goed geheel tegenkomen. Maar als je in Dreamweaver zit (ik althans), dan zul je zien dat de navigatieDiv ergens onderin blijft hangen: alsof hij nog rekening houdt met de float-divjes terwijl deze toch verwijderd zijn uit de normal document flow waar de navigatieDiv nog WEL onderdeel van uitmaakt.

Met andere woorden. Wat is hier nu toch niet optimaal aan? Edit: ook in IE7 blijft navigatieDiv hangen.

[ Bericht 12% gewijzigd door JJasperO op 17-04-2008 22:16:30 ]

donderdag 17 april 2008 @ 17:13:31 #27

CraZaay

prettig gestoord

quote:
Op donderdag 17 april 2008 17:06 schreef JJasperO het volgende:

Met andere woorden. Wat is hier nu toch niet optimaal aan?

Wat is jouw graadmeter voor optimale code is dan mijn vraag. Of het er goed uitziet in Dreamweaver?

donderdag 17 april 2008 @ 17:22:25 #28

JJasperO

quote:
Op donderdag 17 april 2008 17:13 schreef CraZaay het volgende:

[..]

Wat is jouw graadmeter voor optimale code is dan mijn vraag. Of het er goed uitziet in Dreamweaver?

Hoewel de divjes zich voorbeeldig

gedragen in Opera, blijft de navigatieDiv in de Dreamweaver interface hangen. Dat is mijns inziens niet optimaal omdat het dan moeilijker is om in design view de website te overzien.

Verder vermoed ik dat het blijven hangen van een divje in de dreamweaver interface ook een indicatie is voor een technische onvolkomenheid.

donderdag 17 april 2008 @ 19:32:04 #29

CraZaay

prettig gestoord

Check je site in Opera, IE6 & 7, Safari en Firefox zou ik zeggen. Ziet dat er goed uit en is de W3C-validator het eens met je code, dan zou ik me geen zorgen maken. Meteen een goede reden om Dreamweaver de deur uit te doen

donderdag 17 april 2008 @ 21:34:43 #30

JJasperO

quote:
Op donderdag 17 april 2008 19:32 schreef CraZaay het volgende:
Check je site in Opera, IE6 & 7, Safari en Firefox zou ik zeggen. Ziet dat er goed uit en is de W3C-validator het eens met je code, dan zou ik me geen zorgen maken. Meteen een goede reden om Dreamweaver de deur uit te doen

Oei, in IE7 gaat het ook fout. Daar blijft navigatieDiv hangen. In Opera niet. Het is dus half goed

.

donderdag 17 april 2008 @ 21:39:36 #31

CraZaay

prettig gestoord

quote:
Op donderdag 17 april 2008 21:34 schreef JJasperO het volgende:

[..]

Oei, in IE7 gaat het ook fout. Daar blijft navigatieDiv hangen. In Opera niet. Het is dus half goed .

Je HTML valideert wel?

donderdag 17 april 2008 @ 21:45:51 #32

JJasperO

Ik heb de HTML erdoor gegooid, ik weet niet of ik ook iets met de externe CSS moet? Dit is het resultaat:

Passed validation, 1 warning(s)

Warning:
Character Encoding mismatch!

The character encoding specified in the HTTP header (iso-8859-1) is different from the value in the <meta> element (utf-8). I will use the value from the HTTP header (iso-8859-1) for this validation.

Klik hier voor de volledige validatie.

donderdag 17 april 2008 @ 22:44:16 #33

JJasperO

Probleem opgelost.

<div id="headerDiv"></div>
<div id="mainDiv"></div>
<div id="footerDiv"></div>

Deze divjes heb ik tezamen in 1 grote div gezet waardoor er drie grote blokken ontstaan. Links/midden/rechts. Links is normal document flow of float left of float right, midden en rechts is float right. Nu gaat alles wel goed. Waarom kan ik niet doorgronden maar het is duidelijk dat ik zoveel mogelijk moet bundelen.

dinsdag 22 april 2008 @ 17:16:10 #34

BaggerUser

ModderFokker!

ik heb nu iets wat normaal giga simpel zou moeten zijn maar kom er even niet uit, heb gewoon simpel 3 divs nodig

div 3 moet zich dus automatisch aanpassen aan de grootte van het scherm... maar met width: auto; etc klopt er allemaal geen snars van

of loop ik nu tegen een algemene css probleem op? heb er namelijk nooit last van gehad nog

De enige echte BaggerUser!
Riemen
fiets kopen

vrijdag 25 april 2008 @ 01:35:47 #35

chalrune

met inhoud in "right" word het automatisch netjes groter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

<head>
   <title>Baggeruser opzetje</title>
   
   <link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>

<body>
   
   <div id="header">

   </div>

      <div id="left">   </div>
      <div id="right"> sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs </div>


</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

body {
   font-family: Myriad Pro, Tahoma, Verdana, Arial, Sans-Serif;
   background-color: #FFF;
   font-size: 12px;
}

/*Header*/
#header {
   background-color: #0F0;
   height: 100px;
}

/*Inhoud*/
#left {
   float: left;
   height: 500px;
   color: #000;
   width: 20%;
   background-color: #F00;
}
#right {
   overflow: auto;
   float: left;
   color: #000;
   width: 80%;
   background-color: #00F;
}

vrijdag 25 april 2008 @ 07:58:02 #36

CraZaay

prettig gestoord

quote:
Op vrijdag 25 april 2008 01:35 schreef chalrune het volgende:
met inhoud in "right" word het automatisch netjes groter

En als je wilt dat dat vlak om lay-out redenen altijd zo groot is: faux columns (de breedte is geen probleem, die kun je gewoon op 100% zetten met links een marge voor het blok ernaast, de hoogte is wel een issue wat je hiermee oplost).

maandag 28 april 2008 @ 22:53:48 #37

Chandler

Weet iemand of het volgende mogelijk is in CSS/Divs en zo ja, hoe?

en dan doel ik op het eerste kopje een soortement van mouse on/over?

Just say hi!

maandag 28 april 2008 @ 23:04:49 #38

CraZaay

prettig gestoord

Wat wil je nou pecies wanneer je waar precies met je muis over gaat?

maandag 28 april 2008 @ 23:08:36 #39

Light

quote:
Op maandag 28 april 2008 22:53 schreef Chandler het volgende:
Weet iemand of het volgende mogelijk is in CSS/Divs en zo ja, hoe?

[ afbeelding ]

en dan doel ik op het eerste kopje een soortement van mouse on/over?

Dat kan in principe met de pseudo-class :hover. Dat werkt niet gegarandeerd in IE, daar is :hover eigenlijk alleen voor linkjes. Maar zo staat het niet in de W3C specificatie.

fokstok.nl

maandag 28 april 2008 @ 23:16:27 #40

Chandler

Ik doel dus op het eerste blok met de ronde border er omheen. Dit wil ik per blok laten zien en als je tabt/klikt dat deze verspringt naar het volgende blok!

Just say hi!

dinsdag 29 april 2008 @ 08:37:31 #41

CraZaay

prettig gestoord

Dat gaat Javascript worden. Waneer een input focus ontvangt moet de omliggende div de alternatieve styling krijgen.

dinsdag 29 april 2008 @ 08:56:56 #42

Chandler

Ik heb het dan maar zelf gemaakt
http://www.bruggema.nl/2/hovertest.html

Wat vinden jullie er van? en hebben jullie tips?

Dit dan alleen met mouseover! en zonder de stijling, graag zou ik comments ontvangen m.b.t. de code en eventueel tips om het te verbeteren.

En hoe zal ik de inhoud vullen? fieldset? divs?

Just say hi!

dinsdag 29 april 2008 @ 09:09:40 #43

CraZaay

prettig gestoord

Als je alleen onmouseover wilt hebben kun je natuurlijk volstaan met om je "buitenste" div's iets als:

1	onmouseover="this.className='hover'" onmouseout="this.className=''"

En in je CSS:

1
2
3
4
5
6
7

div.hover div.header {
doe iets
}

div.hover div.footer {
doe iets
}

En voor het tweede deel van je vraag: gebruik wat semantisch correct is. Fieldsets om labels (lees hoe je ze gebruikt!) en inputs die bij elkaar horen te groeperen dus.

dinsdag 29 april 2008 @ 09:24:21 #44

Chandler

Ik heb je tips overgenomen en het volgende er van gemaakt!

Werkt inderdaad veel netter, beter en overzichtelijker

http://www.bruggema.nl/2/hovertest1.html

maar nu snap ik helaas nog niet precies hoe ik moet werken met de fieldset, aangezien het gaat om veel div boxjes... heb je een handige en goede tutor in je bookmark lijst?

-edit-
In firefox krijg ik 10px spacing, was te verwachten

Just say hi!

dinsdag 29 april 2008 @ 09:40:01 #45

CraZaay

prettig gestoord

this.className overschrijft overigens de class "box" die je al gezet had.

De laatste bookmarks die ik had voor basic HTML waren in 2002 ofzo

Maar moet op te googlen zijn toch? Overigens heb jij waarschijnlijk div's nodig, aangezien voor iedere input een fieldset gebruiken geen nut heeft.

dinsdag 29 april 2008 @ 09:43:05 #46

Chandler

Ja, ik was al even met fieldset bezig geweest maar dat werkt idd niet zoals verwacht

en aangezien ik afbeeldingen wil gebruiken ben ik dus even bezig

Ik heb het nu middels divjes gemaakt, al vind ik wel dat het heel veel space in gebruik neemt maar goed, dat kost nou eenmaal fancy shit

Nu het volgende, echter vind ik als ik een lange text gebruik dit echt erg lelijk.

http://www.bruggema.nl/2/hovertest2.html

Any idea's?

[ Bericht 24% gewijzigd door Chandler op 29-04-2008 09:54:57 ]

Just say hi!

dinsdag 29 april 2008 @ 11:56:11 #47

CraZaay

prettig gestoord

Als jij er eerst eens valid HTML van maakt, dan zal ik eens kijken

dinsdag 29 april 2008 @ 12:49:11 #48

Chandler

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bruggema.nl%2F2%2Fhovertest2.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Strict

[ Bericht 63% gewijzigd door Chandler op 29-04-2008 12:57:14 ]

Just say hi!

dinsdag 29 april 2008 @ 16:47:09 #49

Chandler

quote:
Op dinsdag 29 april 2008 12:49 schreef Chandler het volgende:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bruggema.nl%2F2%2Fhovertest2.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Strict

Iemand tips?

Just say hi!

dinsdag 29 april 2008 @ 21:09:18 #50

Xcalibur

Ik ben toch echt geen dummy, maar ik heb nu iets waar ik niet uitkom....

Ik heb een tabel, met in iedere cel een INPUT veld. Ik wil dat het inputveld stijf tegen de borders van de TD aanstaat, maar wat ik ook doe: boven en onder 1px ruimte. Een image kan ik er wel stijf inzetten, door een <br /> erachter te zetten, maar bij de INPUT heeft dat geen enkel effect. Dit doet zich zowel in IE (6) als in FF voor.

Hier een vereenvoudigd codevoorbeeld (de image is ter illustratie dat dat dus wel werkt):

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

Alle mogelijke variaties met margins en paddings enzo heb ik volgens mij al geprobeerd. Wie heeft de gouden tip?

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

[CSS] voor dummies - deel 9

» digital corner

» development

» digital corner

» development