3 Sachen zu einer Topbar zusammenfügen

Zoker

Grünschnabel
Hallo zusammen,

Ich möchte auf meiner Homepage eine Topbar einfügen.

Diese soll immer am oberen Bildschirmrand angezeigt werden.

Wenn man aber ganz oben ist, sollte die Leiste nicht den obersten Bereich der Seite überdecken.

Also die Homepage sollte, um die Höhe der Topbar nach unter verschoben werden.

Das Problem ist, das ich mehrere Unterseiten habe. Darunter befindet sich ein phpBB Forum und ein Wordpress Blog.

Ich möchte das diese Infobar auf jeder dieser Unterseiten angezeigt wird, also brauche ich eine Methode die jede x-Beliebige Seite nach unten verschiebt.

Hier sind die drei Sachen, die die Infobar bilden soll:
  1. Die Grundlage soll diese Loginbar bilden: http://www.red-team-design.com/simple-and-effective-dropdown-login-box
  2. Dann möchte ich links, wo noch Platzt ist dieses Menü einbinden: http://www.red-team-design.com/cool-css3-navigation-menu
    Aber nur die eckigen Elemente in der Mitte.
  3. Als letztes soll noch eine Art "hide" Button eingefügt werden, mit dem die Topbar "eingefahren" werden kann.

Ich habe hier mal mit Photoshop ein Bild zusammen gebastelt, wie die Infobar ungefähr aussehen soll:
26cflzal.png


Kann mir das einer zusammen bauen (insofern das nicht zu viel Aufwand ist)?

Ich brauche diese Infobar echt dringend, kenne mich aber nicht allzu gut mit CSS aus.

Notfalls würde mir auch eine ausführliche Beschreibung ausreichen.

Das wäre echt super toll :D

Vielen Dank schon mal

the_zoker_09
 
Zuletzt bearbeitet:
Wenn Du das jemanden für dich machen lassen willst, schreibt es doch in die Jobbörse. Wenn dir deine Versuche das umzusetzen nicht gelingen, zeig deinen bisherigen Quellcode damit man dir dabei Tipps geben kann.
 
Ja so ungefähr, nur das die Leiste
1. von Anfang an geöffnet sein soll
2. nur auf klicken reagiert
3. etwas sanfter "einfahren"

Also ein Klick auf den Pfeil und sie sollte verschwinden (also bis auf den Pfeil natürlich)

Aber sonst schon mal nicht schlecht.

Mein Hauptproblem zurzeit ist allerdings, das bei den beiden Sachen die ich zusammenfügen will, beides mal ein ul und li vorkommt.

Ich möchte aber das es bei beiden nicht mehr vorkommt, da ich es noch anders wo auf der Seite nutzen möchte.

Also wie kann ich beide ul und li (jeweils unterschiedlich) abändern, so dass ich sie auf meiner Seite noch einmal verwenden kann?
 
Mit ul und li meine ich sowas wie Aufzählungen.
Also:
  1. a
  2. b
  3. c
Und viele Designer verwenden diese, um ihre Menüs zu erstellen.

Dafür ändern sie die Eigenschaften solcher Aufzählungen dementsprechend ab.

Code:
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

nav li {
  float: left;
}
 
Mein Hauptproblem zurzeit ist allerdings, das bei den beiden Sachen die ich zusammenfügen will, beides mal ein ul und li vorkommt.

Ich möchte aber das es bei beiden nicht mehr vorkommt, da ich es noch anders wo auf der Seite nutzen möchte.

Also wie kann ich beide ul und li (jeweils unterschiedlich) abändern, so dass ich sie auf meiner Seite noch einmal verwenden kann?


? ? ?
Ansonsten ist es mir schon klar was diese Tags bedeuten.
 
Zuletzt bearbeitet:
Zurück