Verlinkte Grafik im Header

[Chrishe]

Das mit dem Header werde ich später mal versuchen, sobald ich das mit dem Battelfield Logo gelöst habe.

Leider habe ich mit diesem ein Problem... wenn ich den Code von dir an die von dir angegeben Stelle setze sitzt er unter dem Databar Table und da dieser Table über die ganze Breite geht bekomme ich das Logo nicht an den oberen Rand.
Wenn ich den Code über die Databar kopiere schiebt das Logo die ganze Databar nach unten.

Damit es perfekt ist müssen beide auf der gleichen höhe sitzen.

Ich nehme an das lässt sich nur realisieren wenn der Table von der Databar umgebaut wird!?

P.S. so wie ich das sehe kann man mit der % Angabe auch die Tabelle verkleinern, allerdings müsste man dann der Tabelle sagen das sie rechtsbündig bleiben soll (nur wie?).

[Crizzo]

Nein, du kannst beides nebeneinander her "floaten" lassen.

[Chrishe]

Habe mir den verlinkten Artikel durchgelesen, verstehe es aber leider nicht so wirklich

Habe das in meine CSS kopiert:

Code: Alles auswählen

#logo {
padding-top:0px;
padding-left:13px;
float:left;

aber irgendwie funktioniert das nur so halb.

[Crizzo]

Probiers mal so:

Code: Alles auswählen

#logo {
    float: left;
    padding-left: 13px;
    padding-top: 10px;
}

und das hier:

Code: Alles auswählen

#datebar {
    color: #B3B7BA;
    float: right;
    line-height: 25px;
    padding-right: 5px;
    padding-top: 1px;
}

Grüße

[Chrishe]

Danke... aber leider hängt die Grafik immer noch unten.

P.S. nur dein Letzter Besuch und Aktuelle Zeit kleben jetzt zusammen.

[Crizzo]

Mach mal einen Screenshot und schreib hier mal die Login-Daten für einen Test-Account in das Thema.

[Chrishe]

[ externes Bild ]

User: Testuser
PW: Welcome!

[Crizzo]

Gut, dass liegt an dieser dämlichen Tabelle.

Such mal diese Stelle in deinem Code der overall_header.html:

Code: Alles auswählen

<table width="100%" cellspacing="0">
      <tr>
         <td class="gensmall_li"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF --></td>
         <td class="gensmall_re" align="{S_CONTENT_FLOW_END}">{CURRENT_TIME}<br /></td>
      </tr>
      </table>

Und lösch sie und pack dafür das hier hin:

Code: Alles auswählen

<!-- IF S_USER_LOGGED_IN --><p style="text-align:right;">{LAST_VISIT_DATE}</p><!-- ENDIF -->
         <p style="text-align:right;">{CURRENT_TIME}</p>

[Chrishe]

Habe noch was heraus gefunden... ich weiß nicht was für ein Browser du benutzt, aber ich nutze Chrome.

Im Chrome sieht es so aus wie auf dem Screenshot zu sehen, aber im Firefox und Safari passt das Logo 1A (das andere ist noch eng zusammen, aber das Logo passt)

P.S. Cache habe ich natürlich schon geleert.


P.S.2 1000 Dank BlackHawk... jetzt passt es prima (auch im Chrome)


P.S.3 Das mit der Header Verlinkung lass ich besser... habe mir was anderes ausgedacht, allerdings weiß ich nicht ob das überhaupt so einfach realisierbar wäre.

Ich würde gerne statt dem ganzen Header nur die gelben Buttons (aktuell noch nur eine Grafik) mit einem Link belegen. Ist das möglich? vielleicht so ähnlich wie mit dem Battlefield Logo?

[Crizzo]

Du hast ja jetzt ungefähr folgendes:

Code: Alles auswählen

<div id="header">
   <div id="datebar">
     <!-- IF S_USER_LOGGED_IN --><p style="text-align:right;">{LAST_VISIT_DATE}</p><!-- ENDIF -->
         <p style="text-align:right;">{CURRENT_TIME}</p>
   </div>
      <div class="clr"></div>
</div>

Mhm, du könntest mal folgendes probieren:

Code: Alles auswählen

<div id="header">
<a id="monkeys" href="">Monkeys</a>
<a id="going" href="">Going</a>
<a id="crazy" href="">Crazy</a>
   <div id="datebar">
     <!-- IF S_USER_LOGGED_IN --><p style="text-align:right;">{LAST_VISIT_DATE}</p><!-- ENDIF -->
         <p style="text-align:right;">{CURRENT_TIME}</p>
   </div>
      <div class="clr"></div>
</div>

und im CSS folgendes mit einbauen:

Code: Alles auswählen

a#monkeys, a#going, a#crazy {
position: absolute;
width: 287px;
height: 34px;
top: 230px;
text-ident: 300px;
}

a#monkeys {
left: 23px;
}

a#going {
left: 353px;
}

a#crazy {
left: 684px;
}

Mit den "left" und "top" Angaben musst du ein wenig rumspielen, bis es passt.

und hier das position:relative ergänzen:

Code: Alles auswählen

#header {
    background: url("http://www.themonkeys.de/styles/themonkeys/theme/./images/header.png") no-repeat scroll center top transparent;
    height: 318px;
    margin: 0 auto;
    padding: 0;
    width: 1000px;
}

Damit legst du quasi einen Link über die Buttons. Ist mir Vorsicht zu genießen, sollten aber ganz funktionieren. Einfach mal ausprobieren!