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

maandag 24 maart 2008 @ 16:46:44 #1

CraZaay

prettig gestoord

Vorige topics:

[CSS] voor dummies.
[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5
[CSS] voor dummies - deel 6
[CSS] voor dummies - Deel 7
[CSS] voor dummies - Deeltje 8

Mijn laatste post in deel 8:

quote:
Op maandag 24 maart 2008 16:24 schreef CraZaay het volgende:
IE voor de Mac moet je niet meer ondersteunen, niemand gebruikt die meer, wordt sinds 1999 niet meer ontwikkeld en kun je niet eens meer downloaden bij MS

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

En voor box model problemen: met welk doctype?

maandag 24 maart 2008 @ 16:54:36 #2

Fliepke

Serieuze waarheid

Ik heb wat te leuk zitten spelen met margins en paddings, dat gaat wel eens mis

Komt goed. Irriteert me alleen

maandag 24 maart 2008 @ 17:02:48 #3

donroyco

dus niet Donroyco

tvp

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

maandag 24 maart 2008 @ 17:20:22 #4

CraZaay

prettig gestoord

Met een valid doctype heb ik qua box model eigenlijk zelden problemen met inconsistencies tussen IE en andere browsers.

maandag 24 maart 2008 @ 17:47:06 #5

Fliepke

Serieuze waarheid

Dit probleem, dat staat lost van je doctype

maandag 24 maart 2008 @ 20:26:47 #6

CraZaay

prettig gestoord

quote:
Op maandag 24 maart 2008 17:47 schreef Fliepke het volgende:
Dit probleem, dat staat lost van je doctype

Ik denk het niet

Als jij met een valid doctype een browser in standards mode laat renderen dan gebruikt zowel IE (6 & 7), Firefox, Safari, etc allemaal het W3C box model

maandag 24 maart 2008 @ 21:33:28 #7

Fliepke

Serieuze waarheid

hmm lijkt er idd op dat je gelijk hebt.

Ik ga er eens naar kijken.

(heb even wat zitten googlen

)

* Fliepke is n00b en biedt zijn nederige domheid aan

maandag 24 maart 2008 @ 21:36:07 #8

CraZaay

prettig gestoord

Hehe, no prob. Vandaar dat ik naar het gebruikte doctype vroeg, want dat scheelt héél veel box model koppijn

maandag 24 maart 2008 @ 21:49:28 #9

Fliepke

Serieuze waarheid

quote:
Op maandag 24 maart 2008 21:36 schreef CraZaay het volgende:
Hehe, no prob. Vandaar dat ik naar het gebruikte doctype vroeg, want dat scheelt héél veel box model koppijn

hehe, ik ben gewoon gestopt

Ga morgne wel verder

maandag 24 maart 2008 @ 23:00:03 #10

mcDavid

quote:
Op maandag 24 maart 200821:49 schreef Fliepke het volgende:

[..]

hehe, ik ben gewoon gestopt Ga morgne wel verder

Ja hoe moet ik nu nog een nuttige TVP doen dan?

woensdag 9 april 2008 @ 12:32:42 #11

Tuvai.net

Had net al een nieuw topic gepost omdat ik dit topic niet eens meer zag in de topiclist, maar goed...

Okee, een 100% height layout zonder al te veel poespas, tot daar aan toe. Dat is relatief eenvoudig en vrij vaak gedaan, als volgt (effe snel voorbeeld):

CSS

1
2
3
4
5
6
7
8
9
10

body, html{
border-width:0;
height:100%;
margin:0;
padding:0;

}
#container{
height:100%;
}

HTML

1
2
3
4
5
6
7
8
9

Goed, relatief eenvoudig en tevens 23424242 keren gedocumenteerd op Internet. Nu wil ik voor mezelf effe een simpel pagina`tje bouwen voor een kleine applicatie. Nu wil ik als het ware het volgende:

Ik wil dus een pagina zoals hierboven. De rode balk is een header waar naderhand alle leuke dingetjes als het logo en de navigatie in komt, deze header moet altijd 100px height hebben en zich over de volledige paginabreedte stretchen (100% width). Deze plak ik direct binnen mijn container en positioneer ik absolute.

In de container ligt ook een divje 'content', meteen na de div 'header'. Div 'content' bevat weer een divje 'innercontent', die in bovenstaande afbeelding blauw is. Om 'innercontent' moet een ruimte van 10px zitten en boven 'content' een margin van 100px (anders valt 'ie onder de header), en hier gaat het gewoon gigantisch de fout in; de pagina valt buiten mijn viewport (met als gevolg natuurlijk een scrollbarretje). Hoe op te lossen?

Voorbeeld staat hier: http://www.tuvai.net/zooi/cee-es-es/

Normaal werk ik nooit met 100% height layouts, en mij lijkt het iets relatief eenvoudigs, toch echter flinke problemen mee zoals je wel kunt zien. :P

FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:23:14 #12

Swetsenegger

Egocentrische Narcist

http://test.xploise.nl/floattest.html

Simpel verhaal. containerdivje met een blauwe achtergrond.
Daarbinnen 2 floating divs genest. 1 met een transparante background en 1 met een rode background.

De bedoeling is nu dat de linkerbalk de blauwe achtergrond krijgt van de containerdiv. Immers zal de linkerdiv anders 'korter' zijn dan de rechter div met volledige content.

Maar.... de container div 'groeit' niet mee met de content als dit floats zijn.... Hoe los ik dit op? (in dit voorbeeld kan je met een background image aan de gang, maar in de uiteindelijke pagina is dit stuk onderdeel van een groter geheel.)

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:24:08 #13

Swetsenegger

Egocentrische Narcist

CSS 100% viewport/canvas heights zijn een drama tuvai. Ik zou je bijna aanraden een tabel te gebruiken....

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

woensdag 9 april 2008 @ 13:29:25 #14

Tuvai.net

quote:
Op woensdag 9 april 2008 13:23 schreef Swetsenegger het volgende:
http://test.xploise.nl/floattest.html

Simpel verhaal. containerdivje met een blauwe achtergrond.
Daarbinnen 2 floating divs genest. 1 met een transparante background en 1 met een rode background.

De bedoeling is nu dat de linkerbalk de blauwe achtergrond krijgt van de containerdiv. Immers zal de linkerdiv anders 'korter' zijn dan de rechter div met volledige content.

Maar.... de container div 'groeit' niet mee met de content als dit floats zijn.... Hoe los ik dit op? (in dit voorbeeld kan je met een background image aan de gang, maar in de uiteindelijke pagina is dit stuk onderdeel van een groter geheel.)

Dat komt doordat je alles aan het floaten bent (inclusief div right, waar de content nu in staat), dan gaat 'ie altijd vaag doen als je de hoogte in gaat werken. Probeer anders div.right eens margin-left:150px; mee te geven en de float er van weg te halen.

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

<!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="en" lang="en">
   <head>
   <style>
   #container{
      position:relative;
      width:950px;
      padding:0;
      background-color:blue;
   }

   .left{
      float:left;
      width:150px;
      padding:0;
      margin:0;
      background-color:transparent;
   }

   .right{
      margin-left:150px;
      padding:0;
      background-color:red;
      width:800px;
   }</style>
   </head>
   <body>
      <div id="container">
         <div class="left">Left</div>
         <div class="right">
            <p>bla</p>
            <p>bla</p>
            <p>bla</p>
         </div>
      </div>
   </body>
</html>

Tevens was je de DOCTYPE declaratie vergeten.

woensdag 9 april 2008 @ 13:31:12 #15

Tuvai.net

quote:
Op woensdag 9 april 2008 13:24 schreef Swetsenegger het volgende:
CSS 100% viewport/canvas heights zijn een drama tuvai. Ik zou je bijna aanraden een tabel te gebruiken....

Vertel mij wat.

100% height is eigenlijk best wel eenvoudig te doen met kleine website`jes/apps waar weinig van content in zit en waar je toch NOOIT buiten de viewport zult vallen. Maar het gaat gewoon door margin en padding gigantisch de mist in. Lijkt wel alsof ze met 100% height layouts ineens helemaal niet meer doen wat ze moeten doen (dus margin als in ruimte BUITEN het betreffende element en padding de ruimte IN het betreffende element).

Horizontaal, dus met widths, gaat het prima. Je kunt tegen een element al heel eenvoudig width:700px; margin:0 100px; laten doen wat gewoon perfect werkt.

FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:32:22 #16

Swetsenegger

Egocentrische Narcist

Hee, die had ik in de 'echte' omgeving geprobeerd maar werkte niet. NU wel...

Eens zien wat ik verkeerd gedaan had

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:33:18 #17

Swetsenegger

Egocentrische Narcist

quote:
Op woensdag 9 april 2008 13:31 schreef Tuvai.net het volgende:

[..]

