Responsive nav-liste und img in einer Reihe

tutto · 09.10.2015

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:

<style>
body {padding:0; margin:0;
        background-color:#DDD;
}
.wrapper{max-width: 1232px
}
.navbox {
    max-widht: 100%;
}

nav {
    width: 33.333333%;
    background-color: #4b5b78;
    float: left;
    }
nav ul{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.8vmax;
    line-height: 3.8vw;
    font-weight: bold;
    display: block;
    list-style-type: none;
    letter-spacing: 0.1em;
    }
nav ul li{
    }
nav ul li a{
    color:#AAA;
    text-decoration: none;
    }
.div img {
    max-width: 66.666666%;
    float: left;
    clear: none;
}
</style>


<body>
<div class="wrapper">
    <div class="navbox">
          <nav>
            <ul>
                  <li><a href="#">Liste 1</a></li>
                  <li><a href="#">Liste 2</a></li>
                  <li><a href="#">Liste 3</a></li>
            </ul>
          </nav>
    </div>
    <div class="div img">
        <img src="bild_1800x400.jpg">
    </div>
 
</div>
</body>

dn3d_fanboy · 10.10.2015

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.

patrick_l · 10.10.2015

dn3d_fanboy schrieb:
die Klasse im HTML müsste nur "div" heißen, da mit dem CSS Code nur das IMG innerhalb der Klasse div angesprochen wird.

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:

<div class="wrapper">
  <nav class="navbar" role="navigation">
    <ul class="navbar-nav">
      <li><a href="#">example 1</a></li>
      <li><a href="#">example 2</a></li>
      <li><a href="#">example 3</a></li>
    </ul>
    <div class="navbar-img">
      <img src="assets/img/bild.jpg">
    </div>
  </nav>
</div>

Oder gleich die Division weglassen

HTML:

<div class="wrapper">
  <nav class="navbar" role="navigation">
    <ul class="navbar-nav">
      <li><a href="#">example 1</a></li>
      <li><a href="#">example 2</a></li>
      <li><a href="#">example 3</a></li>
    </ul>
    <img class="navbar-img" src="assets/img/bild.jpg">
  </nav>
</div>

Liebe Grüße, Patrick

tutto · 10.10.2015

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.

dn3d_fanboy · 11.10.2015

CSS:

nav ul{
    line-height: 2.8vw;
    }

orientiert sich am Viewport, also an der Breite des Browserfensters.