SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning Issue

    Hi,
    I hope somebody can help.

    Here is a weather pic i am adding to my page, but, I want to add the current time to the top right of the square ( beside the pic and up a little bit). Can somebody show me where to put the DIV for the time?


    here is the code

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css" media="screen">
    #weather{
    	padding:0px 50px;
    	float:left}
    #weathertext{
    	padding:0px 10px;
    }
    #weathertime{
    	padding:0px 50px;
    }
    </style>
    </head>
    
    <body>
    	<div id = "weather">
        	
            <?
    		print "<img src=http://us.i1.yimg.com/us.yimg.com/i/us/we/52/28.gif>";
    		?>Dublin, Ireland
            <div id ="weathertext">
            <?
    		print " 34"."&deg; C";       // 16
    		?>
            </div>
        </div>
    </body>
    </html>

    thanks in advance.
    Reply With Quote

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    You have two possibilities.

    1) Float it right. As long as margin on #weathertext and padding on #weather are 0, it'll go right to the top right.

    2) Set the #weather element to be position: relative, then set #weathertext to be position: absolute, top: 0, right: 0. This will keep it in the top right of weather.

    Really though it depends exactly on your layout and you'll just have to tweak it using one of these methods. Since you have left/right padding, you could also set a negative margin on your #weathertext equal to the amount of padding on the right.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Can somebody show me where to put the DIV for the time?
    Hi,
    You could do something like this with floats and text-align.
    Code HTML4Strict:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css" media="screen">
    * {margin:0; padding:0}
    #weather{
        width: 150px;
        float:left;
        padding:5px;
        margin:20px;
        background:#EEF;
    }
    #weather p {text-align:right;}
     
    #weather img {text-align:left;}
     
    #weathertext{
        padding:0;
        float:right; /*bring the right floats first in the html source*/
    }
    #weathertime{
        padding:0;
        float:right; /*bring the right floats first in the html source*/
        clear:right; /*clear the float above to bring it down*/
    }
    </style>
    </head>
     
    <body>
        <div id="weather">      
            <div id="weathertext">
                34&deg; C    
            </div>
            <div id="weathertime">
                10:00 am    
            </div>                   
            <img src=http://us.i1.yimg.com/us.yimg.com/i/us/we/52/28.gif />
            <p>Dublin, Ireland</P>        
        </div>    
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, I used Rayzur's solution.


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
  •