Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Feb 2010
    Posts
    4
    Member #
    21200
    I can't get the css absolute positioning to work in my codding. I know it's the code, but I can't find what's wrong with it. I'm trying to avoid rewriting the whole site! Anyway, if someone could review the code, and tell me whats wrong, would be greatly appreciated.

    /* 'main.css' - Most commonly used CSS for site
    Author - Trevor Kelly
    Copyright - Perfect Image 2009 - 2010 */

    <style type="text/css">

    A:link
    { text-decoration: none; color: #f9fca7; }
    A:visited
    { text-decoration: none; }
    A:active
    { text-decoration: none; }
    A:hover
    { text-decoration: overline; color: #2acebe; }

    p
    {
    font-family: san serif, verdana, times new roman;
    color: #ffffff;
    size: 12pt;
    }

    h1
    {
    font-family: san serif;
    color: #f9fca7;
    text-align: center;
    }

    ul
    {
    font-family: san serif, verdana, times new roman;
    font-size: 8pt;
    text-align: left;
    color: #ffffff;
    background-color: transparent;
    padding: 0;
    margin-left: 33%;
    }

    body
    {
    background-color: #111111;
    background-attachment: fixed;
    font-family: san serif;
    color: black;
    font-weight: normal;
    font-size: 10pt;
    }

    {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    }

    /* HOME */

    #wrap
    {

    background-color: #000000;
    left: 15px;
    top: 0;
    height: 500px;
    width: 70%;
    }

    #header
    {
    position: absolute;
    background-color: transparent;
    border-bottom: solid 1px #ffffff
    text-align: center;
    top: 4%;
    color: #ffffff;
    width: 100%;
    }

    #navi
    {
    z-index: 1;
    position: absolute;
    background-color: #transparent;
    text-align: center;
    color: #ffffff;
    margin: 0;
    padding: 0;
    top: 36%;
    width: 100%;
    }

    #left
    {
    position: absolute;
    background-color: transparent;
    text-align: center;
    top: 40%;
    left: 9%;
    height: 200px;
    width: 80%;
    }

    #right
    {
    position:absolute;
    background-color: transparent;
    border-style: solid;
    border-color: #ffffff;
    border-width: 1px;
    top: 30%;
    left: 61%;
    height:200px;
    width: 35%;
    }

    #center
    {
    position:absolute;
    background-color: transparent;
    text-align: center;
    top: 25%;
    left: 0;
    width: 100%;
    }

    #footer
    {
    position: absolute;
    background-color: transparent;
    text-align: center;
    top: 93%;
    left: 0;
    width: 100%;
    }

    /* END HOME */

    /* DESIGN */

    #wrap2
    {
    position: absolute;
    background-color: #000022;
    border-left-style: solid;
    border-left-color: #ffffff;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-color: #ffffff;
    border-right-width: 1px;
    left: 15%;
    top: 0;
    height: 700px;
    width: 900px;
    }

    #navi2
    {
    z-index: 1;
    position: absolute;
    background-color: #transparent;
    text-align: center;
    color: #ffffff;
    margin: 0;
    padding: 0;
    top: 20%;
    width: 100%;
    }

    #centerText2
    {
    position: absolute;
    background-color: transparent;
    top: 25%;
    left: 20%;
    width: 60%;
    }

    /* END DESIGN */

    /* GALLERY */

    #wrap4
    {
    position: absolute;
    background-color: #000022;
    border-left-style: solid;
    border-left-color: #ffffff;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-color: #ffffff;
    border-right-width: 1px;
    left: 15%;
    top: 0;
    height: 900px;
    width: 900px;
    }

    #navi3
    {
    z-index: 1;
    position: absolute;
    background-color: #transparent;
    text-align: center;
    color: #ffffff;
    margin: 0;
    padding: 0;
    top: 16%;
    width: 100%;
    }

    #gallery
    {
    position:absolute;
    background-color: transparent;
    text-align: center;
    top: 20%;
    left: 30%;
    width: 40%;
    }

    #footer2
    {
    position: absolute;
    background-color: transparent;
    text-align: center;
    top: 97%;
    left: 0;
    width: 100%;
    }

    /* END GALLERY */

    /* LINKS */

    #wrap3
    {
    position: absolute;
    background-color: #000022;
    border-left-style: solid;
    border-left-color: #ffffff;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-color: #ffffff;
    border-right-width: 1px;
    left: 15%;
    top: 0;
    height: 600px;
    width: 900px;
    }

    /* END LINKS */

    /* CONTACT */

    #wrap
    {
    position: absolute;
    background-color: #000011;
    background-image: url(./images/bg.6.png);
    border-style: double;
    border-width: 3px;
    border-color: #ffffff;
    left: 15%;
    top: 20%;
    height: 400px;
    width: 900px;
    }

    /* END CONTACT */

    </style>

    /* Copyright (c) Perfect Image 2009 - 2010 */


    <!-- 'index.html' - main/home page of site(FF version)
    Author - Trevor Kelly
    Copyright - Percet Image 2009 - 2010 -->

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <body>
    <title>Perfect Image - Web Design and Maintenance</title>
    <link rel="icon" type="image/png" href="./images/favicon.ico">
    <link href="./main.css" rel="stylesheet" type="text/css">



    </head>
    <div id="wrap">
    <div id="header">
    <img src="./images/logo.jpg"
    alt="Perfect Image - Web Design and Maintenance (Failed to Load)"
    style="height:100%;width:100%;" />
    </div>
    <div id="navi">
    <a style="color:#ffffff;" href="./index.html">Home</a>
    <a style="color:#ffffff;" href="./design.html">Design</a>
    <a style="color:#ffffff;" href="./links.html">Links</a>
    <a style="color:#ffffff;" href="./contact.html">Contact</a>
    </div>
    <div id="left">
    <h1>Welcome to Perfect Image!</h1>
    <p>Thank you for choosing Perfect Image. We appreciate your visit, and would like to help you aquire your desired design needs. We are positive you'll find what your looking for here. The navigation bar above contains the appropriate selections, from design to cool links. If you would like to look at our portfolio, it is located on the design page. Once again, thank you for your visit, and we hope to hear from you soon!</p>
    </div>
    <div id="footer">
    <p style="font-size:7pt;">Copyright &copy; Perfect Image 2009 - 2010, All Rights Reserved</p>
    </div>
    </div>
    </body>
    </html>


    <!-- Copyright (c) Percfect Image 2009 - 2010 -->


    Thanks in advance!
    -kaspir

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Give us the link to your REAL website ...
    It's much easier when we can view it on different browsers.


  4. #3
    Junior Member
    Join Date
    Feb 2010
    Posts
    4
    Member #
    21200
    Quote Originally Posted by mlseim
    Give us the link to your REAL website ...
    It's much easier when we can view it on different browsers.
    http://www.perfect-image.us

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I looked using IE8 and FF ... I don't see anything wrong.


  6. #5
    Junior Member
    Join Date
    Feb 2010
    Posts
    4
    Member #
    21200
    I cant change the positioning. In the css page, if i edit anything to do with positioning, it doesnt work.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Give me an example of what you want to change.

    I'm never a fan of absolute positioning, because it causes browser compatibility issues,
    but maybe if I knew what you're trying to move ...


  8. #7
    Junior Member
    Join Date
    Feb 2010
    Posts
    4
    Member #
    21200
    Im redesigning the whole thing, but to start, I want to reposition and resize the wrap, which contains all of the content. I think I just found out what was wrong with it. There are two wraps haha. The other one was supposed to be wrap4 or something like that. But what would you use as an alternative to absolute positioning?

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    No positioning.

    or, I should add ... with various <div>'s floated and padded.
    I suppose it depends on how the sections grow or shrink depending on content,
    and what the final design is supposed to look like.

    Use whatever method works for you.

    Keep in mind that clients want sites that are dynamic, so the content is ever-changing.
    Forcing a size of a <div> and positioning it won't work if the content changes.

    Each one of these posts on this forum is a good example of varying content.
    What would happen if each section was forced to be a "fixed size" and "absolute position"?



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:21 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com