can't get divs right when modifying themes

Mallycat

Joined: 2012-05-11
Posts: 14

Posted: Sat, 2012-08-04 02:14

Hi. I am trying to modify the clean canvas theme for a friends website. I have made good progress but am now stuck (again).

as you can see by this link, the sidebar on the right is in clear space, away from the photos http://grab.by/f9OG However this is a false sense of security - I think it is laid out properly only because the fixed width theme can't fit 4 images wide. If it did, it would be a problem.

As you can see on this second screen shot, the sidebar gets in the way of my image. http://grab.by/f9OE I am using Firefox inspectors and as you can see, it looks to me like div .yui-b needs to be narrower. I have looked at the CSS and have found that .yui-b has a margin-right: 210px; in 2 places. I changed both of these to 400px, but that didn't help. Now I am out of ideas. Can anyone help?

http://boroniaparkframing.com.au/shop/index.php/Landscape-Photos/balmoral-Beach-2

I have one more problem, but I will try to solve this one first

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Sat, 2012-08-04 04:00

I think I understand what you are after.
In you css you have

#g-sidebar {
  padding: 10px 10px;
  width: 220px;
}

Adjust the 220. You might have to put !important after the x before the ;

Dave

____________________________________________
Blog & G2 || floridave - Gallery Team

Mallycat

Joined: 2012-05-11
Posts: 14

Posted: Sat, 2012-08-04 05:17

I actually want to keep the side bar the same width. I would be happy with one of two options. Either make the side bar float further to the right, so the single images are not obscured. Or make the div that holds the single images narrower so that the side bar does not sit on top of them.

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Sat, 2012-08-04 05:52

Quote:

Either make the side bar float further to the right,

it can't float further to the right as it is as far as it can go with the fixed width you have.

Quote:

Or make the div that holds the single images narrower so that the side bar does not sit on top of them.

Then you need to make the resize image a bit smaller or move the image slightly to the left by giving some right margin:

#g-item #g-photo,
#g-item #g-movie {
  padding: 2.2em 0;
  position: relative;
margin-right: 50px;
}

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

Mallycat

Joined: 2012-05-11
Posts: 14

Posted: Mon, 2012-08-06 07:31

Dave

Thanks for offering your help here. I have tried to do what you suggest but couldn't get it to work. As I mentioned in the OP, I would be happy if the sidebar could float to the right. I have changed some of the css some time ago to align it, but I now have this un-intended consequence. As you can see from this screen shot, it definitely can float right.

http://gallery.menalto.com/files/screenshot_26.jpg

Just not sure how to put it back the way it was.

From what I can see, this sidebar is controlled with EDIT [#g-sidebar]. There are soooo many repetitive settings I don't know where to start.

Hope you can still help.

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Mon, 2012-08-06 17:56

Quote:

I would be happy if the sidebar could float to the right.

it is right. Do you mean farther right than it is now? like not overlaying the main content?
In the css find

/** *******************************************************************
 * 1) Font sizes, base HTML elements
 **********************************************************************/

#g-sidebar{
  left: 40px;
}

and adjust the 40 to a larger number.

Then since the designer of the them is using YUI grids you will need to make room for more content of the .yui-b
look for:

.yui-t5 #yui-main .yui-b
{
  margin-right: 210px;
}

And change the 210 to a smaller # as that was used to accommodate the sidebar.

All I am doing is using the FF web browser with the firebug dev tool to make live css edits. You should as well.

you should read up on Yui grids as well: http://developer.yahoo.com/yui/grids/ try the examples on the right.

Dave

_____________________________________________
Blog & G2 || floridave - Gallery Team

Mallycat

Joined: 2012-05-11
Posts: 14

Posted: Tue, 2012-08-07 04:37

Thanks again for your help. I will look into these things. REgarding the "float to the right" point, the best I can do to explain is to refer back to the link above http://gallery.menalto.com/files/screenshot_26.jpg As you can see, the side bar hangs to the right of the main div. This will solve my problem, because the side bar currently covers 3-4 of the screens. I must have made a change to prevent it hanging to the right, and that has had these negative consequences.

I will research the information you have posted above.

chaosdax

Joined: 2005-12-27
Posts: 37

Posted: Mon, 2012-08-27 04:08

I was able to eliminate the sidebar using the change and changed the margin-right to 2. However, it is still leaving a large amount of empty space where the sidebar used to be. Any way around that or maybe just be center the images so it doesn't look as out of place?

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Mon, 2012-08-27 05:13

Got a url to show the behavior?

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

Mallycat

Joined: 2012-05-11
Posts: 14

Posted: Thu, 2012-08-30 05:11

Thanks for the ongoing comments. When I started this project with Gallery 3, the owner had an HTML website. I have since migrated him to full Wordpress CMS. Given the challenges I am having with this issue, I have decided to pursue Wordpress plug ins and migrate the entire site to WP. That is my current plan.

Thanks for all the help.

Matt

Mallycat Joined: 2012-05-11 Posts: 14	Posted: Sat, 2012-08-04 02:14
	Hi. I am trying to modify the clean canvas theme for a friends website. I have made good progress but am now stuck (again). as you can see by this link, the sidebar on the right is in clear space, away from the photos http://grab.by/f9OG However this is a false sense of security - I think it is laid out properly only because the fixed width theme can't fit 4 images wide. If it did, it would be a problem. As you can see on this second screen shot, the sidebar gets in the way of my image. http://grab.by/f9OE I am using Firefox inspectors and as you can see, it looks to me like div .yui-b needs to be narrower. I have looked at the CSS and have found that .yui-b has a margin-right: 210px; in 2 places. I changed both of these to 400px, but that didn't help. Now I am out of ideas. Can anyone help? http://boroniaparkframing.com.au/shop/index.php/Landscape-Photos/balmoral-Beach-2 I have one more problem, but I will try to solve this one first
	XUser login Username: * Password: * Create new account Request new password
floridave Joined: 2003-12-22 Posts: 27300	Posted: Sat, 2012-08-04 04:00
	I think I understand what you are after. In you css you have #g-sidebar { padding: 10px 10px; width: 220px; } Adjust the 220. You might have to put !important after the x before the ; Dave ____________________________________________ Blog & G2 \|\| floridave - Gallery Team

Mallycat Joined: 2012-05-11 Posts: 14	Posted: Sat, 2012-08-04 05:17
	I actually want to keep the side bar the same width. I would be happy with one of two options. Either make the side bar float further to the right, so the single images are not obscured. Or make the div that holds the single images narrower so that the side bar does not sit on top of them.

floridave Joined: 2003-12-22 Posts: 27300	Posted: Sat, 2012-08-04 05:52
	Quote: Either make the side bar float further to the right, it can't float further to the right as it is as far as it can go with the fixed width you have. Quote: Or make the div that holds the single images narrower so that the side bar does not sit on top of them. Then you need to make the resize image a bit smaller or move the image slightly to the left by giving some right margin: #g-item #g-photo, #g-item #g-movie { padding: 2.2em 0; position: relative; margin-right: 50px; } Dave _____________________________________________ Blog & G2 \|\| floridave - Gallery Team

Mallycat Joined: 2012-05-11 Posts: 14	Posted: Mon, 2012-08-06 07:31
	Dave Thanks for offering your help here. I have tried to do what you suggest but couldn't get it to work. As I mentioned in the OP, I would be happy if the sidebar could float to the right. I have changed some of the css some time ago to align it, but I now have this un-intended consequence. As you can see from this screen shot, it definitely can float right. http://gallery.menalto.com/files/screenshot_26.jpg Just not sure how to put it back the way it was. From what I can see, this sidebar is controlled with EDIT [#g-sidebar]. There are soooo many repetitive settings I don't know where to start. Hope you can still help.

floridave Joined: 2003-12-22 Posts: 27300	Posted: Mon, 2012-08-06 17:56
	Quote: I would be happy if the sidebar could float to the right. it is right. Do you mean farther right than it is now? like not overlaying the main content? In the css find / ***************************************************************** * 1) Font sizes, base HTML elements **********************************************************************/ #g-sidebar{ left: 40px; } and adjust the 40 to a larger number. Then since the designer of the them is using YUI grids you will need to make room for more content of the .yui-b look for: .yui-t5 #yui-main .yui-b { margin-right: 210px; } And change the 210 to a smaller # as that was used to accommodate the sidebar. All I am doing is using the FF web browser with the firebug dev tool to make live css edits. You should as well. you should read up on Yui grids as well: http://developer.yahoo.com/yui/grids/ try the examples on the right. Dave _____________________________________________ Blog & G2 \|\| floridave - Gallery Team

Mallycat Joined: 2012-05-11 Posts: 14	Posted: Tue, 2012-08-07 04:37
	Thanks again for your help. I will look into these things. REgarding the "float to the right" point, the best I can do to explain is to refer back to the link above http://gallery.menalto.com/files/screenshot_26.jpg As you can see, the side bar hangs to the right of the main div. This will solve my problem, because the side bar currently covers 3-4 of the screens. I must have made a change to prevent it hanging to the right, and that has had these negative consequences. I will research the information you have posted above.

chaosdax Joined: 2005-12-27 Posts: 37	Posted: Mon, 2012-08-27 04:08
	I was able to eliminate the sidebar using the change and changed the margin-right to 2. However, it is still leaving a large amount of empty space where the sidebar used to be. Any way around that or maybe just be center the images so it doesn't look as out of place?

floridave Joined: 2003-12-22 Posts: 27300	Posted: Mon, 2012-08-27 05:13
	Got a url to show the behavior? Dave _____________________________________________ Blog & G2 \|\| floridave - Gallery Team

Mallycat Joined: 2012-05-11 Posts: 14	Posted: Thu, 2012-08-30 05:11
	Thanks for the ongoing comments. When I started this project with Gallery 3, the owner had an HTML website. I have since migrated him to full Wordpress CMS. Given the challenges I am having with this issue, I have decided to pursue Wordpress plug ins and migrate the entire site to WP. That is my current plan. Thanks for all the help. Matt

can't get divs right when modifying themes

XUser login