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 6 of 6
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Moving my buttons over ?

    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


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    New Coder
    Join Date
    Aug 2012
    Location
    New Zealand
    Posts
    52
    Thanks
    2
    Thanked 4 Times in 4 Posts
    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;

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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>
    Last edited by Excavator; 02-05-2013 at 07:47 PM.
    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

  • #4
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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 ....


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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>
    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
    •