CSS und Opera

Druckbare Version

21.04.2006, 19:17
July

CSS und Opera

Ich bastel zur Zeit an einer Seite. Ich will gern den Header oben am Rand haben.
Hab das ganze zuerst mit topmargin="0" gelöst, aber das ist ja leider nicht valide.
Also hab ichs mit style="margin-top:0px;" gemacht, aber da macht Opera nicht mit.
Habs an den verschiedensten Stellen ausprobiert, im body, an allen möglichen Stellen der Tabelle, im Head, in der CSS-Datei.

Gibts dafür keine Lösung? Muss doch auch in Opera irgendwie machbar sein, dass es oben "dranklebt", in Firefox und dem IE gehts ja auch (okay, der IE is da vielleicht nich maßgeblich).

Wäre dankbar, wenn mir da jemand nen Tipp geben könnte ^^
21.04.2006, 19:19
NPC Fighter

Code:

html { padding: 0px; margin: 0px; } body { padding: 0px; margin: 0px; }

sollte es eigentlich tun. :>
21.04.2006, 20:35
drunken monkey

Wenn man für den Header

Code:

#header { top: 0px; }

festlegt geht's doch eh, egal welche Margin- und Padding-Werte der Body hat. Oder klappt das nicht im Opera (keine Ahnung von dem)?
btw: Ich wusste gar nicht, dass das fürs ganze HTML-Element auch geht - hat das echt eine Funktion? :confused:
21.04.2006, 21:15
FF

tehretisch müsste es gehn :P
Und Opera unterstüzt mehr CSS anweisungen als alle Anderen browser, es kann allerdings sein, das er eines davon etwas anders interpretiert.
Wenn du das header div außerhalb aller anderen divs amchst, und ihm ne position:absolute gibst, müsste es mit dem margin-top:0px; klappen.....

@drunken monkey
müsste gehn.
Mann kann den Body teil aus dem Sichbereich schieben xD
22.04.2006, 06:47
July

Hab noch mal ne Frage :)

Das mit dem Header hat alles geklappt, danke erstmal.
Ich hab jetzt aber ein Problem mit dem Hauptbereich. Das ganze sollte so aussehen, dass links die Navigation ist mit ner Breite von etwa 160 Pixel, dann der Mittelteil und rechts nochmal eine Navigationsleiste mit auch 160Pixel.
Der Mittelteil soll sich in der Breite dann eben dem Browserfenster anpassen, wie man das so schön kennt.

Bisher hatte ich das ganze Layout in eine Tabelle gesteckt. Der IE stellts mal wieder überhaupt nicht so dar, wie ich das haben will, die beiden Teile links und rechts sind jeweils sehr viel größer als der Mittelteil (ich hab mir die Grenzen anzeigen lassen), obwohl ich die Breite angegeben habe.
In Opera macht er komischerweise nur die linke Spalte so breit wies sein soll, die rechte lässt er auch schrecklich breit. Einzig und allein Firefox macht genau das was ich will :rolleyes:

Wie kann ich das jetzt also realisieren, dass er in jedem Browser das richtig anzeigt?
Oder sollte ich doch auf Divs umsteigen? Ist das einfacher, besser, kA?
22.04.2006, 09:41
seth.plate

Als Tabellenliebhaber hat mich die Inkompatibilität mit den Browsern verwundert... Tabellen sollten sie ja nun mittlerweile alle verstehen, gibts eigentlich die wenigsten Probleme mit, wobei grundsätzlich der komplette Umstieg auf CSS ratenswert ist...

Bei mir zeigts der MSIE auch richtig an. Opera hab ich hier gerade nicht zur Verfügung.
Aber mit der 100%-Breite-Definition sollte er überall auch die Spalten richtig anzeigen.
Am Firefox gibts natürlich nix zu mäkeln... ;)

Edit: Opera machts auch wie er soll...

HTML-Code:

<table border="3" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="160">Navi links</td> <td>Inhalt</td> <td width="160">Navi rechts</td> </tr> </table>

MSIE 6.0
Firefox 1.5.0.2
Opera 8.54
22.04.2006, 12:16
Pik

Zitat:

Zitat von July

Oder sollte ich doch auf Divs umsteigen? Ist das einfacher, besser, kA?

Einfacher nicht, aber wenn man genug Übung hat ist es genauso einfach, besser ja, aber wenn's etwas komplexer wird, wird der IE am meisten Probleme bereiten ^^
23.04.2006, 20:09
July

Hm vielleicht mach ich mich irgendwann mal an eine div-Version.
Aber bin erstmal froh, dass die Seite soweit steht :D

Ich hab aber noch ein paar Fragen, so ein paar kleinigkeiten, die ich gern noch ändern würde:

1. Ich hätt gern einen größeren Abstand zwischen den einzelnen Navigationskästen links und rechts. Weiß aber irgendwie nicht so recht, womit ich das machen soll? Der Abstand, der mit einem <br/>-Tag erzeugt wird, ist jedenfalls zu groß.

2. In Word gibt es ja die Funktion, dass man einen größeren Zeilenabstand machen kann, damit die Zeilen nicht so aneinander kleben. Gibts die Möglichkeit in CSS auch? Die Links in der Navi kleben mir etwas zu sehr aneinander.

3. Ich hatte es eine kurze Zeit so, dass ich die Links vom linken Rand etwas weggerückt habe, aber wenn die Linkbezeichnung so lang war, dass sie in die zweite Reihe gerückt ist, war die zweite Reihe wieder links ganz am Rand, da hat er das zum Abrücken nicht genommen, gibt es auch dafür ne Möglichkeit?

Ich glaub, das wär erstmal alles :D
Ist zwar kein Opera-Problem mehr, aber wohl ein CSS-Problem, mit CSS bin ich noch nich ganz so fit :) Vielleicht hab ich auch irgendwo nen kleinen Fehler im Quellcode, passiert leider manchmal, aber leider kann man, wenn PHP drin is, nicht mehr validieren oder kennt jemand ne Möglichkeit dafür?
23.04.2006, 20:51
Pik

Zitat:

Zitat von July

1. Ich hätt gern einen größeren Abstand zwischen den einzelnen Navigationskästen links und rechts. Weiß aber irgendwie nicht so recht, womit ich das machen soll? Der Abstand, der mit einem <br/>-Tag erzeugt wird, ist jedenfalls zu groß.

Versuche mal bei den Zeilen, in denen die Bilder für die Überschriften sind:

HTML-Code:

<tr style="position: relative; top: 5px;"> //oder was für einen Abstand du eben haben willst <td colspan="3"><img src="main.png" alt="News und Berichte"/></td> </tr>

Ist aber ohne Gewähr. Tabellen und Ausrichtung per CSS passen nicht wirklich zusammen :D

Zitat:

2. In Word gibt es ja die Funktion, dass man einen größeren Zeilenabstand machen kann, damit die Zeilen nicht so aneinander kleben. Gibts die Möglichkeit in CSS auch? Die Links in der Navi kleben mir etwas zu sehr aneinander.

line-height

Zitat:

3. Ich hatte es eine kurze Zeit so, dass ich die Links vom linken Rand etwas weggerückt habe, aber wenn die Linkbezeichnung so lang war, dass sie in die zweite Reihe gerückt ist, war die zweite Reihe wieder links ganz am Rand, da hat er das zum Abrücken nicht genommen, gibt es auch dafür ne Möglichkeit?

Die Links in eine Liste packen und mit CSS entsprechend formatieren ^^

Zitat:

aber leider kann man, wenn PHP drin is, nicht mehr validieren oder kennt jemand ne Möglichkeit dafür?

