SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there a better way than this to position an image?

    Hello. I have been trying to place an image within a box, but I can't make the image offset correctly. Instead of offsetting from the container the box is in, it is offsetting from the entire page.

    This is the link:

    http://colombianartgallery.com/cssindex.htm

    The image you see in the upper left hand side is the one I am trying to get into box #2.

    Either 1) How do I make the image offset from the container "conl" (which the box is using to offset itself) or 2) Is there a better way to do this, like can I somehow drop the image directly into the box itself?

    The relevant code so far is:

    Code:
    body{
    color:#A5A787;
    background-color: #E4DDAE;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: left;
    height: auto;
    }
    
    *{margin:0;padding:0;}
    
    #container{
    background:White;
    text-align:left;
    width:750px;
    margin:0 auto;
    border:3px solid #A5A787;
    overflow:auto;
    }
    
    #header,.nav,.foo,.conl,.conr{float:left;width:100%;}
    
    #header{height: 130px;background:#4C4D21;}
    
    .nav{background:#a5a787;
    height: 25px;
    font: 1.2em;
    color: White;
    text-align: center;
    }
     
    
    .conl{width:45%;padding:0 0 30px 0;
    height: 450px;}
    .conr{width:54.9%;
    padding-top: 15px;
    }
    
    .foo{
    background:White;
    height: 35px;
    text-align: center;
    }
    
    
    #headerbox1{
    float:left;
    width:110px;
    height:196px;
    display:block;
    border: medium solid #A5A787;
    }
    
    #headerbox2{
    float:left;
    width:125px;
    height:147px;
    display:block;
    border: medium solid #A5A787;
    }
    
    #headerbox3{
    float:left;
    width:142px;
    height:73px;
    display:block;
    border: medium solid #A5A787;
    }
    
    #headerbox4{
    float:left;
    width:93px;
    height:124px;
    display:block;
    border: medium solid #A5A787;
    }
    
    #headerbox1,#headerbox3{display:inline;}
    #headerbox1{margin:50px 0 0 50px;}
    #headerbox2{margin:50px 0 0 10px;}
    #headerbox3{margin:10px 0 0 50px;}
    #headerbox4{margin:-41px 0 0 10px;}
    
    img#box2 {
    position: absolute;
    top: 50px; left: 70px;
    }
    
    #headerimage1{
    	float: left;
    	width:149px;
    	height:130px;
    	display:block;
    }
    
    #headerimage2{
    	float: left;
    	width:546px;
    	height:88px;
    	display:block;
    }
    
    #headerimage3{
    	float: left;
    	width:	280px;
    	height:15px;
    	display:block;
    	border:	none;
    	font-size:	x-small;
    }
    
    #headerimage1,#headerimage3{display:inline;}
    #headerimage1{margin:0px 0 0 0px;}
    #headerimage2{margin:42px 0 0 0px;}
    #headerimage3{margin:-128px 0 0 470px;}
    
    
    </style>
    </head>
    
    <body>
    <div id="container">
    
    <div id="header">
    
    <div id="headerimage1"><img src="images/headerleft.gif" alt="Left Half of Logo" width="149" height="130" /></div>
    <div id="headerimage2"><img src="images/headerright.gif" alt="Right Half of Logo" /></div>
    <p></p>
    <div id="headerimage3">Gallery  |  Cart  |  About  |  Contact  |  FAQ  |  Site Map</div>
    </div>
    
    <div class="nav"><p>Basket Gallery  |  How Baskets Are Made  |  Artisans Stories  |  Mission Statement </p></div>
    
    <img src="images/Box%202%20Image.png" id="box2" alt="Medium Sized Basket" />
    
    <div class="conl">
    
    
    <div id="headerbox1">1</div>
    <div id="headerbox2">2</div>
    <div id="headerbox3">3</div>
    <div id="headerbox4">4</div>
    
    </div>
    Last edited by goodnewscowboy; Jul 7, 2006 at 16:57. Reason: Making my question easier to understand

  2. #2
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't gotten any responses to this so I can only assume that either my question is worded too confusingly or my question is too general. So I will try to make it more specific.

    What is the code to place an image inside a box model?

    Thanks for any help with this. I really am stuck with the website until I can get past this.

  3. #3
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .conl {
    position:relative;
    }

  4. #4
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for responding BonRouge. I was starting to wonder if I had transgressed some sort of unwritten code of posting ethics and I was being shunned

    The "conl" (left container) was working OK. It was the "img#box2" that I was having trouble with.

    Code:
     img#box2 {
    position: relative;
    top: 50px; left: 70px;
    }
    I was trying to place it exactly using the position property of absolute. So I took from your example to make it relative instead, and while it worked (in that it did bring the image into the "conl"), it completely tore the rest of the design up.

    I posted a page with its results here:

    http://colombianartgallery.com/cssindexsitepoint1.htm

    So I'm now positive that I misunderstood what you were trying to say. I wish I were better at communicating.

    What I am trying to do is to place 4 separate images into 4 existing boxes. The boxes are showing up perfectly (thanks to SitePoint help months ago.) But I don't know how to put images inside the boxes.

    This page shows as far as I've gotten without any images.

    http://colombianartgallery.com/cssindex5.htm

  5. #5
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.
    I'm sorry - I really should have looked at your page before posting...
    Just put the image inside the box.(http://bonrouge.com/test/colombian.htm)

  6. #6
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BonRouge, I can't thank you enough. If I had any Beaujolais Nouveau left, I'd send you a bottle in gratitude. That was exactly what I was trying to do.


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
  •