hallo ich habe ein design wen ich es einfüge steht oben Punkt 1 ... wen ich dan ds "startseite" und den url einfüge kommt es unten dan stet unten die start seite guckt doch einfach auf meiner hp und hier der cod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Beispiel-Design</title> <style type="text/css">
<!-- /*Und los gehts.. Wir fangen an die Container anzulegen und somit den "Grundriss" zu machen. Ich habe, wie auch später nochmal angemerkt, 2 oder 3 Mal das Attribut hight and Stellen benutzt wo es eigentlich nicht nötig bzw. nicht sinnvoll ist. Allerdings kann ich so das leere Design etwas anschaulicher gestalten und ihr seht besser wie es später aussehen könnte. */ -->
body {
background-color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin: 0px;
}
#div_container {
text-align: left;
margin: auto;
width: 800px;
margin-top:20px;
border: solid 1px #000000;
}
#welcome_container {
height: 20px;
background: #339900;
background:url(http://www.viruz-design.de/images/vdesign/catpic.gif) repeat-x;
text-align: left;
font-size:11px;
line-height:20px;
padding-left:10px;
}
#menu_container {
height: 25px;
background: #339900;
background:url(http://www.viruz-design.de/images/vdesign/catpic.gif) repeat-x;
text-align: center;
}
#top_container {
height: 140px;
padding: 0px;
/*background:(url) (img/header.png);*/
background-color: #7b7d8e; /*die Höhe ist hier natürlich egal, da ihr am Ende ehh die Höhe eures Headers nehmt*/
padding-left:10px; /*total unwichtig, ist nur damit es in der Vorschau besser aussieht =)*/
}
#content_container {
width: 800px;
height: auto;
/*background:url (img/background.jpg; */
background:#FFFFFF;
}
#bottom_container {
width: 800px;
padding: 0px;
background-color: #CCCCCC;
height: 180px;
/* Wie eingangs angesprochen habe ich hier extra eine Höhe eingesetzt. Normalerweise könntet ihr hier auch hight:auto; einstellen*/
}
#footer_container {
clear: both;
width: 800px;
height: 25px;
line-height:25px;
background-color:#999999;
}
/*Die Container sind nun alle festgelegt, machen wir also mit den anderen DIVs weiter*/
#logo { /*das Logo braucht ihr natürlich nicht, wenn ihr es schon in den header eingebaut habt.*/
right: 40%;
width: 20%;
height: 140px;
position:absolute;
z-index: 0;
text-align:center; /*die Zeile kann natürlich wieder raus später, ist nur da, damit es jetzt nicht unsauber aussieht*/
}
.menu a{
float: left;
width: 100px;
height: 25px;
line-height:25px;
}
.menu a:hover {
background:#0d0d0d; /*Da wir nur den background festlegen wird die Schriftfarbe der Links sich automatisch so verhalten wie etwas weiter unten angepasst. In unserem Fall wird sie also Dunkelgrün.*/
}
#content {
height: 220px; /* Wie eingangs angesprochen habe ich hier extra eine Höhe eingesetzt. Normalerweise könntet ihr hier auch hight:auto; einstellen*/
padding-left:10px;
border-bottom:dotted #000000 1px;
}
#profil {
float: left;
width: 288px;
vertical-align: top;
padding-left:10px;
}
#links {
width: 300px;
float: left;
vertical-align: top;
}
#partner {
width: 202px;
float: right;
vertical-align: top;
}
.footer_left {
width: auto;
float:left;
text-align:left;
padding-left:10px;
}
.footer_right a {
width:auto;
float:right;
padding-right:10px;
}
/*Jetzt müssen wir noch die Links formatieren. Insofern die Links nicht innerhalb der entsprechenden DIVs anders definiert sind, gilt die folgende Formatierung für die ganze Seite */
a {
color:#FFFFFF;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
a:hover {
color:#006600;
}
/*Mit den Vorbereitungen sind wir nun fertig, machen wir uns also daran alles zusammenzufügen */ --!>
</style>
</head>
<body>
<div id="div_container">
<div id="welcome_container">Herzlich Willkommen auf
www.dark-blacksun.de.tl</div>
<div id="top_container">
<div id="logo </div> Header </div>
<div id="menu_container">
<div class="menu"><a href="#"> Punkt1 </a></div>
<div class="menu"><a href="#"> Punkt2 </a></div>
<div class="menu"><a href="#"> Punkt3 </a></div>
<div class="menu"><a href="#"> Punkt4 </a></div>
<div class="menu"><a href="#"> Punkt5 </a></div>
<div class="menu"><a href="#"> Punkt6 </a></div>
<div class="menu"><a href="#"> Punkt7 </a></div>
<div class="menu"><a href="#"> Punkt8 </a></div>
</div>
<div id="content_container">
<div id="content"> Hallo herzlich willkommen</div>
<div id="bottom_container">
<div id="profil">Profil:<br /><br />Hier könnte euer Profil drinstehen</div>
<div id="links">Links:<br /><br />Hier könntet ihr Links o.ä. reinschreiben.. </div>
<div id="partner"> Partner:<br /><br /> Hier könnten die Banner<br />eurer Partner rein oder<br />natürlich andere Werbung </div>
</div>
<div id="footer_container">
<span class="footer_left">Hier könnt ihr zB euren Copyright-Hinweis hinschreiben </span>
<span class="footer_right"><a href="#">Impressum</a><a href="#">Kontakt</a></span>
</div> </div> </div>
</body>
</html>
