SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Big space at bottom of page - please help me!

    Hi all, this is my first post! so take it easy on me!

    I'm just starting on the road to learn css and I must say I'm impressed by css so far. However I've run into a few problems on my first site, which is our company site redesign.

    Firstly, there seems to be a large space appearing underneath the content of the page. In fact it's so big you have to scroll down to see it all!

    Secondly, I can't seem to line up the links on the right hand side with the background images. They're just a few pixels off.

    As I'm a complete noob to this, I'd love any kind of help.

    You can see work in progress at: http://www.enhance.ie/2005
    Style sheet is located at: http://www.enhance.ie/2005/css/enhance_1.css

    Thanks a million & great site by the way!
    cliff.

  2. #2
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, its the background image taking up all your site!

  3. #3
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Err, its not bravo. The problem is your using position: relative which is fine. However, what happens with both relative and aboslute is that, browsers will leave space, where the divs should be if they weren't moved at all. If even if they are moved, like they are in your website, the spaces from their orginal location will remain.

    To fix this, I would recommend using floats instead. So...

    CSS:

    Code:
     body {
     	background-image: url(http://www.enhance.ie/2005/images/background.jpg);
     	text-align: left;
     	width: 749px;
     	margin-left: auto;
     	margin-right: auto;
     	font-family: Arial, Helvetica, sans-serif;
     	font-size: 1em;
     	color: #333333;
     	font-style: normal;
     	text-decoration: none;
     	list-style-image: url(../images/bullet.gif);
     }
     
     h1 {
     font-size: 1.2em;
     font-style: italic;
     letter-spacing: 5px;
     }
     
     h2 {
     font-size: 1.1em;
     }
     
     p {
     font-size: .7em;
     text-align: left;
     line-height: 1.4em;}
     
     li {
     font-size: .7em;
     text-align: justify;
     line-height: 1.4em;}
     
     #top {
     	background-image: url(http://www.enhance.ie/2005/images/top_back.jpg);
     	background-repeat: no-repeat;
     }
     
     #content_all {
     	float: left;
     	width: 576px;
     	margin-top: 11px;
     }
     
     #content {
     	width: 556px;
     	height: 359px;
     	background-color: #FFFFFF;
     	border-right-color: #333333;
     	border-right-style: solid;
     	border-right-width: 1px;
     	border-left-color: #333333;
     	border-left-style: solid;
     	border-left-width: 1px;
     	padding: 10px;
     	overflow: auto;
     }
     
     #top_nav {
     	position: relative;
     	width: 520px;
     	top: 39px;
     	right: -226px;
     }
     
     #top_nav a:link, #top_nav a:visited {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 9px;
     	font-weight: bold;
     	color: #000066;
     	text-decoration: none;
     }
     
     #top_nav a:hover {
     	color: #0066CC;
     }
     #side{
     	margin-left: 11px;
     	margin-top: 11px;
     	float: left;
     	width: 160px;
     }
     #side_nav {
     	width: 160px;
     	font-weight: bold;
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 10px;
     	background-color: #FFFFFF;
     	height: 272px;
     	background-image: url(http://www.enhance.ie/2005/images/side_back.jpg);
     }
     
     #side_nav a:link, #side_nav a:visited {
     	display: block;
     	color: #000066;
     	font-weight: bold;
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 10px;
     	text-decoration: none;
     	padding: 12px 0px 0px 15px;
     	line-height: 12.5px;
     }
     
     #side_nav a:hover {
     	color: #0066CC;
     }
     
     #quote {
     	margin-top: 11px;
     	width: 160px;
     	height: 112px;
     }
     .bulletpoints {
     	font-family: Arial, Helvetica, sans-serif;
     	font-size: 1em;
     	list-style-image: url(http://www.enhance.ie/2005/images/bullet.gif);
     }
    HTML:

    Code:
     <body>
     <div id="top_nav"><a href="usability.htm">USABILITY</a> | <a href="function.htm">FUNCTIONALITY</a> 
       | <a href="design.htm">DESIGN</a> | <a href="promotion.htm">PROMOTION</a> | 
       <a href="leg_comp.htm">LEGAL &amp; COMPLIANCE</a> | <a href="web_serv.htm">WEB 
       SERVICES</a></div>
     
     <div id="top">
       <a href="index.htm"><img src="http://www.enhance.ie/2005/images/logo.gif" alt="Enhance Logo - Home" width="192" height="60" border="0"></a></div>
     <div id="content_all">
     <div id="content_top"><img src="http://www.enhance.ie/2005/images/main_top.gif" width="578" height="8"></div>
     <div id="content">
       <h1>Welcome to Enhance.ie</h1>
       <p><br>
     	Enhance.ie is a web usability and functionality solution provider. Information
     	  on our services is available by navigating the site, or contact us for a
     	  bespoke solution. Essentially, our service examines the Internet opportunities
     	  for a business from various use perspectives (e-commerce, CRM, SCM, HR, Operational
     	  Efficiencies) and implements the technology to capitalise on the agreed project
     	  plan. </p>
       <p><br>
     	<strong>What we do: </strong></p>
     
       <ul>
     	<li>Use the web to reduce cost of doing business through enhanced customer
     		communication, increased supplier integration, more efficient staff collaboration.	  </li>
     	<li>Use the web to reduce customer acquisition costs, improve customer relationship
     	  management and reduce CRM costs. </li>
     	<li>Use the web to generate leads and sales. </li>
     	<li>Help companies understand and
     	  profit from the business impact of the Internet.</li>
     	<li>Work with you to understand
     		how the Internet could help your business, from cost saving efficiencies
     	  to revenue enhancing activities. </li>
     
     	<li>Enhance the way your business currently
     		uses the Internet.</li>
       </ul>
       </div>
     <div id="content_top"><img src="http://www.enhance.ie/2005/images/main_bott.gif" width="578" height="8"></div>
     </div>
     <div id="side">
     <div id="side_nav"><img src="http://www.enhance.ie/2005/images/title_home.jpg" width="160" height="136"> 
       <a href="contact.htm">CONTACT US</a><a href="manage.htm">MANAGEMENT</a><a href="portfol.htm">PORTFOLIO</a><a href="pub_link.htm">PUBLICATIONS/LINKS</a><a href="enhance.htm">ENHANCE 
       YOUR WEB</a></div>
     <div id="quote"><img src="http://www.enhance.ie/2005/images/quote_support.jpg" width="160" height="112"></div>
     </div>
     
     </body>
    Should work.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  4. #4
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooops, sorry

    /Hangs head in shame

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou so much The New Guy. It really worked a treat, I've put up the new version if you want to have a look.

    Now, any suggestions on the misaligned side nav?!!!

    Thanks again,
    cliff.

  6. #6
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Misaligned?? Looks fine to me!

  7. #7
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They're not too misaligned, but you can see that some of the links are a few pixels off vertically in relation to the "roundy" button backgrounds. I just want to find out how to presicely arrange/space my text links so the appear in the middle of the backgrounds. I've messed around with this for hours and it's driving me nutzoid.

    Any ideas anyone?

    cliff.

  8. #8
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Well, it doesnt look like it will fit properly. I would just cut up that side navigation, and make the anchor tag have the background of the round nav image. Then just change the width and height to match the background.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  9. #9
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by The New Guy
    Well, it doesnt look like it will fit properly. I would just cut up that side navigation, and make the anchor tag have the background of the round nav image. Then just change the width and height to match the background.
    OK, I'll try that on monday. Thanks

    Cliff.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •