...

View Full Version : Padding must match underlay height!



BoldUlysses
02-15-2008, 09:57 PM
Hi all. I've been dealing with this issue since day 1 but since previous versions of the site have used more border it hasn't been so obvious.

The issue is with the top menu:

http://www.suffernfamily.com/jobs/nokia1.php

The translucent underlay image is specified to a height of 3em. The overlay text has a height of 1em, with 1em padding top and bottom. 1em + 1em + 1em = 3em, right? Then why is the white box in the hover protruding?

http://www.suffernfamily.com/jobs/example1.jpg

When I would like this (Photoshopped):

http://www.suffernfamily.com/jobs/example2.jpg

I will not do pixel heights because I want this to be scalable. Thanks!

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>ImageWorks Display | Nokia</title>

<link href="main.css" rel="stylesheet" type="text/css"/>

<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css"/>
<![endif]-->

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css"/>
<![endif]-->

<script type="text/javascript" src="justify.js"></script>

</head>

<body>

<div id="container">
<img class="underlay" src="nokia1.jpg" alt="image" title="" />

<!-- Corners Start -->

<div id="corners">
<div id="consoletopleft">
<img src="topleft.gif" alt="corner" title="" />
</div>

<div id="consoletopright">
<img src="topright.gif" alt="corner" title="" />
</div>

<div id="consolebottomleft">
<img src="bottomleft.gif" alt="corner" title="" />
</div>

<div id="consolebottomright">
<img src="bottomright.gif" alt="corner" title="" />
</div>

<div id="imagetopleft">
<img src="topleft.gif" alt="corner" title="" />
</div>

<div id="imagetopright">
<img src="topright.gif" alt="corner" title="" />
</div>

<div id="imagebottomleft">
<img src="bottomleft.gif" alt="corner" title="" />
</div>

<div id="imagebottomright">
<img src="bottomright.gif" alt="corner" title="" />
</div> </div>

<!-- Corners End -->

<div id="topnavunderlay">
<img src="grey1.png" alt="nav underlay" title="" />
</div>

<!-- Common Menu Start -->

<div id="pulldown1">
<ul>
<li><a href="home.php">home</a></li>
</ul>

<ul>
<li><a class="notactive">overview</a>
<ul>
<li><a class="topli" href="whatwedo.php">What We Do</a></li>
<li><a href="whoweare.php">Who We Are</a></li>
<li><a href="whatsetsusapart.php">What Sets Us Apart</a></li>
<li><a href="ourprocess.php">Our Process</a></li>
</ul>
</li>
</ul>

<ul>
<li><a class="notactive">case studies</a>
<ul>
<li><a class="topli" href="rjrsnus1.php">RJR SNUS</a></li>
<li><a href="nokia1.php">Nokia</a></li>
<li><a href="timbercreek1.php">Timber Creek</a></li>
<li><a href="hersheys1.php">Hershey's</a></li>
<li><a href="hotwheels1.php">Mattel Hot Wheels</a></li>
</ul>
</li>
</ul>

<ul>
<li><a class="notactive">portfolio</a>
<ul>
<li><a class="topli" href="temporary.php">Temporary</a></li>
<li><a href="semipermanent.php">Semi-Permanent</a></li>
<li><a href="permanent.php">Permanent</a></li>
<li><a href="lighting.php">Lighting</a></li>
<li><a href="tobacco.php">Tobacco Fixturing</a></li>
</ul>
</li>
</ul>

<ul>
<li><a href="contact.php">contact</a></li>
</ul>
</div>

<!-- Common Menu End -->

<div id="topline">
</div>

<div id="textline">
</div>

<div id="sideline">
</div>

<div id="logo">
<img src="iw3.gif" alt="imageworks logo" title="" />
</div>

<div id="text">
<h3>Nokia Counter Display</h3><br/>
<p>For their Nseries counter display, Nokia wanted a look and feel that echoed the design
of their New York City boutique. Nokia was looking for a unique display
design that was as high-tech as the product it represented. Stopping
power and shoppability were must-haves.</p>
</div>

<div id="gallerynav">

<ul id="gallerynavlist">
<li><a><img src="nokiathumb1.gif" alt="thumb1" title="" /></a></li>
<li><a href="nokia2.php"><img class="linkbutton" src="nokiathumb2.gif" alt="thumb2" title="" /></a></li>
<li><a href="nokia3.php"><img class="linkbutton" src="nokiathumb3.gif" alt="thumb3" title="" /></a></li>
<li><a href="nokia4.php"><img class="linkbutton" src="nokiathumb4.gif" alt="thumb4" title="" /></a></li>
</ul>

</div>

<div id="bottomline">
</div>

<div id="leftarrow">
<a href="rjrsnus1.php"><img src="leftarrow.gif" alt="left arrow" title="" /><span id="previoustext">RJR SNUS</span></a>
</div>

<div id="rightarrow">
<a href="timbercreek1.php"><img src="rightarrow.gif" alt="right arrow" title="" /><span id="nexttext">Timber Creek</span></a>
</div>

</div>

</body>
</html>

CSS:


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

body{
background-color:#333;
font-family:arial, verdana, sans-serif;
width:100%;
height:100%;
position:absolute;
}

#container{
position:absolute;
width:1000px;
height:700px;
top:50%;
left:50%;
margin-top:-350px;
margin-left:-500px;
background-color:#fff;
}

#container img.underlay{
position:absolute;
right:0px;
top:0px;
z-index:0;
}

#imagecaption{
position:absolute;
right:20px;
top:670px;
text-align:right;
font-size: 0.8em;
color:#000;
}

/* ---- Logo ---- */

#logo{
position:absolute;
top:20px;
left:25px;
z-index: 2;
}

#logo img{
width:200px;
height:82px;
}

/* ---- Top Navigation Bar ---- */

#topnavunderlay img{
position:absolute;
right:0px;
width:749px;
height:3em;
filter: alpha(opacity=70);
moz-opacity: 0.70;
opacity: 0.70;
z-index:1;
}

#pulldown1 {
position:absolute;
top:1em;
left:380px;
display:block;
text-align:left;
z-index:2;
}

#pulldown1 ul {
list-style: none;
float:left;
}

#pulldown1 ul li a {
color: #000;
font-size: 1em;
padding: 1em 20px 1em 20px;
text-decoration:none;
}

#pulldown1 ul li a.notactive {
cursor: default;
}

#pulldown1 ul li a:hover {
background: #fff;
color: #f30;
}

#pulldown1 ul ul li a {
color: #000;
font-size: 0.8em;
padding:0.5em;
display:block;
background: #efefef;
width:160px;
}

#pulldown1 ul ul li a:hover {
color: #cfc;
background: #f30;
}

#pulldown1 ul li {
position: relative;
}

#pulldown1 ul ul {
position: absolute;
top: 2em;
left: 0px;
z-index: 500;
}

div#pulldown1 ul ul,
div#pulldown1 ul li:hover ul ul,
div#pulldown1 ul ul li:hover ul ul
{display: none;}

div#pulldown1 ul li:hover ul,
div#pulldown1 ul ul li:hover ul,
div#pulldown1 ul ul ul li:hover ul
{display: block;}

/* ---- Text/Content ---- */

#textheader{
position:absolute;
width:200px;
height:450px;
top:126px;
left:25px;
}

h3 {
letter-spacing: -1px;
font-size: 1.4em;
color:#ff3300;
text-align:left;
font-weight:900;
text-align:center;
}

#text{
position:absolute;
width:200px;
height:479px;
top:200px;
left:25px;
font-size: 0.8em;
color:#000;
text-align:left;
overflow: auto;
}

/* ---- Bottom Gallery ---- */

#gallerynav{
position:absolute;
width:250px;
height:50px;
top:132px;
left:25px;
}

#gallerynavportfolio{
position:absolute;
width:250px;
height:50px;
top:210px;
left:25px;
}

#semipermgallerynavportfolio{
position:absolute;
width:250px;
height:50px;
top:230px;
left:25px;
}

#gallerynavlist li{
list-style:none;
float:left;
}

#gallerynavlist a{
display:block;
margin-right: 15px;
margin-bottom: 15px;
}

#gallerynavlist img.linkbutton{
filter: alpha(opacity=70);
moz-opacity: 0.70;
opacity: 0.70;
}

#gallerynavlist img:hover{
filter: alpha(opacity=100);
moz-opacity: 1.0;
opacity: 1.0;
}

/* ---- Structural Lines ---- */

/* #topline{
position:absolute;
width:749px;
border-top:0.07em #000 solid;
right:0px;
top:3.07em;
z-index:50;
}

#textline{
position:absolute;
width:250px;
border-top:0.07em #000 solid;
left:0px;
top:118px;
z-index:1;
} */

#sideline{
position:absolute;
height:700px;
border-right:5px #333 solid;
left:250px;
top:0px;
z-index:1;
}

/* #bottomline{
position:absolute;
width:250px;
border-top:0.07em #000 solid;
left:0px;
top:670px;
} */

/* ---- Corners ---- */

#corners {
position:absolute;
top:0px;
left:0px;
z-index:50;
}

#consoletopleft {
position:absolute;
left:0px;
top:0px;
}

#consoletopright {
position:absolute;
left:240px;
top:0px;
}

#consolebottomleft {
position:absolute;
left:0px;
top:690px;
}

#consolebottomright {
position:absolute;
left:240px;
top:690px;
}

#imagetopleft {
position:absolute;
left:255px;
top:0px;
}

#imagetopright {
position:absolute;
left:990px;
top:0px;
}

#imagebottomleft {
position:absolute;
left:255px;
top:690px;
}

#imagebottomright {
position:absolute;
left:990px;
top:690px;
}
}

Andrew Johnson
02-15-2008, 09:59 PM
It looks like theres a possibility that your font size is too big...

BoldUlysses
02-16-2008, 01:54 AM
How can that be? I set it to 1em:


#pulldown1 ul li a {
color: #000;
font-size: 1em;
padding: 1em 20px 1em 20px;
text-decoration:none;
}

Is there no way to match the font + padding height and the underlay height exactly? Surely there is.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum