Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts

    How to move an image outside the boundries of the parent div tag

    I've been working hard to brush up on my CSS coding and have made a lot of progress getting rid of the tables in my layouts. However, I'm stuck on something.

    I'm trying to move a graphic left 30 px so that it leads into the text block like a bullet (but without causing only the first like to be indented).

    I'm trying to do it by creating a second div class for the object and using the code:

    .list-button{
    position:relative;
    left:-30;
    }

    However, I can't get it to work. Is this the correct way to solve this problem? And if so, what am I doing wrong?

    The full page is here: http://www.infolists.com/testnew.htm

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    -50px;

    you should try and set the img as a background though.

    ul {
    background: url('bullet.png') no-repeat 5px left;
    padding-left: (width of the img);
    }

    if you used an unordered list. I think it would be ideal here.

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    If you use a <ul> element (with <li> elements for each item in the list) then you can apply the list-style-image style to do this for you just like a normal bulleted list.

    Nice work so far on updating to tableless layout! Your markup right now uses div elements, but unfortunately is still completely devoid of paragraphs, lists, spans, dt/dd pairs, and such things where they ought to logically appear. Instead you're using a lot of <br /> tags to cut off lines and space things out. You'll need to get used to using "semantic" markup and then adding padding/margins to elements to get the spacing you want.

    Plus you will still need to validate your page:
    http://validator.w3.org/check?uri=ht...ss=1&verbose=1

    Let me know if you get stuck with implementing the <ul> transition.


    And P.S. Negative margins are a bad idea 99% of the time. My advice is to avoid them unless you're trying to completely hide something from sight.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Sammy12 -- Wow, can't believe i left that off and didn't catch it. Guess that's what I get for working 10 hours straight.

    Rowsdower -- Thanks for the continued advice. I guess I should have clarified that the text in the box was all just copied and pasted from the old page. Other than my single attempt to move that graphic.

    I will try the list strategy for the layout though.

    One other question I had: Is it ok that I'm defining the width of those div boxes as a %? It seems to work fine until I start messing with the padding. Then it does some funky things and makes life more difficult.

    But because all of this information will be database generated and constructed on the fly (the actual pages are php, I'm just trying to rework the layout in a basic html page before I re-implement it), I have to have a template that can handle all possible things that might get thrown at it.

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Hello ,
    You cant use a margin inside table .

    instead you can use a div inside the table and provide margin to move that div

    this would be ok to move the graphics inside table.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by kwdamp View Post
    One other question I had: Is it ok that I'm defining the width of those div boxes as a %? It seems to work fine until I start messing with the padding. Then it does some funky things and makes life more difficult.

    But because all of this information will be database generated and constructed on the fly (the actual pages are php, I'm just trying to rework the layout in a basic html page before I re-implement it), I have to have a template that can handle all possible things that might get thrown at it.
    If your are looking to set the page as % (ie: left column { 40%; float: left } right column { 60%; float: left; }, then you are using a liquid layout http://www.maxdesign.com.au/articles/liquid/, which is advised for a little more advanced scripters. For beginning scripters, a fixed 960px; margin: auto; is advised.

    For boxes WITHIN the columns:
    Inless you are looking to reuse this "class" in different sizes (ie: comment box, thumbnails for videos) I would stick with px since % will become difficult if you want to use borders. You will find that you have to use a wrapper div to make a border.

    Here is an applicable % use for a comment:

    Code:
    ul#profile.comment {
     width: 240px;
    }
    
    ul.comment li {
     height: 80px;
    }
    
    ul.comment .img {
     float: left;
     width: 20%;
    }
    
    ul.comment .text {
     float: left;
     width: 80%;
    }
    
    ul.comment .img img {
     width: 90%;
     height: 90%;
     padding: 2%;
    }
    Code:
    <ul id="profile" class="comment">
       <li>
          <div class="img">
              <img src="images.jpg"/>
          </div>
          <div class="text">
          </div>
       </li> 
       <li></li> 
       <li></li>
    </ul>
    inless you are planning to reuse the "comment" in multiple sizes, I would not recommend using % for widths and heights. If you noticed, if you wanted to use a larger comment than the "profile" page, you could adjust the height and width of just the ul and li, and the image and text would sustain their same aspect ratios.

    btw: suprised that you got that URL before a cybersquatter
    Last edited by Sammy12; 07-02-2011 at 10:34 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •