veritas696
Neues Mitglied
So werd mich mal wieder der harschen Kritik unter anderem unseres geliebten Efchens stellen 
und meine aktuelle Stand posten. Dieses repräsentiert mein momentanes Grundgerüst der Startseite. Bitte sagt mir was momentan überflüßig ist (z.B. divs etc) was ich komplett falsch mache und was man anders machen muss. Ich habe einige divs mit Rahmen versehen um die gruppierte Elemente zu verdeultichen, falls jemand das ganz mal anschauen will. Wie gesagt arbeite ich zur Zeit lokal und kann bisher leider keine Webspace oder Domain "mein eigen" nennen... so daß man sich das mal alive im Netz zu Gemüte führen könnte. Ich weiß ich muss noch html und css lernen, aber das mach ich ja mit dieser Website, einigen Tutorials und eurer Hilfe. Dafür schonmal vielen Dank.
html:
das zugehörige css:
mein Anti-Aggressions-Ball liegt bereit... :mrgreen: was ich selber glaube schon gemerkt hab, daß ich die divs noch zu sehr für das Aussehen der Seite verwende, dies sollte ich eher in die einzelnen Elemente verlagern :roll:
und meine aktuelle Stand posten. Dieses repräsentiert mein momentanes Grundgerüst der Startseite. Bitte sagt mir was momentan überflüßig ist (z.B. divs etc) was ich komplett falsch mache und was man anders machen muss. Ich habe einige divs mit Rahmen versehen um die gruppierte Elemente zu verdeultichen, falls jemand das ganz mal anschauen will. Wie gesagt arbeite ich zur Zeit lokal und kann bisher leider keine Webspace oder Domain "mein eigen" nennen... so daß man sich das mal alive im Netz zu Gemüte führen könnte. Ich weiß ich muss noch html und css lernen, aber das mach ich ja mit dieser Website, einigen Tutorials und eurer Hilfe. Dafür schonmal vielen Dank. html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Testpage</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="Sg Leimbach" content="website der sg leimbach bla bla">
<link rel="stylesheet" type="text/css" href="test_styles.css" />
</head>
<body>
<div id="main">
<div id="header">
<ul class="headerliste">
<li><a class="headerlink" href="#">Startseite</a></li>
<li><a class="headerlink" href="#">Kontakt</a></li>
<li><a class="headerlink" href="#">Impressum</a></li>
<li><a class="headerlink" href="#">Anfahrt</a></li>
</ul>
</div>
<div id="middle">
<div id="navi">
<ul class="menustyle">
<li><a class="hauptlink" href="#">Startseite</a></li>
<li><a class="hauptlink" href="#">Der Verein</a></li>
<li><a class="hauptlink" href="#">Geschichte</a></li>
<li><a class="hauptlink" href="#">Sportpark</a></li>
<li><a class="hauptlink" href="#">akt. Saison</a></li>
<li><a class="hauptlink" href="#">Teams</a></li>
<li><a class="hauptlink" href="#">Erfolge</a></li>
<li><a class="hauptlink" href="#">Archiv</a></li>
<li><a class="hauptlink" href="#">Gästebuch</a></li>
<li><a class="hauptlink" href="#">Partner</a></li>
<li><a class="hauptlink" href="#">Links</a></li>
<li><a class="hauptlink" href="#">Fan Stuff</a></li>
</ul>
</div>
<div id="content">
<div id="contentmenu" > <!-- Einzelüberschrift für jede Seite -->
<h1> Herzlich Willkommen auf der Website der SG Leimbach</h1>
<!-- Hier fehlt noch das jeweilige Untermenu als Liste -->
</div>
<div id="contentshow">
<img id="startlogo" src="img/Wappen_Leimbach.png"/>
<h1 class="h1_startseite"> News, Ankündigungen und Updates </h1>
<p class="news">
<b>23.02.2010:</b><br clear="all"/>
Die SGL zieht überraschend in die Gruppenphase der Champions League ein. Nach einem furiosen Finale im letzten Qualifikationsspiel warten nun Größen
wie der AC Mailand und Manchester United auf den geliebten Kreisligisten.
</p>
<p class="news">
<b>20.02.2010:</b><br clear="all"/>
Step by step tutorials on using CSS to create floating images, images with captions,next and back buttons, drop caps, inline lists and more.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Code:
* {
margin:0px;
padding:0px;
}
body {
background-color: #2b65FF;
font-family: garamond, georgia, serif;
color: #FFFFFF;
}
/** STANDARD LINKS ***/
a:link {
color: #FFFFFF;
font-family:garamond, georgia, serif;
}
p.ueberschrift{
color: #FFFFFF;
font-weight: bold;
font-size: 160%;
}
h1 {
color: #FFFFFF;
font-weight: bold;
font-size: 140%;
}
/**** BEREICHSDEFINITION ****/
#main {
border: 1px solid #FF0000;
padding: 1px 1px 1px 1px;
margin: 0px 0px 0px 0px;
width: auto;
height: 700px;
}
#header{
border: 1px solid #FF0000;
padding: 2px 2px 2px 2px;
margin: 0px 0px 0px 0px;
width: 800px;
height: 100px;
background-image: url(img/header_bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-position-x: center;
TEXT-ALIGN: center;
}
/*CONTENT + NAVILEISTE*/
#middle {
border: 1px solid #FF0000;
padding: 0px 0px 0px 0px;
margin: 1px 1px 1px 1px;
width: 800px;
height: 600px;
float: left;
}
#navi{
border: 1px solid #000000;
padding: 10px 2px 2px 2px
margin: 0px 0px 0px 0px;
width: 110px;
height: 500px;
float: left;
background-image: url(img/navi_bg.jpg);
background-repeat: no-repeat;
background-position-x: center;
TEXT-ALIGN: center;
}
/* UNDERNAVI + CONTENT*/
#content{
border: 1px solid #00FF00;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 675px;
height: inherit;
float: right;
}
#contentmenu{
border: 1px solid #FFFF00;
padding: 2px 2px 2px 2px;
margin: 2px 0px 0px 0px;
width: inherit - 5px;
height: 60px;
background-image: url(img/undernavi_bg.jpg);
background-repeat: no-repeat;
background-position-x: center;
TEXT-ALIGN: center;
}
#contentshow{
border: 1px solid #00FF00;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 675px;
height: inherit;
TEXT-ALIGN: center;
}
/*** HEADER ***/
ul.headerliste {
list-style-type:none;
width: 250px;
margin-top: 75px;
margin-left: auto;
margin-right: auto;
}
ul.headerliste li {
/*border: 1px solid #ff9900;
width: 60px;
height: 20px;
margin: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
float: left;
}
a.headerlink:link {
color:#FFFFFF; font-size:80%; text-align:center; text-transform:none;
}
a.headerlink:visited {
color:#FFFFFF; font-size:80%; text-align:center; text-transform:none;
}
a.headerlink:hover {
color:#aaaaFF; font-size:80%; text-align:center; text-transform:none;
}
a.headerlink:active {
color:#FFFFFF; font-size:80%; text-align:center; text-transform:none;
}
/*** NAVI ***/
ul.menustyle{
border: 1px solid #ff9900;
list-style: none;
list-style-type:none;
padding: 0px 0px 0px 2px;
}
a.hauptlink:link {
display:block;
background-color:#8284E7;
color:#FFFFFF;
font-weight: bold;
text-decoration:none;
border: 1px solid #000000;
margin-top:1px;
padding:1px;
width:90px;
}
a.hauptlink:visited {
display:block;
background-color:#8284E7;
color:#FFFFFF;
font-weight: bolder;
text-decoration:none;
border: 1px solid #000000;
margin-top:1px;
padding:1px;
width:90px;
vertical-align:middle;
}
a.hauptlink:hover {
display:block;
background-color:#6666FF;
color:#FFFFFF;
font-weight: bold;
text-decoration:none;
border: 1px solid #000000;
margin-top:1px;
padding:1px;
width:90px;
vertical-align:middle;
}
a.hauptlink:active {
display:block;
background-color:#3333FF;
color:#FFFFFF;
font-weight: bold;
text-decoration:none;
border: 1px solid #000000;
margin-top:1px;
padding:1px;
width:90px;
vertical-align:middle;
}
/*** STARTSEITE ***/
p.news{
border: 4px double #EEEEEE;
width: inherit;
height: auto;
font-weight: bold;
padding: 10px 2px 10px 2px;
text-align: left;
margin-bottom: 10px;
}
h1.h1_startseite{
color: #FFFFFF;
font-weight: bold;
font-size: 140%;
margin-bottom: 20px;
}
/*** IMAGES ***/
#startlogo{
margin-top: 10px;
}
