Layout ohne Tabellen

**Jache84** · 28.01.2007, 15:04

in Ordung. Dankeschön, hattest recht schwachsinnig den code hier rien zu posten

Also ich habe jetzt einfach mal angefangen und wollte fragen ob das so in ordnung ist und ihr Profis das genauso gemacht hättet?
enefalls als Frage darf man in ein DIV ein zweites DIV machen? seht ihr gleich in meinem Code.

Hier die CSS Datei:

PHP-Code:


/* CSS Document */

body {

  padding: 0px;

  margin: 0px;

}



#top {

    width: 800px;

  height: 122px;

  margin: 0px auto;

    margin-top: 10px;

  background-image: url(img/layout/top.jpg);

}



#inhalt {

  width: 800px;

    height: 600px;

  margin: 0px auto;

    background-image: url(img/layout/inhalt.jpg);

}



#bottom {

width: 800px;

height: 56px;

margin: 0px auto;

background-image: url(img/layout/bottom.jpg);

}



#latest {

width: 207px;

height: 111px;

margin-left: 593px;

background-image: url(img/layout/latest.jpg);

}



#stats {

width: 146px;

height: 56px;

margin-left: 0px;

background-image: url(img/layout/stats.jpg);

}

und hier meine index.php

PHP-Code:


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

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

<title>Ministranten St.Vitus Kriftel</title>

</head>

<body>

<div id="top"></div>

<div id="inhalt"><div id="latest"></div></div>

<div id="bottom"><div id="stats"></div></div>

</body>

</html>

Ist es auch richtig wa sich gemacht habe vom Doctype her? Benutzt man xhtml-strict? oder was anderes?

Würde mich über Kritik und Lob freuen. Denn wenn ich jetzt nochmal alles mache will ich es auch PERFEKT machen

Danke und Gruß
jochen

**gruenspan** · 28.01.2007, 18:25

EDIT:
hab deine fragen vom anderen forum "rübergerettet"

Also ich hab enoch NIE mit DIV´s gearbeitet und bin da absolut jungfräulich.

Nur da?

Wo mus sich denn zum beispiel hinschrieben meinen mormalen text? mache ich dafür auch ein DIV?

nein. Text kommt in ein <p>...</p>

Wie schaffe ich es das die einzelnen DIV´s fest verankert sind?

Mit position:absolute;.

Den wenn ich irgendwo in ein DIV was rein schreibe, z.B. in "Inhalt" verschiebt sich mein "latest"-DIV.

Ist doch klar. Gib mal deinen div's eine border:1px solid black;, dann siehst du was passiert, und wo sie sich befinden.

Und kann ich mehre DIVs ineinadner machen so wie ich es oben gemacht habe?

Natürlich. Aber Vorsicht vor "Div-Suppe".

Wie macht ihr Profis das denn? Denn wenn will ich jetzt absolut RICHTIG machen und "professionell" denn sonst müsste ich mri nicht die arbeit mahcne und alles neu zu erstellen.

Dann arbeite dich durch CSS4you.de, SelfHtml....lernen, lernen, lernen

**Jache84** · 28.01.2007, 18:56

Spitze danke dir!

noch eine frage, ich möchte nur das ich wenigstens schon mal richtig anfange nicht das ich später wieder ärger und irgendwas stimmt nicht.

Habe jetzt hier meine NEUE css:

PHP-Code:


/* CSS Document */

body {

  padding: 0px;

  margin: 0px;

}



#top {

    width: 800px;

  height: 122px;

  margin: 0px auto;

    margin-top: 10px;

  background-image: url(img/layout/top.jpg);

    border:1px solid black;

}



#inhalt {

  width: 800px;

    height: 500px;

  margin: 0px auto;

    background-image: url(img/layout/inhalt.jpg);

    border:1px solid black;

}



#bottom {

width: 800px;

height: 56px;

margin: 0px auto;

