[HTML/CSS] CSS-Problem(e)

Londarus Trentos · 31. Juli 2007

Hi,

ich eröffne mal ein neues Thema, weil mein altes Problem ja gelöst ist. Leider hat sich durch die Lösung ein neues Problem aufgetan.

Erstmal poste ich den momentanen Code, dann die Probleme :roll:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Hierstehtnochwasgeheimes - Home</title>
<meta name="Author" content="Hehe, ich wer sonst?">
<style type="text/css">
#UpperBannerBereich {
   background-image: url(images/UpperBanner.jpg);
   background-repeat: no-repeat;
   Width:700px;
   Height:200px;
   background-position: center;
}

#IndexUpperBereich {
   background-image: url(images/IndexUpper.jpg);
   background-repeat: no-repeat;
   Width:700px;
   Height:500px;
   background-position: center;
}
</style>
</head>
<body>
<div id="UpperBannerBereich"></div>
<div id="IndexUpperBereich"></div>
</body>
</html>

So.

Kommen wir gleich zum Punkt. Beide backgrounds werden nicht zentriert. Ich kann sie zwar mittels Pixel Angaben verrücken, aber nicht mit center.
Mein zweites Problem, war eiegntlich, dass sich beide backgrouns überlagert haben, aber das habe ich gelöst (position war auf absolute gestellt. Ich habs dann weggemacht. Jetzt klappts

)

Allerdings ist es halt immer noch nicht mittig. Warum wird der center Befehl nicht angenommen?

mfG L

Cheecat · 1. August 2007

Die Dokumententypdeklaration schaut unvollständig aus.
-> http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp

Es fehlt die Angabe zur Zeichenkodierung.
-> http://de.selfhtml.org/html/kopfdaten/meta.htm#zeichenkodierung
Die muss mit der Zeichenkodierung der Datei übereinstimmen.

Um HTML-Datei auf Konformität zu überprüfen, geh mal auf http://validator.w3.org/.

Ansonsten funktioniert das bei mir lokal wie es soll. Wie groß sind denn die Bilder?

Londarus Trentos · 1. August 2007

Lokal klappt es nicht, die images bleiben links. Größe? Dateigröße oder Pixelanzahl? Alle Bilder sind höchstens 50kB groß und die Pixelanzahl liegt bei 50px - 500px in der Höhe und alle 700px breit. Ich poste gleich mal nen aktualisierten Code, weil in dem hier noch nicht alle 5 backgroundimage Teile drin sind. Danke schonmal.

mfG L

EDIT:

So... jetzt mal aktualisiert:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Home</title>

<meta name="Author" content="Ich natuerlich">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">

html, body {
   height: 100%;
   width: 100%;
  }

#UpperBannerBereich {
   background-image: url(images/UpperBanner.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:200px;
   background-position: center;
}

#PlatzhalterBereich {
   background-image: url(images/Platzhalter.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:50px;
   background-position: center;
}

#IndexUpperBereich {
   background-image: url(images/IndexUpper.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:500px;
   background-position: center;
}

#IndexLowerBereich {
   background-image: url(images/IndexLower.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:100px;
   background-position: center;
}

#LowerBannerBereich {
   background-image: url(images/LowerBanner.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:200px;
   background-position: center;
}
</style>

</head>

<body>

<div id="UpperBannerBereich"></div>
<div id="PlatzhalterBereich"</div>
<div id="IndexUpperBereich"></div>
<div id="IndexLowerBereich"></div>
<div id="LowerBannerBereich"></div>

</body>

</html>

So. Es wird nun im Firefox und lokal FAST richtig angezeigt. Alles ist in der Mitte undsoweiter. Allerdings ist noch ein horizontaler Scrollbalken, der da ja eigentlich nicht sein sollte.
Im Internet Explorer, ist der Scrollbalken weg, allerdings sieht man das background image "Platzhalter.jpg" nicht. Es wird von IndexLower verdeckt.

HTML:

html, body {
   height: 100%;
   width: 100%;
  }

Diesen Tipp habe ich nach langer google Suche gefunden, er ermöglicht überhaupt erst, dass es mittig angezeigt wird. Auch habe ich die width Angaben mit 100% versehen, ansonsten klappts auch nicht. Die height Angaben muss ich aber weiter mit px Angaben versehen, ansonsten gibts wieder Fehler... huiuiui

mfG L

EDIT2:

http://validator.w3.org/ hat mir Zwei fehler gegeben:

This page is not Valid HTML 4.01 Transitional!

Result: Failed validation, 2 Errors

Encoding: iso-8859-1

Doctype: HTML 4.01 Transitional

Root Element: HTML

Validation Output: 2 Errors

1. Error Line 3, Column 0: character "<" invalid: only delimiter ">", delimiter "[", system identifier, "CDATA", "NDATA", "SDATA" and parameter separators allowed.

<html>

