Anzeige

Responsive nav-liste und img in einer Reihe

Responsive nav-liste und img in einer Reihe | PSD-Tutorials.de
  1. Information ausblenden
  2. Information ausblenden
HTML - Dieses Training empfehlen wir dir! Photoshop-Looks und Styles gratis

Erstellt von tutto, 09.10.2015.

  1. tutto

    tutto Nicht mehr ganz neu hier

    Dabei seit:
    21.02.2009
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    C4d, AI, PSD, ID
    Responsive nav-liste und img in einer Reihe
    09.10.2015 22:52
    Ich möchte die Navigation in einer Box neben einem skalierbaren Bild. Das funktioniert nur bis die
    Wrappergröße erreicht ist. Wer weiß wie's geht? Ich füge den Code gleich an:

    HTML:
    2. body {padding:0; margin:0;
    3.         background-color:#DDD;
    4. }
    5. .wrapper{max-width: 1232px
    6. }
    7. .navbox {
    8.     max-widht: 100%;
    9. }
    10.  
    11. nav {
    12.     width: 33.333333%;
    13.     background-color: #4b5b78;
    14.     float: left;
    15.     }
    16. nav ul{
    17.     font-family: Arial, Helvetica, sans-serif;
    18.     font-size: 1.8vmax;
    19.     line-height: 3.8vw;
    20.     font-weight: bold;
    21.     display: block;
    22.     list-style-type: none;
    23.     letter-spacing: 0.1em;
    24.     }
    25. nav ul li{
    26.     }
    27. nav ul li a{
    28.     color:#AAA;
    29.     text-decoration: none;
    30.     }
    31. .div img {
    32.     max-width: 66.666666%;
    33.     float: left;
    34.     clear: none;
    35. }
    37.  
    38.  
    40. <div class="wrapper">
    41.     <div class="navbox">
    42.           <nav>
    43.             <ul>
    44.                   <li><a href="#">Liste 1</a></li>
    45.                   <li><a href="#">Liste 2</a></li>
    46.                   <li><a href="#">Liste 3</a></li>
    47.             </ul>
    48.           </nav>
    49.     </div>
    50.     <div class="div img">
    51.         <img src="bild_1800x400.jpg">
    52.     </div>
    53.  
    54. </div>
    55. </body>
     
    Zuletzt von einem Moderator bearbeitet: 10.10.2015
    #1     ▲ 
  2. dn3d_fanboy

    dn3d_fanboy Aktives Mitglied

    Dabei seit:
    04.11.2011
    Beiträge:
    781
    Geschlecht:
    männlich
    Ort:
    Eitorf
    Software:
    VS Code, Notepad++, PS CC, Mapster32
    Kameratyp:
    Dat Teil im Häändy
    Responsive nav-liste und img in einer Reihe
    10.10.2015 01:44
    Was soll denn passieren, wenn die maximale Breite des Wrappers erreicht ist?

    Ein paar Sachen, die mir aufgefallen sind:

    .navbox {
    max-width: 100%;
    }

    Da hast du einen Dreher drinnen gehabt.

    Das hier
    <div class="div img">
    und das

    .div img {
    max-width: 66.666666%;
    float: left;
    clear: none;
    }
    passt auch nicht zusammen, die Klasse im HTML müsste nur "div" heißen, da mit dem CSS Code nur das IMG innerhalb der Klasse div angesprochen wird.
     
    Zuletzt bearbeitet: 10.10.2015
    #2     ▲ 
  3. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Responsive nav-liste und img in einer Reihe
    10.10.2015 02:57
    Die Division selbst ist überflüssig. Das selbe ist trifft auch auf die mit der Klasse navbox zu. Ob der Wrapper sein muss, ist auch fraglich. Hier und da reicht der Body als solcher schon aus. Hier mal ein etwas aufgeräumteres Markup.
    HTML:
    1.  
    2. <div class="wrapper">
    3.   <nav class="navbar" role="navigation">
    4.     <ul class="navbar-nav">
    5.       <li><a href="#">example 1</a></li>
    6.       <li><a href="#">example 2</a></li>
    7.       <li><a href="#">example 3</a></li>
    8.     </ul>
    9.     <div class="navbar-img">
    10.       <img src="assets/img/bild.jpg">
    11.     </div>
    12.   </nav>
    13. </div>
    14.  
    Oder gleich die Division weglassen
    HTML:
    1. <div class="wrapper">
    2.   <nav class="navbar" role="navigation">
    3.     <ul class="navbar-nav">
    4.       <li><a href="#">example 1</a></li>
    5.       <li><a href="#">example 2</a></li>
    6.       <li><a href="#">example 3</a></li>
    7.     </ul>
    8.     <img class="navbar-img" src="assets/img/bild.jpg">
    9.   </nav>
    10. </div>
    Liebe Grüße, Patrick
     
    #3     ▲ 
  4. tutto

    tutto Nicht mehr ganz neu hier

    Dabei seit:
    21.02.2009
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    C4d, AI, PSD, ID
    Responsive nav-liste und img in einer Reihe
    10.10.2015 14:48
    Dreher behoben. Den Wrapper habe ich herausgenommen. Das der Code besser sein könnte leuchtet mir ein, allerdings versuche ich ein Problem nach dem anderen zu lösen.
    Mein eigentliches Problem ist aber noch nicht angesprochen.

    Das Ziel ist: die Box mit der Navigation und das Bild daneben sollen mit gleicher Höhe skalierbar sein. Solbald der Viewport größer als die max-Breite (jetzt Body) ist, läuft die Navigation über.

    Was ich nicht verstehe ist, wenn ich die Klasse »div img« ändere wird das Bild überhaupt nicht mehr skaliert.
     
    #4     ▲ 
  5. dn3d_fanboy

    dn3d_fanboy Aktives Mitglied

    Dabei seit:
    04.11.2011
    Beiträge:
    781
    Geschlecht:
    männlich
    Ort:
    Eitorf
    Software:
    VS Code, Notepad++, PS CC, Mapster32
    Kameratyp:
    Dat Teil im Häändy
    Responsive nav-liste und img in einer Reihe
    11.10.2015 01:40
    Code (CSS):
    1. nav ul{
    2.     line-height: 2.8vw;
    3.     }
    orientiert sich am Viewport, also an der Breite des Browserfensters.
     
    #5     ▲ 
x
×
×