SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning problem

    I am trying to position text and buttons inside a division with "class". But for some reason, I can't get it to do it. The idea is to keep it away from the edge of the open window.

    What ever I try doesn't work. Anyway here is a stipped version of my code:
    Code:
    .ref {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	border-top:1px solid transparent;
    }
    .ref img {
    	display: inline;
    	float: left;
    	margin-right: 25px;
    }
    .ref span {
    	margin-right: 10px;
    	margin-left: 20px;
    	padding-right: 30px;
    	padding-left: 30px;
    }
    Code:
    <link href="../css/tabs.css" rel="stylesheet" type="text/css">
    <link href="../css/test.css" rel="stylesheet" type="text/css">
    <body>
    <div class="ref">
    	<a href="http://nationalgeographic.com" alt="nationalgeographic.com" target="_blank"><img src="../imgs/ngcom_logo.gif"></a>
    <span>This is an Excellent resource. Featured articles, Kid's site with games, Maps, great
    computer wallpaper and images, National Geographic Channel event schedule, and
    a whole lot more! (Hint: to use map machine, select view and customize. Works
    best with a broadband connection.)</span>
    	<br>
    	<br>A current featured link is the Lewis & Clark Journey.this site
          explores thier journal logs as you follow each leg of thier journey. You can find this and other direct links in the 
    	  "Quick Links."
    
    </div>
    Any help would be appreciated.

  2. #2
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Berzerko, any online example we can see to look at what it's doing?
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  3. #3
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexW
    Berzerko, any online example we can see to look at what it's doing?
    Not at the moment. It just doesn't do much of anything. The original was much larger. This is a stripped down version. Once this works I will add another piece, slowly rebuilding/debugging it.

    But the font is correct and the img margin works. Nothing in the .ref span works, except that the first line seems to be indented about 30px.

    -b

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

    I've no idea what you were trying to do with that code so this probably won't be much help

    You shouldn't use spans and breaks to make paragraphs. This is bad coding and will not work as you expect.

    A span is an inline element and padding/margins will not behave as you expect and browsers are allowed to interpret top and bottom margins on inlime elements as they see fit.

    You should use a <p> tag which will allow the settings to take effect.

    I couldn't work out what you were trying to do but I tidied the code up anyway
    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>
    .ref {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    border-top:1px solid transparent;
    }
    .ref img {
    display: inline;/*for ie only */
    float: left;
    margin-right: 25px;
    }
    .ref p {
    margin-right: 10px;
    margin-left: 20px;
    padding-right: 30px;
    padding-left: 30px;
    }
    * html p {height:1%}/* defeat ies 3 pixel jog*/
    </style>
    </head>
    <body>
    <div class="ref"> <a href="http://nationalgeographic.com" alt="nationalgeographic.com" target="_blank"><img src="../imgs/ngcom_logo.gif"></a> 
    <p>This is an Excellent resource. Featured articles, Kid's site with games, 
    	Maps, great computer wallpaper and images, National Geographic Channel event 
    	schedule, and a whole lot more! (Hint: to use map machine, select view and 
    	customize. Works best with a broadband connection.)</p>
    <p>A current featured link is the Lewis & Clark Journey.this site explores thier 
    	journal logs as you follow each leg of thier journey. You can find this and 
    	other direct links in the "Quick Links."</p>
    </div>
    </body>
    </html>
    Hopefully this will point you in the right direction

    Paul

  5. #5
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using the <p> tag fixed it.

    I assume that I should use margin and get rid of the padding, right? What is the difference between the two anyway?

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

    Padding is the space inside the element from the inside of the elements border. Margin is the space outside the element away from its border.

    Padding moves the content further inside the element where a margin moves the whole element away form any other element.



    Paul

  7. #7
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    So if you were to color the background of an element red, increasing the padding would stretch the red outwards. Increasing it's margin would leave the red area the same, but would push it away from all other elements .
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable


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
  •