2. Error Line 3, Column 0: cannot continue because of previous errors.

<html>

Allerdings kann ich damit ÜBERHAUPT nix anfangen ^^°

mfG L

Londarus Trentos · 3. August 2007

Keiner ne Ahnung? ...

Cheecat · 3. August 2007

Der Quelltext auf der Seite die du hochgeladen hast, und der den du gepostet hast, sind nicht identisch

. Daher kann den Fehler ja niemand finden.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Dahinter fehlt ein >.

Schaut ansonsten schon recht schick aus

.

Londarus Trentos · 3. August 2007

Ändert aber leider immer noch nicht die Tatsache, dass bei zwei Browsern unterschiedliche Fehler auftreten. Und ich immer noch nicht weiß, wie man sie behebt.

mfG L

EDIT: Okay, jetzt ist die Seite "valid", aber immernoch diese beiden Fehler. Ich will endlich Inhalte schreiben *hrrhrr*

Cheecat · 3. August 2007

HTML:

<div id="PlatzhalterBereich"</div>

muß heißen

HTML:

<div id="PlatzhalterBereich"></div>

Du hast wieder ein > vergessen.
Lass dir im Firefox mal den Quelltext anzeigen. Zumindest bei mir ist der Fehler fett rot markiert. Kann aber sein, dass es durch zusätzliche Tools die ich installiert hab kommt.
Und zwar wären dies:
Web Developer Toolbar
und
Firebug

Londarus Trentos · 3. August 2007

Waaah, ausgerechnet ein TIPPFEHLER... wie gemein. Okay ich check mal durch und gib dann Bericht

EDIT: Juhu, der IE zeigt nun alles korrekt an. Nur der FF hat noch ein paar Macken:

Es ist immer noch ein horizontaler Scrollbalken, mit dem man ca 5mm scrollen kann, der aber rein gar nix bringt.

Unter dem letzten background image ist kein Platz mehr, die Seite endet gleich danach. Im IE sind da noch 0,5 Zentimeter (ca) Platz.

@ Cheecat, du kannst dir ja nochmal die Seite in beiden Browsern anschauen. Den Link hast du ja

Jubidu · 3. August 2007

Den Scrollbar solltest du mit dem Wert hidden für die css-Eigenschaft overflow verschwinden lassen können.

Cheecat · 3. August 2007

Londarus Trentos schrieb:
@ Cheecat, du kannst dir ja nochmal die Seite in beiden Browsern anschauen. Den Link hast du ja

Wird jetzt in SeaMonkey, Firefox, Opera und IE7 korrekt angezeigt.

Londarus Trentos · 3. August 2007

Auch ohne Scrollbar? O.O Komisch... Danke Jubidu. Ich werds mal ausprobieren.

mfG L

Cheecat · 3. August 2007

Nein, die war noch drin.

Aber setzt mal bei html, body rein: margin:0;
D.h. Außenrahmen wird auf 0 gesetzt. Damit ist die Scrollbar auch weg, auch ohne overflow:hidden;
Dieser Außenrand wird standardmäßig in den Browsern angezeigt. Aber IE und Mozilla-Browser behandeln den Rand unterschiedlich. Für Mozilla ist die gesamte Breite 100% und addiert dann noch den Rand auf die Breite von 100% drauf, daher die Scrollbalken. Beim IE ist ist die Breite innerhalb des Rahmens 100%. Den Rahmen kannst du sehen, wenn du mal bei einem deiner Styles ein background-color:red; (oder ne andere Farbe) reinnimmst, ohne margin:0; drin stehen zu haben, und dann nimm mal margin:0; in html, body rein und schau dir die Seite nochmal an.

Problem bei overflow:hidden; im html, body ist: du bekommst gar keine vertikalen Scrollbalken mehr, auch nicht, wenn du das Browserfenster ganz schmal machst.

Jubidu · 3. August 2007

Ach so? Der Scroolbar war über die ganze Seite? Dann ist overflow: hidden der falsche Weg, das stimmt... (Man sollte sich eine Seite vielleicht doch anschauen, bevor man Tipps gibt

)

Londarus Trentos · 4. August 2007

JUHUUU. Vielen Dank an alle :hah:
Es klappt =)))

Suche

Suche

[HTML/CSS] CSS-Problem(e)

Londarus Trentos

Ehrbarer Bürger

Cheecat

Hausvetter

Londarus Trentos

Ehrbarer Bürger

Londarus Trentos

Ehrbarer Bürger

Cheecat

Hausvetter

Londarus Trentos

Ehrbarer Bürger

Cheecat

Hausvetter

Londarus Trentos

Ehrbarer Bürger

Jubidu

Hausvetter

Cheecat

Hausvetter

Londarus Trentos

Ehrbarer Bürger

Cheecat

Hausvetter

Jubidu

Hausvetter

Londarus Trentos

Ehrbarer Bürger

Ähnliche Themen