SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need some posistioning help

    Hey Everyone

    If i have this html :

    Code:
        <tr>
         <td valign="top" class="tdnavtext" background="nav.jpg" width="980" height="50">Tuesday, November 02, 2004<div class="navtext">sweeeeeeeeeet</div></td>
        </tr>
    and this CSS:

    Code:
    .tdnavtext {
     	text-align: right;
    	padding-right: 25px;
    	padding-top: 12px;
            font: bold 11px arial;
            color: #999999;
    }
    .navtext {
     	text-align: left;
    	position:absolute;
    	top: 120px;
    	right: 700px;
    	left: 30px;
    	padding-top: 12px;
            font: bold 11px arial;
            color: #999999;
    }
    How do I get the posistion of the sweeeeeeeeeet part to work the same in different res'

    You can view the offending page here! http://www.teamsik.net/teamsiknet/

  2. #2
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you are using a table structure, which is a little old school, however not a problem, I would use 2 div, and float one to the left and one to the right inside the <td>


    example

    HTML Code:
    css:
       #left {
       postion: relative;
       float: left;
       display: inline;
       }
       #right {
       position: relative;
       float: right;
       display: inline;
       }
       
         <tr>
           <td>
             <div id="left">date<div>
      <div id="right">sweeeeeeeet</div>
           </td>
         <tr>
    havent tested it at all , but its a quick one

    /OX
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've answered this problem for you in the other thread using the floated version

    If you want to use absolute positioning then you need to set a stacking context by declaring the parent to have position:relative and then the absolute element is in relation to its immediate parent and not the viewport.

    Code:
    <!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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .tdnavtext {
    text-align: right;
    padding-right: 25px;
    padding-top: 12px;
    	font: bold 11px arial;
    	color: #999999;
    }
    .tdnavtext p{width:100%; position:relative;}
    .navtext {
    text-align: left;
    position:absolute;
    top: 0;
    left: 10px;
    	font: bold 11px arial;
    	color: #999999;
    }
    </style>
    </head>
    <body>
    <table cellspacing="0" cellpadding="0">
    <tr> 
    <tr> 
    	<td valign="top" class="tdnavtext" background="nav.jpg" width="980" height="50"><p>Tuesday, 
    		November 02, 2004<span class="navtext">sweeeeeeeeeet</span></p></td>
    </tr
    ></tr>
    </table>
    </body>
    </html>
    Paul

  4. #4
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much guys!

  5. #5
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, Ive tried both ways and i cant get neither to work! :S

  6. #6
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tell a lie, Pauls way works fine

  7. #7
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive been doing some more work on this and have made some divs to appear on the page

    in firefox they display correctly but in ie they dont! I have tried adding the display:inline but that never helped.

    heres the link http://www.teamsik.net/teamsiknet/

    Cheers

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    How wide is this table cell?
    Code:
    	<td class="tdbody" width="160" height="400"> <div class="menu">vvvvvv<br />
    		vvvvvvvv</div>
    	  <div class="news">vvvvvv</div>
    	  <div class="menu1">vvvvvv</div>
    	  <div class="menu2">vvvvvv</div></td>
    	<tr>
    How wide are the four divs you are squeezing int it?

    Answer that and you should answer your own question.

    Paul

  9. #9
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tut.....excuse my daft question paul!


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
  •