zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundbild in zentriertem div positionieren und fixieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.04.2010, 12:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2004
Beiträge: 19
anutoshen befindet sich auf einem aufstrebenden Ast
Standard Hintergrundbild in zentriertem div positionieren und fixieren

Hallo

Das Positionieren und Fixieren eines Hintergrundbilds in einem zentrierten div schien mir kein besonderes Problem zu sein.

html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" media="screen, projection">
@import url(beispiel.css);
  </style>
</head>
<body>
<div class="all">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>
</body>
</html>
css:
Code:
body, div {
	margin: 0;
	padding: 0;
}
body {
	background-color: black;
	font-family: verdana, arial,helvetica,sans-serif;
}
.all {
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	background-color: yellow;
	background-image: url(test.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}
Das Ergebnis sieht aber so aus:



Woher kommt der obere Abstand des div?
Wieso orientiert sich die Position des Hintergrundbilds am body und nicht am div?
Ich bin für jeden Hinweis dankbar.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.04.2010, 12:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von anutoshen Beitrag anzeigen
Wieso orientiert sich die Position des Hintergrundbilds am body und nicht am div?
Am Viewport, nicht am body-Element.
Wieso? Weil es so festgelegt ist.
Colors and backgrounds ff.
Was würdest du dir denn vorstellen unter "fixiert in einem zentrierten div"?

BTW: Du hast den Link zu deinem Beispiel vergessen.

edit: Der obere Abstand kommt von "Collapsing Margins" (<- Suchbegriff).

Geändert von fricca (22.04.2010 um 12:52 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.04.2010, 15:39
Benutzer
neuer user
 
Registriert seit: 16.03.2010
Beiträge: 70
FortyTwo befindet sich auf einem aufstrebenden Ast
Standard

Ausserdem würde ich zu allererst im CSS:

Code:
* {
margin:0;
padding:0;
}
schreiben, um sätzliche Abstände (Voreinstellung der Browser) ausser Gefecht zu setzen. Ich bin der Meinung, das <p> hier den Abstand zum Viewport verursacht.

Und warum verwendest du Anstatt den vielen Absätzen nicht einfach eine height-Angabe, um deinem Div eine Höhe zu erwzingen?
Mit Zitat antworten
  #4 (permalink)  
Alt 23.04.2010, 12:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2004
Beiträge: 19
anutoshen befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für die hilfreichen Angaben. So war mir weder die Orientierung von fixed am Viewport, noch die Auswirkung des p geläufig.

Die verwendeten Absätze gehen auf ursprünglich dort enthaltenen Text zurück, den ich entfernt hatte.

Gibt es denn vielleicht eine alternative Möglichkeit, das von mir Beabsichtigte zu erreichen? Nämlich ein Bild in einem zentrierten div zu positionieren und zu fixieren. Bislang war ich der - möglicherweise irrigen - Annahme, dass es sich dabei um eine eher häufige Art der grafischen Gestaltung handelt.
Mit Zitat antworten
  #5 (permalink)  
Alt 23.04.2010, 12:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich wiederhole meine Frage:
Was würdest du dir denn vorstellen unter "fixiert in einem zentrierten div"?
Ich habe keine Ahnung, was du erreichen willst. Was entspricht an der Darstellung eines Hintergrundbildes ohne background-attachment:fixed nicht deiner Vorstellung?
Mit Zitat antworten
  #6 (permalink)  
Alt 23.04.2010, 12:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2004
Beiträge: 19
anutoshen befindet sich auf einem aufstrebenden Ast
Standard

Hallo Fricca

Dass das Bild an Ort und Stelle bleibt, auch wenn der andere Inhalt des div gescrollt werden sollte. So habe ich das mit dem fixed jedenfalls immer verstanden.
Wie gesagt hatte ich die Texte aus dem Beispiel entfernt, mit Texten kann der Inhalt des div durchaus recht lang werden, so dass man vertikal scrollen muss.
Mit Zitat antworten
  #7 (permalink)  
Alt 23.04.2010, 12:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von anutoshen Beitrag anzeigen
Dass das Bild an Ort und Stelle bleibt, auch wenn der andere Inhalt des div gescrollt werden sollte.
Wo wird gescrollt? In dem Div? Oder mit dem normalen Scrollbalken des Viewports? Oder ...?

Zitat:
Wie gesagt hatte ich die Texte aus dem Beispiel entfernt, mit Texten kann der Inhalt des div durchaus recht lang werden, so dass man vertikal scrollen muss.
Dann setz wieder Inhalte rein.
Wenn man dich verstehen soll, musst du schon das vorstellen, worum es dir geht.
Mit Zitat antworten
  #8 (permalink)  
Alt 24.04.2010, 00:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2004
Beiträge: 19
anutoshen befindet sich auf einem aufstrebenden Ast
Standard

Tut mir leid, das war wohl wirklich nicht präzise genug. Jetzt habe ich das Beispiel erneuert: Titel
Es geht also um den ganz normalen Scrollbalken am Viewport.
Mit Zitat antworten
  #9 (permalink)  
Alt 24.04.2010, 09:17
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.457
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Habe keinen Scrollbar ...

Wenn ich den Browser etwas "niedriger" zusammenschieben bekomme ich am
rechten Rand einen Scrollbar. Beim Scrollen bleibt das Hintergrundbild stehen.
Ist doch eigentlich ok ?
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.04.2010, 13:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2004
Beiträge: 19
anutoshen befindet sich auf einem aufstrebenden Ast
Standard

Hallo Joe

Das verstehe ich nicht. Ich hab mal zwei Screenshots gemacht.
So in etwa sollte es aussehen - für alle Monitorgrössen:
http://www.lafourmi.ch/test/test2.jpg.
Das Bild hätte ich gern rechts oben im div und die Schrift sollte es teilweise überlappen.
und so sieht es auf meinem Monitor aus:
http://www.lafourmi.ch/test/test3.jpg.

Geändert von anutoshen (24.04.2010 um 13:42 Uhr)
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
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Header entfernen tripple CSS 17 15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 10:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:57 Uhr.