Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 461
  • Last Modified:

keep image and nav height the same

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
nsitedesigns
Asked:
nsitedesigns
  • 5
  • 5
  • 4
5 Solutions
 
Dan CraciunIT ConsultantCommented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
nsitedesignsAuthor Commented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
nsitedesignsAuthor Commented:
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
 
nsitedesignsAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
Dan CraciunIT ConsultantCommented:
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
 
Dan CraciunIT ConsultantCommented:
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
 
nsitedesignsAuthor Commented:
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
 
nsitedesignsAuthor Commented:
Nevermind, I found that if I put a couple <br> below the nav bar that seemed to fix it.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
Dan CraciunIT ConsultantCommented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now