SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    just another newbie with lots of questions

    Hi,
    I have a web site from many years ago that I am trying to update. I thought this would be not so tricky but I have found out that my old designing which was pretty basic is completely outdated and the tags have been deprecated, so I am trying to redesign using correct XHTML and CSS. Well, needless to say I have been having quite a few problems. this page is meant to be the opening page for the site that is mostly text with some basic CSS formating.

    I am trying to use absolute positioning to set the series of images into a nice rectangle. I am having trouble with that but firstly--when I try and validate my page with w3c I get quite a few errors. I have attempted to discern the problem but am having no luck. I hope that fixing the errors in the XHTML transitional might help to illuminate my CSS positioning problems. I have not gotten so far as to upload this yet to my site. So many problems! so little time!

    <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head> <title>Kate Kraus E-Portfolio</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="K. Kraus" /> <meta name="Description" content="E-portfolio for K. Kraus" /> <style type="text/css">
    <!--
    #main_content, #edu, #cap, #den, #pro, #hib_w, #kok, #res, #hib_c, #title, #gos {
    position: absolute;
    }

    #main_content{
    width:652px;
    height:452
    }

    #edu {
    left:5px;
    top:0px;
    border:none;
    }

    #cap {
    left:5px;
    top:112px;
    border:none;
    }

    #den {
    left:154px;
    top:0px;
    border:none;
    }

    #pro {
    left:504px;
    top:0px;
    border:none;
    }


    #hib_w {
    left:504px;
    top:127px;
    border:none;
    }

    #kok {
    left:5px;
    top:261px;
    border:none;
    }


    #res {
    left:155px;
    top:262px;
    border:none;
    }

    #hib_c {
    left:155px;
    top:340px;
    border:none;

    #title {
    left:306px;
    top:264px;
    border:none;
    }

    #gos {
    left:507px;
    top:264px;
    border:none;
    }



    -->
    </style>
    <link href="print.css" rel="stylesheet" type="text/css" media="print" />
    <title>Kate Kraus E-Portfolio</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="Content-Type" content="text/html; charset=UTF-8" /> <meta name="Author" content="Kate Kraus" /> <meta name="Description" content="E-portfolio for Kate Kraus" />
    </head>

    <body>
    <div id="main_content">

    <div id="edu">
    <a href="https://www2.hawaii.edu/`kkraus/courses.html"><img src="edu.jpg" width="149" height="112" alt="link to the MLIS education page" /></a>
    </div>

    <div id="cap">
    <img src="capparis_sandwichiana.jpg" width="150" height="149" alt="Capparis sandwichiana flower" />
    </div>

    <div id="den">
    <img src="Dendrobium_pulchellum.jpg" width="350" height="262"
    alt="Dendrobium pulchellum flower" />
    </div>

    <div id="pro">
    <a href="https://www2.hawaii.edu/`kkraus/membership.html"><img src="pro.jpg" width="150" height="127" alt="link to professional activities page" /></a>
    </div>

    <div id="hib_w">
    <img src="hibiscus_waimeae_flower.jpg" width="150" height="133"
    alt="Hibiscus Waimeae flower" />
    </div>

    <div id="kok">
    <img src="Kokiadrynariod.jpg" width="150" height="189"
    alt="Kokiadrynaroid flower />
    </div>

    <div id="hib_c">
    <img src="hibiscus_clayi_sm.jpg" width="150" height="113"
    alt="Hibiscus Clayi flower" />
    </div>

    <div id="res">
    <a href="https://www2.hawaii.edu/`kkraus/resume.html">
    <img src="res.jpg" width="150" height="74" alt="link to the resume page" /></a>
    </div>

    <div id="title">
    <img src="title4.jpg" width="197" height="189"
    alt="icon that says Kate Kraus: E-Portfolio" />
    </div>

    <div id="gos">
    <img src="gos.jpg" width="150" height="189" alt="Gossypium tomentosum flower" />
    </div>

    </div>
    </body>
    </html>

  2. #2
    code ninja hamstu's Avatar
    Join Date
    Nov 2002
    Location
    Montréal, Canada
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoa there! I think you've gone a little crazy with absolute positioning.

    I can't see your HTML perfectly without the images, but I believe you can achieve the effect you're looking for with a combination of background-image's and floats.

    Could you perhaps put a copy online so I can see it better?

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok. give me a few minutes.

    nutloaf

  4. #4
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry,
    I think I am going to have to throw the towel in for tonight. I am getting to tired to be doing this. I can try and upload tomorrow. Thanks for trying to help.

    nutloaf

  5. #5
    code ninja hamstu's Avatar
    Join Date
    Nov 2002
    Location
    Montréal, Canada
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't worry about it, post whenever you're ready.


Bookmarks

Posting Permissions

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