Click to See Complete Forum and Search --> : Problem with first ever tabless design - space at bottom of page


cormac
06-15-2007, 04:04 AM
Hi,

After many months putting it off I've finally taken the plunge and used CSS to layout my page. I won't say it was easy but I've learned a lot of new stuff which is great!

I have a problem with the design I did tho. At the bottom of the page, beneath the fold there is a lot of empty space.

I think it is my navigation divs causing it - they are at the bottom of the page before it is rendered and my CSS code is positioning them 'relative' by -485, which only seems to shunt them up visually but they still seem to take up space at the bottom of the page.

I'd appreciate any pointers whatsoever! Any tips related to what might be causing the problem or any tips to improve my CSS in general would be great. I'm a complete newbie to tableless design so thake that into consideration :)

The design is at http://www.mountjuliet.ie/index-07.html
and the CSS is at http://www.mountjuliet.ie/newhp.css (it validates ok).

Thanks.

KDLA
06-15-2007, 08:05 AM
I suggest ditching all those negative values. Negative values are quirky in many browsers. And, really, your layout can be easily achieved without them.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kilkenny Hotels, Golf and Luxury Hotel in Kilkenny, Ireland, book a hotel or golf in Kilkenny - Kilkenny accommodation - Welcome to Mount Juliet Kilkenny</title>
<link href="newhp.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
padding:0px;
text-align:center;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 50px;
margin-left: 0px;
background-image : url(http://www.mountjuliet.ie/img/homepage07/wall_paper.gif);
background-repeat : repeat;
font-size:10px

}
#wrapper{
width:816px;
text-align:left;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
background: url(frame-sides.gif) repeat-y center top;}
}
#golf {display: block; width: 100%; background: url(file.gif) no-repeat 148px 0;}

#golfnav {padding: 8px;
text-align: left;
background: url(http://www.mountjuliet.ie/img/homepage07/golf_cell_background.jpg);
width: 148px;}

#hotel {display: block; width: 100%; background: url(file.gif) no-repeat 148px 0;}

#hotelnav {padding: 8px; background: url(http://www.mountjuliet.ie/img/homepage07/hotel_cell_bg.jpg);
width: 148px;}

.newhp {
}
#bottomnav {
width: 818px;
text-align: center;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 110%;
color: #FFFFFF;
text-decoration: none;
}
a:visited{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 110%;
color: #FFFFFF;
text-decoration: none;
}


#middle {
}
#base {
}
ul, li {list-style-type: none; padding: 0; margin: 0;}
a:hover{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 110%;
color: #FFFFFF;
text-decoration: underline;
}
a:active{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 110%;
color: #FFFFFF;
text-decoration: underline;
}
.divider {
height: 21px;
width: 2px;
padding-right: 7px;
padding-left: 7px;
padding-bottom: 8px;
}
#bottomnavbuttons {
text-align: center;
}
#bottomnavbuttons li {display: inline;}

#logo {
border: 4px solid #CBCB9D;
margin-right: 8px;
margin-left: 8px;}

#logos {
text-align: center;
}
#footer_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #CCCCCC;}
</style>
</head>

<body>
<div id="wrapper" >
<div id="golf">
<div id="golfnav">
<ul>
<li><a href="golf/index.html">Golf Course</a></li>
<li><a href="http://www.mountjuliet.ie/golf/membership.html">Membership</a></li>
<li><a href="http://www.mountjuliet.ie/golf/putting.html">18 Hole Putting</a></li>

<li><a href="http://www.mountjuliet.ie/golf/practice.html">Practice Facilities</a></li>
<li><a href="http://www.mountjuliet.ie/golf/tuition.html">Tuition</a></li>
<li><a href="http://www.mountjuliet.ie/estate/honour.html">Roll of Honour</a></li>
<li><a href="http://www.mountjuliet.ie/golf/results.php">Competition Results</a></li>
<li><a href="http://www.mountjuliet.ie/misc/weather.html">Local Weather</a></li>
<li><a href="http://www.mountjuliet.ie/members/">Member Login</a><span class="style1">/</span><a href="http://www.mountjuliet.ie/register/">Register</a></li>

