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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Location
    Brighton, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Center image within CSS circle

    How would I go about centering the table image into the circle?

    I've downloaded a free slider and usually I am fine in editing the little bits here and there, but I'm stuck on this one..

    Can anyone help? I can post more code if needed, here is the code in question;

    Code:
                <div id="slider" class="sl-slider-wrapper">
    
    				<div class="sl-slider">
    				
    					<div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
    						<div class="sl-slide-inner">
    							<div class="deco"><img src="images/logo.png"></div>
    						  <h2>Online soon</h2>
    							<blockquote><p>In the meantime any bookings or queries, please contact me via any of the following methods...</p><cite>Email and social media links/icons will go here.</cite></blockquote>
    						</div>
    					</div>

    And I believe this is the CSS I need to edit? Or do i need to write up some new code?

    Code:
    /* Media Queries for custom slider */
    
    @media screen and (max-width: 660px) {
    	.demo-1 .deco {
    		width: 130px;
    		height: 130px;
    		margin-left: -65px;
    		margin-bottom: 50px;
    	}
    Thanks loads in advance! Also sorry if this is in the wrong category?

  • #2
    New to the CF scene
    Join Date
    Sep 2013
    Location
    Brighton, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh I forgot the link! Can't find a edit button, so sorry about the double post.

    Here is the working site so you can see the issue;

    http://hobhob.co.uk/test/tabletoplanding/index.html

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Good evening obbs,

    Have you got a live example?

    Kind regards,

    LC.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    LearningCoder, please see the post above yours. I had to approve it first because of the over-sensitive spam filter.

  • #5
    New to the CF scene
    Join Date
    Sep 2013
    Location
    Brighton, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    LearningCoder, please see the post above yours. I had to approve it first because of the over-sensitive spam filter.

    Thanks for appoving it

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,175
    Thanks
    23
    Thanked 601 Times in 600 Posts
    Your table image is 184px × 84px. It is inside a div 260 square. Add padding to the outside div:
    <div class="deco" style="padding:88px 38px;">
    And it will center.

    For browser widths larger than 597px
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    New to the CF scene
    Join Date
    Sep 2013
    Location
    Brighton, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Amazing! Thanks loads!

  • #8
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Quote Originally Posted by VIPStephan View Post
    LearningCoder, please see the post above yours. I had to approve it first because of the over-sensitive spam filter.
    Ah I see.


  •  

    Tags for this Thread

    Posting Permissions

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