website aanpassen van frames naar div

Status
Niet open voor verdere reacties.
zeer wel bedankt csshunter

ik heb nu al mijn pagina's aangepast, maar bij 2 pagina's zit ik nog met een probleem

http://www.vissersparadijs.be/website/album.html
http://www.vissersparadijs.be/website/archief.html

op deze 2 pagina's zie je dus dat de titel Archief en album wel in het midden staat maar de linken eronder niet, hoe los ik dit op? in IE9 staat alles wel goed, maar in chrome-mozilla en IE8 niet raar.


wat ik ook nog zou willen is dat er een kader rond mijn container zit nu zie je b.v.b dat op deze pagina
http://www.vissersparadijs.be/website/leden.html mijn menu stopt. en dat is wat raar hoe doe ik dit?

grtz ringo

iemand nog een oplossing hiervoor?

grtz ringo


Nop, want we kunnen de 3 bovenstaande links niet zien: alle drie 404 - Page Not Found. ;)


oei foutje in de link
dit zijn de goede linken

http://www.vissersparadijs.be/website/album.html
http://www.vissersparadijs.be/website/archief.html

http://www.vissersparadijs.be/website/archief.html

grtz ringo
 
Laatst bewerkt:
Hoi Ringo,

Pagina's: album en archief
De <div class="arhoeken"> centreert over de volle breedte van de pagina, maar daar moet de linkerkolom nog van af:
Code:
.arhoeken {
    background: transparent;
    margin-left: 190px;
    width: 300px;
    }

Pagina: leden (e.a.)
Het menu laten doorlopen kan je doen met de faux columns techniek (zie bv. hier voor uitleg; daar met 3 kolommen, maar met 2 kolommen gaat het hetzelfde): onder het menu door loopt een background-image met precies de breedte en de kleur:

vissersp-menu-bg.png

vissersp-menu-bg.png

Dit wordt verticaal herhaald, en gemonteerd in de <div> waar het menu in zit:
Code:
#container {
    background: url(images/vissersp-menu-bg.png) repeat-y;
    color: #FFDEAD;
    margin: 0 auto;
    width: 950px;
}
Ik denk dat je dit er standaard op alle pagina's in kunt zetten.

Met vriendelijke groet,
CSShunter
 
hey csshunter, ik heb dit dus geprobeert, maar in chrome staat het nog altijd niet in het midden in IE9 wel
het menu loopt nu helemaal tot onderaan.dat is al zeer goed en hoe sluit ik de andere kant af?

grtz ringo
 
Laatst bewerkt:
Hoi Ringo,
Ja, ik zie het, in Chrome en ook in Safari gaat het nog niet goed; in alle andere browsers wel. Dat Chrome en Safari hetzelfde doen, kan kloppen: die maken gebruik van dezelfde "browser engine" (WebKit) die de pagina samenstelt.

De diepere oorzaak zal er in liggen, dat de container-div van de hoekjes-boxes de linkerkolom overlapt, een (achterhaalde) html-eigenschap align="center" heeft, en de hoekjes-boxes ook nog een margin-left hebben.
Het beste is om het hele rechterblok (met alles van de inhoud er in) te isoleren van de menukolom, dan kan je er nooit last van hebben. Dat maakt het ook makkelijker om wat je wilt in de inhoud te centreren.

Nu heb ik pas een recept voor een dergelijke constructie gemaakt, en daarom hierbij wat "huiswerk". ;)


  • "Opdracht 1": de stappen 1 t/m 6 van dit topic doornemen.

  • "Opdracht 2": de pagina van stap 6 als losse testpagina kopiëren, jouw menu en de inhoud van de Album-pagina er in zetten (nog even de header en de footer vergeten), en de css aanpassen aan jouw maten e.a. eigenschappen van de menukolom en de inhoud. Alle css kan voorlopig in de head worden gezet, dan zit alles mooi bij elkaar. Link naar deze testpagina graag hier posten!

=====
hoe sluit ik de andere kant af?
Aan de rechterkant kan je het grijs van het menu laten terugkomen als lijntje. Samen met de background-kleur van de inhoud kan daarvoor de strook van de menu-kolom uitgebreid worden naar rechts, dan is het lijntje altijd net zo hoog als de hoogste van de twee kolommen.


(Je ziet het hier niet vanwege de overstraling door de lichte achtergrond, maar er zit wel degelijk aan de rechterkant een verticaal grijs lijntje van 1px)
Het kan nu geplaatst worden als background-img in de <body>.

Met vriendelijke groet,
CSShunter
__________
PS: Ik heb m'n huiswerk al af :D , en Chrome en Safari geven nu geen problemen meer.

PS2: Hele leuke manier om met alleen css ronde hoeken te maken :). Die ben ik de laatste 7 jaar niet meer tegengekomen; waar heb je die opgeduikeld?
 
hey csshunter, ik ga dit eens allemaal bekijken alvast bedankt daarvoor

[quote="csshunter]Aan de rechterkant kan je het grijs van het menu laten terugkomen als lijntje. Samen met de background-kleur van de inhoud kan daarvoor de strook van de menu-kolom uitgebreid worden naar rechts, dan is het lijntje altijd net zo hoog als de hoogste van de twee kolommen.
vissersp-body-bg.png

(Je ziet het hier niet vanwege de overstraling door de lichte achtergrond, maar er zit wel degelijk aan de rechterkant een verticaal grijs lijntje van 1px)
Het kan nu geplaatst worden als background-img in de <body>.[/quote]
ik heb de afbeelding opgeslagen in mijn images en deze regel in mijn css tegevoegd bij body

background: url(images/vissersp-body-bg.png)repeat-y;

maar dit wil blijkbaar nog niet lukken om de rechtekant te sluiten

het ander moet ik nog eens bekijken.


de ronde hoeken heb ik gemaakt via deze link;)

http://users.skynet.be/javascript/varia/rondehoeken.htm

grtz ringo
 
Ah, eigenlijk de scriptloze versie zie ik (users.skynet.be/javascript/varia/rondehoeken2.htm). En ik zat er niet heel ver naast: de pagina is van 23 januari 2007. :)

... in mijn css toegevoegd bij body ... dit wil blijkbaar nog niet lukken om de rechterkant te sluiten
Inderdaad, dat blijkt bij de huidige pagina-structuur niet op te gaan (want de body heeft geen breedte en is niet gecentreerd).
Maar zet 'm maar eens in de #container.

Met vriendelijke groet,
CSShunter
 
hey csshunter, ik ben al wat bezig geweest maar het wil niet lukken om de rechterkant te sluiten

ik heb dus dit
background: url(images/vissersp-body-bg.png)repeat-y;
in mijn container geplaatst maar ik zie gaan lijn aan de andere kant
hierbij een link naar de test pagina
http://www.vissersparadijs.be/test/snoekvissers.htm

en hier nog eens mijn css

Code:
/*stylesheet snoekvissers*/
body{
background-color:#433B38;
}

#container {
width:950px;
background: url(images/vissersp-menu-bg.png) repeat-y;
background: url(images/vissersp-body-bg.png)repeat-y;


 
color: #FFDEAD;
margin: 0 auto; /* toevoegen */

color:#FFDEAD;
}
#header{
width:950px; }

#menu{
width:190px;
float:left;
background-color:#696969;}
#menu ul {
list-style:none;
margin:5px;
padding:0px;
font-family:Calibri;
padding-top:10px 0px 0px 0px;
}
#menu ul a{
color :#ffffff ;
text-decoration :none ;
display:block;
height:30px;
border:1px solid #515A5A;
padding-top:3px;
padding-left:15px;
}

#menu ul a:hover{
background-color : #7DB3B3;}

#content {
margin-left: 220px;
    }
	
#welkom h1{
margin-right:10px;
padding-left:10px;
padding-top:10px;
text-align:center;
font-family:Calibri;
color:#FFDEAD;
}
p  {font-family:Calibri;
    font-size:13;
		color:#FFDEAD;
		}
#footer {
clear: both;
background-color: #ccc;
color:#433B38;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align:center
}

grtz ringo

ps: in chrome zie ik de lijn dus wel maar in IE niet
 
Laatst bewerkt:
't Is ook altijd dezelfde!
IE7 en IE8 vertikken het om de lijn te laten zien, IE9 toont 'm wel (zegt Netrenderer).

Je hebt staan:
Code:
#container {
    ...
    background: url(images/vissersp-menu-bg.png) repeat-y;
    background: url(images/vissersp-body-bg.png)repeat-y;
    }
Het eerste background-img is het oude, met alleen de menu-kolom; de tweede is de nieuwe met het lijntje erbij.
Normaal gesproken overmeestert een latere stijlregel de eerdere, dus zou de afbeelding met het lijntje getoond moeten worden (en kan de eerste weggelaten worden).
Maar ... er zit een tikfoutje in de tweede: tussen het laatste haakje ) en repeat-y zit geen spatie. Attentie: zie conclusie!

Nu komt de fout-afhandeling van de browsers om de hoek kijken (en daar zijn geen vaste regels voor!):
  • Firefox, Chrome, Opera, Safari en IE9 zijn zo vriendelijk de tikfout in de tweede regel door de vingers te zien, en ondanks de vergeten spatie toch de tweede te tonen, met overrulen van de eerste regel.
  • IE7 en IE8 echter beginnen met de eerste (zonder lijntje) te tonen, komen dan de spatieloze regel tegen, signaleren dat daar een css-fout in zit, en verklaren kennelijk de hele stijlregel ongeldig. Dan blijft de eerste regel gelden, en wordt dus wel het grijs onderaan de menukolom getoond, maar geen lijntje!
  • Je kan dit controleren door de tweede (zonder spatie) te laten staan, en de eerste regel weg te halen uit de css: mijn voorspelling is dat dan IE7 en IE8 helemaal geen grijs meer tonen, ook niet onder het menu.
Zo is 't gekomen. ;)

Nu heb je wellicht de css-validator willen raadplegen om css-tikfoutjes op te sporen, maar de css-validator geeft hier geen gehoor. Die zegt Stylesheet-bestand niet gevonden. Maar het is er wel, en wordt duidelijk ook toegepast! :shocked:
Hoe zit dat nu weer? Want de html-validator van w3c geeft volledig groen licht.

Maar als je de html-validator HTML-Tidy in Firefox hebt gestopt (deze add-on is hier in België te bekomen), dan zie je bij het bekijken van de FF-broncode een waarschuwing bij de regel waarin het stylesheet wordt aangeroepen:
regel 8: <link href="stylesheet snoekvissers.css" rel="stylesheet" type="text/css">
Waarschuwing:
escaping malformed URI reference
Een "malformed URI reference" is een "verkeerde notitie voor een URI (= URL) verwijzing", en aan de rechterkant van het waarschuwingsvenster staat een sympathiek aantal voorbeelden van wat er fout kan zijn gegaan.
  • Hier is de spatie tussen stylesheet en snoekvissers.css de boosdoener.
  • In html-verwijzingen naar een bestand of map op een server mogen namelijk géén spaties staan. Als een bestand (of map) naar de server is geüpload met spatie, moet in de verwijzing het %20 teken staan ipv de spatie.
  • Het moet hier dus worden: <link href="stylesheet%20snoekvissers.css" rel="stylesheet" type="text/css">
  • NB: ook andere speciale tekens, zoals accentletters en leestekens moeten een speciale %.. notatie krijgen; zie hier voor de complete lijst van verboden waar.

Maar voorkomen is beter dan genezen:
  • Tip: gebruik nooit spaties en bijzondere lettertekens in een bestandsnaam of mapnaam. Voor de leesbaarheid van de woorden in een bestandsnaam of mapnaam kan er een streepje - of onderstreepje _ tussen gezet worden (die mogen wel zonder speciale benadering).
  • Met <link href="stylesheet-snoekvissers.css" rel="stylesheet" type="text/css"> is er dus geen enkel probleem (als het stylesheet ook als zodanig is geüpload).

Maar je kunt het stylesheet ook rechtstreeks laten valideren door de css-validator. Dan is dit het resultaat:


  • Naast andere dingen wordt de waarschuwing afgegeven dat er in regel 9 "Herdefinitie van background-image" en "Herdefinitie van background-repeat" plaatsvindt.
  • Maar er wordt niets gezegd over de spatie die er niet is (het gaat nogal over spaties vandaag ;) ).
  • Het merkwaardige is, dat als je onderaan de validatie-pagina kijkt naar de goedgekeurde code, de spatie er wel keurig tussen gezet is! :rolleyes:

Rijst de vraag: is de spatie tussen het haakje en de repeat dan toch niet verplicht?
Kijken we in de css-specificatie voor de shorthand background-eigenschappen:
  • Daar staat als voorbeeld: P { background: url("chess.png") gray 50% repeat fixed }.
  • Met spatie dus, maar er staan ook andere spaties die niet perse nodig zijn; geeft dus geen uitsluitsel.
  • Via de CSS property definitions uitgekomen bij de Appendix G. Grammar of CSS 2.1. Die gaat helaas boven mijn pet.
  • Maar als je een aantal css-compressors langsloopt, verwijderen die vaak de spatie zonder een krimp te geven.

Conclusie:
Toch geen tikfoutje, het mag kennelijk ook zonder spatie, en IE7 en IE8 doen het gewoon fout.
Maar zelf zet ik er altijd wel een spatie tussen, ter bevordering van de leesbaarheid van de css. :)

Tot zo ver op heden!
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
hey csshunter, zeer wel bedankt voor al de hulp al :thumb:
nu heb ik wel nog een vraagje, ik ben al een hele tijd bezig om mijn letter type op mijn blad van klassement te verkleinen maar dit wil maar niet lukken
ik heb dus in mijn head dit aangegeven

td {font-size:13} ik heb zelf al 50 geprobeert maar dit wil niet veranderen, wat doe ik fout?

hier de html van mijn blad klassement

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="nl">
<head>
<style type="text/css">
<!--
h2 {border: #8B4513 outset 3mm;
    font-family:comic sans ms;
		background-color: #A52A2A;
		text-align:center;
    font-family:Schrift;
    font-size:25;
			 }
   }
td {font-size:13; 
    color:#FFDEAD;
		}
table {border: outset 1mm #8B4513
       
}

