zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionierung der 6 DIVs mit den absoluten und fixen Bereichen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.09.2013, 10:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.09.2013
Beiträge: 2
MusYa befindet sich auf einem aufstrebenden Ast
Standard Positionierung der 6 DIVs mit den absoluten und fixen Bereichen

Hallo zusammen,

ich versuche mir eine Seite zu basteln und habe ich folgendes Problem mit der Positionierung der Divs.



Ich versuche nur in main-Bereich eine Scrollleiste zu anzeigen und deswegen habe ich diesen Bereich fixiert. Aber gleichzeitig möchte ich auch den restlichen Bildschirm-Bereich ausnutzen. Genau da bekomme ich ein Problem. Sobald ich width:100% nutze, rutscht die Scrollleiste 170px aus dem sichtbaren Bereich und kann nicht gesehen werden. Die Lösung die Bereite mit calc zu berechnen hilft auch nicht, da ich ie8 unterstützen muss.

Kann man mit reinem CSS so einen Struktur bilden?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.09.2013, 10:55
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallöchen,

den inflationären Gebrauch von position:fixed und position:absolute sollte man bei der Gestaltung eines Layouts weitestgehend vermeiden. Hier mal ein Beispiel, wie man mit dem Einsatz von Prozentwerten ein solches Layout flexibel aufbauen könnte:

- Flexibles Layout mit Prozentwerten

Durch den gezielten Einsatz von margin und padding könntest du Elemente wie die Kopfzeile auch relativ problemlos mit einer festen Höhe ausstatten. Auch kannst du mittels Media Queries die Prozentwerte, je nach Bildschirmgröße, variieren. Bspw. macht es bei einem großen Viewport durchaus Sinn, die Navigation ein wenig schmäler ausfallen zu lassen und das gesamte Layout zu zentrieren. Aber damit du heute noch was lernst, darfst du das natürlich selbst machen

Viele Grüße,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint

Geändert von lottikarotti (27.09.2013 um 11:20 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.09.2013, 13:19
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Noch ein Beispiel stu nicholls | CSS PLaY | cross browser fixed header/footer/left column layout full height scrolling
Die HTML und CSS Angaben finden sich dazu hier -> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #4 (permalink)  
Alt 27.09.2013, 13:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.09.2013
Beiträge: 2
MusYa befindet sich auf einem aufstrebenden Ast
Standard

Hallo nochmals,

Danke für eure schnelle Antwort.

@lottikarotti: Nach deiner Empfehlung und deinem Beispiel konnte ich bisschen voran kommen. Ich konnte jetzt einen fixen Navigationsbereich erstellen und den Rest der Seite verwenden (x-Achse). Das gleiche möchte ich auch für die y-Achse.
Also : 1. Header fixe Höhe, 2. Header fixe Höhe und Footer fixe höhe und den mittleren Bereich dynamisch. Ich habe bisschen rum probiert, aber war leider erfolgslos. :/

http://jsfiddle.net/XhcF8/3/

Hier ein Beispiel mit feste Größe. Damit klappt alles wunderbar. Aber wenn ich statt "height:200px;", "height:80%;" oder sogar "height:10%" nehmen klappts´nicht mehr. Was kann ich da noch tun?


@explanator: Die Beispiele habe ich auch gefunden. Aber leider entspricht nicht ganz, was ich machen möchte. Bei denen befindet sich Scrollleiste auf die ganze y-Achse. Aber gescrollt wird nur in bestimmten Bereich.

Geändert von MusYa (27.09.2013 um 13:44 Uhr)
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
Problem mit Positionierung von div's Alfred CSS 2 09.08.2010 19:59
Layoutfrage mit absoluten DIVs charlie CSS 10 28.08.2009 15:51
Mehrere Divs übereinander ohne absolute positionierung? Cu Chullain CSS 2 05.11.2008 01:06
Seitenlayout mit fixen Bereichen? carly CSS 3 09.10.2006 14:41
Browser-Problem bei Positionierung von DIVs mickropixel CSS 3 20.09.2004 16:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:22 Uhr.