unwanted navigation bar resizing issue (CSS and HTML) -
i have built navigation bar using html , css , functions perfectly. issue when either of 2 gallery pages selected, positioning of navigation bar moves upward. im not sure issue lies (it seems quite specific since cant find similar issue here nor on google).
note: gallery html page has css content written in because if content included using php's include statment (as on other pages), gallery slideshow images distorted/streched reason. either way though, navigation bar issue present.
html services page (a non-gallery pager):
<?php //if browser ie, displays ie specific navbar if(strpos($_server['http_user_agent'], 'msie') !== false) {include('navbarie.php');} //if browser 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 conveniece, have listed few of projects commonly undertake. if there specific service require , not listed below, please <a style="color: white;" href="contactus.php">contact us</a> more information. additionally, offer free estimates our services. while larger projects may require on-site evaluation , no 2 projects alike, request send short email inquiry or question might have. <br><br> </span> <ul> <li>window , door installation (european , domestic)</li> <li>general , 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 , tile)</li> <li>house additions</li> <li>lighting , 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 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 adjust properties of ie navigation bar , 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 { 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 --> <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 , dining rooms" title="living , 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 , dining rooms"><img src="data1/tooltips/img_1214.jpg" alt="living , 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> 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 { 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 navigation bar gets included on pages 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 site --> <link rel="shortcut icon" href="./styles/icons/daikofavicon.ico" /> <!-- //jquery make navigation bar work , 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 referenced 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>
the navigation bar's wrapper has different style on gallery page.
on other pages have top: 20px; set. on gallery page have top: 14px; set.
just use 1 external style sheet across pages things navigation bar. can specifics each page in individual style sheets if necessary, way avoid inconsistencies in "master" elements.
Comments
Post a Comment