[CSS] voor dummies - deel 6 | Digital Corner (DIG)

dinsdag 13 februari 2007 @ 08:05:40 #1

CraZaay

prettig gestoord

[CSS] voor dummies.
[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5

dinsdag 13 februari 2007 @ 08:07:40 #2

CraZaay

prettig gestoord

quote:
Op dinsdag 13 februari 2007 01:14 schreef Geqxon het volgende:
Klein putnje alleen, als ik er het a-element voor gebruik kan ik de breedte niet bepalen.

Daar waar het een blok ik zag ik het in eerste instantie als paragraaf, misschien een beetje dom. Maar so far is een paragraaf het enige dat werkt

Je kan de breedte niet bepalen omdat het a element een inline element is. Zet de a op 'display: block' en je kunt de breedte wel bepalen

Paragraaf als link met onclick, niet doen

dinsdag 13 februari 2007 @ 09:04:46 #3

super-muffin

tvp

Steam - SC2

dinsdag 13 februari 2007 @ 09:25:16 #4

Geqxon

quote:
Op dinsdag 13 februari 2007 08:07 schreef CraZaay het volgende:

[..]

Je kan de breedte niet bepalen omdat het a element een inline element is. Zet de a op 'display: block' en je kunt de breedte wel bepalen

Paragraaf als link met onclick, niet doen

Thanks

Ben een beetje aan het spelen met CSS, aangezien ik op het moment vrij ranzige code maak, gecombineerd met vrij ruwe pagina's. Het kan altijd netter.

Het punt van het attribuut block binnen het display property is echter wel dat hij er een line-break achteraan gooit, iets dat ik eigenlijk totaal niet zoek. Zo'n button maken, doe ik dat eigenlijk wel goed?

[ Bericht 12% gewijzigd door Geqxon op 13-02-2007 09:33:33 ]

dinsdag 13 februari 2007 @ 15:34:12 #5

DutchErrorist

Smijn. <3

Okay ik zat dus zo even mijn myspace aan te passen (lach me maar uit

) in ieder geval dat is ook in CSS en ik wilde net een klikbaar plaatje maken, maar nu komt er een rand om heen... een zwarte.. En nu schijnt dat samen te hangen met dat u{

Maar dat lijkt me sterk want ik neem aan dat dat voor underlined staat...

Kan iemand mij vertellen hoe ik die rand weg kan halen?

Ben totaal een CSS n00b vandaar, maar ik wil het wat beter begrijpen...:

alvast bedankt!

[ Bericht 7% gewijzigd door DutchErrorist op 13-02-2007 15:43:35 ]

Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je

dinsdag 13 februari 2007 @ 16:04:40 #6

CraZaay

prettig gestoord

quote:
Op dinsdag 13 februari 2007 09:25 schreef Geqxon het volgende:

Het punt van het attribuut block binnen het display property is echter wel dat hij er een line-break achteraan gooit, iets dat ik eigenlijk totaal niet zoek. Zo'n button maken, doe ik dat eigenlijk wel goed?

Hij maakt er een block level element van, en die neemt de beschikbare ruimte in (en dwingt daarmee het volgende item naar de volgende regel).

Staat de button op zich, of in een list ofzo? Of dit de goede manier is, hangt af van de functie. Is het gewoon een link naar een andere pagina, doe het dan gewoon zo (met het a element dus). Daar is het immers voor, los van hoe je het gaa stylen.

dinsdag 13 februari 2007 @ 16:07:58 #7

Geqxon

quote:
Op dinsdag 13 februari 2007 16:04 schreef CraZaay het volgende:

[..]

Hij maakt er een block level element van, en die neemt de beschikbare ruimte in (en dwingt daarmee het volgende item naar de volgende regel).

Staat de button op zich, of in een list ofzo? Of dit de goede manier is, hangt af van de functie. Is het gewoon een link naar een andere pagina, doe het dan gewoon zo (met het a element dus). Daar is het immers voor, los van hoe je het gaa stylen.

Aan de bovenkant van mijn pagina wil ik vier buttons naast elkaar hebben, 200 pixel breed, met een padding van 10 pixels. Deze hebben een href die naar een platte pagina verwijzen, en een onclick die een ajax-functie aanroept, die een bepaalde tekst in een [div] inlaad.

dinsdag 13 februari 2007 @ 16:10:24 #8

super-muffin

quote:
Op dinsdag 13 februari 2007 15:34 schreef DutchErrorist het volgende:
Okay ik zat dus zo even mijn myspace aan te passen (lach me maar uit ) in ieder geval dat is ook in CSS en ik wilde net een klikbaar plaatje maken, maar nu komt er een rand om heen... een zwarte.. En nu schijnt dat samen te hangen met dat u{ Maar dat lijkt me sterk want ik neem aan dat dat voor underlined staat...

Kan iemand mij vertellen hoe ik die rand weg kan halen?

Ben totaal een CSS n00b vandaar, maar ik wil het wat beter begrijpen...:

alvast bedankt!

het lijkt me sterk dat het komt door u { } en u staat ook niet voor underlined.
probeer eens dit:

a img { border: 0 }

als dat niet werkt, mag ik dan een link.

Steam - SC2

dinsdag 13 februari 2007 @ 16:26:21 #9

DutchErrorist

Smijn. <3

quote:
Op dinsdag 13 februari 2007 16:10 schreef super-muffin het volgende:

[..]

het lijkt me sterk dat het komt door u { } en u staat ook niet voor underlined.
probeer eens dit:

a img { border: 0 }

als dat niet werkt, mag ik dan een link.

super-muffin = held

Nog bedank hé, het werkt namelijk

Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je

dinsdag 13 februari 2007 @ 16:31:51 #10

super-muffin

haha graag gedaan

zulk soort complimenten moedigen aan om door te gaan met helpen.

Steam - SC2

dinsdag 13 februari 2007 @ 16:34:19 #11

DutchErrorist

Smijn. <3

quote:
Op dinsdag 13 februari 2007 16:31 schreef super-muffin het volgende:
haha graag gedaan
zulk soort complimenten moedigen aan om door te gaan met helpen.

Haha

daar ben ik blij om

Nu je er toch bent, weet jij ook een goede site voor CSS tips, afkortingen etc?

Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je

dinsdag 13 februari 2007 @ 16:35:38 #12

Geqxon

quote:
Op dinsdag 13 februari 2007 16:34 schreef DutchErrorist het volgende:

[..]

Haha daar ben ik blij om

Nu je er toch bent, weet jij ook een goede site voor CSS tips, afkortingen etc?

Puur voor CU2 / myspace truukjes? Of CSS in het algemeen?

dinsdag 13 februari 2007 @ 16:36:54 #13

DutchErrorist

Smijn. <3

quote:
Op dinsdag 13 februari 2007 16:35 schreef Geqxon het volgende:

[..]

Puur voor CU2 / myspace truukjes? Of CSS in het algemeen?

Beide eigenlijk

Ik bedoel myspace is een leuk opstapje om te beginnen, maar wil het toch een beetje beter beheren

Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je

dinsdag 13 februari 2007 @ 16:42:07 #14

super-muffin

Voor CU2 had je toch mycu2.nl?

Voor het echte CSS gebruik ik vaak www.w3schools.com en af en toe gigadesign.be

Steam - SC2

dinsdag 13 februari 2007 @ 16:43:40 #15

DutchErrorist

Smijn. <3

quote:
Op dinsdag 13 februari 2007 16:42 schreef super-muffin het volgende:
Voor CU2 had je toch mycu2.nl?

Voor het echte CSS gebruik ik vaak www.w3schools.com en af en toe gigadesign.be

Haha bedankt

Maar ik heb geen cu2

of naja een hele oude dus:)

[edit] is er ook 1 specifiek voor myspace want mijn css-lijst is een beetje rommelig en wil hem eens van de grond opbouwen [/edit]

Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je

dinsdag 13 februari 2007 @ 18:50:05 #16

CraZaay

prettig gestoord

quote:
Op dinsdag 13 februari 2007 16:07 schreef Geqxon het volgende:

[..]

Aan de bovenkant van mijn pagina wil ik vier buttons naast elkaar hebben, 200 pixel breed, met een padding van 10 pixels. Deze hebben een href die naar een platte pagina verwijzen, en een onclick die een ajax-functie aanroept, die een bepaalde tekst in een [div] inlaad.

Lijkt mij een mooie kandidaat voor een unordered list

List items met daarbinnen de links. Links stylen als button, list items (li's) links floaten (of misschien dat 'display: inline' ook werkt) en klaar is Geqxon

dinsdag 13 februari 2007 @ 23:31:07 #17

fokME2

Woei, deel 6

woensdag 14 februari 2007 @ 00:19:22 #18

the_disheaver

hoi

vrijdag 16 februari 2007 @ 21:13:27 #19

Chandler

tvp, kon minder leren in het andere dubbele topic

The people who lost my respect will never get a capital letter for their name again.
Like trump...

zaterdag 17 februari 2007 @ 20:37:56 #20

MadGuy

Fever Ray

Kan Internet Explorer niet omgaan met :before en :after pseudo-elementen, of doe ik iets verkeerd? In Firefox werkt het prima. Het is ook geen grote ramp, het ziet er visueel alleen mooier uit... Maar ik begin onderhand wel te balen van de uitzonderingen van IE...

last.fm
marksluymers.nl

zaterdag 17 februari 2007 @ 21:02:05 #21

super-muffin

Van IE6 weet ik zeker dat het niet met :before en :after overweg kan. van IE7 weet ik het niet.

Steam - SC2

zaterdag 17 februari 2007 @ 21:10:57 #22

MadGuy

Fever Ray

IE7 blijkbaar ook niet. Bij Firefox wordt mijn :before elementje perfect weergegeven, maar bij IE7 dus niet. Jammer, het was slechts een detail, maar toch...

last.fm
marksluymers.nl

zaterdag 17 februari 2007 @ 21:16:03 #23

super-muffin

Jammer voor IE dan. Maar wat wou je er precies mee doen? Misschien kun je het ook anders oplossen? Misschien een voorbeeld

Steam - SC2

zaterdag 17 februari 2007 @ 21:20:38 #24

MadGuy

Fever Ray

Ach, het is niets. Het is een visueel dingetje. Twee gekleurde blokjes voor een bepaald zinnetje dat een actie aan de gebruiker voorstelt. Het staat mooier, maar in IE werkt het gewoon niet, tenzij ik het overal handmatig invoer en daar heb ik geen zin in. Dan maar gewoon zo laten staan. Krijgen de Firefox gebruikers iets extra's, en IE-mensen moeten maar op een houtje bijten.

Al had het mijn navigatie of iets dergelijks danig in de war geschopt had ik er wel wat aan gedaan, maar nu vind ik het wel mooi zo...

last.fm
marksluymers.nl

zaterdag 3 maart 2007 @ 16:50:03 #25

Nevermind

(-_-)

Ik heb wat newbiehulp nodig, volgens mij ben ik css verleerd ofzo

Ik wil aan de linkerkant een vast menu hebben, van boven tot onder aan de pagina met een hoogte van 100% en een breedte van 200px. Er omheen een margin van 5px.

Aan de rechterkant wil ik verschillende groottes aan 'panels' hebben. De pagina is opgedeeld in drie stukken, de panels kunnen 1/3e, 2/3e of de gehele breedte innemen. Hoe krijg ik dat netjes voor elkaar? Zoals je ziet staat het "TV guide" kopje te ver naar onderen, die moet automatisch naar boven schuiven. Verder is het "navigatie" kopje wel 100%, maar zorgt de marge van 5px ervoor dat er alsnog een scrollbar komt. Ik wil dus een hoogte van 100% - 10px hebben. Ook lijnen de 'panels' niet mooi uit, zoals je aan de rechterkant kunt zien.

Ik ga de css maar niet posten omdat ik beter overnieuw kan beginnen. Graag wat basics over hoe ik dit goed kan krijgen

_{FF ondersteuning maakt op zich niet zoveel uit, het is voor op de desktop. als het maar werkt in IE dus}

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

zaterdag 3 maart 2007 @ 17:12:43 #26

Geqxon

Ik zeg: Twee grote divs naast elkaar, en daar stop je vervolgend de kleine divjes zoals de indexservice, TV-guide en statistics in.

zaterdag 3 maart 2007 @ 17:35:14 #27

Nevermind

(-_-)

quote:
Op zaterdag 3 maart 2007 17:12 schreef Geqxon het volgende:
Ik zeg: Twee grote divs naast elkaar, en daar stop je vervolgend de kleine divjes zoals de indexservice, TV-guide en statistics in.

Hm, zoiets heb ik al. De linkerdiv is absoluut gepositioneerd (waarmee ik dus het probleem krijg dat hij te hoog wordt bij 100%). De body heeft een margin-left van 210px, waardoor de rest van de panels niks met de linkerdiv te maken hebben.

Maar dan blijven alle problemen bestaan. Ik heb even een schemaatje gemaakt, misschien maakt dat het probleem duidelijker:

Handig er bij te vermelden dat de panels niet een vaste plek hebben, dat verschilt per pagina.
Elk rood lijntje moet een 5px marge voorstellen. Blokje 5 moet dus aansluiten op blok 3. Blok 7 moet aansluiten op blok 6 en blok 4.

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

zondag 4 maart 2007 @ 02:15:40 #28

Geqxon

Niet echt CSS, maar toch:

1
2
3
4
5
6
7
8
9
10
11

<table width="600">
   <tr>
      <th width="150"><b>Titel 1</b></th>
      <th width="290" colspan="2"><b>Titel 2</b></th>
      <th width="80" colspan="2" class="centeralign borderleftright"><b>Titel 3</b></th>
      <th width="80" colspan="2" class="centeralign borderleftright"><b>Titel 4</b></th>
   </tr>
   <tr class="trdark">
      <td colspan="7">No records found</td>
   </tr>
</table>

Safari keurt dit pas goed zodra ik colspan="7" verander in colspan="8", terwijl ik zelf toch echt 7 kolommen tel? Iemand tips?

zondag 4 maart 2007 @ 09:36:11 #29

BaggerUser

ModderFokker!

simpel probleem:

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

<!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>
<title>BaggerUser</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" />

</head>
<body>

<div id='main'>
   <div id='body'>
      <div id='container'>
         <div id='menu'>menu</div>
         <div id='content'>content</div>
      </div>
   </div>
</div>

</body>
</html>

en css formulier

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

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, pre, blockquote, ul, ol, dl, address {margin: 0;padding: 0;}
ul,li {list-style-type: none;}

body, textarea, input {background-color: #F5F5F5; color: #000000;font: 11px/18px Arial,Tahoma;}

#main {
background-color: #ffffff;
}

#body {

}

#container {

}

#menu {
width: 300px;
float: left;
}

#content {
float: left;

het probleem is zodra er float wordt gebruikt nemen de menu en content div de achtergrond kleur niet meer over van de main div.. en worden ze grijs.. terwijl ze wit moeten blijven..

iemand ?

[ Bericht 0% gewijzigd door buzzer op 24-01-2008 20:26:17 ]

De enige echte BaggerUser!
Riemen
fiets kopen

zondag 4 maart 2007 @ 11:08:04 #30

SuperRembo

Sinds 1998

quote:
Op zondag 4 maart 2007 02:15 schreef Geqxon het volgende:
Safari keurt dit pas goed zodra ik colspan="7" verander in colspan="8", terwijl ik zelf toch echt 7 kolommen tel? Iemand tips?

Misschien snapt Safari het wel als je de eerste cell een colspan=1 geeft?

zondag 4 maart 2007 @ 13:27:43 #31

super-muffin

quote:
Op zondag 4 maart 2007 09:36 schreef BaggerUser het volgende:
simpel probleem:
[ code verwijderd ]

en css formulier
[ code verwijderd ]

het probleem is zodra er float wordt gebruikt nemen de menu en content div de achtergrond kleur niet meer over van de main div.. en worden ze grijs.. terwijl ze wit moeten blijven..

iemand ?

Je bent sowieso een accolade vergeten aan het einde.

