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

Abstanz zwischen Navigation und div-Containter

Mario348 schrieb:
Also der Footer soll links und rechts den gleichen Abstand haben wie der Content...

Ich verstehe leider nicht ganz, wie der Abstand des Contents zu Stande kommt, bzw. wie der festgelegt ist...
Zum Vergrößern anklicken....

Hallo Mario,

Dir fehlen Grundlagen: schau Dich auf http://www.css4you.de/ und auf
http://www.positioniseverything.net/ um, probiere aus usw.

Um zu sehen, welche Größe die Elemente haben, gib ihnen Hintergrundfarben...

Dein Wrapper hat eine Breite von 100%, das heißt, er ist so breit wie Dein
Browserfenster. Dein Content hat eine Breite von 739px und margin:auto;,
das bewirkt, dass der Abstand rechts und links zu den entsprechenden
Rändern von Wrapper gleich ist.

Dein Footer hat eine Breite von 100% - wie breit ist er dann?

Mario348 schrieb:
Ich habe jetz mal einen kleinen Abstand genommen und der wird nur auf der linken Seite sichtbar, obwohl ich 2 Angaben geschrieben habe...

Zudem sollte der Content bis an den Footer heranreichen, da probe ich schon lange ohne Erfolg.
Zum Vergrößern anklicken....

Jetzt überleg Dir erstmal, wie Du die Breite Deines Footer angibst, anschließend
spielst Du da mit margin (ich denke, Du findest alles, was Du dafür wissen musst,
in diesem Thread).

Dann räumst Du Dein Stylesheet auf (das hab ich Dir jetzt schon mindestens
zweimal empfohlen) - vorher werde ich mir nicht die Mühe machen, danach zu
suchen, warum der Wrapper nicht bis nach unten geht (nur dann könnte eine
Höhenangabe bei Content etwas bringen)...

Grüße
Bernhard
 
Also die Breite habe ich schon mal und margin habe ich gleich wie beim Content auf margin: 0 auto;

Trotzdem klebt der Footer noch am linken Rand.
 
Mario348 schrieb:
Also die Breite habe ich schon mal und margin habe ich gleich wie beim Content auf margin: 0 auto;

Trotzdem klebt der Footer noch am linken Rand.
Zum Vergrößern anklicken....

Hallo Mario,

ja, ich hab position übersehen (fixed ist übrigens nicht gut, weil das der IE6 nicht kennt)...

Räum mal Dein Stylesheet und Deinen HTML-Quelltext auf, dann schaue ich mir morgen
in Ruhe an, was wir da machen...

Was mir gerade noch auffällt: Content hat rechts und links ein padding, das musst Du
dem Footer auch geben, damit die Breite tatsächlich gleich ist.

Grüße
Bernhard
 
Also das CSS ist bereinigt, das problem mit position:fixed für den IE habe ich mit einem JavaScript gelöst.

Zwar ist muss dann JavaScript aktiviert sein, andere Lösungen verursachen jedoch invalides CSS...


Ich habe das Script in die index.php eingefügt, dann gilt es doch für alle Seiten oder?
Oder muss ich es in jeder Seite verlinken?
 
Mario348 schrieb:
Also das CSS ist bereinigt, das problem mit position:fixed für den IE habe ich mit einem JavaScript gelöst.

Zwar ist muss dann JavaScript aktiviert sein, andere Lösungen verursachen jedoch invalides CSS...

Ich habe das Script in die index.php eingefügt, dann gilt es doch für alle Seiten oder?
Oder muss ich es in jeder Seite verlinken?
Zum Vergrößern anklicken....

Hallo Mario,

so, wie ich das sehe includest Du Deine Inhalte in die index.php, dann sollte das funktionieren.
allerdings solltest Du das Script auslagern und über Conditional Comments hinzuladen, damit
es die Browser, die es nicht brauchen, gar nicht erst bekommen.

Aber eins nach dem anderen: Sorry, Dein CSS schaut immer noch aus...

Den Universal-Selector stellst Du ganz an den Anfang:
Code: 
* {
padding:0;
margin:0;
}
danach machst du mit body in einer sinnvollen Reihenfolge weiter.

Momentan kommt ziemlich weit oben h1, viel weiter unten nochmal, p ebenfalls.
Wie willst Du da den Überblick behalten?

Schreib alle IDs und alle Klassen klein, damit vermeidest Du unnötige Fehler!

Im Quelltext steht:
Code: 
<div id="Navigation">
In Deinen Stylesheets ist es mal groß und mal klein geschrieben (kommt in der style.css
und in der oben.css vor => auch das ist eine potenzielle Fehlerquelle!)

Code: 
body {
color: #FFFFFF;
font-weight: bold;
background-color: #A0A0A0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: left;
text-align: center;
}
Was denn nun: links oder zentriert?

usw.

Zu Deinem Footer: wenn der fixed sein soll, dann brauchst Du ein zusätzliches Element
(das gab es eventuell schon mal: da könnte das div herkommen, das Du zu viel schließt).

Ich würde ein p innerhalb von Footer einfügen und das CSS so ändern:
Code: 
#footer {
position:fixed;
bottom:0;
width:100%;
line-height:1.5em;
text-align:center;
background:transparent;
}
#footer p {
padding:0 10px;
width:739px;
margin:0 auto;
line-height:1.5em;
text-align:center;
background:#111111;
}
Hab's nicht getestet, müsste aber funktionieren

Grüße
Bernhard
 
Genial danke, funktioniert!

Das mit dem JavaScript habe ich so gemacht, wie du es mir empfohlen hast, Google sei Dank!

Also mache mich mal an die Optimierung des CSS.


Aber die Herstellung der Navigation hat für mich oberste Priorität, denn die funktioniert ja nicht und ich weiss nicht, weshalb.

Habe ja eigendlich da nichts geändert, nur der Code für den Banner...
 
Durch das position:relative; in #wrapper ist die Navigation verdeckt. Streiche deshalb das position komplett (also in #wrapper) und das Problem ist gelöst.

Gruß thuemmy
 
Danke, die Navigation funktioniert wieder.


Das CSS habe ich neu strukturiert, ist jetzt aus meiner Sicht sinnvoll.


Wie kann ich denn machen, dass der Content bis an den Footer heranreicht?

Das müsste ja Bildschirmhöhe - Höhe Footer sein...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben