[CSS] div'jes, links en opmaak daarvan

[F4T4L_3RR0R]

Ik ben voor het eerst bezig met DIV's, waar ik voorheen altijd gebruik maakte van tabellen.

Ik stuit op een klein probleempje waar ik geen antwoord voor heb kunnen vinden:

<div id="box1"><a href="index.php" class="wit">HOME</a></div>

code:

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: none;
}
.wit {
    color: #FFFF66;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}
div#box1  {
    background-color: #000000;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    float: left;
    width: 100px;
    height: 18px;
    text-align: center;
}

Deze opmaak laat een zwart rechthoekje (DIV) met een wit gekleurde link zien, als men over de link gaat met de muisaanwijzer wordt deze onderlijnt. Dat werkt allemaal goed.

Maar nu staat de opmaak van de DIV er dubbel in, nu wil ik dit veranderen naar:

<div id="box1"><a href="index.php">HOME</a></div>

En daarbij de class .wit laten vervallen voor een zo schoon mogelijk CSS code. De opmaak staat immer ook al in de class div#box1. Echter, waarna ik dit doe, worden de linkjes weer blauw in plaats van wit, ondanks dat de text-decoration verderop in de CSS op none staat.

De class div#box1 kan ik niet meegeven aan de a href.

[WeeJeWel]

#box1 > a {
font: inherit;
color: inherit;
text-decoration: inherit;
}

?

EDIT: Het gaat dus om links. Die worden altijd heel fijn overschreven. Deze oplossing werkt in alle browsers op ie6 na natuurlijk. Hoe je het daar werkend krijgt mag je zelf proberen uit te vogelen

[ Voor 99% gewijzigd door WeeJeWel op 21-09-2008 19:46 ]

[Xander]

Waarom gebruik je uberhaupt een <div>? Je kunt een <a> toch ook prima stylen als een blokje?

edit:
En als het een menutje is natuurlijk gewoon een <ul> gebruiken.

[ Voor 30% gewijzigd door Xander op 21-09-2008 19:49 ]

[F4T4L_3RR0R]

WeeJeWel schreef op zondag 21 september 2008 @ 19:44:
#box1 > a {
font: inherit;
color: inherit;
text-decoration: inherit;
}

?

EDIT: Het gaat dus om links. Die worden altijd heel fijn overschreven. Deze oplossing werkt in alle browsers op ie6 na natuurlijk. Hoe je het daar werkend krijgt mag je zelf proberen uit te vogelen

Moet ik dan een nieuwe class aanmaken?

[F4T4L_3RR0R]

Xander schreef op zondag 21 september 2008 @ 19:48:
Waarom gebruik je uberhaupt een <div>? Je kunt een <a> toch ook prima stylen als een blokje?

edit:
En als het een menutje is natuurlijk gewoon een <ul> gebruiken.

Omdat de site uit diverse blokken bestaat die ik naar eigen hand kan vullen. Ik wil namelijk geen gebruik maken van tables.

[Xander]

F4T4L_3RR0R schreef op zondag 21 september 2008 @ 22:13:
[...]

Omdat de site uit diverse blokken bestaat die ik naar eigen hand kan vullen. Ik wil namelijk geen gebruik maken van tables.

Dat snap ik. Maar je hoeft toch geen <div> om een <a> heen te gaan zetten? Ik neem, gezien de maat van 100x18px, even aan dat er niet meer dan die <a> in komt te staan?

[Jorcee]

Je kan dit gebruiken:

#box1 > a{
De opmaak
}

En persoonlijk gebruik ik het zo altijd
#box1 a{
De opmaak
}

En voor de hover effecten gebruik je dan gewoon dit

#box1 a:hover{
De opmaak
}

En één tip zet bij #box1 a:hover "display: block; " erin, omdat je dan de link over het hele "blok" kunt gebruiken, en je meteen ook geen <br /> hoeft te zetten

Maar het beste vindt ik eigenlijk

<a href=" " class="box">Lorem Ipsum </a>
En dan gebruik je dit in de stylesheet:

a.box{
De opmaak
}

En voor :hover dit

a:hover.box{
De opmaak
}

En om je de <br > de besparen zet je bij a.box "display: block;"

[ Voor 26% gewijzigd door Jorcee op 21-09-2008 22:20 ]

[F4T4L_3RR0R]

Xander schreef op zondag 21 september 2008 @ 22:15:
[...]


Dat snap ik. Maar je hoeft toch geen <div> om een <a> heen te gaan zetten? Ik neem, gezien de maat van 100x18px, even aan dat er niet meer dan die <a> in komt te staan?

Een screenshot zegt meer dan 1000 woorden:

code:

<body>
<div id="main_container">

<div id="box1"><a href="link1.php" class="wit">LINK1</a></div>
<div id="box2"></div>
<div id="box3"><a href="link2.php" class="blauw">LINK2</a></div>
<div id="box4"></div>
<div id="box5"><a href="link3.php" class="rood">LINK3</a></div>
<div id="box6"></div>
<div id="box7"><a href="link4.php" class="geel">LINK4</a></div>
<div id="box8">
<?php
hier staat een stukje php code
?>
</div>
</div>

</body>

[Verwijderd]

Ik mis dan toch het punt waar je div's voor nodig zou moeten hebben, want ik zie geen bezwaar tegen het gebruik van het volgende:

HTML:

<ul>
   <li><a href="link1.php">link1</a></li>
   <li><a href="link2.php">link2</a></li>
   <li><a href="link3.php">link3</a></li>
   <li><a href="link4.php">link4</a></li>
</ul>

Gewoon HTML gebruiken dus. Dat "DIV's" verhaal is onzin van mensen die er niets van snappen. Doe gewoon de ervaring op om bovenstaande HTML eruit te laten zien zoals jij wilt door met CSS de juiste (visuele) eigenschappen toe te kennen.

[ Voor 3% gewijzigd door Verwijderd op 21-09-2008 22:38 ]

[Jorcee]

Dan is het beter om de links een class mee te geven, En al die divs achterwegen te laten, als je eens je volledige CSS zou willen posten, kan ik kijken of ik er iets van kan maken

[F4T4L_3RR0R]

Jorcee schreef op zondag 21 september 2008 @ 22:18:
Je kan dit gebruiken:

#box1 > a{
De opmaak
}

En persoonlijk gebruik ik het zo altijd
#box1 a{
De opmaak
}

En voor de hover effecten gebruik je dan gewoon dit

#box1 a:hover{
De opmaak
}

En één tip zet bij #box1 a:hover "display: block; " erin, omdat je dan de link over het hele "blok" kunt gebruiken, en je meteen ook geen <br /> hoeft te zetten

Maar het beste vindt ik eigenlijk

<a href=" " class="box">Lorem Ipsum </a>
En dan gebruik je dit in de stylesheet:

a.box{
De opmaak
}

En voor :hover dit

a:hover.box{
De opmaak
}

En om je de <br > de besparen zet je bij a.box "display: block;"

Wat ik heb nu heb gedaan is:

code:

div#box1 {
    background-color: #000000;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    float: left;
    width: 100px;
    height: 18px;
    text-align: center;
}

Veranderd in:

code:

div#box1 a {
    background-color: #000000;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    float: left;
    width: 100px;
    height: 18px;
    text-align: center;
}

Dus de letter a toegevoegd. De opmaak werkt nu! Ik vraag me af wat het feitelijke verschil is tussen alleen a en > a.

Wanneer ik de code echter veranderd in:

code:

div#box1 a:hover  {
    background-color: #000000;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    float: left;
    width: 100px;
    height: 18px;
    text-align: center;
}

Dan heb ik helemaal geen opmaak meer, totdat ik met de muis over de tekst ga.

Het viel me op dat ik zonder "display: block;" ook naast de tekst in het divje kan klikken.

[F4T4L_3RR0R]

Jorcee schreef op zondag 21 september 2008 @ 22:44:
Dan is het beter om de links een class mee te geven, En al die divs achterwegen te laten, als je eens je volledige CSS zou willen posten, kan ik kijken of ik er iets van kan maken

Dat is het punt, dat lukt me ook wel, had ik eerst ook. Maar ik wil juist de decoratie van de div gebruiken en geen aparte class aanmaken voor de a.

Voor de vormgeving toch de complete CSS:

code:

body, html {
    background-color: #003366;
    text-align: center;
}
div#main_container {
    margin: 0 auto 0 auto;
    width: 900px;
    text-align: left;
}
div#box1 a {
    background-color: #000000;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    float: left;
    width: 100px;
    height: 18px;
    text-align: center;
}
div#box2 {
    background-color: #003366;
    float: left;
    width: 4px;
    height: 18px;
}
div#box3 a {
    background-color: #000000;
    color: #0099FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    float: left;
    width: 100px;
    height: 18px;
    text-align: center;
}
div#box4 {
    background-color: #003366;
    float: left;
    width: 4px;
    height: 18px;
}
div#box5 a {
    background-color: #000000;
    color: #FF0000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    float: left;
    width: 100px;
    height: 18px;
    text-align: center;
}
div#box6 {
    background-color: #003366;
    float: left;
    width: 4px;
    height: 18px;
}
div#box7 a {
    background-color: #000000;
    color: #FFFF66;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    float: left;
    width: 100px;
    height: 18px;
    text-align: center;
}
div#box8 {
    background-color: #000000;
    float: left;
    width: 100%;
    height: 525px;
    padding: 10px 10px 0 10px;
    overflow: auto; 
}
.blauw {
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-size: 9px; 
    color: #0099FF;
}
.rood {
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-size: 9px;
    color: #FF0000;
}   
.geel {
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-size: 9px;
    color: #FFFF66;
}
</style>