maar je moet dan overflow: auto; aan de parent geven, wat #main is in dit geval

Steam - SC2

zondag 4 maart 2007 @ 14:03:01 #32

BaggerUser

ModderFokker!

quote:
Op zondag 4 maart 2007 13:27 schreef super-muffin het volgende:

[..]

Je bent sowieso een accolade vergeten aan het einde.

maar je moet dan overflow: auto; aan de parent geven, wat #main is in dit geval

de accolade sotnd er wel maar was niet mee gekopieerd per ongeluk

maar overflow: auto; helpt in firefox idd, maar in ie hlpt het nog niet ? wat is de hack daarvoor ?..

De enige echte BaggerUser!
Riemen
fiets kopen

zondag 4 maart 2007 @ 14:28:49 #33

super-muffin

Volgens mij moet je dan een <br /> aan het einde van de #main doen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id='main'>
   <div id='body'>
      <div id='container'>
         <div id='menu'>menu</div>
         <div id='content'>content</div>
      </div>
   </div>
   <br class="clear" />
</div>

CSS:

.clear {
clear: both; }

Maar dat weet ik niet zeker, ik heb geen IE hier :)

Steam - SC2

zondag 4 maart 2007 @ 14:54:38 #34

BaggerUser

ModderFokker!

quote:
Op zondag 4 maart 2007 14:28 schreef super-muffin het volgende:
Volgens mij moet je dan een <br /> aan het einde van de #main doen.
[ code verwijderd ]

Maar dat weet ik niet zeker, ik heb geen IE hier

gelukt, dankje!

De enige echte BaggerUser!
Riemen
fiets kopen

maandag 5 maart 2007 @ 19:01:36 #35

Coelho

BigGreenEgg

Ik ben wat aan het knutselen met CSS, en hoop dat iemand mij kan helpen. Pagina wordt gecentreerd weergegeven dmv een supercontainer DIV die voor de achtergrond zorgt. Hierin een container die gecentreerd is en een vaste breedte heeft. De container bevat een header en een footer met daartussen 3 kolommen: left, content, right. Positioneren lijkt goed te gaan, bij een meer dan schermvullende content stretcht alles mooi mee, echter wanneer de content maar een kwart pagina bevat, zweeft de footer ergens halverwege het scherm en zie je onderaan nog een stuk achtergrondkleur die ik ook links en rechts van het te centreren blok heb gebruikt.

Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13

<body>

<div id="supercontainer">
  <div id="container">
    <div id="header"></div>
<div id="left">menu</div>
<div id="right">add</div>
<div id="content">tekst</div>
<div id="footer"></div>
  </div>
</div>

</body>

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
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

#supercontainer {
   display:inline;
   top:0px;
   bottom:0px;
   background-color:#4b2f29;
   background-image:url(images/dubbelschaduw.gif);
   background-position:center;
   background-repeat:repeat-y;
   margin:0px auto;
   width:100%;
   height:100%;
}

#container {
   background-color: #fff9cd;
   border: 0px;
   color: #333333;
   margin:0px auto;
   width:770px;
   height:100%;
}

#header {
   background-color: #fff9cd;
   background-image:url(images/header.gif);
   border-bottom: 0px;
   height:125px;
   padding:0px;
}

#left {
   background-color: #fff9cd;
   float: left;
   margin: 0;
   padding: 5px;
   width: 125px;
}

#right {
   background-color: #fff9cd;
   border-color: #a27c65;
   border-style:dashed;
   border-width:1px;
   float: right;
   margin-right:5px;
   margin-top:20px;
   padding: 5px;
   width: 125px;
}

#content {
   border-left: 0;
   border-right: 0;
   margin-left: 140px;
   margin-right: 140px;
   padding:25px;
}

#footer {
   border-top: 1px solid gray;
   clear: both;
   margin:0px auto;
   padding:0px 0px 5px 0px;
   width:770px;
   height:60px;
   text-align:center;
}

Wie heeft de gouden tip?

maandag 5 maart 2007 @ 19:03:36 #36

CraZaay

prettig gestoord

Close to impossible. Er is al genoeg over geschreven her en der, maar ik heb geen enkele versie kunnen vinden die cross-browser precies deed wat 'ie hoorde te doen.

maandag 5 maart 2007 @ 19:25:45 #37

Coelho

BigGreenEgg

quote:
Op maandag 5 maart 2007 19:03 schreef CraZaay het volgende:
Close to impossible. Er is al genoeg over geschreven her en der, maar ik heb geen enkele versie kunnen vinden die cross-browser precies deed wat 'ie hoorde te doen.

shit, dat ga je niet menen... Geen idee hoe het op een andere visueel nette manier op te lossen. Zul je nog zien dat ik dadelijk mijn content moet gaan overvullen met <br> en dat keer 100

Als je een oplossing hebt die IE proof is dan ben ik (half) tevreden, ik heb niet het idee dat de doelgroep van mijn site allerlei exotische browsers gebruikt.

maandag 5 maart 2007 @ 19:42:24 #38

Nevermind

(-_-)

quote:
Op maandag 5 maart 2007 19:01 schreef Coelho het volgende:

Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:

Heb je hier wat aan?
http://www.themaninblue.com/experiment/footerStickAlt/

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

dinsdag 6 maart 2007 @ 22:19:29 #39

BaggerUser

ModderFokker!

ik ben weer eens vastgelopen...
ben bezig met een klein ajax foto boekje maar het css gedeelde doet totaal noiet wat hjet zou moeten doen.. in FF neit en in IE niet.

even ter visualisatie zie: www.mijnnaam.nl
(zie fotoalbum en speel wat met die pijltjes)

de structuur:

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

<!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>
<title>Mijn Naam</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" />

<script language='javascript' src='javascript/SubmitOnce.js'></script>
<script language='javascript' src='javascript/clienthint.js'></script>

</head>
<body>

