Abstände passen nicht & bg-Bild in Box positionieren

[jessy]

Hallo!

Ich erstelle gerade ein Layout mittels CSS. Mein Bestreben ist es, dass es flexibel unter verschiedenen Auflösungen dargestellt wird. Deshalb arbeite ich mit Prozentangaben.
Nun sind jedoch die Außenabstände nach oben bei Box3(Marginalspalte) verschieden. Bei einer Auflösung von 1024x768 ist der Abstand so, wie ich ihn haben möchte. Ist die Auflösung jedoch höher, dann wird Box3 über Box1(header) geschoben. Ändere ich nun einfach die Werte, dann stimmt es natürlich bei der anderen Auflösung wieder nicht. Gibt es dazu eine Umgehungsmöglichkeit?

Es gibt direkt auch eine weitere Frage. Ich arbeite auch mit Hintergrundbildern in meinem Layout. Das Gesamthintergrundbild soll sich nun aus einem bg-Bild im body und zwei weiteren bg-Bildern in Box2 und Box3 zu einem zusammenfügen. Optimal wäre es, wenn die Hintergründe noch fixiert wären, d.h. sich nicht bewegen. Fixiere ich aber die bg-Bilder in den Boxen, dann werden sie m.E. nicht in der Box ausgerichtet, sondern im body. Ich habe aber bei meiner Recherche gelesen, dass diese Definitionen auch für Blockelemente erfolgen können, wie divs. Hat eventuell jemand eine Idee, wie dies zu lösen wäre.

Ich danke euch!
Grüßle jessy

[jessy]

Also, die Sache mit dem Hintergrundbildern habe ich anders gelöst. Habe ein zum Teil transparentes Hintergrundbild eingefügt, somit fügt sich das Bild im body dann doch als ein Ganzes zusammen.

Bleibt aber immer noch das Problem mit den Abständen. Weiß da jemand Rat oder ist ein wenig Code von Nöten?

Dank euch!

[Gonzo]

arbeite ich mit Prozentangaben.
Nun sind jedoch die Außenabstände nach oben bei Box3(Marginalspalte) verschieden. Bei einer Auflösung von 1024x768 ist der Abstand so, wie ich ihn haben möchte. Ist die Auflösung jedoch höher, dann wird Box3 über Box1(header) geschoben. Ändere ich nun einfach die Werte, dann stimmt es natürlich bei der anderen Auflösung wieder nicht. Gibt es dazu eine Umgehungsmöglichkeit?

Jein. So wie du es beschrieben hast, ist das Problem grundsätzlich prinzipbedingt durch die relativen Maße. Bei vertikalen Strecken dürfte es allerdings in der überwiegenden Zahl der Fälle nicht nötig sein, sich an die Größe des Browserfensters anzupassen, weil das vertikale Verschieben zum gewohnten Lesefluss gehört.

Ganz im Gegensatz bei zu breiten Seiten: Ein Text, bei dem die Zeilen rechts (oder links) abgeschnitten sind, ist eine mittelschwere Katastrophe, weil der Leser beim Wechsel in die nächste Zeile deren Anfang nicht sofort findet. Aus dem gleichen Grund sind auch Zeitungsseiten in mehrere schmale Spalten unterteilt.

Kurzum, es kommt zwar immer auf den Einzelfall an, aber du solltest dir überlegen, ob es gerade in der Vertikalen wirklich notwendig ist, immer und überall relative Maße zu nutzen (Ausnahme: Schriftgröße, da sind Maße relativ zur vom Benutzer gewählten Schriftgröße IMHO ein Muss).

Fixiere ich aber die bg-Bilder in den Boxen, dann werden sie m.E. nicht in der Box ausgerichtet, sondern im body.

Nein, am Bildschirm (gewissermaßen).

Da du zwei konkrete Probleme hat, wäre es hilfreich, wenn du die betreffende Seite vorzeigen könntest. Ansonsten wirst du nur allgemeines Gestochere bekommen.

[jessy]

Leider kann ich es nich per URL zeigen. Gibt es denn die Möglichkeit hier Bilder hochzuladen? Habe auf die Schnelle nichts in der Richtung gesehen.

Wenn ich die Abstände aber nicht über Prozente mache, wie soll ich dann sicher stellen, dass die Abstände bei verschiedenen Auflösungen noch passen? Ich werd nochmal grundlegend drüber nachdenken. Vielleicht fällt mir ja doch noch eine Lösung ein.

Ich danke dir vielmals!

[Gunther]

Hallo Jessy!

Leider kann ich es nich per URL zeigen.

Hmm ..., erstellst du denn die Seiten nur für den späteren lokalen Gebrauch? Wenn nicht, wo ist das Problem, eine Testdatei mal eben online zu stellen?

Gibt es denn die Möglichkeit hier Bilder hochzuladen? Habe auf die Schnelle nichts in der Richtung gesehen.

Nein, gibt es nicht. Würde auch nicht viel bringen, denn dein Problem liegt ja offensichtlich in deinem HTML-/ CSS-Code und den kann man an einem Bild nicht erkennen. Die relevanten Code-Teile hier zu posten, sollte da schon hilfreicher sein.

Wenn ich die Abstände aber nicht über Prozente mache, wie soll ich dann sicher stellen, dass die Abstände bei verschiedenen Auflösungen noch passen? Ich werd nochmal grundlegend drüber nachdenken. Vielleicht fällt mir ja doch noch eine Lösung ein.

Soweit ich das überhaupt verstanden habe, möchtest du ein fluides, mehrspaltiges Layout realisieren, wo jede Spalte ihr eigenes Hintergrundbild haben soll, die sich aber optisch zu einem Ganzen zusammenfügen?

Nun, man kann bspw. ja auch nur ein BG-Image verwenden (für den Body) und die einzelnen Spalten durchsichtig (transparent) machen. Ansonsten gibt es natürlich immer auch die Möglichkeiten, Hintergrundbilder entsprechend zu positionieren.

Gruß Gunther

[jessy]

Nein, gibt es nicht. Würde auch nicht viel bringen, denn dein Problem liegt ja offensichtlich in deinem HTML-/ CSS-Code und den kann man an einem Bild nicht erkennen. Die relevanten Code-Teile hier zu posten, sollte da schon hilfreicher sein.

Dies habe ich nur als Alternative zur Seite als solches in Erwägung gezogen. Ich geh auf jeden Fall davon aus, dass irgendwas mit den Abständen nicht richtig funzt. Hier mal die drei relvanten Boxen:

#logo {
 width: 20%;
 height: 50px;
 background-image:url(../Bilder/lgth.gif);
 background-repeat: no-repeat;
 margin-right: auto;
 margin-top: 8px;
}

#inhalt {
  float: left;
  width: 35%;
  height: 70%;
  margin-top: 1%;
}

#marginal {
    width: 20%;
    height: 70%;
    margin-left: 58.4%;
    margin-top: -4%;
}

In der Seite sollte es folgendermaßen angeordnet werden, wobei "marginal" auf selber Höhe wie "logo" beginnen soll, aber quasi neben "inhalt" liegt und deshalb in der HTML-Datei nach "inhalt" definiert ist (ich hoffe das ist nachvollziehbar):

logo               marginal

inhalt

Soweit ich das überhaupt verstanden habe, möchtest du ein fluides, mehrspaltiges Layout realisieren, wo jede Spalte ihr eigenes Hintergrundbild haben soll, die sich aber optisch zu einem Ganzen zusammenfügen?

genau richtig! :)
Ich habs vorhin schonmal als Lösung gepostet. Ich habs über ein halbtransparentes png gelöst. Das mit dem positionieren hatte ich auch schon als Ansatz, aber das stimmt dann unter den verschiedenen Auflösungen wieder nicht. Ich denke das ist so die beste Variante.

[Gunther]

Ich grüße dich auch!

Dies habe ich nur als Alternative zur Seite als solches in Erwägung gezogen. Ich geh auf jeden Fall davon aus, dass irgendwas mit den Abständen nicht richtig funzt. Hier mal die drei relvanten Boxen:

