Hallo zusammen,
Ich bin gerade auf ein Problem gestoßen bei dem ich einfach nicht weiterkomme.
Ich erstelle ein Toolbar für meine Seite und bin zurzeit soweit, das alles passt, bis auf die position der dropdowns
Hier mal ein Bespiel wie es bei mir aussieht, wenn ich auf Login klicke
Was ich genau erreichen will ist folgendes, damit sich die seite besser benutzen lässt
Hier ist die Rechte seite des Dropdowns am rechten Ende des Listenpunktes von Login ausgrichtet, bei mir am linken.
Der Htmlteil meiner Toolbar kommt hier (nur ein auszug, sollte ein buchstabe falsch sein, im normalen code funktionieren die klassenzuweisungen):
Hier nun der CSS part (Wieder nur relevante stellen):
#toolbar wird über jQuery geregelt, deswegen jetzt kein css sondern nur die beschreibung
nun aber css
Ich wäre sehr dankbar wenn mir jemand erklären kann, wie ich das ganze hinbekomme.
Ich habe es schon mit floats und text-aligns versucht jedoch blieb die box immer falsch ausgerichtet.
Danke schonmal
Euer John
Ich bin gerade auf ein Problem gestoßen bei dem ich einfach nicht weiterkomme.
Ich erstelle ein Toolbar für meine Seite und bin zurzeit soweit, das alles passt, bis auf die position der dropdowns
Hier mal ein Bespiel wie es bei mir aussieht, wenn ich auf Login klicke
Code:
----------------------------------------------------
Logo ... .... Login Uhrzeit
----------------------------------------------------
| Loginform | <- wenn dass Feld zu groß ist wird hier auch abgeschnitten
-----------------Was ich genau erreichen will ist folgendes, damit sich die seite besser benutzen lässt
Code:
----------------------------------------------------
Logo ... .... Login Uhrzeit
----------------------------------------------------
| Loginform |
-----------------Hier ist die Rechte seite des Dropdowns am rechten Ende des Listenpunktes von Login ausgrichtet, bei mir am linken.
Der Htmlteil meiner Toolbar kommt hier (nur ein auszug, sollte ein buchstabe falsch sein, im normalen code funktionieren die klassenzuweisungen):
HTML:
<div id="toolbar">
<div class="left">
<ul>...</ul>
</div>
<div class="left">
<ul class="left-ul">
<li>Login<div class="dropdown">Loginform</div></li>
.......
</ul>
</div>
</div>Hier nun der CSS part (Wieder nur relevante stellen):
#toolbar wird über jQuery geregelt, deswegen jetzt kein css sondern nur die beschreibung
Code:
'overflow': 'visible',
'width': '100%',
'height': '30px',
'position': 'fixed',
'top': '0',
'left': '0',
'font-size': '14px',
'color': '#FFFFFF',
'background': 'url(' + config.imagePath + 'bg.png)',
'z-index': '999999'nun aber css
Code:
.left
{
position: absolute;
right: 0;
}
.left-ul
{
margin: 0;
padding: 0px;
text-align: left;
float: left;
}
.left-ul li
{
display: inline-block;
position: relative;
top: 0;
margin: 0 5px;
padding: 0px;
}
.dropdown
{
position: absolute;
border: 1px solid #000;
width: 400px;
top: 30px;
}Ich wäre sehr dankbar wenn mir jemand erklären kann, wie ich das ganze hinbekomme.
Ich habe es schon mit floats und text-aligns versucht jedoch blieb die box immer falsch ausgerichtet.
Danke schonmal
Euer John