Vertel mij wat. 100% height is eigenlijk best wel eenvoudig te doen met kleine website`jes/apps waar weinig van content in zit en waar je toch NOOIT buiten de viewport zult vallen. Maar het gaat gewoon door margin en padding gigantisch de mist in. Lijkt wel alsof ze met 100% height layouts ineens helemaal niet meer doen wat ze moeten doen (dus margin als in ruimte BUITEN het betreffende element en padding de ruimte IN het betreffende element).

Klopt, ik heb wel hacks gezien die een footer altijd strak onderaan de viewport positioneren. Maar eigenlijk geen zuivere css oplossing.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

woensdag 9 april 2008 @ 15:41:03 #18

mcDavid

quote:
Op woensdag 9 april 200813:23 schreef Swetsenegger het volgende:
http://test.xploise.nl/floattest.html

Simpel verhaal. containerdivje met een blauwe achtergrond.
Daarbinnen 2 floating divs genest. 1 met een transparante background en 1 met een rode background.

De bedoeling is nu dat de linkerbalk de blauwe achtergrond krijgt van de containerdiv. Immers zal de linkerdiv anders 'korter' zijn dan de rechter div met volledige content.

Maar.... de container div 'groeit' niet mee met de content als dit floats zijn.... Hoe los ik dit op? (in dit voorbeeld kan je met een background image aan de gang, maar in de uiteindelijke pagina is dit stuk onderdeel van een groter geheel.)

In het vorige topic ook al zo'n probleem opgelost.
Wat het beste werkt is er een lege div onder zetten, met alleen clear:both als css stijl.
Omdat die door de clear:both niet naast andere objecten mag gaan staan, gaat'ie er onder staan, en weet de parent div weer hoe hoog zijn inhoud is.

-edit- Als je ook een footer hebt, kun je die ook voor dit doel gebruiken.

FOK!-Schrikkelbaas woensdag 9 april 2008 @ 15:46:07 #19

Swetsenegger

Egocentrische Narcist

ook met footer, die uiteraard al een clear:both had, groeit de container div niet mee met de langste geneste float.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

vrijdag 11 april 2008 @ 08:54:46 #20

webbyplus

Hallo,

Ik zit met een website probleempje.
Ergens heb ik iets gewijzigd in mijn website layout wat er voor gezorgd heeft dat het vernacheld getoond wordt in internetexplorer. In firefox loopt ie wel perfect.
Kan iemand zien wat er mis is? Mijn site www.voetbalmanager.net , mijn css: http://www.dutchville.com/kid/images/Orange.css

bvd
webby

to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true

vrijdag 11 april 2008 @ 09:08:15 #21

donroyco

dus niet Donroyco

quote:
Op vrijdag 11 april 2008 08:54 schreef webbyplus het volgende:
Hallo,

Ik zit met een website probleempje.
Ergens heb ik iets gewijzigd in mijn website layout wat er voor gezorgd heeft dat het vernacheld getoond wordt in internetexplorer. In firefox loopt ie wel perfect.
Kan iemand zien wat er mis is? Mijn site www.voetbalmanager.net , mijn css: http://www.dutchville.com/kid/images/Orange.css

bvd
webby

Hier is niks te zien

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

vrijdag 11 april 2008 @ 09:17:16 #22

CraZaay

prettig gestoord

quote:
Op vrijdag 11 april 2008 08:54 schreef webbyplus het volgende:

Ergens heb ik iets gewijzigd in mijn website layout wat er voor gezorgd heeft dat het vernacheld getoond wordt in internetexplorer.

Wat heb je gewijzigd? Dat beperkt het zoeken een heel stuk

vrijdag 11 april 2008 @ 09:20:03 #23

webbyplus

Ik heb alleen een aanpassing gedaan aan de blockquote. Verder niets. Misschien iets in de index file dat ik verkeerd heb aangepast...

to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true

vrijdag 11 april 2008 @ 09:22:07 #24

webbyplus

quote:
Op vrijdag 11 april 2008 09:08 schreef donroyco het volgende:

[..]

Hier is niks te zien

Zo ziet het er uit in IE:

to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true

vrijdag 11 april 2008 @ 10:35:34 #25

webbyplus

Arghhh ik ben er al achter.
Ik heb deze domein geregistreerd en hij verwijst door naar mijn webhosting. Het doorsturen gebeurd door middel van een pagina-groot frame met daarin de gelinkte pagina's op mijn webhosting. Door middel van javascript vebreek ik die frame... En dat was ik dus vergeten mee te nemen in mijn html

Is weer gefixed!

to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true

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