• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Idiot braucht Hilfe - Css positionierung, überlappung - Komme alleine nicht weiter

R

ReZnoRRonZer

Neues Mitglied
Ich möchte gerne eine Webseite über mein Hobby machen und habe mich jetzt durchgefriemelt bis alles halbwegs so aussieht wie es soll. Es gibt aber noch ein paar Kleinigkeiten die ich trotz stundenlangem (mehr als 6 Stunden!!) Trial and Error nicht hinbekomme. Ich habe warscheinlich beim Hauptlayout Fehler gemacht die sich durch alle Instanzen ziehen. Deshalb bitte ich dich mal einen kurzen Blick darauf zu werfen. Ich komme wirklich nicht alleine weiter :(


Was geändert werden muss:


1. Der Footer soll immer unterhalb des Contents sein, aber nur sichtbar wenn man ganz nach unten scrolled. Momentan ist er dauerhaft sichtbar
2. das div "main-left" überlappt alles, es soll aber eigentlich alles nach unten schieben so das der Footer und die Boxen (left 1-3 und right) sichtbar sind
3. das Navigationsmenü soll sich über die vollen 960px erstrecken

hn6tz4zf.jpg

Ich konnte das Projekt hier auf html.de nicht hochladen (Geht scheinbar nicht mit Chrome)

Hier sind die Dateien als zip: File-Upload.net - tests.zip

Kann mir bitte jemand von euch weiterhelfen?
 
Hier ein paar Antworten, immer vorausgesetzt, du meinst es ernst ...
  • In deinem HTML ist ein header definiert, der in deinem Design nicht auftaucht. Einfachste Lösung: auch im HTML löschen.
  • Du hast ein div, dem gibst du die Klasse wrapper. Das ist insofern irreführend, als so üblicherweise das div bezeichnet wird, das alle Seiteninhalte bündelt. Damit definiertst du quasi die Fläche, die du innerhalb des body nutzen willst. Dem kannst du dann auch eine entsprechende id geben (id="wrapper"). Diesem Div gibst du deine Seitenbreite (960px) mit, die taucht anschließend nicht mehr im css auf.
Code: 
#wrapper {
    width:960px;
}

  • Innerhalb dieses Wrappers stapelst du die Bereiche die du hast. Einfache Divs, keine besondere Positionierung:
    • Header (falls es den doch gibt)
    • Content (kann auch anders heißen, heißt bei dir bisher wrapper, innerhalb dessen sind später weitere Unterteilungen nötig)
    • Footer
  • Diese drei Bereiche sind jeweils einmalig auf deiner Seite und dürfen wie der wrapper über eine id gestylt werden. Wenn du weißt, wie hoch die Divs sein sollen, gib ihnen eine Höhe. Hängt das vom Inhalt ab, dann nicht.
  • Innerhalb des Content-Bereichs hast du zwei Bereiche: links und rechts. Dafür würde ich jeweils ein Div definieren, denen einen Breite mitgeben und sie jeweils nach links floaten lassen. Innerhalb des linken Bereichs kannst du dann untr deinem Text wieder einen Bereich definieren (kein float, keine Positionierung) in die du deine Boxen baust. Hier ist eine Klasse sinnvoll, etwa der Art:
Code: 
.box {
    border:...;
    float:left;
    margin-right:..px /* Abstand zwischen den Boxen */
    padding: ...px;
    height: ...px;
    width:...px;
}
Die Box rechts unten bekommt man auch hin. Ist aber etwas anspruchsvoller, das kriegen wir dann, wenn der Rest steht, auch hin ...
All in all sähe die Struktur (rein schematisch) etwa so aus:
HTML: 
<html>
    <head>...</head>
    <body>
        <div id="wrapper">
            <div id="head">...</div>
            <div id="navigation">...</div>
            <div id="content">
                <div id="links">
                    <div class="text"></div>
                    <div class="boxen">
                        <div class="box">...</div>
                        <div class="box">...</div>
                        <div class="box">...</div>
                    </div>
                </div>
                <div id="rechts">...</div>
            </div>
            <div id="footer">...</div>
        </div>
    </body>
</html>
Möglicherweise hast du dir ne einfachere Lösung erhofft. Aber dafür ist dein Code zu vermurkst. :-(
 
Danke das du dich meinem Problem an nimmst. Ich konnte dir zwar nicht so ganz folgen aber ich habe zumindest den wrapper aussen herum legen können. Auch bei Boxen habe ich etwas geändert und sie über Margin-Left positioniert.
Komischerweise ist Sidebar-Rechts nun nicht mehr da wo sie hin soll, das Problem mit dem Überlappen besteht immer noch, allerdings liegen jetzt die boxen (left 1-3 und right) hinter dem hauptcontent (left-main) und nicht mehr davor.

Ich bin verzweifelt :D

hier die aktuelle Version:

File-Upload.net - tests2.zip

Und natürlich meine ich das ernst, sonst würd ich mich bestimmt nicht stundenlang an so einen quirks setzen *g*
 
In Anbetracht der Ausführlichkeit meine Anwort wäre es vermulich zielführender, wenn du formulierst, wo du mir nicht folgen kannst, statt das, was du verstanden hast in deinen vermurksten Entwurf dazuzubasteln und das Ergebnis anschließend wieder zu veröffentlichen.
Grundsätzlich (und ohne gerade nochmal in den neuen Stand reingeschaut zu haben) hast du deinen Wrapper, der die Außenabmessung vorgibt, innerhalb dessen stapelst du Divs. Wenn die nicht floaten und du keine Positionierung vornimmst, stapeln die sich automatisch in deinem Wrapper und nutzen automatisch die komplette Breite.
Daher: Fang nochmal von vorne an. Fang oben an. Übernimm die Teile, die funktionieren. Nimm für den Bereich zwischen Navi und Footer ein einfaches Div und fülle es mit Blindtext (hast ja genug). Wenn das soweit läuft, können wir weitersehen.
 
Ich hoffe das ist jetzt alles soweit richtig. Habe alles nach deinen vorgaben geändert und den textinhalt der divs mit dem namen des jeweiligen divs versehen, zur besseren verständlichkeit.

Am besten schaust du dir die aktuelle Version mal kurz an und sagst mir was ich noch ändern muss damit das Layout stimmt, es ist nämlich immer noch zerschossen.

File-Upload.net - tests3.zip
 
Die Struktur ist schon besser, aber:

  • Schmeiß bitte jegliche Art von Position und overflow raus. Im wrapper. Im Footer. Im Header.
  • Durch den Verzicht auf position werden alle Angaben wie left: ..., right: ..., top: ..., bottom:... überflüssig. Bitte rausschmeißen. Benutze stattdessen margin:... oder padding:...
  • Verzichte in deinen CSS-Dateien grundsätzlich auf !imortant. Das kann man benutzen um mal was auszuprobieren. Davon abgesehen ist es schlechter Stil. In deinem Fall ist es dazu noch überflüssig. (Der Sinn davon ist, dass CSS-Angaben, die durch andere Angaben überschrieben werden, wieder mehr Bedeutung bekommen.)
  • Lasse deine rechte Box auch nach links(!) floaten (s.u.).
  • Ein Problem bekommst du durch die Boxen. Da müsstest du dich auf eine Strategie festlegen (ich hab da möglicherweise den Entwurf nicht so verstanden.) (a) Drei Boxen links, eine rechts? oder (b) unter beiden Spalten eine Reihe mit vier Boxen?
    • Am einfachsten ist vermutlich Fall (b). Hier gibt es gerade ein Problem mit dem float. Das float:left sorgt im Prinzip dafür, dass die Kisten nicht mehr von oben nach unten gestaplet werden, sondern von links nach rechts. Alles was nach den floatenden Divs kommt, passt sich dem irgendwie an. (Eine Anwendung von float ist es, Text um ein floatendes Objekt drumrumfließen zu lassen.) Verschiebe hierfür #bottombox4 ebenfalls ins Div #boxen.
  • (Grundsätzlich böte sich für die Boxen die Verwendung einer Liste <ul> an, das nur der Vollständigkeit wegen, führt gerade zu weit.)
  • Um nach den floatenden Boxen einen Bereich zu bekommen, der davon unabhängig ist (quasi um eine neue Zeile anzufangen) brauchst du für das nächste Element im CSS ein clear. Clear: left; in deinem Fall. Das gilt für #boxen (wegen der zwei Spalten darüber), außerdem solltest du innerhalb von #boxen ein weiteres (leeres) DIV einfügen, dessen eizige css-Eigenschaft ist clear:left. Hierzu wurde mal die Formel »Wer floatet muss auch clearen« genannt. Ja, so einfach kanns sein.
Anschließend müsste das schon viel besser aussehen ...

Viel Erfolg!
J.
 
Zuletzt bearbeitet:
Ich danke dir für deine Hilfestellung. Ich bin damit zwar nicht zum Ziel gekommen aber ich habe mich viel mit CSS beschäftigt und nach 18 verschwendeten Stunden meiner Lebenszeit festgestellt das Webdesign ein Hurensumpf ist.
 
18 Stunden? :P

Nach 18 Wochen lichten sich die Nebel schon etwas, und nach 18 Monaten weiß man, dass es noch viel zu lernen gibt.
 
Zuletzt bearbeitet:
Tronjer schrieb:
18 Stunden? :P

Nach 18 Wochen lichten sich die Nebel schon etwas, und nach 18 Monaten weiß man, dass es noch viel zu lernen gibt.
Zum Vergrößern anklicken....

Gut gebrüllt! Ich habe eindeutig mehr als 18 Stunden gebraucht, um überhaupt irgendetwas zu begreifen, und dies bevor ich auch nur eine müde Zeile Code geschrieben hatte. Aber gut, ich bin natürlich auch nicht mehr 18!

Spass beiseite: Wenn man keine Zeit investieren will, geht nichts. Dann lässt man das mit Webseiten erstellen eben (oder kauft es sich ein, wenn man das nötige Kleingeld hat).

Lg Xeno
 
Ja, schade eigentlich. Endlich mal ein Anfänger, der es nicht mit Tabellen und Frontpage versucht. Und dann sowas. Aber mit dem Hurensumpf hat er natürlich recht. ;-)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben