[CrazyLexx]

Hallo zusammen,

habe bei meiner Webseite in der CSS Datei einen Hintergrund angelegt und möchte nun am Ende jeder Seite einen Footer einbringen, der die Hintergrundgrafik überdeckt und die Seite nach unten hin abschließt. Wie stellt ich das am einfachsten an?

Habe es (ohne Erfolg) mal versucht mit:

Zitat

footer {
background:url(.../img/page/page_bottom.gif) bottom center transparent no-repeat;
padding-bottom:10px;
margin-bottom:30px;
}

und dann in der Seite mit:

Zitat

<hr style="display:none"/>

<div id="footer">
TEST FOOTER
</div>

[amalbhalbe]

gib in der css mal die width / height des hintergrund bildes mit an, soweit ich weiß kann nu dann das bild angezeigt werden

footer {
background:url(.../img/page/page_bottom.gif) bottom center transparent no-repeat;
width:"bildbreite";
height:"bildhoehe";
background-repeat:no-repeat;
padding-bottom:10px;
margin-bottom:30px;
}

sofern ichs richtig verstanden hab was du willst

[CrazyLexx]

Hm, habe mal die Größenangaben mit ins CSS aufgenommen und die Grafik wird dennoch nicht angezeigt. Wie muss ich den footer denn in der eigentlichen HTML Datei aufrufen?

Damit wir von der gleichen Sache reden:

Möchte den Hintergrund der Seite unten mit dieser Grafik überdecken und somit den Content Bereich optisch vom Rahmen abtrennen:

[amalbhalbe]

du musst innerhalb deines kompletten containers die footer ganz normal aufrufen

also z.b

nur mal als Struktur

<div id="container">
<div id="header">
</div><!-- header -->
<div id="content">
</div><!-- content -->
<div id="footer">
</div><!-- footer -->
</div><!-- container -->


und eigentlich sollte das wirklich ganz easy funktionieren indem du die genaußen Maße des Bildes in die css einträgst, background-repeat:no-repeat stellst


ein auszug von einer meiner styles wo das ganz problemlos funzt :


#content {
margin:0px auto; **/ Autozentrierung der Ebene *//
width:775px; **/ Bildweite **/
height:455px; **/ Bildhoehe **/
background-image:url(../gfx/content_bg.jpg);
background-repeat:no-repeat;
}

das funzt problemlos .. .

[CrazyLexx]

Hm, habe das auch ausprobiert und auf der Seite (Link) wird die Grafik immer noch nicht angezeigt.

Habe folgenden Code verwendet:

#footer_image {
	height:30px;
	width:795px;
	background:url(../img/page/page_bottom.gif) bottom center transparent no-repeat;
	background-repeat:no-repeat;
	padding-bottom:10px;
	margin-bottom:30px;
}

#footer {
	width:800px;
	margin-right:auto;
	margin-left:auto !important; /* stupid ie... */
	margin-left:1px;
	margin-top:0px;
	padding:0px;
}

Im HTML Code verwende ich am Ende:

  <!-- FOOTER -->
<div id="footer">
<div id="footer_image">
</div>
</div>

[amalbhalbe]

wieso so kompliziert ... wenn dein hauptcontainer zentriert ist, wird der footer sowieso zentriert in jedem browser - das heisst jetz nach deinem prinzip

<div id="footer_image">
</div>

das drumherum brauchste nich, und dann muss das auch funktionieren das einzige was mir noch einfallen würde wäre das dein footer zu groß ist bzw. der footer breiter ist als der hauptcontainer ....

padding-bottom raus


hab mir die site angeschaut, kann nicht funktionieren du hast ja nur div id="footer" offen und da wird kein background-image definiert, also einfach - in den footer den bg image samt height und width und dann sollte das klappen

Dieser Beitrag wurde von amalbhalbe bearbeitet: 09. August 2007 - 13:10

[CrazyLexx]

Ah danke, habe es jetzt hinbekommen. Aber mal eine allgemeine Frage: Wir der div mit dem Hintergrund eigentlich immer am unteren Bildschirmrand angezeigt? Also auch, wenn mal auf einer Seite der eigentliche Inhalt auf weniger als eine Bildschirmseite passt und keine Scrollbalken angezeigt werden? Oder wie kann ich das ggf. erzwingen?

EDIT: Kannst du mir vielleicht sagen, woher dieser seltsame Rand recht von dem Flashapplet kommt? Das Flashapplet hat genau wie die umschließende Tabelle eine Breite von 450px und eigentlich müsste dann die zweite Spalte rechts daneben direkt bündig an die linke Spalte (mit dem Applet und "News") anschließen.

Dieser Beitrag wurde von CrazyLexx bearbeitet: 09. August 2007 - 14:06

[amalbhalbe]

ne die div in diesem Fall wird einfach so weit unten angezeigt, wie sie von den vorhergehenden divs ausgerichtet wird, also würde dein content jetzt nur bis zur hälfte gehen wäre der footer bei der hälfte aber noch immer am ende der site .. logisch halt ...


erzwingen kann man das ... aber mit ein paar tricks, wenn ich zuhause bin post ich das eben mal

welchen Rand meinst du? screenshot mit der stelle markiert wäre nett .. gibt ja viele ränder dort

bis nachher dann

[CrazyLexx]

Habe die Fläche mal mit der Maus markiert, damit man den Freiraum besser sehen kann. Eigentlich befindet sich auf der Startseite im Contentbereich eine Tabelle mit zwei Reihen, von denen die erste eine feste Breits von 450px hat (also genau die Breite des Flash-Applets). Die zweite Spalte soll dann den Rest von den 770px bekommen und linksbündig an die erste Spalte anschließen. Da es sich bei der verlinkten Seite um eine alte E3 Seite handelt, fehlen leider für die zweite Spalte die entsprechenden Inhalte, die eigentlich per php dort eingefügt werden. Aber man kann am Header "Neuste Download" aber trotzdem ganz gut erkennen, dass die zweite Spalte nicht direkt neben dem Flash-Applet anfängt.