De classes blauw, rood en geel worden gebruikt voor de opmaak van de PHP, dus niet van belang voor de linkjes.

[ Voor 69% gewijzigd door F4T4L_3RR0R op 21-09-2008 22:57 ]

[Xander]

F4T4L_3RR0R schreef op zondag 21 september 2008 @ 22:30:
[...]

Een screenshot zegt meer dan 1000 woorden:

[afbeelding]

Ja, dat doet een screenshot.

De mijne ook?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>blaat</title>
  <link href="fatal_error.css" rel="stylesheet">
</head>
<body>
<div id="container">
  <ul id="menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
  <div id="blok">
  hier staat wat tekst
  </div> <!-- blok -->
</div> <!-- container -->
</body>
</html>

NOFI, maar div's gaan gebruiken ipv tables "omdat tables uit de mode zijn" en vervolgens een div om ieder linkje heen gooien gaat nergens over als je het mij vraagt.

Stylesheet kun je vast wel vinden adhv de url in die screenshot. Alleen leer je er dan weinig van...

F4T4L_3RR0R schreef op zondag 21 september 2008 @ 22:54:
[...]

Dat is het punt, dat lukt me ook wel, had ik eerst ook. Maar ik wil juist de decoratie van de div gebruiken en geen aparte class aanmaken voor de a.

Sorry, maar wat is het voordeel van een heel nieuw element aanmaken omdat je geen extra attribuut aan een a "wilt" hangen? Ik zou niet voor iedere link een stuk CSS willen toevoegen, maarja.

[ Voor 16% gewijzigd door Xander op 21-09-2008 22:59 ]

[Jorcee]

F4T4L_3RR0R schreef op zondag 21 september 2008 @ 22:54:
[...]

Dat is het punt, dat lukt me ook wel, had ik eerst ook. Maar ik wil juist de decoratie van de div gebruiken en geen aparte class aanmaken voor de a.

Dat moet jezelf weten, maar ik raad het je eigenlijk wel af, omdat en div sowieso een "één-regel-element" is, en een link niet. Dus bij een <div> moet je ook weer eens "Float" gebruiken zodat je ze naast elkaar kan krijgen, bij een link hoeft dat niet

Die opmaak die je verliest kan komen omdat je a:hover en a allebei moet invullen... Tenminste dat is het eerste dat nu in me opkomt

[Jorcee]

Cascading Stylesheet:

body, html {
    background-color: #003366;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#main_container {
    margin: 0 auto;
    width: 900px;
    text-align: left;
}

.blauw, .rood, .geel{
    width: 100px;
    margin-left: 4px;
    height: 18px;
    background-color: black;
    font-weight: bold;
    text-align: center;
}

.blauw {
    font-size: 9px;    
    color: #0099FF;
}
.rood {
    font-size: 9px;
    color: #FF0000;
}    
.geel {
    font-size: 9px;
    color: #FFFF66;
}

Zoals je ziet, heb ik de CSS een flink stuk korter gemaakt. In de bron moet je dus geen divs gebruiken voor datgene waarmee je nu mee bezig bent, en dus gewoon de link een class geven. Als het je dan nog niet lukt kun je mij hier morgenmiddag alles over vragen..

En omdat je toch overal hetzelfde lettertype gebruikt, heb ik die meteen in de body gezet, en die hoef je niet overal te zetten, alleen als je een ander gebruikt bij een element.

[F4T4L_3RR0R]

Xander schreef op zondag 21 september 2008 @ 22:57:

NOFI, maar div's gaan gebruiken ipv tables "omdat tables uit de mode zijn" en vervolgens een div om ieder linkje heen gooien gaat nergens over als je het mij vraagt.

Stylesheet kun je vast wel vinden adhv de url in die screenshot. Alleen leer je er dan weinig van...

Als ik goed naar de code kijkt dan zie ik je het attribuut LI opmaak meegeeft. Omdat bij mij elke link een andere kleur heeft werkt dat dus niet. Bij DIV's kan ik iedere DIV ID een eigen opmaak geven.

[F4T4L_3RR0R]

Jorcee schreef op zondag 21 september 2008 @ 22:58:
Die opmaak die je verliest kan komen omdat je a:hover en a allebei moet invullen... Tenminste dat is het eerste dat nu in me opkomt

Nope werkt niet.

[disjfa]

F4T4L_3RR0R schreef op zondag 21 september 2008 @ 23:10:
[...]
Als ik goed naar de code kijkt dan zie ik je het attribuut LI opmaak meegeeft. Omdat bij mij elke link een andere kleur heeft werkt dat dus niet. Bij DIV's kan ik iedere DIV ID een eigen opmaak geven.

Dan geef je je linkjes per stuk een andere classe mee Je bent niet verplicht overal een div omheen te zetten. Elk element is stijlbaar. Als je enkel en alleen maar divjes gebruikt ben je even stom bezig als alleen tabellen gebruiken

[Xander]

F4T4L_3RR0R schreef op zondag 21 september 2008 @ 23:10:
[...]

Als ik goed naar de code kijkt dan zie ik je het attribuut LI opmaak meegeeft. Omdat bij mij elke link een andere kleur heeft werkt dat dus niet. Bij DIV's kan ik iedere DIV ID een eigen opmaak geven.

Dan geef je een class aan de link mee, of een class aan de li mee...?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>blaat</title>
  <link href="fatal_error.css" rel="stylesheet">
</head>
<body>
<div id="container">
  <ul id="menu">
    <li class="red"><a href="#">Rood</a></li>
    <li class="yellow"><a href="#">Geel</a></li>
    <li class="blue"><a href="#">Blauw</a></li>
    <li class="white"><a href="#">Wit</a></li>
  </ul>
  <div id="blok">
  hier staat wat tekst
  </div> <!-- blok -->
</div> <!-- container -->
</body>
</html>

[F4T4L_3RR0R]

Ook nog een offtopic vraag waarvoor ik me schaam een apart topic voor te openen:

Als ik op een linkje klik is het uiteindelijk de bedoeling dat een stuk (door PHP gegenereerde) tekst in het grote vak verschijnt. Vroeger (dan spreek ik over 10 jaar geleden) kon je met een framepagina zorgen dan alleen het vak deze tekst opende, de rest van de pagina hoefde niet ververst te worden. Ik dacht dat ik dit met DIV's kon nabootsen, op Google las ik namelijk dat DIV's een goede vervanger van frames zijn, vandaar dat ik met DIV's ben begonnen vanuit het niets. Ik weet niet of dit realiseerbaar is, of dat ik elke pagina moet kopiëren waardoor de pagina telkens in zijn geheel wordt geladen als er op een linkje geklikt wordt.

Ik wil dit namelijk zeker weten voordat ik alle DIV's vervang voor LI's.

[ Voor 4% gewijzigd door F4T4L_3RR0R op 21-09-2008 23:30 ]

[Xander]

F4T4L_3RR0R schreef op zondag 21 september 2008 @ 23:29:
Als ik op een linkje klik is het uiteindelijk de bedoeling dat een stuk (door PHP gegenereerde) tekst in het grote vak verschijnt. Vroeger (dan spreek ik over 10 jaar geleden) kon je met een framepagina zorgen dan alleen het vak deze tekst opende, de rest van de pagina hoefde niet ververst te worden. Ik dacht dat ik dit met DIV's kon nabootsen, op Google las ik namelijk dat DIV's een goede vervanger van frames zijn, vandaar dat ik met DIV's ben begonnen vanuit het niets. Ik weet niet of dit realiseerbaar is, of dat ik elke pagina moet kopiëren waardoor de pagina telkens in zijn geheel wordt geladen als er op een linkje geklikt wordt.

Je kunt (buiten met dingen als AJAX) niet zomaar een tekst in een DIV laden en de rest van de pagina laten staan nee.

Maar dingen kopiëren is ook niet nodig. Je hebt toch PHP waarmee je dynamisch pagina's kunt genereren?

[soulrider]

je kan met div's spelen die mbv css over elkaar liggen, en dan diegene die je wilt tonen zichtbaar maken en de rest onzichtbaar laten. (google even hiervoor)

de bezoekers die css uit hebben staan krijgen de div's zichtbaar onder elkaar met een scrollbalk aan de rechterzijde.

je kan natuurlijk in ware web 2.0 versie die block mbv ajax ofzo dynamisch invullen, maar dat is dan je eigen keuze.

[F4T4L_3RR0R]

Xander, ik ben even bezig met je css en met het attribuut LI, nu rees me een vraag:

ul#menu {
list-style: none;
padding: 0;
margin: 0;

Moet ik daar echt 0 invoeren? Of kan ik de padding en margin weglaten?

[Xander]

F4T4L_3RR0R schreef op maandag 22 september 2008 @ 00:06:
Moet ik daar echt 0 invoeren? Of kan ik de padding en margin weglaten?

Probeer het en kijk hoe het uitpakt?

Een UL (en OL) krijgt standaard een margin of padding mee (hangt van de browser af welke van de twee geloof ik). Die standaard ruimte wilde ik niet.

[F4T4L_3RR0R]

Okay, ik heb nu het volgende:

HTML:

code:

<!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=iso-8859-1" />
<meta http-equiv="refresh" content="60">
<title>Titel</title>
<link href="style.css" rel="stylesheet"> 
</head>

<body>
<div id="container">
  <ul id="menu">
    <li class="wit"><a href="index.php">LINK1</a></li>
    <li class="blauw"><a href="index2.php">LINK2</a></li>
    <li class="rood"><a href="index3.php">LINK3</a></li>
    <li class="geel"><a href="index4.php">LINK4</a></li>
  </ul>
  <div id="phpcode">
