XHTMLforum - CSS Class & ID

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - CSS Class & ID (http://xhtmlforum.de/showthread.php?t=63738)

Hallo zusammen :D

Ich hatte bisher mit CSS noch rein gar nichts zu tun, deswegen schlagt mich bitte nicht direkt wegen meiner anfängerhaften Frage ;)

Ich habe eine Domain wo ich als CMS Wordpress verwende.
Dort habe ich nun ein Forum, sowie auch einen Kalender eingebaut, der sich die Daten von meinem Google-Kalender zieht.

Nur ist dieser Kalender auf der Seite nicht wirklich mittig, also habe ich mit Opera Dragonfly ein wenig rumgespielt und gesehen, dass ich mit margin-le ft: -130px den Kalender genau mittig habe.

Nun zu meinem Problem:

Die margin-left-Attribute befindet sich in der ID #container.
Über diese ID wird auch die Sidebar sowie z.B. das Forum ausgerichtet.
D.h. sobald ich meinen Kalender mittig habe, ist die Sidebar nicht mehr sichbar und das Forum viel zu weit links.

Ich denke mal ich müsste nun eine neue ID (Bsp: #kalender) definieren mit den speziellen Werten (margin-left -130px).

Allerdings habe ich keine Ahnung wie ich jetzt genau sowas definiere?
Also wie sage ich dem Kalender nun, er soll nicht auf #container sondern auf #kalender reagieren?

Achja, der Kalender ist über ein iframe eingebunden.

Vielen Dank schonmal im Voraus!

PS: Der Code von der style.css

PHP-Code:


		
			
#container {

    float: left;

    margin: 0 -240px 0 0;

    width: 100%;

}



/* weiter unten kommt dann noch:

-------------------------------------------------------------- */



}

    #container,

    #header,

    #footer {

        margin: 0;

        width: 100%;

    }



/*

hi tigernrw

Bitte gib uns einen Link zu Seite, so ist keine vernünftige Hilfe möglich.

Danke und Gruß
Webcoder

Kalender | Balance of Power e.V.

Der Kalender soll mittig ausgerichtet sein, allerdings verschiebt sich dann auch das Forum, hatte ich ja schon geschrieben ;)

Moin,

zuerst würde ich da mal ein Plugin rausschmeissen oder brauchst du ne Abmahnung? ;)

Dein iframe (900px) ist breiter als der Container (#content 640px) wo er drinhockt.
Mit overflow:hidden für #main wird überstehendes brutal abgeschnitten. Warum überhaupt overflow:hidden? Zum Einschließen von Floats ist es nicht gut geeignet.
Warum floatet #container und hat eine negatives margin. Das erscheint mir wie ein Stochern im Nebel.

overflow raus, die Breite für #content raus, float und negatives margin von #container raus, dann springt bei mir alles ein Stück in die Mitte.

Solltest du das was ich poste nicht so richtig verstehen hilft nur noch Little Boxes durcharbeiten.

Zitat:

Zitat von hubspe (Beitrag 487415)

Moin,.....

overflow raus, die Breite für #content raus, float und negatives margin von #container raus, dann springt bei mir alles ein Stück in die Mitte.
[/URL]

Gemacht!

Nun geschieht nur das, was ich vorher in dem Post schon gesagt habe:

Da über #container anscheinend auch das Sidebar-Widget definiert wird, verschwindet es nach unten. Daher waren dort bei margin -240px.

Dswegen dachte ich, ich müsste eine neue ID extra für den Kalender definieren, weil es über #container nicht so geht, dass beide seitenkonform sind.

PS:

Danke für deinen Hinweis über Wordpress.Com-Stats... ich bin echt schockiert :x Das hätte ich von Wordpress nicht so erwartet!

Danke:!:

PS:

Ich habe nun overflow:hidden & die Breite für #content rausgenommen, allerdings ändert sich da nichts?
Das andere habe ich erstmal wieder auf Standard gesetzt, damit meine Sidebar wieder richtig angezeigt wird.

jetzt hab ich durch das Wechseln auf die Startseite die sidebar erst mal gesehen.

Deine Konstruktion ist geradezu abenteuerlich.

Ich würde #primary und #secondary in ein div (#sidebar) wickeln, dem eine feste Breite und float:right; geben.

#content bekommt auch ne feste Breite und float:left;.
Boxmodell und wahre Breite beachten.!

Danach wird durch ein geeignetes Element (#footer oder hr mit Formatierung) sauber gecleart.
#footer hat eh schon ein clear:both;. Vielleicht reicht das.

Das negative margin raus. #primary, #secondary brauchen dann auch kein float, kein overflow und keine Breite mehr. ;)

Zitat:

Zitat von hubspe (Beitrag 487415)

Solltest du das was ich poste nicht so richtig verstehen hilft nur noch Little Boxes durcharbeiten.

Hehe, gut.

Nur ist das ganze nicht MEINE Konstruktion sondern die von Wordpress :mrgreen:

Ich habe an der style.css nichts geändert!

So,

ich glaube nun wird deine Verlinkung zu Little Boxes interessant, da ich nur noch Bahnhof verstehe :D

Im Kurzen:

Ich stelle quasi zwei neue ID's mit #primary & #secondary um Sidebar und Kalender einzeln anpassen zu können, oder? :roll:

Zitat:

Zitat von tigernrw (Beitrag 487483)

Nur ist das ganze nicht MEINE Konstruktion sondern die von Wordpress :mrgreen:

au Backe Wordpress! Sozusagen Trick 17 mit Selbstüberlistung. :mrgreen:

Zitat:

Zitat von tigernrw (Beitrag 487483)

Ich stelle quasi zwei neue ID's mit #primary & #secondary um Sidebar und Kalender einzeln anpassen zu können, oder? :roll:

Du hast im Prinzip ein normales Zweispaltenlayout.
Linke Spalte: #content und rechte Spalte #primary und #secondary.
Normalerweise werden #primary und #secondary in einer #sidebar zusammengefaßt:

PHP-Code:


		
			
<div id="sidebar">
    <div id="primary"></div>
    <div id="secondary"></div>
</div>

Ah ich sehe grad beim Twentyten in der sidebar.php steht das mit dem #primary, #secondary.
Warum man das nicht wie früher mit einer div#sidebar gruppiert wird versteh ich nicht so recht

#content und #sidebar floaten in Verbindung mit einer festen Breite und werden dann sauber gecleart.

Du kannst natürlich #primary und #secondary in Verb. mit einer festen Breite floaten, wenn es kein div#sidebar gibt.

Eigentlich komisch, bei WP gab es eigentlich immer eine #sidebar.
Ob die aus Kostengründen wegrationalisiert wurde? :p