SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict madproject.com's Avatar
    Join Date
    Jan 2003
    Location
    Ottawa, Canada
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning and image inside a CSS box.

    I have a box like this

    Code:
     
    #box {
    height: 500px;
    width: 30%;
    border: 1px solid black;
    }
    I want to align images inside this box.
    In this code, are the right and top values calculated from inside the box or are they calculated from the right and top of the browser??:

    Code:
    <div id="box">
    <div style="position:absolute; right:0px; top:0px;"><img src="blah.gif" /></div>
    </div>
    Free Picture and Video Hosting
    [http://photocabin.com][http://madproject.com]

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    position:absolute refers to the top-left of the document, not the top-left of the parent box. how do you want to position your image(s) ?
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    SitePoint Addict madproject.com's Avatar
    Join Date
    Jan 2003
    Location
    Ottawa, Canada
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to position my images refering to the parent box.
    Free Picture and Video Hosting
    [http://photocabin.com][http://madproject.com]

  4. #4
    SitePoint Addict madproject.com's Avatar
    Join Date
    Jan 2003
    Location
    Ottawa, Canada
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anybody???
    Free Picture and Video Hosting
    [http://photocabin.com][http://madproject.com]

  5. #5
    SitePoint Guru silver trophy Luke Redpath's Avatar
    Join Date
    Mar 2003
    Location
    London
    Posts
    794
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by madproject.com
    Anybody???
    I'm not sure if this is what you are trying to achieve, but the following works:

    Code:
    #box {
    	width: 400px;
    	height: 400px;
    	border: 1px solid #000;
    }
    
    .imageinbox {
    	margin: 0px;
    	float: right;
    }
    Code:
    <div id="box">
    <img src="lukeredpath/images/logo.gif" width="179" height="36" alt="" class="imageinbox" />
    </div>
    Changing the size of the box as you see fit.


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
  •