user2238415
Reputation: 67
unwanted navigation bar resizing issue (CSS and HTML)
I have built a navigation bar using HTML and CSS and it functions almost perfectly. The issue is that when either of the two gallery pages is selected, the positioning of the navigation bar moves slightly upward. Im not sure where the issue lies (it seems quite specific since I cant find any similar issue here nor on Google).
NOTE: the gallery HTML page has CSS content specifically written in because if this content is included using PHP's include statment (as on other pages), the gallery slideshow images get distorted/streched for some reason. Either way though, the navigation bar issue is present.
HTML for services page (a non-gallery pager):
<?PHP
//if browser is IE, displays IE specific navbar
if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE)
{include('navbarIE.php');}
//if browser is anything else, include original navbar file
else
include('navbar.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Daiko Construction Remodeling</title>
<style type="text/css">
div#wrapper {
position: relative;
margin-left: 0px;
margin-right: 0px;
top: 20px;
width: 866px;
}
</style>
</head>
<body>
<br/>
<div id="wrapper">
<p>For your conveniece, we have listed just a few of the projects that we most commonly undertake.
If there is a specific service that you require and it is not listed below,
please <a style="color: white;" href="contactus.php">contact us</a> for more information. Additionally,
we offer FREE estimates for our services. While larger projects may require us to do an on-site
evaluation and no two projects are exactly alike, we request that you send us a short email with
an inquiry or any question you might have.
<br><br>
</span>
<ul>
<li>Window and door installation (European and Domestic)</li>
<li>General and central HVAC, A/C, heating</li>
<li>Remodelling of:</li>
<ul>
<li>kitchens</li>
<li>bathrooms</li>
<li>bedrooms</li>
<li>basements</li>
<li>etc.</li>
</ul>
<li>Flooring (wood and tile)</li>
<li>House additions</li>
<li>Lighting and electrical work</li>
<li>Plumbing<br></li>
<li>Regular handyman work</li>
<li>And many others</li>
</ul>
<br>
</div>
</div>
</div>
<?PHP include('footer.php'); ?>
</body>
</html>
HTML for gallery page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Gallery</title>
<link rel="stylesheet" href='jsddm.css'>
<img src="./styles/icons/kitchen2.jpg" class="image" />
<style type="text/css">
div#wrapper {
position:relative;
margin-left:0px;
margin-right:0px;
top: 14px;
width: 866px;
}
/*
//css to adjust properties of IE navigation bar and all text
*/
ul.jsddm, ul.flyout {
margin: 0;
padding: 0;
line-height: 2.0em;
list-style-type:none;
}
ul.jsddm li {
float: left;
width: 20%;
position:relative;
}
ul.jsddm a {
color: #000000;
background-color: #F5DEB3;
border: 1px solid #444;
display: block;
text-decoration: none;
text-align: center;
width: auto;
}
ul.flyout li {
width: 100%;
display:block;
float:none;
}
ul.jsddm a:hover {
color: #000;
background-color: #FFF;
}
ul.flyout {
display:none;
position:absolute;
top:38px;
left:0px;
width:100%;
}
ul.jsddm li:hover ul.flyout {
display:block;
}
</style>
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<link rel="shortcut icon" href="./styles/icons/daikofavicon.ico" />
<body background="./styles/icons/background4.jpg">
<body style="background-image:url(./styles/icons/background4.jpg)">
<!--
//navigation bar menu set up
-->
<body>
<div id="wrapper">
<ul class="jsddm">
<li><a href="index">HOME</a></li>
<li><a href="services">SERVICES</a></li>
<li><a href="gallery">GALLERY</a></li>
<li><a href="window">WINDOWS</a></li>
<li><a href="contactus">CONTACT US</a></li>
</ul>
</div>
<br/>
<br/>
<div id="wrapper">
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/img_1214.jpg" alt="Living and Dining Rooms" title="Living and Dining Rooms" id="wows1_0"/></li>
<li><img src="data1/images/100_2885.jpg" alt="100_2885" title="100_2885" id="wows1_1"/></li>
<li><img src="data1/images/img_3676.jpg" alt="Kitchen" title="Kitchen" id="wows1_2"/></li>
<li><img src="data1/images/img_3698.jpg" alt="Living Room" title="Living Room" id="wows1_3"/></li>
<li><img src="data1/images/100_2891.jpg" alt="100_2891" title="100_2891" id="wows1_4"/></li>
<li><img src="data1/images/dsc05866.jpg" alt="Living Room" title="Living Room" id="wows1_5"/></li>
<li><img src="data1/images/100_2888.jpg" alt="100_2888" title="100_2888" id="wows1_6"/></li>
<li><img src="data1/images/img_1224.jpg" alt="Basement" title="Basement" id="wows1_7"/></li>
<li><img src="data1/images/img_1246.jpg" alt="Bathroom" title="Bathroom" id="wows1_8"/></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#" title="Living and Dining Rooms"><img src="data1/tooltips/img_1214.jpg" alt="Living and Dining Rooms"/>1</a>
<a href="#" title="100_2885"><img src="data1/tooltips/100_2885.jpg" alt="100_2885"/>2</a>
<a href="#" title="Kitchen"><img src="data1/tooltips/img_3676.jpg" alt="Kitchen"/>3</a>
<a href="#" title="Living Room"><img src="data1/tooltips/img_3698.jpg" alt="Living Room"/>4</a>
<a href="#" title="100_2891"><img src="data1/tooltips/100_2891.jpg" alt="100_2891"/>5</a>
<a href="#" title="Living Room"><img src="data1/tooltips/dsc05866.jpg" alt="Living Room"/>6</a>
<a href="#" title="100_2888"><img src="data1/tooltips/100_2888.jpg" alt="100_2888"/>7</a>
<a href="#" title="Basement"><img src="data1/tooltips/img_1224.jpg" alt="Basement"/>8</a>
<a href="#" title="Bathroom"><img src="data1/tooltips/img_1246.jpg" alt="Bathroom"/>9</a>
</div>
</div>
<span class="wsl"><a href="http://wowslider.com">jQuery Slideshow</a> by WOWSlider.com v4.0</span>
<div class="ws_shadow">
</div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<?PHP include('footer.php'); ?>
</body>
</html>
CSS:
body {
font-family: "Vijaya", "Andalus", Serif;
font-size: 20px;
color: white;
width: 866px;
margin: auto;
align: center;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
ul.jsddm {
margin: 0;
padding: 0;
position: relative;
line-height: 2.0em;
}
ul.jsddm a {
color: #000000;
background-color: #F5DEB3;
border: 1px solid #444;
display: block;
text-decoration: none;
text-align: center;
width: auto;
height: 32px;
}
ul.jsddm a:hover {
color: #000;
background-color: #FFF;
height: 32px;
}
ul.jsddm > li {
position: relative;
float: left;
list-style: none;
width: 20%;
}
HTML file for navigation bar that gets included on most pages for code reuse:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<link rel="stylesheet" href='jsddm.css'>
<img src="./styles/icons/kitchen2.jpg" class="image" />
</head>
<body background="./styles/icons/background4.jpg">
<body style="background-image:url(./styles/icons/background4.jpg)">
</body>
<!--
//include favicon for site
-->
<link rel="shortcut icon" href="./styles/icons/daikofavicon.ico" />
<!--
//jQuery to make navigation bar work and drop down
-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("ul.jsddm li").hover(function(){
$('ul:first',this).css('visibility', 'visible');
}, function(){
$('ul:first',this).css('visibility', 'hidden');
});
});
</script>
<!--
//navigation bar menu set up referenced by css file jsddm
-->
<body>
<div id="wrapper">
<ul class="jsddm">
<li><a href="index">HOME</a>
<li><a href="services">SERVICES</a></li>
<li><a href="gallery">GALLERY</a></li>
<li><a href="window">WINDOWS</a></li>
<li><a href="contactus">CONTACT US</a></li>
</ul>
</div>
<br/>
</body>
</html>
Upvotes: 1
Views: 1085
Answers (1)
Nick
Reputation: 15429
The navigation bar's wrapper has a different style on your gallery page.
On the other pages you have top: 20px; set. On the gallery page you have top: 14px; set.
Just use one external style sheet across all pages for things like your navigation bar. You can get into specifics for each page in individual style sheets if necessary, but this way you will avoid inconsistencies in your "master" elements.
Upvotes: 1
Related Questions
- HTML, CSS Horizontal navigation bar filling up
- Prevent horizontal shrinking of the navigation bar
- How to keep Navigation Bar elements from overlapping when resizing window?
- Navigation bar shrinks when position is set to fixed
- Text overlapping navigation bar when resizing browser window
- Undesired effect on a nav bar when resizing .container width
- CSS Navigation bar changes size
- Navigation Bar size staying relative to content
- Horizontal navigation bar when resizeing browser window going wrong
- CSS Nav bar resize issue