<div id='main'>
   <div id='disclaimer'>
      <a href='http://validator.w3.org/check?uri=referer'>xhtml 1.0</a> | <a href='#'>contact</a>
   </div>
   <br />
   <div id='body'>
      <div id='container'>
         <div id='menu'>
         <br />
            <h4>menu</h4>
            <p>
            <img src='a.gif' alt=''/> 26.02.2007 <a href='http://esperanza-bolivia.com'>Esperanza-Bolivia</a>
            </p>
         </div>
         <div id='content_wrapper'>
            <br />
            <div id='content'>
               <h4>welkom,</h4>
               <p>
                  <a href="#" onClick='showHint("1")'>Fotoalbum</a>
               </p>


            </div>
         </div>
      </div>
   </div>
</div>
<div id='footer'></div>

</body>
</html>

de css file:

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

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, pre, blockquote, ul, ol, dl, address {margin: 0;padding: 0;}
ul,li {list-style-type: none;}

body, textarea, input {background-color: #F5F5F5; color: #000000;font: 11px/18px Arial,Tahoma;}

a:active
{
   color: #0984AE;
   text-decoration: underline;
}
a:hover
{
   color: #0984AE;
   text-decoration: none;
}
a:link
{
   color: #0984AE;
   text-decoration: underline;
}
a
{
   color: #0984AE;
   text-decoration: underline;
}

h4 {
font-size: 15px;
}

#main {
background-color: #ffffff;
width: 100%;
overflow: auto;
}

#disclaimer {
color: #999999;
float: right;
text-align: right;
}

#body {

}

#container {
margin: 0 10px 0 10px;

border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;

border-top-style: solid;
border-top-color: #E2E2E2;
}

#menu {
width: 300px;
float: left;
}

#content_wrapper {
min-height: 300px;
float: left;

border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;

border-left-style: solid;
border-left-color: #E2E2E2;
}

* html #content_wrapper {
  height: 300px;
}

#content_wrapper #content {
margin: 0 10px 0 10px;
vertical-align: top;
overflow: hidden;
float: left;
background-color: #0fffff;

}

#footer {
font-size: 5px;
height: 5px;
width: 100%;
background-color: #ECECEC;
}

hoop dat jullie zien waar he taan lgit heb al diverse vage problem gehad net hiermee... opeens scrollbalken... opeens verschuivende divs maar verder dan dit kwam ik niet..

heb de content div een een ander kleurtje gegeven zodat het probleem nog duidelijker wordt.

tevens gaat de content div onder de menu div zitten en makt zich 100% breed terwijl hij er netjes naast zou moeten...

help!!

(ja ik ben wanhopig

)

[ Bericht 1% gewijzigd door iteejer op 27-01-2008 10:02:31 ]

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 6 maart 2007 @ 23:27:49 #40

CraZaay

prettig gestoord

En nu ga je ons precies vertellen wat er dan niet is zoals je verwacht? Hier zie ik in FF niets geks namelijks.

woensdag 7 maart 2007 @ 13:16:51 #41

ManInLove

Real wisdom is a rare gift

quote:
Op maandag 5 maart 2007 19:01 schreef Coelho het volgende:
Ik ben wat aan het knutselen met CSS, en hoop dat iemand mij kan helpen. Pagina wordt gecentreerd weergegeven dmv een supercontainer DIV die voor de achtergrond zorgt. Hierin een container die gecentreerd is en een vaste breedte heeft. De container bevat een header en een footer met daartussen 3 kolommen: left, content, right. Positioneren lijkt goed te gaan, bij een meer dan schermvullende content stretcht alles mooi mee, echter wanneer de content maar een kwart pagina bevat, zweeft de footer ergens halverwege het scherm en zie je onderaan nog een stuk achtergrondkleur die ik ook links en rechts van het te centreren blok heb gebruikt.

Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:

HTML:
[ code verwijderd ]

CSS
[ code verwijderd ]

Wie heeft de gouden tip?

Je layout hoeft geen flexibele breedte te hebben, maar een vaste breedte voor de hele site?

Dan zou ik in die supercontainer onder de header en boven de footer nog een tweede subcontainer-divje plaatsen en die relatief tov de supercontainer plaatsen. Zet dan je overige div's absoluut gepositioneerd in die subcontainer en dan kun je de uitlijning helemaal goed plaatsen.

Wat ik op mijn site heb gedaan is deze basishack gebruiken voor de supercontainer, die werkt zowel in IE als in firefox:
http://bluerobot.com/web/css/center1.html

Succes!

woensdag 7 maart 2007 @ 14:29:47 #42

CraZaay

prettig gestoord

quote:
Op woensdag 7 maart 2007 13:16 schreef ManInLove het volgende:

Wat ik op mijn site heb gedaan is deze basishack gebruiken voor de supercontainer, die werkt zowel in IE als in firefox:
[url=http://bluerobot.com/web/css/center1.html

]http://bluerobot.com/web/css/center1.html[/quote][/url]
Ik zie geen hack, alleen normale CSS hoor

Die IE fix heb je niet echt nodig overigens, da's alleen voor IE5.x, "margin: 0 auto" zou afdoende moeten zijn.

zaterdag 10 maart 2007 @ 20:52:09 #43

Geqxon

My god, wat ik mij net toch tegen kwam:

1	<a href="#" onclick="window.location='./reactie.asp'">klik dan hier</a>

Ik zie hier al twee zeer onzinnige punten :P

zaterdag 10 maart 2007 @ 21:51:51 #44

super-muffin

Klik dan hier is helemaal geen goede tekst, voor de rest zie ik niks geks?

Steam - SC2

zaterdag 10 maart 2007 @ 23:17:17 #45

CraZaay

prettig gestoord

Je vraagt je toch af waarom iemand daarvoor javascript gebruikt. Een verwoede poging om zo obtrusive mogelijk te werken

zaterdag 10 maart 2007 @ 23:22:17 #46

Geqxon

En ook heerlijk dat je door dit soort geintjes geen "Copy link" , "Add link to bookmarks" of "Open link in new tab" kan doen, heel de browser interpertation is door de war

Om maar over de engszins perfectionistische punt-slash aan het begin te zwijgen

zondag 11 maart 2007 @ 09:47:44 #47

CraZaay

prettig gestoord

Niet toegankelijk voor zo'n beetje iedere andere user agent

zondag 11 maart 2007 @ 10:29:07 #48

Whizzkith

edit: al gelukt

[ Bericht 34% gewijzigd door Whizzkith op 11-03-2007 10:46:00 ]

zondag 11 maart 2007 @ 15:58:01 #49

Nevermind

(-_-)

http://chillosophy.nl/fok/test.html

Wat moet ik veranderen om het in IE aan de praat te krijgen? Het is helemaal niet van belang dat het andere browsers werkt, maar de browser waar het om gaat trekt zich niet echt veel aan van de boundaries en laat de tekst mooi doorlopen over de hele pagina.

De twee 'panels' waar het wel werkt hebben een height-waarde in de CSS. Dus daar zal het probleem waarschijnlijk zitten. Maar ik weet geen hoogte van de andere twee panels, omdat dat afhankelijk is van de schermgrootte.

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

woensdag 14 maart 2007 @ 15:06:41 #50

veldmuis

Met percentages werken?

Ik heb ook een vraag.
Simpel opbouwtje:
header.png
content.png
footer.png

3 plaatjes die ik als achtergrond wil gebruiken, waarbij content.png in de hoogte uitgerekt moet worden, afhankelijk van de hoeveelheid content die er op dat moment in de pagina gepropt zit.

Ik heb nu een wrapper met 3 containers daarin, en dan de plaatjes als achtergrond in de containers.