Nuja, du kannst die fertigen HTML-Dateien, die vom Skript ausgegeben werden validieren:
http://www.rhejvandar.de/diverses/july/gfpage/index.php -> http://validator.w3.org/check?uri=ht...ge%2Findex.php
Ein "&" im Quelltext mußt du mit "&" maskieren.

Übrigens lässt man die alt-Attribute bei Bildern, die nur für's Design dienen in der Regel leer ^_-
23.04.2006, 20:54
July

Ah okay :) Danke für die Tipps, ich werd das mal ausprobieren, ob das alles so klappt und mich gegebenenfalls nochmal melden hier ^^
23.04.2006, 21:37
July

Sorry für den Doppelpost, aber nachher merkt das keiner, wenn ich editiere:

Ich hab mich jetzt erstmal um das ganze mit der Liste gekümmert. Hat auch schön geklappt, zumindest im IE und in Opera. Aber in Firefox zerschießt er mir das Layout damit.
Kann mir zufällig jemand sagen, wieso die Dinger trotzdem soweit in der Mitte sitzen (hatte ich in Opera am Anfang ja auch, aber als ich den <ol>-Tag so geändert hab:

<ol style="list-style-type:none; margin-left:5px; margin-top:0px; margin-bottom:0px; margin-right:5px">
Hat er eben alles so angezeigt wie ich das haben wollte. WArum nicht im FF?

An den Rest setz ich mich morgen >_>
23.04.2006, 21:51
Pik

Kannst ja mal <ul style="text-align: left; list-style: none; margin: 0 5px 0 5px; padding:0;"> versuchen.
23.04.2006, 21:57
July

Zitat:

Zitat von Pik

Kannst ja mal <ul style="text-align: left; list-style: none; margin: 0 5px 0 5px; padding:0;"> versuchen.

Das juckt Firefox scheinbar nicht die Bohne -.- E(s ist zwar nicht mehr da, wo es vorher war, aber so wie es jetzt ist, solls auch nicht sein *G*

(zum Angucken: Link, die ganzen Listen sind mit <ol> formatiert, bei den interviews mit <ul>, is beides nich so hübsch :D)

Warum muss eigentlich immer irgendein Browser rumzicken >_> Das geht bei mir echt reihum.
24.04.2006, 05:57
Manni

Der Firefox regelt den Abstand bei Listen afaik mit Padding. Einfach padding der Listen auf 0 setzen, das sollte es tun ;)
24.04.2006, 07:13
July

Zitat:

Zitat von Manni

Der Firefox regelt den Abstand bei Listen afaik mit Padding. Einfach padding der Listen auf 0 setzen, das sollte es tun ;)

Nö, will er auch nicht >_> Also ich mein, mit Padding krieg ichs zwar dahin wo es hinsoll, wenn ich die Pixel richtig angebe, aber meine Ränder links und rechts sind und bleiben weg ._.
Warum ist das so und was kann ich dagegen tun?
24.04.2006, 09:05
Pik

Zitat:

Zitat von July

Nö, will er auch nicht >_> Also ich mein, mit Padding krieg ichs zwar dahin wo es hinsoll, wenn ich die Pixel richtig angebe, aber meine Ränder links und rechts sind und bleiben weg ._.

Die Randgrafiken sind nicht weg, sondern werden von der Liste (bzw. dessen Hintergrund) überdeckt und das komischerweise über die 132 Pixel hinaus. Du kannst die Breite ja nochmal in die Liste schreiben :D. Allerdings müßte dann der Abstand links und rechts mit padding anstatt mit margin geregelt werden.

Dann funktioniert ja mein Vorschlag mit dem Abstand zwischen den Navigationskästen nicht, also nochmal was anderes:
<td colspan="3" style="padding-top: 5px;"><img src="ueberuns.png" alt="Über uns"/></td>
24.04.2006, 13:56
Tha_Ira

