DIV-Tag positionieren

Keito2903 · 30.12.2010

Hey ich bin gerade am HTML und CSS lernen und stoße auf mein erstes Problem.

Ich habe eine Liste erstellt, die ich als Seiten Navigation benutzen will, aber nicht weiß, wie ich diese positionieren soll.

Hier mal der HTML Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="basic.css" rel="stylesheet" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gamers Meal</title>
</head>

<body id="Container" bgcolor="#FFFFFF"; style="width:800px; border: 1px solid #000;">
    <div id="main">
        <div id="Body">
              <div id="Header"><img src="img/header.gif" width="655"/><br /></div>
        
                    <div id="maincontent">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
                     </div>
            
     <div id="footer">2010</div></div>
     
     </div>
     
     <div id="liste"> <ul>Eins</ul><ul>Zwei</ul><ul>Drei</ul><ul>Vier</ul><ul>Fünf</ul>
        
</body>
</html>

CSS Code:

Code:

#Header {
    margin:0 auto;
    padding: 5px;
    text-align:center;
    background-color:#CCC
    }
    
#Body {
    background-color:#999;
    margin: 0px auto;

        }
    
#maincontent {
    text-align:center;    
}

#liste {
    background-color:#0C0;
    width: 230px;
    position:absolute;
    left: 10px auto;
}

#Container {padding: 2px 2px 2px 2px;
margin: 0px auto;
}

#main {
background-color:#FFF;
width:800px;
margin: 0px auto;
}

#footer{
    background-color:#666;
    text-align:center;
    }

Danke im Vorraus.^^

Herr_D · 30.12.2010

AW: DIV-Tag positionieren

Was willst du denn erreichen?

und die Listenpunkte sollten <li> sein...

also:

Code:

<ul>
<li><a href="ziel">name</a></li>
<li><a href="ziel">name</a></li>
<li><a href="ziel">name</a></li>
</ul>

cebito · 30.12.2010

AW: DIV-Tag positionieren

@D - sagst ihm auch noch, das, wenn er schon vor der Liste nen div aufmacht, er den dahinter auch wieder schließt

ach, und wenn schon...

HTML:

<ul>
<li><a href="ziel">ziel</a></li>
<li><a href="ziel">ziel</a></li>
<li><a href="ziel">ziel</a></li>
</ul>

das a auch wieder...

Keito2903 · 30.12.2010

AW: DIV-Tag positionieren

Danke, aber ich meine das hier:

Wie bekomme ich diese links oben neben den Header?

Das Div ist doch geschlossen?! EDIT: Ne wars doch nicht

leveler · 30.12.2010

AW: DIV-Tag positionieren

schau Dir das mal an:

owieortho · 30.12.2010

AW: DIV-Tag positionieren

div geschlossen,
float angesprochen

hach, früher habe ich schneller gezogen

Aber noch eine kleine Anmerkung, oder zwei:
1. verlagere doch die Anweisungen im body-tag in die CSS-Datei
2. gib Deinen Klassen und IDs sinnvolle Namen und behalte eine konsistente Schreibweise ein

Keito2903 · 30.12.2010

AW: DIV-Tag positionieren

Ich hab mir die Floatseite mal angeschaut und wenn ich nun Floate bleibt die Liste trotzdem unten hängen.

Iwie kapier ich das nicht....

leveler · 30.12.2010

AW: DIV-Tag positionieren

hmm, finde Dein markup auch ein wenig seltsam..warum taucht die navi unterm footer auf?
versuch mal:

<body>
<div id="main">
<div id="navi">
<ul>
<li>hier die links setzen</li>
<li>hier die links setzen</li>
</ul>
</div>
<div id="maincontent">lorem tralala...</div>

<div id="footer">2010</div>

</div>
</body>
</html>

dann floatest Du die navi =>"left" und den Hauptteil/"maincontent" => "right"
und setzt danach und noch VOR DEM footer einen "clearer", nämlich zB so
<br id="clearer" />. Die css Anweisung dafür:

#clearer{clear: both;
height: 1px;
overflow: auto;}

sollte klappen...

Herr_D · 30.12.2010

das Bild im Header ist zu breit...

liste 230px + headerbild 655 =895 du gibst der seite aber nur 800px

ich schreib dir mal 'nen schnellen Code... Momentchen

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

        <head>
                <link href="basic.css" type="text/css" rel="stylesheet" media="all">
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Gamers Meal</title>
                <style type="text/css">
<!--
body {
    background-color:#999;
            }

#maincontent {
    text-align:center;
}

#liste {
    background-color:#0C0;
    width: 230px;
    float:left;
}

#Header { /* Angaben für den Kopfbereich reinschreiben */ }
#main {
background-color:#FFF;
width:800px;
margin: 0px auto;
}

#footer{
    background-color:#666;
    text-align:center;
    }
.klar {
        clear:both; }
-->
</style>
        </head>

        <body>
                <div id="main">
                        <div id="liste">
                                <ul>
                                        <li>Punkt</li>
                                        <li>Punkt</li>
                                </ul>
                        </div>
                        <div id="Header">
                                Kopfbereich auch Header genannt</div>
                        <div class="klar"></div>
                        <div id="maincontent">
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
                        <div id="footer">
                                2010</div>
                </div>
        </body>

</html>

P.S
...und achte mal drauf, wemm du welche IDs zuordnest... dem body ordnet man für gewöhnlich keine ID zu, da im css body eigenständig stehen kann...

JannisL · 30.12.2010

AW: DIV-Tag positionieren

Ich hatte auch am Anfang Probleme, aber das bekommt man hin

Nach ein halben Jahr kann man schon fast jede statische Seite erstellen, die man sich vorstellt.
Jetzt zum Problem:

1.Du hast ein "main"-div und ein "body"-div in der HTML Seite erstellt. Braucht man nicht. Das "body" bezieht sich auf die ganze Seite, muss kein extra DIv erstellen. Das "main" kannst auch weglassen.
Das im body mit den ganzen Rahmen etc. kannst du auch weglassen. Schreib es nur in der CSS-Datei.

So sähe sie dann aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="basic.css" rel="stylesheet" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gamers Meal</title>
</head>

<body>

<div id="Header">
<img src="img/header.gif" width="655"/>
</div>

<div id="maincontent">
lorem ipsum
</div>

<div id="footer">2010</div>

<div id="liste"> <ul>Eins</ul><ul>Zwei</ul><ul>Drei</ul><ul>Vier</ul><ul>Fünf</ul>

</body>
</html>

2. Die Div´s sollten in der richtigen Reihenfolge sein. Von oben links nach unten rechts. Dann hättest du die Reihenfolge so:
1.Header
2.Menü
3.Inhalt
4.Footer

So sähe der Code dann aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="basic.css" rel="stylesheet" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gamers Meal</title>
</head>

<body>

<div id="Header">
<img src="img/header.gif" width="655"/>
</div>
<div id="liste"> <ul>Eins</ul><ul>Zwei</ul><ul>Drei</ul><ul>Vier</ul><ul>Fünf</ul>
</div>

<div id="maincontent">
lorem ipsum
</div>

<div id="footer">2010</div>

</body>
</html>

3. Headerbild auch nur in CSS und die Liste korrigieren.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="basic.css" rel="stylesheet" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gamers Meal</title>
</head>

<body>

<div id="Header">
</div>
<div id="liste">

<ul>
<li><a href="ziel">ziel</a></li>
<li><a href="ziel">ziel</a></li>
<li><a href="ziel">ziel</a></li>
</ul>

</div>

<div id="maincontent">
lorem ipsum
</div>

<div id="footer">2010</div>

</body>
</html>

____________________________________________________________
Sieht doch schon mal besser aus.

Jetzt ist die CSS-Datei dran, aber die mach mal komplett neu. Das schaffst du schon.

Lies noch mal Startseite - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller) damit du dich besser zurechtfindest. Der erste Teil kannst du dir Online anschauen.

Edit: Oh, zu langsam^^ Vll. hilft dir meins auch was.

Keito2903 · 30.12.2010

AW: DIV-Tag positionieren

Danke Allen =D

Leveler kommt am nähesten hin. Was ich aber will ist eine zentrierte Seite und neben dem Container div eine Liste. So wie hier.

Habs mal schnell in Photoshop gemacht.

leveler · 30.12.2010

AW: DIV-Tag positionieren

==> intensivstation :: CSS Templates

winne52 · 30.12.2010

AW: DIV-Tag positionieren

<body>
<div id="liste">
<ul>
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
</ul>
</div>
<div id="main">
-
-
-
-
div-container liste vor den container main setzen

