Results 1 to 2 of 2

Thread: absolute positioning on my div...

  1. #1
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default absolute positioning on my div...

    OK my website is here. just so you know I'm not very good at coding and stuff. Anyways I made a div (the scrolling box thing) and that's where all my text is. And i used the absolute positioning thing too so i could put it anywhere i wanted on the page. So i positioned it so that it would go where the blue box thing is on my pig layout.

    Code:
    <div style="overflow: auto; position: absolute; left: 290px; top: 420px; height:148px; width: 260px; border: none;">
    
    Text here
    
    </div>
    but when you resize the page, the whole box moves around so it's not where i wanted it to be anymore..

    On this website I think she used the absolute position thing too. but when you resize the page it stays where it is.

    im really confused, if anyone could help... it would be great

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    696
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there tanuki,

    try it like this...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Fuzziepaws - home</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="shortcut icon" href="/favicon.ico">
    
    <style type="text/css">
    html,body { 
        scrollbar-arrow-color:#7e5949;
        scrollbar-track-color:#a4d4e8;
        scrollbar-face-color:#a4d4e8;
        scrollbar-highlight-color:#a4d4e8;
        scrollbar-3dlight-color:#a4d4e8;
        scrollbar-darkshadow-color:#a4d4e8;
        scrollbar-shadow-color:#a4d4e8;
     }
    body {
        background-image:url(http://www.fuzziepaws.com/images/polkadot2.jpg);
        letter-spacing:2px;
        text-align:justify;
        font-family: tahoma,sans-serif;
        font-size:12px;
        line-height:10px;
     }
    #container {
        position:relative;
        width:963px;
        margin:40px auto;
     }
    #container img {
        border:0 solid;
     }
    #box {
        position:absolute;
        top:380px;
        left:280px; 
        width:250px;
        height:148px;
        padding:5px;
        overflow:auto; 
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <img src="http://www.fuzziepaws.com/images/piggielayout.gif" usemap="#nav" alt="">
    <map name="nav" id="nav">
    <area shape="rect" coords="143,418,171,578" href="you.htm" alt="you">
    <area shape="rect" coords="173,447,199,578" href="me.htm" alt="me">
    <area shape="rect" coords="203,463,235,578" href="site.htm" alt="site">
    <area shape="rect" coords="234,536,278,577" href="index.htm" alt="home">
    </map> 
    
    <div id="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue. 
    </div>
    
    </div>
    
    </body>
    </html>
    
    coothead

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
  •