Div-Lay Hintergrund nur im Firefox leicht verschoben?

[keksberry]

Hallo

ich hab ein Problem mit einem Div-Layout, das ich momentan code.
Im Internet Explorer wird bei mir alles richtig dargestellt: No title for you ! Verkackt ! I'm going to Vancouver <3

..aber im Firefox ist unten wo das eigentliche Headerbild aufhört der Hintergrund (ich mein diese beiden bunten Streifen links und rechts) leicht verschoben, was ich mir jedoch irgendwie nicht erklären kann. :?:

Das steht in meiner CSS Datei:

background-color: #CCCCCC;
   background-image:url(bilder/backing.png);
  background-repeat:repeat-y;
  background-position:center;

Und das ist der restliche Code:

<!--Div um alles-->
<div style="position: absolute; left:50%; width: 820px; top:0px; margin-left: -410px;">


<!--Bannerbild-->
<img src="bilder/layout.png" style="position: absolute; top: 0px; left 0px; width: 820px; height: 610px;">

<!--Linkes Div-->
<div style="position: absolute; left: 46px; top: 489px; width: 462px; overflow:auto;">
<?PHP
include("/usr/export/www/hosting/keksberry/cutenews/show_news.php");
?>
<br><br>
</div>
<!--Rechtes Div-->
<div style="position: absolute; left: 539px; top: 489px; width: 231px; overflow:auto;">
<h1>BLa ?!</h1><br><br><br>
fhdjksl<br><br>
<i>ghjklkjdhghjkljhsooo</i><br><br><br>
<br><br><br><br><br><br>
auch hier ende
</div>
</div>

Kann mir jemand weiterhelfen? :-(
Danke im Vorraus.

 

[threadi]

Bei der div-Suppe finde ich das Hintergrundbild gar nicht. Ein weitere Fehler von dir ist bei allen Objekten eine absolute Positionierung zu verwenden. Durch unbedachte Verwendung davon kommt es erst recht zu Fehldarstellungen.

 

[Efchen]

ich hab ein Problem mit einem Div-Layout, das ich momentan code.

Damit hätte wohl jeder ein Problem. Denn div-Layout ist genauso Unfug wie Tabellen-Layout.

Mach Dein Layout lieber mit CSS; CSS baut auf einem validen und semantisch sinnvollen HTML-Code auf.

Dein HTML-Code bedarf dringend einer Frischzellenkur, wie Deine Kenntnisse über HTML und den Sinn davon auch ganz dringend aufgefrischt werden müssen!

Fragen? Fragen!

Gruß,
-Efchen

P.S.: Deine horizontale Zentrierung ist fatal! Reduziere mal Deinen Viewport so weit, dass der Inhalt nicht mehr rein passt. Dann rutscht die Seite links raus, wo kein horizontaler Scrollbalken mehr dran kommt. Bau das um: Absolute Positionierung raus und zentrieren mit "margin: 0 auto";

 

[keksberry]

Danke erstmal für die Antwort
Meinst du das mit dem margin so?

<!--Div um alles-->
<div style="margin: 0 auto; width: 820px; top:0px;">

Wenn ich das so habe funktioniert es im IE schon, aber im Firefox ist das Div nicht mehr zentriert.
Zumal habe ich mittlerweile das Problem, dass im IE diese nervigen Scrollbalken erscheinen, und ich weiß nicht woran es liegt.

Tut mir leid für die Hilflosigkeit, wie mach ich das denn als CSS Layout?

Ich stell nochmal meinen kompletten aktuellen Code rein:

<!--Div um alles-->
<div style="margin: 0 auto; width: 820px; top:0px;">

<!--Bannerbild-->
<img src="bilder/layout.png" style="position: absolute; top: 0px; left: 0px; width: 820px; height: 610px;">

<!--Linkes Div-->
<div style="position:absolute; left: 46px; top: 489px; width: 462px; overflow:auto;">
<?PHP
include("/usr/export/www/hosting/keksberry/cutenews/show_news.php");
?>

<br><br><br><br><br><br><br>
</div>

<!--Rechtes Div-->
<div style="position:absolute; left: 539px; top: 489px; width: 231px; overflow:auto;">

...inhalt...
</div>
</div>

Muss ich in den anderen Divs auch das position:absolute wegmachen?

Und hier die Seite: [KEKSBERRY.OHOST.DE] I'm going to Vancouver <3
Danke

 

[Efchen]

Meinst du das mit dem margin so?
Wenn ich das so habe funktioniert es im IE schon, aber im Firefox ist das Div nicht mehr zentriert.

Dann machst Du noch irgendwas falsch. Das top ist an der Stelle natürlich überflüssig, weil Du ja kein position mehr verwendest. Der Rest ist so richtig und funktioniert in jedem Browser im Standards Mode.

Ich sehe, Du hast Elemente in diesem <div> weiterhin absolut positioniert. Das kann natürlich nicht gehen, die gelten ja nicht als Teil des zentrierten <div>. Verzichte einfach überall aurf absolute Positionierung, die Wahrscheinlichkeit für einen Anfänger liegt bei 99,9%, dass Du das gar nicht brauchst.

Zumal habe ich mittlerweile das Problem, dass im IE diese nervigen Scrollbalken erscheinen, und ich weiß nicht woran es liegt.

Der IE stellt immer Scrollbalken dar, wenn sie nicht benötigt werden, sind sie ausgegraut. Sind sie bei Dir nicht ausgegraut, dann ist der Inhalt größer als der in dem Element zur Verfügung stehende Platz.
Oftmals kann das in einem falsch verstandenen Box Model begründet sein, das der IE verwendet, wenn er im Quirks Mode läuft (also ein falscher Doctype angegeben ist). Das richtige Box Model errechnet die Größe eines Elements so: width/height + padding + border + margin.

Tut mir leid für die Hilflosigkeit, wie mach ich das denn als CSS Layout?

Indem Du HTML richtig anwendest. HTML ist dazu da, Deinem Inhalt eine logische Bedeutung zu geben, d.h. Du zeichnest Überschriften als solche aus, Textabsätze, wichtige Textpassagen, Adressen, Zitate, usw. Jedes HTML-Tag hat eine semantische Bedeutung. <div> ist dazu da, mehrere Elemente zu einer logischen Gruppe zusammen zu führen, entweder um einen logischen Block zu definieren oder meistens, um die gruppierten Elemente alle gemeinsam zu formatieren. <div> mit nur einem Element drin, sind meistens überflüssig (Wie z.B. das um Deine Überschrift 1. Grades ("Ein kleiner Test")). Eine Seite die nur aus <div> besteht, hat keine Semantik, der Inhalt ist also nicht richtig ausgezeichnet und kann von Clients, die den HTML-Code interpretieren (Suchmaschinen, Vorlesebrowser, ...) missverstanden werden.

Außerdem gibt es Tags zur physischen Textauszeichnung, die nicht mehr benutzt werden, das <i>, das Du verwendest, ist so eines. Es hat keine logische (semantische) Beedeutung und ist daher sinnfrei. Wenn Du einen Text kursiv haben möchtest, machst Du das mit CSS und font-style:italic. Wenn Du den Text aber kursiv haben willst, weil er etwas bedeuten soll, dann musst Du nach der Bedeutung suchen. Machst Du das, weil es ein wichtiger Text ist, dann musst Du ihn als wichtigen Text auszeichnen, das geht mit dem Tag <em>. Willst Du ihn als besonders wichtigen Text auszeichnen, musst Du <strong> nehmen. Wenn nun aber Dein Browser das <strong> fett darstellt, und Du es aber kursiv haben willst, wäre es völlig falsch, statt <strong> dann <em> zu nehmen (weil das in den meisten Browsern kursiv dargestellt wird), denn damit veränderst Du ja die Bedeutung. Nutze in dem Fall <strong> und setze per CSS font-style auf italic.

Ich stell nochmal meinen kompletten aktuellen Code rein:

Wozu? Der Code steht doch auch auf Deiner verlinkten Seite. Und ist da außerdem immer aktuell.

Du solltest auch auf strikte Trennung von Inhalt und Layout achten. Das heißt zunächst mal für Dich, dass Du allen CSS-Code in ein externes Stylesheet auslagerst. das ha etliche Vorteile. Das Stylesheet wird gecached und muss somit nur einmal für alle Seiten geladen werden. Für Dich ist damit die Wartung der Site viel einfacher. Der Code wird außerdem übersichtlicher. Und um ein komplett neues Design einzustellen, musst Du nur das Stylesheet austauschen.

Ich glaub das reicht erstmal, oder? :-)

 

[keksberry]

Danke für die Antwort

Also das Problem mit dem Scrollbalken hab ich mittlerweile nicht mehr.
Ich hab mich außerdem entschieden die Seite einfach nicht zu zentrieren sondern links zu lassen, find ich auch in Ordnung und ist unkomplizierter. :razz:
Das mit dem <i> und <em> etc. wusste ich gar nicht hab erst letztens wieder angefangen zu coden, und meine übrigen Kenntnisse stammen von vor 3 oder 4 Jahren. Ich hab aber <i> und <b> etc. in meiner Stylesheetdatei auch extra definiert. Den Teil mit dem "Ein kleiner Test" usw. hab ich nicht selbst gecodet, sondern ein Newssystem von Cutenews eingebunden, daran möchte ich auch nicht unbedingt dran rumbasteln :razz:

Naja, danke schön du hast mir sehr geholfen

 

[Efchen]

Das mit dem <i> und <em> etc. wusste ich gar nicht hab erst letztens wieder angefangen zu coden, und meine übrigen Kenntnisse stammen von vor 3 oder 4 Jahren.

Da war das aber auch schon so; vor 7 Jahren bin ich auf CSS umgestiegen und ich war sicher alles, nur nicht der Erste.

Ich hab aber <i> und <b> etc. in meiner Stylesheetdatei auch extra definiert.

Die sind in der DTD von HTML definiert. Aber auch höchstens in HTML 4.01 Transitional noch, sicher nicht in Strict. Die sind schon lange auf der Abschussliste und sollten nicht mehr verwendet werden, sie haben immerhin keine Bedeutung. Da ein Aussehen im Stylesheet zu definieren, ist demnach überflüssig.