Schlichter Footer

Beitrag von **aBanDon** » 29.12.2011, 18:22

von **Anzeige von ABAKUS** »

Beitrag von **Melegrian** » 29.12.2011, 19:07

Meinst Du etwa so wie auf dieser Seite?

https://www.heise.de/ix/

Habe schon größere bzw. höhere Footer gesehen, weiß jetzt aber auch gerade nicht mehr wo das war. Die Abgrenzungen kannst Du doch selbst einfügen.

Beitrag von **aBanDon** » 29.12.2011, 19:36

Jop sowas habe ich gesucht! Danke.

Haste ne Idee wie ich die Abgrenzungen am besten einfüge? Mir fällt da jetzt nur en Hintergrundbild per CSS eingebunden ein oder en Div mit Border.

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **Melegrian** » 29.12.2011, 20:24

Habe ich jetzt nur ganz schnell zusammengeschustert. Die Abstände musst Du noch abgleichen, da die Verteilung noch nicht ganz gleichmäßig ist. Und unbedingt daran denken, ältere Browser reagieren anders als neuere. Falls da noch irgendetwas unter kommen sollte, in der nächsten Style Class gegebenenfalls clear:both; mit einfügen. Margin ist von Höhe und Breite bei der Verteilung abzuziehen, Ränder ebenso.

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Ein Footer</title>
<style type="text/css">

h1 &#123;text-align&#58; center&#125;
div.footer &#123;height&#58; 142px; width&#58; 960px; border&#58; 1px solid #222222; background-color&#58; #989898; margin-left&#58; auto; margin-right&#58; auto&#125;
div.foot1a &#123;float&#58; left; text-align&#58; left; width&#58; 15%; height&#58; 100px; border-right&#58; 1px solid #ffffff; margin&#58; 20px&#125;
div.foot2b &#123;float&#58; left; text-align&#58; left; width&#58; 16%; height&#58; 100px; margin&#58; 20px&#125;

</style>
</head>

<body>
<h1>Ein Footer</h1>

<div class="footer">
<div class="foot1a">Link <br> Link</div>
<div class="foot1a">Link <br> Link <br> Link <br> Link</div>
<div class="foot1a">Link <br> Link</div>
<div class="foot1a">Link <br> Link</div>
<div class="foot2b">Link <br> Link</div>
</div>
</body>

</html>

Beitrag von **aBanDon** » 30.12.2011, 00:47

Danke für den Code!
Ich habs ma ausprobiert und eingesetzt - sieht leider ( auch angepasst ) nicht so aus wie ich es mir erhofft hatte. Hab auch nochmal ein bissel rumgepastelt bin aber noch net zufrieden. xD

Falls dir beim Surfen en Footer unterkommt der auf o.g. Beschreibung passt - bitte posten! Danke.

Ich versuch noch en ein zwei Ideen umzusetzen - vllt bekomm ich ja noch was gutes hin.

Beitrag von **Melegrian** » 30.12.2011, 08:16

Verstehe jetzt nicht ganz, dass Prinzip ist es und alles andere, wie Farben, Text, Linien, Größe, Verteilung usw. usf. sind doch beliebig anpassbar, so dass Du daraus Dein eigenes Design machen kannst, genauso wie Du es Dir wünschst.

Beitrag von **Melegrian** » 30.12.2011, 12:25

Hier wäre noch einmal ein großer, schöner und zugleich dennoch schlichter Footer:

https://www.mozilla.org/

Den bekommst Du aber mit meinem Beispiel hin, nur um ein Logo musst Du Dich halt selbst kümmern und die Divs ein wenig anders verschachteln.

Beitrag von **aBanDon** » 30.12.2011, 12:57

Moin, das Problem bei deinem Code ist halt das ich den "Text" nicht sehen kann. Es wird lediglich der Background und die Trennbalken angezeigt - das liegt wahrscheinlich an meiner übrigen css und ich hab den Fehler noch nicht gefunden.

Außerdem bin ich mir nicht sicher ob ich die Links alle mit nehm Div verschachteln soll oder doch lieber eine unordered List verwende.

Ich weiß es zu schätzen das du dir die Zeit genommen und die Mühe gemacht den Code aufzusetzen! Ich bin aber immernoch leicht unschlüssig wie ich das am besten in meine Website integriere da z.b. der footer nur 762px breit sein darf aber eine große Menge an Links untergebracht werden soll.

Beitrag von **Melegrian** » 30.12.2011, 13:11

Du kannst ja auf einem Blatt Papier erst skizzieren, da die einzelnen Maße eintragen und die Maße dann in die CSS übernehmen. Würde ich zumindest so machen, verwende dazu dann noch einen Screenshot, um mit einem Grafikprogramm einzelne Maße zu kontrollieren.

Sind die Links als Inhaltsverzeichnis für ein eBook als eine Auflistung von Kapiteln oder so etwas in der Art gedacht? Dann gebe es eventuell noch andere Lösungen.

Beitrag von **Capstone** » 30.12.2011, 15:06

Hol Dir mal dringend Firebug, wenn Du Schwierigkeiten hast, die Übersicht über Deine Stylesheets zu behalten.

Beitrag von **aBanDon** » 01.01.2012, 22:14

Frohes Neues euch allen!

Momentan besteht der Footer aus einer Hintergrundgrafik und einer horizontale unordered List. Das finde ich persönlich nicht so toll und möchte gerne abhielfe durch einen neuen schaffen. Dabei sollte die Breite um die 700px liegen - die Höhe ist vorerst egal.

Im Internet habe ich welche gesehen die unmengen von Links gefasst haben, dezent aussahen und nur mit einem Balken und gewissen Schattierungseffekten für Trennlinien sorgten.

Vorallem schwierig finde ich es den Übergang vom Contentbereich zum Footer zu gestalten.

Derzeit arbeite ich an ein neues Layout für die Seite und muss sagen das es mir bis jetzt wirklich gut gefällt. Deswegen möchte ich beim Footer auch nichts überstürzen.

Firebug habe ich mir vor kurzem zugelegt - bin aber mit dem Programm irgendwie noch nicht richtig warm geworden.