PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » General Web Design

Basic question about alignment

(7 posts) (2 voices)

Started 2 years ago by Cybergooch
Latest reply from Cybergooch

Cybergooch

offline
Member

I have a page I'm working on that's using Tree Menu Magic on the left side of the page with a fixed width in the css.
On the right side, directly next to the Menu, I'm using a scalable image.

The problem is I'm not sure what the setting should be. I want the image to be 100% in scale, and only scale down if the user scales down the window.
Right now I have:

.main-content {
float: left;
width: 80%;

but because of the float left, it tries to put itself under the menu instead of to the right of it.
What would be the best way to ensure the image in the main content area always stays to the right of the menu?

Posted 2 years ago
Sinclair

offline
Member

If you could post an url to a page, that would help folks diagnose and come up with a possible remedy.

Posted 2 years ago
Cybergooch

offline
Member

If you could post an url to a page, that would help folks diagnose and come up with a possible remedy.

Thanks for the reply.

Here's the page: http://cybergooch.com/pages/maxon/noise/index.html

It looks fine at the start with the image just to the right of the menu.
But as you scale down the width of the browser window, the image jumps *below* the menu which I don't want.

Posted 2 years ago
Sinclair

offline
Member

Ah, this is a float based pbm layout and not easily configured for a px and % split, is there some reason you don't want to use % for the left/both column/s? As far as I remember pbm doesn't offer a page layout with that kind of split, I'd choose a layout with percentages if I were you.

Also, your chosen pbm layout is somewhat compromised, you are missing the sidebar's content div which, if I remember correctly, is a basic component in pbm layout structures.

My tuppence worth

Posted 2 years ago
Sinclair

offline
Member

So, this was bugging me, less hassle than I thought initially!

http://www.petitesites.co.uk/pbm/layout03.html

This is a pbm 03 layout, create a new one, in code view, find this.....

<ul class="menuside">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>

Delete that, and in it's place, in the space where the ul was, insert your Tree Menu Magic, put your image in place and apply a scalable class to it.

The CSS has been altered to use display-table on the columns-wrapper div and table-cell on the main-content and sidebar divs, the main content div has no width declared, the sidebar div has a width of 225px declared. There are some other edits based upon what I saw in the site in your profile, just a thought that maybe that's where you were headed with this.

Note: it may render in DW dsign view a bit funky but should be good online and 'live' view from within DW, you'd get used to that hopefully.

Here's the modified CSS for this layout if you want/need.....

http://www.petitesites.co.uk/pbm/p7csspbm2/p7csspbm2_03.css

You could just paste the whole thing over your equivalent CSS file!

HTH

Posted 2 years ago
Cybergooch

offline
Member

So, this was bugging me, less hassle than I thought initially!
http://www.petitesites.co.uk/pbm/layout03.html
This is a pbm 03 layout, create a new one, in code view, find this.....
<ul class="menuside"> 
<li><a href="#">Menu Item</a></li> 
<li><a href="#">Menu Item</a></li> 
<li><a href="#">Menu Item</a></li> 
<li><a href="#">Menu Item</a></li> 
</ul>
Delete that, and in it's place, in the space where the ul was, insert your Tree Menu Magic, put your image in place and apply a scalable class to it.
The CSS has been altered to use display-table on the columns-wrapper div and table-cell on the main-content and sidebar divs, the main content div has no width declared, the sidebar div has a width of 225px declared. There are some other edits based upon what I saw in the site in your profile, just a thought that maybe that's where you were headed with this.
Note: it may render in DW dsign view a bit funky but should be good online and 'live' view from within DW, you'd get used to that hopefully.
Here's the modified CSS for this layout if you want/need.....
http://www.petitesites.co.uk/pbm/p7csspbm2/p7csspbm2_03.css
You could just paste the whole thing over your equivalent CSS file!
HTH

Hey, thanks so much! I will take a look at this and see if I can get it working.

Posted 2 years ago
Cybergooch

offline
Member

Hi, just wanted to follow up and say this looks like it will work great!
Thanks for taking the time to help me out with that.

Posted 2 years ago

PVII Forums » General Web Design

RSS feed for this topic

Reply

You must log in to post.