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

    trouble alligning/postioning two links

    Hi, i need to add back and next buttons where its outlined in my screenshot. The red area. The problem is ive put in a form, and therefore it doesnt let me.
    Does anyone know a way around this. I need it on the same line.

    Any help is helpful

    Cheers

    Noobtouch




    The code is below. ive taken bits out because its too long. The relevent area should be below anyway. The div id for it is 'extra'.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="HAPedit 3.1">
    <style type="text/css">
    
    html,body{margin:5px;padding:0px}
    body{
    font: 76% arial,sans-serif;
    text-align:center;
    background:#FFFFFF}
    
    
    p{margin:0px 10px 10px}
    a{display:block;color: #981793;padding:10px}
    
    div#header{height:50px;margin:0;padding-left:10px
    ;background:url(images/banner.gif)}
    div#container{text-align:left}
    div#content p{line-height:1.4}
    div#content{ background:#F0F0F0}
    div#navigation{background:#FFFFFF;}
    div#extra{background:#F0F0F0}
    div#footer{background:#284C93;color:#F0F0F0}
    div#footer p{margin:0;padding:5px 10px}
    
    div#container{width:1024px;margin:0 auto;border-top-width:thin;border-right-width:1px;
    border-bottom-width:1px;border-left-width:1px;border-top-style:none;border-right-style:solid;
    border-bottom-style:none;border-left-style:solid; border-bottom-color:#b0b0b0;border-left-color:#DEDFDE;
    border-right-color:#b0b0b0;}
    
    div#content{float:left;width:845px}
    div#navigation{float:right;width:160px}
    div#extra{float:left;width:845px}
    div#footer{clear:both;width:100%}
    
    
    <div id="extra">
    <form name="hop">
    <p align="center">
    <select name="choose">
    <option selected value="#">Select a page</option>
    <option value="#">Page 1</option>
    <option value="#">Page 2</option>
    <option value="#">Page 3</option>
    
    </select>
    <input type="button" onClick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Go"></p>
    </form>
    </div>
    
    <div id="footer"><p>© 2010-2011 Ali El Waili</p></div>
    </div>

    Thanks again

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Quote Originally Posted by noobtouch View Post
    Hi, i need to add back and next buttons where its outlined in my screenshot. The red area. The problem is ive put in a form, and therefore it doesnt let me.
    Does anyone know a way around this. I need it on the same line.

    Not sure what you mean they look on the same line to me (the buttons).

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by quartzy View Post
    Not sure what you mean they look on the same line to me (the buttons).
    Sorry, let me clarify the buttons and writing in red i had DRAWN in to show people where they should be. These buttons are dont exist at the moment.
    The problem is i cant postion them on the same line as the jump menu. Yes im a total newbie..,
    Last edited by noobtouch; 02-13-2011 at 04:29 PM.

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    [QUOTE

    <div id="extra">
    <form name="hop">
    <p align="center">
    <select name="choose">
    <option selected value="#">Select a page</option>
    <option value="#">Page 1</option>
    <option value="#">Page 2</option>
    <option value="#">Page 3</option>

    <p><input type="button" onClick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Go"><input type="button" onClick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Go"></p>

    [/QUOTE]

    They should both sit on the same line if you add them in next to each other. You do not provide enough relevant code to see why they do not. Show the code where you have the buttons in the form. With the extra div css

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I changed the form slightly so theres no go button, as you can see when i add hyperlinks they go a line below for some reason.

    Code:
    <div id="extra">
      <form name="form" id="form">
        <div align="center">
          <select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,1)">
            <option value="#">select a page</option>
            <option value="#">page 1</option>
            <option value="#">page 2</option>
            <option value="#">page 3</option>
          </select>
          </div>
      </form>
      <a href="#">< BACK</a> <a href="#">NEXT ></a>
    </div>

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    NO I cant see it.

    Do you now have a new div (div align: center)

    You seem to have two divs, and a form.
    Please post the html for that and the css

  • #7
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks for pointing out the div allign, that was a mistake. anyway my new code goes. These are all the css/html assosiated with the it. im so confused..,

    Code:
    <div id="extra">
    <form name="form" id="form">
        <select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,1)">
          <option value="#">Select a Page</option>
          <option value="#">Page 1</option>
          <option value="#">Page 2</option>
          <option value="#">Page 3</option>
        </select>
    </form>
    </div>
    Code:
    div#extra{float:left;width:845px}
    Code:
    div#extra{background:#F0F0F0;text-align:center}

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello noobtouch,
    There are a lot of errors in the code you've given us. The validator can help you with those.

    Try placing your floated Back/Next buttons first in the markup, since floats come first. Floating things is how we put other things beside them. Have a look at a float tutorial here.

    Try this example, just copy/paste entire code into a new .html document and view it in your browser -
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="HAPedit 3.1">
    <style type="text/css">
    html, body {
    	margin: 0;
    	padding: 0;
    	font: 76% arial, sans-serif;
    	background: #f63;
    }
    #extra a {
    	display: block;
    	color: #981793;
    	padding: 10px
    }
    #container {
    	width: 1024px;
    	margin: 0 auto;
    	padding: 100px 0 400px; /*for demo*/
    	border-top-style:none;
    	border-bottom-style:none;
    	border-right: 1px solid #b0b0b0;
    	border-left: 1px solid #dedfde;
    }
    #extra {
    	float: left;
    	width: 845px;
    overflow: auto;
    	background: #f0f0f0;
    }
    	#extra a {
    		display: block;
    		color: #981793;
    		padding: 0 10px;
    	line-height: 20px;
    	}
    		#back {float: left;}
    		#next {float: right;}
    		#form {
    			width: 200px;
    			margin: 0 auto;
    			background: #ccc; /*for demo*/
    		}
    
    </style>
    </head>
    <body>
        <div id="container">
        <div id="extra">
          <a href="#" id="back">< BACK</a> <a href="#" id="next">NEXT ></a>
          <form name="form" id="form">
            <div align="center">
              <select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,1)">
                <option value="#">select a page</option>
                <option value="#">page 1</option>
                <option value="#">page 2</option>
                <option value="#">page 3</option>
              </select>
              </div>
          </form>
        </div>
        <!--end container--></div>
    </body>
    </html>
    Based on this 3-column example.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Hope your code works excav I was getting confused.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by quartzy View Post
    Hope your code works excav I was getting confused.
    copy/paste entire code into a new .html document and view it in your browser to see.
    That link at the bottom of my post is a simplified version, that might shed more light on it for you.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I see, he wanted the drop down list in the middle.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by quartzy View Post
    I see, he wanted the drop down list in the middle.
    I hope so

    If not, then I misunderstood the question.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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