Home : Forums : ELATED.com Site Help : Question from tutorial

Question from tutorial

You are currently not logged in. You can view the forums, but cannot post messages.

13-Aug-09 14:07

Delete

Edit

toastyrat

No stars yet

Posts: 7

From: South Africa

Hi There

I am so grateful for this tut: http://www.elated.com/articles/css-rollover-buttons/ it really helped me so much.

Works perfectly with one image, but i want to place an image next to it and am really battling. The second image i try either goes underneath or over the image.

Any help would be great!
Thanks

14-Aug-09 09:57

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

Floats should do the trick:

<a style="float: left;" id="emailUs" href="#" title="Email Us"><span>Email Us</span></a>
<a style="float: left;" id="anotherButton" href="#" title="Another Button"><span>Another Button</span></a>
<div style="clear: both;"> </div>

Does that help?

Glad you liked the tut

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

14-Aug-09 16:54

Delete

Edit

toastyrat

No stars yet

Posts: 7

From: South Africa

Hey Matt

Thats great! Thanks so much. All working really well.

14-Aug-09 22:32

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

You're welcome - glad it worked

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

01-Dec-09 00:58

Delete

Edit

toastyrat

No stars yet

Posts: 7

From: South Africa

I've been using this method and it's working great, but i have just found one problem that only seems to occur in Firefox and older versions of IE... When you click on the image a purple box appears around the edge of the image.

Does any one know why and how to get rid of that?

01-Dec-09 13:52

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

Hi toastyrat,

Do you mean the "active link" outline? You can turn it off with "outline: none":

http://css-tricks.com/removing-the-dotted-outline/

Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

02-Dec-09 02:43

Delete

Edit

toastyrat

No stars yet

Posts: 7

From: South Africa

Matt you're a machine, that's very much!

02-Dec-09 16:18

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

No problem toastyrat.

Feel free to ask if you need any more help!

Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

04-Dec-09 05:30

Delete

Edit

toastyrat

No stars yet

Posts: 7

From: South Africa

Matt thanks again for the help... One more question:

The floats are working great, but i have a bit of a challenge now. I have four buttons i need to align, 2 are on either side of the page like this:


BUTTON1                                                                                                             BUTTON2

So the float left and right sorts that out. But then i have the other two buttons in the middle of button1 & 2 stacked on top of one another. But 3 and 4 together make the height of the first 2 buttons.


BUTTON1                                              But3                                                          BUTTON2
                                                             But4

I can't get these in a straight row.

I just realised that once this is posted it doesn't show the buttons examples as i have laid them out. If u press edit it'll show them...

Sorry i know this isn't very clear, it's very difficult to explain without showing u the images. If u don't understand i'll try explain it better.

Thanks!

[Edited by matt on 05-Dec-09 02:41]

05-Dec-09 02:53

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

Hi toastyrat,

If you put code tags around your text then you can line things up. (I've just added code tags to your post above.)

If I understand what you want to do then your best bet might be to place But3 and But4 inside a div with a fixed width, and use "text-align: center" on the div. Float this div left, and place it between BUTTON1 and BUTTON3, which should also be floated left. The widths of BUTTON1, your div, and BUTTON3 should add up to the width of the container.

eg if your container is 500px wide and each button is 100px wide then you might have:


<a style="float: left;" id="button1" href="#" title="button1"><span>button1</span></a>
<div style="float: left; width: 300px; text-align: center;">
  <a id="but3" href="#" title="but3"><span>but3</span></a>
  <a id="but4" href="#" title="but4"><span>but4</span></a>
</div>
<a style="float: left;" id="button2" href="#" title="button2"><span>button2</span></a>
<div style="clear: both;"> </div>

Not tested this but it should work!

Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

05-Dec-09 03:33

Delete

Edit

toastyrat

No stars yet

Posts: 7

From: South Africa

Matt, once again u are spot on... Thanks so much, everything works except that it is aligning but3 in the center but isn't aligning but4 in the center... But4 is sticking to the left. here is my code:


            <a style="float: left;" id="prev" href="#" title="Moisture Management"><span>Moisture Management</span></a>
         <div style="float: left; width: 670px; text-align: center;">
         <a id="home" href="index2.html" title="Moisture Management"><span>Moisture Management</span></a>
		 <a id="back" href="ladies.html" title="Moisture Management"><span>Moisture Management</span></a>
    	 </div>
         <a style="float: right;" id="next" href="#" title="Moisture Management"><span>Moisture Management</span></a>
         <div style="clear: both;"> </div>

05-Dec-09 03:41

Delete

Edit

toastyrat

No stars yet

Posts: 7

From: South Africa

ok, just found something in my css. But3 had:


margin-left: auto;
margin-right:auto;

Which was lining it up to the center.

Whereas But4 didn't. I applied the same css to But4 and it's in the center now.

Is this the right way Matt?

06-Dec-09 23:54

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

Yes, that's correct. That code will centre a block-level element. (In fact you probably don't need the "text-align: center" at all, although it probably won't hurt to leave it in!)

Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

07-Jan-10 19:31

Delete

Edit

Ted

No stars yet

Posts: 1

I have used your css for the rollover button and it works great. I have it on an entry (welcome) page where the user clicks on the button to get to get to the next page (pretty normal). There are two lines of text centered in the page, one line above the graphic and one below. I want to get the graphic (button) also centered in the page but am not having any success.

Can you help? I think it is pretty basic but is also beyond me. ;-(

You can see the results so far at http://bcitra.bc.ca, thanks in advance for any help. This is the css that I am using to center the lines of text:

body{
text-align: center;
font-family: "comic sans MS", verdana, arial, sans-serif;
font-size: 1.8em;
background-image: url("images/granite.jpg");
color: #0000ff;
}

Cheers,
Ted

11-Jan-10 18:06

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

Hi Ted, and welcome!

Your page looks OK to me. The text and button are centred correctly.

Checked on Firefox 3.5 Mac, Safari 4 Mac, IE8 Win.

I guess you fixed it?

Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/