[CSS] voor dummies - Deel 3 | Digital Corner (DIG)

maandag 20 maart 2006 @ 15:40:57 #276

qu63

..de tijd drinkt..

quote:
Op maandag 20 maart 2006 15:19 schreef Desdinova het volgende:
in je content div een overflow:auto zetten en iets van height: 100%;
_{wtf is er gebeurd met de layout}

[CSS] voor dummies - Deel 3

It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]

maandag 20 maart 2006 @ 21:22:09 #277

Chandler

Wie ziet de FF fout!? want in IE ziet het er goed uit?

http://www.bruggema.nl/php2hex/test12312231.html

please!!!

ennuh min-width is voor FF maar dat boeit niet denk ik

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

maandag 20 maart 2006 @ 21:41:16 #278

Roonaan

Strictly

Ik zou wat clearingdivs toevoegen.

maandag 20 maart 2006 @ 22:26:46 #279

Chandler

ok, tnx... ik ga ff spelen.

-edit: gespeeld..

helpt maar een beetje... lijkt wel of ik nog meer dingen fout doe.. maar morgen weer een nieuwe dag!

[ Bericht 80% gewijzigd door Chandler op 20-03-2006 23:10:50 ]

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

dinsdag 21 maart 2006 @ 11:52:39 #280

Roonaan

Strictly

quote:
Op maandag 20 maart 2006 22:26 schreef Chandler het volgende:
ok, tnx... ik ga ff spelen.

-edit: gespeeld..

helpt maar een beetje... lijkt wel of ik nog meer dingen fout doe.. maar morgen weer een nieuwe dag!

Hij zit netjes nu toch?

dinsdag 21 maart 2006 @ 12:22:52 #281

Castor

Obey the rules, miss the fun

quote:
Op zaterdag 18 maart 2006 18:31 schreef wonko het volgende:

[..]

Zover was ik nog niet. Euh...een voorbeeld of een tutorial?
[..]

Zo zou ik het ongeveer doen, zonder javascript.

HTML:

1
2
3
4
5
6
7
8
9
10
11

<div id="nav">
<ul>
<li><a class="go" href="index.html">Home</a></li>
<li class="test"><a href="#">Exterieur</a></li>
<li><a href="#">Interieur</a></li>
<li><a href="#">Hekwerkonderdelen</a></li>
<li><a href="#">Tuindecoratie</a></li>
<li><a href="toeleveren.html">Toeleveren</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>

CSS:

1
2
3
4

#nav ul {list-style:none;margin:0;padding:0;}
#nav li {margin:0;padding:0;width:130px;border-bottom:1px solid white;}
#nav li a {color:white;text-decoration:none;display:block;width:127px;background-color:#298CA5;line-height:2em;vertical-align:middle;padding-left:3px;}
#nav li a:hover {background-color:#4AB5D6;}

Voor meer voorbeelden check: http://css.maxdesign.com.au/listamatic/

Castor's Photostream op Flickr

dinsdag 21 maart 2006 @ 15:07:04 #282

Tackleberry

.

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

* { box-sizing: border-box; -moz-box-sizing: border-box;
}

HTML { height: 100%;
}

BODY {
   font-family: tahoma;
   text-align: justify;
}

.content TABLE { padding: 10px;
}

.contentform TD { padding: 5px;
}

.tekst {
   font-size: 15px;
}

.tekstklein { font-size: 14px;
}

.onderschrift { font-size: 10px;
}

.titel { font-weight: bold;
font-size: 25px;
text-align: center;
margin: 5px;
}

.koptekst { font-weight: bold;
font-size: 20px;
text-align: center;
margin: 5px;
}

A:link { color: #0033CC;
font-weight: bold;
text-decoration: none;
}

A:visited { color: #FF3300;
font-weight: bold;
text-decoration: none;
}

A:hover { color: #0099CC;
font-weight: bold;
text-decoration: none;
}

UL, TD { font-family: tahoma;
font-size: 15;
list-style-type: disc;
list-style-position: outside;
margin-left: 10px;
padding-left: 10px;
}

CSS-newbie alert!

Ik was vandaag bezig om mijn CSS een beetje op te ruimen, er stonden heel eigenschappen in die via overerving meegenomen kunnen worden. Dus wilde ik aan body twee vaste eigenschappen (font-family en text-align) toekennen.

Als ik <p class="tekst"> gebruik, moet de text-align toch ook justify zijn, zoals in body is vastgesteld? Het resultaat is dat de tekst 'gewoon' wordt afgebeeld, dus NIET als justify.
Zie ik hier totaal iets over het hoofd? Staan er dingen totaal verkeerd in mijn stylesheet?

