#main ist in firebug verschoben

Hallo zusammen,
erst mal Hut ab, das neue Forum ist echt toll geworden, ihr habt ganze Arbeit geleistet! Danke!
Schön, dass es auch die Ecke für Newbies gibt. Dann mach ich mal den Anfang:

Ich packe gerade diese Seite http://www.witte-willich.de/index.php/start in TYPOlight und verwende dazu Firebug. Allerdings zeigt mir der alles, was sich innerhalb von div#main befindet, nach rechts verschoben an, und zwar genau um die Breite von div#left. Das komische daran ist, dass ALLE ANDEREN Container richtig angezeigt werden, also auch div#left und div#right. Das macht mich wahnsinnig :eek:
Habe ich irgendwo etwas grundlegendes übersehen? Danke für jede Anregung.


(Liebe Nina, falls das hier unpassend ist, verschieb es gerne zu den CSS-Fragen.)

hatte das problem auch und auch bei vielen anderen TL systemen beobachtet.

Ich bilde mir ein dem #wrapper eine position:relative; zugewiesen zu haben und dann hats gestimmt.
Hab leider keine Ahnung ob das korrekt ist oder irgendwie problematisch werden könnte. probiers aus und teste.

mfg savi

Hallo savi!

Jaaaa! Danke! Das wars!!! :D


edit:
Aber .. oh-oh ... jetzt ist die komplette Firebug-Markierung nach unten verschoben ... :(

In meiner kommagucken.css ist #wrapper folgendermaßen definiert:

Code:

---

#wrapper {
margin-top:20px;
position:relative;
}

---

Die automatisch generierte CSS, die ich über das Seitenlayout nur bedingt beeinflussen kann, gibt für #wrapper aber folgendes vor:

Code:

---

#wrapper {
margin:0 auto;
width:900px;
}

---

Genau um diesen Betrag ist die Firebug-Markierung nun nach unten verschoben. Was kann ich dagegen machen?

Hallo bibib,

versuche einmal folgende Formatierung:

Code:

---

#wrapper {
margin:20px auto 0 auto;
width:900px;
}

---

Super, planepix, vielen Dank! :) Das geht jetzt!

Nur der wrapper ist noch nach unten versetzt, ich nehme stark an, das liegt an der automatisch generierten CSS im head-Bereich:

Code:

---

<!--/*--><![CDATA[/*><!--*/
* html body { text-align:center; }
#wrapper { width:900px; margin:0 auto; }
#header { height:175px; }
#left { width:185px; }
#right { width:185px; }
#main { margin-left:185px; margin-right:185px; }
#footer { height:30px; }
/*]]>*/-->

---

Hab ich die Möglichkeit, da dranzukommen, oder sollte ich besser damit leben und die Finger davon lassen?

Probier mal folgendes:

Code:

---

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

---

Zitat:

---

Zitat von bibib

Super, planepix, vielen Dank! :) Das geht jetzt!

Nur der wrapper ist noch nach unten versetzt, ich nehme stark an, das liegt an der automatisch generierten CSS im head-Bereich:
Hab ich die Möglichkeit, da dranzukommen, oder sollte ich besser damit leben und die Finger davon lassen?

---

Wenn Du ein eigenes CSS-Dokument mit einbindest kannst Du diese Werte ja "überschreiben".

Grundsätzlich würde ich in ein CSS-Dokument aufnehmen:

Code:

---

body
{
margin:0;
padding:0;
}

---

Tut sich nix, Nils ...

sieht im Firefox doch gut aus, was der Firebug darstellt ist nicht immer zwingend entscheidend.

Schreib es einmal so:

Code:

---

/* Style sheet kommagucken_seitenlayout */
body{background:#FFFBF7;margin:0;padding:0;border:0;}
#wrapper{margin: 20px auto 0px auto;}
#header{background-image: url(tl_files/kommagucken/images/header_kommagucken.jpg);}
#container{background-color: #FDF7ED;background-image: url("tl_files/kommagucken/images/wrapcontent_back.jpg");background-repeat: repeat-y;}
#left{min-height: 485px;padding-top: 30px;background-color: #FEE6C1;}
#main{min-height: 485px;padding: 30px 35px 20px 30px;}
#footer{margin-bottom: 20px;background-color: #F19321;}

---

Zitat:

---

Zitat von planepix

Wenn Du ein eigenes CSS-Dokument mit einbindest kannst Du diese Werte ja "überschreiben".

---

Das bedeutet also, dass mein selbst eingebundenes CSS nach dem automatisch generierten CSS im Head-Bereich abgearbeitet wird und dieses demnach überschreibt?


Ich habe für die kommagucken-Seite (mein erster TYPOlight-Versuch) alle mitgelieferten xStylesheets importiert und ändere diese ab, wie ich sie brauche. (Da ist auch margin und padding im body auf Null gesetzt, wie du empfohlen hast.) Da kommen ja einige Stylesheets zusammen. Wäre es besser, nur EIN Stylesheet zu machen, also zumindest fürs Basislayout? Ich bin noch nicht sooo sattelfest in CSS, von den "Wechselwirkungen" untereinander hab ich nicht wirklich Ahnung.

Ja die eigen erstellten CSS-Dateien werden nach den Anweisungen geladen die TYPOlight anhand der Seitenlayout-Einstellungen macht.

Es gibt (meistens) die Möglichkeit, eine Eigenschaft zu erzwingend wenn man ein "!important" nach der Anweisung schreibt, z. B.:

Code:

---

height: 200px !important;

---

dann wird die Gewichtung höher.

Ich lege mittlerweile meist 3 CSS-Dokumente an:
- navigation.css für alle Definitionen der Navigation(en)
- standard.css für alle Definitionen auf der gesamten Site
- print.css für die Druckausgabe

Ups, das hat sich überschnitten...

Okay, vielen Dank für deine Hilfe, planepix. Mit der Firebug-Anzeige kann ich jetzt leben. Und die Stylesheets werd ich überarbeiten. :)

Hallo bibib,

mit den Stylesheets ist das so eine Sache: Entweder Du hat zu viele Dateien und suchst Dich krank, oder Du hast zu wenige Dateien - und suchst Dich krank :D Den goldenen Mittelweg habe ich hier auch noch nicht gefunden, aber Planepix' Vorschlag trifft es bestimmt schon ganz gut.

Btw: Kennst Du einen von den Willichern? Ist eine Nachbarstadt von meiner.

Grüße,

Christian

HI

so ähnlich wie planepix mache ich es auch allerdings sollte man auch eine Datei basic.css einsetzen, die auch der TinyMCE "versteht". In dieser liegen dann alle Formatierungen für den reinen Text.

Sebastian

Zitat:

---

Zitat von christian

mit den Stylesheets ist das so eine Sache: Entweder Du hat zu viele Dateien und suchst Dich krank, oder Du hast zu wenige Dateien - und suchst Dich krank :D

---

Ja :D sowas hab ich mir auch schon gedacht ... aber ich werd mich auch mal an planepix halten, und notfalls gibt es ja noch die Sortierfunktion...

Zitat:

---

Zitat von christian

Btw: Kennst Du einen von den Willichern? Ist eine Nachbarstadt von meiner.

---

Wie klein die Welt ist ... dann ist die Folie über Modulentwicklung vom Usertreffen von dir? Die hab ich nämlich heute schon mal überflogen und mir gedacht, Viersen, haha, war ich auch schon. :D
Ja, ich kenne tatsächlich ein paar aus der Gegend. Der Uli (im Vorstand von der Schiefbahner Werbegemeinschaft, für die ich die Website gemacht habe) ist ein guter Freund von mir, und ein anderer Freund hat voriges Jahr sogar kurz in Viersen gewohnt. Bin auch ab und zu mal da oben in NRW. ;) Kenne diese Truppe über aboutpixel, von denen hast du ja ein paar Bilder in deiner Folie verwendet :D


@Sebastian: Danke für die Info!!!