Syntax_Error Syntax_Error - 5 months ago 8
CSS Question

Last ul-list item displays as block?

My name is Remon and I am a Dutch beginner html/css programmer. My uncle asked me to make a website for his plumbery, but I've met a problem that I couldn't fix. It's about the last navigation item that for some reason keeps displaying on the next line after it crossed some magical width or something like that.

I hope someone can help me.

This is the problem. Click here to see the problem



/* red: #f71735 */

/* ----------------------------------------------- */
/* BASIC SETUP */
/* ----------------------------------------------- */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-rendering: optimizeLegibility;
}

html {
font-family: 'Muli', sans-serif;
font-size: 20px;
background-color: #fff;
}

.row {
max-width: 1140px;
margin: 0 auto;
}

section {
margin-top: 80px;
}


/* ----------------------------------------------- */
/* REUSABLE CONTENT */
/* ----------------------------------------------- */

/* ----- headers ----- */
h1 {
font-size: 240%;
}

h2 {
font-size: 200%;
}

h3 {
font-size: 160%;
}

h4 {
font-size: 120%;
}

/* ----------------------------------------------- */
/* HEADER */
/* ----------------------------------------------- */

.header-left {
display: inline-block;
}

.header-wrapper {
background-color: #eee;
}

.logo-content {
display: inline-block;
margin: 10px;
}

.logo-content img {
width: 30%;
}

.logo-content h4 {
display: inline-block;
max-width: 220px;
margin-left: 10px;
}

/* ----- HEADER IMG ----- */

.header-right {
max-width: 60%;
display: inline;
float: right;
}

.header-images {
float: right;
list-style: none;
}

.header-images li {
display: inline-block;
width: 22.5%;
float: right;
margin: 12px 15px;
}

.header-images li img {
width: 100%;
border-radius: 4px;
overflow: hidden;
}

/* ----------------------------------------------- */
/* NAVIGATION */
/* ----------------------------------------------- */

.main-navigation {
background-color: #1f1f1f;
}

.main-nav {
list-style: none;

}

.main-nav li {
display: inline-block;
padding: 10px;
}

.main-nav li a:link, .main-nav li a:visited {
text-decoration: none;
color: #eee;
font-weight: 500;
}

.main-nav li a:hover {
border-bottom: solid 1px #eee;
}

.main-nav li a:active {
color: #dbdbdb;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="vendors/css/normalize.css">
<link rel="stylesheet" href="vendors/css/grid.css">
<link rel="stylesheet" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Muli|Hind|Asap' rel='stylesheet' type='text/css'>

<script src="vendors/js/jquery.slideme-1.21.71.js"></script>
<script src="vendors/css/slideme.css"></script>


</head>
<body>

<header class="main-header">
<div class="header-wrapper">
<div class="row">
<div class="header-left">
<div class="logo-content">
<img src="resources/img/Logo-vector.svg">
<h4>Installatiebedrijf Gebr de Hond B.V.</h4>
</div>
</div>

<div class="header-right">
<ul class="header-images">
<li><img src="resources/img/img-banner-1.jpg"</li>
<li><img src="resources/img/img-banner-3.jpg"</li>
<li><img src="resources/img/img-banner-4.jpg"</li>
</ul>
</div>
</div>
</div>

<nav class="main-navigation">
<div class="row">
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Over ons</a></li>
<li><a href="#">Onze diensten</a></li>
<li><a href="#">Referenties</a></li>
</ul>
</div>

</nav>
</header>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

</body>
</html>




Answer

1st of all you need to close your img tag within the li then the issue is because you are floating the divs in header, so you need to clear it. you can do this by using the micro clearfix hack

/* red: #f71735 */

/* ----------------------------------------------- */

/* BASIC SETUP */

/* ----------------------------------------------- */

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}
html {
  font-family: 'Muli', sans-serif;
  font-size: 20px;
  background-color: #fff;
}
.row {
  max-width: 1140px;
  margin: 0 auto;
}
section {
  margin-top: 80px;
}
/* ----------------------------------------------- */

/* REUSABLE CONTENT */

/* ----------------------------------------------- */

/* ----- headers ----- */

h1 {
  font-size: 240%;
}
h2 {
  font-size: 200%;
}
h3 {
  font-size: 160%;
}
h4 {
  font-size: 120%;
}
/* ----------------------------------------------- */

/* HEADER */

/* ----------------------------------------------- */

.header-left {
  display: inline-block;
}
.header-wrapper {
  background-color: #eee;
}
.logo-content {
  display: inline-block;
  margin: 10px;
}
.logo-content img {
  width: 30%;
}
.logo-content h4 {
  display: inline-block;
  max-width: 220px;
  margin-left: 10px;
}
/* ----- HEADER IMG ----- */

.header-right {
  max-width: 60%;
  display: inline;
  float: right;
}
.header-images {
  float: right;
  list-style: none;
}
.header-images li {
  display: inline-block;
  width: 22.5%;
  float: right;
  margin: 12px 15px;
}
.header-images li img {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
/* ----------------------------------------------- */

/* NAVIGATION */

/* ----------------------------------------------- */

.main-navigation {
  background-color: #1f1f1f;
}
.main-nav {
  list-style: none;
}
.main-nav li {
  display: inline-block;
  padding: 10px;
}
.main-nav li a:link,
.main-nav li a:visited {
  text-decoration: none;
  color: #eee;
  font-weight: 500;
}
.main-nav li a:hover {
  border-bottom: solid 1px #eee;
}
.main-nav li a:active {
  color: #dbdbdb;
}
<header class="main-header">
  <div class="header-wrapper clearfix">
    <div class="row">
      <div class="header-left">
        <div class="logo-content">
          <img src="//dummyimage.com/200x200">
          <h4>Installatiebedrijf Gebr de Hond B.V.</h4>
        </div>
      </div>

      <div class="header-right">
        <ul class="header-images">
          <li>
            <img src="//dummyimage.com/200x200" />
          </li>
          <li>
            <img src="//dummyimage.com/200x200" />
          </li>
          <li>
            <img src="//dummyimage.com/200x200" />
          </li>
        </ul>
      </div>
    </div>
  </div>

  <nav class="main-navigation">
    <div class="row">
      <ul class="main-nav">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Over ons</a>
        </li>
        <li><a href="#">Onze diensten</a>
        </li>
        <li><a href="#">Referenties</a>
        </li>
      </ul>
    </div>

  </nav>
</header>

Comments