-->
</style>
<TITLE>vissersparadijs/Snoekvissers</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="stylesheet-snoekvissers.css" rel="stylesheet" type="text/css">
<meta name="description" content="persenal site">
<meta name="omschrijving" content="persoonlijke website">
<meta name="keywords" content="snoekvissers vissen hengelen leden kalender">
</head>
<body>
<div id="container">
<div id="header"><img alt="banner" src="logo's/banner.jpg" width="950px"></div>
<div id="menu">
<ul>
<li><img src="logo's/logo.png" width="170px" height="150" alt="logo"></li>
<li></li>
<li></li>
<li><p style="text-align:center;"><a href="http://www.easycounter.com/"><img src="http://www.easycounter.com/counter.php?ringo1" border="2" alt="Hit Counters"></a></p></li>
<li></li>
<li></li>
<li><a href="snoekvissers.htm">home</a></li>
<li><a href="http://www.vissersparadijs.be/">Forumindex</a></li>
<li><a href="reglement.html">Reglement</a></li>
<li><a href="leden.html">Leden</a></li>
<li><a href="kalender.html">Kalender + uitslagen</a></li>
<li><a href="bestuur.html">Bestuur</a></li>
<li><a href="klassement2012.html">Klassement&nbsp;2012</a></li>
<li><a href="album.html">Album</a></li>
<li><a href="http://snoekvissers.guestbook4you.be">Gastenboek</a></li>
<li><a href="linken.html">links</a></li>
<li><a href="nieuws.html">nieuws</a></li>
<li><a href="archief.html">Archief</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div>
<br>
<br>
<table border="1" align="center">
<tr>
<td colspan="12"><h2>Klassement 2011 gewicht</h2></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>namen</td>
<td>wedstrijd 1</td>
<td><p>wedstrijd 2</p></td>
<td>wedstrijd 3</td>
<td>wedstrijd 4</td>
<td>wedstrijd 5</td>
<td>wedstrijd 6</td>
<td>wedstrijd 7</td>
<td>wedstrijd 8</td>
<td>totaal gewicht</td>
<td>totaal punten</td>
</tr>
<tr>
<td>1</td>
<td>de maertelaere dylan &nbsp; <img src="logo's/beker.gif" alt="beker" width="25" height="35"></td>
<td>25.350</td>
<td>41.700</td>
<td>11.900</td>
<td>21.450</td>
<td>49.800</td>
<td>24.900</td>
<td>46.250</td>
<td>11.950</td>
<td align="center">233.400</td>
<td align="center">28</td>
</tr>
<tr>
<td>2</td>
<td>de wilde benoit</td>
<td>23.600</td>
<td>26.000</td>
<td>15.500</td>
<td>18.750</td>
<td>23.700</td>
<td>20.550</td>
<td>21.050</td>
<td>45.900</td>
<td align="center">195.050</td>
<td align="center">34</td>
</tr>
<tr>
<td>3</td>
<td>van den bossche david</td>
<td>15.250</td>
<td>31.250</td>
<td>23.000</td>
<td>100</td>
<td>28.400</td>
<td>7.000</td>
<td>19.950</td>
<td>25.100</td>
<td align="center">150.050</td>
<td align="center">62</td>
</tr>
<tr>
<td>4</td>
<td>van der brugge ringo</td>
<td>30.950</td>
<td>12.450</td>
<td>5.200</td>
<td>17.000</td>
<td>19.300</td>
<td>9.850</td>
<td>26.000</td>
<td>24.700</td>
<td align="center">145.550</td>
<td align="center">56</td>
</tr>
<tr>
<td>5</td>
<td>vereecke fony</td>
<td>12.250</td>
<td>17.950</td>
<td>18.000</td>
<td>16.700</td>
<td>30.750</td>
<td>10.100</td>
<td>17.400</td>
<td>17.400</td>
<td align="center">140.550</td>
<td align="center">56</td>
</tr>
<tr>
<td>6</td>
<td>verstraete dominique</td>
<td>15.000</td>
<td>36.050</td>
<td>22.850</td>
<td>10.350</td>
<td>21.100</td>
<td>6.000</td>
<td>19.050</td>
<td>100</td>
<td align="center">130.500</td>
<td align="center">71</td>
</tr>
<tr>
<td>7</td>
<td>de ketelaere gino</td>
<td>17.400</td>
<td>15.800</td>
<td>11.400</td>
<td>28600</td>
<td>14.250</td>
<td>10.850</td>
<td>7.950</td>
<td>21.200</td>
<td align="center">127.450</td>
<td align="center">62</td>
</tr>
<tr>
<td>8</td>
<td>van kerschaver ruben</td>
<td>5.000</td>
<td>11.350</td>
<td>26.800</td>
<td>0</td>
<td>39.350</td>
<td>0</td>
<td>8.300</td>
<td>24.750</td>
<td align="center">115.550</td>
<td align="center">91</td>
</tr>
<tr>
<td>9</td>
<td>van damme eric</td>
<td>15.800</td>
<td>0</td>
<td>29.600</td>
<td>14.300</td>
<td>0</td>
<td>3.100</td>
<td>22.750</td>
<td>25.650</td>
<td align="center">111.200</td>
<td align="center">76</td>
</tr>
<tr>
<td>10</td>
<td>spriet walter</td>
<td>2.650</td>
<td>1.350</td>
<td>17.850</td>
<td>6.500</td>
<td>29.250</td>
<td>14.200</td>
<td>10.800</td>
<td>6.800</td>
<td align="center">89.400</td>
<td align="center">93</td>
</tr>
<tr>
<td>11</td>
<td>mercy romaan</td>
<td>13.200</td>
<td>0</td>
<td>23.100</td>
<td>10.800</td>
<td>9.250</td>
<td>4.650</td>
<td>8.600</td>
<td>0</td>
<td align="center">69.600</td>
<td align="center">99</td>
</tr>
<tr>
<td>12</td>
<td>trieckels alex</td>
<td>11.300</td>
<td>23.450</td>
<td>5.800</td>
<td>22.000</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td align="center">62.250</td>
<td align="center">107</td>
</tr>
<tr>
<td>13</td>
<td>masen dirk</td>
<td>10.700</td>
<td>1.450</td>
<td>3.600</td>
<td>10.750</td>
<td>16.650</td>
<td>5.700</td>
<td>0</td>
<td>10.400</td>
<td align="center">59.250</td>
<td align="center">108</td>
</tr>
<tr>
<td>14</td>
<td>van den bossche steven</td>
<td>0</td>
<td>20.800</td>
<td>0</td>
<td>23.200</td>
<td>0</td>
<td>15.200</td>
<td>0</td>
<td>0</td>
<td align="center">59.200</td>
<td align="center">109</td>
</tr>
<tr>
<td>15</td>
<td>de baere dirk</td>
<td>1.050</td>
<td>8.850</td>
<td>7.400</td>
<td>10.400</td>
<td>8.900</td>
<td>8.000</td>
<td>8.150</td>
<td>5.000</td>
<td align="center">57.750</td>
<td align="center">113</td>
</tr>
<tr>
<td>16</td>
<td>savat ariette</td>
<td>10.150</td>
<td>0</td>
<td>7.750</td>
<td>16.050</td>
<td>11.900</td>
<td>1.950</td>
<td>6.800</td>
<td>0</td>
<td align="center">54.600</td>
<td align="center">113</td>
</tr>
<tr>
<td>17</td>
<td>dierikx marc</td>
<td>10.600</td>
<td>0</td>
<td>14.800</td>
<td>10.900</td>
<td>0</td>
<td>0</td>
<td>12.300</td>
<td>0</td>
<td align="center">48.600</td>
<td align="center">113</td>
</tr>
<tr>
<td>18</td>
<td>loete rudy</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>7.800</td>
<td>11.100</td>
<td>11.650</td>
<td>14.750</td>
<td>0</td>
<td align="center">45.300</td>
<td align="center">121</td>
</tr>
<tr>
<td>19</td>
<td>van der eecken ronny</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>18.800</td>
<td>25.900</td>
<td>0</td>
<td align="center">44.700</td>
<td align="center">123</td>
</tr>
<tr>
<td>20</td>
<td>masen marc</td>
<td>3.250</td>
<td>1.500</td>
<td>2.100</td>
<td>8.950</td>
<td>6.300</td>
<td>10.700</td>
<td>3.750</td>
<td>6.800</td>
<td align="center">43.350</td>
<td align="center">113</td>
</tr>
<tr>
<td>21</td>
<td>dewispelaere ronny</td>
<td>0</td>
<td>9.000</td>
<td>0</td>
<td>9.400</td>
<td>9.800</td>
<td>7.000</td>
<td>5.250</td>
<td>0</td>
<td align="center">40.450</td>
<td align="center">118</td>
</tr>
<tr>
<td>22</td>
<td>accoe patrick</td>
<td>10.000</td>
<td>7.800</td>
<td>100</td>
<td>6.650</td>
<td>0</td>
<td>4.950</td>
<td>100</td>
<td>0</td>
<td align="center">29.600</td>
<td align="center"></td>
</tr>
<tr>
<td>23</td>
<td>steverijns roger</td>
<td>2.000</td>
<td>0</td>
<td>1.450</td>
<td>2.250</td>
<td>4.350</td>
<td>4.650</td>
<td>1.300</td>
<td>6.350</td>
<td align="center">22.350</td>
<td align="center">142</td>
</tr>
<tr>
<td>24</td>
<td>de paepe carlos</td>
<td>5.050</td>
<td>1.650</td>
<td>0</td>
<td>10.450</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td align="center">17.150</td>
<td align="center">138</td>
</tr>
<tr>
<td>25</td>
<td>de poortere jurgen</td>
<td>2.100</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td align="center">2.100</td>
<td align="center"></td>
</tr>
<tr>
<td>26</td>
<td>serreijn bart</td>
<td>0</td>
<td>0</td>
<td>100</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td align="center">100</td>
<td align="center"></td>
</tr>
</table>
<br>
<div id="footer">Designed by: Van der Brugge Ringo</div>
</div>
 
