Beste cpers,
Ik ben aan het proberen een site in mekaar te prutsen, maar ik krijg de kolom Portfolio en Menu niet naast elkaar.
Ik heb al geprobeert met float maar hij blijft dan nog steeds op de zelfde plek staan.
Iemand die me kan helpen?
Online voorbeeld: http://www.rg.karhost.nl
Beste,
Of je vergeet een div af te sluiten. Of je geeft float left niet mee.
Zou je even de code kunnen plaatsen a.u.b;)
Met vriendelijke groet,
A. Ruter
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Naam - Slogan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
<div id="header">
<h1>Naam - Naam - Naam</h1>
<p>Slogan - Slogan - Slogan</p>
</div>
<div id="portfolio">
<table border="0px" width="300px">
<tr><td height="20px" bgcolor="C0C0C0"><span style="font-family:Tahoma; font-size: 12px;">Portfolio</span>
<tr><td style="border:1px solid #008080"><span style="font-family:Tahoma; font-size: 11px;">Layouts<hr style="color: #C0C0C0;"><br />
Image 1<br />
Image 2<br />
<hr style="color=#C0C0C0">Scripts<br />
<hr style="color=#C0C0C0">
Script 1<br />
Script 2</span>
</td>
</tr>
</table>
<div id="menu">
<table border="0px" width="200px;">
<tr><td height="20px" bgcolor="#C0C0C0"><span style="font-family:Tahoma; font-size: 12px;">Menu</span>
<tr><td style="border:1px solid #008080"><span style="font-family:Tahoma; font-size: 12px;">
-<a href="#">Home</a><br />
-<a href="#">Portfolio</a><br />
-<a href="#">Bestellen</a><br />
-<a href="#">Over ons</a><br />
-<a href="#">Contact</a>
</td>
</tr>
</table>
</div>
</div>
<div id="footer">
<p>© Naam - Naam - Naam - Alle rechten voorbehouden.</p>
</div>
</body>
</html>CSS:
#header {
background-color:#008080;
position: relative;
width: 600px;
height: 100px;
left: 250px;
border: 1px dotted;
}
#header h1 {
text-align: center;
font-family:Tahoma;
font-size: 20px;
padding-top: 10px;
color: white;
}
#header p {
font-family:Times;
font-size: 12px;
color: white;
padding-left:300px;
}
#portfolio {
position: relative;
left: 250px;
}
#menu {
position: relative;
left: 300px;
}
#footer {
position: relative;
width: 600;
height: 20px;
left: 250px;
background-color: #C0C0C0;
text-align: center;
font-family: Tahoma;
font-size: 11px;
color: black;
}
A:link {text-decoration: none; color: #000000;}
A:visited {text-decoration: none; color: #000000;}
A:active {text-decoration: none; color: #000000;}
A:hover {text-decoration: none; color: #008080;}Float heb ik effe weg gelaten want het werkte niet.
Beste,
Kijk is naar Regel: 22 & 23 daar zie je een <hr geopend worden. Maar niet afgesloten.
Met vriendelijke groet,
A. Ruter
doe het zo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Naam - Slogan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
<div id="header">
<h1>Naam - Naam - Naam</h1>
<p>Slogan - Slogan - Slogan</p>
</div>
<div style="float: left;">
<div id="portfolio">
<table border="0px" width="300px">
<tr><td height="20px" bgcolor="C0C0C0"><span style="font-family:Tahoma; font-size: 12px;">Portfolio</span>
<tr><td style="border:1px solid #008080"><span style="font-family:Tahoma; font-size: 11px;">Layouts<hr style="color: #C0C0C0;">
Image 1
Image 2
<hr style="color=#C0C0C0">Scripts
<hr style="color=#C0C0C0">
Script 1
Script 2</span>
</td>
</tr>
</table>
</div>
<div style="float: left;">
<div id="menu">
<table border="0px" width="200px;">
<tr><td height="20px" bgcolor="#C0C0C0"><span style="font-family:Tahoma; font-size: 12px;">Menu</span>
<tr><td style="border:1px solid #008080"><span style="font-family:Tahoma; font-size: 12px;">
-<a href="#">Home</a>
-<a href="#">Portfolio</a>
-<a href="#">Bestellen</a>
-<a href="#">Over ons</a>
-<a href="#">Contact</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="footer">
<p>© Naam - Naam - Naam - Alle rechten voorbehouden.</p>
</div>
</body>
</html>de <hr /> tags is toch een tag zonder afsluiting?
Nieuwe reactie samengevoegd met originele reactie op 22.07.09 13:02:26:
@TimD
Deze werkt niet, de footer gaat onder de header staan en menu gaat ook weer ergens anders staan.
Iemand die de oplossing weet?
Op regel 18 sluit je een tr en td niet af
Beste,
Probeer dit is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Naam - Slogan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
<div id="header">
<h1>Naam - Naam - Naam</h1>
<p>Slogan - Slogan - Slogan</p>
</div>
<div id="portfolio">
<table border="0px" width="300px">
<tr><td height="20px" bgcolor="C0C0C0"><span style="font-family:Tahoma; font-size: 12px;">Portfolio</span>
<tr><td style="border:1px solid #008080"><span style="font-family:Tahoma; font-size: 11px;">Layouts<hr style="color: #C0C0C0;">
Image 1
Image 2
<hr style="color=#C0C0C0">Scripts
<hr style="color=#C0C0C0">
Script 1
Script 2</span>
</td></td>
</tr></tr>
</table>
<div id="menu">
<table border="0px" width="200px;">
<tr><td height="20px" bgcolor="#C0C0C0"><span style="font-family:Tahoma; font-size: 12px;">Menu</span>
<tr><td style="border:1px solid #008080"><span style="font-family:Tahoma; font-size: 12px;">
-<a href="#">Home</a>
-<a href="#">Portfolio</a>
-<a href="#">Bestellen</a>
-<a href="#">Over ons</a>
-<a href="#">Contact</a>
</td></td>
</tr></tr>
</table>
</div>
</div>
<div id="footer">
<p>© Naam - Naam - Naam - Alle rechten voorbehouden.</p>
</div>
</body>
</html>Met vriendelijke groet,
A. Ruter
heb je men code al getest ?
@TimD die heb ik getest, die werkte niet. Ik heb geleerd dat <hr /> Tags niet af gesloten hoeven worden net zoals <br />
alexruter
Die werkt ook niet.
Moet ik wat in de css aan passen?
Heb je überhaupt mijn reactie wel gelezen?
Want dat is de enige reactie waar je niets mee doet...
Op regel 18 sluit je een tr en td niet af
Niet getest maarja, zou moeten werken;)
Html&Css
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Naam - Slogan</title>
<style>
body{margin: 0; padding: 0; font-family: Times; font-size: 12px; color: white; text-align: center;}
#wrapper{width: 600px; margin: auto; text-align: left;}
#header{background:#008080; width: 600px; height: 100px; border: 1px dotted; float: left;}
#header h1{font-family: Tahoma; font-size: 20px; padding: 10px 0 0 195px;}
#header p{padding-left: 300px;}
#portfolio{width: auto; float: left;}
#menu{width: auto; float: right;}
#footer{float: left; width: 600px; height: 20px; background: #C0C0C0; text-align: center; font-family: Tahoma; font-size: 11px; color: black;}
#footer p{margin: 0; padding: 0;}
a{text-decoration: none; color: #000000;}
a:hover{text-decoration: none; color: #008080;}
</style>
</head>
<body>
<div id='wrapper'>
<div id="header">
<h1>Naam - Naam - Naam</h1>
<p>Slogan - Slogan - Slogan</p>
</div>
<div id="portfolio">
<table border="0px" width="300px">
<tr><td height="20px" bgcolor="C0C0C0"><span style="font-family:Tahoma; font-size: 12px;">Portfolio</span></td></tr>
<tr><td style="border:1px solid #008080">
<span style="font-family:Tahoma; font-size: 11px;">Layouts<hr style="color: #C0C0C0;" />Image 1 Image 2
<hr style="color=#C0C0C0" />Scripts
<hr style="color=#C0C0C0" />Script 1 Script 2</span></td></tr>
</table>
</div>
<div id="menu">
<table border="0px" width="200px;">
<tr><td height="20px" bgcolor="#C0C0C0"><span style="font-family:Tahoma; font-size: 12px;">Menu</span></td></tr>
<tr><td style="border:1px solid #008080"><span style="font-family:Tahoma; font-size: 12px;">
-<a href="#">Home</a>
-<a href="#">Portfolio</a>
-<a href="#">Bestellen</a>
-<a href="#">Over ons</a>
-<a href="#">Contact</a></td></tr>
</table>
</div>
<div id="footer">
<p>© Naam - Naam - Naam - Alle rechten voorbehouden.</p>
</div>
</div>
</body>
</html>De groottes kloppen gewoon niet:)
Heb je nog geen account? Registreer je nu en word deel van onze community!