The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.
CSS Difficulty and Other Anomalies
Balthy13
Registered User regular
Registered User regular
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">
<area shape="rect" coords="144, 29, 235, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="256, 29, 309, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="331, 29, 384, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="398, 18, 619, 56"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="631, 29, 690, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="700, 29, 790, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="800, 29, 887, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="900, 29, 1012, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
</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.
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">
<area shape="rect" coords="144, 29, 235, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="256, 29, 309, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="331, 29, 384, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="398, 18, 619, 56"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="631, 29, 690, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="700, 29, 790, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="800, 29, 887, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
<area shape="rect" coords="900, 29, 1012, 41"
href="http://www.thebluestub.com/NewLayout/test.html">
</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.
Balthy13 on
0
Posts
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