| Author |
 Topic  |
|
miperez
Junior Member
Spain
243 Posts |
 Posted - 18 February 2004 : 06:52:36
|
Hi, chumbawumba.
Here is how I'd do it (I have tested it and it works, try it yourself)
<DIV class=pathBar>
<div class="left">
you are here: <a href="index.asp">home</a> » news
</div>
<div class="right">
[Members: 0 | Guests : 1 ] [Total : 1]
</div>
<br>
</div>
You need the <br> so that something is written in the main DIV and the bgcolour is applied, otherwise there is no item to aply it to. |
Best Regards
Mikel Perez
"Hell is the place where everything test perfectly, and nothing works"
|
 |
|
|
miperez
Junior Member
Spain
243 Posts |
Posted - 18 February 2004 : 06:56:06
|
You can also try this code for the whole page, that is even more compact than the previous one. The idea is: just left float and left align text in one div, and apply the text-align:right to the main div:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
div.pathbar {background-color: #FFF8DC; border-bottom: #000000 1px solid;text-transform: lowercase;
text-align: right;}
.left { float: left; text-align: left; width: 250px; margin: 0px;}
</style>
</head>
<body>
<DIV class=pathBar>
<div class="left">
you are here: <a href="index.asp">home</a> » news
</div>
[Members: 0 | Guests : 1 ] [Total : 1]
</div>
</body>
</html>
|
Best Regards
Mikel Perez
"Hell is the place where everything test perfectly, and nothing works"
|
|
|
|
chumbawumba
Junior Member
United Kingdom
304 Posts |
Posted - 18 February 2004 : 08:26:25
|
Hey Mikel, I thought you said you weren't an expert  . Your solutions are very interesting.
I tried all solutions in this thread, in every browser. Both of yours work in all browsers (ie6, mozilla 1.6, opera7). The one davemaxwell posted doesnt work in mozilla. (or was it opera?)
CSS is a bit of a pain in the as$ to get to look right in all browsers. I even exclude NN4 in my sweeping statement. Thats just a no-hoper as far as support for css goes. Tables are just so easy, they look and behave exactly the way you want them to.
I had already tried the code that you posted first, but without the <br>. I would never have thought of that.
well there we are then... problem solved.! 
|
|
|
|
chumbawumba
Junior Member
United Kingdom
304 Posts |
Posted - 18 February 2004 : 08:29:43
|
oh.....by the way.. if you include this in your snitz stylesheet, you can vastly improve the look of quotes within your forum:
blockquote#quote {
background-color: #F5F5F5; /* FORUM */
border: 1px dashed #708090;
color: #000000;
font-size: 8pt;
margin: 15px;
padding: 3px;
}
blockquote#quote blockquote#quote{
background-color: transparent; /* FORUM */
border: none;
color: #000000;
} |
|
|
|
miperez
Junior Member
Spain
243 Posts |
Posted - 18 February 2004 : 10:21:07
|
No, I'm no expert at all, I have just faced similar problems in the past weeks 
If you are interested in floating with CSS (and some other things), you can check the Floatutorial
BTW, I have applied your suggestion for the blockquote, just changing the background color so that it fits my forum's, and it really looks nicer.
Thank you! |
Best Regards
Mikel Perez
"Hell is the place where everything test perfectly, and nothing works"
|
|
|
|
davemaxwell
Access 2000 Support Moderator
USA
3020 Posts |
Posted - 18 February 2004 : 10:47:48
|
quote:
Originally posted by chumbawumba
The one davemaxwell posted doesnt work in mozilla. (or was it opera?)
You are correct. It didn't work in Mozilla. I didn't check all the browsers when I posted my first example. Sorry about that. Was in a hurry and didn't verify my quick & dirty code.
If you look in the later post with the more compact code, that will in fact work in all the major browsers (IE 6, Mozilla 1.2.1, Opera 6+, Firefox). I just checked them to see.
Just to make it easier, this code will work on all the browsers I listed above):
<!DOCTYPE doctype PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
.content { width: 100%; text-align: left; border: #00C 2px solid;}
.right { float: right; text-align: right; width: 150px; margin: 0px;}
</style>
<title>testing</title>
</head>
<body>
<div class="content">
<div class="right">this text is to the right</div>
this text is to the left<span style="clear: both;"> </span> </div>
</body>
</html>
quote:
Originally posted by chumbawumba
it seems the <span style="clear:both;"> </span> makes it look the way it needs to. Even though, in all honesty i dont know what that bit means.
Floats work outside the normal document flow. As such, the clear:both forces all the outside elements that were activated prior to that statement to return into the flow of the document. You could have used a <br style="clear:both" /> and gotten the same result, however that would have given you an extraneous blank line which I wanted to avoid. |
Dave Maxwell
Barbershop Harmony Freak |
Edited by - davemaxwell on 18 February 2004 10:48:57 |
|
|
|
chumbawumba
Junior Member
United Kingdom
304 Posts |
Posted - 18 February 2004 : 11:18:01
|
quote:
Originally posted by davemaxwell
Floats work outside the normal document flow. As such, the clear:both forces all the outside elements that were activated prior to that statement to return into the flow of the document. You could have used a <br style="clear:both" /> and gotten the same result, however that would have given you an extraneous blank line which I wanted to avoid.
Well place a lightbulb above my head - I am enlightened !
Thanks |
|
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
|
|
miperez
Junior Member
Spain
243 Posts |
Posted - 19 February 2004 : 04:18:09
|
| D3mon: great great link, that includes several also-great links. Thanks! |
Best Regards
Mikel Perez
"Hell is the place where everything test perfectly, and nothing works"
|
|
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
|
|
chumbawumba
Junior Member
United Kingdom
304 Posts |
Posted - 19 February 2004 : 11:12:19
|
Good for you ! Good for me ! Mmmm Good ! Real Good !
lol...I watched full metal jacket last night |
|
|
|
Topic |
|
Topic Locked
