Hallo helpmij'ers,
Voor school moeten we een site maken en daar ben ik nu dus ook mee bezig. Ik was al eens bezig geweest met een site in HTML, en dat moet nu ook voor school, maar ik wil weer eens graag moeilijk doen en met CSS werken.
Ik heb nu dus een CSS box gemaakt, maar die werkt niet helemaal lekker. Eerst had ik het probleem dat in IE7 de box iets breder was dan in FF. Na zoeken kwam ik erachter dat je daarvoor een hack moest gebruiken ofzo. Maar na toevoeging van een doctype was hij in FF wel opeens even breed als in IE7. Dus dat probleem is verholpen.
Maar nu is het zo dat wanneer ik type, en het een lang verhaal wordt, de tekst buiten de box gaat aan de onderkant. Ik neem aan dat die box normaal gesproken gewoon mee moet "groeien" maar dat gebeurd nu niet. Dat gebeurde wel in IE7 voordat ik die doctype erbij zette, maar nadat ik die doctype erbij had gezet doet hij dat in IE7 nu ook niet meer.
Nu is mijn vraag, hoe kan ik dat verhelpen?
Hier is de link naar me site: (niet gaan lachen, ben net begonnen)
Mijn site
En hier is de code van index.html:
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<title>Site over Rob Kleinee</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body background="plaatjes/achtergrond.png">
<div style="position: absolute; top: 350px; left: 30px; z-index: 1">
<img src="plaatjes/cod4alasad.png" alt="" /></div>
<div id="menulinks">
<table width="204" border="0" cellspacing="2">
<tr>
<td class="menuboven"></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"></td>
</tr>
<tr>
<td class="menuonder"></td>
</tr>
</table>
</div>
<div id="tekstvak">
<div style="position: absolute; top: 0px; left: 0px; z-index: 1">
<img src="plaatjes/tekstvakboven.png" alt="" /></div>
Welkom op deze site <br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb test test test test test test test test stest test test test test test test
b<br>
b<br>
b<br>
b<br>
b<br>
b<br>
b<br>
b<br>
b<br>
b<br>
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
</div>
</body>
</html>
En hier is de code van stylesheet.css
#tekstvak {
position:absolute;
width:668px;
height:300px;
top:200px;
left:260px;
Background-color:#ECFAFC;
padding-left:15px;
padding-top:50px;
padding-bottom:15px;
padding-right:15px;
border:1px solid #125F80;
text-decoration:none;
}
#tekstvak a {
text-decoration: none;
color:#000000;
font-size:13px;
}
#menulinks {
position:absolute;
width:220px;
height:200px;
top:135px;
left:15px;
background-repeat:no-repeat;
padding-left:15px;
padding-top:15px;
padding-bottom:15px;
border:0px solid #125F80;
text-decoration:none;
}
#menulinks a {
text-decoration: none;
color:#000000;
font-size:16px;
}
td.off {
background-image:
url('plaatjes/menumouseoff.png');
height:32px;
width:204px;
}
td.on {
background-image:
url('plaatjes/menumouseon.png');
height:32px;
width:204px;
}
td.menuboven {
background-image:
url('plaatjes/menuboven.png');
height:32px;
width:204px;
}
td.menuonder {
background-image:
url('plaatjes/menuonder.png');
height:32px;
width:204px;
}
Voor school moeten we een site maken en daar ben ik nu dus ook mee bezig. Ik was al eens bezig geweest met een site in HTML, en dat moet nu ook voor school, maar ik wil weer eens graag moeilijk doen en met CSS werken.
Ik heb nu dus een CSS box gemaakt, maar die werkt niet helemaal lekker. Eerst had ik het probleem dat in IE7 de box iets breder was dan in FF. Na zoeken kwam ik erachter dat je daarvoor een hack moest gebruiken ofzo. Maar na toevoeging van een doctype was hij in FF wel opeens even breed als in IE7. Dus dat probleem is verholpen.
Maar nu is het zo dat wanneer ik type, en het een lang verhaal wordt, de tekst buiten de box gaat aan de onderkant. Ik neem aan dat die box normaal gesproken gewoon mee moet "groeien" maar dat gebeurd nu niet. Dat gebeurde wel in IE7 voordat ik die doctype erbij zette, maar nadat ik die doctype erbij had gezet doet hij dat in IE7 nu ook niet meer.
Nu is mijn vraag, hoe kan ik dat verhelpen?
Hier is de link naar me site: (niet gaan lachen, ben net begonnen)
Mijn site
En hier is de code van index.html:
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<title>Site over Rob Kleinee</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body background="plaatjes/achtergrond.png">
<div style="position: absolute; top: 350px; left: 30px; z-index: 1">
<img src="plaatjes/cod4alasad.png" alt="" /></div>
<div id="menulinks">
<table width="204" border="0" cellspacing="2">
<tr>
<td class="menuboven"></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"></td>
</tr>
<tr>
<td class="menuonder"></td>
</tr>
</table>
</div>
<div id="tekstvak">
<div style="position: absolute; top: 0px; left: 0px; z-index: 1">
<img src="plaatjes/tekstvakboven.png" alt="" /></div>
Welkom op deze site <br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb test test test test test test test test stest test test test test test test
b<br>
b<br>
b<br>
b<br>
b<br>
b<br>
b<br>
b<br>
b<br>
b<br>
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
test test test test test test test test stest test test test test test test
</div>
</body>
</html>
En hier is de code van stylesheet.css
#tekstvak {
position:absolute;
width:668px;
height:300px;
top:200px;
left:260px;
Background-color:#ECFAFC;
padding-left:15px;
padding-top:50px;
padding-bottom:15px;
padding-right:15px;
border:1px solid #125F80;
text-decoration:none;
}
#tekstvak a {
text-decoration: none;
color:#000000;
font-size:13px;
}
#menulinks {
position:absolute;
width:220px;
height:200px;
top:135px;
left:15px;
background-repeat:no-repeat;
padding-left:15px;
padding-top:15px;
padding-bottom:15px;
border:0px solid #125F80;
text-decoration:none;
}
#menulinks a {
text-decoration: none;
color:#000000;
font-size:16px;
}
td.off {
background-image:
url('plaatjes/menumouseoff.png');
height:32px;
width:204px;
}
td.on {
background-image:
url('plaatjes/menumouseon.png');
height:32px;
width:204px;
}
td.menuboven {
background-image:
url('plaatjes/menuboven.png');
height:32px;
width:204px;
}
td.menuonder {
background-image:
url('plaatjes/menuonder.png');
height:32px;
width:204px;
}
