trouble alligning/postioning two links

noobtouch

02-13-2011, 02:09 PM

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

http://img4.uploadhouse.com/fileuploads/7998/7998704-holder-3903d4afd74053a0580ad7f162def322.jpg (http://www.uploadhouse.com/viewfile.php?id=7998704&showlnk=0)

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'.

<!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 :thumbsup:

quartzy

02-13-2011, 03:14 PM

noobtouch

02-13-2011, 03:25 PM

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..,

quartzy

02-13-2011, 03:33 PM

<p>[/COLOR]<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>

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

noobtouch

02-13-2011, 03:51 PM

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.

<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>

quartzy

02-13-2011, 04:53 PM

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

noobtouch

02-13-2011, 05:15 PM

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..,

<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>

div#extra{float:left;width:845px}
div#extra{background:#F0F0F0;text-align:center}

Excavator

02-13-2011, 05:16 PM

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 (http://css.maxdesign.com.au/floatutorial/).

Try this example, just copy/paste entire code into a new .html document and view it in your browser - <!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>
</div>
</body>
</html>

Based on this 3-column example (http://nopeople.com/CSS%20tips/simple3column/index.html).

quartzy

02-13-2011, 05:51 PM

Hope your code works excav I was getting confused.

Excavator

02-13-2011, 05:57 PM

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.

quartzy

02-13-2011, 06:13 PM

I see, he wanted the drop down list in the middle.

Excavator

02-13-2011, 06:16 PM

I see, he wanted the drop down list in the middle.

I hope so :eek:

If not, then I misunderstood the question.