Nu kan ik best alle eigenschappen herhalen in mijn stylesheet, maar ik wil een nette stylesheet hebben.

.

dinsdag 21 maart 2006 @ 15:22:48 #283

Roonaan

Strictly

afhankelijk van je doctype is je css wel of niet case-sensitive.

Het kan dus zijn dat je
body {} moet gebruiken ipv BODY {}

-r-

dinsdag 21 maart 2006 @ 15:50:08 #284

Tackleberry

.

quote:
Op dinsdag 21 maart 2006 15:22 schreef Roönaän het volgende:
afhankelijk van je doctype is je css wel of niet case-sensitive.

Het kan dus zijn dat je
body {} moet gebruiken ipv BODY {}

-r-

Die had ik beide al (stom toevallig overigens) geprobeerd. Doctype had ik niet (foei, ik weet niet) toegevoegd in mijn HTML documenten. Onderstaande is nu toegevoegd.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
_{Hierdoor werd wel het centreren van de website opgeheven, maar dat was zo opgelost.}

Nu wordt alles weergegeven zoals ik het verwacht, thanks

Overigens, staan er nog stomme dingen in die stylesheet? Ik ben er nog niet helemaal in thuis namelijk.

[edit]
Hmm, nu is de inhoud van het IFRAME verneukt in IE... Firefox past zich aan de inhoud aan, maar Internet Explorer plant in fullscreen al horizontale en verticale scrollbalken in de IFRAME... Zodra de content in de hoogte niet in het IFRAME past, komt er een verticale scrollbalk. Hierdoor wordt de inhoud te breed (aangezien die scrollbalk erbij komt) en komt er ook een horizontale scrollbalk...

