[corun]

Mein Forum hat eine feste Breite von 944 px, meine Headergrafik ist ebenfalls 944 px breit und hat eine Höhe von 163 px.

Momentan ist es ja so das die Headergrafik demselben Abstand zu den Rändern der Inhalstabelle unterliegt wie der Inahalt ( z.B.: Foren-Kategoerien, Forenstatistiken usw. )

Wie bekomme ich es hin das sich die Headergrafik unabhängig von dem normalen Inhalt positionieren lässt ?

Habe hierfür schonmal ein wenig mit der global.css rumprobiert, dort habe ich folgenden Code:

#container {
background: #fff;
width: 924px;
color: #000000;
border: 1px solid #823995;
margin: 20px auto;
padding: 10px;
text-align: left;
}

Wenn ich hier den Wert für margin von 20px auf 0 px setze passt sich der komplette Inhalt des Forums + Headergrafik bündig an die linke und rechte Aussenkante des Forums an. Das erziehlt zwar den gewünschten Zweck in Bezug auf meine Headergrafik zieht aber auch gleichzeitig den ungewünschten Nebeneffekt nach sich, das der Inhalt wie z.B.: Foren-Kategoerien, Forenstatistiken usw. bündig mit dem Hintergrund sind ohne das wie es normalerweise der Fall ist, hier ein Abstand von 10px vorhanden ist.

Und genau hier komme ich nicht weiter, da wie gesagt immer alles zusammen verschoben wird (Inhalt des Forums + Headergrafik).

Wenn sich der Inhalt nicht so einfach von der Headergrafik trennen lässt könnte man natürlich auch einen eigenen Container (944 px x 136px) über dem derzeitigen oberen Ende des Forums platzieren.

Hier bin ich allerdings genauso schlau und bräuchte auch hierfür den richtigen Hinweis um das auch umsetzen zu können !

Hoffe auf eure Geistesblitze

thx&bye

[Michael]

Du musst den Code für das Logo im Template header nach oben verschieben, so dass es nicht mehr im #container drin ist.

[corun]

Danke, genau das hatte ich gesucht

Was micht jetzt noch interessieren würde wäre, wie ich der nun losgelösten
Headergrafik einen 1px breiten Rahmen in einer Farbe meiner Wahl gebe.
Normalerweise geht das ja per "border: 1px solid #ffffff". Aber wie kann ich den css Befehl nun mit folgendem Code verbinden:

<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>


Nochmals Danke im Voraus ^^

[linwinman]

Hallo corun,

verwende hierfür in "Admin-CP > Themes > dein Theme > global.css > Stylesheet bearbeiten: Fortgeschrittene Methode" die Klasse

Code:

.logo {
    border: 1px solid #ffffff;
}

Alternativ:

Code:

<div class="logo" style="border:1px solid #ffffff;"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

[corun]

Hallo corun,

verwende hierfür in "Admin-CP > Themes > dein Theme > global.css > Stylesheet bearbeiten: Fortgeschrittene Methode" die Klasse

Code:

.logo {
    border: 1px solid #ffffff;
}

Alternativ:

Code:

<div class="logo" style="border:1px solid #ffffff;"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

Habe es eben mal ausprobiert und es funktioniert auch soweit sehr gut, nur der Rahmen welcher nun um meine Headergrafik gelegt wird ist nicht genau 944px breit sondern geht links und rechts bis an die Bildschirmenden.... . Wäre super wenn du mir noch sagen könntest wie ich den Rahmen so breit bekomme wie meine Grafik - also 944px

Danke im Voraus !

P.S.

Die Klasse logo war bei mir gar nicht vorhanden, habe sie dann einfach mal auf gut Glück als erstes ganz oben angelegt. Das brachte dann auch auf Anhieb den gewünschten Rahmen, nur eben leider auch den oben genannten kleinen BREITEN Nebeneffekt

Code:

.logo {
    border: 1px solid #ffffff;
}

[linwinman]

Versuche es einmal mit dieser Änderung:

ersetze die Klasse

Code:

.logo {
    border: 1px solid #ffffff;
}

durch

Code:

.logo img {
    border: 1px solid #ffffff;
}

Alternativ:

Code:

<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img style="border:1px solid #ffffff;" src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

[corun]

Danke für den Tip ! Das war des Rätsels Lösung


Um sowas in Zukunft selber bewältigen zu können fehlt mir noch das nötige Wissen über die Zusammenhänge, hierbei verstehe ich noch nicht so ganz den Zusammenhang zwischen der .logo img und dem div Element wo meine Headergrafik drin sitzt.

Hier nochmal der Code:

<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

Woher weiss denn jetzt der css Befehlt, das er ausgerechnet das Logo mit einem Rahmen umgeben soll, wird das mittels Klassen geregelt ?

.logo img {
border: 1px solid #ffffff;
}

Und noch eine Frage:

Im Stylesheet bearbeiten Modus im ACP finde ich verschiedenste css Klassen welche mal mit einer # dann mit einem . und auch ohne Vorzeichen aufegührt werden, wozu dient diese Unterscheidung ?

thx&bye

[StefanT]

. gilt für das HTML-Attribut class, # für das Attribut id und nichts davor für HTML-Tags.

[corun]

Danke ^^