SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member m16guy's Avatar
    Join Date
    Feb 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to stop web page expanding when positioning a div

    Hi

    I am in the process of building my first ever webpage and i'm having issues with positioning.

    I have manage to position most elements on my page fine (well, I think I have, all appear to be in the right place) but when I try to position a twitter feed, which I've wrappeed in a div the page expands in width.

    When I remove the twitter div or don't position it in CSS the page doesn't expand. I have tried both absolute and relative positioning and get the same results.

    Should I be using a different method to position or am I missing some mark up

    Also, the page displays how it should in most browsers but then is all over the place on my iphone and andriod tablet. see link below

    http://www.chance4changeproject.co.uk/

    Any help appreciated

    Thanks in advance

    Mic

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,375
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Sorry - I don't have time to look at this properly just now. However, you have an extra pair of <body> tags which might be screwing things up. Try removing them and see if that helps anything.

    Code:
    <div id="navigation">
          <body id="body_hom">
          <ul id="nav">
            <li id="nav_hom"><a href="home.html">Home</a></li>
            <li id="nav_abo"><a href="about.html">About Us</a></li>
            <li id="nav_you"><a href="youth.html">Youth Project</a></li>
            <li id="nav_eds"><a href="support.html">EDS Programmes</a></li>
            <li id="nav_for"><a href="forum.html">Forum</a></li>
            <li id="nav_eve"><a href="events.html">Timetable</a></li>
            <li id="nav_con"><a href="contact.html">Contact Us</a></li>
          </ul>
          </body>
        </div> <!-- end of navigation div -->
    You should only have one pair of body tags on each page. (I'm sure you knew that.)

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Hi Mic,

    for layout you rarely every need to position anything, so I'd do away with all the relative and absolute positioning on all elements, including your logo.

    You have a very simple layout and it screams to be done with floats. This will also resolve your display issues on mobile devices (tablets, phones).

    Set a width on the various containers and float them where needed.

    See this article for a thorough explanation on how to work with floats: http://dev.opera.com/articles/view/3...-and-clearing/

    More reading:

    http://dev.opera.com/articles/view/3...e-positioning/
    http://dev.opera.com/articles/view/3...d-positioning/

    The three links I posted should give you a solid insight on what to use when and why.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    SitePoint Member m16guy's Avatar
    Join Date
    Feb 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I should have explain I am completey new to web design only a month in infact.

    I know of this rule but in the book "The Art and science of CSS" it shows how to style the navigation bar to show which page you are on, so I have just replicated the mark up.

    What mark up could I use to keep this effect and lose the extra body tag?

    CSS

    #twitter {
    position: absolute;
    display: inline;
    top: 490px;
    left: 903px;
    }
    #navigation {
    position: absolute;
    top: 100px;
    left: 170px;
    width: 1000px;
    height: 30px;
    padding-bottom: 0px;
    padding-top: 0;
    margin: 0px auto;
    margin-left: 0px;
    margin-bottom: 3px;
    border: 0px green;
    background: #228653;
    }
    #navigation ul {
    list-style-type: none;
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    }
    #navigation ul li {
    width: 142px;
    float: left;
    margin: 0px;
    padding: 0;
    border: 0px solid #61D8A2;
    }
    #navigation ul li a {
    font-family: verdana, arial;
    text-decoration: none;
    display: block;
    width: 142px;
    height: 30px;
    line-height: 30px;
    font-size: 11pt;
    color: #61D8A2;
    }
    #navigation a:hover {
    background-position: 0px;
    font-weight: 675;
    color: white;
    }
    #body_hom #nav_hom a, #body_abo #nav_abo a, #body_you #nav_you a,
    #body_eds #nav_eds a, #body_for #nav_for a, #body_eve #nav_eve a,
    #body_con #nav_con a {
    background: #61D8A2;
    font-weight: normal;
    color: white;
    }

    Thanks for the advice

  5. #5
    SitePoint Member m16guy's Avatar
    Join Date
    Feb 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank Kohoutek, i'll give it a go

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    By copying markup from other places (or books) you're making it harder for yourself, given that you're new to the field. Almost all of the code—which I hope is not from the book, as it's flawed to no end—is problematic, wrong, or redundant.

    If you want to have a solid site, one that doesn't break, then the only option you have is to start from scratch. This might sound horrible to you, but it's better to learn how to properly design a site than starting off wrongly. You'll have more headaches and more frustration by keeping the code you currently have.

    Start with the basics, perhaps take a CSS and HTML course (SitePoint has some on learnable.com). Or start with a good tutorial site such as htmldog.com.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,375
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by m16guy View Post
    What mark up could I use to keep this effect and lose the extra body tag?
    You could just move the id to the correct body tag and delete the extra one.

    The opening <body> should always come immediately after the closing </head> tag. Change that to read <body id="body_hom">, as it's this id which is allowing you to target this page specifically in your styles. The closing </body> tag should come right at the end of all your markup, right before the closing </html> tag. Delete the ones surrounding your nav menu. Does that help?

    I agree with everything kohoutek has said. It's much easier to learn by writing your own code than by trying to copy someone else's and make it work. If you get stuck in the process, you can always come here and ask.

  8. #8
    SitePoint Member m16guy's Avatar
    Join Date
    Feb 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Technobear!

    All the advise I will be taking on on board, just working on the floating method now!

    Oh and thanks the advise on removing the body id tag around the navigation and putting in the opening body tag works a treat and makes complete sense

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,375
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    If it works - great, and if it makes sense - even better.

  10. #10
    SitePoint Member m16guy's Avatar
    Join Date
    Feb 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi kohoutek

    Big thanks for the floating and clearing article, I revamp the whole site and I'm finding it alot more smoother to maintain. All pages passed the html validator apart from the ones with the external twitter feed, facebook like box and external contact form

    Thanks again

    just sturggling to link the forum now??

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by m16guy View Post
    Hi kohoutek

    Big thanks for the floating and clearing article, I revamp the whole site and I'm finding it alot more smoother to maintain. All pages passed the html validator apart from the ones with the external twitter feed, facebook like box and external contact form

    Thanks again

    just sturggling to link the forum now??
    You need at least 10 posts to your account before you are allowed to post links. In the mean time (not that it matters since you have 9), you can do something like this.

    http : // www . sitehere . com / page . php
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,375
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by m16guy View Post
    just sturggling to link the forum now??
    Have you managed to sort that out? If you're still needing help, a few more details about the problem wouldn't go amiss.

    Off Topic:


    Quote Originally Posted by RyanReese View Post
    You need at least 10 posts to your account before you are allowed to post links.
    Not true. However, I think m16guy was referring to a problem linking in the forum on his own site, rather than a problem posting links here.

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by m16guy View Post
    Hi kohoutek

    Big thanks for the floating and clearing article, I revamp the whole site and I'm finding it alot more smoother to maintain. All pages passed the html validator apart from the ones with the external twitter feed, facebook like box and external contact form

    Thanks again
    That's great to hear, m16guy!

    If you have understood the content of the articles I posted, which is not easy reading for someone new to the topic, then you're way ahead of most and have a solid foundation for building stable layouts.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Tags for this Thread

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
  •