SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict foolios's Avatar
    Join Date
    Dec 2006
    Location
    The least technologically advanced state in the US
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <p> = no divs inside - So how to make an image move up or down.

    As far as I understand it. You can't place divs inside of paragraphs. Not sure why as paragraphs are block elements, I thought only inline elements could not have divs(block elements) in them. I may be mistaken.
    So if I have a paragraph of text and an image within a footer. How can I control the location for the height and width of the image in the paragraph?
    From what I understand height does not work in inline elements. So paragraphs must be inline somehow but act like block elements?
    Well, here's the link to the page so you can see what I am referring to. The images are in the footer at the bottom. Thanks so much in advance.
    [URL="http://somelink/index.html[/URL]

    html code:
    Code:
      <p class="footer"><span id="cntrfootertxt">Site design<img 
    
    src="images/valid_xhtml.png" alt="Valid XHTML 1.0 Strict" height="31" 
    
    width="88" /><img src="images/valid_css.png" alt="Valid CSS!" height="31" 
    
    width="88" /></span>
    css code:

    Code:
    .footer { float: left;
    /*clear: left;*/
    margin-left: 7px;
    padding-top: 0;
    margin-top: 0;
    /*border: solid 1px;*/
    width: 806px;
    height: 59px;
    color: white;
    background-image: url(../images/footer.png);
    }
    
    #cntrfootertxt { padding-left: 160px;
    padding-top: 30px;
    }
    Last edited by foolios; Sep 23, 2007 at 19:12.

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,392
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    You could use the .footer class to align an image

    .footer img {
    float: right;
    width: 88px;
    height: 31px;
    }

    will make an image right aligned and 88x31 pixels wide.

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,226
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    stylin

    Don't forget you can use margin/border/padding too.
    Even though it takes me a while to think of layout as being more controlled by style rather than by the mark-up, I find that with a little patience, CSS can do just about everything I want it to.

  4. #4
    SitePoint Addict foolios's Avatar
    Join Date
    Dec 2006
    Location
    The least technologically advanced state in the US
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. I tried the .footer img {} with floating and it allows me full control of the image now.

    So now the problem I am having is with the text next to it. I can't seem to control the height of that paragraph of text inside the footer.
    I tried .footer p {} with margin-top and padding-top but to no success.

    Thanks so much.

  5. #5
    SitePoint Addict foolios's Avatar
    Join Date
    Dec 2006
    Location
    The least technologically advanced state in the US
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't put a div inside a p right?

    I was just thinking I can go with absolute positioning. I will try that for that footer text.

    That worked! Thanks guys!

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by foolios View Post
    You can't place divs inside of paragraphs. Not sure why as paragraphs are block elements, I thought only inline elements could not have divs(block elements) in them.
    A paragraph is one or more sentences that deal with one thought. It doesn't make semantic sense to insert a block-level element like a DIV or a list or a table inside a paragraph.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Addict foolios's Avatar
    Join Date
    Dec 2006
    Location
    The least technologically advanced state in the US
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that. I appreciate the instruction.


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
  •