Solved

keep image and nav height the same

Posted on 2013-12-12
14
387 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
 
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now