margin & overflow

[cssneuling]

Hi
Link: http://zahlenmeer.za.ohost.de/layout/
Ich suche Hilfe bei folgendem Problem. Eine Div soll ein Hintergrundbild haben, welches die gesamte Div (#content) bis auf einen Bereich von 10px rechts einnehmen soll. (Also die weiße Grafik mit dem roten 'Rahmen'). Die Paragraphen in dieser Div sollen den roten Rahmen aber meiden (zZ ist es so, dass beim scrollen der Text den 'Rahmen' berührt.
Außerdem soll der Scrollbalken auch nicht den 'Rahmen' verdecken.

 

[threadi]

Korrigier zunächst mal die HTML-Fehler:

[Invalid] Markup Validation of http://zahlenmeer.za.ohost.de/layout/ - W3C Markup Validator

Besonders der fehlende Doctype ist störend. :!:

 

[cssneuling]

Sämtliche HTML-'Fehler' sind jetzt behoben.
Ist jetzt eine Lösungsansatz für mein Problem zu erwarten?

 

[_Thor_]

Eine Frage vorweg, warum hast du den roten Rahmen als Grafik gemacht und nicht mit CSS? Wenn du z.B. ein div hast, kannst du ihm

div {
  border: 2px solid red;
  padding: 5px;
}

Border gibt ihm einen rotem Rahmen und padding sorgt dafür, dass der Innenabstand zum Rand auf jeder Seite 5px beträgt.

 

[cssneuling]

Das ist eine abstrakte Grafik, an der fertigen arbeite ich noch.
Die fertige wird auch einen 'Rahmen' haben, der allerdings abgerundet, mehrfarbig, mit Schatteneffekten usw. ist.
Soweit meine Fähigkeiten reichen, würde ein solches Bild in einem Div mit padding nicht an den Div-Rand gerückt werden, sondern halt 5px weiter innen. Deshalb habe ich mir gedacht: Das löst du am besten, in dem du dem Inhalt des Divs ein margin von der Größe des 'Rahmens' zuweist, was sich dann aber als unzureichend durchdacht erwiesen hat ;-)

 

[Efchen]

Ich glaube, Du verwechselst nur "margin" (= Außenabstand, also außerhalb der borders) mit "padding" (= Innenabstand).

 

[cssneuling]

@elfchen
Verwechselt habe ich's nicht. Das klappt auch mit padding (Ich dachte, padding würde auch das Hintergrundbild nach innen rücken, so ist es aber nicht)
Trotzdem geht's nicht so wie ich's gern hätte. Beim Scrollen ist der Inhalt gelangt der Inhalt immer noch auf den 'Rahmen'.
Mir würde spontan nur einfallen, den Hintergrund und den Inhalt auf 2 Div's aufzuteilen, also ungefähr so:

<div id="hintergrund">
Hier wäre dann das Hintergrundbild, die Div erhält ein Padding von 5px
<div id="inhalt">
Hier wäre dann der Text, der Hintergrund müsste theoretisch vererbt worden sein.
</div>
</div>

Ich frage mich nur grad, ob man sowas nicht schon Div-Suppe nennt, denn das ist nicht mein Ziel. Außerdem bleibt das Problem mit der Positionierung des Scrollbalkens.

 

[Efchen]

Ich dachte, padding würde auch das Hintergrundbild nach innen rücken, so ist es aber nicht

Natürlich nicht. Alles, was sich auf den Hintergrund bezieht, hat "background" im Namen. Um das Hintergrundbild zu verschieben, könnte packground-position helfen.

Trotzdem geht's nicht so wie ich's gern hätte. Beim Scrollen ist der Inhalt gelangt der Inhalt immer noch auf den 'Rahmen'.

Ja, das ist klar. So ist das ja auch gedacht.
Wenn Du das nicht willst, kannst Du Dir IMHO nur damit helfen, indem Du noch einen weiteren Container verschachtelst [Anm.: Ich werde mir nie angewöhnen, einen Text erst zu lesen ;-) Aber wenn wir einer Meinung sind, dann ist das schonmal ein gutes Zeichen]. Aber einen solchen Einsatz erachte ich persönlich als eher zweifelhaft.

Ich frage mich nur grad, ob man sowas nicht schon Div-Suppe nennt, denn das ist nicht mein Ziel.

div-Suppe ist, wenn man alles sinnfrei in <div>s packt. div-Suppe ist, wenn man Layout mit div macht. div-Suppe ist, wenn man sinnfrei mehrere divs ineinander verschachtelt. div-Suppe ist außerdem, wenn man sinnloserweise einzelne Elemente in divs packt, weil man nicht weiß, dass man die selben CSS-Eigenschaften, die man dann dem div gibt, auch dem Element darin hätte geben können.

Eine Art von div-Suppe ist auch, wenn man einem Container einen Rahmen aus Bildern gibt, aber da das nicht anders geht, wird das toleriert. Außerdem definiert div ja keine besondere Semantik, die irgendetwas auslöst. Es ist ein allgemeines Block-Element, das sonst nichts anrichtet.

Außerdem bleibt das Problem mit der Positionierung des Scrollbalkens.

Dazu fällt mir jetzt auch nichts anderes ein, als den Container um die Größe des Scrollbalkens zu verbreitern, aber welche Gewissheit habe ich, dass ein Scrollbalken überall gleich breit ist? Spätestens da würde ich das Vorhaben wegen eines paar Pixel breiten Rahmens aufgeben.

 

[cssneuling]

Ok, ich hab jetzt ein weiteres Div eingefügt.
Das Problem mit dem Scrollbalken hat sich auch erledigt, durch das extra Div ist er innerhlab der alten Div und nicht mehr auf dem 'Rahmen'
Nur ein Problem gibt es noch. Ist wohl am besten wenn man sich das mal anschaut:
Titel
Unten ist es noch nicht so optimal, wie muss ich denn den CSS Code verändern, damit es so aussieht wie links, rechts oder oben?

 

[ky_fr34k]

ihi.
ich hatte dem letzt ein ähnliches problem mit einem rahmen aus bildern.
mit dem unterschied, das ich dynamische höhen und breiten hab.
ich hab drei lösungen erstellt.
vll hilf dir das etwas weiter.
KY-Programming
Gruß KY

 

[cssneuling]

Leider hilft mir das ganze recht wenig.
Du hast das ganze ja mit ner Liste, einer Tabelle oder massenhaft Div's gemacht. (Ich würde her ne Lösung mit maximal 2 Divs bevorzugen)
Und wie du ja bereits festegestellt hast, ich habe feste Höhen. Deswegen habe ich auch nur eine einzige Grafik, keine einzelnen Randgrafiken.

 

[neuroleptika]

Ich kenne keine Möglichkeit den Scrollbalken vom Innenabstand abzuziehen.
Mit padding oder border könntest du groben Platz für den Scrollbalken schaffen.
Der Scrollbalken ist meißten etwa 16px breit. Verlassen kannst du dich da aber nicht drauf. Ich habe padding-right: 20px; verwendet. Der Scrollbalken klebt dann aber nicht pixelgenau neben dem Inhalt / background-image.

background-attachment: fixed lässt sich nur vom Viewpoint aus positionieren.
In deiner Variante background-attachment: scroll;(default-wert) wandert der Hintergrund im IE7 mit.

Ich habe ein leeres <div> absolut in die Scrollbox positioniert und den Inhalt mit einem weiteren <div> ohne height darüber geschoben:
Overflow-Box mit fixen Background

Ich habe insgesamt also drei <div> benötigt wovon eins kein Inhalt hat.

Ich würde aber auch zwanzig davon verwenden, wenn keine anderen (sinnvollen) Elemente zur Verfügung stehen.

Vom gestalterischen wirken Scrollboxen nicht gut. Vor allem wenn noch der Scrollbalken vom body hinzukommt. Außerdem gibt es Probleme mit Ankern. Benutzerfreundlich ist sowas auch eher selten.