Navigation buttons 1

[skiflyer]

I have a simple GIF, I'm trying to use as navigation buttons for my page. In the past I've gone the horrid route of making 2 images per button and doing a javascript rollover... now I'm learning CSS and trying to switch to this, but I'm having the following problems.

All my divs are taking up as much space as they choose, namely one line... I want to have as many in a row as will fit on the page. I suppose I can stuff them into table cells, but that seems silly to me since I know CSS lets me do positioning.

I can't size the image how I want, it's getting set to a certain size and I'm not allowed to modify it.

I'm basically trying this with no luck. I'll keep tinkering, but if anyone could help me out I'd appreciate it.

.button {
  width=100px;
  height=60px;
  background-image: url("../images/button_template.gif");
  text-align: center;
  background-repeat: no-repeat;
}

.button a:visited, .button a:link {
  color: #FFFFFF;
  text-decoration: none;
}

.button a:hover {
  color: red;
  text-decoration: none;
}

 

[dwarfthrower]

>> All my divs are taking up as much space as they choose, namely one line... I want to have as many in a row as will fit on the page.

Well... that would be a SPAN which is an inline element rather than a DIV which is a block element.

>> I can't size the image how I want, it's getting set to a certain size and I'm not allowed to modify it.

That's one of the constraints of using images with CSS.

I imagine your button template graphic to be something like a rectangle with two ends, that you want to scale horizontally to fit the width of the text overlaying it? - sing out if I'm on the wrong track - something like:
[tt]
___
{___}[/tt] which can be scaled to:
[tt]
_ _____________
{_} or {_____________}[/tt] depending on the text inside?

My only solution to this sort of problem would be to chop the image into three pieces (start, middle, end) and use three span tags for each button. Two static-width blank ones either side of the variable middle one:
[tt]
<span class=&quot;buttonstart&quot;></span><span class=&quot;buttonmid&quot;>Button Text Here</span><span class=&quot;buttonend&quot;></span>[/tt]

 

[skiflyer]

Ah no, it was just a straight up rectangle, one part... typo <blush>, notice I used equal signs up there instead of : on my image sizes, but was getting so frustrated with the other stuff I didn't notice. However, that difference between span/div is exactly what I needed. Thank you and a star for that.

-Rob

 

[skiflyer]

Ok, so I basically got this, but my image doesn't repeat well, so I'd like to make it stretch to cover all the text no matter what, is there a command I can enter for this? Right now here's what I have.

.button {
  background-image: url("blah.gif");
  background-repeat: no-repeat;
  font-size: 160%;
}

And I'm adding some border to give me separation between the buttons, but the image isn't going to the edge without a repeat, and that's what I'm asking about.

Thanks again,
Rob

 

[dwarfthrower]

Hi Rob.

Unfortunately not being able to resize images is one of the limitations of CSS. The only way around it is by judicious use of the repeats to give the appearance of scaling.

I knocked up a quick demo which illustrates more clearly the point I was getting at above:

http://www.geocities.com/dwarf_thrower_2002/testbutton.htm

 

[jwenting]

With some experimentation a LOT can be achieved using no graphics at all.
If all your button does is give a solidly coloured background with maybe a different coloured edge dispense with it and use CSS background colours and borders instead.

For example

<span style=&quot;border-top: thin solid gold; 
             border-left: thin solid gold; 
             background-color: Blue; 
             border-bottom: medium groove Silver; 
             border-right: medium groove Silver; 
             height: 15px; width: 40px; 
             color: White;&quot;>
    Hello World</span>

Using a simple Javascript you can change the style using mouseover and mouseout events.

 

[skiflyer]

Well, here's a curious point that was causing me lots of confusion... what you posted works in IE, but in Mozilla, the buttons don't take the width you supply, they just go as wide as necessary.

Lousy differences, I just want fixed sized buttons darnit. Well, given this is for an intranet and I'm the only person who doesn't use IE I guess I'll just go with what works for that... until MS breaks it in the next version.

-Rob

 

[EdwardMartinIII]

skiflyer, this might help a little:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD  X HTML 1.0 Transitional//EN&quot;
     &quot;DTD/ X html1-transitional.dtd&quot;>
<html>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;te X t/html; charset=utf-8&quot;></meta>
    <title>CSS buttons</title>
  </head>
  <body>
    <p>Here's a real button: <input type=&quot;button&quot; value=&quot;Hello World&quot;></input></p>
    <p>Here's a simulated button: <span style=&quot;border-top: 2px solid #f2f0ee;border-bottom: 2px solid #75736E;border-left: 2px solid #f2f0ee;border-right: 2px solid #75736E;background-color: #D4D0C8;color: black;&quot;>&amp;nbsp;&amp;nbsp;&amp;nbsp;Hello World&amp;nbsp;&amp;nbsp;&amp;nbsp;</span></p>
    <p></p>
  </body>
</html>

I used the ampersand non-breaking space to make my span bigger.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[skiflyer]

So for shorter words you use more &amp;nbsp's?

Makes sense... I found out width works for IE, which is 99.99% of my users, and for the rest the padding to make the image bigger has worked well, but that is definately a trick i will keep in mind for more mass marketed buttons.

-Rob

 

[EdwardMartinIII]

Well, yeah. I'm the first to admit it's a hack and not perfect. Ideally, you would simply define the width of the buttons in a style sheet, which is a no brainer (I do it at

http://www.petting-zoo.org/Calculator.html,

the code of which you're welcome to examine).

I guess I'm not entirely clear perfectly on what you're trying to do, so maybe this ain't no good.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[skiflyer]

I'm just not using the button type at all... I want to keep it very simple... have an image which I can change easily, and all my buttons go to that.

Here's what I've decided on... it actually looks good (to me) in both netscape and IE, though the fixed width issue only holds in IE... I would've preferred a min-width instead of a width, but that doesn't work...

.buttons a:visited, .buttons a:link {
	font-size: 120%;
	font-family: sans;
	color: #FFFFFF;
	padding: .2em .5em;
	text-decoration: none;
	background-image: url("button.png");
	width: 165px;
	font-weight: bold;
	text-align: center;
}

 

[clarkin]

and to have a mouseOver effect it's as easy as:

.buttons a:hover{
    font-size: 120%;
    font-family: sans;
    color: #FF0000;
    padding: .2em .5em;
    text-decoration: underline;
    background-image: url("button.png");
    width: 165px;
    font-weight: bold;
    text-align: center;
}

no JavaScript necessary

Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].