SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    where am I going wrong?

    Hi all,
    Pasted below is my code for a webpage.My problem is that when I size/shrink my browser window, my images and text overlap each other.New to CSS, maybe someone could tell me how to fix this?The code looks long, but will take only a few min to read thro' images/smilies/smile.gif
    Thanks

    <html>
    <STYLE TYPE="text/css">
    BODY {background-image: url(bar1.gif);background-repeat:repeat-y}
    H1{font-family:"French Script MT","Monotype Corsiva","Comic Sans MS";text-decoration:underline}
    P,H2{font-family:"French Script MT","Monotype Corsiva","Comic Sans MS"}
    A:link{color:white}
    A:visited{color:white}
    A:hover{color:black}
    #logo
    {
    position:absolute;
    left:"2%";
    top:"2%";
    }
    #navleft
    {
    position:absolute;
    left:"2%";
    top:"30%";
    }
    #heading
    {
    position:absolute;
    left:"30%";
    top:"5%";
    }
    #ganesha
    {
    position:absolute;
    left:"30%";
    top:"15%";
    }
    #shuklam
    {
    position:absolute;
    left:"30%";
    top:"70%";
    }
    #shuklamtrans
    {
    position:absolute;
    left:"30%";
    top:"80%";
    }
    #newsbox1
    {
    position:absolute;
    left:"60%";
    top:"15%";
    font-family:"French Script MT","Monotype Corsiva","Comic Sans MS"
    font-color:white
    }
    #newsbox2
    {
    position:absolute;
    left:"70%";
    top:"40%";
    font-family:"French Script MT","Monotype Corsiva","Comic Sans MS"
    font-color:white
    }
    #divider
    {
    position:absolute;
    left:"22%";
    top:"90%";
    }

    </STYLE>

    <body>
    <div id="logo">
    <img src="logo.gif" width=120 height=121 alt="Temple Logo">
    </div>
    <div id="heading">
    <h1 align=center> Sri Ganesha Temple </h1>
    </div>
    <div id="ganesha">
    <img src="ganeshbig2opt.jpg" width=380 height=477 alt="The Elephant God, Ganesha">
    </div>
    <div id="shuklam">
    <img src="shuklam.gif" width=621 height=81px>
    <p>
    [Meaning of above slokam in english]
    </p><br><br>
    <hr align=left color="#c0000" width=100%>
    <p align=center>
    Temple addressyzabc
    </p>
    </div>


    <div id="navleft">
    <h2>
    <a href="" title="How Do I get There?">Temple Location</a><br><br>
    <a href="" title="What's happening?">Events/Festivals</a><br><br>
    <a href="" title="Temple news">Reports/Newsletters</a><br><br>
    <a href="" title="How can I help?">Sponsor/Donate/Volunteer</a><br><br>
    <a href="" title="A Project in the making!">India Cultural Center</a><br><br>
    <a href="" title="Contact the temple">Contact Us</a><br><br>
    <a href="" title="How it all began!">About Us</a>
    </h2>
    </div>
    <div id="newsbox1">
    <table border=1 width=200 height=200>
    <tr>
    <td bgcolor="#cc0000" height=10%>
    </td>
    </tr>
    <tr>
    <td>
    This will have some news items about events that are happening or coming soon and links of
    important pages
    </td>
    </table>
    </div>

    <div id="newsbox2">
    <table border=1 width=200 height=200>
    <tr>
    <td bgcolor="#cc0000" height=10%>
    </td>
    </tr>
    <tr>
    <td>
    This will have some more news items about events that are happening or coming soon and links of
    important pages
    </td>
    </table>
    </div>

    </body>
    </html>
    Last edited by svijaya77; Apr 16, 2003 at 19:16.

  2. #2
    SitePoint Member
    Join Date
    Mar 2003
    Location
    USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would say probably because of your absolute positioning. If you have an image that takes half of a regular screens width, then you are allowed the other 50% for positioning, but if you only have 2/3 of the screen (your window is at 2/3 size) then your image that takes up 50% full screen now takes up about 3/4 of the small screen.

    Either way, if you relatively position your content and people downsize windows, you will get horizontal scroll bars, which are just as bad as overlapping content.

  3. #3
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I have understood what you mean correctly, this thread may come in use.

    http://sitepointforums.com/showthrea...hreadid=105256


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
  •