zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden position : relative

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.04.2013, 19:42
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.06.2006
Beiträge: 622
Rico wird schon bald berühmt werden
Standard position : relative

Hallo

ich habe ein 3-Spalten Layout nach Alistapart - In Search of the Holy Grail · An A List Apart Article konstruiert. Das Grundmuster in HTML ist ;

Code:
<div id="header"></div> enthält Bilder für einen Slider, absolut positioniert.
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>
CSS Grundmuster von Alistapart:
Code:
body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
Genau nach diesem Muster habe ich das 3-Spalten-Layout aufgebaut. Dass alles innerhalb des Containers relativ positioniert ist, kann ich noch nachvollziehen. Die relativen Positionen habe ich mit top: (n)px; platziert.

Warum aber der footer offensichtlich auch rel. positioniert zu sein scheint, ist mir absolut unerklärlich. Ausserdem gibt es in versch. Browsern abweichende Darstellungen. FF 20 stellt das Layout anders dar, als IE10, Chrome, Opera, Safari.

Jemand eine Idee zum rel. pos. des footers?

Danke und Gruss
Rico
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.04.2013, 19:59
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Rico Beitrag anzeigen
ich habe ein 3-Spalten Layout nach Alistapart - [url=http://alistapart.com/article/holygrail]
Der Artikel ist 7 Jahre alt, entspricht ungefähr Rauchzeichen zu eMail.
Zitat:
Zitat von Rico Beitrag anzeigen
Die relativen Positionen habe ich mit top: (n)px; platziert.
Wo?


... Hör auf mit sinnlosem positionieren, der nächste der die Seite anschaut hat eh 'ne andere Auflösung.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.04.2013, 20:11
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von Rico Beitrag anzeigen

Warum aber der footer offensichtlich auch rel. positioniert zu sein scheint, ist mir absolut unerklärlich.
position: relative; für #footer taucht erst ab dem optionalen Equal-height columns auf. Davon würde ich eh die Finger lassen. Siehe den Warnhinweis auf position is everything. Die Lösungen, die du dazu vielleicht finden wirst, funktionieren in modernen Browsern teilweise nicht mehr.
__________________
MfG
Jens

Geändert von plastiko (24.04.2013 um 20:30 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 24.04.2013, 21:06
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.06.2006
Beiträge: 622
Rico wird schon bald berühmt werden
Standard

Zitat:
... Hör auf mit sinnlosem positionieren, der nächste der die Seite anschaut hat eh 'ne andere Auflösung.
Und wie soll ich deiner Meinung nach Text und Linkleisten über den Bildern positionieren. Wie Eingangs erwähnt habe ich einen Slider eingebaut und über den Bildern sollen die Objekte platziert werden.

Gruss
Rico
Mit Zitat antworten
  #5 (permalink)  
Alt 24.04.2013, 21:12
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.06.2006
Beiträge: 622
Rico wird schon bald berühmt werden
Standard

Zitat:
Zitat von plastiko Beitrag anzeigen
position: relative; für #footer taucht erst ab dem optionalen Equal-height columns auf. Davon würde ich eh die Finger lassen. Siehe den Warnhinweis auf position is everything. Die Lösungen, die du dazu vielleicht finden wirst, funktionieren in modernen Browsern teilweise nicht mehr.
Der footer soll ja eben nicht rel. pos. sein. Die Frage war, warum bei der Konstruktion von Alistapart er scheinbar nicht ausgenommen ist. Oder es handelt sich um einen eigenen Programmfehler.

Gruss
Rico
Mit Zitat antworten
  #6 (permalink)  
Alt 24.04.2013, 23:30
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Ich verstehe deine Beschreibung nicht.
In deinem css gibt es kein position: relative; für #footer. Was meinst du mit scheinbar?
Du weißt doch wie das hier geht.
__________________
MfG
Jens

Geändert von plastiko (24.04.2013 um 23:45 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 25.04.2013, 01:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.06.2006
Beiträge: 622
Rico wird schon bald berühmt werden
Standard

Zitat:
Zitat von plastiko Beitrag anzeigen
Ich verstehe deine Beschreibung nicht.
In deinem css gibt es kein position: relative; für #footer. Was meinst du mit scheinbar?
Es ist nicht mein CSS, sondern wie ich ganz deutlich geschrieben habe, ein Muster aus dem Artikel von Alistapart. Und "scheinbar" heisst, dass der footer in den content hineinragt. Es kann also ein Problem sein mit der Vorgehensweise von Alistapart mit dem Model oder es ist bei mir ein Programmfehler.

Ich habe das Problem mit einem Trick umschifft (unschön!) und betrachte die Frage als erledigt.

Gruss
Rico
Mit Zitat antworten
Antwort

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
Div-Anordnung unterschiedlich - Warum? AndMei CSS 2 15.12.2010 21:22
div-höhe? - Hauptcontainer über ganze Seite will nicht... AndMei CSS 5 13.12.2010 14:43
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 14:30
Was übersehe ich? Psyclown CSS 2 19.10.2008 13:00
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 14:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:15 Uhr.