Frage zu Website mit Divs

08/08/2013 18:10 imagecload#1
Hallo,

Ich lerne derzeit das aufbauen einer Website mit CSS und HTML. Die Grundlagen von Tags in HTML und von attributen in CSS kenne ich schon.

Ich habe anhand von Div Containern versucht eine sehr simple Website zu gestalten.

Hier meine Codes:


HTML Code:
Code:
<!DOCTYPE html>
<html>

<head>
    <title>Website Template</title>

    <meta charset="ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">

    <link href="css/main.css" type="text/css" rel="stylesheet">
</head>

<body>
        <div id="container">

        <div id="header"><h1>Header</h1></div>
        <div id="navi">Navigation</div>
        <div id="content"><br> <br><br><br>Wassssss <b> geht </b> <i> ab !</i> </div>
        <div id="footer">Footer</div>


        </div>
</body>
</html>
CSS Code:
Code:
body
{
    background-color:black;

}

#container
{
   width:1000px;
   height:800px;
   margin-top:100px;
   margin-left: auto;
   margin-right: auto;
   background-color:white;
   position: static;

}

#header
{
    width:1000px;
    height:200px;
    background-color:red;
    text-align: center;
    font-family: Courier;
    font-size:30px;
    color: #00FFFF;


}

#navi
{
    width:200px;
    height:550px;
    background-color:blue;
}

#footer
{
    width:1000px;
    height:50px;
    background-color: yellow;
}

#content
{
    width:800px;
    height:550px;
    margin-left:200px;
    margin-top:-550px;
    background-color: orange;
    text-align: justify;
    position:static;
}

Die Website an sich wird ohne Fehler angezeigt.
Aufgebaut ist sie so:


[Only registered and activated users can see links. Click Here To Register...]


Ich wollte fragen ob der Code sauber ist oder ob man was anders machen könnte?

Mfg
08/08/2013 18:12 DJRedMax#2
Das passt im ganzen so wie es ist.
08/08/2013 18:14 imagecload#3
Ok. Ich dachte ich habe irgendwelche Fehler drin bzw. Sachen die man besser machen kann.

Die Seite soll jetzt nicht schön aussehen. Sie ist nur dazu da um das ganze zu testen/lernen.
08/08/2013 18:31 Mikesch01#4
Naja, wenn niemand was zu bemängeln hat..ich hab was :D

Code:
#container
{
   width:1000px;
   height:800px; /* sollte nur verwendet werden, wenn die Inhalt GENAU 800px groß sein soll, sonst weglassen (dynamische Höhe) */
   margin-top:100px;
   margin-left: auto;
   margin-right: auto; 
   background-color:white;
   position: static; /* sollte nur verwendet werden, wenn der Container beim Scrollen nicht verschoben werden soll (Hintergrund läuft jedoch weiter), sonst raus */
}

#header
{
    width:1000px;
    height:200px;
    background-color:red;
    text-align: center;
    font-family: Courier;
    font-size:30px; /* Angaben mit 'px' möglich, aber üblich ist wohl eher die Angabe in 'pt' (siehe MS Word) oder 'em' (Verhältnismäßig) */
    color: #00FFFF;
}

#content
{
    width:800px;
    height:550px; /* siehe #container height */
    margin-left:200px; /* Bei 2 Div's in einer Zeile (hier: navi und content) solte nicht mit margin sondern mit float gearbeitet werden - nachgooglen! :) */
    margin-top:-550px; /* dito, siehe oben */
    background-color: orange;
    text-align: justify; /* möglich, aber Blockabsätze sind nicht schön zu lesen (sollten nicht für komplette Texte verwendet werden) */
    position:static; /* gehört hier überhaupt nicht hin^^ */
}
Alles rein konstruktive Kritik..nichts persönliches ;)
08/08/2013 18:33 imagecload#5
Danke :)

Hatte generell Probleme mit 2 Divs in einer Zeile. Ich werde mir mal alles von dir merken.

Wenn ich die auto margins nicht benutze ist die Website auf der linken Seite. Mit ist sie zentriert <.<
08/08/2013 18:36 Mikesch01#6
Oh ja! Das stimmt :D Hab mich da vertan. Das ist natürlich wahr. 0 ist die Standardeinstellung.

Habs mal editiert.
Aber ein Tipp am Rande: Du kannst für alle Seiten des Div's das margin mit einem Befehl setzen:

Code:
#bla {
  margin: 100px auto 0 auto; /* margin: oben rechts unten links; */
}
08/08/2013 18:41 imagecload#7
Neuer CSS Code:

Wegen dem dynamischen. Gut wenn die Website aber zu wenig Inhalt hat sieht das bescheuert aus. Und wenn ich im Content inhalt einfüge bleibt es leer :o

Code:
body
{
    background-color:black;

}

#container
{
   margin: 100px auto auto auto;
   width:1000px;
   height:900px;

   background-color:black;


}

#header
{
    width:1000px;
    height:200px;
    background-color:red;
    text-align: center;
    font-family: Courier;
    font-size:30px;
    color: #00FFFF;


}

#navi
{
    width:200px;
    background-color:blue;
    text-align: center;
}

#footer
{
    width:1000px;
    height:50px;
    background-color: yellow;
}

#content
{
    width:800px;
    float: right;
    margin-top:-650px;
    background-color: orange;
}
08/08/2013 18:47 Mikesch01#8
Code:
#container
{
   margin: 100px auto auto auto;
   width:1000px;
   height:900px; /* sollte raus */
   background-color:black;
}

#content
{
    width:800px;
    float: right;
    margin-top:-650px; /* wofür ist das?^^ */
    background-color: orange;
    /* Neu hinzugefügt: */
    min-width: 500px; /* eine Mindestgröße kann man angeben, falls die Seite dann tatsächlich so leer ausschaut - jedoch nie eine feste Höhe ;) */
}
Sonst ganz ok.
08/08/2013 18:50 imagecload#9
Gut mit dem margin hab ich mich grad total verplant :D

So aber das Hauptproblem. Dat margin-top war dazu da damit es nicht so aussieht:

[Only registered and activated users can see links. Click Here To Register...]

Was kann ich da machen?
08/08/2013 18:59 Mikesch01#10
CSS

Code:
#navi
{
    width:200px;
    background-color:blue;
    text-align: center;
    float: left; /* neu */
}

#content
{
    width:800px;
    float: right;
    background-color: orange;
    min-width: 500px;
}
HTML

Code:
        <div id="container">

        <div id="header"><h1>Header</h1></div>
        <div id="navi">Navigation</div>
        <div id="content"><br> <br><br><br>Wassssss <b> geht </b> <i> ab !</i> </div>
        <!-- neu: Entfernt alle float's und lässt das Design normal weiter fließen -->
        <div style="clear: both;"></div>
        <div id="footer">Footer</div>


        </div>
08/08/2013 19:43 Tasiro#11
Quote:
Originally Posted by Mikesch01 View Post
Code:
        <!-- neu: Entfernt alle float's und lässt das Design normal weiter fließen -->
        <div style="clear: both;"></div>
Code:
        <!-- TODO: neue CSS-Klasse erstellen -->
        <div class="clear"></div>

Ansonsten könnte man vielleicht noch die neuen HTML5-Sementikelemente verwenden und jedem Starttag ein Endtag zuordnen. IDs könnten u. U. auch durch Klassen ersetzt werden.