</body>
</html>
zoals je ziet staan de voor en achternaam enzo niet naast elkaar, ik vindt het dus niet om het lettertype te verkleinen

grtz ringo

dit is de rechtstreekse link naar het blad
http://www.vissersparadijs.be/website/klassement2011.html
dit zou ik dan ook willen aanpassen op dit blad
http://www.vissersparadijs.be/website/uitslagen 2011.html
 
Hoi Ringo,
Als je in css een maat opgeeft, moet je erbij zetten wat de maateenheid is.
Anders weet de browser niet of hij/zij moet gaan rekenen in pixels, inches, cm, km, Brabantse Voeten, Engelse Zeemijlen, enz.
Voor lettergrootten kan je het beste de eenheid em gebruiknen: dat is 100% van de standaard-lettergrootte.
Als je dit doet:
Code:
...
h2 {
   font-size: 3.5em;
   }
zullen de browsers onmiddellijk reageren met een <h2> die 3,5 keer zo groot is als een gewone letter.

O ja, bij een font-family moet een lettertype-naam waar spaties in staan tussen aanhalingstekens gezet worden; en er hoort voor de veiligheid (als een computer het lettertype niet aan boord mocht hebben) een algemeen alternatief bij:
Code:
... {
   font-family: "comic sans ms", serif;
   }
 
