Hallo, Gast! (Registrieren)

Wir wünschen allen Besuchern frohe Ostern!

Letzte Ankündigung: MyBB 1.8.37 veröffentlicht (04.11.23)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Headergrafik unabhängig vom Inhalt positionieren ?
#1
Sad 
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 Cool

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

Gruß,
Michael
[Bild: banner.png]
Support erfolgt NUR im Forum!
Bitte gelöste Themen als "erledigt" markieren.
Beiträge mit mangelhafter Rechtschreibung/Grammatik werden kommentarlos gelöscht.
Zitieren
#3
Smile 
Danke, genau das hatte ich gesucht Cool

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 ^^
Zitieren
#4
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>
Zitieren
#5
(02.02.2009, 06:59)linwinman schrieb: 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 Cool

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 Wink

Code:
.logo {
    border: 1px solid #ffffff;
}
Zitieren
#6
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>
Zitieren
#7
Danke für den Tip ! Das war des Rätsels Lösung Smile


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
Zitieren
#8
. gilt für das HTML-Attribut class, # für das Attribut id und nichts davor für HTML-Tags.
[Bild: banner.png]

Bitte die Foren-Regeln beachten und im Profil die verwendete MyBB-Version angeben.
Zitieren
#9
Danke ^^
Zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  einzelne Elemente positionieren Schroeerg 1 1.316 17.01.2012, 21:53
Letzter Beitrag: StefanT
  entfernen & positionieren Yugato 9 2.852 10.01.2010, 11:37
Letzter Beitrag: wWs
  horizontales Positionieren eines Tables im Beitrag Jockl 4 2.095 07.12.2009, 21:53
Letzter Beitrag: Jockl
  Navigation oberhalb der Headergrafik Domic 11 3.924 25.07.2009, 10:16
Letzter Beitrag: CARL