Mijn index.html (ja dit is het CSS topic, maar dit komt voort uit een CSS '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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Stichting Van Zessen Klaar</title>
<LINK HREF="stylesheet.css" REL="stylesheet" TYPE="text/css">
</head>
<body>

<table align="middle" width="100%" height="100%">
  <tr>
    <td align="middle" valign="middle" width="100%">

   <table border="0" cellspacing="0" cellpadding="0">
     <tr valign="top">
       <td width="150" height="100"><img src="images/vzk-logo.gif" width="150" height="100"></td>
      <td width="650" height="100"><img src="images/vzk-banner.jpg" width="650" height="100"></td>
     </tr>
     <tr valign="top">
       <td width="150" height="*"><img width="150" src="images/menu_v3.png" height="400" USEMAP="#menu" border="0">
        <MAP NAME="menu">
      <AREA SHAPE="rect" COORDS="0,0,150,50" HREF="hoofdpagina.html" TARGET="content" TITLE="Hoofdpagina">
      <AREA SHAPE="rect" COORDS="0,51,150,100" HREF="stichting.html" TARGET="content" TITLE="De stichting">
      <AREA SHAPE="rect" COORDS="0,101,150,150" HREF="actueel.html" TARGET="content" TITLE="Actueel">
      <AREA SHAPE="rect" COORDS="0,151,150,200" HREF="samenwoners.html" TARGET="content" TITLE="Samenwoners">
      <AREA SHAPE="rect" COORDS="0,201,150,250" HREF="sponsoren.html" TARGET="content" TITLE="Sponsoren">
      <AREA SHAPE="rect" COORDS="0,251,150,300" HREF="locatie.html" TARGET="content" TITLE="Locatie">
      <AREA SHAPE="rect" COORDS="0,301,150,350" HREF="links.html" TARGET="content" TITLE="Links">
      <AREA SHAPE="rect" COORDS="0,351,150,400" HREF="contact.html" TARGET="content" TITLE="Contact">
      </MAP></td>
      <td width="650" height="447"><IFRAME SRC="hoofdpagina.html" WIDTH="650" HEIGHT=100%" frameborder="0" name="content">Foutmeldingstekst</IFRAME></td>
      </tr>
   </table>

    </td>
  </tr>
</table>

</body>
</html>

.

dinsdag 21 maart 2006 @ 19:33:03 #285

Chandler

quote:
Op dinsdag 21 maart 2006 11:52 schreef Roönaän het volgende:
Hij zit netjes nu toch?

Zie het verschil nu in IE / FF

dat vind ik weer niet zo netjes

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

dinsdag 21 maart 2006 @ 20:53:36 #286

ikke_ook

Ik lees net op w3schools dat <u> en <s> deprecated elements zijn, terwijl <b> en <i> dat niet zijn....
Waarom is dat zo?En moet je underline en strike dan met css gaan toepassen?

Vogelaars.nl

dinsdag 21 maart 2006 @ 21:34:32 #287

Roonaan

Strictly

quote:
Op dinsdag 21 maart 2006 19:33 schreef Chandler het volgende:

[..]

Zie het verschil nu in IE / FF dat vind ik weer niet zo netjes

Enige verschil is de marge onder die foeilelijke kop toch?

dinsdag 21 maart 2006 @ 22:29:49 #288

Chandler

Ach er zit nu iets meer in, maar de kop vind je foeilelijk? heb je suggesties?

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

woensdag 22 maart 2006 @ 09:27:49 #289

wonko

Fap

quote:
Op dinsdag 21 maart 2006 12:22 schreef Castor het volgende:

[..]

Zo zou ik het ongeveer doen, zonder javascript.

HTML:
[ code verwijderd ]

CSS:
[ code verwijderd ]

Voor meer voorbeelden check: http://css.maxdesign.com.au/listamatic/

Mijn dank!!
Ik gaat aan de slag.

Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.

woensdag 22 maart 2006 @ 15:24:42 #290

Tackleberry

.

De inhoud van een IFRAME is verneukt in IE... Firefox past zich aan de inhoud aan, maar Internet Explorer plant in fullscreen al horizontale en verticale scrollbalken in de IFRAME... Zodra de content in de hoogte niet in het IFRAME past, komt er een verticale scrollbalk. Hierdoor wordt de inhoud te breed (aangezien die scrollbalk erbij komt) en komt er ook een horizontale scrollbalk...

Mijn index.html (ja dit is het CSS topic, maar dit komt voort uit een CSS 'probleem / oplossing'')

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Stichting Van Zessen Klaar</title>
<LINK HREF="stylesheet.css" REL="stylesheet" TYPE="text/css">
</head>
<body>

<table align="middle" width="100%" height="100%">
  <tr>
    <td align="middle" valign="middle" width="100%">

   <center>
   <table border="0" cellspacing="0" cellpadding="0">
     <tr valign="top">
       <td width="150" height="100"><img src="images/vzk-logo.gif" width="150" height="100"></td>
      <td width="*" height="100"><img src="images/vzk-banner.jpg" width="650" height="100"></td>
     </tr>
     <tr valign="top">
       <td width="150" height="*"><img width="150" src="images/menu_v3.png" height="400" USEMAP="#menu" border="0">
        <MAP NAME="menu">
      <AREA SHAPE="rect" COORDS="0,0,150,50" HREF="hoofdpagina.html" TARGET="content" TITLE="Hoofdpagina">
      <AREA SHAPE="rect" COORDS="0,51,150,100" HREF="stichting.html" TARGET="content" TITLE="De stichting">
      <AREA SHAPE="rect" COORDS="0,101,150,150" HREF="actueel.html" TARGET="content" TITLE="Actueel">
      <AREA SHAPE="rect" COORDS="0,151,150,200" HREF="samenwoners.html" TARGET="content" TITLE="Samenwoners">
      <AREA SHAPE="rect" COORDS="0,201,150,250" HREF="sponsoren.html" TARGET="content" TITLE="Sponsoren">
      <AREA SHAPE="rect" COORDS="0,251,150,300" HREF="locatie.html" TARGET="content" TITLE="Locatie">
      <AREA SHAPE="rect" COORDS="0,301,150,350" HREF="links.html" TARGET="content" TITLE="Links">
      <AREA SHAPE="rect" COORDS="0,351,150,400" HREF="contact.html" TARGET="content" TITLE="Contact">
      </MAP></td>
      <td width="*" height="447"><IFRAME SRC="hoofdpagina.html" WIDTH="100%" HEIGHT=100%" frameborder="0" name="content">[knip errortekst]</IFRAME></td>
      </tr>
   </table>
   </center>

    </td>
  </tr>
</table>

</body>
</html>

Als dit met CSS op te lossen is, dit is mijn stylesheet:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML LANG="nl">
<HEAD>
<TITLE>Stylesheet</TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="content-style-type" CONTENT="text/css">
<META NAME="robots" CONTENT="noindex, nofollow">

* { box-sizing: border-box; -moz-box-sizing: border-box;
}

HTML { height: 100%;
}

BODY {
   font-family: tahoma;
   text-align: justify;
}

.content TABLE { padding: 10px;
}

.tekst {
   font-size: 15px;
}

.tekstklein { font-size: 14px;
}

.onderschrift { font-size: 10px;
}

.titel { font-weight: bold;
font-size: 25px;
text-align: center;
margin: 5px;
}

.koptekst { font-weight: bold;
font-size: 20px;
text-align: center;
margin: 5px;
}

A:link { color: #0033CC;
font-weight: bold;
text-decoration: none;
}

A:visited { color: #FF3300;
font-weight: bold;
text-decoration: none;
}

A:hover { color: #0099CC;
font-weight: bold;
text-decoration: none;
}

UL, TD { font-family: tahoma;
font-size: 15;
list-style-type: disc;
list-style-position: outside;
margin-left: 10px;
padding-left: 10px;
}

</HEAD>
</HTML>

.

woensdag 22 maart 2006 @ 15:30:19 #291

DionysuZ

Respect my authority!

wat doet

1
2
3
4
5
6
7
8
9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML LANG="nl">
<HEAD>
<TITLE>Stylesheet</TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="content-style-type" CONTENT="text/css">
<META NAME="robots" CONTENT="noindex, nofollow">
</HEAD>
</HTML>

in je stylesheet?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

woensdag 22 maart 2006 @ 15:36:55 #292

Tackleberry

.

quote:
Op woensdag 22 maart 2006 15:30 schreef DionysuZ het volgende:
wat doet
[ code verwijderd ]

in je stylesheet?

Ik ben uitgegaan van al bestaande document, dus ik heb een verkeerd voorbeeld gebruikt.

Die code is nu verwijderd, maar dat maakt voor mijn probleem verder geen verschil. Bedankt voor de tip iig.

.

woensdag 22 maart 2006 @ 17:23:00 #293

DaFan

Is het mogelijk om de kleuren van Links/Alinks en Vlinks in CSS onder te brengen?

1	<body link="kleur" vlink="kleur" alink="kleur">

werkt wel, maar is pokkewerk.

Bvd.

woensdag 22 maart 2006 @ 17:27:16 #294

Desdinova

Olaa

<IFRAME SRC="hoofdpagina.html" WIDTH="100%" HEIGHT=100%" frameborder="0" name="content" scrolling="no">[knip errortekst]</IFRAME>

_{gvd die reageer knop zit verwarrend dicht bij het invoeren}

_{en wanneer wordt die layout gefixed}

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 22 maart 2006 @ 17:29:39 #295

DaFan

Pas als bovenstaande code-verneukers hun reply aanpassen.
(Vooral Wonko)

woensdag 22 maart 2006 @ 17:40:15 #296

Desdinova

Olaa

a {
color: kleur;
}
a:visited {
color:kleur;
}
a:active {
color:kleur;
}

en
a:hover{
color: kleur;
}

is er ook nog

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 22 maart 2006 @ 17:43:10 #297

DaFan

Hartelijk dank

woensdag 22 maart 2006 @ 17:54:09 #298

the_disheaver

quote:
Op woensdag 22 maart 2006 17:29 schreef DaFan het volgende:
Pas als bovenstaande code-verneukers hun reply aanpassen.
(Vooral Wonko)

_{Lang leve Opera met de 'Fit to window width'-functie Geen echte oplossing, maar ik heb er geen last van}

woensdag 22 maart 2006 @ 18:59:37 #299

Tackleberry

.

quote:
Op woensdag 22 maart 2006 17:27 schreef Desdinova het volgende:
<IFRAME SRC="hoofdpagina.html" WIDTH="100%" HEIGHT=100%" frameborder="0" name="content" scrolling="no">[knip errortekst]</IFRAME>

Dat is een oplossing, maar zorgt weer voor een ander probleem; je krijgt (logischerwijs) geen scrollbalk te zien. Maar de content is op sommige pagina's wel langer dan het iframe hoog is...

Andere oplossing? Toevoegingen?

.

woensdag 22 maart 2006 @ 23:15:32 #300

WebForce

Kijk mij nou!

Goedenavond! Ik heb een standaard pivot weblogje al een tijdje in beheer, maar nu kom ik er eigenlijk pas achter dat het helemaal niet lekker in elkaar zit met IE. In Firefox doet 'ie het prima...
Dit is de site. In FF ziet die er dus prima uit, maar als je in IE het venster kleiner maakt zie je dat de onderste twee kolommen (div) blijven ; staan'...

Alles zit 'in' een body, de rechter kolom heet heeft de div 'centercolumn', de rechter 'rightcolumn' en het plaatje/logo 'header'.

Zo zit een gedeelte van de css eruit:

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

body {
   padding: 0px;
   width: 807px;
   background: #DDD;
   margin: auto;
}

#centercolumn {
   padding: 6px 0px;
   position: absolute;
   width: 600px;
}

#rightcolumn {
   position: absolute;
   margin-left: 600px;
   width: 205px;
}

#header {
}

Ik heb lopen zoeken hoe dat precies zit met position etc., maar ik kom er niet uit

. Wie helpt?

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

[CSS] voor dummies - Deel 3

» digital corner

» digital corner