zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Zentrierte Box soll von Streifen durchquert werden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.06.2007, 10:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2007
Beiträge: 5
saltletts befindet sich auf einem aufstrebenden Ast
Standard Zentrierte Box soll von Streifen durchquert werden

Hallo,

Ich habe eine ganz simple Box mit einer Grösse von 800x600 Pixel, die sowohl vertikal als horizontal in der Bildschirmmitte zentriert ist, egal bei welcher Auflösung



Die Box hat einen schwach sichtbaren Hintergrund, und der Content befindet sich darauf, soweit alles klar:

CSS:
Code:
#box {
	border: 1px dotted #666666;
	width: 800px;
	text-align: center;
	float: right;
	position: absolute;
	left: 50%;
	margin-left: -400px;
	vertical-align: middle;
	height: 600px;
	top: 50%;
	margin-top: -300px;
	background-image: url(/images/intro.jpg);
	background-repeat: no-repeat;
}
HTML:
Code:
<body>
<div id="box">
  blablabla...
</div>
</body>
Aber jetzt kommts. Ich will einen farbigen Streifen (wieder einen DIV-Container) mit 60 Pixel Breite längs über das komplette Bild (also von oben nach unten) laufen lassen, und zwar diesmal ausserhalb der Mitte, eher viel weiter rechts der Bildschirmbreite. An welcher Position genau ist ja mal egal. Das muss ich noch ermitteln.

Aber jetzt liegt die Schwierigkeit darin, diesen Streifen "hinter" der oben genannten Box verlaufen zu lassen. Geht das überhaupt? Oder muss man dann 2 Teile machen (ein oberes und ein unteres Stück Streifen?) wobei der obere eben von Bildschirmanfang bis zur Oberkante der Box verläuft, und der untere Streifen an der Unterkante der Box anfängt, und nach unten bis zur Bildschirmunterkante verläuft.

Sinn des Ganzen: Das Hintergrundbild der Box enthält bereits diesen Streifen, und dieser soll ausserhalb der Box fortgeführt werden.

Ich hab mich jetzt ne Ewigkeit daran versucht, hat bereits eine 2-Teile-Lösung, allerdings hat sich der untere Teil nicht der Bildschirmgrösse angepasst, je kleiner die Auflösung wurde, desto mehr konnte man nach unten scrollen, das ist Mist. Das muss sich als der Bildschirmhöhe anpassen.

Das mit z-index hab ich erstens nicht hinbekommen, zweitens hab ich schon gelesen dass das nicht mit allen Browsern kompatibel ist, weshalb schon alleine deswegen diese Lösung ausscheidet.

Kann mir Jemand helfen bitte?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.06.2007, 10:37
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.035
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Gib doch einfach dem Body ein Hintergrundbild welches du zentrierst und vertikal wiederholen lässt.

So in der Art:
Code:
body {
    background: url('800x1px.png') repeat-y center top;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.06.2007, 11:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2007
Beiträge: 5
saltletts befindet sich auf einem aufstrebenden Ast
Standard

Ja, aber wenn sich die Bildschirmbreite ändert, dann passt das nimmer, oder?
Mit Zitat antworten
  #4 (permalink)  
Alt 05.06.2007, 11:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2007
Beiträge: 5
saltletts befindet sich auf einem aufstrebenden Ast
Standard

P.S:

Upps noch was vergessen, der Body-Tag wird schon mit einem querverlaufenden Muster als Hintergrund ausgegeben.


[NACHTRAG]
Ok ich habs, sowohl mit Hintergrundmuster als auch mit dem Balken. Ich musste halt die Hintergrundgrafik auf 2000x10 Pixel setzen, um übergrosse Bildschirmauflösungen auf jeden Fall abzudecken. Und 10 Pixel Höhe ist aufgrund des sonstigen Hintergrundmusters notwendig. Sind halt 3,6 KB Grösse, aber gut, sollte in Zeiten von DSL kein Problem sein.

Geändert von saltletts (05.06.2007 um 11:55 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 05.06.2007, 13:26
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du solltest dazu wissen, daß zentrierte Body-Hintergrundbilder nicht hundertprozentig zuverlässig mit per margin: 0 auto; zentrierten Elementen in Einklang zu bringen sind - manche Browser verursachen bei kleinen Auflösungen eine Verschiebung von 1px. Es ist zwar keine elegante Maßnahme, aber trotzdem würde ich das Ganze in einen Wrapper mit 100% Minimalhöhe stellen und diesem den roten Balken geben.

Außerdem: Nie per position zentrieren (siehe kleiner Viewport)! Horizontal siehe voriger Absatz, vertikal siehe FAQ.
Mit Zitat antworten
  #6 (permalink)  
Alt 05.06.2007, 15:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2007
Beiträge: 5
saltletts befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Du solltest dazu wissen, daß zentrierte Body-Hintergrundbilder nicht hundertprozentig zuverlässig mit per margin: 0 auto; zentrierten Elementen in Einklang zu bringen sind - manche Browser verursachen bei kleinen Auflösungen eine Verschiebung von 1px.
Stimmt, hab eben gesehen dass beim I-Explorer gegenüber dem Firefox das Hintergrundbild um 1 Pixel zu weit links sitzt. Sogar grundsätzlich, auch bei hohen Auflösungen.

Zitat:
Es ist zwar keine elegante Maßnahme, aber trotzdem würde ich das Ganze in einen Wrapper mit 100% Minimalhöhe stellen und diesem den roten Balken geben.
Das hab ich jetzt nicht verstanden. Wrapper?
Mit Zitat antworten
  #7 (permalink)  
Alt 05.06.2007, 15:48
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von saltletts Beitrag anzeigen
hab eben gesehen dass beim I-Explorer gegenüber dem Firefox das Hintergrundbild um 1 Pixel zu weit links sitzt. Sogar grundsätzlich, auch bei hohen Auflösungen.
Das kann natürlich auch an Deiner Art der Zentrierung (per position) liegen - mit margin: 0 auto; würde es deutlich besser funktionieren, aber halt auch nicht hundertprozentig zuverlässig.

Zitat:
Zitat von saltletts Beitrag anzeigen
Das hab ich jetzt nicht verstanden. Wrapper?
Noch'n div um alles
Mit Zitat antworten
  #8 (permalink)  
Alt 05.06.2007, 16:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2007
Beiträge: 5
saltletts befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Noch'n div um alles
Die Überlegung hab ich auch schon gehabt. Aber wie kann man einen DIV-Container vertikal automatisch an die Bildschirmauflösung anpassen? Horizontal geht das, aber vertikal bekomme ich das nicht hin. Wenn ich da die Höhe des Containers auf 100% einstelle passiert nix.... Da wird der nur so hoch, wie Inhalt enthalten ist. Und wenn nichts enthalten ist, dann ist der Container etwas 2-3 Pixel hoch oder so.....
Mit Zitat antworten
  #9 (permalink)  
Alt 05.06.2007, 16:43
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

100% Höhe funktioniert so, und zur vertikalen Zentrierung hatte ich Dir ja bereits den Hinweis auf die FAQ gegeben. Es ist nicht ganz einfach, beides zusammenzubringen, aber mit etwas Einfallsreichtum müßte das klappen
Mit Zitat antworten
Sponsored Links
Antwort

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
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? damonster CSS 12 27.08.2008 15:56
Zentrierte Box mit zwei Schattengrafiken links und rechts. Hindukusch CSS 4 19.07.2008 18:45
Kniffliges Layout mit float Roadrunnerle CSS 6 14.03.2006 11:26
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 17:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, marioN CSS 2 19.01.2004 17:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:38 Uhr.