Hi, I have created an image in Photoshop of a sidebar I want to use on my new website, you can see the image below:



Ok, I have started coding it with notepad ++ (saving up to buy dreamweaver) and I have got this far:



But as you can see I can't get the two buttons at the bottom to be next to each other like on the image, so does anyone know how I would do this?

This is the css I am using:

#navigationbuttons ul
{
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid #fffff;
}

#navigationbuttons ul li
{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #fff;
    list-style: none;
          background-color: #fff;
}

#navigationbuttons ul li a
{
    display: block;
    margin:    29px 0 0 0;
    padding: 0 0 0 48px;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    line-height: 31px;
    background-position: center left;
    background-repeat: no-repeat;
}

#navigationbuttons ul li a:link,
#navigationbuttons ul li a:visited
{
    color:                        #000;
}

#navigationbuttons ul li a:active,
#navigationbuttons ul li a:hover
{
    color: #FFF;
    background-position: center left;
    background-repeat: no-repeat;
}

#navigationbuttons ul li a#signup { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/signup.jpg"); }
#navigationbuttons ul li a#signup:hover { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/signuph.jpg"); }
#navigationbuttons ul li a#moreinfo{ background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/moreinfo.jpg"); }
#navigationbuttons ul li a#moreinfo:hover { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/moreinfoh.jpg"); }

and the html:

                                  <div id="navigationbuttons">

                    <ul>
                        <li><a id="signup" href="/">&nbsp;</a><a id="moreinfo" href="/">&nbsp;</a></li>
                    </ul>

                </div>

Also when you hover the buttons, they change to a different button

So does anyone know how I can make the buttons be next to each other like on the image I created in Photoshop

Thanks alot

OK, firstly I wouldn't use nbsp's to seperate content, stick to CSS (perhaps margins)

Secondly, I would put each link in a seperate <li> tag then apply 'display:inline' to the li's in your CSS

hope that helps (/works lol)

Hi Matrix, I did what you said and now the buttons have disappeared completly?

Here is the html code:

                                  <div id="navigationbuttons">

                    <ul>
                        <li><a id="signup" href="/"></a></li>
                        <li><a id="moreinfo" href="/"></a></li>
                    </ul>

                </div>

And the css code:

#navigationbuttons ul li
{
    margin: 10px;
    padding: 0;
    border-bottom: 1px solid #fff;
    list-style: none;
    background-color: #fff;
    display: inline;
}

you might just need some anchor text to make the links show up

Using a list for two buttons is a little overkill though.


CSS

#navigationbuttons {
	width:250px;
	height:35px;
}
#navigationbuttons a {
    display: block;
	float:left;
	width:40%;
	height:100%;
	color:white;
	text-align:center;
	background-color:black;
	line-height:2em;
	font-size:1em;
}
#moreinfo {
	clear:right;
	margin:0 10px;
}

<div id="navigationbuttons">
	<a id="signup" href="/">Sign Up</a>
    <a id="moreinfo" href="/">More Info</a>
</div>			

Hi Chris, I followed your instructions and this is what it came out like:

need a URL not a screenshot.

http://www.candsdesign.co.uk/demo/temp1.asp

I'm sorry, I'm at work and I am only allowed to do it on my desktop, but yours may work, but its not what I am after.

I have the two images which I wanted and when you hover over them, the image changes, but I just need them to be on the same row

Can anyone help please?

Not a problem, it's the same principle, just a bit of a change in the CSS

just attach the images to a post and we have something to work with.

Ok thanks for this. I have uploaded the image as an attachment to this post and this image is what I want my sidebar to look like.

It won't let me attach a firefox extension, so this is the code I am using:

<!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=iso-8859-1" />
<title>MoneyExtra.com</title>

<META name="DESCRIPTION" CONTENT=""/>
<META name="KEYWORDS" CONTENT="" />

<style type="text/css">
<!--
body {
    padding-top: 3px;
    padding-left: 8px;
    margin-top: 0;
    width: 365px;
    height: 638px;
          font-size: 11px;
          font-family: Verdana, Arial, Helvetica, sans-serif;
}
    
.header {
    padding-top: 0;
    margin-top: 0;
    width: 365px;
}

.main {
    padding-top: 0;
    margin-top: 0;
    width: 365px;
}

.main p {
padding: 0px 8px;
margin: 0;
line-height: 130%; 
}

#google {
float: right; 
}

#navigationmain ul
{
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid #fff;
}

#navigationmain ul li
{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #A0AFB6;
    list-style: none;
           background-color: #A0AFB6;
}

#navigationmain ul li a
{
    display: block;
    margin: 2px 0 0 0;
    padding: 0 0 0 48px;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    line-height: 31px;
    background-position: center left;
    background-repeat: no-repeat;
}

#navigationmain ul li a:link,
#navigationmain ul li a:visited
{
    color: #000;
}

#navigationmain ul li a:active,
#navigationmain ul li a:hover
{
    color: #FFF;
    background-position: center left;
    background-repeat: no-repeat;
}

#navigationmain ul li a#youronlineifa { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/icon.jpg"); }
#navigationmain ul li a#youronlineifa:hover  { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/iconh.jpg"); }
#navigationmain ul li a#track { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/icon.jpg"); }
#navigationmain ul li a#track:hover  { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/iconh.jpg"); }
#navigationmain ul li a#consolidate{ background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/icon.jpg"); }
#navigationmain ul li a#consolidate:hover { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/iconh.jpg"); }
#navigationmain ul li a#savings { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/icon.jpg"); }
#navigationmain ul li a#savings:hover { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/iconh.jpg"); }

#navigationbuttons ul
{
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid #fff;
}

#navigationbuttons ul li
{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #fff;
    list-style: none;
           background-color: #fff;
           display: inline;
}

#navigationbuttons ul li a
{
    display: block;
    margin: 29px 0 0 0;
    padding: 0 0 0 48px;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    line-height: 31px;
    background-position: center left;
    background-repeat: no-repeat;
}

#navigationbuttons ul li a:link,
#navigationbuttons ul li a:visited
{
    color: #000;
}

#navigationbuttons ul li a:active,
#navigationbuttons ul li a:hover
{
    color: #FFF;
    background-position: center left;
    background-repeat: no-repeat;
}

#navigationbuttons ul li a#signup { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/signup.jpg"); }
#navigationbuttons ul li a#signup:hover { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/signuph.jpg"); }
#navigationbuttons ul li a#moreinfo{ background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/moreinfo.jpg"); }
#navigationbuttons ul li a#moreinfo:hover { background-image: url("file:///C:/Documents%20and%20Settings/2010199/Desktop/moreinfoh.jpg"); }
    
-->
</style>
</head>
<body>

<div class="header">
<img src="file:///C:/Documents%20and%20Settings/2010199/Desktop/header.jpg" /><br />
</div>

<div class="main">
<img src="file:///C:/Documents%20and%20Settings/2010199/Desktop/google.jpg" id="google" /><br />
<p>If you sign up to My Moneyextra.com<br />not only would you be able to keep up<br />to date with insurance news but you<br />would also be able to take advantage<br />of the following:</p><br /><br />
</div>

                  <div id="navigationmain">

                    <ul>
                        <li><a id="youronlineifa" href="/">Your online IFA</a></li>
                        <li><a id="track" href="/">Track your stocks and shares.</a></li>
                        <li><a id="consolidate" href="/">Consolidate debt</a></li>
                        <li><a id="savings" href="/">Savings Advice</a></li>

                    </ul>

                </div>
                
                                  <div id="navigationbuttons">

                    <ul>
                        <li><a id="signup" href="/">&nbsp;</a><a id="moreinfo" href="/">&nbsp;</a></li>
                    </ul>

                </div>

</body>

</html>

If you save that and open it with your browser, you can see what the outcome is and I also uploaded the other images.

Thanks

More image attachmets and the "google.jpg" was too big for an attachment, so I uploaded it onto imageshack: http://img73.imageshack.us/img73/6383/googleki3.jpg

Thanks again

In fact, forget them posts (sorry) I added a page quickly on my personal site: http://www.danielmousdell.com/moneyextra.html

If you save that and open it with your browser, you can see what the outcome is and I also uploaded the other images.

Nope that wont work.
Be aware that your HTML code and CSS code references the images as files in your "My Documents" folder so will not work when uploaded.

ALSO you are using an XHTML doctype so this ->
<META name="DESCRIPTION" CONTENT=""/>

should be in lower case.

Not sure why you need to use images as buttons when the same thing can be recreated with CSS (saves a bit of bandwidth as well)

anyhoo I'll be back.

Please read the post above mate, if you can

I'm sorry

hang on, have you tried using float:left?

Yep, no luck

put them in SEPERATE <li> tags, and then display them inline. I think that should work

Nope, that just removes them or makes them invisible

floats are actually the way to do this. Only a very simple change was needed

http://www.candsdesign.co.uk/demo/danaldinho/

Change this code #navigationbuttons ul li a to

#navigationbuttons ul li a
{
	display: block;
	margin: 29px 3px 0 0;
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	line-height: 31px;
	background-position: center left;
	background-repeat: no-repeat;
	float:left;
	width:120px;
	height:31px;
}

You do need to adjust your overall widths for IE though.

Nope, that just removes them or makes them invisible

This is because when you float an element you have to give it a width (and height if it just holds a background image or colour)

argh thanks chris, so thats why, but there is a problem

when you go to: http://www.danielmousdell.com/moneyextra.html

its still the same and I changed the css code

i'm using firefox too atm, i will edit for IE as soon as I'm happy with it in ff

Thanks again