<?php
hier staat mijn php code.
?>
  </div> <!-- phpcode -->
</div> <!-- container --> 

</body>
</html>

CSS:

code:

body, html {
    background-color: #003366;
    text-align: center;
    font-family: Tahoma, Arial, Verdana, sans-serif; 
}
#container {
    margin: 0 auto 0 auto;
    width: 950px;
    text-align: left;
}
ul#menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#menu li {
    background-color: #000000;
    width: 100px;
    height: 18px;
    float: left;
    margin: 0 4px 0 0;
    text-align: center;
    line-height: 18px;
}
ul#menu li a {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
}  
ul#menu li.rood a {
    color: #FF0000;
}
ul#menu li.blauw a {
    color: #0099FF;
}
ul#menu li.geel a {
    color: #FFFF66;
}
ul#menu li a:hover {
    text-decoration: underline;
}
#phpcode {
    clear: both;
    background-color: #000000;
    float: left;
    width: 100%;
    height: 525px;
    padding: 10px 10px 0 10px;
    overflow: auto; 
}
.blauw {
    font-size: 9px;
    color: #0099FF;
}
.rood {
    font-size: 9px;
    color: #FF0000;
}       
.geel {
    font-size: 9px;
    color: #FFFF66;
}

Zijn er nog aanvullingen of verbeteringen?

Moet ik bij de class .blauw font-weight: normal; toevoegen omdat deze bovenin de css nog bold was? Of is dit overbodig?

[ Voor 4% gewijzigd door F4T4L_3RR0R op 22-09-2008 00:45 ]

[Xander]

Dat lijkt al ergens op ja. Alleen, wat doen die .blauw, .rood en .geel class daar nog?

Een beetje dubbelop, je hebt al een ul#menu li.blauw a, ul#menu li.rood a en ul#menu li.geel a.

[F4T4L_3RR0R]

Xander schreef op maandag 22 september 2008 @ 00:46:
Dat lijkt al ergens op ja. Alleen, wat doen die .blauw, .rood en .geel class daar nog?

Een beetje dubbelop, je hebt al een ul#menu li.blauw a, ul#menu li.rood a en ul#menu li.geel a.

Die zijn nodig voor de opmaak van de PHP code. Niet bold en een slagje kleiner zoals je kan zien. Vandaar dat ik vroeg of ik de weight nog op normal moest zetten omdat deze voor de LI's bold hebben meegekregen.

Ik vraag me af, conflicteren die classes niet met de LI classes?

[Xander]

F4T4L_3RR0R schreef op maandag 22 september 2008 @ 00:50:
[...]

Die zijn nodig voor de opmaak van de PHP code. Niet bold en een slagje kleiner zoals je kan zien.

Ah.

Ik vraag me af, conflicteren die classes niet met de LI classes?

Ja dat doen ze. Je moet ze dan ook een andere naam geven, of definiëren als #phpcode .blauw, #phpcode .rood etc.

[F4T4L_3RR0R]

Xander schreef op maandag 22 september 2008 @ 00:52:
[...]


Ja dat doen ze. Je moet ze dan ook een andere naam geven, of definiëren als #phpcode .blauw, #phpcode .rood etc.

En wat moet ik dan veranderen in mijn PHP code?

code:

  $highlight[] = array( "4300026", "blauw" );
  $highlight[] = array( "4315585", "geel" );
  $highlight[] = array( "0706001", "rood" );

Edit: Niks dus.

Vraag me alleen nog af of ik de eerste kleur van de class #phpcode nog normal moet maken qua weight en dan zijn we zo'n beetje klaar denk ik?

[ Voor 15% gewijzigd door F4T4L_3RR0R op 22-09-2008 00:58 ]

[Xander]

Als je de laatste optie kiest... Niets?

Met '#phpcode .blauw' definieer je de class 'blauw' binnen 'iets' met het id 'phpcode'. Aangezien die classes gebruikt worden in div#phpcode verandert er aan je HTML (dus PHP) niets...

Vraag me alleen nog af of ik de eerste kleur van de class #phpcode nog normal moet maken qua weight

Nee hoor... leg mij eens uit waarom dat zou moeten?

Die 'font-weight: bold;' staat er alleen voor een 'a' in een 'li' in een 'ul' met id 'menu'. Je div#phpcode zit daar toch niet in ofzo? Lees jij je CSS lineair ofzo?

[ Voor 42% gewijzigd door Xander op 22-09-2008 01:14 ]

[F4T4L_3RR0R]

Xander schreef op maandag 22 september 2008 @ 00:59:
Nee hoor... leg mij eens uit waarom dat zou moeten?

Die 'font-weight: bold;' staat er alleen voor een 'a' in een 'li' in een 'ul' met id 'menu'. Je div#phpcode zit daar toch niet in ofzo?

Jorcee in "[CSS] div'jes, links en opmaak daarvan"
Jorcee gaf aan dat een heleboel dubbele dingen overbodig zijn als deze in de body class werden gezet. Ik dacht daardoor dat alle attributes vóór een class de classes erna overrulen.

[Xander]

F4T4L_3RR0R schreef op maandag 22 september 2008 @ 01:06:
[...]

Jorcee in "[CSS] div'jes, links en opmaak daarvan"
Jorcee gaf aan dat een heleboel dubbele dingen overbodig zijn als deze in de body class werden gezet. Ik dacht daardoor dat alle attributes vóór een class de classes erna overrulen.

Nee, attributen voor een element worden geërfd door de elementen daarin. Alles zit tussen je <body> tags, maar niet tussen <ul id="menu"><li><a> en </a></li></ul> tags.

[ Voor 4% gewijzigd door Xander op 22-09-2008 01:15 ]

[F4T4L_3RR0R]

Wéér wat geleerd.

Er gebeurde net iets vreemds toen ik de CSS opmaak zat na te lopen en te optimaliseren.

Was:

code:

#phpcode {
    clear: both;
    background-color: #000000;
    width: 100%;
    height: 525px;
    float: left;
    padding: 10px 10px 0 10px;
    overflow: auto; 
}
#phpcode .blauw {
    font-size: 9px;
    color: #0099FF;
}
#phpcode .rood {
    font-size: 9px;
    color: #FF0000;
}       
#phpcode .geel {
    font-size: 9px;
    color: #FFFF66;
}

Is nu:

code:

#phpcode {
    clear: both;
    background-color: #000000;
    font-size: 9px;
    width: 100%;
    height: 525px;
    float: left;
    padding: 10px 10px 0 10px;
    overflow: auto; 
}
#phpcode .blauw {
    color: #0099FF;
}
#phpcode .rood {
    color: #FF0000;
}       
#phpcode .geel {
    color: #FFFF66;
}

Zoals je kan zien font-size: 9px; omhoog geschoven. Met als gevolg dat de ruimte tussen de door PHP gegenereerde regels kleiner is geworden?

[Xander]

Niet zo vreemd volgens mij. In #phpcode werd eerst nog een grotere font-size (12px zoals op de hele pagina) gebruikt, met een bijbehorende line-height van (iets meer dan) 12px. Ik gok dat je php-scriptje een zooitje <span>'s uitspuugt? Een inline-element (zoals die span) met een font-size van 9px in een regel met line-height: 12px; zetten levert natuurlijk geen dunnere regels op. Wat je nu doet wel.

[F4T4L_3RR0R]

Nee het gekke is dat ik een uur geleden al de size voor de door PHP gegenereerde tekst heb aangepast naar 9px.

De twee laatst door mij vermelde codes maakten het verschil, allebei 9px en allebei zonder opgegeven line-height.

PHP genereerde de volgende regels:

<span class="blauw">hier een regel</span><p>
<span class="rood">hier een regel</span><p>
<span class="geel">hier een regel</span><p>

Etc.

[Xander]

F4T4L_3RR0R schreef op maandag 22 september 2008 @ 01:47:
Nee het gekke is dat ik een uur geleden al de size voor de door PHP gegenereerde tekst heb aangepast naar 9px.

De twee laatst door mij vermelde codes maakten het verschil, allebei 9px en allebei zonder opgegeven line-height.

Jup.

Maar line-height: normal; hangt dus af van de font-size. En de font-size in div#phpcode was in je oude CSS groter, de line-height dus ook.

[F4T4L_3RR0R]

Nee, de font-size blijft gewoon 9px terwijl de ruimte tussen de regels anders is.

De PHP code leest een aantal regels uit een .txt bestand, filtert bepaalde regels eruit en highlight deze met een css class.

Regels in .txt bestandje:

code:

0706001 dit is een test
4300026 dit is nog een test
0706001 dit is een test
4300026 dit is nog een test
0706001 dit is een test
4300026 dit is nog een test
0706001 dit is een test
4300026 dit is nog een test

CSS opmaak:

code:

#phpcode {
    clear: both;
    background-color: #000000;
    width: 100%;
    height: 525px;
    float: left;
    padding: 10px 10px 0 10px;
    overflow: auto; 
}
#phpcode .blauw {
    font-size: 9px;
    color: #0099FF;
}
#phpcode .rood {
    font-size: 9px;
    color: #FF0000;
}        
#phpcode .geel {
    font-size: 9px;
    color: #FFFF66;
}

Output:



Verander ik de CSS opmaak in:

code:

#phpcode {
    clear: both;
    background-color: #000000;
    font-size: 9px;
    width: 100%;
    height: 525px;
    float: left;
    padding: 10px 10px 0 10px;
    overflow: auto; 
}
#phpcode .blauw {
    color: #0099FF;
}
#phpcode .rood {
    color: #FF0000;
}        
#phpcode .geel {
    color: #FFFF66;
}

Dan is dit de output:

[Xander]

F4T4L_3RR0R schreef op maandag 22 september 2008 @ 10:53:
Nee, de font-size blijft gewoon 9px terwijl de ruimte tussen de regels anders is.

Nee! De font-size op je div 'phpcode' was eerst geen 9px! De font-size van de spans die je erin had zitten wel ja, maar van de div niet! Echt niet! Als je direct tekst in die div getikt had, dus zonder een span met daarop een kleinere font-size er omheen, had je grotere letters gekregen. Dat je geen tekst direct in die div hebt doet niets af aan het feit dat er voor die div een grotere font-size én een bijbehorende grotere line-height gold.

Je had eerst dit:


Grote regels (van de grotere line-height die automatisch voortkomt uit de grotere font-size van div#phpcode) met daarin spans met een kleinere font-size (en dus een kleinere line-height).

Nu je een kleinere font-size zet op #phpcode worden de line-heights in #phpcode kleiner, even groot als de line-heights van de spans, en krijg je dit:


Minder regelafstand dus.

Wat probeer je met dit welles-nietes verhaal nu te bereiken? Wil je de regelafstand weer zoals 'ie eerst was? Je weet toch hoe dat moet nu?

[F4T4L_3RR0R]

Het is me enigzins duidelijk zo, thanks voor de toelichting!

Moet ik voor de netheid ook nog een lineheight opgeven in de class #phpcode?

[ Voor 3% gewijzigd door F4T4L_3RR0R op 22-09-2008 11:26 ]

[Xander]

Nee hoor, de default line-height ('normal') voldoet toch prima?

[RM-rf]

wat algemeens... als je wilt werken aan het 'scheiden' van visuele weergave-informatie en de abstracte HTML-structuur is het ook aan te raden om classNames niet 'rood' of 'blauw' te noemen...

ook niet class="blauwe-tekst-in-9-pixel-arial-font"... juist omdat je dat wilt 'scheiden'...
kies ervoor je classnames dus algemeen structuurbeschrijvende, maar geen 'visuele effecten' beschrijvende namen te geven..

als je bv kiest voor syntax-highlightende classnames, kies als naam juist de waarde die ze representeren: bv 'classname=variabele-definitie' of 'attribute-waarde' ipv. 'groene-text'.

[F4T4L_3RR0R]

Xander schreef op maandag 22 september 2008 @ 11:26:
Nee hoor, de default line-height ('normal') voldoet toch prima?

Jeps, dus:

code:

#phpcode {
    clear: both;
    background-color: #000000;
    font-size: 9px;
    width: 100%;
    height: 525px;
    float: left;
    padding: 10px 10px 0 10px;
    overflow: auto; 
}
#phpcode .blauw {
    color: #0099FF;
}
#phpcode .rood {
    color: #FF0000;
}        
#phpcode .geel {
    color: #FFFF66;
}

Is correct? Hoef ook niet apart de fontsize op te geven in .blauw, .rood, en .geel?

Nog een vraagje nu we zo op dreef zijn:

Ik heb bij de class ul#menu li a { het volgende toegevoegd: display: block;
Op deze manier wordt het hele blokje met de link erin actief, er hoeft dan niet precies op de tekst geklikt te worden. Maar moet ik display: block; toevoegen of verplaatsen aan/naar ul#menu li { en/of ul#menu li a:hover {?

Momenteel functioneert heel het blokje als link in IE7 en FF3, maar niet in IE6.

Stukje van de CSS:

code:

ul#menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#menu li {
    background-color: #000000;
    width: 100px;
    height: 20px;
    float: left;
    margin: 0 4px 0 0;
    text-align: center;
    line-height: 15px;
}
ul#menu li a {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
    display: block;
}  
ul#menu li.rood a {
    color: #FF0000;
}
ul#menu li.blauw a {
    color: #0099FF;
}
ul#menu li.geel a {
    color: #FFFF66;
}
ul#menu li a:hover {
    text-decoration: underline;
}

[F4T4L_3RR0R]

RM-rf schreef op maandag 22 september 2008 @ 11:36:
wat algemeens... als je wilt werken aan het 'scheiden' van visuele weergave-informatie en de abstracte HTML-structuur is het ook aan te raden om classNames niet 'rood' of 'blauw' te noemen...

ook niet class="blauwe-tekst-in-9-pixel-arial-font"... juist omdat je dat wilt 'scheiden'...
kies ervoor je classnames dus algemeen structuurbeschrijvende, maar geen 'visuele effecten' beschrijvende namen te geven..

als je bv kiest voor syntax-highlightende classnames, kies als naam juist de waarde die ze representeren: bv 'classname=variabele-definitie' of 'attribute-waarde' ipv. 'groene-text'.

Dus gewoon het beestje een ander naampje geven?

[Bosmonster]

F4T4L_3RR0R schreef op maandag 22 september 2008 @ 11:37:
[...]

Dus gewoon het beestje een ander naampje geven?

Een naam geven die niks over de stijl zegt. Anders als je groene linkjes paars moeten worden mag je al je classnames aanpassen...

En dat is nou juist NIET het idee van CSS

[RM-rf]

F4T4L_3RR0R schreef op maandag 22 september 2008 @ 11:37:
[...]

Dus gewoon het beestje een ander naampje geven?

nee, dat idee heb ik eerder bij jouw beginopmerking dat je 'nu DIVs gebruikt waar je vroeger TABLEs gebruikt' of 'dat DIVs een goed vervanger van Franmes zouden zijn...

in dat geval kom je idd niet makkelijk verder omdat je eigenlijk gaat proberen nieuwe technieken en designconcepten te gebruiken om nog steeds op een geclusterde HTML3.2 wijze een site op te zetten (waarbij eigenlijk continiue een direkte koppeling tussen specifieke inhoud en de weergave blijft bestaan)

Wil je verderkomen moet je de denk-omstelling maken om html-struktuur en struktuur-beschrijving los te zien van de uiteindelijke visuele weergave...
eventuele visuele weergave (of bv meerdere visuele weergaves adhv verschillende 'skins') kan separaat gedefinieert worden (via CSS) maar bestaat ook vooral uit het definieren van een presentatie adhvb bepaale algemene definities op basis van een aanlegede 'struktuur'...

classnames die wel direkt gekoppeld zijn aan dingen als kleur, fontsoort maar ok vb de positionering op een pagina zijn dan snel desatreus; het duidt erop dat degene die zo wekt niet daadwerkelijk visuele weergave los _kan_ zien van zn html-struktuur..

het lijkt misschien kleins, maar uit merdere opmerkingen hier heb ik een een beetje het idee dat je met moderne technieken eigenlijk gewoon een HTML3.2 site wilt bouwen.... of gebruik nieuwe concepten zoals deze bedoelt zijn, maar niet 'omdat ze precies hetzelfde zouden doen als wat je voorheen met TABLES en/of Frames deed..
óf kies gewoon eerlijk voor het bijhouden van je oude werkwijze en neem een HTML3.2 doctype en houdt het lekker bij je frames / tables en inline styledefinitie (én accepteer dat een hoop 'moderne' toepassingen niet mogelijk zijn)

[F4T4L_3RR0R]

Wat me opviel, als ik de code bekijk:

<li class="wit"><a href="index.php">LINK1</a></li>

Er helemaal geen class "wit" bestaat, in de code kan je elk woord invullen wat men maar wil. Bestaat daar geen nettere oplossing voor?

Overigens wil ik nu ook realiseren dat de zwarte achtergrond van een link, grijs is als de betreffende pagina actief is. Met a:active kan ik een background opgeven, maar deze wordt alleen zichtbaar op het moment dat de muisknop ingerukt wordt. Bij het loslaten van de muisknop wordt de achtergrond weer zwart.

Nu dacht ik dit op te lossen op de volgende manier:

code:

ul#menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#menu li {
    background-color: #000000;
    width: 100px;
    height: 20px;
    float: left;
    margin: 0 4px 0 0;
    text-align: center;
    line-height: 20px;
}
ul#menu li a {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
    display: block;

}
ul#menu li.blauw a {
    color: #0099FF;
}
ul#menu li.rood a {
    color: #FF0000;
}
ul#menu li.geel a {
    color: #FFFF66;
}
ul#menu li.wit-active a {
    color: #FFFFFF;
    background-color: #777777;
}
ul#menu li.blauw-active a {
    color: #0099FF;
    background-color: #777777;
}
ul#menu li.rood-active a {
    color: #FF0000;
    background-color: #777777;
}
ul#menu li.geel-active a {
    color: #FFFF66;
    background-color: #777777;
}
ul#menu li a:hover {
    text-decoration: underline;
}

Bij index.php zet ik dan wit-active in de code bij LINK1, bij index2.php zet ik blauw-active in de code bij LINK2, etc.

Op de een of andere manier heb ik geen goed gevoel bij bovenstaande CSS, ziet er een beetje slordig uit. Daarbij komend dat zoals eerder gezegd de class "wit" niet echt gedefinieerd is.

[Xander]

F4T4L_3RR0R schreef op maandag 22 september 2008 @ 18:07:
Wat me opviel, als ik de code bekijk:

<li class="wit"><a href="index.php">LINK1</a></li>

Er helemaal geen class "wit" bestaat, in de code kan je elk woord invullen wat men maar wil. Bestaat daar geen nettere oplossing voor?

Uh, tja, links in een li zonder class (of met een niet bestaande class) worden wit, zie regel 19 van de CSS in jouw post. Hou je er even rekening mee dat die voorbeeldjes die ik gepost heb in 2 minuten gemaakt zijn? Je kunt een class bij bijmaken voor wit in je css, da's netter ja.

