Eric,
Ik hier nu mijn voorbeeld veranderd met een titel van het drankje en de ingredienten met de ul(unorded list) en li(list item) tag aangemaakt.
Het ziet er netjes uit zeg werkt ook goed. heb hem gelijk geupload en gevalideert. en werkt prima. :thumb:
ik heb het gezien dat je een <ul</ul> tag erbij hebt gedaan met daarin de <li></li> tags.
wat doen die <ul></ul> tags nou precies???? (want wil het wel beetje leren - anders komt het ook zo over dat jullie allemaal werk hebben om codes te typen en ik alles over kopier)
en begrijp niet echt wat deze stukje code nu doet:
HTML:
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
waarom moet deze ertussen staan dan???
en voor de rest ziet het er prima uit. het is een beetje anders dan ik dacht dat het moet zijn, maar dit is veel netter en overzichtelijker.
nu de vraag weer hoe ik de kleuren kan aanpassen/toevoegen.
hiervoor zal de css in aanmerking moeten komen. (neem ik aan)
maar wat moet ik daarin dan allemaal plaatsen, in welke volghorde en welke code types enz. ???
waarom alle tekst in de kleur geel is, is voor mij een raadsel. ik zou eerder zeggen er is geen kleur opgegeven en de kleur blijft gewoon zwart. ook is er geen letter type opgegeven. (maar of dit nodig is)
Ok wat ik wil aangepast hebben = :
elke foto/plaatje moet netjes in het midden van het vakje staan (ongeacht de groote van de foto) = dat mogelijk????? zo ja hoe?
Elke titel van de drankjes (dus momenteel die text: "broken legs" en "gips verpakking" wil in een bepaalde kleur hebben (die ik zelf kan veranderen) het liefst wil ik die met een rode text kleur hebben.
de text daaronder dus de <li></li> en de algemene text in dat zelfde tabel. wil ik allemaal in het blauw.
en de achtergrond van het gehele tabel wil ik in het zwart hebben. (indien alles mogelijk is)
misschien is het veel werk of is mijn vraag te groot, maar ik wil het graag van jullie leren en samen met jullie hulp de html taal te begrijpen.
tot zover werkt alles goed, en weet ik meer dingen te vinden.
maar goed even kort samen gevat wat ik nu nog als laatste wil:
even een uitleg van wat nu de bovenstaande code nu doet.
en wat de code <ul></ul> nu doet.
en dan als laatste het volgende aanpassen in bv css ofzo.... (weet niet hoe)
1) een zwarte achtergrond in de gehele tabel
2) De plaatjes/foto's in de tabel netjes gecentreerd weer geven ipv helemaal boven aan een rand in de tabel (zoals nu is)
3) de titel van elke drankje in een rode kleur
4) de overige text in de tabel een blauwe kleur
mijn html code van: "http://members.home.nl/ebosmannetjes/drankjes.html" tot nu toe:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content=" skihut,Feesten,Partys,Muziek,Informatie,Apresski,Verhuren,Feestcafé,Diskjockey,Drive in show,Tirol,Oostenrijk,Boekingen,Sneeuw,Schuim party,Ambiance">
<meta name="description" content="Wat is een skihut? Lees op deze site daar meer over.">
<title>Wat is een skihut? Lees op deze site daar meer over.</title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="welkom">
<img alt="welkom" src="index/welkom.jpg" width="400" height="104">
</div>
<ul class="navigatie">
<li><a title="Index pagina" href="index.html">home</a></li>
<li><a title="Informatie over een skihut." href="informatie.html">Informatie</a></li>
<li><a title="Stuur een email." href="mailto:skihutinfo@ziggo.nl">contact</a></li>
<li><a title="Sorry pagina niet actief." href="artiesten.html">---</a></li>
<li><a title="vacatures in een skihut." href="vacatures.html">vacatures</a></li>
<li><a title="Skihutten in Nederland." href="skihut.html">skihut nederland</a></li>
<li><a title="Sorry pagina niet actief." href="dj.html">---</a></li>
<li><a title="Sorry pagina niet actief." href="forum.html">---</a></li>
<li><a title="Skihutten in het buitenland" href="buitenland.html">skihut buitenland</a></li>
<li><a title="Sorry pagina niet actief." href="cd.html">---</a></li>
</ul>
<ul class="navigatie rechts">
<li><a title="Sorry pagina niet actief." href="downloads.html">---</a></li>
<li><a title="Apresski evenementen." href="evenementen.html">evenementen</a></li>
<li><a title="Sorry pagina niet actief." href="ontoer.html">---</a></li>
<li><a title="Apresski drankjes" href="drankjes.html">apresski drankjes</a></li>
<li><a title="Sorry pagina niet actief." href="sponsers.html">---</a></li>
<li><a title="Sorry pagina niet actief." href="drivein.html">---</a></li>
<li><a title="Beluister hier naar de apresski radio" href="javascript:void(0)" onclick="open('http://www.radio538.nl/web/show/id=675518','miniwin','width=320,height=280')">muziek speler</a></li>
<li><a title="schrijf in mijn gastenboek" href="http://apresskihutinfo.mygb.nl">gastenboek</a></li>
<li><a title="Sorry pagina niet actief." href="links.html">---</a></li>
<li><a title="Sorry pagina niet actief." href="vragen.html">---</a></li>
</ul>
<div id= "inhoud">
<h1 id="drankjes">apresski drankjes</h1>
<table width="100%" cellpadding="5" >
<tr>
<td rowspan="2" align="left" valign="top" > <img src="images/drankjes2.jpg" width="125" height="186" alt=""></td>
<td align="center" valign="top"><h3>Broken legs</h3></td>
</tr>
<tr>
<td align="left" valign="top">Een Smoothie is een gezond alcoholvrij en koud drankje. De ingrediënten zijn meestal:
<ul>
<li>ijs</li>
<li>vers fruit</li>
<li>melkproducten (yoghurt, melk,room)
<li>suiker (of honing).</li>
</ul>
Deze ingrediënten worden in een blender gemixt tot een romige consistentie.</td>
</tr>
<tr>
<td rowspan="2" align="left" valign="top"><img src="images/031209_tom.jpg" width="125" height="96" alt=""></td>
<td align="center" valign="top"><h3>Gips verpakking</h3></td>
</tr>
<tr>
<td align="left" valign="top">Een Smoothie is een gezond alcoholvrij en koud drankje. De ingrediënten zijn meestal:
<ul>
<li>ijs</li>
<li>vers fruit</li>
<li>melkproducten (yoghurt, melk,room)
<li>suiker (of honing).</li>
</ul>
Deze ingrediënten worden in een blender gemixt tot een romige consistentie.</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<p id="fotos" style="text-align: center; clear: both;">
<img id="links" src="div/1.jpg" alt="Foto 1" width="300" height="225">
<img id="rechts" src="div/2.jpg" alt="Foto 2" width="300" height="225">
<img src="div/3.jpg" alt="Foto 3" width="300" height="225">
</p>
<h2 id="updatecenter">last update: 20-6-2010</h2>
</body>
</html>
mijn css tot nu toe:
PHP:
body {
background : url(index/achtergrond.jpg);
}
ul.navigatie {
font-family : verdana, Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
width : 12em;
border-right : 1px solid #666;
padding : 0;
margin : 0 10px 1em 0;
background-color : #9cc;
color : #333;
list-style : none;
float : left;
}
ul.rechts {
float : right;
margin : 0 0 1em 10px;
}
ul.navigatie li {
margin : 0;
border-top : 1px solid #003;
}
ul.navigatie li a {
display : block;
padding : 2px 2px 2px 4px;
border-left : 10px solid #990000;
border-right : 1px solid #69c;
border-bottom : 1px solid #369;
background-color : #000099;
color : #c0c0c0;
text-decoration : none;
width : 100%;
}
ul.rechts {
margin : 0 0 1em 10px;
}
html > body ul.navigatie li a {
width : auto;
}
ul.navigatie li a:hover {
border-left : 10px solid #006600;
border-right : 1px solid #69c;
border-bottom : 1px solid #369;
background-color : #ffff00;
color : #ff1493;
}
div#welkom {
text-align : center;
}
#inleiding {
color : #330000;
font-weight : bold;
font-size : 1.6em;
}
h1#home {
color : maroon;
font-size : 1.5em;
text-align : center;
}
p#fotos {
clear : both;
text-align : center;
}
img#links {
float : left;
}
img#rechts {
float : right;
}
div#tip {
color : blue;
clear : both;
float : left;
width : 45%;
}
h2#homeupdate {
color : #003366;
margin : 0;
float : left;
}
h2#updatecenter {
color : #003366;
margin : 0;
text-align : center;
}
div#teller {
float : right;
}
p#stealth {
margin : 0;
}
table {
text-align : center;
border : 5px outset black;
background : black;
margin : 0 auto;
}
tr#kop {
height : 30px;
font-size : 1.1em;
font-weight : bold;
color : #c0c0c0;
background : #c30;
}
tr#kop td {
width : 200px;
}
tr {
height : 40px;
background : #00c;
color : #ff0;
}
#inhoud {
margin : 0 12.5em;
}
h1#kop1 {
color : maroon;
font-size : 1.5em;
text-align : center;
}
#inf1 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
#inf2 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
#inf3 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
h1#kop2 {
color : maroon;
font-size : 1.5em;
text-align : center;
}
#inf4 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
#inf5 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
#inf6 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
h1#nederland {
color : maroon;
font-size : 1.5em;
text-align : center;
}
h1#drankjes {
color : maroon;
font-size : 1.5em;
text-align : center;
}
p.s. bedankt wederom voor je inzet hiervoor. ben al blij dat jullie mij deze taal leren en het omcijferen.
