Homepage selbermachen 7.852 Themen, 35.619 Beiträge

Verfolgung starten Optionen

Wie bekomme ich so ein CSS Layout hin?

Yves3 / 5 Antworten / Baumansicht Nickles

Hallo

Ich möchte so etwas ähnliches wie hier mit reinem CSS machen: http://de.selfhtml.org/css/layouts/anzeige/nav_inline.htm

Dort werden die einzelnen Punkte der Liste aber als Buttons für ein Menu verwendet, bei mir soll dort eine Input-box mit einer Überschrift darüber enthalten sein.
Der Knackpunt an dem Ganzen ist der Zeilenumbruch, der zwangsläufig zwischen die Beschriftung und die InputBox muss.
Dieser sorgt nämlich dafür, dass die ganze Liste vertikal und nicht horizontal dargestellt wird (ich möchte es horizontal).

Kann mir jemand helfen?

bei Antwort benachrichtigen
Rheinlaender Yves3 „Wie bekomme ich so ein CSS Layout hin?“
Optionen

Hasse mal 'ne Skizze? :))

Im Ernst, mach doch zwei von diesen Listen. Eine eigene nur mit den Überschriften, Zeilenumbruch, dann eine mit den Boxen.

Gruß
Rheinlaender

bei Antwort benachrichtigen
Yves3 Rheinlaender „Hasse mal ne Skizze? : Im Ernst, mach doch zwei von diesen Listen. Eine eigene...“
Optionen

Ich hau dir gleich eine Skizze um die Ohren ;))

Ne im Ernst...
So wie du das vorschlägst geht das nicht gut, die InputBox ist dann nie richtig unter dem Titel.
Ich denke schon, dass man die irgendwie als Einheit behandeln muss.
Ich hab ein Bisschen mit dem float Attribut rumprobiert, da krieg ich aber nie dort einen Zeilenumbruch hin, wo ich will.
Dann kann ich die einzelnen Blöcke (Titel + Inputbox) auch mit postition: absolute; leftt: irgendwas; top: irgendwas; genau positionieren, ich möchte aber zwischen den Blöchen einen absoluten Abstand in Pixeln und das geht dann scheinbar nicht mehr, da das margin Attribut zusammen mit der absoluten Positionierung nicht funktioniert.

Die Blöcke sollten eine relative Breite haben, der horizontale und vertikale Abstand zwischen ihnen soll absolut sein (x Pixel).
Bei der Höhe bin ich mir noch nicht ganz sicher... ist wohl nicht so wichtig.



bei Antwort benachrichtigen
Rheinlaender Yves3 „Ich hau dir gleich eine Skizze um die Ohren Ne im Ernst... So wie du das...“
Optionen
Ich hau dir gleich eine Skizze um die Ohren ;))
Au ja! Gib's mir!

Das float-Ding benutzt Du doch für die feste Breite, nicht für den Umbruch.
Wenn Du zwei ul-Elemente untereinander mit fester Breite anordnest, müssen die doch zwangsläufig genau untereinander stehen. Also erst die ganzen css-Formatierungen inkl. float und danach so:
<ul>
<li>Überschrift1</li>
<li>Überschrift2</li>
<li>Überschrift3</li>
</ul>
<br>
<ul>
<li>Box1</li>
<li>Box2</li>
<li>Box3</li>
</ul>
bei Antwort benachrichtigen
Hausmeister Krause Yves3 „Wie bekomme ich so ein CSS Layout hin?“
Optionen

werfe mal einen blick hierauf:

http://css.fractatulum.net/beispiele.htm

dort sind viele css basierte layouts mit beispielen zu finden. vielleicht findest du da, was du brauchst.

Wenn Du Sorgen hast, dann erzähle sie nicht Deinen Freunden, sondern Deinen Feinden, denn die freuen sich darüber. - Harald Lesch
bei Antwort benachrichtigen
Yves3 Hausmeister Krause „werfe mal einen blick hierauf: http://css.fractatulum.net/beispiele.htm dort...“
Optionen

Ich hab ein Layout mit Tabellen gemacht, ging mir zu lange und ich habe im Moment leider nicht Zeit um lange zu basteln.
Trotzdem danke, besonders für den Link... den kannte ich schon mal, hab ihn dann aber vergessen und die Bookmarks irgendwann verloren. :)

bei Antwort benachrichtigen