<li><a href="http://www.mountjuliet.ie/golf/fathersdayspecials.html">&gt;&gt;Golf Specials</a></li>
<li><a href="http://www.mountjuliet.ie/teetime/index.html">&gt;&gt;Book a Tee Time</a></li>
<li><a href="http://www.mountjuliet.ie/golf/rates.html">&gt;&gt;Green Fees</a></li>
<li><a href="https://gifts.skchase.com/mountjuliet.htm">&gt;&gt;Buy a Gift Voucher</a></li>
</ul>
</div>
</div>
<div id="hotel">
<div id="hotelnav">
<ul>
<li><a href="/estate/index.html">Mount Juliet Estate</a></li>
<li><a href="http://www.mountjuliet.ie/estate/history.html">Estate History</a></li>

<li><a href="/accommodation/index.html">Accommodation</a></li>
<li><a href="/dining/index.html">Dining</a></li>
<li><a href="/spa/index.html">The Spa</a></li>
<li><a href="/dining/private_dining.html">Meetings &amp; Weddings</a></li>
<li><a href="activities/index.html">Estate Activities</a></li>
<li><a href="about/contact.html">Contact Us</a></li>
<li><a href="about/map.html">How to Find Us</a></li>
<li><a href="http://www.mountjuliet.ie/accommodation/specials.html">&gt;&gt;Hotel Specials</a></li>

<li><a href="http://conradhotels1.hilton.com/doxch.do?dst=http://CH/en/ch/res/choose_dates.jhtml?ctyhocn=DUBMJCI">&gt;&gt;Book a Room</a></li>
<li><a href="https://gifts.skchase.com/mountjuliet.htm">&gt;&gt;Buy a Gift Voucher</a></li>
</ul>
</div>
</div>

<div id="bottomnavbuttons">
<ul>
<li><a href="golf/fathersdayspecials.html"><img src="http://www.mountjuliet.ie/img/homepage07/button_fathers_day.gif" alt="Fathers' Day" border="0" /></a></li>
<li><a href="http://www.mountjuliet.ie/golf/fathersdayspecials.html"><img src="http://www.mountjuliet.ie/img/homepage07/button_golf_specials.gif" alt="Golf Specials" width="95" height="32" border="0" /></a></li>
<li><a href="http://www.mountjuliet.ie/teetime/index.html"><img src="http://www.mountjuliet.ie/img/homepage07/button_book_teetime.gif" alt="Book a Tee Time" width="113" height="32" border="0" /></a></li>
<li><a href="http://www.mountjuliet.ie/golf/rates.html"><img src="http://www.mountjuliet.ie/img/homepage07/button_green_fees.gif" alt="Green Fees" width="76" height="32" border="0" /></a></li>
<li><a href="http://www.mountjuliet.ie/accommodation/specials.html"><img src="http://www.mountjuliet.ie/img/homepage07/button_hotel_specials.gif" alt="Hotel Specials" width="104" height="32" border="0" /></a></li>
<li><a href="http://conradhotels1.hilton.com/doxch.do?dst=http://CH/en/ch/res/choose_dates.jhtml?ctyhocn=DUBMJCI"><img src="http://www.mountjuliet.ie/img/homepage07/button_book_room.gif" alt="Book a Room" width="96" height="32" border="0" /></a></li>
<li><a href="https://gifts.skchase.com/mountjuliet.htm"><img src="http://www.mountjuliet.ie/img/homepage07/button_gift_vouchers.gif" alt="Gift Vouchers" width="105" height="32" border="0" /></a></li>
</ul>
</div>
<div id="logos">
<p><img src="http://www.mountjuliet.ie/img/homepage07/logo_conrad.jpg" alt="Mount Juliet Conrad logo" width="107" height="77" class="logo" id="logo" /> <img src="http://www.mountjuliet.ie/img/homepage07/logo_hoty.jpg" alt="Georgina Campbell's Hotel of the Year 2007" width="107" height="77" class="logo" id="logo" /><img src="http://www.mountjuliet.ie/img/homepage07/logo_mj.jpg" alt="Mount Juliet logo" width="107" height="77" class="logo" id="logo" /></p>
<p><span class="grey_footer_text" id="footer_text">Mount Juliet, Thomastown, Co. Kilkenny, Ireland. Tel. +353 (0)56 777 3000 Fax. +353 (0)56 777 3019 email reservations@mountjuliet.ie </span></p>
</div>
</div>
</body>

</html>


You'll need to adjust some of the padding/margins when you replace some of the images. Use full backgrounds (not slices) for the golf and hotel divs. Same for all the bottom nav images -- use full image (with frame).

KDLA

cormac
06-15-2007, 09:36 AM
Hi KDLA,

That's certainly a lot different form how I did it! I don't know if I know enough yet to finish it off but I'll give it a good try!
Thanks for the help.