EDIT: Habe zum Test auch mal eine Grafik als Header eingebunden. Leider wird die nicht ganz oben am Bildschirmrand angezeigt... Jemand eine Idee?

Dieser Beitrag wurde von CrazyLexx bearbeitet: 09. August 2007 - 15:50

[amalbhalbe]

so sieht das bei mir im FF aus .. also eigentlich geht die Flash bis ganz nach drüben nur der restliche linke inhalt is kürzer?

... ich würde dir sowieso empfehlen die tabllen zu streichen und einfach ne div ein zu setzen..

wegen dem abstand nach oben setz in der css mal ganz am anfang folgenden wert:

*{ margin : 0; padding:0;}

dann sollte das ganz oben abschließen ...

[CrazyLexx]

amalbhalbe sagte:

so sieht das bei mir im FF aus .. also eigentlich geht die Flash bis ganz nach drüben nur der restliche linke inhalt is kürzer?

... ich würde dir sowieso empfehlen die tabllen zu streichen und einfach ne div ein zu setzen..

Seltsam, im IE ist die linke Tabellen Spalte genau so lang wie das Flash-Applet. Aber ich habe doch auch eigentlich die Breite der Spalte ebenfalls auf die 460px beschränkt. Oder habe ich da irgendwo einen Fehler gemacht?!

Ich würde auch gerne die Tabellen streichen, aber das ist leider so nicht möglich. Fast alle Unterseiten die per php in das Template eingefügt werden haben selbst <table> Angaben und ich kann die eigentlich nur in das neue Layout übernehmen, wenn ich sie in einer Tabelle mit fester Breite einblende.

amalbhalbe sagte:

wegen dem abstand nach oben setz in der css mal ganz am anfang folgenden wert:

*{ margin : 0; padding:0;}

dann sollte das ganz oben abschließen ...

Prima, habe ich eingefügt und nun ist das oben schön bündig mit dem Browserfenster. ABER nachdem ich die Zeile oben in die CSS Datei aufgenommen habe, ist im FF der mittlere Bereich nicht mehr zentriert...

[amalbhalbe]

wie hast du den mitleren bereich zentriert über welchen befehl?

normalerweiße lautet der wie folgt

margin:0px auto;

dann wird links/rechts auto zentriert browserübergreifend ich denke also du hast eine eigene Variante genommen die durch das setzen der Abstände auf 0 zerstört wird .... versuche es mal mit dem margin auto dann sollte alles hinhauen ...


wegen den templates.. nunja du siehst ja es ist so mehraufwand der nicht nötig wäre - also einmal alles direkt umstellen und danach freude haben

ps: hab mir den code nachmal angesehen, zentrierst du den content auch via tabellen? wenn ja ändere wenigstens das - ich nehme hierfür immer #content bei bedarf auch noch #content_include

weil wie du was dann reinladest in die div is ja egal ob mit tabellen oder net - aber der container drum herum sollte zumindest via css zentriert werden

Dieser Beitrag wurde von amalbhalbe bearbeitet: 09. August 2007 - 17:37

[CrazyLexx]

Ja, ist nicht wirklich spaßig, eine Webseite umzugestalten, die fast 5 Jahre alt ist und die man nicht selbst erstellt hat...

Habe es soweit hinbekommen, wobei ich nun erneut ein neues Problem habe (lustig, diese Kettenreaktionen):

Möchte die <div> der Navigationsleiste direkt unterhalt der <div> für den Header anschließen lassen. Im IE wird dies momentan auch korrekt angezeigt - nur im FF ist da ein Zwischenraum zusehenen:

[amalbhalbe]

ja diese kettenreaktion is normal bei CSS ... css ist bis heute nicht wirklich "standardisiert" ( soll mir jetzt keiner mit den W3C richtlinien kommen, es steht nicht umsonst in Anführungszeichen ) - wenn man etwas macht und es funktioniert, macht nochmal das gleiche gehts auf einmal nicht mehr - dann machts mans nochmal gehts wieder .. das is css keiner weiß warum



ähm .. laut deinem code rufst du folgendes auf :

<div id="hauptmenu" class="solidblockmenu">

.. in deiner CSS gibts aber keine div die hauptmenu heisst? könnte der Grund sein :S ?


achja noch ein schweres vergehen du verwendest html 4.01 als DTD

benutzt aber die Syntac von xhtml 1.0 strict ... das musst unbedingt ändern das kann einige schwere Fehler verursachen .. also die DTD neu machen nicht die syntax ändern

Dieser Beitrag wurde von amalbhalbe bearbeitet: 09. August 2007 - 18:25

[CrazyLexx]

Zitat (amalbhalbe: 09.08.2007, 19:18)

ähm .. laut deinem code rufst du folgendes auf :

<div id="hauptmenu" class="solidblockmenu">

.. in deiner CSS gibts aber keine div die hauptmenu heisst? könnte der Grund sein :S ?

Hm, stimmt auffallend Soll ich dann einfach den <div> code entfernen oder im CSS einen DIV erstellen? Welchen Code würde ich denn im CSS benötigen, damit der neue DIV von der Navigationsleiste direkt bündig an den DIV vom Header anschließt?

Zitat (amalbhalbe: 09.08.2007, 19:18)

achja noch ein schweres vergehen du verwendest html 4.01 als DTD
benutzt aber die Syntac von xhtml 1.0 strict ... das musst unbedingt ändern das kann einige schwere Fehler verursachen .. also die DTD neu machen nicht die syntax ändern

Du meinst diese DTD?

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