Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems with HTML Anchor links within CSS design

    Hi everyone. I'm having a significant problem with my HTML anchors in my current layout. For some reason, when I click on the link to take me to the anchor lower in the page, it pushes all of my content up a couple hundred pixels into my containing DIV, which looks really awful. You can see what I mean here:

    http://www.deepwaterchurch.com/next/whatwedo
    Anchor links are below the navigational "tabs" at the top.

    This is a significant hurdle for me, since these Anchor links are very important for navigation across a number of pages. I'd really appreciate any insight. Thanks in advance.

    The code for the page is below:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Deep Water Church: What We Do</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    	<link href="../css/universal.css" rel="stylesheet" type="text/css" />
        <link href="../css/jflow.css" rel="stylesheet" type="text/css" />
    
         <!--[if lt IE 7]>
                <script type="text/javascript" src="unitpngfix.js"></script>
        <![endif]-->   
    
        
    	
    	
    </head>
    <body>
    <div id="container">
    <div id="top"></div><!--end top-->
    <div id="content-container">
    <div id="content"><!--START ENTERING CONTENT HERE-->
    <div id="logo"><a href="../"><img src="../images/logo.jpg" border="0" alt="Deep Water Church"/></a></div>
     <div id="navtabs">
    		<ul id ="nav">
    	<li class="whoweare"><a href="../whoweare">WHO WE ARE</a></li>
    	<li class="whatwedodown"><a href="../whatwedo">WHAT WE DO</a></li>
    	<li class="beforeyoucome"><a href="../beforeyoucome">BEFORE YOU COME</a></li>
    	<li class="onceyourehere"><a href="../onceyourehere">ONCE YOU'RE HERE</a></li>
    	<li class="faq"><a href="../faq">FAQ</a></li>
    	<li class="contactus"><a href="../contactus">CONTACT US</a></li>	</ul></div><!--end navigation-->
    	
    	 <div id="subnav" style="position:absolute; top:80px; left:20px;">
    		<ul id ="nav">
    	<li><a href="#Worship">WORSHIP</a></li>
    	<li><a href="#UpstreamKids">UPSTREAM KIDS</a></li>
    	<li><a href="#SmallGroups">SMALL GROUPS</a></li>
    	<li><a href="#luvHAITIluvHALI">luvHAITI &amp; luvHALI</a></li>
    	<li><a href="#FoundationsCourse">FOUNDATIONS COURSE</a></li>
    </ul></div><!--end navigation-->
    
    	
    <div id="sub page content" style="position:relative;top:120px; padding-bottom:140px; padding-right:20px;width:765px;"><!--start page content-->
    
    
    <!--start worship-->
    <div style="display:block; text-align:justify;width:600px;line-height:175%;padding:30px;">
    <a name="Worship"></a>
    <img src="images/worship.jpg" alt="Worship" /><br />
    We <a href="where">gather each Sunday</a> for some great music, some clear teaching about Jesus, and usually a good laugh or two. <em>(The free coffee and doughnuts aren't bad either.)</em> For more info see "<a href="../whattoexpect">What to Expect</a>". Feel free to come check it out anytime. 
    
    </div><!--end worship-->
    
    <div id="upstreamkids" style="display:block; position:relative; left:140px;text-align:justify;width:600px;line-height:175%;padding:30px;top:0px;padding-bottom:40px;"><a name="UpstreamKids"></a><img src="images/upstreamkids.jpg" alt="Upstream Kids" style="position:relative; left:335px;" /><br />
    We offer great programs on Sunday morning during the Worship Gathering for kids from birth to grade 6.  All programs are staffed by caring, trained, and rigorously screened adults.  For full details and information check out the <a href="../upstream">Upstream site</a>.
    
    </div><!--end Upstream Kids-->
    
    <!--start Small Groups-->
    <a name="SmallGroups"></a>
    <div style="display:block; position:relative; text-align:justify;width:600px;line-height:175%;padding:30px;top:10px;">
    <img src="images/smallgroups.jpg" alt="Small Groups" /><br />
    Groups of 6-12 people who meet weekly in someone's home or at the Abbey to pray, discuss how to apply the message from Sunday to life, and just hang out and have fun together.  Groups meet at various times and in various areas of the city.  For more info or to join a group, see the <a href="../smallgroups">small group info</a> page.
    
    </div><!--end Small Groups-->
    
    
    <!--start luvHAITI and luvHALI-->
    <div id="believe" style="display:block; position:relative; left:140px;text-align:justify;width:600px;line-height:175%;padding:30px;top:20px;padding-bottom:40px;">
    <a name="luvHAITIluvHALI"></a>
    <img src="images/luvhaitihali.jpg" alt="luvHAITI and luvHALI" style="position:relative; left:280px;"/><p>
    We are actively and passionately involved in working to help those who are less fortunate both here in Halifax and through our strategic partnerships in Haiti.  For more info or to get involved check out <a href="../luv">luvHALI and luvHAITI</a>. 
    
    </p>
    </div><!--end luvHAITI luvHALI-->
    <!--start Foundations Course-->
    <div style="display:block; text-align:justify;width:600px;line-height:175%;padding:30px;">
    <a name="FoundationsCourse"></a>
    <img src="images/foundationscourse.jpg" alt="Foundations Course" /><br />
    This is a series of 4 courses offered regularly at Deep Water that are designed to help you lay a great foundation for your life as a follower of Jesus.  Whether you are new to following Jesus or need to brush up on some core ideas, Foundations Courses are right for you. For the full break down of courses and how to register, <a href="../foundations">click here</a>. 
    </div><!--end Foundations Course-->
    
    </div><!--end page content-->
    </div><!--end content div-->
    <div id="bottom"></div><!--end bottom-->
    </div><!--end content-container-->
    <div class="clear"></div><!--end clearing div-->
    </div><!--end container-->
    <!--start footer-->
    <div align="center" style="position:relative; top:-5px; padding-bottom:10px;">
    <span style="color:#333333; font-size:10px;">Copyright Deep Water Church  2007 - <script type="text/javascript">
    var theDate=new Date()
    document.write(theDate.getFullYear())
    </script>.  All rights reserved.</span>
    </div><!--end footer-->
    
    
    </body>
    </html>
    Last edited by robinogi; 08-23-2010 at 03:10 AM. Reason: more info

  • #2
    New Coder
    Join Date
    Aug 2010
    Location
    Illinois
    Posts
    20
    Thanks
    1
    Thanked 1 Time in 1 Post
    Sorry, I'm not very good at this, but I can fix it.

    Remove:
    Code:
    <div id="sub page content" style="position:relative;top:120px; padding-bottom:140px; padding-right:20px;width:765px;">
    Also remove the closing tag for that div. This is creating the problem.

    Then try replacing the div with:
    Code:
    <!--start page content-->
    <div style="padding-bottom:120px"></div>
    So just to keep it simple, try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Deep Water Church: What We Do</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    	<link href="../css/universal.css" rel="stylesheet" type="text/css" />
        <link href="../css/jflow.css" rel="stylesheet" type="text/css" />
    
         <!--[if lt IE 7]>
                <script type="text/javascript" src="unitpngfix.js"></script>
        <![endif]-->   
    
        
    	
    	
    </head>
    <body>
    <div id="container">
    <div id="top"></div><!--end top-->
    <div id="content-container">
    <div id="content"><!--START ENTERING CONTENT HERE-->
    <div id="logo"><a href="../"><img src="../images/logo.jpg" border="0" alt="Deep Water Church"/></a></div>
     <div id="navtabs">
    		<ul id ="nav">
    	<li class="whoweare"><a href="../whoweare">WHO WE ARE</a></li>
    	<li class="whatwedodown"><a href="../whatwedo">WHAT WE DO</a></li>
    	<li class="beforeyoucome"><a href="../beforeyoucome">BEFORE YOU COME</a></li>
    	<li class="onceyourehere"><a href="../onceyourehere">ONCE YOU'RE HERE</a></li>
    	<li class="faq"><a href="../faq">FAQ</a></li>
    	<li class="contactus"><a href="../contactus">CONTACT US</a></li>	</ul></div><!--end navigation-->
    	
    	 <div id="subnav" style="position:absolute; top:80px; left:20px;">
    		<ul id ="nav">
    	<li><a href="#Worship">WORSHIP</a></li>
    	<li><a href="#UpstreamKids">UPSTREAM KIDS</a></li>
    	<li><a href="#SmallGroups">SMALL GROUPS</a></li>
    	<li><a href="#luvHAITIluvHALI">luvHAITI &amp; luvHALI</a></li>
    	<li><a href="#FoundationsCourse">FOUNDATIONS COURSE</a></li>
    </ul></div><!--end navigation-->
    
    	
    
    <div style="padding-bottom:120px"></div>
    
    
    <!--start worship-->
    <div style="display:block; text-align:justify;width:600px;line-height:175%;padding:30px;">
    <a name="Worship"></a>
    <img src="images/worship.jpg" alt="Worship" /><br />
    We <a href="where">gather each Sunday</a> for some great music, some clear teaching about Jesus, and usually a good laugh or two. <em>(The free coffee and doughnuts aren't bad either.)</em> For more info see "<a href="../whattoexpect">What to Expect</a>". Feel free to come check it out anytime. 
    
    </div><!--end worship-->
    
    <div id="upstreamkids" style="display:block; position:relative; left:140px;text-align:justify;width:600px;line-height:175%;padding:30px;top:0px;padding-bottom:40px;"><a name="UpstreamKids"></a><img src="images/upstreamkids.jpg" alt="Upstream Kids" style="position:relative; left:335px;" /><br />
    We offer great programs on Sunday morning during the Worship Gathering for kids from birth to grade 6.  All programs are staffed by caring, trained, and rigorously screened adults.  For full details and information check out the <a href="../upstream">Upstream site</a>.
    
    </div><!--end Upstream Kids-->
    
    <!--start Small Groups-->
    <a name="SmallGroups"></a>
    <div style="display:block; position:relative; text-align:justify;width:600px;line-height:175%;padding:30px;top:10px;">
    <img src="images/smallgroups.jpg" alt="Small Groups" /><br />
    Groups of 6-12 people who meet weekly in someone's home or at the Abbey to pray, discuss how to apply the message from Sunday to life, and just hang out and have fun together.  Groups meet at various times and in various areas of the city.  For more info or to join a group, see the <a href="../smallgroups">small group info</a> page.
    
    </div><!--end Small Groups-->
    
    
    <!--start luvHAITI and luvHALI-->
    <div id="believe" style="display:block; position:relative; left:140px;text-align:justify;width:600px;line-height:175%;padding:30px;top:20px;padding-bottom:40px;">
    <a name="luvHAITIluvHALI"></a>
    <img src="images/luvhaitihali.jpg" alt="luvHAITI and luvHALI" style="position:relative; left:280px;"/><p>
    We are actively and passionately involved in working to help those who are less fortunate both here in Halifax and through our strategic partnerships in Haiti.  For more info or to get involved check out <a href="../luv">luvHALI and luvHAITI</a>. 
    
    </p>
    </div><!--end luvHAITI luvHALI-->
    <!--start Foundations Course-->
    <div style="display:block; text-align:justify;width:600px;line-height:175%;padding:30px;">
    <a name="FoundationsCourse"></a>
    <img src="images/foundationscourse.jpg" alt="Foundations Course" /><br />
    This is a series of 4 courses offered regularly at Deep Water that are designed to help you lay a great foundation for your life as a follower of Jesus.  Whether you are new to following Jesus or need to brush up on some core ideas, Foundations Courses are right for you. For the full break down of courses and how to register, <a href="../foundations">click here</a>. 
    </div><!--end Foundations Course-->
    
    </div><!--end content div-->
    <div id="bottom"></div><!--end bottom-->
    </div><!--end content-container-->
    <div class="clear"></div><!--end clearing div-->
    </div><!--end container-->
    <!--start footer-->
    <div align="center" style="position:relative; top:-5px; padding-bottom:10px;">
    <span style="color:#333333; font-size:10px;">Copyright Deep Water Church  2007 - <script type="text/javascript">
    var theDate=new Date()
    document.write(theDate.getFullYear())
    </script>.  All rights reserved.</span>
    </div><!--end footer-->
    
    
    </body>
    </html>

    I'm pretty sure this will fix the problem you're having.

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi robinogi,

    How did you fix your problem?

    Thanks!


  •  

    Posting Permissions

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