background-image: url(img/layout/bottom.jpg);

border:1px solid black;

}



#menu {

position:absolute;

width: 146px;

height: 300px;

margin-left: 0px;

border:1px solid black;

}



#text {

position:absolute;

width: 429px;

height:auto;

margin-top:3px;

margin-left: 152px;

border:1px solid black;

}



#latest {

position:absolute;

width: 207px;

height: 111px;

margin-left: 593px;

background-image: url(img/layout/latest.jpg);

border:1px solid black;

}



#stats {

position:absolute;

width: 146px;

height: 56px;

margin-left: 0px;

background-image: url(img/layout/stats.jpg);

border:1px solid black;

}

und hier meine NEUE test.php

PHP-Code:


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

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

<title>Ministranten St.Vitus Kriftel</title>

</head>

<body>

<div id="top">top</div>

<div id="inhalt">

    <div id="menu">

        menu

    </div>

    <div id="text">

        <p align="justify">

         text in einem &lt;p&gt;

        </p>

        </div>

    <div id="latest">latest</div>

    

</div>

<div id="bottom">

    <div id="stats">stats</div>

</div>

</body>

</html>

ist das soweit in Ordnung oder sind es zuviele DIV´s oder kann man es irgendwie leichter machen? ich denke du weisst oder siehst was ich vor habe.
steht ja immer drinn wo was hin soll. in bottom und inhalt kommt nie was rein. Es wird sich nie was ändern, alles wird dynamisch riengeladen und immer so bleiben AUSSER in das div text. da kommt dann immer meine Seite rein. Sprich ich möchte später alles in einzelne phps packen und dann nur noch includen das ich jede Seite die ich erstelle direkt in dem div "text" erstelle.

Das problem welches ich noch habe ist das das DIV "Inhalt" in der Höhe dynamisch sien muss. das heisst wenn der Text länger ist ale smomentan eingestellt 500px muss das Div automatisch größer werden. alle anderen müssen trotzdem da bleiben wo sie sind, ausser das div "stats" das muss immer links unten sein. wie mache ich das, denn mit height:auto geht es irgendwie nicht.

hier ist die Seite zu sehen wie sie momentan aussieht:

www.ministranten-stvitus.de/minis/test.php

Vielen Dnak nochmal an alle, auch dafür da sihr mir das mit den DIV´s näher gebracht habt. ist ja echt genial, wenn man mal dahinter steigt.

LG
jochen

**wahsaga** · 28.01.2007, 19:08

Original geschrieben von Jache84
noch eine frage, ich möchte nur das ich wenigstens schon mal richtig anfange nicht das ich später wieder ärger und irgendwas stimmt nicht.

Habe jetzt hier meine NEUE css:

Daran "stimmt" nicht, dass du absolute Positionierung verwendest.

Deren Auswirkungen einzuschätzen vermögen Anfänger selten, und sollten deshalb die Finger davon lassen.

Beschäftige dich stattdessen mit float und clear, wenn es darum geht Inhalte nebeneinander zu bekommen.

ist das soweit in Ordnung oder sind es zuviele DIV´s oder kann man es irgendwie leichter machen?

Es sind vor allem "nur Divs" (von dem einen Absatz abgesehen). Ein vernünftig strukturiertes HTML-Dokument enthält normalerweise Überschriften, Absätze, ggf. Listen, etc.

in bottom und inhalt kommt nie was rein.

Glatt gelogen :-) Es steht doch jetzt bereits etwas drin.

<div id="menu">

Das möchte sicherlich eine Liste von Links werden.

Das problem welches ich noch habe ist das das DIV "Inhalt" in der Höhe dynamisch sien muss. das heisst wenn der Text länger ist ale smomentan eingestellt 500px muss das Div automatisch größer werden. alle anderen müssen trotzdem da bleiben wo sie sind, ausser das div "stats" das muss immer links unten sein. wie mache ich das, denn mit height:auto geht es irgendwie nicht.

