Ergebnis 1 bis 8 von 8

Thema: Layout-Problem

  1. #1
    Bandit
    Gast

    Standard Layout-Problem

    Layouten ist einfach nicht mein Ding, vielleicht kann mir hier ja jemand helfen.


    Die Rahmen oben und unten sind 1000px breit und 30px hoch, die Rahmen links und rechts sind jeweils 30px breit. Alle div's haben eigene Hintergrundbilder und der ganze Kram soll zentriert auf der Seite stehen. Mein CSS:
    Code:
    * 
    {
      padding : 0px;
      margin : 0px;
      font-family : Helvetica, Arial, sans-serif;
      color : #31313A;
      font-size : 12px;
      border: 0px;
    }
    #main 
    {
      width : 1000px;
      height: 100%;
      margin : 0 auto;
    }
    #header 
    {
      width : 100%;
      height: 30px;
      margin-top : 30px;
      background-image : url(../images/header.jpg);
      background-repeat: no-repeat;
    }
    #left 
    {
      width : 30px;
      height: 100%;
      margin : 0px;
      background-image : url(../images/left.jpg);
      background-repeat: repeat-y;
      float:left;
    }
    #content 
    {
      width:880px;
      margin-left:30px;
      margin-right:30px;
      z-index:5;
    }
    #right 
    {
      width : 30px;
      height: 100%;
      margin: 0px;
      background-image : url(../images/right.jpg);
      background-repeat: repeat-y;
      float:right;
      z-index:15;
    }
    #bottom 
    {
      width : 100%;
      height: 30px;
      margin-bottom : 30px;
      background-image : url(../images/bottom.jpg);
      background-repeat: no-repeat;
    }
    Wäre nett, wenn mir das jemand korrigieren könnte.

    Danke
    bandit
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ein klassisches Problem
    Du bekommst das mit den Balken links und rechts nicht hin, oder?
    Das Problem ist, dass du die Höhenangabe in Prozent nicht auf floatende Elemente vergeben kannst. Diese befinden sich nicht mehr im normalen Elementfluss, also auf was sollen sich die Prozente beziehen?

    Die einfachste Lösung ist hier die faux-columns Technik: http://www.alistapart.com/articles/fauxcolumns/

    Ansonsten musst du wohl oder übel mit absoluten Positionierungen arbeiten, was meistens ziemlich haarig wird und in Pixelzählerei und "Jedem-Browser-sein-Stylesheet" ausartet.

    Grüße,
    jojo

    Edit: Ich hatte das vor ner Weile auch mal anders gelöst, muss ich nur mal nach suchen

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Du brauchst zunächst eine Basis, auf die sich die 100% height beziehen.
    Deshalb ergänze die CSS um

    Code:
    html, body {height: 100%; width: 100%;}
    Das zweite Problem hat jojo bereits genannt:
    zu den 100% kommen noch die oberen und unteren Querbalken sowie evtl. margins und paddings hinzu, so dass die Seite nach dem CSS-Boxmodell effektiv größer als 100% wird und man deshalb scrollen muss.

    Du könntest den Balken und dem content eine fixe Höhe geben.
    Geändert von sejuma (01.10.2008 um 18:40 Uhr)

  4. #4
    Bandit
    Gast

    Standard

    Das sind dann wieder die Momente, wo man schnell zum Tabellenlayout übergehen möchte.

    Danke, ich werde mal sehen, was ich da mache. Sollte jemand so ein Problem schon gelöst haben, wäre ich für ein Beispiel dankbar.

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Du könntest mal versuchen, dieses Layout zu verwenden:

    http://www.ohne-css.gehts-gar.net/0025.php

    Dann müsstest du eine einheitliche Gesamt-Hintergrundgrafik basteln, indem du linken Balken, Content-Farbe und rechten Blaken in eine Grafik zusammenfügst.
    Diese dann dem #innenwrapper als background-image zuweisen.
    Ggf. kannst du bei der Grafik auch noch die Höhen von header und footer berücksichtigen und sie entsprechend positionieren.

  6. #6
    Bandit
    Gast

    Standard

    Zitat Zitat von sejuma Beitrag anzeigen
    Dann müsstest du eine einheitliche Gesamt-Hintergrundgrafik basteln, indem du linken Balken, Content-Farbe und rechten Blaken in eine Grafik zusammenfügst.
    Darauf wird es wohl hinauslaufen, obwohl ich nicht gerade glücklich damit bin, aber egal.

    Danke

  7. #7
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    wenn ich das richtig sehe, willst du ein normales Dreispaltenlayout mit header und footer, wobei der footer immer unten kleben soll, oder?

    Falls das zutrifft ist die beste Technik dazu sicher Foot Sticker Alt

    width:100%; für body und html ist mit Sicherheit überflüssig.
    z-index wirkt sich nur bei positionierten Elementen (außer position:static; !) aus. Es sollte mit äußerster Vorsicht angewandt werden!
    i.d.R. kann man die Stapelreihenfolge (z-Achse) durch Vergabe von z.B. position:relative; an das richtige Element hinreichend beeinflußen.

    Wichtig ist an dem Beispiel dass der footer eine Höhe bekommt, (der im Quelltext außerhalb von #nonfooter steht) und ein negatives margin-top, das der Höhe des footers entspricht.
    Außerdem muss für den content bei langen Inhalten evtl. ein entsprechendes padding-bottom definiert werden, damit der untere Teil der Inhalte nicht hinter dem footer verschwindet.

    Für gleichlange Spalten wurde ja schon "Faux Columns" angesprochen.

    koslowski

  8. #8
    Bandit
    Gast

    Standard

    Ich habe jetzt den Vorschlag von sejuma übernommen und es passt.

    Danke fürs Lesen und Helfen.

Ähnliche Themen

  1. Layout Problem
    Von Maggi im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 21.09.2007, 18:17
  2. Problem mit Div, Layout, ...???
    Von crusader19 im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 13.04.2007, 19:25
  3. CSS Layout Problem
    Von emonem im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 04.06.2006, 06:36
  4. Layout Problem im HTML Quellcode
    Von Mülla im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 10.12.2005, 21:50
  5. Problem mit CSS-Layout
    Von Dynamix im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 16.12.2004, 10:34

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •