CODEWITHSUNDEEP
htmlcssimagenavbar
PiGuy Harris
PiGuy Harris

Reputation: 23

Can't get photos to align next to each other in div

Here is my code: http://pastebin.com/pDkM4FQi

#img1,
#img2,
#img3,
#img4 {
  display: inline-block;
  height: 100%;
}
#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  display: inline-block;
  height: 100px;
  margin: auto;
  margin-top: 50px;
  width: 1200px;
}
#navSplitter {
  background-color: gray;
  display: inline-block;
  height: 80px;
  margin-left: 20px;
  margin-right: 20px;
  width: 3px;
}
<div id="navBar">
  <div id="navSplitter" style="background-color: black;" />
  <img id="img1" src="img1.png" />
  <div id="navSplitter" />
  <img id="img2" src="img2.png" />
  <div id="navSplitter" />
  <img id="img3" src="img3.png" />
  <div id="navSplitter" />
  <img id="img4" src="img4.png" />
</div>

I can't get the images to line up in the navBar div. I tried everything I know about code, and even looked up some stuff but never found what I need to get these images to go on there with the splitters in between each picture.

Upvotes: 2

Views: 469

Answers (8)

ghost_dad
ghost_dad

Reputation: 1306

I would recommend removing the navSplitter elements completely, as they add an extra set of items (unnecessarily) that will need to be styled to ensure the images line up. Instead, you can just add padding / borders to the images individually, which will separate them as desired. Consider the following:

.image {
  display: inline-block;
  height: 100%;
  padding: 20px;
  border-right: 3px solid gray;
}

.image:last-of-type {
  border-right: none;
}
#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  display: inline-block;
  height: 100px;
  margin: auto;
  margin-top: 50px;
  width: 1200px;
}
<div id="navBar">
  <img class="image" src="http://placehold.it/150x150" />
  <img class="image" src="http://placehold.it/150x150" />
  <img class="image" src="http://placehold.it/150x150" />
  <img class="image" src="http://placehold.it/150x150" />
</div>

Upvotes: 1

Ilya Novojilov
Ilya Novojilov

Reputation: 889

No one talks about FLEXBOX. Still care about old IE?

#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  width: 1200px;
display: flex;
justify-content: center;
align-items: center;
}
img { width: 100px; height: 100px; background: red; }
hr {
  border: none;
  background-color: gray;
  height: 80px;
  margin-left: 20px;
  margin-right: 20px;
  width: 3px;
}
<div id="navBar">
  <img id="img1" src="img1.png" />
  <hr>
  <img id="img2" src="img2.png" />
  <hr>
  <img id="img3" src="img3.png" />
  <hr>
  <img id="img4" src="img4.png" />
</div>

Upvotes: 1

DSofa
DSofa

Reputation: 564

Your HTML is not valid. div tags cannot be closed this way.

<div />.

div tags are properly used this way.

<div></div>

Due to the lack of closing tags, your images and splitters are nested. This happens because your browser does not know how to display your page since the opened/closed tags don't match up. It is then trying to fix your code by adding a bunch of closing tags at the bottom of the code, one closing tag for each opened one that was not closed.

By simply closing your div tags, your images will align properly. Your CSS is valid.

Upvotes: 1

Jonathan
Jonathan

Reputation: 11504

Navigation bar centrally aligned with separators

Maybe you would rather something like this.

<div id="nav-bar">
  <img src="http://dummyimage.com/80&text=1" alt="">
  <img src="http://dummyimage.com/80&text=2" alt="">
  <img src="http://dummyimage.com/80&text=3" alt="">
  <img src="http://dummyimage.com/80&text=4" alt="">
</div>

Don't worry about closing tags for img elements anymore. But do make sure you write something descriptive in the alt attribute about what the image content is for people with disabilities.

html {
  font-size: 16px;
}

I'm using rems to do most measurements. rems are based off of a base font-size. So we tend to set it in the html element. I think 16px is a good standard these days. 1rem therefore is 16px.

Using measurements like this allows you to arrange things relatively. You could also interchange with ems if you wanted to. They are based off of the parent element font-size.

#nav-bar {
  max-width: 1200px;
  width: 100%;
  margin: 2rem auto;
  text-align: center;
  background-color: white;
  border-radius: 1rem;
  display: inline-block;
  padding: .5rem;
}
#nav-bar img {
  display: inline-block;
}
#nav-bar img:not(:last-child) {
  margin-right: 1rem;
  padding-right: 1rem;
  border-right: 3px solid gray;
}

Instead of using an HTML element for aesthetics, we can push that into the CSS completely.

I use a right border on those navigation images and make use of the not pseudo-class combined with last-child as :not(:last-child) which selects all the images except the last one. So you don't see the right border at the end.

Upvotes: 1

dippas
dippas

Reputation: 60573

divs aren't a self closing tag, which you are doing, therefore invalid HTML and by consequence the images are not working as expected.

So, I advise you to forget using div for splitting the images and just use a HTML list and then using a pseudo element ::before instead.

And to align, you need vertical-align:top because inline-block is baseline by default

#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  display: inline-block;
  height: 100px;
  margin: auto;
  margin-top: 50px;
  width: 1200px;
}
ul {
  font-size: 0
}
li {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  margin: 0 5px
}
li::before {
  background-color: gray;
  display: inline-block;
  vertical-align: top;
  height: 100px;
  left: -5px;
  width: 3px;
  content: "";
  position: relative
}
<div id="navBar">
  <ul>
    <li>
      <img id="img1" src="//dummyimage.com/100x100" />
    </li>
    <li>
      <img id="img2" src="//dummyimage.com/100x100" />
    </li>
    <li>
      <img id="img3" src="//dummyimage.com/100x100" />
    </li>
    <li>
      <img id="img4" src="//dummyimage.com/100x100" />
    </li>
  </ul>
</div>

Upvotes: 1

Rish
Rish

Reputation: 71

The issue is in your HTML. There is no concept of self closing div tags in HTML 4.x.

change this <div id="navSplitter"/> to <div id="navSplitter"></div>.

or my suggestion is to use <span></span> tag to add splite because span is by-default inline-block element.

Hope this would help your issue.

Upvotes: 2

Erick Kamamba
Erick Kamamba

Reputation: 268

Try this:- remove margin-left: 20px from #naviSplitter

<head>
    <style>
        #img1, #img2, #img3, #img4 {
            display: inline-block;
            height: 100%;
        }

        #navBar {
            background-color: white;
            border: 1px solid white;
            border-radius: 15px;
            display: inline-block;
            height: 100px;
            margin: auto;
            margin-top: 50px;
            width: 1200px;
        }

        #navSplitter {
            background-color: gray;
            display: inline-block;
            height: 80px;
            /*margin-left: 20px;*/
            margin-right: 20px;
            width: 3px;
        }
    </style>
</head>
<body>
    <div id="navBar">
        <div id="navSplitter" style="background-color: black;"/>
        <img id="img1" src="img1.png"/>
        <div id="navSplitter"/>
        <img id="img2" src="img2.png"/>
        <div id="navSplitter"/>
        <img id="img3" src="img3.png"/>
        <div id="navSplitter"/>
        <img id="img4" src="img4.png"/>

    </div>
</body>

Upvotes: 1

Kode.Error404
Kode.Error404

Reputation: 573

How about putting all of the images in just one <div> and then add a left-padding and right-padding to the images? This way you don't have to deal with the alignment of the images that much.

Please note that id tags are unique. You don't use them everywhere in the html file. Use class if you need

Upvotes: 2

Related Questions