Div neben List

  • HTML

Es gibt 5 Antworten in diesem Thema. Der letzte Beitrag () ist von Mangafreak1995.

    Div neben List

    Hey :)

    Ich suche eine Möglichkeit, ein Div neben einer List anzuordnen.
    Die ListItems sind hierbei vertikal in der List. Ich habe das ganze mit Inline
    und Inline-Block versucht, komme aber nicht wirklich an ein akzeptables Ergebnis
    ran. Im Anhang mal eine Grafik dazu.

    Blau ist ein einfaches Div.
    Rot ist eine unordered List.
    Grün sind die vertikal angeordneten ListItems.

    Danke
    Bilder

    • listfiv.png

      2,56 kB, 800×600, 91 mal angesehen
    "Life isn't about winning the race. Life is about finishing the race and how many people we can help finish the race." ~Marc Mero

    Nun bin ich also auch soweit: Keine VB-Fragen per PM! Es gibt hier ein Forum, verdammt!

    Ne hässliche möglichkeit wäre float auf left zu setzen. Oder versuchs mit einer div die über beiden elementen steht und prozentmäßig passend hinzubekommen.

    Kannst du mal bissl code dazu schreiben, damit man ungefähr ne ahnung hat wos rein soll? ^^

    @davut:
    Was meinst du mit Code? Versucht hab ichs so:

    Spoiler anzeigen

    HTML-Quellcode

    1. <body>
    2. <ul class="Container">
    3. <li>
    4. <a class="Button" href="javascript:activate('0')">Hier beliebiges Icon einfügen</a>
    5. </li>
    6. <li>
    7. <a class="Button" href="javascript:acivate(1)">Hier beliebiges Icon einfügen</a>
    8. </li>
    9. </ul>
    11. <div id="TabCntrl">
    12. <div id="Page1" style="display: inline-block;">Page 1</div>
    13. <div id="Page2" style="display: none;">Page 2</div>
    14. </div>
    15. </body>
    17. </html>


    CSS:

    CSS-Quellcode

    1. #TabCntrl {
    2. width: 800px;
    3. height: 420px;
    4. border: 1px solid gray;
    5. background-color: #EAEAEA;
    6. font-family: "Segoe UI";
    7. display: inline-block;
    8. margin: 0;
    9. }
    11. .Container {
    12. display: inline-block;
    13. width: 100px;
    14. height: 340px;
    15. list-style-type: none;
    16. }
    18. li {
    19. width: 100px;
    20. height: 100px;
    21. text-align: center;
    22. margin-bottom: 20px;
    23. background-color: light-gray;
    24. }
    26. div {
    27. display: inline-block;
    28. }


    Das TabCntrl-Div war auch rechts neben der List, aber nur von der Breite her.
    Es war zwar daneben, aber auch drunter.
    Dazu wieder eines meiner unglaublich kreativen Bilder im Anhang /ironie

    Grüße
    Bilder

    • Unbenannt.png

      2,55 kB, 800×600, 63 mal angesehen
    "Life isn't about winning the race. Life is about finishing the race and how many people we can help finish the race." ~Marc Mero

    Nun bin ich also auch soweit: Keine VB-Fragen per PM! Es gibt hier ein Forum, verdammt!

    Nikx schrieb:


    HTML-Quellcode

    1. javascript:activate('0')
    2. javascript:acivate(1)

    Ja ne is klar.

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <style>
    4. * { padding: 0px; margin: 0px; border: 0px; }
    5. #tabsel { border: red solid 2px; float :left; max-width: 60px; min-width: 60px; width: 60px; display: block; }
    6. #tabsel li { display: block; }
    7. #tabs { margin-left : 64px; display : block; border: blue solid 2px; }
    8. </style>
    9. </head>
    10. <body>
    11. <ul id="tabsel">
    12. <li>hihi</li>
    13. </ul>
    14. <div id="tabs">
    15. <p> Test Taaaaab</p>
    16. </div>
    17. <div style="clear:both;"></div>
    18. </body>
    19. </html>
    Mach dir noch ne Wrapper drum damit du es frei platzieren kannst. Ich hoffe ich habs richtig verstanden.

    @Mangafreak1995:
    Vorher stand da mal Option1 und Option2, hab beim ändern also nen Fehler gemacht ^^
    Klappt aber soweit, danke :)
    Warum setzt du eigentlich Max-Width und Min-Width?
    Auch würde mich interessieren was das letzte Div bringen soll?

    Grüße
    "Life isn't about winning the race. Life is about finishing the race and how many people we can help finish the race." ~Marc Mero

    Nun bin ich also auch soweit: Keine VB-Fragen per PM! Es gibt hier ein Forum, verdammt!

    Ich hab min- und max- gesetzt damit die TabSelection seine 60px breit bleibt und der margin von der TabListe somit richtig bleibt. Das letzte div bringt, dass wenn du noch mehr dazu schmeißt sich nicht direkt unterordnet sondern erst unter dem letzten Element, welches floatet. Somit kommt alles was danach kommt nicht mit in die TabSelection, wenn der Tab zB kleiner ist als die Selection. Probier es einfach mal aus mit oder ohne.

Facebook
Telefonspende