Antworten auf deine Fragen:
Neues Thema erstellen

DIV-Tag positionieren

Keito2903

Aktives Mitglied

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

offline

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>
 
Zuletzt bearbeitet:

cebito

undefined

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... :D
 
Zuletzt bearbeitet:

Keito2903

Aktives Mitglied

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 ;)
 
Zuletzt bearbeitet:

owieortho

Aktives Mitglied

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

Aktives Mitglied

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

00110100 00110010

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...
 
Zuletzt bearbeitet:

Herr_D

offline

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...
 
Zuletzt bearbeitet:

JannisL

Aktives Mitglied

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

Aktives Mitglied

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.
 

winne52

Webmaster

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

Aktives Mitglied

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

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

offline

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>
 
Zuletzt bearbeitet:

Keito2903

Aktives Mitglied

AW: DIV-Tag positionieren

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.612
Beiträge
1.538.343
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben