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 10 of 10
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to keep a button fixed

    So this is my site that I have so far, http://andynguytest.hosterbox.net/
    And I noticed that my buttons jump lines if the screen becomes to small.


    I was wondering what I can do to make the buttons stay fixed on one line.

    This is my code, can someone critique and tell me what I'm doing wrong?
    I just compiled a bunch of tips I found on google for this site.

    Code:
    <!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" />
    <head>
    <title>Andy Nguy - Photography</title>
    </style>
    </head>	
    <body style="background: #000 url('images/background.jpg') no-repeat fixed"> 
    <br>
    <center>
    <img src="images/banner2.png"/>
    <br>
    <img src="images/home3.png"/><img src="images/about1.png"
    onmouseover="this.src='images/about2.png'"
    onmouseout="this.src='images/about1.png'"><img src="images/portfolio1.png"
    onmouseover="this.src='images/portfolio2.png'"
    onmouseout="this.src='images/portfolio1.png'"><img src="images/contact1.png"
    onmouseover="this.src='images/contact2.png'"
    onmouseout="this.src='images/contact1.png'">
    </center>
    </body>
    </html>
    Last edited by anhyee; 05-02-2011 at 02:24 AM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You should validate and correct your HTML first:

    You need a !DOCTYPE declaration,
    Your 'body' tag starts within the 'head',
    You haven't properly closed the 'body' tag.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    What AndrewGSW said
    and the w3c validator is at http://validator.w3.org/

    If you don't declare a doctype your browser will probably go into quirksmode.
    Last edited by bullant; 05-02-2011 at 02:09 AM.

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ooo I never knew about that tool! Thanks a lot, that really helped.

    so here's the updated version
    Code:
    <!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" />
    <head>
    <title>Andy Nguy - Photography</title>
    </style>
    </head>	
    <body style="background: #000 url('images/background.jpg') no-repeat fixed"> 
    <br>
    <center>
    <img src="images/banner2.png"/>
    <br>
    <img src="images/home3.png"/><img src="images/about1.png"
    onmouseover="this.src='images/about2.png'"
    onmouseout="this.src='images/about1.png'"><img src="images/portfolio1.png"
    onmouseover="this.src='images/portfolio2.png'"
    onmouseout="this.src='images/portfolio1.png'"><img src="images/contact1.png"
    onmouseover="this.src='images/contact2.png'"
    onmouseout="this.src='images/contact1.png'">
    </center>
    </body>
    </html>

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by anhyee View Post
    ooo I never knew about that tool! Thanks a lot, that really helped.

    so here's the updated version
    no problem but your updated code is still not valid html and has lots of errors in it. Maybe use that tool to help you fix your html first like Andrew suggested.

    If you run your code through the validator, it will tell you what your errors are.
    Last edited by bullant; 05-02-2011 at 04:25 AM.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Impressive to have 16 errors in 23 lines of HTML
    Attached Thumbnails Attached Thumbnails How to keep a button fixed-errors1.png  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    More to the point of your initial question, ideally you would have a navigation bar in an unordered list. You dont have that. You also dont have ANY containing elements other than to use the outdated deprecated <center> tag.

    When you say your images "jump" when the screen becomes smaller. Thats because you dont have them in an element with a specified width that will force them to stay inline where you want them. So if they were in an unordered list within a div, then you could set the width if the <ul> to say 400px or whatever suits your needs, then they wouldnt break out of their containing element.

    But, if you expect to have cross browser compliant code, you NEED to fix your errors.
    Last edited by teedoff; 05-02-2011 at 02:21 PM.
    Teed

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there anhyee,

    check out the attachment for a possible solution to your problem.

    coothead
    &#160;
    Attached Files Attached Files
    Last edited by coothead; 05-02-2011 at 05:14 PM.

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks coothead!
    That is the solution (:
    I really appreciate it, I ignored the use of CSS ):

    Thanks again!

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    No problem, you're very welcome.


  •  

    Posting Permissions

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