Siehst du, schon stösst du an die Grenzen absoluter Positionierung.
Vermeide es, sie für die grundlegende Raumaufteilung zu nutzen.

**gruenspan** · 28.01.2007, 19:13

Ich würde auf eine absolute Positionierung verzichten (Ja, auch wenn ich das oben angeführt habe), ... den Rest hat wahsaga gerade beantwortet.

**Jache84** · 28.01.2007, 19:16

was meinst du mit das überschriften, Listen usw in eine Seite gehören. Es ist ja nur mein Grundgerüst und nicht mehr oder weniger. meine eigentliche Seite kommt später in mein div text.
Vieleicht könntest du mir ja mal sagen wie du das machen würdest, du hast ja schließlich wesentlich mehr erfahrung und das will ich ja lernen.

Danke und lieben gruß
Jochen

**wahsaga** · 28.01.2007, 19:23

Original geschrieben von Jache84
was meinst du mit das überschriften, Listen usw in eine Seite gehören. Es ist ja nur mein Grundgerüst und nicht mehr oder weniger. meine eigentliche Seite kommt später in mein div text.

Ich kann noch nicht erkennen, was für Inhalte du eigentlich mit HTML auszeichnen willst - also kann man auch kaum beurteilen, ob das mal was sinnvolles ergeben wird.

Man sollte sich zuerst überlegen, welche Inhalte man eigentlich darstellen möchte, und dann wie man sie auszeichnen möchte.

"Andersherum" anzufangen - "jetzt mach ich erst mal ein Layout, und später schau ich dann was rein kommt" - funktioniert selten bzw. kann kaum zu vernünftigen Ergebnissen führen.

**Jache84** · 28.01.2007, 19:30

hm, okay. also inhalte sollen werden genauso wie auf
www.ministranten-stvitus.de/minis

sprich soll alles identlisch bleiben möchte jetzt nur mit div arbeiten und nicht mher mit tabellen. ebenfalls möchte ich da smenü auf der linken seite in css machen und nicht mehr mit JS.

habe jetzt es mit float hinbekommen, danke für den Tip! wollte eigentlich fragen wie man am besten weitermacht mit den inhalten jetzt, aber da du ja erst mal wissen wolltest was überhaupt für Inhalt rein kommt hab eich das ja erst mal geschrieben. Bin gespannt auf deine idde bzw. Hilfe.
danke dir wahsaga.

Grüße
jochen

**wahsaga** · 28.01.2007, 19:36

Auch auf der genannten Seite sehe ich keine Inhalte, sondern nur ein Seitengerüst drumherum.

**Jache84** · 28.01.2007, 19:41

okay du musst z.B. auf "news" oder "bilder" oder "Gruppenstunden" klicken. dann siehst du jedemenge Inhalt

Sorry

Direktlink:

www.ministranten-stvitus.de/minis/news.php

nicht wundern ist alles mit tabellen (das ist ja mein Problem)

**Jache84** · 28.01.2007, 21:16

okay ist schon etwas spät, aber zu der Frage eben zuvor, oder viel mehr das du mal siehst was ich da rein machen möchte, kurz noch eine Frage.

Ich habe wie gesagt meine css datei und meine test.php.

habe jetzt auch schon mal das Menü ohne DB und nicht dynamisch gemacht, das ist doch in ordung oder?

im IE 7.0 geht alles wunderbar aber im FF funktioniert height:100% im div "inhalt" nicht. wieso?

und warum macht der opera und FF bei einem <p> tag eine leerzeile?

hier erstmal der link: www.ministranten-stvitus.de/minis/test.php

und hier die
css:

PHP-Code:


/* CSS Document */

body {

padding: 0px;

margin: 0px;

text-align:center;

}



#top {

text-align:left;

width: 800px;

height: 122px;

margin: 0px auto;

margin-top: 10px;

background-image: url(img/layout/top.jpg);

}



#inhalt {

text-align:left;

width: 800px;

min-height:100%;

margin: 0px auto;

background-image: url(img/layout/inhalt.jpg);

}



#bottom {

text-align:left;

width: 800px;

height: 56px;

margin: 0px auto;

background-image: url(img/layout/bottom.jpg);

}



#menu {

text-align:left;

float:left;

width: 146px;

height: 300px;

}



#text {

text-align:left;

float:left;

width: 429px;

min-height: 100%;

margin-left: 5px;

margin-top: 2px;

}



#latest {

text-align:left;

float:right;

width: 207px;

height: 111px;

background-image: url(img/layout/latest.jpg);

}



#stats {

text-align:left;

width: 146px;

height: 56px;

margin-left: 0px;

background-image: url(img/layout/stats.jpg);

}



#rollovermenu {

margin-top:-4px;

}

#rollovermenu a{

width:104px;

height:18px;

background-image:url(img/menu/button_blue.jpg);

background-repeat:no-repeat;

margin-left:11px;

margin-top:-2px;

padding-left:16px;

padding-top:2px;

text-decoration:none;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size: 9px;

color:#000000;

display:block;

}



#rollovermenu a:hover{

width:104px;

height:18px;

background-image:url(img/menu/button_orange.jpg);

background-repeat:no-repeat;

margin-left:11px;

margin-top:-2px;

padding-left:16px;

padding-top:2px;

text-decoration:none;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size: 9px;

color:#000000;

display:block;

}

hier meine test.php

PHP-Code:


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

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

<title>Ministranten St.Vitus Kriftel</title>

</head>

<body>

    <div id="top"></div>

    <div id="inhalt">

        <div id="menu">

            <img src="img/menu/menu_1_1.jpg" alt="menu_1_1"><img src="img/menu/menu_1_2.jpg" alt="menu_1_2"><img src="img/menu/menu_1_3.jpg" alt="menu_1_3">

            <div id="rollovermenu">    

                <a href="news.php">News</a>

                <a href="minigl.php">Mini-GL</a>

                <a href="gruppenstunden.php">Gruppenstunden</a>

                <a href="gruppenleiter.php">Gruppenleiter</a>

            </div>

        </div>

        <div id="text">

            <p>hallohallo</p>

        </div>

        <div id="latest">

            latest

        </div>

    </div>

    <div id="bottom">

        <div id="stats"></div>

    </div>

</body>

</html>

Danke schon mal. grüße
jochen

**wahsaga** · 28.01.2007, 21:27

Original geschrieben von Jache84
im IE 7.0 geht alles wunderbar aber im FF funktioniert height:100% im div "inhalt" nicht. wieso?

Ein Thema, welches wir schon oft genug hatten ... Stichwort Höhe der Vorfahrenelemente.

und warum macht der opera und FF bei einem <p> tag eine leerzeile?

Weil sie in ihren Default-Stylesheets Default-Abstände dafür definiert haben. Wenn dir diese nicht gefallen, überschreibe sie durch eigene Angaben. (Auch kein neues Thema ...)

OffTopic:
Ich persönlich habe keine große Lust, jetzt schon wieder für den nächsten CSS-Anfänger sämtliche Details hier durchzukauen ...
Es gibt zahlreiche gute Ressourcen im WWW - ein wenig mehr Beschäftigung damit vor dem Fragen wäre wünschenswert.

**Jache84** · 28.01.2007, 21:45

okay tschuldigung. Aber ich habe kein vorfahrenelement. mein div "inhalt" welches dynamisch die größe haben soll ist mein einziges.

**wahsaga** · 28.01.2007, 22:33

Original geschrieben von Jache84
Aber ich habe kein vorfahrenelement.

Hast du doch, zum Geier noch mal ... hättest du nur mal nach diesem wirklich billigen Stichwort gesucht, dann wäre dir das auch schon erklärt worden.

Layout ohne Tabellen