CODEWITHSUNDEEP
htmlcss
ChaCol
ChaCol

Reputation: 223

How do I position an image on each side of a header?

I'm trying to add a picture of a tree on each side of my header, however I cannot figure out how to position the images correctly to where they are both above my navigation bar and positioned to the left and right of my header.

This jsfiddle shows it a bit better than the snippet. https://jsfiddle.net/1qghboyh/ 

* {
	margin: 0px;
	padding: 0px;
}

header {
	padding: 1em;
	color: white;
	background-color: #323241;
	clear: left;
	text-align: center;
}

footer {
	background-color: #339966;
	-webkit-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	-moz-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	padding: 1em;
	color: white;
	background-color: #323241;
	clear: left;
	text-align: center;
}

.initials {
	float: left;
	opacity: .25;
}

.tree1 {
	float: left;
	width: 100px;
	height: 100px;
}

.tree2 {
	float: right;
	width: 100px;
	height: 100px;
}

.navigation-bar {
	-webkit-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	-moz-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	height: 3.2em;
	background: #339966;
	text-align: center;
	border-top: 2px solid;
	border-bottom: 2px solid;
}

.navigation-bar ul {
	display: inline-block;
	list-style-type: none;
}

.navigation-bar li {
	display: inline;
}

.navigation-bar li a {
	color: white;
	padding: 0px 30px;
	margin: 1em 0 0 -2px;
	text-decoration: none;
	float: left;
	height: 1.2em;
	line-height: 1.2em;
}

.navigation-bar li a.active{
	color: #111;
}

.navigation-bar li a:hover, a:focus {
	color: #111;
}

.columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
	width: 70%;
    margin: auto;
}

.div1  {
	width: 100%;
	padding: 10px;
	border-right: 2px solid;
	border-left: 2px solid;
	margin: 0;
	background-color: white;
}
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<link rel="stylesheet" href="settings.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #323241">
<header>
	<div class="initials">#2 - C.C.</div>
	<img src="tree.jpg" class="tree1">
	<h1>Landscaping Company</h1>
	<img src="tree.jpg" class="tree2">
</header>
<div class="navigation-bar">
	<div id="navigation-container">
		<ul>
			<li><a class="active" href="home.html">Home</a></li>
			<li><a href="gallery.html">Gallery</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</div>
</div>
<br>
<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="img_chania.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>
    
      <div class="item">
        <img src="img_flower.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

      <div class="item">
        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
<div class="div1">
<div class="columns">
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
Our core values:
Bring a positive attitude with you each and every day
Work hard, pitch in, be helpful and productive
Be fair and respectful with all people in all encounters</p>

<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
Our mission is to unite people in positive relationships to improve lives.
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day.  If we are not improving your life then we are not living up to our mission.
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
Residential Landscape Maintenance
Landscape Design/Installation
Plant Health Care</p>

<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
Our core values:
Bring a positive attitude with you each and every day
Work hard, pitch in, be helpful and productive
Be fair and respectful with all people in all encounters</p>

<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
Our mission is to unite people in positive relationships to improve lives.
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day.  If we are not improving your life then we are not living up to our mission.
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
Residential Landscape Maintenance
Landscape Design/Installation
Plant Health Care</p>

<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
</div>
</div>
</div>
<br>
<footer>Copyright © Landscaping Company</footer>
</body>
</html>

Upvotes: 3

Views: 11182

Answers (4)

Antonio Hern&#225;ndez
Antonio Hern&#225;ndez

Reputation: 466

For one outcome you could use:

<header>
  <div class="initials">#2 - C.C.</div>
  <div style="display: inline-block;float: left;">
    <img src="tree.jpg" class="tree1">
  </div>
  <div style="display: inline-block;float: right;">
    <img src="tree.jpg" class="tree2">
  </div>
  <h1 style="margin: .67em;">Landscaping Company</h1>
</header>

Corrections and explanations:

  1. Your images were just plainly positioned inside the <header> container. That really limits what you can actually do with them, so I recommend you to always wrap them up a container. Moved them to their respective container.
  2. After moving the images to their container, I cleared the block level behavior of the <div>'s by setting them to have a display: inline-block. Then I transferred the float properties to each of them respectively.
  3. The <h1> tag has two CSS properties comming from bootstrap.css that override normalize.css setting for the margins. I modified it to be .67ems again, and the images fitted just perfectly along with the header.
  4. The second image was positioned below the <h1> tag, so it was being pushed down by the header, because it has a block-level behavior. Be careful with the layout of your elements to avoid these kind of problems. Just FYI; (extracted from MDN Re; Block-level elements):

Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes.

Now, if what you actually want is this:enter image description here Modify your code to be like this instead:

<header>
  <div class="initials">#2 - C.C.</div>
    <div id="header-imgs">
      <div>
        <img src="tree.jpg" class="tree1">
      </div>
      <h1>Landscaping Company</h1>
      <div>
        <img src="tree.jpg" class="tree2">
      </div>
  </div>
</header>

Remove the floats from the images, and add the following CSS:

div#header-imgs, div#header-imgs > h1, div#header-imgs, div#header-imgs > div { display: inline-block; }

This second form works because of the following:

  1. You are wrapping all elements in a single container, which have them go in the correct order in the DOM Flow (img 1 goes before the header, the header before img 2 and you can guess the last one).
  2. Removing the floats will return the images to the DOM Flow. Also just FYI (again), if the floated elements are the only child of their parent containers, then this will collapse said parent. This leads to horrible headaches if you ever have to check for broken layout here that is screwing up a whole project (say, HTML designed letters).
  3. The display: inline-block will have all three elements stacked at the same level, and they will keep the block behavior that lets you do marvels with them (e.g. top-bottom margins).

Upvotes: 2

Jon P
Jon P

Reputation: 19772

As the tree is not actually "content" and more a decoration I would set it as a background image using CSS. Any screen readers etc won't be confused by a meaningless image tag with no alt attribute.

h1::before, h1::after
{
  content:'';
  background-image: url(http://placekitten.com/g/100/100); /*use tree here*/
  width:100px;
  height: 100px;
  display:inline-block;
}

h1::before
{
  float:left;
}

h1::after
{
  float:right;
  clear:right;
}

h1
{ 
  text-align: center;
  height:100px;
  line-height:100px;
}
<h1>Some Content</h1>

Upvotes: 2

Dave Cripps
Dave Cripps

Reputation: 929

Have you tried putting the img tags within the h1 tag and remove the floats from the images?

<h1><img src=...>Landscaping Company<img src=...></h1>

If you really want to use floats, then I've found that specifying the right float first in the HTML usually produces the desired result.

<img src="tree.jpg" class="tree2">
<img src="tree.jpg" class="tree1">
<h1>Landscaping Company</h1>

Upvotes: 2

Annalaxmi
Annalaxmi

Reputation: 133

Adding display:inline attribute to the header tag will give you the expected,try This

h1
{
  display : inline;
}

Upvotes: 0

Related Questions