Moving my buttons over ?

jeddi · 02-05-2013, 11:48 AM

Hi,

I am trying to move my 2 buttons over so they
are next to my main banner.

Thing is, my banner is centered and I want it to stay that
way ... but I would to put the 2 buttons mid-way between the banner
right hand edge and the edge of the page - so the buttons look
centered up on the RHS.

Here is an image of what I mean:

This is my HTML:

Code:

<body>
<header>
	<section>
		<img class="head_image" title= alt= src="http://professional-world.com/images/head_GreatLobsterResturants.jpg" >
	</section>
	<h2>Great Lobster Resturants</h2><h3>The Best Lobster Eating Guideh3>
</header>	
	<div id="banner" onmouseover="zxcImageSlider.Pause('banner');" onmouseout="zxcImageSlider.Auto('banner');" >
	<div><img src="http://expert-world.org/banners/default3.jpg"></div>
	</div>	
	<div >
		<input type="button" name='' value="Next" onmouseup="zxcImageSlider.Next('banner',1);">
		<input type="button" name='' value="Back" onmouseup="zxcImageSlider.Next('banner',-1);">
	</div>

And the CCS:

Code:

* {
margin:0 0;
padding:0 0;
}

html{
	height:100%;
	font-family:helvetica;
	background:#FFFFFF;	
	} 		

header, footer {
	display:block;
	width:1060px;
	margin:0 auto;
	}

header {
	height:200px;
	background: blue;
	border-radius:0px 0px 12px 12px;
	-moz-border-radius:0px 0px 12px 12px;
	-webkit-border-radius:0px 0px 12px 12px;
	}

header section {
	display:block;
	width:1000px;
	height:100px;
	background:#FFFFFF;
	padding:20px;
	margin:0 0;
	margin-left:10px;
	border-radius:0px 0px 12px 12px;
	-moz-border-radius:0px 0px 12px 12px;
	-webkit-border-radius:0px 0px 12px 12px;
	}
	
#banner {
	display: block;
	width:800px;
	height:100px;
	position: relative;
    margin: 10px auto;
	border: 3px solid black;
	overflow: hidden;
}
	
img { 
	border: none; 
	}
	
.head_image	{ 
	display: inline;
	width:1040px;
	height:150px;
	position: relative;
    top: -55px;
    left: -20px;
	}

Can you see I should get the buttons positioned properly ?

Thanks

.

Jordann · 02-05-2013, 01:59 PM

try sticking a container around your banner of 980px or to your choice also stick the container around the inputs once done in your banner code add the float: left; element to it also do this for your inputs but using float: right;

Excavator · 02-05-2013, 06:39 PM

Hello jeddi,
If you give that containing element that holds your next/back buttons, you can position it with CSS. It might be best to put it in the header element, make header relative and us ap to position it then.

A few other problems there too, you have .head_image at 1040px wide that does not fit in 1000px wide section.
Your h3 tag is not closed properly.

Something like this -

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height: 100%;
	font-family: helvetica;
	background: #FFFFFF;
}
header, footer {
	width: 1060px;
	margin: 0 auto;
}
header {
	height: 200px;
	background: #00f;
	border-radius: 0px 0px 12px 12px;
	-moz-border-radius: 0px 0px 12px 12px;
	-webkit-border-radius: 0px 0px 12px 12px;
	position: relative;
}
header section {
	width: 1000px;
	height: 100px;
	background: #fff;
	padding: 20px;
	margin: 0 0;
	margin-left: 10px;
	border-radius: 0px 0px 12px 12px;
	-moz-border-radius: 0px 0px 12px 12px;
	-webkit-border-radius: 0px 0px 12px 12px;
}
.head_image {
	display: inline;
	width: 1040px;
	height: 150px;
	position: relative;
	top: -55px;
	left: -20px;
}
#buttons {
	position: absolute;
	top: 50px;
	left: 50px;
}
#banner {
	display: block;
	width: 800px;
	height: 100px;
	position: relative;
	margin: 10px auto;
	border: 3px solid black;
	overflow: hidden;
}
img { border: none; }
</style>
</head>
<body>
    <header>
        <section> <img class="head_image" title= alt= src="http://professional-world.com/images/head_GreatLobsterResturants.jpg" > </section>
            <h2>Great Lobster Resturants</h2>
            <h3>The Best Lobster Eating Guide</h3> 
        <div id="buttons">
            <input type="button" name='' value="Next" onmouseup="zxcImageSlider.Next('banner',1);">
            <input type="button" name='' value="Back" onmouseup="zxcImageSlider.Next('banner',-1);">
        </div>
    </header>
    <div id="banner" onmouseover="zxcImageSlider.Pause('banner');" onmouseout="zxcImageSlider.Auto('banner');" >
    	<div><img src="http://expert-world.org/banners/default3.jpg"></div>
    </div>
</body>
</html>

jeddi · 02-06-2013, 05:35 PM

OK

Thanks for the help.

I have used position:absolute; but I don't like it because it
only looks good if the page is full screen or close to it.

If you grab either side of the window and move it, then the
buttons disappear off the page.

I would rather use something that floats the buttons next to the
banner. Just can't find out what I need to do ....

.

Excavator · 02-06-2013, 06:10 PM

You need ap to place those buttons on top of head_GreatLobsterResturants.jpg unless you want to make that image a background of <header>

If your buttons are moving around when you resize your browser, you don't have the right element relative. Look in my example how I've set <header> to be position: relative;
That makes child ap elements take their position relative to <header> instead of the body of the document.

Excavator · 02-06-2013, 06:20 PM

Look at it as a background image -

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height: 100%;
	font-family: helvetica;
	background: #fff;
}
header, footer {
	width: 1060px;
	margin: 0 auto;
}
header {
	background: #00f url(http://professional-world.com/images/head_GreatLobsterResturants.jpg) no-repeat center top;
	overflow: auto;
	border-radius: 0px 0px 12px 12px;
	-moz-border-radius: 0px 0px 12px 12px;
	-webkit-border-radius: 0px 0px 12px 12px;
}
#buttons {
  margin: 50px 0 100px 50px;
  float: left;
}
h2, h3 {
	padding: 0 0 0 50px;
	clear: both;
}
</style>
</head>
<body>
    <header>
        <div id="buttons">
            <input type="button" name='' value="Next" onmouseup="zxcImageSlider.Next('banner',1);">
            <input type="button" name='' value="Back" onmouseup="zxcImageSlider.Next('banner',-1);">
        </div>
            <h2>Great Lobster Resturants</h2>
            <h3>The Best Lobster Eating Guide</h3> 
    </header>
</body>
</html>