SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    possitioning a list

    I want to position the list here http://muslimahwebdesign.co.uk so that it is to the left like in the pick below. How is it properly done?
    Attached Images Attached Images

  2. #2
    SitePoint Member c0dingL!fe's Avatar
    Join Date
    Sep 2013
    Location
    Essex
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good morning,

    You need to put the div with a class of service-icon INSIDE the div with a class of service-content (the div containing the list and heading etc).

    That will make your list align underneath the image like in the image above.

    Please note, you may have to assign some values to the h2 and service-icon div to align them correctly at the top. You could float the service-icon div left and set a width on the h2 and float it right. OR you can keep the width on the h2 and position the service-icon div absolutely (which then means you would have to position your list relatively, manipulating the bottom and left properties).

    Hope this helps,

    Kind regards

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

    Without changing the html you could do the following.

    Code:
    .service-content {
    overflow:visible;
    margin-left:80px;
    }
    ul.list_arrow{margin-left:-80px}
    You were using overflow:hidden to create a rectangular block to the side of that floated icon but that means you can't drag anything back out of that block (because the overflow is hidden). If you remove the overflow:hidden and then a apply a margin-left to the content then it creates the same effect you had before except that you are then free to drag the list back into position with a negative margin.

    However as mentioned above you could change the html to get the same effect by moving the list outside of the overflow container..

  4. #4
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    that's this was a learner for me. The css was my best option I think but having tried it I think it looks better as it is. That being said I have learnt from these two answers

    Thanks for your help


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
  •