kosstr12
06-27-2007, 05:56 PM
Hey, I've had this site for a few weeks, and jsut started to work on it, and I'm Using Absolute positioning. I want to get a pretty simple solution if possible.
Problems:
-I cant get my content centered on the page
-On IE when you hover over the links it covers up the other ones
Here is my CSS:
body
{
background-color:steelblue;
}
p.shadow1
{
color:black;
font-size:6pc;
font-weight:bold;
position:absolute;
top:0px;
left:370px;
font-family:"informal roman", "Times New Roman";
}
p.text1
{
color:black;
font-size:6pc;
font-weight:bold;
position:absolute;
color:gray;
top:-2px;
left:368px;
font-family:"informal roman", "Times New Roman";
}
p.shadow2
{
color:black;
font-size:3pc;
font-weight:bold;
position:absolute;
top:140px;
left:270px;
font-family:"informal roman", "Times New Roman";
}
p.text2
{
color:black;
font-size:3pc;
font-weight:bold;
position:absolute;
color:gray;
top:138px;
left:268px;
font-family:"informal roman", "Times New Roman";
}
a.home
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:275px
}
a.home:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
a.contact
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:365px
}
a.contact:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
a.service
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:490px
}
a.service:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
a.webdesign
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:615px
}
a.webdesign:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
a.help
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:740px
}
a.help:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
a.othersites
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:820px
}
a.othersites:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
p.maintext
{
color:black;
font-size:1pc;
position:absolute;
color:black;
top:300px;
left:370px;
font-family:"informal roman", "Times New Roman";
}
p.services
{
color:black;
font-size:1pc;
position:absolute;
color:black;
top:375px;
left:370px;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
Problems:
-I cant get my content centered on the page
-On IE when you hover over the links it covers up the other ones
Here is my CSS:
body
{
background-color:steelblue;
}
p.shadow1
{
color:black;
font-size:6pc;
font-weight:bold;
position:absolute;
top:0px;
left:370px;
font-family:"informal roman", "Times New Roman";
}
p.text1
{
color:black;
font-size:6pc;
font-weight:bold;
position:absolute;
color:gray;
top:-2px;
left:368px;
font-family:"informal roman", "Times New Roman";
}
p.shadow2
{
color:black;
font-size:3pc;
font-weight:bold;
position:absolute;
top:140px;
left:270px;
font-family:"informal roman", "Times New Roman";
}
p.text2
{
color:black;
font-size:3pc;
font-weight:bold;
position:absolute;
color:gray;
top:138px;
left:268px;
font-family:"informal roman", "Times New Roman";
}
a.home
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:275px
}
a.home:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
a.contact
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:365px
}
a.contact:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
a.service
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:490px
}
a.service:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
a.webdesign
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:615px
}
a.webdesign:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
a.help
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:740px
}
a.help:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
a.othersites
{
color:black;
text-decoration:none;
font-size:130%;
font-family:"informal roman", "Times New Roman";
position:absolute;
top:250px;
left:820px
}
a.othersites:hover
{
color:black;
text-decoration:none;
font-size:150%;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}
p.maintext
{
color:black;
font-size:1pc;
position:absolute;
color:black;
top:300px;
left:370px;
font-family:"informal roman", "Times New Roman";
}
p.services
{
color:black;
font-size:1pc;
position:absolute;
color:black;
top:375px;
left:370px;
font-family:"informal roman", "Times New Roman";
font-weight:bold
}