Dat werkt allemaal leuk, maar als ik nou een stuk tekst in die middelste container wil gooien komt die echt helemaal tegen de rand aan. Logisch, maar niet netjes. Hoe los je dat op? Nog een divje in het divje dat al in een divje zit, of toch anders?

woensdag 14 maart 2007 @ 15:18:56 #51

CraZaay

prettig gestoord

Padding op die content div?

woensdag 14 maart 2007 @ 15:22:32 #52

veldmuis

Geen idee wat het is, ik ga het eens bekijken!

woensdag 14 maart 2007 @ 21:28:52 #53

veldmuis

Werkte perfect, tnx!

Nog een vraag:
1 regel
2 woorden, warvan het ene links uitgelijnd moet worden, en het andere rechts. Hoe doe je dat?

woensdag 14 maart 2007 @ 21:33:14 #54

Geqxon

quote:
Op woensdag 14 maart 2007 21:28 schreef veldmuis het volgende:
Werkte perfect, tnx!

Nog een vraag:
1 regel
2 woorden, warvan het ene links uitgelijnd moet worden, en het andere rechts. Hoe doe je dat?

Het rechter woord in een span, en een float:right erin?

woensdag 14 maart 2007 @ 23:47:45 #55

CraZaay

prettig gestoord

quote:
Op woensdag 14 maart 2007 21:33 schreef Geqxon het volgende:

[..]

Het rechter woord in een span, en een float:right erin?

Da's inderdaad zo'n beetje de enige optie. Of misschien dat "text-align: justify" op het containing element ook nog werkt, maar da's dan wel min of meer een hack.

Daarnaast is het overigens meestal zo dat in het geval dat je het ene woord links wilt hebben en het andere rechts, deze qua semantiek allebei in een eigen element thuishoren, en je dus al hooks hebt om te floaten.

vrijdag 16 maart 2007 @ 10:56:29 #56

Nevermind

(-_-)

quote:
Op zondag 11 maart 2007 15:58 schreef Nevermind het volgende:
http://chillosophy.nl/fok/test.html

Wat moet ik veranderen om het in IE aan de praat te krijgen? Het is helemaal niet van belang dat het andere browsers werkt, maar de browser waar het om gaat trekt zich niet echt veel aan van de boundaries en laat de tekst mooi doorlopen over de hele pagina.

De twee 'panels' waar het wel werkt hebben een height-waarde in de CSS. Dus daar zal het probleem waarschijnlijk zitten. Maar ik weet geen hoogte van de andere twee panels, omdat dat afhankelijk is van de schermgrootte.

ik ben er nog steeds niet uit. met percentages werken is geen optie. iemand nog?

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

vrijdag 16 maart 2007 @ 17:18:35 #57

veldmuis

Heb ik weer een vraag.

Ik weet dat ik iets met een hover moet hebben, maar lees nu weer iets over dat het niet in IE gaat werken enzo: een menu-achtig iets wat weergegeven wordt als je op de knop klikt.

Is zoiets lastig te realiseren?

vrijdag 16 maart 2007 @ 22:08:14 #58

veldmuis

Iemand die me kan helpen?

zaterdag 17 maart 2007 @ 09:03:19 #59

the_disheaver

