How to center my horizontal scroll

Iness / 2011-09-20 14:11:28   

Hello,

I have the horizontal theme and am trying to center my horizontal slide. I would like my pictures to be center instead of on the top as they are now. This is my site: inesamd.com (in Paris project)
I tried changing the style.css and the horizontal.php but no success...

thanks for your help!

pernin / 2011-09-21 01:53:17   

What you need is to style specifically for the horizontal format, without affecting the other exhibition formats (always use firebug in firefox for testing different alternatives without doing any permanent damage)

edit the horizontal plugin and replace all img-container with something else, for example hrz-container. This is to create a new id for styling in css, without affecting the other exhibition formats that also use img-container

edit your style.css:

copy #img-container and #img-container p, paste and change the names of the duplicate lines to #hrz-container and hrz-container p

In #hrz-container add the property margin-top: 30px; or whatever much you want to move down your horizontal exhibit (test first in firebug changing the px of margin-top, so you'll know)

Or you can change other properties for hrz-container without affecting your other exhibitions

Iness / 2011-09-21 03:14:38   

Thanks Pernin. I followed the steps, I think I'm doing the right thing but there must be something wrong 'cause the slide is not moving...
Here how my style.css looks:

#img-container    { margin: 0; padding: 0; }
#img-container p { width: 400px; margin: 0; padding: 0 0 5px 0; }
#hrz-container { margin: 0; padding: 0; margin-top: 30px}
#hrz-container p { width: 400px; margin: 0; padding: 0 0 5px 0; }

blameme / 2011-09-21 03:24:13   

Hi Iness, looks like you're missing this step from Pernin's instructions:

"Edit the horizontal plugin and replace all img-container with something else, for example hrz-container. This is to create a new id for styling in css, without affecting the other exhibition formats that also use img-container"

Iness / 2011-09-21 04:07:38   

Oh! my mistake! I just changed the horizontal.php and replaced all the img.container for hrz-container, and now instead of an horizontal slide I have a vertical slide! :(

function dynamicCSS()
    {
        return "#hrz-container { width: " . ($this->final_img_container + 1) . "px; }
#hrz-container #text { float: left; width: " . ($this->text_width + $this->text_padding_right) . "px; }
#hrz-container #text p { width: " . $this->text_width . "px; }
#hrz-container .picture_holder { float: left; }
#hrz-container .picture { /* padding-top: 10px; */ }
#hrz-container .captioning .title { margin-top: 12px; font-weight: bold; }
#hrz-container .captioning .caption { }";

those are the lines I changed.

pernin / 2011-09-21 04:11:54   

I see it working well, maybe you found the error, or you just need to refresh your browser

Iness / 2011-09-21 04:12:22   

I just corrected it, it looks like it's working! thankyou :)

johnliz / 2011-11-07 09:54:29   

@Iness

I too got a vertical slide after following these steps, could you explain what you did to fix it? Thanks!

johnliz / 2011-11-07 09:59:27   

Found the error, two more spots where img-container needed to be changed to hrz-container.

$s .= "n";

and

return "#hrz-container

ThePiips / 2011-11-14 05:32:24   

Hello.

I am trying to center the content on two exhibition formats, in an otherwise horizontal and left aligned site. I have duplicated, renamed and added these to the plugin folder, and have tried to follow the steps above, but none of what I do seems to make any difference to the content alignment.. Could anyone please let me know where I am going wrong?

Working here

Thanks guys

pernin / 2011-11-15 00:39:56   

Terve Paulina,

which exhibition formats do you want to center? what I can see in your site it's all horizontal formats

ThePiips / 2011-11-15 04:06:19   

Hej på dig :)

Sorry, for now, in the Graphic Design Section, (Kamp Signe) cycle.centered and (Willi Opitz) over_and_over.centered.

pernin / 2011-11-15 05:13:31   

Hi Piips, very nice site you've got there, me like :)

All, or almost all plugins control the placement of what's in the page through a defined img-container, which is styled in css with #img-container. The problem is that making styling changes to img-container will also affect all other exhibitions using img-container...

That's what this thread's about: changing the name of the element img-container to soimthing else that can be styled specifically without affecting other formats.

In the over and over, just as explained in the thread for the horizontal, you could change the parts where it creates the #img-container to something else, call it #ovr-container for example. Then you can declare that in your css with width, positioning, etc (just leave the img-container declarations there too, as they are needed for other formats)

I can't see the cycle plugin: I don't have it myself, and all this cycling makes that I can't catch it in firebug, but I guess the principle should be the same

ThePiips / 2011-11-15 06:12:15   

Tack Pernin :)

