PDA

View Full Version : % width bar with ends



kwhubby
Aug 9th, 2004, 09:43 AM
Hi, I am trying to do something seemingly simple, yet really confusing to me. I am trying to make a bar that has a width at 80% and that has a end image at both ends. I have been trying this but I can't seem to figure how I can do this. Here is the code I am using:
<div style="text-align: center; ALIGN=TEXTMIDDLE"><img src="lhead.gif"><div style="background-image: url(head.gif); background-repeat: repeat-x; background-position: top left; height: 95px; width: 80%">...</div><img src="rhead.gif"></div>
If only I could get the div not to line break, then it would work. Any help would be very appreciated.

Mr J
Aug 9th, 2004, 04:08 PM
Is this any good


<div style="width:700px;height:50px;border:2px solid #FF0000;background-color:#aaaaaa">

<span style="float: left"><img src="image1.gif" width="50" height="50"></span>
<span style="float: right"><img src="image2.gif" width="50" height="50"></span>

</div>

tsguitar2004
Aug 9th, 2004, 05:50 PM
Mr J's answer works on IE6 and NS7/pc. Just change the width to 80% in that <div> he suggested.

kwhubby, your trouble was that <div> is a block element, which is like a paragraph break. <span> is an inline element, which means that it all displays on the same line (as long as the width can handle it). So, if you don't want the div to line break, just use span!
-ts

Mr J
Aug 9th, 2004, 06:40 PM
Also works in Mozilla and Firefox

kwhubby
Aug 10th, 2004, 12:04 AM
Thanks, I knew that div wasn't inline and so I was messing with span stuff but I couldn't get the span to have a background image. I was hoping that the images could be on the left and right of the end of the div (without that bg color under them), because the images are end shapes and have transparent background and I was hoping for that to be whatever the background of the page was (not the div). I will either make the background of the end images white (which would not get the exact same effect) OR if somebody could figure a way to make the background color/ image of that div not be existant under those floats (have some kind of background margin).
Maby if the div bg is taken off and another span could be cenetered between those floats with a background picture. Thanks again

Mr J
Aug 10th, 2004, 03:23 PM
:confused:

Just take out ;background-color:#aaaaaa that will give you a clear div background

kwhubby
Aug 11th, 2004, 05:39 AM
Im sorry to have everybody confused, but here is exactly what I want but I would like not to use a table to do this:
http://kwhubby.com/cyc/test.htm
notice the table is 80% and the left and right colums are set in width

bradyj
Aug 11th, 2004, 06:18 AM
An overly complex way would be:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#content {
width: 80%;
height: 90px;
display: block;
background-color: transparent;
margin: 0px auto;
padding: 0px;
}
#left {
background: transparent url(http://kwhubby.com/cyc/lhead.gif) no-repeat scroll left top;
width: 57px;
height: 95px;
float: left;
display: block;
margin: 0px;
padding: 0px;
}
#middle {
background: transparent url(http://kwhubby.com/cyc/head.gif) repeat-x scroll left top;
width: 85%;
height: 95px;
display: block;
margin: 0px auto;
padding: 0px;
}
#right {
background: transparent url(http://kwhubby.com/cyc/rhead.gif) no-repeat scroll left top;
width: 50px;
height: 95px;
float: right;
display: block;
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
color: white;
font: normal 50px/100px helvetica,arial,verdana,sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="middle">
<p>blah blah</p>
</div>
</div>
</body>
</html>


I'm working on a simpler method, but the problem really isn't addressed to well in CSS 2 -- in CSS 3 (which won't be supported for a LONG time), you can have multiple border images as a background image (like applying a left and right image and then a top image)... but, until then, there's not an easy way I know of... I'll be done with the second one in a minute. This one, as you'll notice, will go to crud when you stretch it in too much. Works in Safari and Mac Opera/Mozilla.

bradyj
Aug 11th, 2004, 06:26 AM
Ok, a smarter way would be to do it like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#content {
width: 80%;
height: 90px;
display: block;
background-color: transparent;
margin: 0px auto;
padding: 0px;
}
#middle {
background: transparent url(http://kwhubby.com/cyc/lhead.gif) no-repeat scroll left top;
width: 100%;
height: 95px;
display: block;
margin: 0px;
padding: 0px;
}
#right {
background: transparent url(http://kwhubby.com/cyc/rhead.gif) no-repeat scroll left top;
width: 50px;
height: 95px;
float: right;
display: block;
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
color: black;
font: normal 50px/100px helvetica,arial,verdana,sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<div id="right"></div>
<div id="middle">
<p>blah blah</p>
</div>
</div>
</body>
</html>



Where the left image is the main background and the right image is floated inside the element. You'll notice I've omitted the middle background -- because the current way won't work. If you make those gifs you have (the left and the right) flattened with a white background, then you could just make the middle background black instead of transparent, and that would do it for you. This way you have the float right element as a background (not a picture that is semantically worthless... less so than the div) have the left as a background image already.

This is not as easy as a table, granted -- since it wasn't addressed, atleast I feel, fully with CSS (the reason why the next version will) -- but it's a little cleaner in HTML code. Albeit not much :o

kwhubby
Aug 11th, 2004, 07:39 AM
Wow thank you :D , nice fast reply. In this case since im not aiming to make a beutiful xhtml 1.1 page, and becuase the background of my page will likely not be simple white, I think I may just use the table.

bradyj
Aug 12th, 2004, 06:34 AM
Wow thank you :D , nice fast reply. In this case since im not aiming to make a beutiful xhtml 1.1 page, and becuase the background of my page will likely not be simple white, I think I may just use the table.

It might be a safe bet on this one -- it's usually the reason why when we do this technique we have a fixed pixel width -- keep in mind, though, if you use this on a colored background other than white -- you're going to see a halo around your gif -- you'll have to adjust your file in photoshop to be just black and transparent (rather than the black/white/transparent you currently have). This is a common gif problem, you probably had anti-aliasing (blur) on that guy somehow -- I would recommend a PNG to see alpha transparency (png will allow transparency from 0 to 100% and anything in between).

However, since IE doesn't support that transparency natively, go for some javascript help if you do:
http://www.skyzyx.com/scripts/sleight.php

that being said, you can still make your page valid and beautiful XHTML 1.1 and use tables:) We usually try to steer you away from it if we can, but I can see the overcomplication and headache these methods could cause. Use tables, but structure it and try to use CSS for most of what you can, and you'll be fine.

kwhubby
Aug 12th, 2004, 08:56 AM
Thanks for that info bradyj.
I didn't notice my gif wasnt clean black/transparent, I don't really want to use alpha layer png files with activx imagetransform filters for IE, so simple transparency is fine here for now (unless in the future I decide to make that fancier or if you have any ideas). I really don't think at this point this site will be beautiful XHTML 1.1 I am planning just for html 4. Thanks

bradyj
Aug 12th, 2004, 06:31 PM
...I am planning just for html 4. Thanks

that's cool too:) Just keep in mind that validating it will help you -- not just to make sure you're doing it right, but if you code your stuff validated, it'll show you some of the bugs, which would make your site look a bit better in all browsers:
http://validator.w3.org/

And you can do that with HTML 4:)