zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionierung von 3 Elementen links-zentriert-rechts

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.07.2011, 18:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.07.2011
Beiträge: 32
ceeweemedia befindet sich auf einem aufstrebenden Ast
Beitrag 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>
und dazu die CSS-File:
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;
}
Dies ist ja eine ziemliche Div-suppe
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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.07.2011, 18:50
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.823
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.07.2011, 19:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.07.2011
Beiträge: 32
ceeweemedia befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gato Beitrag anzeigen
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.
Vielen Dank,
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:
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.
Was meinst du mit Nachfahrenselektor?

Grüße

Geändert von ceeweemedia (23.07.2011 um 19:29 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 23.07.2011, 19:35
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.823
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von ceeweemedia Beitrag anzeigen
Tabelle - Check
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:
Zitat von ceeweemedia Beitrag anzeigen
Jedoch haben jetzt die linken Listenelemente einen zu großen Abstand, obwohl nichts per CSS deklariert ist....
Das ist normal. Für alle Elemente gibt es eine Standarddarstellung. Immerhin muss ein Dokument auch alle Informationen wiedergeben können, wenn es nicht formatiert wurde (das ist bei dir z.B. wegen des Tabellenmissbrauchs nicht möglich.

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.

Zitat:
Zitat von ceeweemedia Beitrag anzeigen
Was meinst du mit Nachfahrenselektor?
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 23.07.2011, 19:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.07.2011
Beiträge: 32
ceeweemedia befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gato Beitrag anzeigen
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.


Das ist normal. Für alle Elemente gibt es eine Standarddarstellung. Immerhin muss ein Dokument auch alle Informationen wiedergeben können, wenn es nicht formatiert wurde (das ist bei dir z.B. wegen des Tabellenmissbrauchs nicht möglich.

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
Ohja jetzt fällts mir auf mit der Tabelle hab gerade blind darauf losgearbeitet... hab ich ja sonst auch nicht gemacht.

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;}
aber danke für den Link!

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ß
Mit Zitat antworten
  #6 (permalink)  
Alt 23.07.2011, 19:55
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.823
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von ceeweemedia Beitrag anzeigen
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
Ja, da gibts noch einiges zu optimieren Ich würde z.B. nicht so stark abweichende Schriftgrade verwenden, das macht die Seite schecht lesbar.

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 23.07.2011, 20:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.07.2011
Beiträge: 32
ceeweemedia befindet sich auf einem aufstrebenden Ast
Standard

Hast ne PM!
Mit Zitat antworten
Antwort

Stichwörter
ausrichtung divs, footer

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:44 Uhr.