hey csshunter, ik heb dit dus geprobeerd, maar ik krijg de namen en uitslagen in mijn tabellen niet kleiner.
dit heb ik dus gedaan

td {font-size:0.8em
color:#FFDEAD;
}

ik heb de 0.8em al verschillende keren veranderd in andere getallen maar zonder resultaat,
ik zou het dus iets kleiner willen als nu

grtz ringo
 
Hoi Ringo,
Ik had even snel de notering met maateenheden aangegeven, maar nog niet naar je site/code gekeken.

En ... als iets niet werkt wat wel zou moeten werken ... (zie mijn handtekening) ... dan controleren we eerst of er geen (tik)fouten in de html- en css-code zitten.

Als je op de css-validator pagina van klassement2011 kijkt, zie je onderaan de lijst met wel goedgekeurde css.
Daar staat de hele declaratie van een font-size voor de <td>'s niet bij! > Dat is dus een gevolg van de fouten.

Gaan we kijken wat er aan de hand is. De css in de <head> van die pagina is:
Code:
[SIZE=3]h2 {border: #8B4513 outset 3mm;
    font-family:[COLOR="#B22222"][B]comic sans ms;[/B][/COLOR], serif;
    background-color: #A52A2A;
		text-align:center;
    font-family:Schrift;
    font-size:1.5em;
			[COLOR="#B22222"] [SIZE=4][B]}[/B][/SIZE][/COLOR]
   }
td {[COLOR="#B22222"][B]font-size:0.8em 
    color:#FFDEAD;[/B][/COLOR]
		}
table {border: outset 1mm #8B4513}[/SIZE]
Bij de font-family moet de comic sans ms tussen aanhalingstekens. Daarna staat een puntkomma gevolgd door een komma: de puntkomma hoort er niet.
Er staat een afsluit-accolade te veel in de h2.
En achter de font-size van de td staat geen puntkomma. Dan leest de css-interpretator van de browser de volgende eigenschappen er bij, en staat er eigenlijk:
Code:
td {
   font-size: 0.8em color: #FFDEAD;
   }
De laatste DEAD in de code klopt. ;)
Want omdat wat achter font-size staat geen geldige waarde is voor een font-size, moeten de browsers die hele styleregel overslaan. Vandaar blijft de reactie op de opgegeven font-size zo dood als een pier: ook als je er een ander getal van maakt (en er geen puntkomma achter zet).

Zo moet je ook even de foutjes op de andere pagina en in het stylesheet nalopen, en alles zal goed komen. :)

Met vriendelijke groet,
CSShunter
___________
PS:
O ja, als je eerst de "comic sans ms" met "serif" als alternatief opgeeft voor de font-family, en twee regels verder de "Schrift" als font-family opgeeft, dan is dat op zich prima valid css.
Maar vanwege de voorrangsregels bij css haalt de laatste definitie de eerdere onderuit, en komen de "comic sans ms" en de "serif" niet tevoorschijn.
Het lettertype "Schrift" ken ik trouwens niet (zit in elk geval niet in Windows-XP). Bestaat dat wel?
- Als een lettertype niet op een computer zit, dan valt de browser terug op wat de browser als standaard-lettertype ingesteld heeft staan (of wat de gebruiker daarvan gemaakt heeft). > Dus ik zie de "Times New Roman" in de rechtopstaande versie.
  • Of bedoel je met "Schrift": cursief ?
    Dan moet het worden: { font-style: italic; }
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan