As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

CSS Difficulty and Other Anomalies

Balthy13Balthy13 Registered User regular
edited February 2007 in Help / Advice Forum
I'm trying to build a different layout for my website http://www.thebluestub.com, since the current one is pure HTML and a bitch to edit. Some content may be NSFW, just as a precaution, so don't click around too much. Most of what you need to see is on the index, anyway.

Now, this isn't readily noticable, but there are supposed to be two Newspost-esque things, but one is overlapping the other, as my handle on CSS is extremely low. I just can't seem to wrap my head around it, though I've been trying for a while, now.

What I have currently for the styles is:
body {background-color : #527FA5 ;
background-image: ;
background-repeat : no ;
background-position : top ;
margin : 0px 0px 0px 0px; }

.newspost { position : relative ;
width : 800px ; }

.newspost font {color : #FFFFFF ;
position : absolute ;
left : 250px ; top : 53px ;
background : #0034A5 ; }

.newspost h2 { font-family : Verdana, sans-serif ;
letter-spacing : 5px ;
color : #7C89A5 ;
background : #333333 ;
text-transform : capitalize ;
position : absolute ;
left : 250px ;
border-width : 1 ;
border-color : #FFFFFF ;
border-style : solid ; }
And the HTML:
<html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="Layout.css">
</head>
<body bgcolor="#527FA5">
<div align="center">
<img src="header.gif" usemap="nav" border=0>
<map name="nav">
<area shape="rect" coords="7, 29, 126, 41"

href="http://www.thebluestub.com/NewLayout/test.html"&gt;
<area shape="rect" coords="144, 29, 235, 41"

href="http://www.thebluestub.com/NewLayout/test.html"&gt;
<area shape="rect" coords="256, 29, 309, 41"

href="http://www.thebluestub.com/NewLayout/test.html"&gt;
<area shape="rect" coords="331, 29, 384, 41"

href="http://www.thebluestub.com/NewLayout/test.html"&gt;
<area shape="rect" coords="398, 18, 619, 56"

href="http://www.thebluestub.com/NewLayout/test.html"&gt;
<area shape="rect" coords="631, 29, 690, 41"

href="http://www.thebluestub.com/NewLayout/test.html"&gt;
<area shape="rect" coords="700, 29, 790, 41"

href="http://www.thebluestub.com/NewLayout/test.html"&gt;
<area shape="rect" coords="800, 29, 887, 41"

href="http://www.thebluestub.com/NewLayout/test.html"&gt;
<area shape="rect" coords="900, 29, 1012, 41"

href="http://www.thebluestub.com/NewLayout/test.html"&gt;
</div>
<p>
<div class="newspost">
<h2>The Blue Stub is Win</h2>
<font>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

</font>
<p>
<h2>The Blue Stub is Lose</h2>
<font>halB halB halB halB halB halB halB halB halB halB halB halB halB halB halB halB halB

halB halB halB halB halB halB halB halB halB halB </font>
</body>
</html>
I'm sure something is mucking up there, maybe not enough selectors, or something. Since this is the first problem I've dealt with so far, and I can't seem to work around it, I figured I'd come somewhere with a large enough knowledge base.

How can I fix this and get one of those newsposts below the other? Maybe have some avatars or whatever beside them.

As another matter, I'd like to know if there's a way to make that image map in CSS so I don't have to worry about putting it on the top of every page and changing it repeatedly if a link is added, removed or changed.

Thanks in advance.

pasig.png
Tweeters: radixius | Blargh: Wordpress | Sounds: Embol | Castpods: Ragecast | Steam | XBL
Balthy13 on

Posts

  • SeguerSeguer of the Void Sydney, AustraliaRegistered User regular
    edited February 2007
    The problem is probably arising from your use of absolute positioning. Is that really required? You can achieve the same effect without it..

    Also, I believe the <font> tag is deprecated. Use <p>s.

    Also also, fix up your code a bit, you have a <div> without a closing tag (newspost), and two <p>s without closing tags

    Seguer on
Sign In or Register to comment.