CSS Help, Please

fifeclub posted this at 05:06 — 9th November 2004.

Joined: Feb 2001

I'm working on a rough concept here. It works fine and validates too. It's not perfect so if anybody has suggestions for my code in general just go ahead and advise me, but I've got a few specific questions about what I want to do.

I want to use a CSS switcher to change between several different style templates. This sould be a perfect example of the separation of content and layout. Here's the some of the relevant code from my style.css:

#top {
	background-color: #000;
	width: 100%;
	height: 55px;
	border-top: solid 3px #fff;
	border-left: solid 3px #fff;
	border-right: solid 3px #fff;
	padding: 10px;
}

#logo {
	position: absolute;
	top: 23px;
	left: 21px
}

#title_main {
	position: absolute;
	top: 20px;
	left: 93px;
	color: #fff;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	font-size: 56px;
	font-family: arial, helvetica, sans-serif;
}

#title_sub {
	position: absolute;
	top: 75px;
	left: 97px;
	color: #fff;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	font-size: 16px;
	font-family: arial, helvetica, sans-serif;
}

and here's the relevant code from my header file (which may as well be considered the index page itself):

<div id="logo"><img src="/~deltaxit/images/badge.jpg" width="66" height="75" alt="" /></div>

<div id="top">
	<span id="title_main">Delta Xi</span>
	<span id="title_sub">The Lost Brotherhood of Alpha Sigma Phi</span>
</div>

So here are the problems I've noticed with my coding. 1) The text contained in my title_main and title_sub are within the page and not the css. This is not actually that important but is there any way to make certain pieces of text (content) be determined within the CSS, so that changing the CSS style can change some of the text too? HTML and CSS only - no php or other languages. I don't know of any simple way but I thought I'd ask.

2) My bigger issue is that the image used is determined within the html document and not the CSS. I know I can use background-image within that containing div but for another style I will want to float a different logo image with a +1Z so that it extends beyond the boundries of the containing div. How can I designate a specific image to be used (with absolute placement) from within my style.css file, other than background-image?

Thanks.

fifeclub posted this at 22:43 — 12th November 2004.

He has: 688 posts

Joined: Feb 2001

I've advanced past the point where I wrote the original post but I still need help, please. Here's the deal in a nutshell. Can I add an image graphic to my page via CSS only and not as a background?

I need to do something exactly like the top of this very forum here. There's a logo on the left side and when the image ends, it aligns perfectly with the background image continuing on seemlessly. This example above was done in seperate table cells but it could have easily been done in one div by making the horizontal red and black lines as a repeating background, and then just place the logo on top of that aligned left. That's what I want to do basically but ALL is css, not in the page's html. Can this be done in CSS?

If not, how else can I accomplish this effect? The only other option I can see is making a very very long graphic and make that a background-image that doesn't repeat. But that would be a huge and unnecessary drain on the bandwidth and load times so it's not desirable. Plus, exactly how long would I need to make this super-long background-image in order to ensure that it never repeats?

Please help. Thanks.

Abhishek Reddy posted this at 10:27 — 13th November 2004.

He has: 3,348 posts

Joined: Jul 2001

fifeclub wrote: Can I add an image graphic to my page via CSS only and not as a background?

I need to do something exactly like the top of this very forum here. There's a logo on the left side and when the image ends, it aligns perfectly with the background image continuing on seemlessly. This example above was done in seperate table cells but it could have easily been done in one div by making the horizontal red and black lines as a repeating background, and then just place the logo on top of that aligned left. That's what I want to do basically but ALL is css, not in the page's html. Can this be done in CSS?

You can only insert images as background. But! If you want to overlay one atop the other using CSS only, use two transparent s layered/nested in that order. Then assign backgrounds accordingly. The image is still controlled by CSS, only its physical placement is represented by your .

Is that any help?

fifeclub posted this at 16:32 — 14th November 2004.

He has: 688 posts

Joined: Feb 2001

Awesome. Like the other post you helped me out with, I'll test that out when I get a chance. Thanks a ton for both CSS suggestions.

fifeclub posted this at 16:30 — 15th November 2004.

He has: 688 posts

Joined: Feb 2001

Worked like a charm. I got my left side logo overlaying the repeating background that forms the fat part of red stripe, and it lines up perfectly. Thanks.

(If it doesn't come up with the red and white theme just click "Classic" (the only theme I'm really working on right now))