Okay, I've been looking into making a cool skin selector for my site, but I need to make the CSS files first to hold the styles for changing the skin. My site's logo changes color along with the tables in my site, but I've never used CSS for placing images before. This is the style I came up with:
.logostyle {
display: block;
width: 387px;
height: 113px;
margin: 0;
padding: 0;
background: url(<!-- m --><a class="postlink" href="http://www.fgcomics.com/images/logo_red.gif">http://www.fgcomics.com/images/logo_red.gif</a><!-- m -->) no-repeat; }
So then I used a dummy tag:
dummy {}
to apply the image style to an " ." It turns out like this:
<dummy class="logostyle"> </dummy>
The image displays all fine and everything, but also in that section of the page I have a spacer image that, well, spaces the logo from the border of my layout table. But for some reason this spacer image doesn't agree with my CSS image, and forces it down to the next line.
What it looks like (<!-- m --><a class="postlink" href="http://www.fgcomics.com">http://www.fgcomics.com</a><!-- m -->)
What it's supposed to look like (<!-- m --><a class="postlink" href="http://www.fgcomics.com/forums">http://www.fgcomics.com/forums</a><!-- m -->) (This part of my site hasn't had the CSS applied to its layout yet)
Code for table cell contents of this ordeal:
<th align="left" valign="middle" scope="row"><div align="left">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"forums/images/spacer.gif" width="10" height="125"><dummy class="logostyle"> </dummy>
</div></th>
Can anybody help me?There is no <dummy> tag in HTML. It will be ignored by the browser.
Why not just position the IMG itself by applying the style to it? If you really want it to be a background image, then use a DIV instead of the DUMMY tag.It would be kind of nice if you could define tags like that in HTML, but alas it's not supported well in XHTMLHmm. I figured you could do that in CSS... That's what I thought I did.
.logostyle {
display: block;
width: 387px;
height: 113px;
margin: 0;
padding: 0;
background: url(<!-- m --><a class="postlink" href="http://www.fgcomics.com/images/logo_red.gif">http://www.fgcomics.com/images/logo_red.gif</a><!-- m -->) no-repeat; }
So then I used a dummy tag:
dummy {}
to apply the image style to an " ." It turns out like this:
<dummy class="logostyle"> </dummy>
The image displays all fine and everything, but also in that section of the page I have a spacer image that, well, spaces the logo from the border of my layout table. But for some reason this spacer image doesn't agree with my CSS image, and forces it down to the next line.
What it looks like (<!-- m --><a class="postlink" href="http://www.fgcomics.com">http://www.fgcomics.com</a><!-- m -->)
What it's supposed to look like (<!-- m --><a class="postlink" href="http://www.fgcomics.com/forums">http://www.fgcomics.com/forums</a><!-- m -->) (This part of my site hasn't had the CSS applied to its layout yet)
Code for table cell contents of this ordeal:
<th align="left" valign="middle" scope="row"><div align="left">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"forums/images/spacer.gif" width="10" height="125"><dummy class="logostyle"> </dummy>
</div></th>
Can anybody help me?There is no <dummy> tag in HTML. It will be ignored by the browser.
Why not just position the IMG itself by applying the style to it? If you really want it to be a background image, then use a DIV instead of the DUMMY tag.It would be kind of nice if you could define tags like that in HTML, but alas it's not supported well in XHTMLHmm. I figured you could do that in CSS... That's what I thought I did.