Via :visited een hover-menu maken en van de link een random getal maken (zodat je niet als je nogmaals komt de menu uitgeklapt is...

:active zou hiervoor moeten werken, maar werkt niet (het werkt wel: het menu komt na de klik wel zichtbaar, maar gaat direct weer weg...

zaterdag 17 maart 2007 @ 10:43:47 #60

SuperRembo

Sinds 1998

Het punt is dus dat IE alleen :hover ondersteunt op een link, niet op andere elementen. Zie bijv Suckerfish Dropdowns.

zaterdag 17 maart 2007 @ 11:07:46 #61

mschol

quote:
Op zaterdag 17 maart 2007 10:43 schreef SuperRembo het volgende:
Het punt is dus dat IE alleen :hover ondersteunt op een link, niet op andere elementen. Zie bijv Suckerfish Dropdowns.

sinds IE7 niet meer (wordt ook op andere elementen ondersteund)
zie hier:
http://home.mschol.eu/

en hier:
http://msdn.microsoft.com(...)properties/hover.asp

zaterdag 17 maart 2007 @ 12:27:06 #62

SuperRembo

Sinds 1998

Ok, maar dan werkt het nog steeds bij 40% van de bezoekers niet

zaterdag 17 maart 2007 @ 13:03:10 #63

mschol

quote:
Op zaterdag 17 maart 2007 12:27 schreef SuperRembo het volgende:
Ok, maar dan werkt het nog steeds bij 40% van de bezoekers niet

zie de eerste link, die werkt onder FF, IE6 & 7 (daar heb ik em onder getest
dan hebbie voor grofweg 98% van de internetters em wel goed

[ Bericht 5% gewijzigd door mschol op 17-03-2007 13:12:21 ]

zaterdag 17 maart 2007 @ 13:11:57 #64

SuperRembo

Sinds 1998

Ja met javascript erbij lukt het natuurlijk in elke browser. Een pure CSS oplossing werkt alleen cross browser (inclusief IE6) als je a:hover gebruikt.

Ik vind bij jou die mousemove handler op de body niet bepaald een fraaie oplossing. Helemaal omdat er naar de y-coördinaat gekeken wordt.

zaterdag 17 maart 2007 @ 13:12:58 #65

mschol

quote:
Op zaterdag 17 maart 2007 13:11 schreef SuperRembo het volgende:
Ja met javascript erbij lukt het natuurlijk in elke browser. Een pure CSS oplossing werkt alleen cross browser (incl IE6) als je a:hover gebruikt.

das waar

zondag 18 maart 2007 @ 10:59:03 #66

CraZaay

prettig gestoord

quote:
Op zaterdag 17 maart 2007 13:11 schreef SuperRembo het volgende:
Ja met javascript erbij lukt het natuurlijk in elke browser.

...die javascript aan heeft staan

Als je niet zeker weet dat iedere bezoeker Javascript aan heeft staan, dan is het netjes om daar rekening mee te houden ('progressive enhancement').

zondag 18 maart 2007 @ 11:01:48 #67

mschol

quote:
Op zaterdag 17 maart 2007 13:11 schreef SuperRembo het volgende:
Ik vind bij jou die mousemove handler op de body niet bepaald een fraaie oplossing. Helemaal omdat er naar de y-coördinaat gekeken wordt.

ik heb em niet zelf gebouwd, was een kant en klaar template

zondag 18 maart 2007 @ 11:03:01 #68

mschol

quote:
Op zondag 18 maart 2007 10:59 schreef CraZaay het volgende:

[..]

...die javascript aan heeft staan Als je niet zeker weet dat iedere bezoeker Javascript aan heeft staan, dan is het netjes om daar rekening mee te houden ('progressive enhancement').

tis op z'n zachts gezegd vreemd als je anno 2007 je JS uit hebt staan..
dan doet grofweg 70% v/d sites het niet (goed) meer.

zondag 18 maart 2007 @ 14:55:39 #69

CraZaay

prettig gestoord

quote:
Op zondag 18 maart 2007 11:03 schreef mschol het volgende:

[..]

tis op z'n zachts gezegd vreemd als je anno 2007 je JS uit hebt staan..
dan doet grofweg 70% v/d sites het niet (goed) meer.

Op mijn PDA staat Javascript standaard uit. Op m'n mobiel ook. Dat veel sites het dan niet meer doen is geen reden om het zelf dan niet goed te doen. Gevalletje "als hij in de sloot springt, doe jij dat dan ook".

zondag 18 maart 2007 @ 21:09:05 #70

Tijn

Powered by MS Paint

Elke keer als ik denk dat ik snap hoe CSS werkt, gebeurt er weer iets waardoor ik de haren uit m'n hoofd wil trekken

Ik ben een website aan het maken en dit is hoe het er aan de bovenkant uit moet komen te zien:

Wat ik hiervoor heb gemaakt is een div met een class die "topbar" heet, met o.a. "vertical-align: middle", een achtergrondkleur en margin en padding op 0.

Om de knopjes aan de rechterkant te krijgen, heb ik een div gemaakt met een class genaamd "topbarButtonarea" die "float: right" heeft, zodat 'ie aan de rechterkant komt te zitten. Daarin zitten twee links waaraan de class "topbarButton" hangt, die zorgt voor een randje en een achtergrondkleur, zodat het er als een knopje uitziet.

Vervolgens heb ik de div eronder, waar het supermooie plaatje in moet, een class meegegeven waarin staat "clear: both" waarmee ik hoopte dat het resultaat eruit zou zien zoals het plaatje.

Echter ziet het er vervolgens ongeveer zo uit:

Zoals je kunt zien, vallen de knopjes uit de div waar 'ie in zit, en dat is niet de bedoeling!

Hoe moet m'n HTML en CSS eruit zien om wel het resultaat te verkrijgen wat ik voor ogen heb?

Verberg de nieuwsticker

zondag 18 maart 2007 @ 21:12:38 #71

mschol

quote:
Op zondag 18 maart 2007 14:55 schreef CraZaay het volgende:

[..]

Op mijn PDA staat Javascript standaard uit. Op m'n mobiel ook. Dat veel sites het dan niet meer doen is geen reden om het zelf dan niet goed te doen. Gevalletje "als hij in de sloot springt, doe jij dat dan ook".

met dit verschil dat de site sowieso niet te bekijken valt op PDA en/of mobiel (aangezien ik zelf zo'n beetje de enige zal zijn die er iets mee doet in het begin..

zondag 18 maart 2007 @ 21:21:06 #72

HuHu

@Tijn: je kan de topbar een vaste hoogte geven.

zondag 18 maart 2007 @ 21:28:03 #73

Tijn

Powered by MS Paint

Ah, dat is een goeie, HuHu

Dan is het denk ik wel handig om het in "em" te doen en niet in pixels ofzo, want als mensen het lettertype groter willen hebben, valt het alsnog van de balk af, right?

Verberg de nieuwsticker

zondag 18 maart 2007 @ 22:42:50 #74

SuperRembo

Sinds 1998

Floats clearen gaat het mooist met overflow: auto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.topbar {
   overflow: auto;
   background-color: #666;
}

.titel {
   float: left;
}

.topbarButton {
   float: right;
   border: 1px solid #000;
   background-color: #fff;
}

1
2
3
4
5
6
7

   <div class="topbar">
      <div class="titel">Titel</div>
      <div class="topbarButtonarea">
         <div class="topbarButton">knopje</div>
         <div class="topbarButton">knopje</div>
      </div>
   </div>

Je moet de floats clearen op de container van de titel en de knopjes, clear: both op het plaatje helpt dus niet.

[ Bericht 4% gewijzigd door SuperRembo op 18-03-2007 22:48:44 ]

zondag 18 maart 2007 @ 23:09:54 #75

Tijn

Powered by MS Paint

Bedankt, SuperRembo

Dit soort commentaar vind ik altijd prettig om te horen, want ik heb nog wel eens twijfels over de oplossingen die ik zelf bedenk

[edit] Nu heb ik overigens een probleem wat ik al eerder heb gehad... 2 rijen naast elkaar (links een lijst met links, rechts tekst) die even lang moeten worden. Het probleem is dat de ene keer de linkerkant meer inhoud heeft en de andere keer de rechterkant. Ik moet even opzoeken hoe ik het de vorige keer heb opgelost, maar als iemand nog een slimme truc heeft, hoor ik die graag

Verberg de nieuwsticker

zondag 18 maart 2007 @ 23:50:00 #76

CraZaay

prettig gestoord

quote:
Op zondag 18 maart 2007 21:12 schreef mschol het volgende:

[..]

met dit verschil dat de site sowieso niet te bekijken valt op PDA en/of mobiel (aangezien ik zelf zo'n beetje de enige zal zijn die er iets mee doet in het begin..

Dan is het in dit specifieke geval niet aan de orde, maar aangezien jij over "70% van alle gebruikers" begon was mijn uitspraak van toepassing op publiekssites in het algemeen.

maandag 19 maart 2007 @ 07:51:10 #77

veldmuis

quote:
Op zondag 18 maart 2007 21:12 schreef mschol het volgende:

[..]

met dit verschil dat de site sowieso niet te bekijken valt op PDA en/of mobiel (aangezien ik zelf zo'n beetje de enige zal zijn die er iets mee doet in het begin..

Dat doe je dan vast met IE, die verbergt dat je backslashes gebruikt en gooit ze direct om naar normale slashes. Firefox niet.

maandag 19 maart 2007 @ 15:31:40 #78

mschol

quote:
Op maandag 19 maart 2007 07:51 schreef veldmuis het volgende:

[..]

Dat doe je dan vast met IE, die verbergt dat je backslashes gebruikt en gooit ze direct om naar normale slashes. Firefox niet.

uhhh he

--edit--

ow wacht ik zie wat je bedoelt..

tja force of habit..
en dat FF nou gaat mierenneuken op verkeerde slashes , daar kan ik niks aan doen

en ja ik doe het grootste deel onder IE, maar ook onder FF wordt de werking getest..

maandag 19 maart 2007 @ 16:42:25 #79

veldmuis

quote:
Op maandag 19 maart 2007 15:31 schreef mschol het volgende:

[..]

uhhh he

--edit--

ow wacht ik zie wat je bedoelt..

tja force of habit..
en dat FF nou gaat mierenneuken op verkeerde slashes , daar kan ik niks aan doen
en ja ik doe het grootste deel onder IE, maar ook onder FF wordt de werking getest..

Mierenneuken op verkeerde slashes? Nee, FF doet wat jij vraagt, IE hoopt dat je het zo bedoelt. Verschil!

dinsdag 20 maart 2007 @ 13:12:55 #80

Geqxon

Mijn god, wat is de zoekpagina van Google een rotzooi. Van een bedrijf dat dergelijke kennis van AJAX heeft, een enorme omzet maakt, en imho een enorme status heeft, is de sourcecode pure bagger. Geen doctype, geen XHTML, amper quotes om HTML eigenschappen, geen indents, niet alles net op losse regels, *ril*

dinsdag 20 maart 2007 @ 14:00:35 #81

Tijn

Powered by MS Paint

Ik zit nog steeds wat te kutten met m'n CSS en hoop dat iemand me in de goede richting kan wijzen.

Een gedeelte van de website die ik aan het maken ben, bestaat uit twee tekstvakken: eentje links en eentje rechts. Beiden bevinden zich in een container met een achtergrondkleur. Ik heb de vakken nu allebei floating gemaakt en het is de bedoeling dat de achtergrond mee rekt met het grootste vak.

Zoiets dus:

of zo:

Achter lukt het me niet om het voor elkaar te krijgen.

Het wordt al gauw zoiets:

Maar dat is natuurlijk niet goed.

Ik heb wat met "clear: left", "clear: right" en "clear: both" zitten rommelen in de container, maar dan komen de vakken alleen maar onder elkaar te staan in plaats van naast elkaar.

Hoe zorg ik ervoor dat de container zo lang wordt als het langste vak?

Verberg de nieuwsticker

dinsdag 20 maart 2007 @ 14:02:20 #82

super-muffin

aan de container overflow: auto; toevoegen.
Of een <br class=clear /> .clear { clear: both }

Steam - SC2

dinsdag 20 maart 2007 @ 14:06:31 #83

Tijn

Powered by MS Paint

Ah, hartelijk dank!

Ik had al iets geprobeerd met dat overflow: auto, maar toen had ik een typfout gemaakt zie ik nu

Verberg de nieuwsticker

dinsdag 20 maart 2007 @ 14:27:49 #84

Chandler

Ik zit weer eens met een stom css ietsje..

Ik heb de volgende lap code

1
2
3
4
5
6
7
8
9
10
11
12
13
14

        <div style='border:1px solid black; margin-bottom: 15px;'>

        <div class='head'>
            <div class='title'>C1-14</div>
            <div class='options'><a href='javascript:x(15);'><img src='./layout/images/x.gif' alt='close' border='0' /></a></div>
            <div class='clr'></div>
        </div>
        <div id='box15'>
        <ul>
            <li><a href="out.php?link=http://www.google.nl" title="googl" target="11">googl</a></li>

        </ul>
        </div>
        </div>

deze gebruik de volgende css code

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

.box {
    padding: 10px;
    width: 30%;
    float: left;
}

.box .head {
    height: 24px;
    background-color: blue;
    color: white;
}

.box .title {
    width: 70%;
    float: left;
    padding: 2px 0px 2px 5px;
}

.box .options {
    width: 30%;
    float: left;
    text-align: center;
    padding: 2px 0px 2px 0px;
}

.box .clr {
    clear: both;
}

en dan krijg je dit als uitkomst :{

nu snap ik het niet... want padding zorgt toch voor een 'inner' werking ipv buitenwerking? of doe ik iets erg fout? :D

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 maart 2007 @ 09:21:07 #85

CraZaay

prettig gestoord

quote:
Op dinsdag 20 maart 2007 14:27 schreef Chandler het volgende:
nu snap ik het niet... want padding zorgt toch voor een 'inner' werking ipv buitenwerking? of doe ik iets erg fout?

Ja, maar de padding wordt wordt wel bij de afmetingen van de box opgeteld. Dus:

box {
width: 100px;
height: 100px;
padding: 10px;
}

levert een box op van 120 bij 120 pixels.

En waarom gebruik je in hemelsnaam bijvoorbeeld een div voor de titel met class 'title'. Wat is er mis met een heading element? En doe die javascript eens netjes als <a href="#" onclick="actie(); return false">, en als je dan toch bezig bent kan dat kruisje ook mooi in de CSS en uit de HTML

woensdag 21 maart 2007 @ 09:26:26 #86

Chandler

CraZaay; je hebt gelijk maar ik probeerde nu te werken met % ipv vaste afmetingen en hoopte dat daarvoor dus ook een methode was om de juiste grootte te krijgen

-edit- maar hoe bedoel je dit met een handig element?

Ik zal nu dan even het stukje style sheet aanpassen..

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 maart 2007 @ 09:30:09 #87

CraZaay

prettig gestoord

quote:
Op woensdag 21 maart 2007 09:26 schreef Chandler het volgende:
CraZaay; je hebt gelijk maar ik probeerde nu te werken met % ipv vaste afmetingen en hoopte dat daarvoor dus ook een methode was om de juiste grootte te krijgen

-edit- maar hoe bedoel je dit met een handig element?

Die methode is of padding in percentages gebruiken, of binnen je element een div plaatsen die wel padding in pixels heeft (je hebt al elementen waarop dat zou kunnen lijkt me, zoals je ul). Dan werkt het wel.

En ik zei 'heading' element

Dus een H2 ofzo.

woensdag 21 maart 2007 @ 09:41:18 #88

Chandler

ik heb het net even met een P element geprobeerd maar dit wil ook niet echt lukken

1
2
3
4
5
6
7
8

met de volgende stylesheet

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

.box p {
    float: left;
    text-align: left;
    display:inline;
}

.box .options {
    float: right;
    text-align: right;
    padding-right: 5px;
}

.box .options .close
{
    background-image: url(./layout/images/x.gif);
    width: 20px;
    height: 20px;
}

maar wat mij dan opvalt is 1. de image is geen width: 20px;! 2. de image komt onder de blauw box..

tevens heb ik geprobeerd om het P element er bv ook onder te zetten ipv boven ivm float: maar dit resulteerde ook in niets... ik zie blijkbaar iets erg over het hoofd

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 maart 2007 @ 09:55:37 #89

CraZaay

prettig gestoord

Ik snap sowieso niet waarom het allemaal zo ingewikkeld moet.

Wat kun je niet in deze opzet?:

1
2
3
4
5
6
7

<div class="boxje">
   <h2>Titel</h2>
   <a href="#" onclick="optionsdingen(); return false">kruisje</a>
   <ul>
      <li><a href="#">lijstje met links</li>
   </ul>
</div>

Lijntje en afmeting van 'boxje' in de CSS, h2 stylen en de ul stylen. Je kruisje mag je wat mij betreft dan absoluut rechtsboven positioneren ('boxje' heeft dan ook 'position: relative' nodig).

PS:

quote:
ik heb het net even met een P element geprobeerd maar dit wil ook niet echt lukken

Heb je enig idee waarom ik een H2 koos voor de titel, en niet een P?

quote:
maar wat mij dan opvalt is 1. de image is geen width: 20px;!

De A op 'display: block' zetten. Een A is namelijk een inline element en daarvan kun je de afmetingen niet aanpassen, tenzij je er een block element van maakt. Als je nou ook nog tekst toevoegt aan de link (zoals 'sluiten') en dit verbergt via CSS ('text-indent: -9999px; overflow: hidden') dan heeft iemand zonder CSS er ook iets aan. Sterker nog, je zou kunnen overwegen om de sluit-icoontjes d.m.v. Javascript te plaatsen of zichtbaar te maken, aangezien iemand zonder Javascript er toch niets aan heeft. Die hoeft ze dan ook niet te zien. Doe dit dan wel in een apart JS-bestand (waarmee je door alle 'boxje's loopt en met DOM scripting het icoontje toevoegt danwel zichtbaar maakt).

[ Bericht 13% gewijzigd door CraZaay op 21-03-2007 10:02:29 ]

woensdag 21 maart 2007 @ 10:07:54 #90

Chandler

CraZaay; je had idd gelijk m.b.t. het P element

Ik had in de tussentijd even deze opzet gemaakt om ook de image in CSS te verwerken

maar dit resulteerde in slechte en brakke images

nu heb ik de volgende opzet....

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

Nu is de uitkomst goed, en maakt het niet uit hoeveel a'tjes ik gebruik

alleen zit ik met 1 klein probleem, de padding van top wil op een of andere manier niet met H2

als ik er tevens geen display: inline van maak krijg ik een hele diepe block....

- edit / toevoeging -

dat verbergen van de tekst is idd een handig idee, maar vraag me af of het enabelen van images m.b.t. het sluiten van velden wel echt handig is, want hoeveel gebruikers kunnen geen CSS of Javascript zien/gebruiken?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 maart 2007 @ 10:41:37 #91

CraZaay

prettig gestoord

quote:
Op woensdag 21 maart 2007 10:07 schreef Chandler het volgende:
Ik had in de tussentijd even deze opzet gemaakt om ook de image in CSS te verwerken maar dit resulteerde in slechte en brakke images nu heb ik de volgende opzet....

Dan zou ik eerder werken aan m'n skills zodat je dat alsnog goed krijgt, in plaats van dan maar een mindere oplossing te gebruiken.

quote:
Nu is de uitkomst goed, en maakt het niet uit hoeveel a'tjes ik gebruik alleen zit ik met 1 klein probleem, de padding van top wil op een of andere manier niet met H2 als ik er tevens geen display: inline van maak krijg ik een hele diepe block....

'diepe block', wat moet ik me daar bij voorstellen? Padding en 'display: inline' gaan niet echt goed samen

Waarom staat er overigens een div om die H2? Die H2 is het enige element wat in die div staat; gewoon die H2 stylen dus.

quote:
dat verbergen van de tekst is idd een handig idee, maar vraag me af of het enabelen van images m.b.t. het sluiten van velden wel echt handig is, want hoeveel gebruikers kunnen geen CSS of Javascript zien/gebruiken?

Als jij het goed web development vindt om te denken "als 90% van de bezoekers ermee kan werken vind ik het wel best", dan kun je net zo goed weer met tabellen gaan werken. Ik heb op m'n PDA in ieder geval CSS uit staan en een screenreader kan vaak weinig met Javascript. Kortom: zowat alle andere user agents dan browsers hebben er potentieel problemen mee.

Wat mij betreft moet een website toegankelijk zijn voor een zo groot mogelijk publiek. Het is niet zo dat het de dubbele hoeveelheid werk kost ofzo, als je er continu rekening mee houdt ben je net zo snel klaar.

Op jouw manier ben je een beetje halverwege: je gebruikt geen tabellen meer, maar denkt zo nog wel. Begin de volgende keer gewoon met je HTML en zorg dat die semantisch correct is (gebruik de elementen dus waar ze voor zijn), en ga dan pas aan de slag met CSS. Als het dan echt niet lukt om iets goed te stylen, dan kun je nog extra 'hooks' toevoegen (bijvoorbeeld een overkoepelende div). Nu ben je steeds je HTML aan het aanpassen t.b.v. de presentatie, en dan heb je er nog niets aan.

"Scheiding van de macht" is immers de leus: structuur in HTML, presentatie in CSS en gedrag in Javascript. Dat betekent dus ook dat elementen t.b.v. de presentatie niet in de HTML horen (je 'sluit'-icoontje) maar in de CSS, dat al je inline styles komen te vervallen en je Javascript in een aparte .js hoort te staan. Je HTML is daarmee voor iedereen bruikbaar (en niet meer dan dat), en met Javascript voeg je voor de browsers die het ondersteunen later 'progressive enhancement' toe.

Tot zover mijn betoog, en ja ik ben een purist

woensdag 21 maart 2007 @ 10:52:04 #92

Chandler

Zow; weer een lange lap tekst

De div staat er omheen omdat ik dan de achtergrond/text kleur kan aanpassen en er eventueel een border omheen kan zetten..

en ik zal eens kijken hoe goed mijn javascript skills zijn

Maar je hebt blijkbaar een beter idee in je hoofd? want deels ben ik toch al aardig op de goede weg neem ik aan?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 maart 2007 @ 10:55:18 #93

CraZaay

prettig gestoord

quote:
Op woensdag 21 maart 2007 10:52 schreef Chandler het volgende:
Zow; weer een lange lap tekst

De div staat er omheen omdat ik dan de achtergrond/text kleur kan aanpassen en er eventueel een border omheen kan zetten..

En waarom zou dat bij die H2 niet kunnen

1
2
3
4

h2 {
background: blue;
border: solid 1px black;
}

woensdag 21 maart 2007 @ 11:03:38 #94

Chandler

gosjimeine zeg

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

ziet er inderdaad heerlijk uit zonder die extra div... en dat met een blok element

ik wist helemaal niet dat het eingelijk zo mooi kon!

-edit-

maar natuurlijk gaat het nooooooit zonder problemen

het rode gedeelte is fout, dit komt door de H2 hoogte oid?! alleen zie ik niet waar ik dit kan veranderen?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 maart 2007 @ 12:12:24 #95

CraZaay

prettig gestoord

quote:
Op woensdag 21 maart 2007 11:03 schreef Chandler het volgende:
gosjimeine zeg
het rode gedeelte is fout, dit komt door de H2 hoogte oid?! alleen zie ik niet waar ik dit kan veranderen?

Los hiervan: Je hebt sowieso twee keer "background-color: blue" erin staan dus dat kan eruit, en "display: block" ook, want een H2 is van zichzelf al een block element.

Ergens in je CSS heb je dat rood gedifnieerd, misschien standaard voor iedere H2 ofzo. Je browser verzint dat er niet zelf bij

woensdag 21 maart 2007 @ 12:53:07 #96

Chandler

Nee dat rooie heb ik er zelf ik gezet

daarmee wil ik eingelijk zeggen dat de ul maximaal 5px gepadd is van boven en dit zijn al ruim 20pixels... weet dus niet waar dat vandaan komt

-edit- gefixt door margin op 0 te zetten

1
2
3
4
5
6
7

    height: 22px;
    color: white;
    padding-top: 1px;
    padding-left: 5px;
    font-size: 15px;
    background-color: blue;
    margin: 0;

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 maart 2007 @ 13:16:55 #97

SuperRembo

Sinds 1998

En waarom zit de onclick niet meteen op het plaatje? Dat scheelt een <a>.

woensdag 21 maart 2007 @ 13:40:44 #98

CraZaay

prettig gestoord

quote:
Op woensdag 21 maart 2007 13:16 schreef SuperRembo het volgende:
En waarom zit de onclick niet meteen op het plaatje? Dat scheelt een <a>.

Dat plaatje hoort sowieso niet in de HTML, maar in de CSS. Een A is dan het meest voor de hand liggende element om die onclick aan te hangen en het achtergrondplaatje weer te geven, al kun je daar over twisten. Je zou daar ook gewoon een div voor kunnen gebruiken. Voordeel van een A is dat je 'm als normale link kunt laten werken voor gebruikers zonder Javascript.

woensdag 21 maart 2007 @ 17:01:09 #99

SuperRembo

Sinds 1998

Maar als je er geen normale link achter zet dan is het behoorlijk nutteloos.

woensdag 21 maart 2007 @ 17:12:04 #100

CraZaay

prettig gestoord

quote:
Op woensdag 21 maart 2007 17:01 schreef SuperRembo het volgende:
Maar als je er geen normale link achter zet dan is het behoorlijk nutteloos.

Klopt, en dan zou je zeker Javascript moeten gebruiken om het plaatje daar neer te zetten. Het is namelijk nog nuttelozer om een elememt op te nemen waar niet-Javascript gebruikers helemaal niets aan hebben maar toch zien

woensdag 21 maart 2007 @ 19:57:10 #101

SuperRembo

Sinds 1998

Mwah, daar zou ik me niet zo druk over maken. Het is mooi als een pagina ook zonder javascript bruikbaar is, maar ik heb liever een overbodig plaatje voor een (enkele) bezoeker zonder javascript dan dat (vele) andere een trager ladende pagina hebben.

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

[CSS] voor dummies - deel 6

» digital corner

» digital corner