Yess, I created a new #hrz-container section in my stylesheet and made changes in my plugin accordingly.

For over_and_over.centered

Plugin
function dynamicCSS()
{
    return "#hrz-container { margin-bottom: 18px; } { position: relative; } {float: center;} n #hrz-container p span { line-height: 18px; } { position: relative; } {float: center;} ";
}

Style sheet
#hrz-container {
z-index : 1001;
width : 100%;
position: relative;
float: center;
    margin: 0px 0px 0p 0px;
    padding: 0px 0px 0px 0px;
}

#hrz-container p {
z-index : 1001;
width : 100%;
position: relative;
float: center;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

Is this completely wrong? I am really new to this, so I don't really always know which information is key, but I spend a lot of time trying things out, changing values and styles, and usually eventually get somewhere.The problem is that nothing of what I have tried has had any effect so far?

pernin / 2011-11-15 07:01:42   

I'm looking at the Willi Opitz page, and I don't see anything else than img-container there, so for the style definitions you mention to work, you will need that: did you make the changes in the over and over plugin?

ThePiips / 2011-11-15 07:20:40   

This is very peculiar. No, they are in the stylesheet, at the end of the sheet. The first bit, function dynamicCSS().. is in theplugin, and the second bit is in the css file?

pernin / 2011-11-15 07:24:01   

edit the over and over plugin and change all references to img-container into hrz-container, otherwise what you are styling in css won't have anything to work on

ThePiips / 2011-11-15 07:33:24   

Done, still no change.. :/ ?

pernin / 2011-11-15 07:48:13   

ok, now in the stylesheet, I don't think float: center will work (don't think there's a center attribute for float)

try margin-left: auto and margin-right: auto with a less than 100% width:
http://www.w3schools.com/css/css_align.asp

ThePiips / 2011-11-15 07:57:06   

Did he above and the 70% width, no luck. That damn thing just wont budge. Can anything else in my style-sheet be overriding it?

pernin / 2011-11-15 08:01:38   

checking it now, I see several errors in firebug (good to use firebug in firefox to see what's happening back-stage): and the declarations for margin-right and left are dropped, maybe you forgot to close with ;?

ThePiips / 2011-11-15 08:08:18   

Hahaa, It budged, but It is not centered yet. :) I added the same values to the plugin. And I removed that z index thing form my stylesheet #hrz-container.

pernin / 2011-11-15 08:17:22   

take out that float:center, it just confises things...

what you need in the css is basically this:

#hrz-container    {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    padding: 0;
}

then there's quite a bit of fiddling with it and the hrz-container p -- but this should get you started :)

ThePiips / 2011-11-15 08:46:38   

Yes, did that already :) Firebug seems great, have been using web inspector on safari, but that on/off firebug function is great. Arite, here I go, wish me luck :) Tack för hjälpen :D

pernin / 2011-11-15 08:51:39   

lycka till :)

pernin / 2011-11-15 09:07:27   

oh, and you still have a prob in your plugin: too many braces, you need one opening brace { and one closing brace }

the best thing to do would be to dump that plugin and use a fresh copy of it, just changing img-container to hrz-container, and then do the styling in the css (no position:relative, no float etc in the php's dynamic css, just do it in the stylesheet

ThePiips / 2011-11-15 09:26:59   

Javisst, det ska jag göra.. Tack pernin :)

ThePiips / 2011-11-16 05:41:50   

Hi pernin,

Sorry to bug you still but I would really appreciate some more help with this centering business.

Since yesterday I have been trying to center the images, looking for info on web forums like www.w3schools.com/css, www.devlounge.net and www.w3.org, tampering with the display and positioning (relative, absolute, fixed). I’ve played with width, or pixel width, tried a text align command, tried adjusting the padding and even eventually even tried creating a new separate content section (as the removing float:left seemed to center the over and over) but this was a fail as well... Nothing I’ve done seems to center the images correctly? I must be missing or miss commanding something? So I’m back to where we started yesterday. :(

Would you be so kind please give me some small nugget of advice (so that I can eventually move on with my life) ;) Sorry for being such a tönt..

rickykappa / 2011-11-16 10:02:50   

hi, you're proceeding I see...
it's hard to say what's going on, you're using quite many different formats: you've succesfully modified willi-opitz as pernin told you, things didn't went as smooth with test-1 (take always a look to your html source, in this case you'll see what's wrong), while horizontal isn't meant to be left-right centered. not sure what you mean by "center"...
btw, I guess I know what tönt means, we have a similar word/meaning in italian: tonto/a - male/female.
but you're not! ;-)

pernin / 2011-11-16 12:35:36   

Hi Piips,

I agree with Ricky here, it's coming along, and you are most definitely not a tönt: some things are more difficult than others and there is a learning curve, and what you are trying to do is not one of the most trivial things ;)

a bit difficult to see, as I can only see the results of php, but it seems you have been editing more in the plugin, because I see it's creating a class="content" within an id="content" which shouldn't exist: there should be a class="container". Look at it in firebug and you'll see -- web developer tools for firefox are very good also, as they let you mark the different 'boxes' (that's what div is, kind of a 'box') within one another, and see their relationships

some more hints:

If you check with firebug, you'll see also that this id="content" is floated to the left, and all the other 'boxes' are within it, which is why you can't move them to the center of the screen. These 'boxes' are, beginning with the outermost: content (id), container (should be class), hrz-container (id, what was the old img-container), hrz-container p (that's attributes for the p tag when within the hrz-container)

I think hrz-container is ok, the only problem being that it tries to get to the center but can't because it's squashing its nose against the right side of the content 'box'

god fortsättning ;)

ThePiips / 2011-11-17 13:51:55   

Hi, thank you both for your encouragement.. keeps me going when times get tough ;D

I see that the #content has a float; left, but I do not want to change this as I generally want my site to follow this rule, except for the 2 plugins which I am trying to modify.

I have only edited the bits in the plugins which you @pernin suggested earlier, changing img-container to hrz-container, (with the exception of copying the function dynamics from over_and_over.php to the cycle.php, as it previously did not have any).

Have tried to take in your advice, and subsequently tried changing the id=content / class=content issue to id=content / class=container, and even id=content / class=hrz-container (??).. but no magic fix. But if the hrz-container still follows the #content rule (i thought it would over ride it?) Can I create another big papa #content or #container, that only these two plugins would follow?

Quite a battle for me this little venture.. ;D

ThePiips / 2011-11-17 14:01:44   

Oh forgot, these plugins now in Scenography : Over Centered and Cycle Centered

http://www.paulinapiipponen.com/ThePiips/index.php?/project/over-centered/

http://www.paulinapiipponen.com/ThePiips/index.php?/project/the-structure--film/

pernin / 2011-11-17 15:13:24   

As I said, I don't know where that class="content" comes from, because it's not styled in the css, so nothing's happening there. You'd need to read a bit on the difference between class and id, and nested divs (w3schools link in previous post).

Does the float: left of the #content affect the other exhibitions? change it and see what happens. One change, test, revert, another change, test, revert, repeat the process as needed: that's the way to go and the only way to really know what's affecting what

if a tag's attribute has a good effect in one exhibition, but borks another, then you need to differentiate between the two: theis was the point of this thread, changing the name of img-container (to hrz-container in this case) so that you could have one style on img-container (your other exhibitions) and another style in hrz-container for this exhib

I haven't checked your page again, and won't be able to do much during the coming few days (out on a job, deadline...)

ThePiips / 2011-11-17 15:53:48   

Yes, sadly it stirs up my other exhibits, the devil.. Will definitively keep trying different things, I must hit the right cord eventually. Cheers Pernin, good luck with the work :D

itay / 2012-07-28 07:51:04   

hey,
my problem is:
i don't have that line anywhere:
#img-container p { width: 400px; margin: 0; padding: 0 0 5px 0; }

i wanted to do the same thing Iness did /:

This thread has been closed, thank you.