Page Header – Full
This section explains how to construct the global ImmobilienScout24 header. You will find a complete example of a real-life header, followed by a detailed look at the points that you can tweak to your needs.
Things to sort out:
- Location of logo image
- Example for possible fallback header for small devices
- Login – dynamic elements
Responsiveness
The full header is partly responsive in that it will fit any display size in the “lap” and “desk” states. However, there is no definition of the full header for smaller devices. As a result, this header will be hidden on palm-sized devices.
Use a light-weight fallback header for small devices. You can switch between the two using the state-specific hiding classes.
Full Code Example
This is an example header based on the actual live header for the Hausbau category as at 2013-12-06.
<header class="header-full"> <div class="header-top"> <a href="/de/finden/wohnen/index.jsp" title="Zur Startseite"> <img src="../../img/logo/logo.png" width="112" height="56" alt="ImmobilienScout24" class="header-logo" /> </a> <span class="header-claim">Der Marktführer: Die Nr. 1 rund um Immobilien</span> <h6>Immobilienwelten</h6> <ul class="header-worlds"> <li class="active"><a href="/de/finden/wohnen/index.jsp"><span class="header-verbose">Immobilien zum </span>Wohnen</a></li> <li><a href="/de/finden/gewerbe/index.jsp"><span class="header-verbose">Immobilien für Ihr </span>Gewerbe</a></li> <li><a href="/de/anbieten/immobilien-inserieren.jsp"><span class="header-verbose">Immobilien zum </span>Anbieten</a></li> <li><a href="/eigentuemer/"><span class="header-verbose">Immobilien-</span>Eigentümer</a></li> </ul> <ul class="header-login"> <li> Willkommen! <a href="/sso/login.go">Anmelden</a> oder <a href="/sso/register.go">neu registrieren</a>. </li> </ul> </div> <div class="header-sub-navigation"> <h6>Navigation</h6> <ul class="header-categories"> <li><a href="/wohnen/">Suchen</a></li> <li class="header-category-new"><a href="/suchagent/gesuche">Suchanzeigen</a></li> <li><a href="/baufinanzierung/">Baufinanzierung</a></li> <li class="active"><a href="/bauen/">Hausbau</a></li> <li><a href="/einrichten/">Wohnideen</a></li> <li><a href="/umzug/">Umzug</a></li> <li><a href="/de/immobilienbewertung/index.jsp">Markt & Preise</a></li> <li><a href="/anbieter/">Branchenbuch</a></li> </ul> <ul class="header-account-tools"> <li><a href="/sso/login.go?returnUrl=/geschlossenerbereich/merkzettel.html"><span>Merkzettel</span></a></li> <li class="last"><a href="/geschlossenerbereich/start.html"><span>Mein Konto</span></a></li> </ul> </div> <div class="header-content-navigation"> <ul class="header-topics"> <li><a href="/bauen/goldencube2014.html">Golden Cube 2014</a></li> <li><a href="/Lead/Start/Musterhaus/">Musterhäuser</a></li> <li><a href="/Lead/Start/Hausbau/">Haus Kataloge</a></li> <li><a href="/bauen/musterhausparks.html">Musterhausparks</a></li> <li><a href="/bauen/bauplanung.html">Bauplanung</a></li> <li><a href="/bauen/news.html">Hausbau-News</a></li> </ul> </div> </header>
![ImmobilienScout24](../../img/logo/logo.png)
Immobilienwelten
- Willkommen! Anmelden oder neu registrieren.
Scout24 Verticals
The standard page layout has links to all of the Scout24 Group's Verticals at the top of the page.
While visually the top-most element on the page, they are meant to be down low in the source code for
SEO-related reasons.
To make this work, the link bar needs to be placed at the end of your page wrapper. It will then be positioned absolutely to make sure it is displayed at the top for lap-sized and desk-top devices.
The page wrapper, in turn, needs to get the class .has-scout24-verticals
to make space at the top
for the link bar.
<!-- <body> --> <div class="has-scout24-verticals"><!-- this would be your page wrapper --> Other<br /> page<br /> content. <div class="scout24-verticals"> <ul> <li><a target="_blank" id="Scout24" title="Suchen bei Scout24" href="http://www.scout24.de">Scout24</a></li> <li><a target="_blank" id="AutoScout24" title="Auto kaufen & verkaufen bei AutoScout24" href="http://www.autoscout24.de">AutoScout24</a></li> <li><a target="_blank" id="FinanceScout24" title="Darlehen bei FinanceScout24" href="http://www.financescout24.de">FinanceScout24</a></li> <li><a target="_blank" id="FriendScout24" title="Singles bei FriendScout24" href="http://www.friendscout24.de">FriendScout24</a></li> <li><a target="_blank" id="JobScout24" title="JobScout24 – Jobs und Stellenangebote finden" href="http://www.jobscout24.de">JobScout24</a></li> <li><a target="_blank" id="TravelScout24" title="Reisen Hotels Last Minute Urlaub bei TravelScout24" href="http://www.travelscout24.de">TravelScout24</a></li> </ul> <span class="powered-by-telekom"> <a target="_blank" href="http://wirtschaft.t-online.de/heizoelpreise-und-heizoelpreisrechner-guenstig-heizoel-kaufen/id_12803086/index"> <img src="../../img/header/powered-by-telekom.png" width="104" height="19" alt="Heizölpreise" /> </a> </span> </div> </div> <!-- </body> -->