Hi,
[color=blue]
> Hopefully someone else here can now point out how to merge these
> sidebar sections into just one section...[/color]
You could wrap all of them in a container <div>, as I had previously
mentioned, but...
[color=blue][color=green]
>>You
>>could have a containing sidebar <div> that houses all you other sidebars.[/color]
>
> The problem with this is that different sidebar sections have
> different colours and styles. Not to mention that they can be put
> together and mixed around as I desire.[/color]
Wrapping them in a container wouldn't affect that at all. All the individual
<div>'s would still keep their styles.
See your code below for my modification. I haven't tested it myself, though
(sorry, no time right now). But, basically, I removed all the clears and
floats from the other sidebars and added it to the container div. So you
would add to your sidebars:
div.sidebar_container { (or whatever name you want to use)
width: 23ex;
float: left;
}
Then this would be your html:
<div class="sidebar_container">
<div class="sidebar"></div>
<div class="sidebar1"></div>
</div>
[color=blue]
> DIV.sidebar
> {
> PADDING-RIGHT: 0px;
> PADDING-LEFT: 0px;
> FONT-SIZE: 100%;
> MARGIN-BOTTOM: 1em;
> PADDING-BOTTOM: 0px;
> WIDTH: 21.5ex;
> COLOR: #000000;
> PADDING-TOP: 0px;
> BACKGROUND-COLOR: #ffffff
> }
>
> DIV.sidebar2
> {
> PADDING-RIGHT: 0px;
> PADDING-LEFT: 0px;
> FONT-SIZE: 100%;
> MARGIN-BOTTOM: 1em;
> PADDING-BOTTOM: 0px;
> WIDTH: 21.5ex;
> COLOR: #ffff00;
> PADDING-TOP: 0px;
> BACKGROUND-COLOR: #222222;
> TEXT-ALIGN: center
> }
>
> DIV.sidebar3
> {
> PADDING-RIGHT: 0px;
> PADDING-LEFT: 0px;
> FONT-SIZE: 100%;
> MARGIN-BOTTOM: 1em;
> PADDING-BOTTOM: 0px;
> WIDTH: 21.5ex;
> COLOR: #000000;
> PADDING-TOP: 0px;
> BACKGROUND-COLOR: #2222ff;
> TEXT-ALIGN: center
> }
>
> DIV.sidebar4
> {
> PADDING-RIGHT: 0px;
> PADDING-LEFT: 0px;
> FONT-SIZE: 100%;
> BORDER-RIGHT: #ff0000 1px solid;
> BORDER-LEFT: #ff0000 1px solid;
> BORDER-TOP: #ff0000 18px solid;
> BORDER-BOTTOM: #ff0000 18px solid;
> PADDING-BOTTOM: 0px;
> MARGIN-BOTTOM: 1em;
> WIDTH: 21.5ex;
> COLOR: #000000;
> PADDING-TOP: 0px;
> BACKGROUND-COLOR: #ffff00;
> TEXT-ALIGN: center;
> }
>
> DIV.sidebar5
> {
> FONT-SIZE: 100%;
> PADDING-RIGHT: 0px;
> PADDING-LEFT: 0px;
> PADDING-BOTTOM: 0px;
> MARGIN-BOTTOM: 0.7em;
> WIDTH: 21.5ex;
> COLOR: #000000;
> PADDING-TOP: 0px;
> BACKGROUND-COLOR: #00ff00;
> TEXT-ALIGN: center
> }[/color]
--
Viken K.
http://home.comcast.net/~vikenk
"Cardman" <do-not@spam-me.com> wrote in message
news:oa0402123fjj2lngclljlm5lee135fs6bf@4ax.com...[color=blue]
> On Sun, 26 Feb 2006 09:50:27 -0500, "Viken Karaguesian"
> <vikenkNO_SPAM@NO_SPAMcomcast.net> wrote:
>[color=green]
>>Hi,
>>[color=darkred]
>>> In MIE this page looks perfect. Unfortunately both Netscape and Opera
>>> show these item photos in the wrong place. For some *unknown* reason
>>> all the photos drop down to align with the green "Don't forget to
>>> include Postage and VAT" box in the left hand column.[/color]
>>
>>It seems to me that the problem is that the sidebar <div>s (in your
>>menu.css
>>sheet) all have clear:both in them. That would not allow any floating
>>elements on either side of the <div>, forcing anything else with a float
>>to
>>go below them. Since your images all have "align: left", they are forced
>>below the last <div> with a clear: both command, which is the "Postage and
>>VAT" div.[/color]
>
> I agree. I have been doing some testing today and the photo image
> alignment is going wrong due to the sidebars.
>
> On this mentioned page the sidebar is made up into 5 sections...
>
> 1. The main menu.
> 2. The language bar.
> 3. The bookmarking section.
> 4. The main address.
> 5. The postage and VAT section.
>
> From my testing if only the main menu is used, and the following four
> sidebar sections are removed, then the main content photos align
> correctly. It seems that you are closer to me in working out why this
> is.
>[color=green][color=darkred]
>>> So I admit that trying to do photo alignment under HTML (align=left)
>>> was a bad idea. My problem is that the guy who showed me how much
>>> better my site would look under the CSS stylesheet missed out showing
>>> me the CSS code to correctly align these item photos.[/color]
>>
>>CSS code: style="float: left";[/color]
>
> Yes, it seems to do that fine when put under CSS. However, since I can
> now get this photo alignment working fine without the CSS code, then I
> am currently wondering if it is worth the extra code?
>[color=green][color=darkred]
>>> This tells me that there is some odd CSS pointer that is saying that
>>> any CSS stuff is to be vertically aligned from here......
>>> .......I think in all this tells me that there is a fault in the
>>> original
>>> CSS
>>> code that simply did not take into account that there would be item
>>> photos left aligned to the text in this second column.[/color]
>>
>>clear:both[/color]
>
> That is what patches these 5 sidebar sections together. Just a shame
> that the image placement is left out of place once it is complete.
>[color=green]
>>The problem with removing the clear:both, is that all your sidebar <div>s
>>will start to float up and stack side by side,[/color]
>
> Yes, I have seen that done when removing that clear:both line.
>
> This explains why the photo images are now trying to align in the next
> column next to this last sidebar DIV.
>[color=green]
>>I think (which is probabaly why you have clear:both in there).[/color]
>
> Correct.
>
> This code was passed to me from a CSS expert. So I have been trying
> for ages to work out why my code is failing to work correctly under
> his code. And I thought that it was my fault...
>[color=green]
>>I'm not sure what the solution is.[/color]
>
> Then I sure hope that someone here does.
>[/color]
[color=blue]
>
> For example my welcome page contains a 6th sidebar section, concerning
> payment options, that is placed in the middle and not seen in that
> Smart Switches page.
>
> So my main aim is now to replace this CSS sidebar code with some
> suitable code to do this same thing without messing up the following
> photo image alignment.
>
> My answer for now would be to simply "remove" the following 4 sidebars
> on these item pages. Losing information like my address would be very
> unhelpful though.
>[color=green]
>>Then you could float:left that one big containing sidebar and not have to
>>set clear: both.[/color]
>
> That would be nice. The only problem now is to work in some sub
> sections for different styles.
>[color=green]
>>If you set the containing sidebar to a fixed with that's
>>just wide enough to accomodate the smaller sidebar widths (plus any
>>padding
>>and margin) they would, in theory, stack top-to-bottom and you wouldn't
>>have
>>to float them left. It's just a thought.[/color]
>
> I am not so sure about that. The photo images always align next to the
> last sidebar section placed in the code. So by placing these on top of
> one larger sidebar would still (in theory) have the photos pile up
> next to the last sidebar section placed down.
>
> Unless there some pointer override command then the only answer is to
> just have one sidebar DIV section. It is possible to replicate these
> styles using tables, but that is what I am trying to move away from.
>
> It may be possible to place them down using different code without
> affecting the image alignment, but I would need to do quite a lot of
> testing in order to "get lucky" in terms of finding out what that
> exact code is.
>[color=green]
>>I am not a design expert though. :>) As far as the problem with the
>>pictures goes, I believe that it's because of the clear:both property of
>>your sidebar <div>s.[/color]
>
> Testing has proved you correct. I did spot that these was a problem
> here myself not too long ago, but you did point out what was going
> wrong.
>
> Now it is all about figuring out a solution.
>[color=green]
>>Hope this helps a bit.[/color]
>
> Thanks for your help. I was wondering it anyone was brave enough to
> step though this code trying to find an unknown cause.
>
>
> Cardman
>
http://www.cardman.org
>
http://www.cardman.com
>
http://www.cardman.co.uk[/color]
