Jump to content

Slider Frame Will Not Center!


Recommended Posts

On the start page of my blog: http://www.webprofitideas.com


I added a picture frame to the slider, and now it will not center.


If you look at it with Firebug the CSS for it is in slider.css and the specifc ID is #slider_wrapper (the container of the slider with the border as the picture frame which I'm trying to center).


I've done everything that is required to center a div.


- assign width

- position: relative

- and then margin: 0 auto 0 (auto left and right)


Still, it's not working, any ideas why?

Link to comment
Share on other sites

well, position relative is not needed to center something, besides that the margin:0 auto; trick works only for block elements.


now lets look at your markup:

<div class="clearfix" id="slider_wrapper">.....</div>

so not only does it get it's style from the ID #slider_wrapper but also from class .clearfix


and since it inherited from style.css line 389 a class of .clearfix with the property inline-block it won't behave any more as a block would.


So the margin:0 auto; trick won't work. In other words give it a property of display:block; and all should be fine except for some extra margin you probably have to add to the top of that div. If you would have used a gridsystem, this could have been done much cleaner. (something to think about on your next project)


Hope this helps!

Link to comment
Share on other sites

Thank you a lot, I got it to work.


I'm learning how to write clean code as I go, I have already re-written a lot but I'll try to do a much better job on my next project. And I will research the so called "grid system" tomorrow (it's late over here). If you have any cool links about that I'd appreciate that.


What are you doing for a living are you some type CSS specialist?



Thanks again.

Link to comment
Share on other sites

Glad it worked!


as far as grid systems you might want to have a read here: http://www.tripwiremagazine.com/2009/06/45-css-grid-systems-layout-generators-and-tutorials-that-every-designer-should-know.html


I prefer the 960-grid the yui-grid and stubbornella's grid (which i am not sure is in that article)


As for a living, i sell snow to Eskimo's  :tease-01:

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.