Moppel: Feedback von den Profis

Hallo,
ich erstelle gerade eine Homepage für das Gewerbe meine Mutter.
Bevor ich nun die einzelnen Seiten mit Inhalt fülle, würde ich gerne Feeback zu der Seite erhalten. Wie ist der Aufbau, das Design und vor allem: Wird die Seite auch bei euch richtig dargestellt? Habe versucht, die Seite Browserunabhängig zu gestalten.
Vielen Dank für jeden Kommentar.
der Link: Zur Seite
Hier der Code, falls von Interesse:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Startseite</title>  
<meta name="description" content="Beschreibung der seite">  
<meta name="keywords" content="Hier Schluesselwoerter">  
<meta name="author" content="Moppel">  
<meta name="editor" content="html-editor phase 5">  
<link rel="stylesheet" href="CSS/formate.css" type="text/css">  
</head>  
<body>  
<div id="Header">  
<div id="Logo1"></div>  
<div id="Logo2"></div>  
<div id="Logo3"></div>  
<div id="Logo4"></div>  
</div>  
<div id="Textzeile">  
<div id="Text1"><span class="Homepagelink">www.paarberatung-duisburg.de</span></div>  
<div id="Text2"><a href="paarberatung.html" class="textzeile">Paarberatung</a></div>  
<div id="Text3"><a href="psycholberatung.html" class="textzeile">Psychologische -/Sexualberatung</a></div>  
<div id="Text4"><a href="familienberatung.html" class="textzeile">Familien-/Erziehungsberatung</a></div>  
</div>  
<div id="Main">  
<div id="Navigation">  
<div id="Nav1"><span class="Navigationstextaktiv">Startseite</span></div>  
<div id="Nav2"><a href="uebermich.html" class="nav">Über mich</a></div>  
<div id="Nav3"><a href="paarberatung.html" class="nav">Paarberatung</a></div>  
<div id="Nav4"><a href="psycholberatung.html" class="nav">Psychologische -/Sexualberatung</a></div>  
<div id="Nav5"><a href="familienberatung.html" class="nav">Familien-/Erziehungsberatung</a></div>  
<div id="Nav6"><a href="diepraxis.html" class="nav">Die Praxisräume</a></div>  
<div id="Nav7"><a href="kostenudauer.html" class="nav">Kosten und Dauer</a></div>  
<div id="Nav8"><a href="kontakt.html" class="nav">Kontakt</a></div>  
<div id="Nav9"><a href="impressum.html" class="nav">Impressum</a></div>  
</div>  
<div id="Hauptfenster"><span class="Textzeilentext"></span></div>  
</div>  
<div id="Fussnote"><span class="Fussnotentext">© 2010 Margret Kümmerling, D-Duisburg</span></div>  
</body>  
</html>

und die CSS-Datei:

html { background-color:#960f0f; }  
a.nav:link { font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 13pt;  
font-weight: normal;text-decoration: none;color: white; display:block; text-align: left; }  
a.nav:visited { font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 13pt;  
font-weight: normal;text-decoration: none;color: white; display:block; text-align: left; }  
a.nav:hover { font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 12pt;  
font-weight: bold;text-decoration: none;color: #960f0f; display:block; text-align: left; }  
a.nav:active { font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 12pt;  
font-weight: bold;text-decoration: none;color: #960f0f; display:block; text-align: left; }  
a.nav:focus { font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 12pt;  
font-weight: bold;text-decoration: none;color: #960f0f; display:block; text-align: left; }  
a.textzeile:link { font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 13pt;  
font-weight: normal;text-decoration: none;color: white; display:block; text-align: center; }  
a.textzeile:visited { font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 13pt;  
font-weight: normal;text-decoration: none;color: white; display:block; text-align: center; }  
a.textzeile:hover { font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 12pt;  
font-weight: bold;text-decoration: none;color: white; display:block; text-align: center; }  
a.textzeile:active { font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 12pt;  
font-weight: bold;text-decoration: none;color: white; display:block; text-align: center; }  
a.textzeile:focus { font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 12pt;  
font-weight: bold;text-decoration: none;color: white; display:block; text-align: center; }  
.Homepagelink  
{  
font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 13pt;  
font-weight: normal;text-decoration: none;color: white; display:block; text-align: center;  
}  
.Textzeilenlinkaktiv  
{  
font-family:'Arial',Times,serif;font-style: italic;font-variant: normal;font-size: 13pt;  
font-weight: normal;text-decoration: none;color: white; display:block; text-align: center;  
}  
.Navigationstextaktiv  
{  
font-family:'Arial',Times,serif;font-style: italic;font-variant: normal;font-size: 13pt;  
font-weight: normal;text-decoration: none;color: white; display:block; text-align: left;  
}  
.Fussnotentext  
{  
font-family:'Arial',Times,serif;font-style: normal;font-variant: normal;font-size: 10pt;  
font-weight: normal;text-decoration: none;color: white; display:block; text-align: right;  
}  
#Header  
{  
Width:1192px;  
margin-left:auto;  
margin-right:auto;  
}  
#Logo1  
{  
Width:283px;  
Height:200px;  
float:left;  
border-left:2px solid #FFFFFF;  
border-right:1px solid #FFFFFF;  
border-top:2px solid #FFFFFF;  
border-bottom:1px solid #FFFFFF;  
background-image:url(../Grafiken/Logo1.jpg);  
}  
#Logo2  
{  
Width:299px;  
Height:200px;  
float:left;  
border-left:1px solid #FFFFFF;  
border-right:1px solid #FFFFFF;  
border-top:2px solid #FFFFFF;  
border-bottom:1px solid #FFFFFF;  
background-image:url(../Grafiken/Logo2.jpg);  
}  
#Logo3  
{  
Width:300px;  
Height:200px;  
float:left;  
border-left:1px solid #FFFFFF;  
border-right:1px solid #FFFFFF;  
border-top:2px solid #FFFFFF;  
border-bottom:1px solid #FFFFFF;  
background-image:url(../Grafiken/Logo3.jpg);  
}  
#Logo4  
{  
Width:300px;  
Height:200px;  
float:left;  
border-left:1px solid #FFFFFF;  
border-right:2px solid #FFFFFF;  
border-top:2px solid #FFFFFF;  
border-bottom:1px solid #FFFFFF;  
background-image:url(../Grafiken/Logo4.jpg);  
}  
#Textzeile  
{  
Width:1192px;  
margin-left:auto;  
margin-right:auto;  
margin-top:0px;  
}  
#Text1  
{  
Width:283px;  
Height:34px;  
line-height:34px;  
float:left;  
border-left:2px solid #FFFFFF;  
border-right:1px solid #FFFFFF;  
border-top:1px solid #FFFFFF;  
border-bottom:1px solid #FFFFFF;  
  
}  
#Text2  
{  
Width:299px;  
Height:34px;  
line-height:34px;  
float:left;  
border-left:1px solid #FFFFFF;  
border-right:1px solid #FFFFFF;  
border-top:1px solid #FFFFFF;  
border-bottom:1px solid #FFFFFF;  
}  
#Text3  
{  
Width:300px;  
Height:34px;  
line-height:34px;  
float:left;  
border-left:1px solid #FFFFFF;  
border-right:1px solid #FFFFFF;  
border-top:1px solid #FFFFFF;  
border-bottom:1px solid #FFFFFF;  
}  
#Text4  
{  
Width:300px;  
Height:34px;  
line-height:34px;  
float:left;  
border-left:1px solid #FFFFFF;  
border-right:2px solid #FFFFFF;  
border-top:1px solid #FFFFFF;  
border-bottom:1px solid #FFFFFF;  
}  
#Main  
{  
Width:1192px;  
margin-left:auto;  
margin-right:auto;  
margin-top:0px;  
}  
#Navigation  
{  
Width:283px;  
float:left;  
border-left:2px solid #FFFFFF;  
border-right:1px solid #FFFFFF;  
border-top:1px solid #FFFFFF;  
border-bottom:2px solid #FFFFFF;  
}  
#Nav1  
{  
border-bottom:1px solid #960f0f;  
Width:263px;  
Height:50px;  
line-height:50px;  
padding-left:20px;  
background-color: #bbbbbb;  
}  
#Nav2  
{  
border-top:1px solid #960f0f;  
border-bottom:1px solid #960f0f;  
Width:263px;  
Height:50px;  
line-height:50px;  
padding-left:20px;  
background-color: #bbbbbb;  
}  
#Nav3  
{  
border-top:1px solid #960f0f;  
border-bottom:1px solid #960f0f;  
Width:263px;  
Height:50px;  
line-height:50px;  
padding-left:20px;  
background-color: #bbbbbb;  
}  
#Nav4  
{  
border-top:1px solid #960f0f;  
border-bottom:1px solid #960f0f;  
Width:263px;  
Height:50px;  
line-height:50px;  
padding-left:20px;  
background-color: #bbbbbb;  
}  
#Nav5  
{  
border-top:1px solid #960f0f;  
border-bottom:1px solid #960f0f;  
Width:263px;  
Height:50px;  
line-height:50px;  
padding-left:20px;  
background-color: #bbbbbb;  
}  
#Nav6  
{  
border-top:1px solid #960f0f;  
border-bottom:1px solid #960f0f;  
Width:263px;  
Height:50px;  
line-height:50px;  
padding-left:20px;  
background-color: #bbbbbb;  
}  
#Nav7  
{  
border-top:1px solid #960f0f;  
border-bottom:1px solid #960f0f;  
Width:263px;  
Height:50px;  
line-height:50px;  
padding-left:20px;  
background-color: #bbbbbb;  
}  
#Nav8  
{  
border-top:1px solid #960f0f;  
border-bottom:1px solid #960f0f;  
Width:263px;  
Height:50px;  
line-height:50px;  
padding-left:20px;  
background-color: #bbbbbb;  
}  
#Nav9  
{  
border-top:1px solid #960f0f;  
Width:263px;  
Height:50px;  
line-height:50px;  
padding-left:20px;  
background-color: #bbbbbb;  
}  
#Hauptfenster  
{  
Width:905px;  
Height:468px;  
float:left;  
border-left:1px solid #FFFFFF;  
border-top:1px solid #FFFFFF;  
background-image:url(../Grafiken/Hintergrund.jpg);  
}  
#Fussnote  
{  
Width:1192px;  
height:20px;  
line-height:20px;  
margin-left:auto;  
margin-right:auto;  
margin-top:0px;  
}

Beste Grüße

  1. Bevor ich nun die einzelnen Seiten mit Inhalt fülle, würde ich gerne Feeback zu der Seite erhalten. Wie ist der Aufbau, ...

    Zurück an den Start.
    Nimm den Vorrat an html-Elementen zur Kenntnis und wende ihn an.
    90% deiner div-Elemente lassen sich sinnvoll ersetzen.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Zurück an den Start.
      Nimm den Vorrat an html-Elementen zur Kenntnis und wende ihn an.
      90% deiner div-Elemente lassen sich sinnvoll ersetzen.

      Hmm,
      da ich ziemlicher Anfänger bin, kann ich die Antwort nicht ganz einsortieren. Wie kann ich die div-Elemente ersetzen?
      mfg
      Moppel

      1. Hallo »» Moppel,

        was er dir damit sagen möchte ist zB:

        <div  id="Textzeile">  
        <div id="Text1"><span class="Homepagelink">www.paarberatung-duisburg.de</span></div>  
        <div id="Text2"><a href="paarberatung.html" class="textzeile">Paarberatung</a></div>  
        <div id="Text3"><a href="psycholberatung.html" class="textzeile">Psychologische -/Sexualberatung</a></div>  
        <div id="Text4"><a href="familienberatung.html" class="textzeile">Familien-/Erziehungsberatung</a></div>  
        </div>
        

        Kannst du daraus ein:

        <div  id="navi">  
        <ul>  
         <li>www.paarberatung-duisburg.de</li>  
         <li><a href="paarberatung.html">Paarberatung</a></li>  
         <li><a href="psycholberatung.html">Psychologische -/Sexualberatung</a></li>  
         <li><a href="familienberatung.html">Familien-/Erziehungsberatung</a></li>  
        </ul>  
        </div>
        

        Im übrigen sind IDs laut wc3 eindeutig und dürfen nur 1x auf der Seite genutzt werden. Wenn man öfter den gleichen CSS Code nutzen möchte verwendet man class.

        mfg steffen

        1. Hi!

          Kannst du daraus ein:

          <div  id="navi">

          <ul>
          <li>www.paarberatung-duisburg.de</li>
          <li><a href="paarberatung.html">Paarberatung</a></li>
          <li><a href="psycholberatung.html">Psychologische -/Sexualberatung</a></li>
          <li><a href="familienberatung.html">Familien-/Erziehungsberatung</a></li>
          </ul>
          </div>

            
          Wofür genau braucht es das div?  
            
            
          off:PP  
            
            
          
          -- 
          "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)  
          
          
          1. Wofür genau braucht es das div?

            off:PP

            Optional, falls er in das DIV noch Text schreiben möchte ;)

            mfg

            1. Hi!

              Wofür genau braucht es das div?

              Optional, falls er in das DIV noch Text schreiben möchte ;)

              Danke!

              off:PP

              --
              "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
              1. So,
                wie mir der Martin noch einmal bestätigt hat, habe ich ein völlig unsinniges div-Layout gebaut. Die meisten divs seien überflüssig.
                Ich würde gern, da es auch mein erstes Projekt ist, eine sinnvolle Architektur erstellen. Ich kann mir vorstellen, die Seite über eine große Tabelle zu erstellen, da das Hauptfenster nie nach unten länger wird, als die Navigation. Oder muss ich nur manche divs erstezen. Ich habe wirklich keinen plan davon, wie eine sinnvolle Architektur auszusehen hat, wenn das Resultat exakt so sein soll. Das Layout wird nur noch hinsichtlich derFarben verändert. Rahmen etc soll so bleiben.
                Hier nocheinmal der Code: Zur Seite
                Hier noch einmal mein Code:

                /* Global gültige Layouts */  
                html { background-color:#960f0f; }  
                body { margin: 0;padding: 0;width:100%;height:100%; }  
                a img { border : 0 none; }  
                table { border:0px; border-collapse: collapse; }  
                table td { padding : 0; vertical-align: middle; height:57px; }  
                  
                /* Div-Container fuer die Struktur der Seite */  
                /* Bereich mit Logo und den Fotos */  
                #Header { Width:957px;margin: 5px auto;position: relative;border:0px; }  
                #Logo1 { Width:227px;Height:160px;float:left;border-left:2px solid #FFFFFF;border-right:1px solid #FFFFFF;  
                border-top:2px solid #FFFFFF;border-bottom:1px solid #FFFFFF;background-image:url(../Grafiken/Logo1.bmp); }  
                #Logo2 { Width:240px;Height:160px;float:left;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;  
                border-top:2px solid #FFFFFF;border-bottom:1px solid #FFFFFF;background-image:url(../Grafiken/Logo2.jpg); }  
                #Logo3 { Width:240px;Height:160px;float:left;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;  
                border-top:2px solid #FFFFFF;border-bottom:1px solid #FFFFFF;background-image:url(../Grafiken/Logo3.jpg); }  
                #Logo4 { Width:240px;Height:160px;float:left;border-left:1px solid #FFFFFF;border-right:2px solid #FFFFFF;  
                border-top:2px solid #FFFFFF;border-bottom:1px solid #FFFFFF;background-image:url(../Grafiken/Logo4.jpg); }  
                  
                /* Bereich mit der Navigation unter den Fotos */  
                #Textzeile { Width:957px;margin-left:auto;margin-right:auto;margin-top:0px; border:0px; }  
                #Text1 { Width:227px;Height:34px;line-height:34px;float:left;border-left:2px solid #FFFFFF;  
                border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF; }  
                #Text2 { Width:240px;Height:34px;line-height:34px;float:left;border-left:1px solid #FFFFFF;  
                border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF; }  
                #Text3 { Width:240px;Height:34px;float:left;border-left:1px solid #FFFFFF;  
                border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF; }  
                #Text4 { Width:240px;Height:34px;line-height:34px;float:left;border-left:1px solid #FFFFFF;  
                border-right:2px solid #FFFFFF;border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF; }  
                  
                /* Hauptbereich mit Navigation und Textfenster */  
                #Main { Width:957px;margin-left:auto;margin-right:auto;margin-top:0px;border:0px; }  
                /* Navigation */  
                #Navigation { Width:227px;float:left;border-left:2px solid #FFFFFF;border-right:1px solid #FFFFFF;  
                border-top:1px solid #FFFFFF;border-bottom:2px solid #FFFFFF;background-image:url(../Grafiken/Button.jpg); }  
                #Nav1 { border-bottom:1px solid #960f0f;Width:207px;Height:36px;line-height:36px;padding-left:20px; }  
                #Nav2 { border-top:1px solid #960f0f;border-bottom:1px solid #960f0f;Width:207px;  
                Height:35px;line-height:35px;padding-left:20px; }  
                #Nav3 { border-top:1px solid #960f0f;border-bottom:1px solid #960f0f;Width:207px;  
                Height:35px;line-height:35px;padding-left:20px; }  
                #Nav4 { border-top:1px solid #960f0f;border-bottom:1px solid #960f0f;Width:207px;  
                Height:57px;padding-left:20px; }  
                #Nav5 { border-top:1px solid #960f0f;border-bottom:1px solid #960f0f;Width:207px;  
                Height:57px;padding-left:20px; }  
                #Nav6 { border-top:1px solid #960f0f;border-bottom:1px solid #960f0f;Width:207px;  
                Height:35px;line-height:35px;padding-left:20px; }  
                #Nav7 { border-top:1px solid #960f0f;border-bottom:1px solid #960f0f;Width:207px;  
                Height:35px;line-height:35px;padding-left:20px; }  
                #Nav8 { border-top:1px solid #960f0f;border-bottom:1px solid #960f0f;Width:207px;  
                Height:35px;line-height:35px;padding-left:20px; }  
                #Nav9 { border-top:1px solid #960f0f;Width:207px;Height:35px;line-height:35px;  
                padding-left:20px; }  
                /* Grosses Textfenster */  
                #Hauptfenster { Width:726px;Height:378px;float:left;border-left:1px solid #FFFFFF;  
                border-top:1px solid #FFFFFF;background-image:url(../Grafiken/Hintergrund.jpg); }  
                  
                /* Fussnotenbereich */  
                #Fussnote { Width:957px;margin-left:auto;margin-right:auto;margin-top:0px; }  
                  
                /* Textlayouts */  
                /* Layouts für die Links */  
                a.nav:link { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 11pt;  
                font-weight: normal;text-decoration: none;color: white; display:block; text-align: left; }  
                a.nav:visited { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 11pt;  
                font-weight: normal;text-decoration: none;color: white; display:block; text-align: left; }  
                a.nav:hover { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 11pt;  
                font-weight: bold;text-decoration: none;color: #960f0f; display:block; text-align: left; }  
                a.nav:active { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 11pt;  
                font-weight: bold;text-decoration: none;color: #960f0f; display:block; text-align: left; }  
                a.nav:focus { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 11pt;  
                font-weight: bold;text-decoration: none;color: #960f0f; display:block; text-align: left; }  
                a.textzeile:link { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 10pt;  
                font-weight: normal;text-decoration: none;color: white; display:block; text-align: center; }  
                a.textzeile:visited { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 10pt;  
                font-weight: normal;text-decoration: none;color: white; display:block; text-align: center; }  
                a.textzeile:hover { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 10pt;  
                font-weight: normal;text-decoration: underline;color: white; display:block; text-align: center; }  
                a.textzeile:active { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 10pt;  
                font-weight: normal;text-decoration: underline;color: white; display:block; text-align: center; }  
                a.textzeile:focus { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 10pt;  
                font-weight: normal;text-decoration: underline;color: white; display:block; text-align: center; }  
                a.pdf:link { font-family:'Verdana';font-style: normal;font-variant: normal;font-size: 12pt;  
                font-weight: normal;text-decoration: none;color: black; display:block; text-align: left;  
                padding-left:40px; padding-top:10px;line-height:25px; }  
                a.pdf:visited { font-family:'Verdana';font-style: normal;font-variant: normal;font-size: 12pt;  
                font-weight: normal;text-decoration: none;color: black; display:block; text-align: left;  
                padding-left:40px; padding-top:10px;line-height:25px; }  
                a.pdf:hover { font-family:'Verdana';font-style: normal;font-variant: normal;font-size: 12pt;  
                font-weight: normal;text-decoration: none;color: #960f0f; display:block; text-align: left;  
                padding-left:40px; padding-top:10px;line-height:25px; }  
                a.pdf:active { font-family:'Verdana';font-style: normal;font-variant: normal;font-size: 12pt;  
                font-weight: normal;text-decoration: none;color: #960f0f; display:block; text-align: left;  
                padding-left:40px; padding-top:10px;line-height:25px; }  
                a.pdf:focus { font-family:'Verdana';font-style: normal;font-variant: normal;font-size: 12pt;  
                font-weight: normal;text-decoration: none;color: #960f0f; display:block; text-align: left;  
                padding-left:40px; padding-top:10px;line-height:25px; }  
                  
                /* Layouts für die Textzeile */  
                .Homepagelink { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 10pt;  
                font-weight: normal;text-decoration: none;color: white; display:block; text-align: center; }  
                .Textzeilenlinkaktiv { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 10pt;  
                font-weight: bold;text-decoration: none;color: white; display:block; text-align: center; }  
                  
                /* Layouts für die Navigationsleiste */  
                .Navigationstextaktiv { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 11pt;  
                font-weight: bold;text-decoration: none;color: white; display:block; text-align: left; }  
                  
                /* Layouts für das Hauptfenster */  
                /* Layouts für die Ueberschriften */  
                .Inhaltueberschrift { font-family:'Verdana';font-style: normal;font-variant: normal;font-size: 14pt;  
                font-weight: bold;text-decoration: none;color: #960f0f; display:block; text-align: left;  
                padding-left:20px; padding-top:18px; }  
                .Inhaltueberschrift2 { font-family:'Verdana';font-style: italic;font-variant: normal;font-size: 13pt;  
                font-weight: bold;text-decoration: none;color: #960f0f; display:block; text-align: right;  
                padding-right:20px; padding-top:20px; }  
                .Inhaltueberschrift3 { font-family:'Verdana';font-style: italic;font-variant: normal;font-size: 13pt;  
                font-weight: bold;text-decoration: none;color: #960f0f; display:block; text-align: right;  
                padding-right:20px; padding-top:20px; }  
                  
                /* Layouts für den Haupttext */  
                .Inhaltkorpus1 { font-family:'Verdana';font-style: normal;font-variant: normal;font-size: 12pt;  
                font-weight: normal;text-decoration: none;color: black; display:block; text-align: left;  
                padding-left:20px; padding-top:30px; padding-right:20px;line-height:25px; }  
                .Inhaltkorpus2 { font-family:'Verdana';font-style: normal;font-variant: normal;font-size: 10pt;  
                font-weight: normal;text-decoration: none;color: black; display:block; text-align: left;  
                padding-left:20px; padding-top:20px; padding-right:20px;line-height:20px; }  
                .Inhaltkorpus3 { font-family:'Verdana';font-style: normal;font-variant: normal;font-size: 12pt;  
                font-weight: normal;text-decoration: none;color: black; display:block; text-align: left;  
                padding-left:20px; padding-top:10px; padding-right:20px;line-height:25px; }  
                  
                /* Layouts für die Fussleiste */  
                .Fussnotentext { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 7.5pt;  
                font-weight: normal;text-decoration: none;color: white; display:block; text-align: left; }
                

                Im nächsten Thread noch einmal der HTML Code.
                Ich wäre dankbar für jede Hilfe, wie man eine sinnvolle Architektur mit gleichem Endresultat baut.

                1. Und der HTML Code:

                  und der HTML-Code:  
                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
                  <html>  
                  <head>  
                  <title>Zu meiner Person</title>  
                  <meta name="description" content="Beschreibung der seite">  
                  <meta name="keywords" content="Hier Schluesselwoerter">  
                  <meta name="author" content="Moppel">  
                  <meta name="editor" content="html-editor phase 5">  
                  <link rel="stylesheet" href="CSS/formate.css" type="text/css">  
                  </head>  
                  <body>  
                  <div id="Header">  
                  <div id="Logo1"></div>  
                  <div id="Logo2"></div>  
                  <div id="Logo3"></div>  
                  <div id="Logo4"></div>  
                  </div>  
                  <div id="Textzeile">  
                  <div id="Text1"><span class="Homepagelink">www.paarberatung-duisburg.de</span></div>  
                  <div id="Text2"><a href="paarberatung.html" class="textzeile">Paarberatung</a></div>  
                  <div id="Text3"><a href="psycholberatung.html" class="textzeile">Psychotherapeutische-/<br>Sexualberatung</a></div>  
                  <div id="Text4"><a href="familienberatung.html" class="textzeile">Familien-/Erziehungsberatung</a></div>  
                  </div>  
                  <div id="Main">  
                  <div id="Navigation">  
                  <div id="Nav1"><a href="index.html" class="nav">Startseite</a></div>  
                  <div id="Nav2"><span class="Navigationstextaktiv">Zu meiner Person</span></div>  
                  <div id="Nav3"><a href="paarberatung.html" class="nav">Paarberatung</a></div>  
                  <div id="Nav4"><table><tbody><tr><td><a href="psycholberatung.html" class="nav">Psychotherapeutische-/<br>Sexualberatung</a></td></tr></tbody></table></div>  
                  <div id="Nav5"><table><tbody><tr><td><a href="familienberatung.html" class="nav">Familien-/<br>Erziehungsberatung</a></td></tr></tbody></table></div>  
                  <div id="Nav6"><a href="diepraxis.html" class="nav">Die Praxisräume</a></div>  
                  <div id="Nav7"><a href="kostenudauer.html" class="nav">Kosten und Dauer</a></div>  
                  <div id="Nav8"><a href="kontakt.html" class="nav">Kontakt</a></div>  
                  <div id="Nav9"><a href="impressum.html" class="nav">Impressum</a></div>  
                  </div>  
                  <div id="Hauptfenster">  
                  </div>  
                  <div id="Fussnote"><span class="Fussnotentext">Praxis für Psychotherapie &bull; Margret Kümmerling &bull; Altenbrucher Damm 52a  
                   &bull; 47249 Duisburg &bull; Telefon: 0203/8057139 &bull; Email: webmaster@paarberatung-duisburg.de</span></div>  
                  </body>  
                  </html>  
                  
                  
                2. Hi Moppel!

                  wie mir der Martin noch einmal bestätigt hat, habe ich ein völlig unsinniges div-Layout gebaut. Die meisten divs seien überflüssig.

                  Da hat er natürlich recht: die DIVs haben keinerlei Bedeutung, sondern sind nur Schachteln ohne Aufschrift (Semantik) die etwas aufnehmen können (Elementinhalt). Du kannst diese Schachteln im Raume verteilen und lackieren (via CSS), so dass diese Komposition mehr oder weniger gut optisch wahrnehmbar ist: die Bedeutung des Inhaltes ist allerdings nicht erkennbar.

                  Nutze lieber sinnvolle HTML-Elemente (Absätze, Überschriften, Listen etc.) um Deine Inhalte zu strukturieren und gestalte diese per CSS.

                  Die Zeiten in denen man nur DIV-Elemente per CSS positionieren konnte sind lange vorbei, das Buzzwort DHTML hoffentlich bald aus den Köpfen der Menschen verschwunden.

                  Ich würde gern, da es auch mein erstes Projekt ist, eine sinnvolle Architektur erstellen.

                  Das ist eine gute Idee: gerade am Anfang eines Projektes hat man dazu die beste Chance.

                  Ich kann mir vorstellen, die Seite über eine große Tabelle zu erstellen,

                  Ich kann mir vorstellen, dass Du dir das vorstellen kannst, aber es ist keine gute Idee. Tabellen sind (und waren immer) ausschließlich dazu gedacht, tabellarische Daten aufzunehmen.

                  Da im Laufe der eWebolution  der Wunsch zur Gestaltung (im Sinne von Layout-->'Seite'-->'Webseite'[*]) von HTML-_Dokumenten_ aufkam und CSS noch nicht erfunden war, hat man lange Zeit Tabellen zu diesem Zwecke mißbraucht - tue das bitte nicht, auch wenn andere dies immer noch so handhaben.

                  Tabellenmißbrauch ist ähnlich wie Alkoholmißbrauch, allerdings ohne Rausch:  statt dessen aber 100% Katerstimmung.

                  off:PP

                  [*]Grr....

                  --
                  "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
        2. Kannst du daraus ein:

          <div  id="navi">

          <ul>
          <li>www.paarberatung-duisburg.de</li>
          <li><a href="paarberatung.html">Paarberatung</a></li>
          <li><a href="psycholberatung.html">Psychologische -/Sexualberatung</a></li>
          <li><a href="familienberatung.html">Familien-/Erziehungsberatung</a></li>
          </ul>
          </div>

            
          Wenn ich das so mache, stehen doch die Listeneinträge alle untereinander. Wie soll ich die denn dann genau positioniert bekommen?  
            
            
          
          > Im übrigen sind IDs laut wc3 eindeutig und dürfen nur 1x auf der Seite genutzt werden. Wenn man öfter den gleichen CSS Code nutzen möchte verwendet man class.  
          >   
            
          Im Code ist doch jede ID eindeutig vergeben. Und jedes DIV wird nur einmal verwendet.  
          Gruß  
          Moppel
          
          1. Wenn ich das so mache, stehen doch die Listeneinträge alle untereinander. Wie soll ich die denn dann genau positioniert bekommen?

            mit float_left im li

            1. Lieber sepp,

              Wenn ich das so mache, stehen doch die Listeneinträge alle untereinander. Wie soll ich die denn dann genau positioniert bekommen?

              mit float_left im li

              oder mit display:inline im li!

              Liebe Grüße,

              Felix Riesterer.

              --
              ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
      2. Mahlzeit Moppel,

        90% deiner div-Elemente lassen sich sinnvoll ersetzen.

        da ich ziemlicher Anfänger bin, kann ich die Antwort nicht ganz einsortieren. Wie kann ich die div-Elemente ersetzen?

        Bei Überschriften (auch Absatzüberschriften!) durch entsprechende http://de.selfhtml.org/html/text/ueberschriften.htm#definieren@title=Überschriftenelemente, bei ganz offensichtlichen Listen durch entsprechende http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Listenelemente ... usw.

        MfG,
        EKKi

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

    Die Seite braucht ziemlich viel Breite, das könnte auf manchen Browser problematisch werden.

    Rot wirkt etwas aggressiv. Weiß auf grau wirkt dagegen sehr unscheinbar.

    Die Links würd ich in eine einzige Liste zusammenfassen. Und du könntest sie etwas kompakter schreiben. Ich muss auf meiner Laptopauflösung schon scrollen, ohne eigentlichen Inhalt auf der Seite.

    Die drei großen Bilder würde ich auf die Hauptseite machen, aber evtl. nicht mehr auf die Unterseiten. Eben wegen scrollen. Vielleicht kannst du sie ja etwas kleiner machen?

  3. Hallo,

    kurz ein paar krude Anmerkungen zur Optik:

    roter Hintergrund, wie bemerkt, wirkt aggressiv, dominant => weglassen. Nutze wenn immer möglich weiss. Hintergrundfarbe ist scheinbar ein einfaches Mittel, um einen Fülleffekt zu erzielen.

    Grauer Verlauf in Navigation und hinter Logo => weglassen. Wirkt zu technoid.
    Das Logo ist so in Ordnung, auch der Rest sollte dann so passen.

    "© 2010 Margret Kümmerling, D-Duisburg" => weglassen, in Deutschland gibts kein Copyright.

    dieser weisse Rahmen => weglassen, er sieht aus wie ein Konstruktionsrahmen.

    kursive Schrift bei aktivem Navigationselement => ändern.

    1192px ist zu breit, nutze 960px.

    Impressum muss nicht im Hauptnavigationsblock stehen

    du wirst keine dieser Hochglanz-Stockfotos mit fröhlichen, aktiven Menschen nutzen, richtig?

    Auch wenn die Arbeitsweise mit HTML dazu verleitet: Denke nicht in Flächen.
    Das Design wirkt sehr geschachtelt. Versuche es aufzubrechen, versuche, den Inhalt (wenn vorhanden) optisch nicht zu sehr von der Navigation zu trennen, und doch herauszuarbeiten, welcher Bereich welcher Funktionalität zuzuordnen ist. Alles muss eins sein, kompakt sein, wie aus einem Guß sein, mit klaren Anordnungen und intelligenter Informationsvisualisierung.

    Brillo

    1. Hi,

      roter Hintergrund, wie bemerkt, wirkt aggressiv, dominant => weglassen.

      ACK.

      Nutze wenn immer möglich weiss.

      NAK.
      Weiß als Hintergrundfarbe wirkt hart, steril, grell. Ich würde eher empfehlen, weiß für Akzente (Linien, Schrift, Ornamente) zu nutzen, aber für Flächen in jedem Fall zu vermeiden. Dort eher etwas abtönen, notfalls auf ein neutrales Hellgrau.

      Grauer Verlauf in Navigation und hinter Logo => weglassen. Wirkt zu technoid.

      Was für ein Verlauf? Als Hintergrund des Logos ist er so dezent, dass ich ihn erst nach gezieltem Suchen als solchen wahrnehme, und in der Navigation zeigt keiner meiner Browser einen Verlauf.

      kursive Schrift bei aktivem Navigationselement => ändern.

      Viel schlimmer: Fettschrift bei :hover. Die führt dazu, dass der längste Text in der Navi ("Psychologische -/Sexualberatung") plötzlich zweizeilig wird und dadurch das ganze Layout springt. Nebenbei, was soll das Leerzeichen vor dem Strich?

      Ciao,
       Martin

      --
      "Mutti, hier steht, das Theater sucht Statisten. Was sind Statisten?" - "Das sind Leute, die nur rumstehen und nichts zu sagen haben." - "So wie Papa?"
      1. Hi,

        ACK.

        Nutze wenn immer möglich weiss.

        Für was steht denn NAK? Egal, weiß als Hintergrundfarbe findest du unpassend? Ich sage: Weiß als Hintergrundfarbe ist für seriöse Sachen das einzig Wahre. Aber da sind die Geschmäcker unterschiedlich.

        Bei CSS Drive findest du einige Sachen in beide Richtung.

        Grauer Verlauf in Navigation und hinter Logo => weglassen. Wirkt zu technoid.

        Stimmt, Navigation hat gar keinen Verlauf. Der Verlauf hinter dem Logo ist mir sofort sehr unangenehm aufgefallen. Schaut schmutzig aus, wie gesagt, das Logo auf weissem Hintergrund schaute wesentlich besser aus.

        kursive Schrift bei aktivem Navigationselement => ändern.

        Viel schlimmer: Fettschrift bei :hover. Die führt dazu, dass der längste Text in der Navi ("Psychologische -/Sexualberatung") plötzlich zweizeilig wird und dadurch das ganze Layout springt. Nebenbei, was soll das Leerzeichen vor

        Das auch.

        Gruß
        Brillo

        1. Hallo,

          Für was steht denn NAK?

          für "Negative ACK" oder "No ACK".

          Egal, weiß als Hintergrundfarbe findest du unpassend? Ich sage: Weiß als Hintergrundfarbe ist für seriöse Sachen das einzig Wahre.

          Auf Papier ja; weißer Hintergrund am Bildschirm ist dagegen wie Fernlicht vom Gegenverkehr, das mich blendet.

          Ciao,
           Martin

          --
          Heutzutage gilt ein Mann schon dann als Gentleman, wenn er wenigstens die Zigarette aus dem Mund nimmt, bevor er eine Frau küsst.
            (Barbra Streisand, US-Schauspielerin)
          1. [latex]Mae  govannen![/latex]

            Egal, weiß als Hintergrundfarbe findest du unpassend? Ich sage: Weiß als Hintergrundfarbe ist für seriöse Sachen das einzig Wahre.

            Auf Papier ja; weißer Hintergrund am Bildschirm ist dagegen wie Fernlicht vom Gegenverkehr, das mich blendet.

            SelfHTML ist (standardmäßig) auch weiß :)

            Aber ich finde ein knalliges #FFF auch nicht so angenehm, daher bevorzuge ich eine ganz leicht ins creme gehende Farbe, wie z.B. #FEFEF9 und je nach Textmenge ggf. davon leicht abgeleitete Farbwerte bis runter zu ins Grau gehende #F2F2EC

            Cü,

            Kai

            --
            Deutsches Liedgut international:
            In early rope to mountain we pull
            Foren-Stylesheet Site Selfzeug JS-Lookup
            SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
        2. Moin,

          Für was steht denn NAK? Egal, weiß als Hintergrundfarbe findest du unpassend? Ich sage: Weiß als Hintergrundfarbe ist für seriöse Sachen das einzig Wahre. Aber da sind die Geschmäcker unterschiedlich.

          Helle Schrift auf dunklem Hintergrund ist das einzig Augenfreundliche. Was beim System oft nicht so toll ist, weil der Eindruck den etwas am Schirm (helle Schrift auf dunklem Hintergrund) gemacht hat sich oft doch erheblich von dem einer gedruckten Sache (gewoehlich weiss mit schwarzer Schrift) unterscheidet. Das Problem hat man aber bei einer Webseite nicht unbedingt. Ich habe auch bei meinem System fast kein reinweiss als Hintergrund. Alles ist leicht grau, als haette ich die Helligkeit des Monitors runtergedreht nur sind halt alle anderen Farben noch klar.

          Das haben mittlerweile auch so einige serioese Seiten fuer sich entdeckt. Weiss ist in Masse doch recht aggressiv.

          --
          "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                - T. Pratchett
  4. Hey,
    ich fange jetzt noch einmal ganz von vorne an.
    Folgendes Problem auf der Seite : der Inhalt erscheint nicht mittig und meiner border-left und border right angaben werden ignoriert. Daher die Lücken zwischen den Bildern. Warum?
    By the way: Ist das ein sinnvoll geschriebener Quelltext für eine Seite die mit einem Header aus 4 Bildern und Rahmen losegehen soll?
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Startseite</title>
    <meta name="description" content="Beschreibung der seite">
    <meta name="keywords" content="Hier Schluesselwoerter">
    <meta name="author" content="Moppel">
    <meta name="editor" content="html-editor phase 5">
    <link rel="stylesheet" href="CSS/formate.css" type="text/css">
    </head>
    <body>
    <div id="Header">
    <img class="Kopf1" src="Grafiken/Logo1.bmp" alt="Logos" width="227" height="160">
    <img class="Kopf2" src="Grafiken/Logo2.jpg" alt="Logos" width="240" height="160">
    <img class="Kopf3" src="Grafiken/Logo3.jpg" alt="Logos" width="240" height="160">
    <img class="Kopf1" src="Grafiken/Logo4.jpg" alt="Logos" width="240" height="160"></div>
    </body>
    </html>
    CSS:
    /* Global gültige Layouts */
    html { background-color:#94a2e0; }

    /* Bereich mit Logo und den Fotos */
    #Header { margin-left:auto;margin-right:auto;float:left; }
    .Kopf1 { border:2px solid #FFFFFF; }
    .Kopf2 { border-top:2px solid #FFFFFF; border-bottom:2px solid #FFFFFF; border-right:1px #FFFFFF; }
    .Kopf3 { border-top:2px solid #FFFFFF; border-bottom:2px solid #FFFFFF; border-left:1px #FFFFFF; }

  5. Liebe Moppel,

    1.) Wenn Du einen Link zu Deiner Seite angibst, dann erspare uns bitte den Quelltext hier im Forum. Den finden wir garantiert auch so.

    2.) Die Bilder auf Deiner Seite sind reine Gestaltungselemente und sollten deswegen nicht als <img>-Elemente im Quelltext vorhanden sein. Generiere eine Bilderleiste als _einzelne_ Bilddatei und verwende sie über Deinen CSS-Code als Hintergrundbild.

    3.) Deine waagrechte Navigation ist eine Navigation und eine Navigation ist eine _Liste_ von Links. Wie man das sinnvoll macht, steht in SELFHTML: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal@title=CSS-basierte Navigationsleisten horizontal>. Das gleiche gilt natürlich ebenso für Deine senkrechte Navigation, nur eben senkrecht: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#vertikal@title=CSS-basierte Navigationsleisten vertikal>.

    4.) Fettschrift als Hover-Effekt bei Linktexten ist eine schlechte Idee, da sie in manchen Browsern ein nervöses Herumgezucke im Layout auslöst, da manchmal die Linktexte breiter werden und plötzlich Zeilenumbrüche erzwingen, die das Layout auseinander reißen. Verwende Hintergrundfarben, verwende Unterstreichung (die sich ein- oder ausschaltet), verwende Schriftfarben (Aufhell-Effekte o.ä.) - aber keine Fettschrift!

    5.) Verwende die HTML-Elemente, die die Natur Deiner Inhalte widerspiegeln. Was das bedeutet? Dazu ein paar Beispiele.

    Das hier ist keine Überschrift:
    <span class="Inhaltueberschrift">Wann macht eine Paarberatung Sinn?</span>

    Das hier dagegen schon:
    <h1>Wann macht eine Paarberatung Sinn?</h1>

    Das hier ist kein Textabsatz (oder gar eine Gruppe von Textabsätzen):

    <span class="Inhaltkorpus1">Eine Paarberatung sollte dann in Betracht gezogen werden, wenn die Beziehung über längere Zeit  
    unerfreulich Verlaufen ist.<br>  
    Wo früher Aufmerksamkeit und normale Kommunikation unter den Partnern üblich waren, finden heute endlose, ermüdende  
    und destruktive Auseinadersetzungen statt &mdash; immer nach gleichem Muster verlaufend.<br>  
    Sie fühlen sich in der Partnerschaft zu kurz gekommen, erschöpft, ratlos, enttäuscht, traurig und wütend. Sie befinden  
    sich in einer Krise, die das normale Maß übersteigt.<br><b>  
    Hier kann eine Paarberatung helfen!</b></span>
    

    Das hier dagegen schon:

    <p>Eine Paarberatung sollte dann in Betracht gezogen werden, wenn die Beziehung über längere Zeit unerfreulich Verlaufen ist.</p>  
    <p>Wo früher Aufmerksamkeit und normale Kommunikation unter den Partnern üblich waren, finden heute endlose, ermüdende und destruktive Auseinadersetzungen statt &mdash; immer nach gleichem Muster verlaufend.</p>  
    <p>Sie fühlen sich in der Partnerschaft zu kurz gekommen, erschöpft, ratlos, enttäuscht, traurig und wütend. Sie befinden sich in einer Krise, die das normale Maß übersteigt.</p>  
    <p><strong>Hier kann eine Paarberatung helfen!</strong></p>
    

    Das hier ist kein Zitat:
    <span class="Inhaltueberschrift2">In jeder Krise liegt die Chance für einen Neuanfang oder<br>eine persönliche weiterentwicklung</span>

    Das hier dagegen schon:

    <blockquote>  
        <p>In jeder Krise liegt die Chance für einen Neuanfang oder eine persönliche Weiterentwicklung</p>  
    </blockquote>
    

    Wenn Du die sinntragenden HTML-Elemente benutzt, dann kannst Du auf viele Deiner Klassennamen verzichten und stattdessen über die Elemente direkt Dein Layout umsetzen. Dabei kann Dir auch der http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Nachfahren-Selektor helfen, da Du dann Formatierungen für Textabsätze auf Dein <div id="Hauptfenster"> beschränken kannst, sodass sie außerhalb dessen nicht gelten - und umgekehrt.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Salut!

      4.) Fettschrift als Hover-Effekt bei Linktexten ist eine schlechte Idee, da sie in manchen Browsern ein nervöses Herumgezucke im Layout auslöst...

      Das ist reine Geschmacksache, eine Anmerkung, die ich persönlich generell so nicht unterschreiben kann. Designtechnisch ist Fettschrift als hover-Effekt sehr schön anzusehen und das von dir erwähnte "nervöse Herumgezucke" - falls es denn auftritt - ist gut zu Überschauen für den Designer.
      Soll heissen: Falls es sich um einen längeren Text handelt, bei dem dann auf der ganzen Seite alles nachrutscht, Sätze anders umbrechen etc, dann wird es sehr sehr SEHR unschön. Aber beispielsweise in einer Liste werden die anderen Elemente nur eine vertikale Bewegung nach unten machen, die dem Auge durchaus zu gefallen vermag.

      Dies ist also eine allgemeine Designfrage für die man ein Auge haben muss, genauso wie für die allgemeine Gestaltung des Rests auch. Wenn man dieses nicht hat, dann ist Hopfen und Malz sowieso verloren...

      Gruss

      stewe