Seite 1 von 1

Schlichter Footer

Verfasst: 29.12.2011, 18:22
von aBanDon
Hi, ich suche en schlichtes Footer Design ohne aufwändige Grafiken usw...
Praktisch nur um weiterführende Links vorzustellen und der internen Verlinkung willen.

Ich habe schon einige Footer gesehen die schön untergliedert waren und einzelne Themengebiete nur mit einem schlichten Balken trennten. Nur wenn man gezielt nach solchen Seiten sucht finde man natürliche keine...

Bsp:

Thema 1. Thema 2. Thema 3....
| Link | | Link | | Link |
| Link | | Link | | Link |
| Link | | Link | | Link |
| Link | | Link |
| Link |
| Link |

Kennt ihr vllt ein paar Websites die solche Footers haben?

Verfasst:
von

Hochwertiger Linkaufbau bei ABAKUS:
  • Google-konformer Linkaufbau
  • nachhaltiges Ranking
  • Linkbuilding Angebote zu fairen Preisen
  • internationale Backlinks
Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

Verfasst: 29.12.2011, 19:07
von Melegrian
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.

Verfasst: 29.12.2011, 19:36
von aBanDon
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.

Verfasst:
von
Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:
  • einzigartige Texte
  • suchmaschinenoptimierte Inhalte
  • eine sinnvolle Content-Strategie
  • Beratung und Umsetzung
Jetzt anfragen: 0511 / 300325-0

Verfasst: 29.12.2011, 20:24
von Melegrian
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>

Verfasst: 30.12.2011, 00:47
von aBanDon
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.

Verfasst: 30.12.2011, 08:16
von Melegrian
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.

Verfasst: 30.12.2011, 12:25
von Melegrian
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.

Verfasst: 30.12.2011, 12:57
von aBanDon
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.

Verfasst: 30.12.2011, 13:11
von Melegrian
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.

Verfasst: 30.12.2011, 15:06
von Capstone
Hol Dir mal dringend Firebug, wenn Du Schwierigkeiten hast, die Übersicht über Deine Stylesheets zu behalten.

Verfasst: 01.01.2012, 22:14
von aBanDon
Frohes Neues euch allen! :D

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. :)