best method of making a css bar with text at one side and clickable image at other

**shock** · Jun 17, 2004 10:24

the bar (you know, a regular div that will stretch the width of the page) has a background image, the text will be at the left (with it's own styling) and at the right a clickable "Back to Top" image.

What's the best way to do this using as much css as possible (hehe)?

**redux** · Jun 17, 2004 12:57

Code:

<div id="thebar">
some text
<img ... />
</div>

#thebar { background: url(/images/bg.gif); }
#thebar img { float: right; }

**shock** · Jun 17, 2004 13:10

thanks! the float technique was just what i was looking for.

**shock** · Jun 17, 2004 13:40

actually, it's not working, hehe.

here's my code:

Code:

 
css:
 
#bluebar {
background-image: url(/images/myimage.gif); 
background-repeat: no-repeat;
font-family: Tahoma, Verdana, sans-serif;
color: #FFFFFF;
font-weight: bold;
font-size: 11px;
padding: 5px;
}
 
#bluebar img {
float: right;
}
 
xhtml:
 
<div id="bluebar">
my text
<a href="#top"><img src="images/myimage.gif" alt="" border="0" /></a>
</div>

...and the image appears below the bluebar, aligned right, whereas i want it inside the bluebar at the right.

also, the image is tiny and the text is short.

what to do?

**Paul O'B** · Jun 17, 2004 14:14

Hi,

The floated element has to come first in the html before the text that wraps around it. Therefore move your text to after the image.

Which image is tiny?

If its the bg image then you either need to repeat the image if its just for a background or make an image the size you want to fit the element required.

You have no height in the bluebar div so the div will be as high as the text line-height. If your right hand image is bigger than the div height then increase the div height or use a clear statement after the float to encompass the image.

Code:

<div id="bluebar">
<a href="#top"><img src="images/myimage.gif" alt="" border="0" /></a>my text
<div style="clear:both" />
</div>

If you still can't work it out then a link would be helpful

Paul

**shock** · Jun 17, 2004 15:31

I did exactly what you said, however now it looks like the background image is on top of the floated image, so I cannot see the floated image however it is clickable in that area.

**Paul O'B** · Jun 17, 2004 15:37

Can you post the whole code you used.

It would seem impossible for a background image in the same div to be on top of a foreground image in the same div.

Unless its the position:relative bug where the background accidentally gets drawn over images and floats.

If the parent is positioned or has a position relative then the children especially floats wil also need to have position:relative defined.

Paul

**shock** · Jun 17, 2004 15:49

Code:

#bluebar {
background-image: url(somelongbgimage.gif); 
font-family: Tahoma, Verdana, sans-serif;
color: #FFFFFF;
font-weight: bold;
font-size: 11px;
padding: 5px;
}
#bluebar img {
float: right;
}

 
<div id="bluebar">
<a href="#top"><img src="tiny.gif" width="30" height="11" border="0"></a>SOME TEXT
</div>

**Paul O'B** · Jun 17, 2004 16:53

Hi,

The code above works perfectly. I just pasted it into my page and away it went. The only change I made was to repeat the background image.

Code:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#bluebar {
background-image:  url(leftcolbg.jpg); 
background-repeat: repeat;
font-family: Tahoma, Verdana, sans-serif;
color: #FFFFFF;
font-weight: bold;
font-size: 11px;
padding: 5px;
}
#bluebar img {
float: right;
}
</style>
</head>
<body>
<div id="bluebar"> <a href="#top"><img src="normal1.gif" width="30" height="11" border="0"></a>SOME 
  TEXT </div>
</body>
</html>

There must be something else in your page that is causing your problem. (I'd post a link to the code above to show it works but my hosts server seems to be down at the moment.)

Paul

User Tag List

Thread: best method of making a css bar with text at one side and clickable image at other

Thread Tools

Display

best method of making a css bar with text at one side and clickable image at other

Bookmarks

Bookmarks

Posting Permissions