WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Extra wide header slider center aligned? (12 posts)

  1. Richmond Media
    Member
    Posted 2 years ago #

    I have had no luck at all trying to center align a page wide header slideshow. Here's where I am experimenting (nothing there AT ALL but the slideshow):

    http://richmondmediatestserver2.info/rm/

    It displays fine at full screen, but it sticks to the left side of the page when you make the page smaller (instead of centering aligning), so the right side is gradually cut off from view as you resize the browser window down.

    I'm using the Easing Slider plugin, but even when I use an iFrame slideshow, it still refuses to center, so it's not related to the slider itself.

    Here is an example of what I'm looking to do:
    http://www.dnd.fr

    Notice how the slideshow stays centered on the page, even when you resize the page down.

    The site I'm experimenting with is an Artisteer site with Templateer, if it matters. Thank you VERY MUCH in advance, I am completely stumped.

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

    Or try asking on http://www.artisteer.com/?forum_id=13&p=forum_topics

  3. Richmond Media
    Member
    Posted 2 years ago #

    I'm a WYSIWYG guy, and I have Firebugged this thing to death, both my page and the page I linked to. I also left a thread in the Artisteer forum, no replies yet. But I don't think it's an Artisteer issue.

    In Googling the problem, not much luck. One thing I noticed is that if you edit <div class="header" in Appearance/Editor/header.php by making it:

    <div class="header" align=right>
    It aligns the slider to the right, but if you edit it as:
    <div class="header" align=center>
    It doesn't center...

    Thanks again.

  4. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    That's not really the way to center things. Positioning is handled through css...

    so

    <div class="header">

    and in the css

    .header {
         margin: 0 auto;
    }
  5. Richmond Media
    Member
    Posted 2 years ago #

    Didn't work, and yeah, I'd thought of that too. It's like it's not centering it because the image is larger than the browser window, so when you resize the window it forces the slideshow to the left.

    If you Firebug the CSS, you'll see:
    .header {
    margin: 0 auto;
    }
    at the bottom, but the slideshow still aligns to the left when you resize the browser window. Thanks though, I am as stumped as I was before...

  6. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    That method of align only works if the width is less than 100% of the enclosing element.

    See: http://www.w3schools.com/css/css_align.asp

    But you also seem to have a lot of contradictory and/or extra CSS code in the stylesheet. Does not look like your use of .header:after is correct -- removing that entire block has no effect on the page...

    http://www.w3schools.com/cssref/sel_after.asp

    Also see some errors:

    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Frichmondmediatestserver2.info%2Frm%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

  7. Richmond Media
    Member
    Posted 2 years ago #

    Thanks WPyogi.

    If that method of align only works if the width is less than 100% of the enclosing element, what is going on at Agence Dnd?
    http://www.dnd.fr/

    I imagine that the code errors are from Artisteer. They get it better every time they update it. You should have seen Artisteer code a year ago...

    Not being a coder at all, it's the only way I can create custom themes for clients. So I'm sort of stuck with it, but not having to use pre-built themes is VERY important to me.

    Could someone take a look at http://www.dnd.fr/ please? I don't have anywhere near the skills to see how they are centering their wide slideshow.

  8. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    I looked at that site -- hard to tell what is going on, though they do have a fixed width for the slider div so it's likely being centered using the same as the above -- but there are many confusing divs and CSS in there...

    In IMHO, using Artisteer is asking for problems...garbage code does not seem like a good tradeoff. But don't they have a support forum? Maybe they can help you with this.

  9. Richmond Media
    Member
    Posted 2 years ago #

    Thanks for the look at that other site. Funny, I thought centering a slideshow would be easy...

    As far as Artisteer, I may have made it seem worse than it really is. I've been mucking around with the CSS all day without worrying about screwing it up, and while I can stumble around and get some things done, I am more of a WYSIWYG guy. I wasn't really worried about the CSS for this site, since it's only to experiment with the slider. Other people who have done programming for our sites don't complain about the code much, although the way Artisteer does CSS is a little weird.

    There's a new version out soon with promises of greatly improving the coding. Artisteer is a godsend for guys like me who do good design, but don't do code all that well. And without it I'd be doing what so many other designers do, buying templates and modifying them. Hell, I'd rather sell shoes than do that.

    About the Artisteer forum... understand that Artisteer is for people who aren't coders, it's software. I have a thread up there, but I haven't gotten any replies yet.

  10. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    Funny, I thought centering a slideshow would be easy

    I think that's why we are struggling here... normally it IS easy! Using the css technique should always work... unless any number of other things are interfering

    I've tried to help with artisteer themes before... they are so incredibly confusing and messy. I do hope the upgrade gets you cleaner code!

  11. jr2ft
    Member
    Posted 2 years ago #

    Hi RM, can you confirm you got your slider to center properly? From what I can see, it looks good - http://richmondmediatestserver2.info/rm/

    If so, can you tell me what slider code you used?

    Thanks, John

  12. Richmond Media
    Member
    Posted 2 years ago #

    John,
    Sorry, I posted this question to a few forums, I guess I forgot to include the fix in this one. Here's what I managed to dig up:

    I added this to the CSS:

    .lof-slidecontent {
    margin: 0 auto;
    position: fixed;
    left: 50%;
    margin-left: -840px;
    }

    The "-840" number is because the image is 1680 pixels wide, and I was told to use a number that was half of that.

    It's now on our main site at http://www.richmondmedia.com

    I added a bunch of custom header images to the other pages, which show up on all browsers except on IE. So I guess that's my next quest...

    This was SO cool, because I'm not a coder at all, but I stuck with it and finally found the solution!

Topic Closed

This topic has been closed to new replies.

About this Topic