Frage zu Website mit Divs

~~imagecload~~ · 08/08/2013, 18:10

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:

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

Mfg

DJRedMax · 08/08/2013, 18:12

Das passt im ganzen so wie es ist.

~~imagecload~~ · 08/08/2013, 18:14

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.

Mikesch01 · 08/08/2013, 18:31

Naja, wenn niemand was zu bemängeln hat..ich hab was

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

~~imagecload~~ · 08/08/2013, 18:33

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 <.<

Mikesch01 · 08/08/2013, 18:36

Oh ja! Das stimmt

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; */
}

~~imagecload~~ · 08/08/2013, 18:41

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

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;
}

Mikesch01 · 08/08/2013, 18:47

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.

~~imagecload~~ · 08/08/2013, 18:50

Gut mit dem margin hab ich mich grad total verplant

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

Was kann ich da machen?

Mikesch01 · 08/08/2013, 18:59

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>

Tasiro · 08/08/2013, 19:43

Quote:

Originally Posted by Mikesch01

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.