|
|||
Positionierung von 3 Elementen links-zentriert-rechts
Guten Tag,
ich möchte den Footer in 3 gleich große Bereiche einteilen, indem links die Social Media Leiste, Mittig nochmal eine Hauptnavigation(wegen JavaScript Menü im header) und rechts einen Vermerk. im Moment hab ich diesen HTML-Code Code:
<footer> <div id="footerleft"> <p>Wenn ihnen die Seite gefällt, empfehlen Sie diese doch weiter!</p> <div id="fb"></div> <div id="twitter"></div> <div id="studivz"></div> <div id="myspace"></div> <div id="google"></div> <div id="fav"></div> </div> <div id="footercenter" class="submenu"> <ul id="nav" role="navigation"> <li><a href="../index.html">Home</a> | </li> <li><a href="../lehrskripte.html">Lehrskripte</a> | </li> <li><a href="../wissen.html">Wissen</a> | </li> <li><a href="../steckbrief.html">Steckbrief</a> | </li> <li><a href="../kontakt.php">Kontakt</a> </li> </ul> </div> <div id="footerright" role="contentinfo"> Diese Website wurde im Rahmen einer Bachelorarbeit an der Hochschule Landshut von <a href="http://www.ceeweemedia.de">Christian Wagner</a> entworfen. </div> </footer> Code:
footer { padding-top:1em; padding-left: 1em; padding-right: 1em; clear: both; min-height: 4em; text-align: center; background: #7792ce; border-top: thin #000080 ridge; margin-bottom: 3em; border-bottom: 2px solid #ffffff; } footer ul { margin-right:30px; } footer li { display:inline; list-style-type:none; } #footerleft { float: left; width: 33%; min-height: 7em; font-size:xx-small; color: #ffffff; } #footercenter { float: left; width: 33%; min-height: 3em; } #footerright { float: left; width: 33%; min-height: 3em; font-size:xx-small; color: #ffffff; } Kann mir jemand erklären oder ein Stichwort geben, wie ich das sauberer lösen kann? Danke im Voraus! Grüße edit: zu sehen hier Geändert von ceeweemedia (23.07.2011 um 18:36 Uhr) |
Sponsored Links |
|
|||
Den linken Abschnitt ebenfalls als Liste organisieren.
Die drei Abschnitte al Tabellenzelle (display: table-cell;) darstellen. Außerdem: Meta-Angabe zu content-type als erstes Kindelement von head einfügen, die 4 Stylesheets in einer Datei zusammenfassen, Fehler korrigeren. Und verwende doch nicht für jedes Element eine eigene Klasse. h1 kommt z.B. nur einmal vor, und für zahlreiche andere Elemente reicht ein Nachfahrenselektor.
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
|
|||
Zitat:
Linker Abschnitt -> Liste - Check Tabelle - Check Meta-Angabe - Check Fehler - Check Jedoch haben jetzt die linken Listenelemente einen zu großen Abstand, obwohl nichts per CSS deklariert ist.... Edit: Hat sich erledigt, danke mein fehler, bei den icons war die width mit angegeben^^ Zitat:
Grüße Geändert von ceeweemedia (23.07.2011 um 19:29 Uhr) |
|
|||
Nein, leider kompletter Fehlschlag. Ich sagte, du sollst die Elemente wie eine Tabelle formatieren. Stattdessen hast du eine Tabelle dazu missbraucht, Inhalte zu formatieren. Stelle das bitte ab, denn es ist nicht sinnvoll.
Zitat:
Diese Standardabstände kannst du mit CSS natürlich nach deinen belieben verändern. margin und padding für ul- und li-Elemente sind hilfreich. Oh, oh, oh, da fehlt aber Grundlagenwissen. Mit einem Selektor kannst du nicht nur ein Element mit einer bestimmten Klasse herauspicken, sondern Elemente auch anhand verschiedener Eigenschaften formatieren. Selektoren bei SELFHTML
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
|
|||
Zitat:
Abstände haben sich erledigt. war die width der buttons falsch gewählt das mit dem display:table-cell werde ich mir noch genauer ansehen. Bin ja noch ein Anfänger. Ja Grundlagen kenne ich eigentlich, konnte nur mit dem Wort "Nachfahrenselektor" nichts anfangen. hab ich auch hier benutzt: Code:
footer ul {margin-right:30px;} footer li {display:inline; list-style-type:none;} footer p{font-size:x-small; color: white;} Darüber wäre ich warscheinlich noch gestolpert. Bin gerade am Quelltext aufräumen und optimieren. Kannst dir mal den Quelltext einer Unterseite ansehen, dann weisst was ich meine Danke! Gruß |
|
|||
Zitat:
Darf man Fragen welches Gebiet/Thema die B-Arbeit umfasst?
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Stichwörter |
ausrichtung divs, footer |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
navigationszeile bleibt immer links :-( rest der seite ist zentriert | BigR | CSS | 2 | 26.10.2009 13:01 |
Links und rechts eine Schattenleiste, die sich automatisch an Körper(div) anpasst? | landau66 | CSS | 6 | 12.09.2009 14:01 |
komische Verschiebung - wo liegt das Problem? | Muckel | (X)HTML | 5 | 03.01.2009 18:26 |
Positionierung unten rechts | sumone | CSS | 6 | 18.09.2004 22:11 |