Sheridan: Meine Homepage: Bitte um Beurteilung

Hallo,

Ich möchte das Layout meiner Homepage, welche derzeit aus einer Frameset-Definition besteht, durch ein CSS Layout ersetzen.

Das zweite Ziel ist eine übersichtlicher Struktur zu haben, da meine aktuelle Homepage schon zu überladen ist.

Daher möchte ich meine Homepage in folgende Bereiche (Portale) teilen:
Home: Visitenkarte mit Lebenslauf etc.
Album: Photoalbum
Projekte: Vorstellung meiner Projekte (Mein Beruf ist Softwareentwickler)

Daraus ergibt sich für mich folgende Einteilung der Seite:

  • Portalmenü (Reiter)
  • Menübereich (links unter Reiter)
  • Inhaltsbereich (rechts unter Reiter)

Daraus habe ich folgendes CSS Design entworfen:
http://www.georg-hasenoehrl.at/test_index.htm

Die Portallinks funktionieren, die Menülinks nicht.
Auch gibt es noch keinen Inhalt.

Der Inhalt wird per PHP inlcude in den Inhaltsbereich eingefügt.

Der Inhalt mit dem alten Design befindet sich unter:
http://www.georg-hasenoehrl.at/

Bitte um ehrliche Beurteilung.

  1. Hallo Sheridan.

    Schau dir die Seite mal mit dem Firefox an.
    Bei mir (Firefox 0.9.1) ist der Inhaltsbereich unter das Menü gerutscht. Ich hoffe, dass das nicht gewollt ist. ;-)

    Ansonsten finde ich sie recht ansprechend. Das einzige, was farblich etwas rausfällt, sind die Links. Allerdings finde ich es immer gut wenn jemand dem User ein paar Einstellungen überlässt und nicht alles durchstylet(wird das so geschrieben?).

    Beim Menü bin ich mir nicht ganz sicher. Da es eine andere Farbe als der Inhalt hat, könnte man evtl. die Ordnung falsch verstehen, also dass die Reiter zur Auswahl von Teilseiten dienen. Allerdings kann ich im Moment nur erahnen kann, wo alles liegen soll.

    MfG _Siro.

    1. Hallo Sheridan.

      Schau dir die Seite mal mit dem Firefox an.
      Bei mir (Firefox 0.9.1) ist der Inhaltsbereich unter das Menü gerutscht. Ich hoffe, dass das nicht gewollt ist. ;-)

      Das Probleme hatte ein anderer auch schon, und ich kenne leider den Grund nicht. Für das Menü und den Inhalt verwende ich float:right bwz. float:left.

      Gibts da Unterschiede zu IE6?

      Ansonsten finde ich sie recht ansprechend. Das einzige, was farblich etwas rausfällt, sind die Links. Allerdings finde ich es immer gut wenn jemand dem User ein paar Einstellungen überlässt und nicht alles durchstylet(wird das so geschrieben?).

      Die Farben nehme ich mir erst zum Schluss vor.

      Beim Menü bin ich mir nicht ganz sicher. Da es eine andere Farbe als der Inhalt hat, könnte man evtl. die Ordnung falsch verstehen, also dass die Reiter zur Auswahl von Teilseiten dienen. Allerdings kann ich im Moment nur erahnen kann, wo alles liegen soll.

      MfG _Siro.

      Siehe Kommentar oben, aber danke für den Hinweis.

      Danke

  2. Hallo Sheridan,

    beim Übergang vom Reiter zum Menübereich stört mich der schwarze Strich. Ohne Strich ist eher ersichtlich, in welchem Bereich der Website ich mich befinde.

    Bei einer Auflösung von 1280x1024 Pixeln ist jede Menge Bildschirmplatz frei. Schöner wäre es, wenn die Seite entsprechend der Auflösung skalieren würde.

    Die Farben sind in Ordnung. Das Design wirkt vielleicht etwas kühl, lenkt dafür aber nicht von den Informationen ab.

    Im Quelltext solltest Du einen Doctype angeben.

    Hat es einen Grund, dass Du die Links in #menucontainer nicht in eine Liste steckst?

    Im Content-Bereich hast Du die Links in <li>-Tags gesteckt, diese sind aber in einem <p>-Container.

    (Angesehen mit IE6)

    Viele Grüße
    Frank

    1. Hallo Sheridan,

      beim Übergang vom Reiter zum Menübereich stört mich der schwarze Strich. Ohne Strich ist eher ersichtlich, in welchem Bereich der Website ich mich befinde.

      Der Strich ergibt sich auf Grund einer Border Eigenschaft, das habe ich bis jetzt noch nicht wegbekommen.

      Bei einer Auflösung von 1280x1024 Pixeln ist jede Menge Bildschirmplatz frei. Schöner wäre es, wenn die Seite entsprechend der Auflösung skalieren würde.

      Habe ich anfangs probiert, aber dann stimmen die Porpertionen nicht mit der Höhe der Seite (100%) zusammen und das schaut dann komisch aus.

      Die Farben sind in Ordnung. Das Design wirkt vielleicht etwas kühl, lenkt dafür aber nicht von den Informationen ab.

      Danke, daran hatte ich auch schon gedacht.
      Da das Layout aber aus verschiedenen Quellen zusammengestöpselt wurde, habe ich mich um die Farben noch nicht so gekümmert.
      Da muss noch das Programm Farbwähler (link: http://www.metacolor.de) herhalten.

      Im Quelltext solltest Du einen Doctype angeben.

      Danke

      Hat es einen Grund, dass Du die Links in #menucontainer nicht in eine Liste steckst?

      Nein, keinen besonderen. Werde ich auch noch überdenken.

      Im Content-Bereich hast Du die Links in <li>-Tags gesteckt, diese sind aber in einem <p>-Container.

      Damit der Abstand zum nächsten Absatz passt, sonst pickt der Absatz danach so an der Auflistung.

      (Angesehen mit IE6)

      Viele Grüße
      Frank

      Vielen Dank für deine Hilfe

      1. Hallo nochmal,

        Im Content-Bereich hast Du die Links in <li>-Tags gesteckt, diese sind aber in einem <p>-Container.

        Damit der Abstand zum nächsten Absatz passt, sonst pickt der Absatz danach so an der Auflistung.

        Bei der Liste fehlt das einleitende <ul> oder <ol>-Tag. Das sagt auch der Validator:
        http://validator.w3.org/check?uri=www.georg-hasenoehrl.at%2Ftest_index.htm.

        Den Abstand zum Block danach kannst Du mit margin bestimmen.

        Viele Grüße
        Frank

  3. hi georg - gefällt mir ganz gut - jedenfalls wesentlich besser, als deine alte seite :-)

    womit hast du das mainmenü gemacht? gibts da ein programm für / könntest du mir die vorlage zur verfügung stellen?

    DANKE schonmal =)

    max

    1. hi georg - gefällt mir ganz gut - jedenfalls wesentlich besser, als deine alte seite :-)

      womit hast du das mainmenü gemacht? gibts da ein programm für / könntest du mir die vorlage zur verfügung stellen?

      DANKE schonmal =)

      max

      Hi,

      Fallst du die Navigationsleiste meinst, die ist von:
      http://www.css-vorlagen.de/navigationsleiste-nr01.htm.

      Nur bei mir ist navi2 mit 100% Höhe und Breite definiert und darin das Submenü plus Inhalt versteckt.

      HTH und

      LG,
      Georg"

  4. Hi,

    also unter IE schaut sie gut aus.... aber unter Firefox ist der Text irgendwo das Menü in der mitte der Seite etc....

  5. Hallo,

    Ich möchte das Layout meiner Homepage, welche derzeit aus einer Frameset-Definition besteht, durch ein CSS Layout ersetzen.

    mach das. es lohnt sich.

    Daraus habe ich folgendes CSS Design entworfen:
    http://www.georg-hasenoehrl.at/test_index.htm

    (besser: http://www.georg-hasenoehrl.at/test_index.htm)

    ich sehe folgendes:
    (opera, mozilla, netscape)

    <img src="http://www.stud.uni-giessen.de/~su6690/selfhtml/optik3.jpg" border="0" alt="">

    An dieser Stelle sei noch erwähnt, IE6 stellt es schöner dar, aber falsch!
    Zur Auflockerung deiner Seiten könntest du noch ein paar Bilder ins Layout integrieren.

    mfg NAG

    --
    signatur
    1. ich sehe folgendes:
      (opera, mozilla, netscape)

      <img src="http://www.stud.uni-giessen.de/~su6690/selfhtml/optik3.jpg" border="0" alt="">

      An dieser Stelle sei noch erwähnt, IE6 stellt es schöner dar, aber falsch!
      Zur Auflockerung deiner Seiten könntest du noch ein paar Bilder ins Layout integrieren.

      mfg NAG

      Ich verwende für das Subemnü float:left und für den Inhalt float:right.

      Wieso geht das nicht bei Opera, etc.?

      Das Grundmuster habe ich von http://www.css4you.de/wslayout1/ex0009.html und dort funtkioniert es auch.

      Was mache ich da falsch?

      Hier das Layout.css

      /* Allgemeine HTML Elemente formatieren*/
      body
      {
       font-family:Verdana;
       font-size:12px;
       background-color:#bdbec6;
       text-align:center;
       border:1px solid color:#FFFFFF;
      }

      h1 {font-size:18px;margin:0px;}
      h2 {font-size:14px;}
      h3 {font-size:14px;}
      p {margin-top:0px;}

      /* Links (Reiter) der Menüebene 1 formatieren */
      a.nav1:link,a.nav1:visited,a.nav1:active {
      background:#7b7d8e;
      color:white;
      font:11px verdana;
      padding:4px 10px 3px 10px;
      margin:0;
      border:1px solid black;
      text-decoration:none;
      }

      a.nav1:hover {
      background:#7b7d8e;
      color:white;
      font:11px verdana;
      padding:4px 10px 3px 10px;
      margin:0;
      border:1px solid black;
      text-decoration:none;
      }

      /* Aktivierter Link (Reiter) der Menüebene 1 formatieren */
      a.nav1active:link,a.nav1active:hover,a.nav1active:visited, a.nav1active:active
      {
      background:#737994;
      color:white;
      font:11px verdana;
      padding:4px 10px 6px 10px;
      margin:0;
      border-top:1px solid black;
      border-left:1px solid black;
      border-right:1px solid black;
      text-decoration:none;
      }
      a.menu:link, a.menu:visited
      {
        color:#eeeeee;
       background-color:#737994;
       text-decoration:none;
      }
      a.menu:active, a.menu:hover
      {
        color:#737994;
       background-color:#eeeeee;
      }
      a.menu {
       display:block;
       padding:3px;
       border-top:1px solid #000;
       background-color:#737994;
       text-align:center;
       font-weight:bold;
       color:#eeeeee;
       text-decoration:none;
       text-align:left;
       }

      #navi1 {
      line-height:24px;
      width:300px;
      float:left;
      }

      #pagetitle {
      height:24px;
      float:right;
      margin-right:10px;
      }

      /* Menüebene 2 formatieren */
      #navi2 {
      background:#737994;
      margin-top:24px;
      padding:0 0 3px 0;
      border:1px solid black;
      width:100%;
      height:100%;
      }
      #left {
      background-color:#737994;
      width:160px;
      float:left;
      margin:10px;
      }
      .menutitle{
      font-weight:bold;
      text-align:center;
      margin:2px;
      }
      .menucontainer {
      border:1px solid #000;
      background-color:#7b7d8e;
      width:150px;
      margin:10px;
      }
      #content {
      border:1px solid #efeff7;
      background-color:#efeff7;
      width:500px;
      height:100%;
      float:right;
      margin:10px;
      padding:10px 0px;
      }
      .title
      {
      border-bottom:1px solid #000000;
      margin:10px;
      }
      .menutitle1
      {
      border-bottom:1px solid #000000;
      margin:10px;
      }