Overigens wil ik nu ook realiseren dat de zwarte achtergrond van een link, grijs is als de betreffende pagina actief is. Met a:active kan ik een background opgeven, maar deze wordt alleen zichtbaar op het moment dat de muisknop ingerukt wordt. Bij het loslaten van de muisknop wordt de achtergrond weer zwart.

Nu dacht ik dit op te lossen op de volgende manier:

code:

ul#menu li.blauw-active a {
    color: #0099FF;
    background-color: #777777;
}
ul#menu li.rood-active a {
    color: #FF0000;
    background-color: #777777;
}
ul#menu li.geel-active a {
    color: #FFFF66;
    background-color: #777777;
}

Bij index.php zet ik dan wit-active in de code bij LINK1, bij index2.php zet ik blauw-active in de code bij LINK2, etc.

Dat kan zeker netter, je kunt prima twee classes meegeven.

HTML:

<li class="rood"><a>blaat</a></li>
<li class="blauw active"><a>blaat</a></li>
<li class="groen"><a>blaat</a></li>

Cascading Stylesheet:

ul#menu li.active {
    background-color: #777777;
}

Jij geeft trouwens de grijze achtergrond mee aan de a. Niet consequent, aangezien het zwart op de li zit. Meteen gefixed in mijn codevoorbeeldje.

[F4T4L_3RR0R]

Thanks wederom, het is gelukt.

Enige probleem is de regelafstand, heb nu een letterhoogte van 9px en een regelafstand van 12px ingesteld voor de div #phpcode. Firefox geeft dit goed weer maar IE6 en IE7 laten een veel grotere ruimte zien...

[ Voor 4% gewijzigd door F4T4L_3RR0R op 22-09-2008 22:46 ]

[Pendaco]

Jeez... Maak een TR aan

[ Voor 62% gewijzigd door BtM909 op 23-09-2008 17:00 ]

[F4T4L_3RR0R]

Pendaco schreef op dinsdag 23 september 2008 @ 11:29:
Jeez... wie maakt die site jij of je medetweakers? Koop een HTML/CSS handboek ofzo.

Misschien krijg je een foute indruk door het topic vluchtig door te lezen.

Als je het topic aandachtig doorleest kan je merken dat ik al een functionerende website en css code vanuit het niets had geproduceerd. Daarna werd voorgesteld om af te stappen om alles in div te doen wat ik heb gehonoreerd. Ook kan je dan lezen dat ik elke (zeer gewaardeerde) aangedragen suggestie ook daadwerkelijk uitprobeer en er vaak zelf een eigen draai aan geef wat soms niet het gewenste resultaat geeft of wat door iemand anders wordt verbeterd of gecorrigeerd.

Voor mij is dit topic niet geopend uit gemakzucht maar om een hoop te leren, dat laatste is zeer zeker het geval omdat ik veel wijzer ben geworden.

Jouw antwoord is daarentegen wel kort door de bocht. Je kan zo wel half GoT sluiten en iedereen naar de bibliotheek verwijzen... Schaf dan ook gelijk docenten of scholen af, de leerlingen kunnen immers ook de boeken thuis lezen en hoeven daarvoor geen docent te raadplegen.

[ Voor 22% gewijzigd door F4T4L_3RR0R op 23-09-2008 16:39 ]

[BtM909]

F4T4L_3RR0R schreef op dinsdag 23 september 2008 @ 16:36:
[...]

Misschien krijg je een foute indruk door het topic vluchtig door te lezen.

Hij heeft wel een klein beetje gelijk... Je vraagt hier om een antwoord geen leiddraad, geen hulp omdat je vastzit oid. Je laatste vraag (en dat geldt eigenlijk voor meerdere vragen) kan je makkelijk eerst zelf uitzoeken en desnoods een kleine testcase voor maken voordat je hier op een antwoord gaat wachten

[F4T4L_3RR0R]

Ik heb het probleem van de regelafstand enigszins opgelost.

Probleem was dat de PHP code achter elke regel een <p> zette om de volgende regel op een nieuwe regel te zetten.

Voorbeeld:

code:

<span class="geel">Lorem ipsum</span><p>
<span class="geel">Lorem ipsum</span><p>
<span class="geel"> Lorem ipsum</span><p>

Firefox liet het zo zien (i.v.m. layout van GoT geen screenshot van de volle breedte):



IE6 en IE7 lieten het zo zien:



Veranderde ik de<p> in <br> dan was de afstand tussen regels onderling wel even groot in alle browsers:



Maar ik wil dat elke afzonderlijke regel wordt gescheiden, dus ik voegde line-height toe, met dit als resultaat:



Zoals je kan zien worden regels halverwege op een nieuwe lijn óók gescheiden, dit is niet de bedoeling.

Toen dacht ik opeens om twee maal <br> te gebruiken:

code:

<span class="geel">Lorem ipsum</span><br><br>

Met dit als eindresultaat wat in alle browsers gelijk eruit ziet:



Is twee keer een BR achter elkaar wel toegestaan? Had ik het probleem ook anders kunnen oplossen? Zijn er nog aanvullingen of andere suggesties?

[Xander]

F4T4L_3RR0R schreef op woensdag 24 september 2008 @ 00:04:
Had ik het probleem ook anders kunnen oplossen? Zijn er nog aanvullingen of andere suggesties?

Ja, je had de <p>'s kunnen laten staan en daar met css een margin aan kunnen hangen?

Die kun je zelfs nog op de <span>'s zetten trouwens. Kun je die <br>'s weglaten. Niet dat ik er persoonlijk problemen mee zou hebben om twee <br>'s te gebruiken overigens.

[CH4OS]

F4T4L_3RR0R schreef op woensdag 24 september 2008 @ 00:04:
Ik heb het probleem van de regelafstand enigszins opgelost.
Is twee keer een BR achter elkaar wel toegestaan? Had ik het probleem ook anders kunnen oplossen? Zijn er nog aanvullingen of andere suggesties?

Waarom zou het verboden zijn? een <p> is weliswaar voor een alinea, wat veelal ook gedaan word met <br /><br /> (in xHTML dan). Kan mezelf nou niet echt een situatie bedenken waarmee het geen nieuwe alinea zou zijn, maar het kan en mag wel gewoon.

Overigens was jouw gebruik van de alinea (<p>) tag niet goed geweest. Ik had het dan eerder met <p>Lorem ipsum, dolor sit amet</p> gedaan.

En nog iets, als het voor een menu'tje is of iets dergelijks, is het denk ik makkelijk(er) om het in een unordered list (<ul>) te zetten, dan kan je op de list items (<li>) ervan een margin-bottom hangen in je CSS. Dan zou het zo worden (even snel)

HTML:

<html>
<head>
    <style>
        ul li
        {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Lorem Ipsum, dolor sit amet</li>
        <li>Lorem Ipsum, dolor sit amet</li>
        <li>Lorem Ipsum, dolor sit amet</li>
        <li>Lorem Ipsum, dolor sit amet</li>
        <li>Lorem Ipsum, dolor sit amet</li>
    </ul>
</body>
</html>

[ Voor 27% gewijzigd door CH4OS op 24-09-2008 00:34 ]

[F4T4L_3RR0R]

Xander schreef op woensdag 24 september 2008 @ 00:12:
[...]


Ja, je had de <p>'s kunnen laten staan en daar met css een margin aan kunnen hangen?

Die kun je zelfs nog op de <span>'s zetten trouwens. Kun je die <br>'s weglaten. Niet dat ik er persoonlijk problemen mee zou hebben om twee <br>'s te gebruiken overigens.

Als ik een margin voor de <p> aanmaak, moet ik daar denk ik een nieuwe class voor aanmaken? Wordt de margin wel door alle browser goed gelezen? IE laat zonder margins de <p> anders zien dan andere browsers.

Hoe bedoel je op de span zetten zodat ik de <br>'s kan weglaten?

[F4T4L_3RR0R]

GJtje schreef op woensdag 24 september 2008 @ 00:25:
[...]
Waarom zou het verboden zijn? een <p> is weliswaar voor een alinea, wat veelal ook gedaan word met <br /><br /> (in xHTML dan). Kan mezelf nou niet echt een situatie bedenken waarmee het geen nieuwe alinea zou zijn, maar het kan en mag wel gewoon.

Overigens was jouw gebruik van de alinea (<p>) tag niet goed geweest. Ik had het dan eerder met <p>Lorem ipsum, dolor sit amet</p> gedaan.

En nog iets, als het voor een menu'tje is of iets dergelijks, is het denk ik makkelijk(er) om het in een unordered list (<ul>) te zetten, dan kan je op de list items (<li>) ervan een margin-bottom hangen in je CSS. Dan zou het zo worden (even snel)

HTML:

<html>
<head>
    <style>
        ul li
        {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Lorem Ipsum, dolor sit amet</li>
        <li>Lorem Ipsum, dolor sit amet</li>
        <li>Lorem Ipsum, dolor sit amet</li>
        <li>Lorem Ipsum, dolor sit amet</li>
        <li>Lorem Ipsum, dolor sit amet</li>
    </ul>
</body>
</html>

Hmm, <p> moet dus eerst geopend en daarna gesloten worden. Zo even testen of IE daarom de mist inging met de tussenruimte van de regels. Overigens is de <p> tag toch niet toegestaan in XHTML?

Het ging overigens niet om het menu maar om de content die door een stukje PHP code wordt ingeladen weergegeven tussen <span>'s.

Dus:

code:

<div id="phpcode">
PHP
</div>

En de bijbehorende CSS:

code:

#phpcode {
    clear: both;
    background-color: #000000;
    font-size: 10px;
    width: 100%;
    height: 525px;
    float: left;
    padding: 10px 10px 0 10px;
    overflow: auto;
}

[ Voor 11% gewijzigd door F4T4L_3RR0R op 24-09-2008 01:09 ]

[Verwijderd]

F4T4L_3RR0R schreef op woensdag 24 september 2008 @ 01:06:

Overigens is de <p> tag toch niet toegestaan in XHTML?

Blijkbaar snap je nog niet veel van HTML, laat staan XHTML. Houd de volgende vuistregels in je achterhoofd:

Kies voor een HTML element (of combinatie van elementen) dat zo goed mogelijk beschrijft wat er binnen de tags staat. Vormgeving is hierbij niet van belang, je vertrouwt erop dat als al het andere faalt, een browser nog steeds in staat is een document met een enigszins fatsoenlijke opmaak aan de gebruiker kan laten zien. De user agent kan die opmaak bedenken aan de hand van de markup, die dus duidelijk niet staat voor "opmaak", maar voor het markeren van de structuur van een document. Met CSS ga je pas proberen de correct gemarkeerde HTML code vorm te geven.

Een p element is dus erg belangrijk voor stukken tekst anders dan kopjes, menu's en dat soort doeleinden. Voor lappen tekst heb je het p element hard nodig.

Het ging overigens niet om het menu maar om de content die door een stukje PHP code wordt ingeladen weergegeven tussen <span>'s.

Wat vind je zelf van de combinatie float: left; én width: 100%;? Want ik vind persoonlijk dat die nergens op slaat. Net als het id "phpcode" trouwens. Wat boeit het in het document nou waardoor die code is gegenereerd. Ook voor id's en classes geldt dat je zo goed mogelijk moet beschrijven wat en waarom iets is.

Omdat een of andere ontwerper verschillende kleuren wilde voor de knopjes, zit je nu met class="wit" en dat soort onzin-classnames. In dit geval is het nog enigszins te verdedigen, maar stel je voor dat in een andere template / kleurstelling voor je website, je alles in blauwtinten wilt hebben. Dan slaan sommige dingen in je HTML nergens meer op.

[Xander]

F4T4L_3RR0R schreef op woensdag 24 september 2008 @ 01:04:
[...]
Wordt de margin wel door alle browser goed gelezen? IE laat zonder margins de <p> anders zien dan andere browsers.

Een <p> heeft standaard al een margin. Ik gok (ja, gok ) dat die verschilt tussen IE en andere browsers. Dat probleem heb je niet meer als je een eigen margin meegeeft...

[F4T4L_3RR0R]

Verwijderd schreef op woensdag 24 september 2008 @ 07:50:
Wat vind je zelf van de combinatie float: left; én width: 100%;? Want ik vind persoonlijk dat die nergens op slaat. Net als het id "phpcode" trouwens. Wat boeit het in het document nou waardoor die code is gegenereerd. Ook voor id's en classes geldt dat je zo goed mogelijk moet beschrijven wat en waarom iets is.

Omdat een of andere ontwerper verschillende kleuren wilde voor de knopjes, zit je nu met class="wit" en dat soort onzin-classnames. In dit geval is het nog enigszins te verdedigen, maar stel je voor dat in een andere template / kleurstelling voor je website, je alles in blauwtinten wilt hebben. Dan slaan sommige dingen in je HTML nergens meer op.

Width moet ik opgeven, anders past de div zich aan aan de lengte van de regel.

Float: left kan ik weglaten begrijp ik goed?

De kleuren in de css en de div #phpcode hebben namen gekregen voor testdoeleinden, uiteindelijk zullen de namen worden aangepast als de pagina live gaat.

Heb zojuist ook de PHP code aangepast, moet alleen nog paar dingen afwerken:

- Kreeg de tip om de P in de SPAN te zetten, moet uitzoeken wat daar precies mee bedoeld wordt en hoe ik dat realiseren.
- Margins voor de P opgeven in de stylesheet. Moet nog uitzoeken of dat P moet worden of #phpcode P.
- Uitzoeken of P geopend en gesloten moet worden, lees op internet tegenstrijdige berichten.
- De links over de volle breedte als knoppen laten fungeren in alle browsers, display: block; werkt niet in IE6.

Dus ik ben bijna klaar, moet alleen een beetje op weg worden geholpen.

Edit: De "knoppen" met links werken nu ook in IE6.

De code voorheen:

code:

ul#menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#menu li {
    background-color: #555555;
    width: 100px;
    height: 20px;
    float: left;
    margin: 0 5px 0 0;
    text-align: center;
    line-height: 20px;
}
ul#menu li a {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    display: block;
}

Na aanpassing was dit de oplossing:

code:

ul#menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#menu li {
    background-color: #555555;
    width: 100px;
    height: 20px;
    float: left;
    margin: 0 5px 0 0;
    text-align: center;
    line-height: 20px;
}
ul#menu li a {
    width: 100px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    display: block;
}

Ik heb zo'n gevoel dat het door eigenhandige "verbeteringen" alleen maar een groter zooitje wordt. Wellicht kan ik de width en height nu weglaten in ul#menu li? Zodat dit overblijft:

code:

ul#menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#menu li {
    background-color: #555555;
    float: left;
    margin: 0 5px 0 0;
    text-align: center;
    line-height: 20px;
}
ul#menu li a {
    width: 100px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    display: block;
}

Of valt dit misschien samen te voegen?

code:

ul#menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#menu li a {
    list-style: none;
    background-color: #555555;
    float: left;
    width: 100px;
    height: 20px;
    margin: 0 5px 0 0;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

Of alles bij elkaar?

code:

ul#menu li a {
    list-style: none;
    background-color: #555555;
    float: left;
    width: 100px;
    height: 20px;
    margin: 0 5px 0 0;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

Ik zie door de bomen het bos niet meer...

[ Voor 37% gewijzigd door F4T4L_3RR0R op 24-09-2008 19:28 ]

[HendrikN]

F4T4L_3RR0R schreef op woensdag 24 september 2008 @ 18:58:
[...]

Width moet ik opgeven, anders past de div zich aan aan de lengte van de regel.

Float: left kan ik weglaten begrijp ik goed?

De kleuren in de css en de div #phpcode hebben namen gekregen voor testdoeleinden, uiteindelijk zullen de namen worden aangepast als de pagina live gaat.

Heb zojuist ook de PHP code aangepast, moet alleen nog paar dingen afwerken:

- Kreeg de tip om de P in de SPAN te zetten, moet uitzoeken wat daar precies mee bedoeld wordt en hoe ik dat realiseren.
- Margins voor de P opgeven in de stylesheet. Moet nog uitzoeken of dat P moet worden of #phpcode P.
- Uitzoeken of P geopend en gesloten moet worden, lees op internet tegenstrijdige berichten.
- De links over de volle breedte als knoppen laten fungeren in alle browsers, display: block; werkt niet in IE6.

Dus ik ben bijna klaar, moet alleen een beetje op weg worden geholpen.

Een Paragraaf zet je nooit in een span, aangezien een paragraaf een Block-element is!

[F4T4L_3RR0R]

HendrikN schreef op woensdag 24 september 2008 @ 19:02:
[...]


Een Paragraaf zet je nooit in een span, aangezien een paragraaf een Block-element is!

Duidelijk!

Heb tevens het IE6 probleem met de knoppen provisorisch opgelost, zie edit van mijn vorige post.

[ Voor 4% gewijzigd door F4T4L_3RR0R op 24-09-2008 19:30 ]

[Xander]

F4T4L_3RR0R schreef op woensdag 24 september 2008 @ 18:58:
Of alles bij elkaar?

code:

ul#menu li a {
    list-style: none;
    background-color: #555555;
    float: left;
    width: 100px;
    height: 20px;
    margin: 0 5px 0 0;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

Nu ga je toch iets teveel doen hoor...

Wat stel je je voor bij een list-style op een a? Als je die list-style: none; weghaalt bij de ul krijg je weer mooie bolletjes voor alle knoppen, wil je niet gok ik.

Ennuhm, je li's floaten nu niet meer, enkel de a's floaten nog binnen die li's. Ergo, je knopjes staan niet meer naast elkaar nu.

Dat was je opgevallen als je het had uitgeprobeerd... (tip: FireFox met de Web Developer Toolbar, kun je je CSS in real-time bewerken)

Je wilt nu volgens mij ook een beetje teveel opruimen. Die dubbele width/height was idd niet nodig, de li rekt wel mee met de a die erin zit. Maar meer dan dat opruimen had niet gehoeven...

[ Voor 6% gewijzigd door Xander op 24-09-2008 19:41 ]

[F4T4L_3RR0R]

Dus de volgende code is bruikbaar?

code:

ul#menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#menu li {
    background-color: #555555;
    float: left;
    margin: 0 5px 0 0;
    text-align: center;
    line-height: 20px;
}
ul#menu li a {
    width: 100px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    display: block;
}

[F4T4L_3RR0R]

Ik ben de laatste puntjes op de i aan het zetten betreffende mijn website. Alleen struik ik nog over een ding, namelijk het volgende:

Xander schreef op woensdag 24 september 2008 @ 00:12:
[...]


Ja, je had de <p>'s kunnen laten staan en daar met css een margin aan kunnen hangen?

Die kun je zelfs nog op de <span>'s zetten trouwens. Kun je die <br>'s weglaten. Niet dat ik er persoonlijk problemen mee zou hebben om twee <br>'s te gebruiken overigens.

Mijn bedoeling is om de <br>'s te vervangen voor <p>'s en daar een margin aan hangen.

