Inhalt horizontal begrenzen

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

der einfachste Ansatz wäre vermutlich, das body-Element mit margin-right:30%; auf Distanz vom rechten Rand zu halten, und das gewünschte Hintergrundbild dann dem html-Element zuzuweisen (eventuell background-position verwenden).

Das ganze sollte man aber in ein Media-Query tun, damit bei schmalen Viewports (bspw. Smartphones) nicht noch 30% der ohnehin schon knappen Anzeigefläche vergeudet werden. Und damit das dann nicht benötigte Hintergrundbild nicht geladen wird.

Wenn der body mindestens 21em breit sein sollte:

@media screen and (min-width: 30em)  
{  
  html { background: url(…) right no-repeat }  
  body { margin-right: 30% }  
}

Dass bei Browsern, die keine Media-Queries mit min-width können, kein Hintergrundbild kommt, kann man verschmerzen?

Ansonsten

html { background: url(…) right no-repeat }  
body { margin-right: 30% }  
  
@media screen and (min-width: 0em)  
{  
  html { background: none }  
  body { margin-right: 0 /* oder anderen kleinen Wert */ }  
}  
  
@media screen and (min-width: 30em)  
{  
  html { background: url(…) right no-repeat }  
  body { margin-right: 30% }  
}

oder

html { background: url(…) right no-repeat }  
body { margin-right: 30% }  
  
@media screen and (max-width: 0em)  
{  
  html { background: none }  
  body { margin-right: 0 /* oder anderen kleinen Wert */ }  
}

Qapla'

PS. 70% können für Fließtext zu breit sein. Eine Zeilenlänge sollte 45–90 Zeichen umfassen, nicht mehr.