Gruß winne52

Keito2903 · 30.12.2010

AW: DIV-Tag positionieren

winne52 schrieb:
<body>
<div id="liste">
<ul>
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
</ul>
</div>
<div id="main">
-
-
-
-
div-container liste vor den container main setzen

Gruß winne52

Dies habe ich bereits gemacht. Aber die Liste klebt am linken Seitenrand.

@Leveler:

Danke für die Templates.

So wie das hier wollte ich nur mit 2 Spalten.

Herr_D · 30.12.2010

Mit dem Streifen oben drüber?

Feinarbeit musst du selbst machen

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

        <head>
                <link href="basic.css" type="text/css" rel="stylesheet" media="all">
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Gamers Meal</title>
                <style type="text/css">
<!--
body {
    background-color:#999;
            }

#outline {
margin: 0px auto;
width:1050px; }

#main {
background-color:#FFF;
width:800px;
margin-left:240px;
}

#maincontent {
    text-align:center;
}

#liste {
    background-color:#0C0;
    width: 230px;
    float:left;
}

#Header {
height:100px;
background:#FF00FF;
/* weitere Angaben für den Kopfbereich reinschreiben */ }


#footer{
    background-color:#666;
    text-align:center;
    }
.klar {
        clear:both; }
-->
</style>
</head>

<body>
<div id="outline">
        <div id="liste">
        <ul>
        <li>Punkt</li>
        <li>Punkt</li>
        </ul>
        </div>
        <div id="main">
                <div id="Header">
                Kopfbereich auch Header genannt</div>
                <div class="klar"></div>
                <div id="maincontent">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
                <div id="footer">
                2010</div>
        </div>
        </div>
</body>

</html>

JannisL · 30.12.2010

AW: DIV-Tag positionieren

Keito2903 schrieb:
So wie das hier wollte ich nur mit 2 Spalten.

Dann nimm doch einfach eine Spalte weg. Und schau dir mal LittleBoxes an und arbeite mit und nicht nur lesen. Und als Anfänger nach jeder Veränderung den Vorschau-Knopf drücken, damit man direkt sieht, was man geändert hat.

Keito2903 · 30.12.2010

AW: DIV-Tag positionieren

Herr_D schrieb:

Feinarbeit musst du selbst machen

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

        <head>
                <link href="basic.css" type="text/css" rel="stylesheet" media="all">
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Gamers Meal</title>
                <style type="text/css">
<!--
body {
    background-color:#999;
            }

#outline {
margin: 0px auto;
width:1050px; }

#main {
background-color:#FFF;
width:800px;
margin-left:240px;
}

#maincontent {
    text-align:center;
}

#liste {
    background-color:#0C0;
    width: 230px;
    float:left;
}

#Header {
height:100px;
background:#FF00FF;
/* weitere Angaben für den Kopfbereich reinschreiben */ }


#footer{
    background-color:#666;
    text-align:center;
    }
.klar {
        clear:both; }
-->
</style>
</head>

<body>
<div id="outline">
        <div id="liste">
        <ul>
        <li>Punkt</li>
        <li>Punkt</li>
        </ul>
        </div>
        <div id="main">
                <div id="Header">
                Kopfbereich auch Header genannt</div>
                <div class="klar"></div>
                <div id="maincontent">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
                <div id="footer">
                2010</div>
        </div>
        </div>
</body>

</html>

Danke genau so wollte ich es von der Struktur^^

Danke noch mal an Alle.

JannisL · 30.12.2010

AW: DIV-Tag positionieren

auch wenn du glaub ich nicht meinst gelesen hast, bitte

Wenn du noch bisschen Praxis haben willst: Webmaster Kurs - lernen Websites zu erstellen, warten und pflegen
Mit Video´s! Leicht und verständlich.

Keito2903 · 30.12.2010

AW: DIV-Tag positionieren

JannisL schrieb:
auch wenn du glaub ich nicht meinst gelesen hast, bitte
Wenn du noch bisschen Praxis haben willst: Webmaster Kurs - lernen Websites zu erstellen, warten und pflegen
Mit Video´s! Leicht und verständlich.

Doch deins habe ich schon gelesen ^^

Ich habe bereits Galileo Design einstieg in CSS aber dieser Typ erklärt etwas eigen

Danke nochmal.