Solved

keep image and nav height the same

Posted on 2013-12-12
14
416 Views
Last Modified: 2013-12-23
Is there a recommended way to code site so that image (blurred product shot) and navigation have the same height?  Now in different browsers, the image is sometimes too tall or too short.

http://nsitedesigns.com/nsitedesigns/wiplastic/index.html
0
Comment
Question by:nsitedesigns
  • 5
  • 5
  • 4
14 Comments
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 300 total points
ID: 39715051
You could put both the nav AND the image inside the same div. Sort of subheader.
This way your nav ul and the image would stay linked.

Not sure it would be a good idea for a mobile version, where the nav should be on top of the image...

HTH,
Dan
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39715192
I agree with Dan.

<div id="header">
   <div id="logo"><a href="index.html"><img src="img/header.png" alt="Wisconsin Plastic Products"  width="974" height="184" /></a></div>
   <div id="sub_head">
         <div id="nav"><ul><li>stuff</li></ul>
          <div id="hero_image"> <img src="img/p_1.png" width="752" height="283" alt="" /></div>
    </div>
</div>

Open in new window

Put a black background on your nav div if the image is taller, it will appear to be the same hight.  You may want to center the ul vertically with the image to the left.
0
 

Author Comment

by:nsitedesigns
ID: 39715243
I must have done something wrong.  I put background-color:#000 into ul.nav.  Then I added the following to my css:

#sub_head {
	margin:0;
	padding:0;}

Open in new window


I then put this div around my nav and main image.

<div id="sub_head">
     <div class="sidebar1">
    <ul class="nav">
    <li id="about"><a href="about.html">About Us</a></li>
      <li><a href="capabilities.html">Capabilities</a></li>
      <li><a href="lighting.html">Lighting</a></li>
      <li><a href="metaplast.html">META-PLAST</a></li>
      <li><a href="profile.html">Profile Extrusions</a></li>
      <li><a href="quality.html">Quality</a></li>
      <li><a href="rfq.html">RFQ/File </a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="index.html">Home</a></li>
    </ul>
    <p> Put testimonial here. This is the spot that you can insert  your testimonial.</p>
    <p>&nbsp;</p>
    <p>Joe Smith, Manager<br>
      <a href="#">ABC Company</a><!-- end .sidebar1 --></p>
  </div>
   <div class="content">

   
       <img src="img/p_1.png" width="752" height="283" alt="" /></div>

Open in new window


It not only did not fix the problem, it pushed both nav and hero pic down by about 20px.

Suggestions?
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 200 total points
ID: 39715363
You had an unclosed div   http://jsbin.com/ICOWIseG/1/edit?html,css,output

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="sub_head">
     <div class="sidebar1">
     <ul class="nav">
      <li id="about"><a href="about.html">About Us</a></li>
      <li><a href="capabilities.html">Capabilities</a></li>
      <li><a href="lighting.html">Lighting</a></li>
      <li><a href="metaplast.html">META-PLAST</a></li>
      <li><a href="profile.html">Profile Extrusions</a></li>
      <li><a href="quality.html">Quality</a></li>
      <li><a href="rfq.html">RFQ/File </a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="index.html">Home</a></li>
    </ul>
    </div>   
    
   <div class="hero">
       <img src="http://nsitedesigns.com/nsitedesigns/wiplastic/img/p_1.png" width="752" height="283" alt="" />
    </div>
  </div>  
</body>
</html>

Open in new window

#sub_head {
	margin:0;
	padding:0;
    width:900px;
    background:black;
    height:283px;
}
.sidebar1{
  width:148px;
  float:left;
  
  
}
.hero{
  width:752px;
  float:left;
  
}

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 39716925
Padas,

Either I did something wrong (again) or something else is a problem.  This is what I get when I do what you suggested.  It is pretty messed up.

http://nsitedesigns.com/nsitedesigns/wiplastic/test.html
0
 

Author Comment

by:nsitedesigns
ID: 39716929
p.s.  I did a code validation in DW and it said it was ok, that there were not any missing divs.  DW validates via WC3.
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 200 total points
ID: 39716975
I am running out for the better part of the day.    The validation means you have enough closing div's but I don't think they are in the right order.  See below.

 
<div id="sub_head">
      <div class="sidebar1">
           <ul class="nav">
               <li id="about"><a href="about.html">About Us</a></li>
              <li><a href="capabilities.html">Capabilities</a></li>
              <li><a href="lighting.html">Lighting</a></li>
              <li><a href="metaplast.html">META-PLAST</a></li>
              <li><a href="profile.html">Profile Extrusions</a></li>
               <li><a href="quality.html">Quality</a></li>
             <li><a href="rfq.html">RFQ/File </a></li>
             <li><a href="contact.html">Contact Us</a></li>
             <li><a href="index.html">Home</a></li>
        </ul>
    </div><!-- close sidebar -->
   <div class="hero">
       <img src="img/p_1.png" width="752" height="283" alt="" />
    </div><!-- close hero -->
 <!--***** MISSING CLOSING DIV FOR sub_head -->
 <div class="content">

Open in new window

0
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 300 total points
ID: 39717152
Check it using "Inspect element" in Chrome (or using Firebug in Firefox).
You'll see that your sub_head div contains all your divs, instead of just sidebar1 and hero.
div structure
0
 
LVL 34

Accepted Solution

by:
Dan Craciun earned 300 total points
ID: 39717316
I've played with your page from here: http://nsitedesigns.com/nsitedesigns/wiplastic/index.html

Below is the modified code, with the nav and image in the same div, and looking the same in FF, IE11 and Chrome:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>
      Untitled Document
    </title>
    <style type="text/css">
      <!--
      body {
      font: 100%/1.3 Verdana, Arial, Helvetica, sans-serif;
      background-color: #000;
      margin: 0;
      padding: 0;
      color: #000;
      background-image:url(img/back.png);
      background-repeat:repeat-x;
      background-position:top center;
      background-attachment:fixed;
    }
      
      /* ~~ Element/tag selectors ~~ */
      ul, ol, dl {
      
      padding: 0;
      margin: 0;
    }
      
      
      /* ......	Htags   .......... */
      
      h1 {
      color:#89521a;
      /*brown*/
      font-weight:normal;
      padding-left:30px;
      font-size:1.5em;
      /* margin-top:40px; */
    }
      
      p {
      padding-left:30px;
      font-size:.9em;
      line-height:1.7em;
    }
      
      
      a img {
      
      border: none;
    }
      
      
      
      .container {
      width: 974px;
      background-color: #FFF;
      margin: 0 auto;
      
    }
      
      
      .header {
      background-color: #fff;
    }
      
      #sub_head {
      margin:0;
      padding:0;
    }
      
      /* ......	SIDEBAR   .......... */
      
      .sidebar {
      float: left;
      width: 222px;
      background-color: black;
     /* padding-bottom: 10px; */
    }
      
      .sidebar1 p {
      font-size:.9em;
      color:#999;
      margin:10px 15px 0px 5px;
    }
      
      
      /* ......	CONTENT   .......... */
      
      .content {
      
      padding: 0px;
      width: 740px;
      float: left;
    }
      
      
      .content ul, .content ol {
      
      padding: 0 15px 15px 40px;
      
    }
      
      .testimonial {
	  width: 222px;
	  height: 200px;
	  float: left;
	  }
	  
	  
      /* ......	NAVIGATION   .......... */
      
      ul.nav {
      list-style: none;
      /*margin-bottom: 15px;*/
      background-color:#000;
	  -webkit-margin-after: 7px;

    }
	
      ul.nav li {
      border-bottom: 1px solid #333;
      /* this creates the button separation */
    }
      ul.nav a, ul.nav a:visited {
      
      padding: 5px 5px 5px 40px;
      display: block;
      
      text-decoration: none;
      background-color: #000;
      color:#fff;
    }
      ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
      
      background-color: #000;
      color: #FFF;
      background-image:url(img/p_mo.gif);
      background-repeat:no-repeat;
      background-position: 15px center;
      text-decoration:underline;
    }
      
      li#about a {
      border-top:none;
    }
      
      /* ......	FOOTER   .......... */
      
      .footer {
      padding: 5px 0;
      background-color: #000;
      position: relative;
      clear: both;
      
      color:#fff;
    }
      
      .footer p {
      text-align:center;
    }
      
      /* ......	FLOATS   .......... */
      
      .float_right {
      
      float: right;
      margin: 10px 20px 20px 20px;
      ;
    }
      .float_left {
      
      float: left;
      margin-right: 8px;
      
    }
      .clearfloat {
      
      clear:both;
      height:0;
      font-size: 1px;
      line-height: 0px;
    }
      
      -->
    </style>
  </head>
  
  <body>
    
    <div class="container">
      <div class="header">
        <a href="index.html">
          <img src="img/header.png" alt="Wisconsin Plastic Products"  width="974" height="184" />
        </a>
      </div><!-- end .header -->
      <div id="sub_head">
        <div class="sidebar">
          <ul class="nav">
            <li id="about">
              <a href="about.html">
                About Us
              </a>
            </li>
            <li>
              <a href="capabilities.html">
                Capabilities
              </a>
            </li>
            <li>
              <a href="lighting.html">
                Lighting
              </a>
            </li>
            <li>
              <a href="metaplast.html">
                META-PLAST
              </a>
            </li>
            <li>
              <a href="profile.html">
                Profile Extrusions
              </a>
            </li>
            <li>
              <a href="quality.html">
                Quality
              </a>
            </li>
            <li>
              <a href="rfq.html">
                RFQ/File 
              </a>
            </li>
            <li>
              <a href="contact.html">
                Contact Us
              </a>
            </li>
            <li>
              <a href="index.html">
                Home
              </a>
            </li>
          </ul>
		</div><!-- end .sidebar -->
		<div class="hero">
		<img src="img/p_1.png" width="752" height="286" alt="" />
        </div><!-- end .hero -->
	  </div><!-- end .subhead -->
		  <div class="testimonial">
          <p>
            Put testimonial here. This is the spot that you can insert  your testimonial.
          </p>
          <p>
            &nbsp;
          </p>
          <p>
            Joe Smith, Manager
            <br>
            <a href="#">
              ABC Company
            </a>
            
          </p>
        </div><!-- end .testimonial -->
        <div class="content">
          
        <h1>
          Technology-Driven, Customer-Focused!
        </h1>
        <p>
          <img src="img/ps_1.jpg" alt="" width="184" height="251" class="float_right" />
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et doloreagna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamcur.. Excepteur sint occaecat cupidatat non officia spiciatis unde omnis iste natus error sit voluptatem accusantium dolor aperiam, eaque ipsa quae ab illo inventore veritatis etquasi architecto beatae vitae .
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et doloreagna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamcur.. Excepteur sint occaecat cupidatat non officia spiciatis unde omnis iste natus error sit voluptatmod tempor cididunt ut labore et doloreagna aliqua. Ut enim ad minim veniam, quisnostrud ex
        </p>
       
      </div> <!-- end .content -->
      <div class="footer">
        <p>
          Wisconsin Plastic Products, Inc.    |   1045 Lindoerfer Rd.    |   PO Box 580   |   Plymouth, WI  53073
        </p>
        
      </div><!-- end .footer -->
     
    </div> <!-- end .container -->
  </body>
</html>

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 39722421
Hi Dan,

Thanks for the code.  I put it in place and it did weird stuff to my testimonial div in DW.  The testimonial is supposed to sit below the nav bar on the left.  I tried putting float right on the content div and a float left on the testimonial but that didn't fix it so i took that out.  Here is a screen shot of my dw doc.  While it does appear to look ok on the browser, it is disconcerning that it is so wacked out in dw.

http://screencast.com/t/pLHesamv7oCU
0
 

Author Comment

by:nsitedesigns
ID: 39722430
Nevermind, I found that if I put a couple <br> below the nav bar that seemed to fix it.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39723189
I am sorry I could not help more, I have been off the grid.  Instead of <br> tags, can you use margin or padding?  What is the final code you are using?
0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39723190
I don't use Dreamweaver and I do not know what rendering engine it uses to display HTML (Presto? Webkit?).

But that is only your editor. Your target audience will never see your design view, so trying to get your template to display properly in major browsers AND Dreamweaver looks like a waste of time to me.

Here's a thread of some not-so-happy users that complain about design view: http://forums.adobe.com/thread/966549
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39723194
I agree with what Dan is saying.  However, this layout is simple enough that I would bet the visual issue with DW signals a problem with the html.   Once you get into more complex layouts or layouts using media queries etc. it is hard to trust what you see in DW preview.

Check that the code validates http://validator.w3.org/.  If it does, check that you have properly closed tags in the same order they where opened. http:#a39716975
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question