Div-Layer... oder doch nicht?

kia007 · 05.01.2009

Hey,
ich hab folgendes Problem:

Naja, so ist es, wie ich es hinbekommen möchte... aber klappt nicht.
Ich wollte dabei auch Div-layer benutzen, weil ich endlich mal von diesen blöden Tabellendesigns wegkommen wollte.
Ok, also wälzte ich mich durch sämtliche Tutorials (auch das hier auf dieser Seite) aber irgendwie hat mich keins zum Ziel gebracht.
Entweder wurde das GANZE Design nicht angezeigt, sobald ich 4 divs besaß oder es war alles verschoben...
Naja, das ganze hab ich aus stiller Verzweiflung dann gelöscht.

Nun suche ich irgendwie nur irgendeinen Denkansatz. In der Lage das umzusetzen wär ich ja schon... und wenn nicht, meld ich mich halt hier noch mal

Also, um auf dem Punkt zu kommen...
Divs? Wenn ja, WIE muss es aufgebaut werden?
oder
doch lieber KEINE Divs?

Vielen Vielen Dank im Vorraus,
Sassi

Zeiflex · 05.01.2009

AW: Div-Layer... oder doch nicht?

Also ich würde das auf jeden fall mit divs machen.
Soll der Contentbereich denn so groß blaiben und nen scrollbalken dran, oder soll der nach unten hin längerwerden. Bei dem 2. würde sich der Footer dann ja uach weiter nach unten verschieben. Wenn du mir das sagst, kann ich dir das mal kurz basteln

mfg
Zeiflex

kia007 · 05.01.2009

AW: Div-Layer... oder doch nicht?

Hey!
Contentbereich soll ohne scrollbalken länger werden, d.h. den footer immer weiter nach unten verschieben.

ich hoffe das war verständlich oO

leohh · 05.01.2009

AW: Div-Layer... oder doch nicht?

Ein CSS-Layout, wuerde viele Vorteile mitsichbringen und wuerde deinen Code nicht unnoetig aufblaehen.

kia007 schrieb:
Hey!
Contentbereich soll ohne scrollbalken länger werden, d.h. den footer immer weiter nach unten verschieben.

ich hoffe das war verständlich oO

Dann gibst du deinem Container keine Hoehe mit und setzt noch ein sauberes reset rein.
Oder willst du ein grobes Beispiel dafuer haben?

kia007 · 05.01.2009

AW: Div-Layer... oder doch nicht?

Gerade das war das Problem, dadurch hat sich alles nur noch verschoben und pfui.
Ein grobes Beispiel wär schon hilfreich.

MFG
Sassi

leohh · 05.01.2009

AW: Div-Layer... oder doch nicht?

Schnellschuss ohne jedwaigen Anspruch auf Vollstaendigkeit oder Korrektheit.

HTML:

<!-- CSS Stylesheet -->
<style type="text/css">
    * { margin: 0; padding: 0; }
    body { background: #cdc9c9 url(hintergrundgrafik.jpg) no-repeat top center; }
    #wrapper { width: 960px; margin:0 auto; background: #000; text-align:center } /*eine der diversen abgerundeten Ecken WAs benutzen*/
    h1 { float: left; width: XXpx; } /* xx = Breite */
    h2 { margin-left: XXpx } /* Abstaende xx */
    #main { width: /*selber vergeben*/px; margin: 0 auto; text-align: left/center/right; }
    #footer {}     
</style>
<!-- CSS Stylesheet -->
</head>
<body>

<div id="wrapper">
    <h1 id="logo">content.</h1>
    <h2 id="ling">kannichnichterkennen.de</h2>
    <div id="content">
       <p>Lorem ipsum dolor sit amet</p>
       [usw.]
    </div>
    <div id="footer">Der footer passt sich der Hoehe des Content-Kontainers an, der sich wiederum die Hoehe aus einer sauber gesetzten line-height, der Absatzelemente zieht. Du hast hier ein generelles Reset, dadurch verschwinden voreingestellte Werte, der jeweilligen Elemente bezueglich ihrer margin u. padding Werte (Abstaende).</div>
    </div>
</div>

Wie bekannt sein sollte, fuehren viele Wege nach Rom, dies waere zwar nicht der komplette Weg dorthin aber zumindest schon mal ein Wegweiser. Du muesstest deine obige Grafik -bzw. deine in der Grafik befindlichen Teilinhalte evtl. noch etwas genauer beschreiben.

Viel Spass noch.

/Edit

Gerade das war das Problem, dadurch hat sich alles nur noch verschoben und pfui.
Ein grobes Beispiel wär schon hilfreich.

Es waere schon mal hilfreich, wenn du uns deinen bissherigen Code geben koenntest, denn darauf laesst sich schliesslich aufbauen und man koennte so besseres 'bugtracing' betreiben.

kia007 · 08.01.2009

AW: Div-Layer... oder doch nicht?

Hey,
ich bin grad noch in der Schule. Deswegen werde ich erst so gegen 20.00 ein Bild posten können.
Ich glaube, dass meine erklärung ein wenig falsch verstanden wurde.
Das Layout, was in meinem 1. Post gepostet wurde, ist fertig.
Ich möchte quasi dieses Bild einbinden und dieses dann mit Div layern "bestücken".
Der Hintergrund des contentbereichs soll immer länger werden und außerden soll der Footer zentriert sein.
Über dem Content Bereich werden noch die einzelnen Menüpunkte anklickbat sein (auch in der Grafik enthalten, aber da kenne ich die Umsetzung)
Der Footer wird am Ende der ganzen seite zu sehen sein.
Außerdem soll das ganze Design mittig zentriert werden, und darum dann ein grauer Hintergrund.

Ich bedanke mich aber erstmal für die Hilfe die bis zu diesem Zeitpunkt gegeben wurde.
und ich sage schonmal vilen Dank für weitere Hilfestellungen.

Grüße,
Sassi

The-COMP · 08.01.2009

AW: Div-Layer... oder doch nicht?

Ich weiß nicht ob ich's richtig versteh.. du willst für deinen Contentbreich einen DIV Layer erstellen, welcher eine fixe Breite hat, sich aber in der Höhe verändert?

Dann gib dem Content layer doch einfach eine fixe Breite (z.B. width="500px") u. nimm als Hintergrundbild deine 1px hohe Grafik, welche sich dann vertikal wiederholt (background-repeat :repeat-y)...

kia007 · 08.01.2009

AW: Div-Layer... oder doch nicht?

Hey, das ist ja gar nicht das große Problem.
Mein Problem liegt darin, dass wenn ich 1. das ganze zentriere, es
- gar nicht die Einstellungen annimmt, bzw. prinzipiell nicht
- alles verschoben wird
- oder es nicht mittig liegt

Ich hab alles zu dem Thema gegooglet, aber irgendwie haut nichts richtig hin oO

Aber ja, hast du prinzipiell richtig verstanden. Für den Content Bereich ein eigener Div-Layer, der sich ind er Höhe verändert und die Menüpunkte werden durch diese komischen Hotspots (?) oder so verlinkt. Vielleicht auch irgendwie anders (slices oder sowas).

Damit du dir es in etwa vorstellen kannst.

mackone · 09.01.2009

AW: Div-Layer... oder doch nicht?

Also ich habe meine website nur mit DIV tags gemacht und habe "eigentlich" keine Probleme mit Zentrierung, das eigentlich bezieht sich auf den IE6 der meine tags teilweise nicht richtig anzeigt, ansonsten gehts. Da hat ich mehr Probleme mit tabels

Kannst dir meine Seite ja mal anschauen wenn du willst der link müsste unten zu sehen sein! Ansonsten hier: !

puur · 10.01.2009

AW: Div-Layer... oder doch nicht?

hmm @ Mackone dein layout ist ja ansich nicht schlecht aber die grafiken sehen etwas komisch aus anscheinend haste da das jpg. format mit zuwenig Qualität erstellt..

@ POST ERSTELLER:

um ein layout zu zentrieren hilft doch meist margin-left: auto; margin-right: auto; z.B. so denk ich:

HTML:

<html>
..
<div style="width: 500px; min-height: 700px; margin-left: auto; margin-right: auto;">
    <div id="header">
        <img src="./images/Bildname.jpg" />
    </div>
    <div id="content" style="width: 350px; min-height: 550px; background: #000;">
        Inhalt
    </div>
</div>
<div id="footer"></div>
...
</html>

Grob so würd ich es machen..
Um den ganzen drum herum dann noch Hintergrund zu geben kannst du auch dem HTML- / Bodytag via CSS eine Hintergrund grafik & Farbe geben.

ich98 · 10.01.2009

AW: Div-Layer... oder doch nicht?

@kia007: Wie wäre es denn, wenn du uns mal deinen Quelltext anstatt dieser Grafik zeigst?

Ansätze? Dafür gibt es Grundlagen-Artikel: Cascading Style Sheets { Konzepte und Grundlegendes }