Hoe moet de opbouw eruit zien?

Momenteel:

<span class="kleur">tekst</span><br><br>

Voorheen was het:

<span class="kleur">tekst</span><p>

Maar wat zijn nu de opties betreffende wat Xander schreef?

<p><span class="kleur">tekst</span></p>

<p><span class="kleur">tekst</p></span>

<span class="kleur"><p>tekst</span></p>

<span class="kleur"><p>tekst</p></span>

Alvast bedankt voor het meedenken iedereen, zonder jullie hulp was ik nergens.

Edit:

DOCTYPE is HTML 4.01 STRICT.

[dB90]

Ik denk zo

HTML:

<p><span class="kleur">tekst</span></p>

Oh enne..

quote: http://www.w3.org/TR/REC-html40/struct/text.html#h-9.3.1

HTML4.0(1) specification

9.3.1 Paragraphs: the P element
Start tag: required, End tag: optional

Google

[RM-rf]

nogmaals, het is onzin een tag te veranderen door een andere tag, enkel omdat je denkt of ergens gehoort hebt 'dat dat beter zou zijn'...

feit blijft dat je dan eigenlijk niet weet wat je doet en nog steeds compleet verkeerd nadenkt over je bouwmethode (een beetje als de kok die denkt haute cuisine te koken, maar niet begrijpt dat je daarvoor verschillende pannen moet gebruiken en afvraagt of het beter is uien, worst, aardappels en penen in een kookpan te gooien en lang door te koken, of dat het beter is dat te doen met broccoli, tortelloni en excuise sausen ... of dat het uitmaakt of heij alles in een hoge of juist een brede pan tot moes kookt .... uiteindelijk maakt die kok alleen maar hutspot, en dat zal hij blijven doen totdt hij doorheeft dat het idee van 'koken' toch net wat dieper gaat dan 'wat etensmiddelen in een grote pan gooien en tot prut koken' )


het is dus een dom idee om P-tags te gebruiken als de inhoud die daarbinnen valt ook niet daadwerkelijke Alinea's zijn, die zo leesbaar zijn (het liefst gescheiden via H-tags die eventueel een diepergaande tekst-structuur kunnen aangeven)...

wanneer de blokjes tekst eigenlijk niets anders zijn dan visueel gescheiden informnatie zonder 'lijst-eigenschappen... zou ik zelfs overwegen of een gewone SPAN niet voldoet...

breaks en margins na deze stukjes tekst kun je via CSS ook regelen dmv 'display: block; en margin-properties.

HTML:

<p><span class="kleur">tekst</span></p>

is imho net zozeer onzin als de rest.... als de tekst werkelijk een aline is, laat het dan bij een P-tag, anders voldoet een SPan zonder verdere 'parent'-omkapselende tag:

HTML:

<p class="structuur-beschrijvende-classname"> dit is een stukje alinea, geordend in een leesbare tekst 
   met meerdere zinnen en een soort van opbouw. Dit om een 
   omvattende P-tag te rechtvaardigen. </p>
of juist:
<span class="beschrijvende-classname"> tekst </span>
<span class="andere-beschrijvende-classname"> andere tekst </span>

[F4T4L_3RR0R]

Met:

code:

<div id="tekst">
<span class="beschrijvende-classname"> tekst </span>
<span class="beschrijvende-classname"> andere tekst </span>
</div>

Komen de regels direct onder elkaar.

De bijbehorende CSS:

code:

#tekst {
    clear: both;
    background-color: #000000;
    width: 100%;
    height: 525px;
    padding: 10px 10px 0 10px;
    font-size: 10px;
    line-height: 11px;
    overflow-x: hidden;
    overflow-y: scroll;
}
#tekst beschrijvende-classname {
    color: #0099FF;
}

Zwarte achtergrond, tekst over de breedte van de pagina, div is 525px hoog, met de padding loopt de tekst links, rechts en boven niet geheel tegen de randen aan, letters zijn 10px hoog, ruimte tussen de regels bij automatische terugloop, nooit horizontale scrollbalken en altijd verticale scrollbalken.

Ik wil dus altijd ruimte tussen 2 aparte regels, het liefst zelf te bepalen. Of ik dit nu moet aanpakken met <p>, <br> of iets anders is mij geheel onduidelijk. Momenteel los ik dit provisorisch op door een <br>.

[RM-rf]

alsjeblieft... begin nu eens met het basis idee dat een tag niet je visuele layout bepaalt ... dit hooguit een definitie is voor de 'structuur' binnen je pagina.

CSS is echt de absoluut enige methode om een specifieke layout te definieren (voor zover browsers elementen zelf al een standaard layout meegeven, is dit altijd te overrullen door zelf in je CSS anders te definieren... in hoeverre dat wenselijk is is natuurlijk altijd een tweede)

als je bv je SPAN de volgende CSS meegeeft

Cascading Stylesheet:

DIV#tekst SPAN.beschrijvende-classname {
    display: block;
    margin: 3px 5px 10px 5px;
    color: #0099FF;
}

heb je exact hetzelfe effect dat de inhoud die erbinnen staat in losse blokken terecht komt die erna een 'break' genereren (het volgende block begint op de volgende regel, een eigenschap van block-level weergave van elementen)..

de uiteindelijke vraag wélke tag je wilt gebruiken heeft dus NIKS te maken met hoé je dat stukje informatie visueel wilt presenteren... echter wél met de inhoudelijke en structurele waarde binnen je pagina ... wàt betekent dat stukje informatie, welke 'rol' speelt dat stukje in je HTML.

en nogmaals, daarom is het dus enorme 'onzin' om te denken dat je die beschrijvende classnames pas helemaal aan het einde van je HTML-bouwen kunt geven (als je eigenlijk al klaar bent) en het nu zinnig zou zijn te werken met classnames als 'blauw' of 'wit' of 'kleine-tekst' ... juist nadenken over de structuur en structurele waardes is essenuieel in het bouwen van een moderne HTML_pagina, en iets waar je juist mee moet beginnen aan het begin en met alle respect, ik heb sterk het idee dat je qua denkniveau nog moeite daarme hebt, nog teveel in HTML-3.2 denkt... Stoofpot-HTML)

[ Voor 5% gewijzigd door RM-rf op 26-09-2008 00:25 ]

[F4T4L_3RR0R]

RM-rf, bedankt voor je tips, ik heb het nu werkend gekregen, heb zelfs de padding's uit de opmaak van de DIV kunnen verwijderen.

Dat ik onlogische classnames gebruik op het forum heeft te maken met het feit dat ik de namen van de processen niet open en bloot op internet kan gooien. De PHP code haalt logfiles op filtert deze en wijst span's toe.

Ik denk dat mijn site nu helemaal af is, de basis van de HTML die ik voor iedere "tabblad" heb aangepast:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="refresh" content="60">
<title>Titel</title>
<link href="opmaak.css" rel="stylesheet"> 
</head>

<body>
<div id="container">
  <ul id="menu">
    <li class="wit active"><a href="index.php">LINK1</a></li>
    <li class="blauw"><a href="index2.php">LINK2</a></li>
    <li class="rood"><a href="index3.php">LINK3</a></li>
    <li class="geel"><a href="index4.php">LINK4</a></li>
  </ul>
<div id="filtertekst">
<?php
Hier mijn PHP code.
?>
</div> <!-- filtertekst -->
</div> <!-- container --> 

</body>
</html>

CSS:

code:

body, html {
    background-color: #336699;
    text-align: center;
    font-family: Tahoma, Arial, Verdana, sans-serif;
}
#container {
    margin: 0 auto 0 auto;
    width: 950px;
    text-align: left;
}
ul#menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#menu li {
    background-color: #555555;
    float: left;
    margin: 0 5px 0 0;
    text-align: center;
    line-height: 20px;
}
ul#menu li a {
    width: 100px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    display: block;
}
ul#menu li.wit a {
    color: #FFFFFF;
}
ul#menu li.blauw a {
    color: #0099FF;
}
ul#menu li.rood a {
    color: #FF1133;
}
ul#menu li.geel a {
    color: #FFDD00;
}
ul#menu li.active a {
    background-color: #000000;
}
ul#menu li a:hover {
    text-decoration: underline;
}
#filtertekst {
    clear: both;
    background-color: #000000;
    width: 100%;
    height: 525px;
    font-size: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
}
#filtertekst .blauw {
    color: #0099FF;
    margin: 10px 10px 15px 10px;
    display: block;
}
#filtertekst .rood {
    color: #FF1133;
    margin: 10px 10px 15px 10px;
    display: block;
}
#filtertekst .geel {
    color: #FFDD00;
    margin: 10px 10px 15px 10px;
    display: block;
}

Bij deze wil ik iedereen welgemeend erg bedanken voor alle geboden hulp, opmerkingen, suggesties en andere dingen!

[F4T4L_3RR0R]

Dacht ik eindelijk klaar te zijn, stuit ik weer tegen een foutje/slordigheidje...

Firefox & Google Chrome:



IE6 & IE7:



In beide gevallen is dit de laatste regel tekst als er helemaal naar beneden wordt gescrollt.

Heb al geprobeerd de spans (waaruit de tekst bestaat) te voorzien van <p> tags met opgegeven margins, werkt niet. Ook paddings in de div (zwarte achtergrond waarin de tekst staat) werkt niet.

Enige lapmiddel is <br> onderaan zetten, dus:

<div>
<span>door php gegenereerde spans en tekst</span>
<span>door php gegenereerde spans en tekst</span>
<span>door php gegenereerde spans en tekst</span>
<br>
</div>

Suggesties zijn wederom welkom.

[F4T4L_3RR0R]