also ich fänds ja wesentlich einfacher, wenn du die untere Randgrafik der Kästchen einfach ein um die paar Pixel mit der hellblauen Hindergrundgrafik verlängerst, dann brauchst du weder Listen, noch anderen komischen Verrenkungskram zu machen, was letztendlich nur zu neuen Problemen führt, sondern kannst deine Kästchen schön ordentlich untereinander setzen und der Abstand ist immer genau so, wie du es haben möchtest ;)
24.04.2006, 15:50
dead_orc

Versuch einfach mal, den <li>s ein style="background-color: transparent zu geben? o_O
Und pack den ganzen CSS-Kram bitte in ne externe Datei. Ist IMO leichter zu managen und vor allem kann ich dann direkt im Browser am CSS rumspielen :P
24.04.2006, 16:28
July

Juhu, ich habs \o/
Ich weiß zwar nich genau wieso, hab jetzt alles, was ich mit margin gemacht hab, rausgeschmissen, bzw. auf 0 gesetzt, dann das ganze mit padding gemacht, dann gings. Naja, war wohl eher Zufall :D
Aber die Listendefinition hab ich dann auch in die css-Datei gepackt ^^"
Bin da halt noch nicht ganz so fit, wie das mit ausgelagert und so funktionert, das muss ich noch verinnerlichen :D Bin schon froh, dass ich überhaupt so mit CSS klarkomme, hab damit vorher nicht wirklich gearbeitet, außer mal ne Hintergrundfarbe im Body angegeben.

Danke jedenfalls für eure Hilfe :) Ich hoffe, das wars erstmal *g*
01.05.2006, 15:56
July

*thread wieder ausbuddelt*

Ich hab nochmal ne Frage, nicht zu der Seite und wohl auch nicht wirklich zu CSS, aber ich hab keine Lust nen neuen Thread aufzumachen :D

Habe ja noch eine andere Website. Bei der soll jetzt auch ein Footer eingebaut werden.
Nur wär das ganze ziemlich blöd, wenn der Footer immer nach oben rutscht, der soll schön ganz unten sein, egal wie lang die Navigation ist.
Bei kleineren Auflösungen ist die navi links ja schnell gefüllt, aber bei größeren Auflösungen rutscht der Footer dann nach oben.
Gibt es eine Möglichkeit, dem zu sagen, dass er grundsätzlich ganz unten sein soll, egal wie viel Freiraum dann dazwischen wäre?
Am besten natürlich ne Möglichkeit, die für alle Browser gilt :)
01.05.2006, 16:20
chinmoku

Arbeitest du mit div-Tags?
Mit denen dürfte es gehen. Habs grad mal mit einer Auflösung von 800x600 getestet ^^ und sehr schnell wieder geändert XD
01.05.2006, 19:02
July

Zitat:

Zitat von chinmoku

Arbeitest du mit div-Tags?
Mit denen dürfte es gehen. Habs grad mal mit einer Auflösung von 800x600 getestet ^^ und sehr schnell wieder geändert XD

Ja, wird mit divs gearbeitet.
Wär aber nett, wenn du mir eventuell ne Anleitung geben könntest ^^ Laut meiner Freundin, die sich damit etwas mehr auseinander gesetzt hat, hat sie wohl was gefunden, was aber nicht so ganz funktioniert hat.
01.05.2006, 19:43
chinmoku

Das 3-Spalten-Layout sollte dir da weiterhelfen. Damit hab ich auch gearbeitet. Das Tutorial sollte eigentlich alles erklären ^^
01.05.2006, 19:49
Pik

Zitat:

Zitat von chinmoku

Das 3-Spalten-Layout sollte dir da weiterhelfen. Damit hab ich auch gearbeitet. Das Tutorial sollte eigentlich alles erklären ^^

Öhm, da geht's hauptsächlich um PHP. Das angesprochene Layout ist dort nur Mittel zum Zweck, um die PHP-Ausgabe zu veranschaulichen ^^

Wegen dem Footer guck ich mich nochmal um, das ist etwas schwieriger und auf die Schnelle hab' ich jetzt auch nichts gefunden.
01.05.2006, 19:55
chinmoku

Zitat:

Öhm, da geht's hauptsächlich um PHP. Das angesprochene Layout ist dort nur Mittel zum Zweck, um die PHP-Ausgabe zu veranschaulichen ^^

Ui, genau das wollte ich eigentlich vermitteln ^^'

Also im letzten Div-Tag quasi:

PHP-Code:

<?php <div id="footer"> Copyright by "bla" "bla". Design by "blub". All rights reserved. <br> Alle Angaben ohne Gewähr. Copyright 2006. "Blub" ^^ </div> ?>
01.05.2006, 20:19
Pik

Und was hat das mir ihrer Frage zu tun? :D Der Footer ist damit aber nicht automatisch am Seitenende.

So, wenn der Footer in einem div-Element steht kannst du den mittels position: absolute; bottom: 0; am unteren Rand ausrichten, allerdings klebt der bei mir dazu am linken rand, auch mit margin: auto http://www.multimediaxis.de/images/s.../old/szuck.gif
01.05.2006, 22:04
chinmoku

Achso, ich dachte es geht um den Aufbau von div-Tags.
Wenn es um eben diese von dir angesprochenen Positionierungen geht, verwende ich diese Seite.
Fu, und irgendwo muss das stehen ^_^

Auf meiner Seite rutsch der footer wohl nicht nach oben, weil links noch ein Banner hervorragt. Müsste den mal wegpacken, um zu gucken, ob mein Footer nach oben wandert ._.
02.05.2006, 16:32
July

Zitat:

Zitat von Pik

So, wenn der Footer in einem div-Element steht kannst du den mittels position: absolute; bottom: 0; am unteren Rand ausrichten, allerdings klebt der bei mir dazu am linken rand, auch mit margin: auto http://www.multimediaxis.de/images/s.../old/szuck.gif

Das dürfte wohl nich unbedingt das Problem sien, da der Footer die ganze Breite einnehmen soll, wenn ich das richtig verstanden habe.

So wie du das gesagt hast, hat meine Freundin das auch ausprobiert. Da gibt jedoch das Problem, dass der Footer immer irgendwie da unten ist, bei längerem Content dieser dann da runterrutscht, wenn ich das richtig verstanden hab (meine Auflösung hier ist größer, da is bei mir nix verrutscht).
http://www.rhejvandar.de/neueHP/test2.html <-- Testseite zum Angucken.

Sie hat auch nach anderen Lösungen gesucht und folgendes gefunden:
http://www.themaninblue.com/writing/...ve/2005/08/29/

Das funktioniert bei ihr wohl auch soweit, aber wenn sie in den oberen Div eine Tabelle oder einen weiteren Div setzt, wird der äußere Div nicht mehr mit dem Inhalt gedehnt und es passiert das gleiche wie bei der Testseite oben.
02.05.2006, 18:00
Pik

Ich glaube ich hab dich falsch verstanden und tu's immernoch ^^. Also, soll der Footer immer am Contentbereich kleben, auch wenn der Contentbereich kürzer ist, als die Navigation?

http://img330.imageshack.us/img330/1272/desk4yi.jpg

So siehts bei mir aus. Wie soll es denn aussehen?
02.05.2006, 19:02
July

Zitat:

Zitat von Pik

Ich glaube ich hab dich falsch verstanden und tu's immernoch ^^. Also, soll der Footer immer am Contentbereich kleben, auch wenn der Contentbereich kürzer ist, als die Navigation?

http://img330.imageshack.us/img330/1272/desk4yi.jpg

So siehts bei mir aus. Wie soll es denn aussehen?

Ja, so solls ja aussehen.
wenn die Auflösung aber kleiner ist und der contentbereich groß ist, so dass man eigentlich scrollen müsste, schiebt sich der Inhalt unter den Footer.