zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout - Boxen zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.01.2012, 23:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2009
Beiträge: 20
cssnoobi befindet sich auf einem aufstrebenden Ast
Standard Layout - Boxen zentrieren

Hallo Leute,

ich möchte den Header, das gelbe Div links sowie das dunkelblaue Div fixiert haben. Bisher habe ich nur der gelben Box ein "position: fixed" gegeben, da es mir das Layout zerschießt, wenn ich es für den Header und der blauen Box vergebe. Könnt ihr mir hier bitte helfen?

Danke für eure Hilfe im Voraus!

Geändert von cssnoobi (22.01.2012 um 14:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.01.2012, 05:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Hi cssnoobi

leider sind Code-Auszüge wenig hilfreich, besser ist es immer die Seite irgendwo hoch zu laden, damit alle die gleiche Basis haben und alle Elemente der Seite sehen.

Als erstes muss ich deine Selektoren bemängeln. Eine Id ist immer eindeutig, da sie nur 1x pro Seite vorkommen darf, somit ist das div davor überflüssig. Auch das div#main vor der Id (#headline) und den Klassen solltest du weglassen.

Dann solltest du dir dringend noch einmal bei SELFHTML den Abschnitt über Positionierung durchlesen. Oder noch besser lese gleich ein ganzes HTML und CSS Tutorial.


Nun zu deiner konkreten Frage, ob wir dir helfen können. Leider muss ich diese Frag verneinen, weil ich weder weiß wie deine Seite aussehen soll, noch was du mit zerschießen meinst. Du willst Boxen (Divs) fixieren, soweit habe ich es verstanden, aber wo (siehe dazu den Link oben zu SELFHTML)? Bei position:fixed; sind Angaben nötig wo auf der Seite das Element erscheinen soll, deshalb "zerschießt" es dir wohl auch das Layout.


Zu deiner zweiten Frage fällt mir auf, dass es auch hier an Grundlagenwissen fehlt. Divs gehen von Haus aus über die gesamte Breite des Elternelements. Wenn du also nur eine min-width angibst, wirst du sie nicht nebeneinander positionieren können. Also musst du zusätzlich noch eine max-width definieren, ich könnte mir vorstellen, dass sich dafür eine Angabe von 50% eignet.


Mein Tipp:
Suche dir ein gutes Tutorial (z.B. Little Boxes) und lerne erstmal die HTML und CSS Grundlagen bevor du eine Seite irgendwie zusammen bastelst.


Gruß
Webcoder
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.01.2012, 09:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2009
Beiträge: 20
cssnoobi befindet sich auf einem aufstrebenden Ast
Standard

Ich habe ja extra den HTML-Code dazu gepostet, damit ich die Seite nicht irgendwo hochladen muss. Mehr gibt es bei der Seite bisher nicht.

Die Elemente habe ich jetzt fix bekommen und auch richtig positioniert. Habe aber noch ein kleines Problem dabei, wobei ich nicht weiß wie ich es umsetzen soll. Das Grüne Div (Content) verläuft beim Scrollen nach oben unter den fixierten Elementen hinaus. Das soll natürlich nicht so sein. Könnt ihr mir dazu einen Tipp geben? Hier mein aktualisierter Code:

Geändert von cssnoobi (22.01.2012 um 14:00 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 21.01.2012, 11:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

Zitat:
Mehr gibt es bei der Seite bisher nicht.
So funktioniert das nicht. Da fehlt ja noch das komplette HTML-Grundgerüst und auch die css-Datei ist nicht eingebunden. Das kann nicht funktionieren. Da kann ich mich Webcoder nur anschließen

Zitat:
Oder noch besser lese gleich ein ganzes HTML und CSS Tutorial.
Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 21.01.2012, 11:27
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von cssnoobi Beitrag anzeigen
Ich habe ja extra den HTML-Code dazu gepostet, damit ich die Seite nicht irgendwo hochladen muss.
warum sollten wir aus deinen Codeschnipseln erst mal langtmig ne Testsite zusammenbauen?
Glaubst du irgendwer hat da Zeit und Lust zu? Nur weil du zu faul bist einen Testcase online zu stellen??
Sach mal gehts noch?

Ein Link zum Problem erhöht die Zahl der Hilfswilligen i.d.R. ganz erheblich!
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #6 (permalink)  
Alt 21.01.2012, 11:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2009
Beiträge: 20
cssnoobi befindet sich auf einem aufstrebenden Ast
Standard

wenn du mir sagst wo ich es hochladen kann, ich hab momentan kein webspace zur verfügung
Mit Zitat antworten
  #7 (permalink)  
Alt 21.01.2012, 11:46
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von cssnoobi Beitrag anzeigen
wenn du mir sagst wo ich es hochladen kann, ich hab momentan kein webspace zur verfügung
Tante google gibt über freehoster Auskunft!!
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #8 (permalink)  
Alt 21.01.2012, 11:57
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von cssnoobi Beitrag anzeigen
Ich habe ja extra den HTML-Code dazu gepostet, damit ich die Seite nicht irgendwo hochladen muss. Mehr gibt es bei der Seite bisher nicht.
Achso, du gibst kein Doctype an, nutzt nicht die Tags html, head und body, es gibt keine weiteren Kopfdaten wo das CSS eingebunden wird?

Genau deshalb soll man die Seite irgendwo hochladen, damit alle das sehen was du siehst und nicht jeder einen eigenen Testcase erstellen muss.


Zitat:
Zitat von cssnoobi Beitrag anzeigen
So wie die Seite jetzt aussieht, soll das Layout auch mit "position: fixed" ausschauen. Wenn man "position: fixed" dem Header und der Headline hinzufügt, wird die Position von den anderen Elementen verändert, das meine ich mit zerschießen. Ich habe schon verschiedene Möglichkeiten mit "position" auch für die anderen Elemente ausprobiert, aber bekomme es nicht hin. Deswegen suche ich ja hier nach Hilfe.

Welche Angaben meinst du denn, die bei "position" noch zusätzlich nötig sind?
Hast du dir den Link zu SELFHTML im ersten Post überhaupt durchgelesen?

Wenn JA, frage ich mich was du nicht verstanden hast, oder besser, was davon hast du überhaupt verstanden?
Zitat:
Zitat von SELFHTML
fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.
Quelle

Also ist es logisch, dass dir das Layout zerschossen wird, weil alle Divs wie im Zitat zu lesen am Viewport beginnen. Gibst du den Viewport nicht an, beginnen alle direkt hintereinander aufgeführten Divs am gleichen Viewport.

Sicherlich klingt auch diese Antwort wie Chinesisch für dich, darum ja auch der Tipp zu den Grundlagen. Ich will dir ja gerne helfen, jedoch nicht deine Arbeit machen. Wenn du eine Website erstellen willst, muss du lernen wie es geht und nicht die Website von anderen erstellen lassen.


Zitat:
Zitat von cssnoobi Beitrag anzeigen
Und wie sieht das bei meiner zweiten Frage mit einer Tabelle anstatt des Divs aus?
Klasse, damit startest du beim Webdesign direkt durch, in die 90er Jahre des letzten Jahrhunderts.

Um einfach 2 Divs nebeneinander zu positionieren benötigt man keine Tabelle, man muss nur wissen wie es geht. Also gehe nach zurück zu mein ersten Post und arbeite das Tutorial durch, so bekommst du Antworten auf alle deine Fragen.

Ich weiß, es wäre dir lieber, jemand hier im Forum baut dir Schritt für Schritt die Seite nach deinen Vorstellungen zusammen. Wo möglich wird dir dabei noch erklärt wie und warum welche HTML-Elemente und CSS-Eigenschaften genutzt werden. Dann kannst du eine standardkonforme Seite als dein Machwerk präsentieren ohne wirklich zu Wissen wie es geht. So läuft es hier jedoch nicht es soll Hilfe zur Selbsthilfe erfolgen, damit du es lernst und nicht beim nächsten Mal zum gleich Problem wieder fragst.
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
  #9 (permalink)  
Alt 21.01.2012, 12:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2009
Beiträge: 20
cssnoobi befindet sich auf einem aufstrebenden Ast
Standard

Beim Scrollen verläuft die grüne und orange box (main) noch unter den Header nach oben. Ich kann es schlecht beschreiben was ich jetzt noch genau will. Diese Bereiche sollen ins leere verlaufen, sodass auch beim Scrollen der obere Teil des Divs an dem blauen Div grenzt.

Geändert von cssnoobi (22.01.2012 um 14:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.01.2012, 12:41
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von cssnoobi Beitrag anzeigen
Beim Scrollen verläuft die grüne und orange box (main) noch unter den Header nach oben. Ich kann es schlecht beschreiben was ich jetzt noch genau will. Diese Bereiche sollen ins leere verlaufen, sodass auch beim Scrollen der obere Teil des Divs an dem blauen Div grenzt.
Damit dieser Eindruck entsteht, musst du dem gesamten Bereich oberhalb des grünen Divs eine Hintergrundfarbe verpassen. Und auch dann passiert technisch nichts anderes als jetzt, es sieht eben nur anders aus.


Zitat:
Zitat von cssnoobi Beitrag anzeigen
Zur zweiten Frage - ich hatte nie vor eine Tabelle durch ein Div zu ersetzen!
Nein, das habe ich auch nirgends geschrieben!
Du wolltest es genau andersherum machen, statt 2 nebeneinander liegenden Divs eine Tabelle dafür einsetzen und sowas sollte spätestens seit CSS 2.1 passé sein.
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
div dynamisch vergrößern, div fixieren, div positionieren

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
Layout & Absolutes Zentrieren Innocentus (X)HTML 2 08.11.2010 21:26
3 Boxen zentrieren in einem Wrapper zappodrom Site- und Layoutcheck 1 25.07.2010 21:32
Layout asymetrisch zentrieren swsg CSS 7 05.08.2009 01:15
Layout zentrieren und ein paar Kleinigkeiten sfd CSS 8 01.10.2008 19:46
zwei boxen im verhaeltnis zueinander zentrieren earworms CSS 12 17.08.2006 18:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:23 Uhr.