Kingmagister
Neues Mitglied
Hi Leute
ich versuche momentan eine eigene Homepage umzusetzen, leider ist das layout nicht so wie gedacht...
hier die codes:
ich versuche momentan eine eigene Homepage umzusetzen, leider ist das layout nicht so wie gedacht...
hier die codes:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Björn Bojara</title>
<link rel="stylesheet" type="text/css" href="layout.css"
</head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="" alt="Hier ist das Logo" name="Bild_Logo" width="25%" height="200" style="background: #8090AB; display:block;" /></a>
<!-- end .header --></div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
<!-- end .sidebar1 --></div>
<div class="content">
<h1> </h1>
<!-- end .content --></div>
<div class="sidebar2">
<h4> </h4>
<!-- end .sidebar2 --></div>
<div class="footer">
<p> </p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
HTML:
a img { /* Dieser Seleektor entfrent den Tahmen um Bilder*/
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
a:visited {
color: #4E5869;
text-decoration: underline;
}
/* Der container umschließt alle anderen div tags */
.container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background: #FFF;
margin: 0 auto; /* Durch diesen Wert wird das Layout zentriert */
}
.header {
background: #6F7D94;
height:200px;
}
.sidebar1 {
float: left;
width: 25%;
background: #93A5C4;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 55%;
float: left;
}
.sidebar2 {
float: left;
width: 20%;
background: #93A5C4;
padding: 10px 0;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666; /* Mit diesem tag werden die einzelnen Schaltflächen getrennt */
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block; /* Hiermit wird die Blockeigenschaft angegeben */
text-decoration: none;
background: #8090AB;
color: #000;
}
.footer {
padding: 10px 0;
background: #6F7D94;
position: relative;
clear: both;
}