#logo {
width: 20%;
height: 50px;
background-image:url(../Bilder/lgth.gif);
background-repeat: no-repeat;
margin-right: auto;
margin-top: 8px;
}

#inhalt {
  float: left;
  width: 35%;
  height: 70%;
  margin-top: 1%;
}

#marginal {
    width: 20%;
    height: 70%;
    margin-left: 58.4%;
    margin-top: -4%;
}

Ist ja schon mal ein Anfang! Also den CSS-Teil hätten wir jetzt. Und wo ist der zugehörige HTML-Code?

In der Seite sollte es folgendermaßen angeordnet werden, wobei "marginal" auf selber Höhe wie "logo" beginnen soll, aber quasi neben "inhalt" liegt und deshalb in der HTML-Datei nach "inhalt" definiert ist (ich hoffe das ist nachvollziehbar):

logo               marginal

inhalt

Also "Logo" und "Inhalt" erschließen sich einem ja noch halbwegs, aber wozu ist "Marginal" da? Warum ist das Logo nicht bspw. in Inhalt enthalten?
Und wenn du schon versuchst, dein Layout hier zu "skizzieren", dann verwende doch bitte auch '-' und '|', also:
 -----------------------------
 | Logo | Header             |
 -----------------------------
 | Menu | Content            |
 |      |                    |
 |      |                    |
 |      |                    |
 |      |                    |
 -----------------------------
 |       Footer              |
 -----------------------------

Gruß Gunther

[jessy]

Uih, uih, uih. Das habe ich vollkommen vergessen. Tut mir echt leid!
Sei wirklich nett gegrüßt!

Ich grüße dich auch!

Ist ja schon mal ein Anfang! Also den CSS-Teil hätten wir jetzt. Und wo ist der zugehörige HTML-Code?

Im HTML-Code werden einfach nacheinander die Boxen mit dem entsprechenden Inhalt aufgerufen (aktuell noch Blindtext):

<div id="header"> ... </div>

<div id="logo"> </div>

<div id="inhalt"> ... </div>

<div id="marginal"> ... </div>

<div id="footer"> ... </div>

Also "Logo" und "Inhalt" erschließen sich einem ja noch halbwegs, aber wozu ist "Marginal" da? Warum ist das Logo nicht bspw. in Inhalt enthalten?
Und wenn du schon versuchst, dein Layout hier zu "skizzieren", dann verwende doch bitte auch '-' und '|', also:

So sieht nun mein Layout aus. Dem Bereich Logo wurde einfach ein eigener Platz zugewiesen. Das ist von der Aufteilung her auch sehr angenehm, weil es die Seite von der Struktur her ein wenig auflockert. Marginal gibt es für Zusatzinfos, weiterführende Links etc. (Danke übrigens für diese Vorlage, habe noch nie etwas in der Art skizziert und habe nun endlich eine Vorstellung, wie soetwas überhaupt gemacht wird :) )
 -----------------------------
 | header                    |
 -----------------------------
 | Logo           | Marginal |
 -----------------|          |
 |                |          |
 | Content        |          |
 |                |          |
 |                |          |
 -----------------------------
 |       Footer              |
 -----------------------------

Ich danke für die nette Unterstützung!
Grüßle jessy

[Gunther]

Hi Jessy!

Ist ja schon mal ein Anfang! Also den CSS-Teil hätten wir jetzt. Und wo ist der zugehörige HTML-Code?
Im HTML-Code werden einfach nacheinander die Boxen mit dem entsprechenden Inhalt aufgerufen (aktuell noch Blindtext):

<div id="header"> ... </div>

<div id="logo"> </div>

<div id="inhalt"> ... </div>

<div id="marginal"> ... </div>

<div id="footer"> ... </div>

So sieht nun mein Layout aus. Dem Bereich Logo wurde einfach ein eigener Platz zugewiesen. Das ist von der Aufteilung her auch sehr angenehm, weil es die Seite von der Struktur her ein wenig auflockert. Marginal gibt es für Zusatzinfos, weiterführende Links etc.

