8 replies [Last post]
horix
Offline
Regular
Last seen: 15 years 39 weeks ago
Joined: 2004-03-11
Posts: 14
Points: 0

i have been using tables for years to do all my design... and finally just got fed up with nesting to such ridiculous degrees trying to get what i want... i designed my blog with tables and spent some time trying to convert it over to CSS and div tags...

what i want is the brown 16px border going down the side next to the scrollbar.. follow the links to see what i mean

the tables version:
http://www.wornpath.net/galexkeene/index.html
note: this is actually broken since ive messed with the css file, but you can see the start of the border

the css version:
http://www.wornpath.net/galexkeene/index2.html

the css file:
http://www.wornpath.net/galexkeene/galexkeene.css

ive tried moving things around and putting div tags in all sorts of ways and just cant get it right... what am i doing wrong!

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

16px border down the right side of the site

There are various ways to do this. A very quick way would be to use an absolutely position element. Here's an example:

http://pub.c-o2.net/right.htm

CSS is in the source code.

With this way, you'd have to make sure the text aligned to the right has ample margin space to clear the div (since I've used absolute positioning, the div will be taken out of the flow of the code, and not interact with the other elements (thus may cover the text)).

As mentioned, there are other more standard-based ways. But this may be the quickest (read easiest Wink )

The next sentence is true. The previous sentence is false. Discuss...

horix
Offline
Regular
Last seen: 15 years 39 weeks ago
Joined: 2004-03-11
Posts: 14
Points: 0

i tried that..

i tried doing that.. but then i run into the problem of height. how do i set the height so that it goes from the banner to the footer?

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

16px border down the right side of the site

You don't need to worry about that do you? It looks to me as if the border runs all the way down from top to bottom (of the window).

Therefore, since it's absolutely positioned, it'll run over the top banner and down the side.

Or is the bit over the banner slightly different?

The next sentence is true. The previous sentence is false. Discuss...

horix
Offline
Regular
Last seen: 15 years 39 weeks ago
Joined: 2004-03-11
Posts: 14
Points: 0

down the side

no over the banner is fine.. what i mean is, how do i get it to go all the way down the side? just set height to 100%?

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

16px border down the right side of the site

That's right... here's the CSS I used:

	div#right
		{
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 10px;
		background: #630;
		z-index: 100;
		}

The next sentence is true. The previous sentence is false. Discuss...

horix
Offline
Regular
Last seen: 15 years 39 weeks ago
Joined: 2004-03-11
Posts: 14
Points: 0

16px border down the right side of the site

ok, great thanks!

horix
Offline
Regular
Last seen: 15 years 39 weeks ago
Joined: 2004-03-11
Posts: 14
Points: 0

16px border down the right side of the site

PROBLEM!!

ok.. i did what you said.. which i realize now i had done before... and if you go to the page, you'll see that even with a height of 100% the sidebar wont go all the way down...

page: http://www.wornpath.net/galexkeene/index2.html

<div class="sidebar2">&nbsp;</div>

.sidebar2 {
	background-color: #3A3124;
	position: absolute;
	top: 85px;
	right: 0px;
	width: 16px;
	height: 100%;
}

[/code]

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

16px border down the right side of the site

Ah yes... I forgot about this little problem.

Since I got you into this mess, I thought I might as well have a crack at fixing it Wink :roll: .

Here's the link to an update (minus your images, but they won't figure in any of the problem):

http://pub.c-o2.net/right/index.htm

The problem, as you can see from the original, is that the height is 100% of the browser window. Obviously, the content goes beyond the viewport, and past 100%. The fix would be to somehow 'fix' the dark right-hand border to the content. So, this has been done. I've given the content div a border-right comparable to the border you need. Then fixed it to the right of the browser window (with right: 0; ). I've removed the 'left: 100px;' which makes it default to 0px of the parent div (which you classed as .mainbody I think, but I've removed this CSS rule, since you only put in a width of 100%, and by default, a div will be 100% width anyway).

Anyway, adding 100px left margin to the content div, puts the text in its' rightful place.

I've moved a few more things around (think the footer code may have been transposed further up). Oh, and the nav div needs to be absolute, otherwise in IE6, the content div stops at the beginning of the nav div.

I've checked in Safari and Firefox and it seems fine. IE6 is also fine on XP (as is Firefox).

The next sentence is true. The previous sentence is false. Discuss...