Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts

    IE playing around with my positioning

    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:
    Code:
    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
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    CSS is useless without HTML. And why are you even using absolute positioning in the first place?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    HERE is my htmll:
    Code:
    <p class="shadow1">Ez Web Tek</p>
    <p class="text1">Ez Web Tek</p>
    <p class="shadow2">Everything on the web, Made easy</p>
    <p class="text2">Everything on the web, Made easy</p>
    <center>
    <a class="home" href="index.html">Home</a>
    <a class="contact" href="/contact">Contact Us</a>
    <a class="service" href="/services">Our Services</a>
    <a class="webdesign" href="/webdesign">Web Design</a>
    <a class="help" href="/help">Help</a>
    <a class="othersites" href="/othersites">Other Sites</a>
    <p class="maintext">
    Welcome to Ez Web Tek! Here, our goal is to please you. We<br>
    have many different services,and all of them can be very<br>
    useful to you.Some of our services are<b>:</b><br></p>
    <p class="services">•Free Web Hosting<br>
    •Cheap Web Design<br>
    •Free E-mail Services<br>
    •Other Great Services that will keep you wanting more</p>

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    I think you'll get better response if you upload your page to some host. We need to see the complete HTML.

  • #5
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    I suggest you trash that page and recode it, without using positioning. It's not necessary at all.

    Wrap everything on the page in a #wrapper and give it a margin: 0 auto; and a width. Perhaps some borders and perhaps a background color. You should really look into those things. Also, look into some semantics, use a list for that menu, <h1> and <h2> tags for the header, not <p> tags.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •