Extra wide header slider center aligned?

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

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

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.

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;
}

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…

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

See: https://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…

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

Also see some errors:

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

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?
https://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 https://www.dnd.fr/ please? I don’t have anywhere near the skills to see how they are centering their wide slideshow.

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.

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.

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!

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

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

Thanks, John

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 https://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!