Heb van alles geprobeerd, maar lijkt wel of de margins op de spans in de div niks uithalen op de laatste regel in Firefox.

[Xander]

Probeer eens een padding-bottom op je div?

[F4T4L_3RR0R]

Xander schreef op vrijdag 26 september 2008 @ 18:00:
Probeer eens een padding-bottom op je div?

Al geprobeerd, maar als ik dan padding-bottom kies van bijvoorbeeld 100px, dan wordt de div 100px langer en wordt dit gedeelte opgevuld met de tekst uit de spans.

Edit:

Voor de beeldvorming hoe het was:



En met padding-bottom van 100px in de div:

[ Voor 22% gewijzigd door F4T4L_3RR0R op 26-09-2008 18:12 ]

[F4T4L_3RR0R]

Ik ben een paar dagen aan het stoeien geweest, onder andere door dingen uit de CSS te verwijderen of te verplaatsen, tot het helemaal opnieuw bouwen van een DIV met spans erin, maar alles met hetzelfde resultaat als boven.

Wie de oplossing weet mag het roepen, ik kom er niet meer uit.

[Zakkenwasser]

F4T4L_3RR0R schreef op maandag 22 september 2008 @ 00:43:
...

Zijn er nog aanvullingen of verbeteringen?

testen testen testen testen

maar serieus, gebruik firefox met firebug daarmee kun je css"live" aanpassen, en zie je het effect gelijk.
Zo weet je natuurlijk ook of je font-weight moet aanpassen.

Ik zelf gebruik "The essential guide for html & css" (friendsofEd) kun je bestellen als een soort van handboek voor allerlei truukjes, kost niet veel en binnen 1 week in huis via bol.



Zeker handig als webdesign je wel ligt.

F4T4L_3RR0R schreef op dinsdag 23 september 2008 @ 16:36:
[...]

Je kan zo wel half GoT sluiten en iedereen naar de bibliotheek verwijzen... Schaf dan ook gelijk docenten of scholen af, de leerlingen kunnen immers ook de boeken thuis lezen en hoeven daarvoor geen docent te raadplegen.

Natuurlijk niet, GoT is er inderdaad voor vraagjes, helemaal geen schande!
Ik doe het ook!

Maar als je jezelf wilt verdiepen en offline ook wilt leren, dan is het toch handig om een boek erbij te pakken.

Het kan zeker geen kwaad om jezelf zelfstandig intelezen:P
daar zijn die boekentips voor.

[ Voor 69% gewijzigd door Zakkenwasser op 02-10-2008 08:12 ]

[F4T4L_3RR0R]

Bedankt voor de tips!

Ik heb toch besloten om het anders aan te pakken.

In de div staan nu spans met een bepaalde opmaak en een "display: block", hierdoor wordt de hele pagina niet printvriendelijk.

<div>
<span class="opmaak">Dit is een regel tekst</span>
<span class="opmaak">Dit is een regel tekst</span>
<span class="opmaak">Dit is een regel tekst</span>
<span class="opmaak">Dit is een regel tekst</span>
</div>

Komt er uit te zien als:

Dit is een regel tekst
Dit is een regel tekst
Dit is een regel tekst
Dit is een regel tekst

Maar als ik dit wil printen, komt door het ontbreken van de opmaak de "display: block" te vervallen wat resulteert in:

Dit is een regel tekstDit is een regel tekstDit is een regel tekstDit is een regel tekst

Ik wil dit opvangen door iets toe te voegen aan de spans of de spans helemaal te vervangen door een ander element.

Edit:

Ik heb alle SPAN's veranderd naar P's.

<div>
<p class="rood">Dit is een regel tekst</p>
<p class="geel">Dit is een regel tekst</p>
<p class="blauw">Dit is een regel tekst</p>
<p class="rood">Dit is een regel tekst</p>
</div>

Met de bijbehorende CSS:

code:

#divnaam {
    clear: both;
    background-color: #000000;
    width: 100%;
    height: 525px;
    float: none;
    font-size: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
}
#divnaam p {
    margin: 10px 10px 15px 10px;
}
#divnaam .blauw {
    color: #0099FF;
}
#divnaam .rood {
    color: #FF1133;
}
#divnaam .geel {
    color: #FFDD00;
}

Mag ik überhaupt wel margins aan een P hangen?

[ Voor 27% gewijzigd door F4T4L_3RR0R op 03-10-2008 04:47 ]

[Xander]

Natuurlijk. Waarom zou het niet mogen? CSS is niet zo streng hoor.

[Rowanov]

F4T4L_3RR0R schreef op vrijdag 03 oktober 2008 @ 04:24:
Mag ik überhaupt wel margins aan een P hangen?

De referentie en met name de 'property index' zijn zo slecht nog niet

[F4T4L_3RR0R]

Alles werkt fijn nu, door de P's is de site ook leesbaar, mocht de stylesheet wegvallen door wat voor reden of op wat voor apparaat dan ook!

Enige storende is dat de bottom margin voor de laatste regel niet lijkt te gelden, heb van alles geprobeerd wat niet lukte, maar ik heb er mee leren leven...

Bedankt voor alle tips!

[ Voor 4% gewijzigd door F4T4L_3RR0R op 06-10-2008 16:33 ]

[Bosmonster]

F4T4L_3RR0R schreef op maandag 06 oktober 2008 @ 16:32:
Alles werkt fijn nu, door de P's is de site ook leesbaar, mocht de stylesheet wegvallen door wat voor reden of op wat voor apparaat dan ook!

Enige storende is dat de bottom margin voor de laatste regel niet lijkt te gelden, heb van alles geprobeerd wat niet lukte, maar ik heb er mee leren leven...

Bedankt voor alle tips!

Sterker nog, daar zijn p's voor bedoeld

Dat storende komt door een fenomeen dat heet 'margin-collapse'. De marge loopt feitelijk door buiten het element, tenzij je er bijvoorbeeld een padding of border aan meegeeft.

Je kunt dit heel vies oplossen door het element een padding-bottom: 0.1px mee te geven bijvoorbeeld. Dit zie je niet, maar lost wel het probleem op.

[ Voor 10% gewijzigd door Bosmonster op 06-10-2008 16:53 ]

[F4T4L_3RR0R]

Door een padding-bottom van 0.1px mee te geven in de DIV waarin de P's komen los ik het probleem niet op. Met een border (solid 10px black) in de DIV zweeft de scrollbalk als het waren in het scherm, met border-bottom komt er een zwart stuk onder de scrollbalk.

Als ik een border-bottom (solid 10px black) aan de P meegeef, dan mis ik ook nog een stuk...

Maar ik heb er mee leren leven. Vreemd genoeg geeft IE6 en IE7 het wel goed weer...

[ Voor 11% gewijzigd door F4T4L_3RR0R op 06-10-2008 23:51 ]

[Bosmonster]

F4T4L_3RR0R schreef op maandag 06 oktober 2008 @ 23:50:
Door een padding-bottom van 0.1px mee te geven in de DIV waarin de P's komen los ik het probleem niet op. Met een border (solid 10px black) in de DIV zweeft de scrollbalk als het waren in het scherm, met border-bottom komt er een zwart stuk onder de scrollbalk.

Als ik een border-bottom (solid 10px black) aan de P meegeef, dan mis ik ook nog een stuk...

Maar ik heb er mee leren leven. Vreemd genoeg geeft IE6 en IE7 het wel goed weer...

IE6 en 7 doen het niet goed. Het gedrag is vreemd, maar wel correct volgens de specificaties. Ik kan zo zonder exact voorbeeld even niet zeggen waar het bij jou aan ligt.

In een eenvoudige testcase hier werkt het.

Als het bij jou gaat om de body, dan kun je proberen deze padding aan de body toe te voegen.

[F4T4L_3RR0R]

Bosmonster schreef op dinsdag 07 oktober 2008 @ 09:33:
[...]


IE6 en 7 doen het niet goed. Het gedrag is vreemd, maar wel correct volgens de specificaties. Ik kan zo zonder exact voorbeeld even niet zeggen waar het bij jou aan ligt.

In een eenvoudige testcase hier werkt het.

Als het bij jou gaat om de body, dan kun je proberen deze padding aan de body toe te voegen.

Net ook geprobeerd die margin aan de body en de container (om het geheel te centreren) geplaatst zonder resultaat.

Hier de betreffende pagina, wel gestript van de uiteindelijke inhoud, dus namen, text en links zijn fictief maar wel werkzaam:
http://82.95.205.248/test2/

Edit:

Heb voor het gemak de CSS in de html's zelf gezet in plaats van in losse stylesheet, dit voor het editable gemak.

[ Voor 8% gewijzigd door F4T4L_3RR0R op 07-10-2008 12:49 ]

[martijnve]

Dat probleem met ruimte onder in een div maken ben ik met firefox3 ook tegenaan gelopen. Lijkt echt een bug te zijn (zeker omdat het met firefox 2 niet zo is!)

[F4T4L_3RR0R]

In Google Chrome doet het probleem zich ook voor... (of zal dat een FF3 rip-off zijn?)

[ Voor 25% gewijzigd door F4T4L_3RR0R op 07-10-2008 13:05 ]

[Bosmonster]

F4T4L_3RR0R schreef op dinsdag 07 oktober 2008 @ 13:04:
In Google Chrome doet het probleem zich ook voor... (of zal dat een FF3 rip-off zijn?)

Google Chrome gebruikt Webkit, net als Safari. FF3 heeft een aantal bugs en features gefixed ten opzichte van 2 en dit is er een van.

Bij jou lijkt het probleem te komen door de fixed height. Als je die weg haalt werkt de fix ook.