nicht angemeldet
Hallo,
mein Name ist Daniel und komme aus dem Saarland. (ursprünglich aus Bayern) Ich bin 29 Jahre alt und versuche mich gerade daran, für meine Dart-Mannschaft eine Homepage zu basteln.
Hier mal ein Link der Homepage die aktuell online ist:
http://www.dc-bad-dragon.de.vu/
Nun... was mich nun brennend interessieren würde ist, wie wird die Seite bei euch angezeigt?
Seht ihr diese Komplett oder müsst Ihr Scrollen? Das Thema habe ich zwar zuhauf bei Euch gefunden aber entweder bin ich zu blöde es zu verstehen oder ich kanns einfach nicht. Ich habe auch auf dem selben Server eine zweite Homepage drauf. Der Link hierfür:
http://www.dc-bad-dragon.de.vu/indexlayouttest.html
Jetzt ist die Frage: Welches Layout ist besser und dürfte die meisten Besucher zufrieden stimmen?
Den Quelltext beider Seiten kann man ja einsehen. Ich weiß dass ich bestimmt einiges umständlich geschrieben habe aber mir ging es in erster linie darum erstmal das Layout anzupassen. Hier auch gleich mal die beiden Stylesheet Dateien zum Fehler identifizieren:
Stylesheet für eigentliche HP:
/*Schriftformatierungen*/
p/*textschrift*/
{
font-family:VERDANA,ARIAL,HELVETICA;color:#ffffff;font-size:18px;
}
p.link/*email link in Kontakt*/
{
font-family:VERDANA,ARIAL,HELVETICA;color:#ffffff;font-size:12px;
}
p.b/*textschrift bei Geschichte*/
{
font-family:VERDANA,ARIAL,HELVETICA;color:#ffffff;font-size:20px;line-height:28px;
margin-left:20%;margin-right:20%;text-align:center;
}
h1/*seitenüberschrift*/
{
font-family:arial,verdana,helvetica;color:#ffffff;font-size:40px;margin-left:20%;
margin-right:20%;text-align:center;
}
h2/*textüberschrift*/
{
font-family:arial,verdana,helvetica;color:#ffffff;font-size:25px;margin-left:15%;
margin-right:15%;text-align:center;line-height:30px;
}
h3/*kontaktüberschrift*/
{
font-family:arial,verdana,helvetica;color:#ffffff;font-size:50px;margin-left:20%;
margin-right:20%;text-align:center;
}
/*Hintergrundbild Dartscheibe*/
#bg {width:405px;height:179px;
position:absolute;right:0px;top:0px;border:0px ridge #C11731;
}
#bga
{width:150px;height:358px;
position:absolute;right:0px;top:179px;border:0px ridge #C11731;
}
/*Header*/
div.headline
{background-image: url(../Grafik/headline.bmp);
margin-left:25%;margin-right:25%;margin-bottom:23px;width:auto;height:155px;
padding:1px;
}
/*Bad Dragon Logo*/
div.logo
{background-image:url(../Grafik/logo.jpg);color:#030303;width:127px;height:153px;
position:absolute;left:80px;top:40px;
}
/*Hauptfenster*/
div.hauptfenster
{border:5px ridge #C11731;
margin-left:300px; margin-right:152px; width:auto; height:auto;
padding:4px;
line-height:18px;
}
/*Kontakt*/
div.kontakt
{
border:0px ridge #C11731;
background-color:#030303;
float:left;
position:absolute;left:5px;top:590px;width:285px;height:300px;
padding:1px;
line-height:10px;
font-family:arial,verdana,helvetica; font-size:14pt; color:#ffffff; text-align:center;
}
/*Werbelinks rechts unten*/
div.werbelinks
{
border:0px ridge #C11731;
background-color:#030303;
float:right;
position:absolute;right:0px;top:560px;width:144px;height:auto;
padding:1px; line-height:10px;
font-family:arial,verdana,helvetica:size:10pt:color:#ffffff; text-align:center;
}
/*Verlinkungen*/
div.menucontainer
{
border:0px ridge #C11731;
background-color:#030303;
float:left;
position:absolute;left:22px;top:225px;width:256px;height:345px;
padding:2px;
line-height:10px;
}
a.link1 {display:block;width:251px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button1.JPG);}
a.link1:hover {background-image:url(../Grafik/Buttons/hover1.gif);}
a.link2 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button2.JPG);}
a.link2:hover {background-image:url(../Grafik/Buttons/hover2.gif);}
a.link3 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button3.JPG);}
a.link3:hover {background-image:url(../Grafik/Buttons/hover3.gif);}
a.link4 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button4.JPG);}
a.link4:hover {background-image:url(../Grafik/Buttons/hover4.gif);}
a.link5 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button5.JPG);}
a.link5:hover {background-image:url(../Grafik/Buttons/hover5.gif);}
a.link6 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button6.JPG);}
a.link6:hover {background-image:url(../Grafik/Buttons/hover6.gif);}
a.link7 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button7.JPG);}
a.link7:hover {background-image:url(../Grafik/Buttons/hover7.gif);}
Stylesheet für die inoffizielle HP:
div.bildschirm {border:1px ridge #C11731;
width:1280px;height:auto;
margin:0 auto;
}
div.boxlinks {border:0px ridge #80FFFF;
float:left;
width:265px;height:800px;
margin-top:1px;margin-left:1px;margin-right:1px;
}
div.boxmitte {border:0px ridge #80FFFF;
float:left;
width:590px;height:800px;
margin-top:1px;margin-left:1px;
}
div.boxrechts {border:0px ridge #80FFFF;
float:right;
width:410px;height:800px;
margin-top:1px;margin-left:1px;margin-right:1px;
}
#fenster {border:3px ridge #C11731;
width:auto; height:auto;
margin-top:29px;
margin-left:-6px;margin-right:1px;
padding-left:30px;padding-right:30px;padding-top:30px;padding-bottom:30px;
}
#header {border:0px ridge #00FF40;
width:auto; height:155px;
margin-top:0px;overflow:hidden;
}
#logo {border:0px ridge #0000FF;
width:100px; height:120px;
margin-top:25px;margin-left:75px;
}
#links {border:0px ridge #C11731;
width:256px; height:345px;
margin-top:35px;
line-height:10px;
}
a.link1 {display:block;width:251px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button1.JPG);}
a.link1:hover {background-image:url(../Grafik/Buttons/hover1.gif);}
a.link2 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button2.JPG);}
a.link2:hover {background-image:url(../Grafik/Buttons/hover2.gif);}
a.link3 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button3.JPG);}
a.link3:hover {background-image:url(../Grafik/Buttons/hover3.gif);}
a.link4 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button4.JPG);}
a.link4:hover {background-image:url(../Grafik/Buttons/hover4.gif);}
a.link5 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button5.JPG);}
a.link5:hover {background-image:url(../Grafik/Buttons/hover5.gif);}
a.link6 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button6.JPG);}
a.link6:hover {background-image:url(../Grafik/Buttons/hover6.gif);}
a.link7 {display:block;width:250px;height:38px;border:0px solid #000000;background-image:url(../Grafik/Buttons/button7.JPG);}
a.link7:hover {background-image:url(../Grafik/Buttons/hover7.gif);}
#kontakt {border:0px ridge #C11731;
width:256px; height:254px;
}
#grafik1 {border:0px ridge #C11731;
width:405px; height:179px;
margin-top:0px;margin-right:0px;
}
#grafik2 {border:0px ridge #C11731;
width:150px; height:358px;
margin-top:0px;margin-right:0px;
}
#werbung {border:0px ridge #C11731;
width:150px; height:242px;
}
Ich hoffe Ihr könnt damit was anfangen und mir gegebenenfalls ein paar Tipps geben wie ich das mit dem Layout noch besser hinbekommen kann.
Vielen Dank dafür schonmal.
Grüße
Danny