Ich gehe jetzt mal davon aus, dass "Content" = "inhalt" sein soll. Und es fehlen jetzt immer noch die CSS-Angaben (wenn vorhanden) zu header + footer.

Wenn du jetzt mal deine vorhandenen CSS-Angaben in die Skizze einfügst, ergibt sich folgendes:

---

header
Logo
width:20%;
height:50px;
-----------------
Content
float: left;
width:35%;
height:70%;

---

Footer

Alleine daraus müsstest du schon erkennen, dass das so nicht hinhauen kann. Ganz abgesehen von den ganzen Margins, die du noch da reingehauen hast.

Im Grunde ist das ein "klassisches" 2-Spalten Layout mit Header + Footer. Solche Layouts kann man entweder als fixed-width oder als fluides Layout umsetzen.

Ich würde dir prinzipiell folgendes empfehlen:

• Umschließe Inhalt (Content) und Marginal noch mit einem zusätzlichen DIV, um den Footer immer unterhalb zu haben, egal welches der beiden Elemente die größere Höhe hat.
• Packe dein Logo in den Header (dort gehört es imho nämlich hin)

Es gibt unzählige Beispiele im Netz für solche Layouts. Sehr lehrreich (wenn auch für Einsteiger vielleicht etwas schwierig zu verstehen) ist in diesem Zusammenhang auch: Grundlagen für Spaltenlayout mit CSS

Mit deinem jetzigen Ansatz wirst du jedenfalls nicht das erreichen, wovon ich ausgehe, dass du es erreichen möchtest.

Und noch eins: Wozu arbeitest du mit den Höhenangaben? Das ist in aller Regel
1. nicht notwendig und
2. machst du dir einen der größten Vorteile, nämlich dass sich die jeweiligen Elemente in ihrer Höhe dem Inhalt anpassen, zu Nichte. Also verzichte auf explizite Hohenangaben.

Gruß Gunther

[jessy]

Hi Gunther!

Vielen Dank für deine Ausführungen!
Ich habe diverse Dinge, die du angesprochen hast, so noch nie genutzt und finde deine Impulse sehr nützlich :) (auch für meine weitere Arbeit mit CSS).
Ich werde mich dann heute abend näher damit auseinandersetzen und deine Ratschläge und Hinweise einbinden. Ich melde mich zurück, in wie fern es auch immer gelaufen ist.

Viele Grüße und noch einen schönen Tag!
jessy

[jessy]

Hallöchen und vielen Dank für deine Unterstützung!

Also, ich habe jetzt nochmal ergänzt und es ergibt sich Folgendes:
-------------------------------
| header                      |
| height: 100px;              |
| width: 60%;                 |
| border-top:0;(ansonsten 2px)|
-------------------------------
| Logo           | Marginal   |
| width:20%;     | width:20%  |
| height:50px;   | height:70%;|
-----------------| border:2px;|
|                |            |
| Inhalt         |            |
| float: left;   |            |
| width:35%;     |            |
| height:70%;    |            |
| border: 2px;   |            |
|                |            |
-------------------------------
|       Footer                |
|       clear: both;          |
|       width: 60%;           |
|       height: 40px;         |
|       padding-top: 15px;    |
-------------------------------

dazu gibt es noch einen grundlegenden Abstand nach links (margin-left: 20%;) für header, logo, inhalt und footer.

Alleine daraus müsstest du schon erkennen, dass das so nicht hinhauen kann. Ganz abgesehen von den ganzen Margins, die du noch da reingehauen hast.

Das ist mir jetzt leider nicht ganz schlüssig. Warum kann genau kann das nicht hinhauen? Mir ist bewußt, dass logo und inhalt nicht den gleichen Abstand haben. Gibt es noch weitere Gründe? Insgesamt soll die Webseite 60% der zur Verfügung stehenden Fläche einnehmen. Und sind es im Vergleich wirklich so viele margins? Meines Erachtens sind diese doch für die Abstände der Boxen zueinander da. Ließen sich da wirklich noch Einige vermeiden?
Ich habe mit Hilfe eines Buches gearbeitet und wirklich versucht es so "rein" wie möglich umzusetzen (mich quasi Schritt für Schritt vorgearbeitet).

Im Grunde ist das ein "klassisches" 2-Spalten Layout mit Header + Footer. Solche Layouts kann man entweder als fixed-width oder als fluides Layout umsetzen.

Danke für den Hinweis!

• Umschließe Inhalt (Content) und Marginal noch mit einem zusätzlichen DIV, um den Footer immer unterhalb zu haben, egal welches der beiden Elemente die größere Höhe hat.

Ok, das macht für mich auf jeden Fall Sinn.

• Packe dein Logo in den Header (dort gehört es imho nämlich hin)

Wenn ich den Bereich Logo in den header packe, muss ich dort auch wieder Einiges verändern. Auch hier wird dann eine zusätzliche Box unumgänglich werden. Es ist so, dass der header-Bereich anders gestaltet ist. Das Logo liegt quasi auf dem Hintergrund des Browserfensters (sozusagen im body, auch wenn das sicher so nicht richtig formuliert ist). Header, inhalt und marginal sehen vollkommen anders aus (insich aber gleich).

Und noch eins: Wozu arbeitest du mit den Höhenangaben?

Ich habe mit Höhenangaben gearbeitet, damit ich eine Mindesthöhe immer angezeigt bekomme. Das hat allerdings sowieso nicht richtig funktioniert, deswegen stimme ich hier absolut mit dir überein und entferne es.

Ich werde weiter daran arbeiten und versuchen deine Hinweise zu beherzigen und mein Layout zu verbessern. Ich wäre dir allerdings für weitere parallele Hinweise dankbar, die mir noch mehr Aufschluß geben.

Danke und schöne Grüßle!
jessy

[Gunther]

Hallo Jessy!

Also, ich habe jetzt nochmal ergänzt und es ergibt sich Folgendes:

| header                      |
| height: 100px;              |
| width: 60%;                 |

border-top:0;(ansonsten 2px)
Logo
width:20%;
height:50px;
-----------------
Inhalt
float: left;
width:35%;
height:70%;
border: 2px;

---

|       Footer                |
|       clear: both;          |
|       width: 60%;           |
|       height: 40px;         |

padding-top: 15px;

Das Web ist viereckig. Alle erzeugten Boxen sind _immer_ viereckig.
Aus deinen Breitenangaben (width) ergäbe sich (ist auch noch von einigen anderen Faktoren, wie Reihenfolge im Quell-Code abhängig, die ich jetzt nicht kenne) dann vermutlich folgendes Bild (mal angenommen deine oben genannten 'Container' sind DIV-Elemente):

0   10%  20%  30%  40%  50%  60%  70%  80%  90%  100%
+-----------------------------+
|     Header width:60%        |
+-----------------------------+
|  Logo   |
|width:20%|
+---------+------+
|    Inhalt      |
| width:35%      |
+---------+------+
|Marginal |
|width:20%|
+---------+-------------------+
|     Footer width:60%        |
+-----------------------------+

dazu gibt es noch einen grundlegenden Abstand nach links (margin-left: 20%;) für header, logo, inhalt und footer.

Du möchtest deine Seite zentriert angezeigt bekommen?
Dann verwende: margin: 0 auto;
und zwar am besten für einen sog. 'Wrapper', der alle Elemente der Seite umschließt.

Alleine daraus müsstest du schon erkennen, dass das so nicht hinhauen kann. Ganz abgesehen von den ganzen Margins, die du noch da reingehauen hast.
Das ist mir jetzt leider nicht ganz schlüssig. Warum kann genau kann das nicht hinhauen? Mir ist bewußt, dass logo und inhalt nicht den gleichen Abstand haben. Gibt es noch weitere Gründe? Insgesamt soll die Webseite 60% der zur Verfügung stehenden Fläche einnehmen.

Der Grundgedanke ist richtig - deine Umsetzung allerdings nicht.
Warum willst du bspw. jemandem dessen Anzeigebereich im Browserfenster "nur" 800px breit ist, deine Seite nur auf 480px Breite anzeigen?
Die gängige Methode ist die Eigenschaften max-width und min-width zu verwenden (für den Wrapper) - allerdings haben die IEs < 7 damit Probleme. Hier hilft dir Google weiter: max-width for ie.

• Packe dein Logo in den Header (dort gehört es imho nämlich hin)
  Wenn ich den Bereich Logo in den header packe, muss ich dort auch wieder Einiges verändern. Auch hier wird dann eine zusätzliche Box unumgänglich werden. Es ist so, dass der header-Bereich anders gestaltet ist. Das Logo liegt quasi auf dem Hintergrund des Browserfensters (sozusagen im body, auch wenn das sicher so nicht richtig formuliert ist). Header, inhalt und marginal sehen vollkommen anders aus (insich aber gleich).

Grundsätzlich: Betrachte deine Seite _ohne_ jegliche CSS-Formatierung. Die dann angezeigte Reihenfolge der einzelnen Elemente (ist abhängig von ihrer Platzierung im Quell-Code) sollte dann ihrer jeweiligen Bedeutung/ Wichtigkeit entsprechen.

• Logo
• Überschrift / Name der Website
• Inhalt
• ergänzende Inhalte
• Navigation
• Fußzeile

Ob die Navigation vor oder nach dem eigentlichen Inhalt kommen sollte, wird immer wieder "heiß" diskutiert. Meine Meinung findest du oben.

Logo und Überschrift werden üblicherweise im Header zusammengefasst.

Und noch eins: Wozu arbeitest du mit den Höhenangaben?
Ich habe mit Höhenangaben gearbeitet, damit ich eine Mindesthöhe immer angezeigt bekomme.

Dann hättest du aber zumindest min-height verwenden sollen.

Das hat allerdings sowieso nicht richtig funktioniert, deswegen stimme ich hier absolut mit dir überein und entferne es.

Nein, das ist ja auch nicht verwunderlich. Denn ein Element weiss selbst am besten, wie hoch es sein muss, damit der entsprechende Inhalt darin Platz hat - im Gegensatz zu dir! Also solange es keine zwingenden Gründe gibt, und du _genau_ weißt, was du tust: "Finger weg von irgendwelchen Höhenangaben!".

Ich werde weiter daran arbeiten und versuchen deine Hinweise zu beherzigen und mein Layout zu verbessern. Ich wäre dir allerdings für weitere parallele Hinweise dankbar, die mir noch mehr Aufschluß geben.

Ich poste dir hier mal zur besseren Veranschaulichung eine sehr vereinfachte Beispiel-Datei, die vermutlich in etwa das Ergebnis produziert (in standardkonformen Browsern und IE7), was ich glaube, was du erreichen willst:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">  
<html>  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <title>Test Jessy</title>  
  <style type="text/css">  
   body {  
    font-size: 100.01%;  
   }  
  
  #wrapper {  
    max-width: 65em;  
    min-width: 750px;  
    margin: 0 auto;  
   }  
  
  #header {  
    background: #ffc;  
   }  
  
   #logo {  
    width: 20%;  
    background: #fcf;  
   }  
  
   #inhalt {  
    float: left;  
   width: 67%;  
    background: #cff;  
   }  
  
   #marginal {  
    float: right;  
   width: 32%;  
    background: #fcc;  
   }  
  
   #footer {  
    clear: both;  
    background: #ccf;  
   }  
  </style>  
 </head>  
  
 <body>  
  <div id="wrapper">  
  
   <div id="header">  
    <p>Header</p>  
   </div>  
  
   <div id="logo">  
    <p>Logo</p>  
   </div>  
  
   <div id="inhalt">  
    <p>Inhalt</p>  
   </div>  
  
   <div id="marginal">  
    <p>Marginal</p>  
   </div>  
  
   <div id="footer">  
    <p>Footer</p>  
   </div>  
  
  </div>  
 </body>  
</html>  

Und bei allen weiteren Fragen, würde ich dich bitten, deinen relevanten HTML- und CSS-Code zu posten, damit man konkret sehen kann, was du gemacht hast.

Gruß Gunther