CSS und Opera

**July** · 21.04.2006 19:17

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 ^^

**NPC Fighter** · 21.04.2006 19:19

Code:

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

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

sollte es eigentlich tun. :>

**drunken monkey** · 21.04.2006 20:35

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?

FF · 21.04.2006 21:15

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

**July** · 22.04.2006 06:47

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

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?

**seth.plate** · 22.04.2006 09:41

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

Pik · 22.04.2006 12:16

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 ^^

**July** · 23.04.2006 20:09

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

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

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?

Pik · 23.04.2006 20:51

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

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 ^_-

**July** · 23.04.2006 20:54

Ah okay

Danke für die Tipps, ich werd das mal ausprobieren, ob das alles so klappt und mich gegebenenfalls nochmal melden hier ^^

**July** · 23.04.2006 21:37

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 >_>

Pik · 23.04.2006 21:51

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

**July** · 23.04.2006 21:57

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

)

Warum muss eigentlich immer irgendein Browser rumzicken >_> Das geht bei mir echt reihum.

**Manni** · 24.04.2006 05:57

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

**July** · 24.04.2006 07:13

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?

Pik · 24.04.2006 09:05

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

. 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>

**Tha_Ira** · 24.04.2006 13:56

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

**dead_orc** · 24.04.2006 15:50

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

**July** · 24.04.2006 16:28

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

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

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*

**July** · 01.05.2006 15:56

*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

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

Thema: CSS und Opera

Themen-Optionen

Anzeige

CSS und Opera

Berechtigungen