danny79: Ich stelle mich vor und bräuchte bitte Eure Meinung/Hilfe

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

  1. hi;

    http://www.dc-bad-dragon.de.vu/

    Nun... was mich nun brennend interessieren würde ist, wie wird die Seite bei euch angezeigt?

    normal.

    Seht ihr diese Komplett oder müsst Ihr Scrollen?

    Das bischen Text passt alles in mein DOS-Fenster.

    Jetzt ist die Frage: Welches Layout ist besser und dürfte die meisten Besucher zufrieden stimmen?

    Ein Layout ohne Tabelle wäre evntl. besser.

    Stylesheet für eigentliche HP:

    ???

    Hotte

    1. Hi Hotte,

      Das beruhigt mich ja schonmal dass es normal angezeigt wird.

      Mit den verschiedenen Stylesheets meinte ich das das eine für die de.vu ist und das andere für die de.vu/indexlayouttest

      An ohne Tabellen dachte ich auch schon, hab aber keinen blassen schimemr wie ich das anstellen soll. Ich bin ja schon froh dass ich die Seite so hinbekommen hab, wie sie im Moment online ist. Html/css ist völliges Neuland für mich.

      1. hi $name,

        An ohne Tabellen dachte ich auch schon, hab aber keinen blassen schimemr wie ich das anstellen soll. Ich bin ja schon froh dass ich die Seite so hinbekommen hab, wie sie im Moment online ist. Html/css ist völliges Neuland für mich.

        so sieht die seite bei mir aus, blöd ist das die dartpfeile in der navi beim hovern einfach verschwinden. Äh und ist der Frame unbedingt nötig? Eine eigene Domain gibt es schon ab 0,40€/Jahr.....

        gruss
        shadow

        --
        Man muß viel gelernt haben, um über das, was man nicht weiß, fragen zu können.
        Jean-Jacques Rousseau
  2. http://www.dc-bad-dragon.de.vu/
    Seht ihr diese Komplett oder müsst Ihr Scrollen?

    Ich muss scrollen und sehe vom Titel nur das DC

    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

    Hier sehe ich den Titel ganz, habe aber einen horizontalen Scrollbalken.

    Jetzt ist die Frage: Welches Layout ist besser und dürfte die meisten Besucher zufrieden stimmen?

    Keines.
    Deine Navigation nimmt mit den Dartpfeilen zu viel Platz ein. Ich würde die Spielerei etwas sparsamer unterbringen.

    Die Dartscheibe ist Deko. Ich würde sie als Background des Body verwenden, mit geeigneten Gradienten zum ausblenden gegen den Rand.

    Du kannst dir solche Fragen sparen, wenn du mit dem FF einfach Zoom anwendest. Gehe davon, dass es alle möglichen Viewport Grössen gibt.

    Für eine Navigationsliste darf man übrigens auch eine Liste verwenden.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
  3. Wenn ich ehrlich bin sieht die Seite nicht so toll aus.

    Das Design entspricht dem Stand aus dem 90ern.
    Kein Doctype, daher ersparre ich mir W3C Validation.
    Billige GIF-Animationen.
    Tabellen-Layout.
    Statisch.

    Alles in einem wird die Seite korrekt angezeigt und jeder User kommt da klar, aber optisch und technisch nicht aktuell.

    Sorry, ist MEINE Meinung/Kritik, nimms mir bitte nicht übel.

    1. Sorry, ist MEINE Meinung/Kritik, nimms mir bitte nicht übel.

      Kein Problem. Dafür sind Foren ja da.
      Kein Doctype? Wie kommst Du darauf? Sowohl bei der einen als auch bei der anderen ist Doctype vorhanden. Validation ist grün gewesen.

  4. http://www.dc-bad-dragon.de.vu/

    Nun... was mich nun brennend interessieren würde ist, wie wird die Seite bei euch angezeigt?

    http://www.wiwi.uni-frankfurt.de/~rainerh/www.dc-bad-dragon.de.vu.jpg

    1. Klasse... Genau so sollte sie net aussehen...

      1. Hallo,

        Klasse... Genau so sollte sie net aussehen...

        so sieht sie bei mir auch aus. Ich vermute, so sieht sie immer aus, wenn man bei Standardschriftgröße den Browser auf weniger als 1024 Pixel Breite verkleinert bzw. der Viewport eh schmaler ist.

        Freundliche Grüße

        Vinzenz

      2. Klasse... Genau so sollte sie net aussehen...

        Nachtrag: FF 3.0.14 ohne JS mit ebay-Sidebar.

  5. Mahlzeit danny79,

    Nun... was mich nun brennend interessieren würde ist, wie wird die Seite bei euch angezeigt?

    Fehlerhaft: 27 Errors, 2 warning(s)

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|