Image Alignment Issue

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Cardman - 26 Feb 2006 01:42 GMT

I am hopeful that someone can quickly solve my image alignment issue
when things are just not going right and where my attempts to solve
this alignment issue have all failed.

First of all take a look here...
http://www.cardman.com/switches.html

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.

This causes the odd effect that any photo above this green box drops
down to below the green box, but any photo that is below this section
is aligned correctly.

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. And since I am
quite new at stylesheets, even after browsing the CSS specification,
then I am currently at a loss on how to correctly align these photos
under CSS.

Well beyond trapping the whole section in a table in an undesirable
dirty fix solution.

My most recent testing has successfully moved the whole item block to
being controlled under CSS. Only problem now is that the problem has
got somewhat worse. As when I define a nice window to dump this item
block in, including an IMG section to control photo placement, then
now the whole damned block (photo and text) drops down below that same
green box.

This tells me that there is some odd CSS pointer that is saying that
any CSS stuff is to be vertically aligned from here. The problem then
is that when the second column was started this pointer did not reset
back to zero.

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.

So since I am now flapping about helplessly and about to go belly-up,
in some fear of pulling apart this original CSS code, then so do I
hope that someone with some actual CSS experience can point out how I
can get these damned photos to appear in the right place.

My prior thanks of course.

Cardman
http://www.cardman.org
http://www.cardman.com
http://www.cardman.co.uk

Reply to this Message

Viken Karaguesian - 26 Feb 2006 14:50 GMT

Hi,

> 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.

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.

> 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.

CSS code: style="float: left";

> 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.

clear:both

The problem with removing the clear:both, is that all your sidebar <div>s
will start to float up and stack side by side, I think (which is probabaly
why you have clear:both in there). I'm not sure what the solution is. You
could have a containing sidebar <div> that houses all you other sidebars.
Then you could float:left that one big containing sidebar and not have to
set clear: both. 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.

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.

Hope this helps a bit.

Viken K.
http://home.comcast.net/~vikenk

Reply to this Message

Cardman - 26 Feb 2006 20:18 GMT

>Hi,
>
[quoted text clipped - 9 lines]
>below the last <div> with a clear: both command, which is the "Postage and
>VAT" div.

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.

>> 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.
>
>CSS code: style="float: left";

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?

>> This tells me that there is some odd CSS pointer that is saying that
>> any CSS stuff is to be vertically aligned from here......
[quoted text clipped - 4 lines]
>
>clear:both

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.

>The problem with removing the clear:both, is that all your sidebar <div>s
>will start to float up and stack side by side,

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.

>I think (which is probabaly why you have clear:both in there).

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...

>I'm not sure what the solution is.

Then I sure hope that someone here does.

>You
>could have a containing sidebar <div> that houses all you other sidebars.

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.

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.

>Then you could float:left that one big containing sidebar and not have to
>set clear: both.

That would be nice. The only problem now is to work in some sub
sections for different styles.

>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.

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.

>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.

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.

>Hope this helps a bit.

Thanks for your help. I was wondering it anyone was brave enough to
step though this code trying to find an unknown cause.

Hopefully someone else here can now point out how to merge these
sidebar sections into just one section...

DIV.sidebar
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffffff
}

DIV.sidebar2
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #ffff00;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #222222;
TEXT-ALIGN: center
}

DIV.sidebar3
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #2222ff;
TEXT-ALIGN: center
}

DIV.sidebar4
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
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
{
CLEAR: both;
FONT-SIZE: 100%;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
FLOAT: left;
MARGIN-BOTTOM: 0.7em;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #00ff00;
TEXT-ALIGN: center
}

Cardman
http://www.cardman.org
http://www.cardman.com
http://www.cardman.co.uk

Reply to this Message

Viken Karaguesian - 26 Feb 2006 23:05 GMT

Hi,

> Hopefully someone else here can now point out how to merge these
> sidebar sections into just one section...

You could wrap all of them in a container <div>, as I had previously
mentioned, but...

>>You
>>could have a containing sidebar <div> that houses all you other sidebars.
>
> 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.

> DIV.sidebar
> {
[quoted text clipped - 68 lines]
> TEXT-ALIGN: center
> }

Signature

Viken K.
http://home.comcast.net/~vikenk

>>Hi,
>>
[quoted text clipped - 71 lines]
>
> Then I sure hope that someone here does.

> For example my welcome page contains a 6th sidebar section, concerning
> payment options, that is placed in the middle and not seen in that
[quoted text clipped - 54 lines]
> http://www.cardman.com
> http://www.cardman.co.uk

Reply to this Message

Viken Karaguesian - 26 Feb 2006 23:05 GMT

Signature

Viken K.
http://home.comcast.net/~vikenk

>>Hi,
>>
[quoted text clipped - 223 lines]
> http://www.cardman.com
> http://www.cardman.co.uk

Reply to this Message

Viken Karaguesian - 26 Feb 2006 23:10 GMT

Hi,

SORRY. MY LAST POST GOT SENT BY MISTAKE.

> Hopefully someone else here can now point out how to merge these
> sidebar sections into just one section...

You could wrap all of them in a container <div>, as I had previously
mentioned, but...

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; <-- to match the width of the other <div>'s
float: left;
}

Then this would be your html:

<div class="sidebar_container">
<div class="sidebar"></div>
<div class="sidebar1"></div>
<div class="sidebar2"></div>
<div class="sidebar3"></div>
<div class="sidebar4"></div>
<div class="sidebar5"></div>
</div>

That should contain them without having to use clear:both, and they would
still retain their individual styles.

> DIV.sidebar
> {
[quoted text clipped - 68 lines]
> TEXT-ALIGN: center
> }

Signature

Viken K.
http://home.comcast.net/~vikenk

Reply to this Message

Cardman - 27 Feb 2006 00:49 GMT

>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
[quoted text clipped - 3 lines]
>div.sidebar_container { (or whatever name you want to use)
>width: 23ex; <-- to match the width of the other <div>'s

That would be 21.5ex. The main page content starts at 22ex allowing
for a 0.5ex gap.

>float: left;
>}
[quoted text clipped - 12 lines]
>That should contain them without having to use clear:both, and they would
>still retain their individual styles.

Well I am pleased to say that this solution you provided did work. You
can see the final version here...
http://www.cardman.com/switches.html

So now I can go on to complete the rest of this site change-over in
order to make all pages use the CSS stylesheet.

This reminds me. Does anyone know of a WYSIWYG editor that can display
my site pages in the same way that they appear?

Long ago I used to use AOLPress but over time this application became
less and less compatible with all the different possibilities. So at
this time I have to do all my HTML editing in notepad.

Anyway, thanks for your help, when this no doubt saved me a couple of
weeks worth of work achieving this same solution.

Cardman
http://www.cardman.org
http://www.cardman.com
http://www.cardman.co.uk

Reply to this Message

Viken Karaguesian - 27 Feb 2006 02:25 GMT

>>div.sidebar_container { (or whatever name you want to use)
>>width: 23ex; <-- to match the width of the other <div>'s
>
> That would be 21.5ex. The main page content starts at 22ex allowing
> for a 0.5ex gap.

Yeah...I was adding some space to accomodate any padding/margins/borders.

> Well I am pleased to say that this solution you provided did work. You
> can see the final version here...
> http://www.cardman.com/switches.html

I glad to be able to help. I'm still in the learning stages myself. I find
that helping other people and working on debugging their problems helps me
learn as well.

> This reminds me. Does anyone know of a WYSIWYG editor that can display
> my site pages in the same way that they appear?

WSYWYG by its self will not generate a webpage better than you can. I use
Microsoft Frontpage, but I haven't touched the WSYWYG function in it in a
long time. I basically use it as a text editor. It has a very good "code
only" section where you simply type code. Contrary to how it may seem, once
you know what you're doing, it's actually *faster* to type code as opposed
to moving the mouse around and choosing options from menus, etc in WSYWYG
mode.

Signature

Viken K.
http://home.comcast.net/~vikenk

Reply to this Message

Cardman - 27 Feb 2006 03:08 GMT

>>>div.sidebar_container { (or whatever name you want to use)
>>>width: 23ex; <-- to match the width of the other <div>'s
[quoted text clipped - 3 lines]
>
>Yeah...I was adding some space to accomodate any padding/margins/borders.

I think my site is quite basic compared to some I have seen. All home
coded and where one day maybe I will figure out how to home code a
shopping basket system as well.

>> Well I am pleased to say that this solution you provided did work. You
>> can see the final version here...
[quoted text clipped - 3 lines]
>that helping other people and working on debugging their problems helps me
>learn as well.

I am a professional computer programmer with over 30 qualifications in
this subject. Doing long projects was nice in the past, but due to
current time constraints I just have to quickly patch together a
workable system.

>> This reminds me. Does anyone know of a WYSIWYG editor that can display
>> my site pages in the same way that they appear?
>
>WSYWYG by its self will not generate a webpage better than you can.

AOLPress even has a spell checker. :-]

That I guess is the main reason why I currently write my News page in
AOLPress before copying it over to the on-line CSS stylesheet version.

>I use
>Microsoft Frontpage, but I haven't touched the WSYWYG function in it in a
>long time. I basically use it as a text editor.

Hmmm. Viva la notepad then.

>It has a very good "code
>only" section where you simply type code. Contrary to how it may seem, once
>you know what you're doing, it's actually *faster* to type code as opposed
>to moving the mouse around and choosing options from menus, etc in WSYWYG
>mode.

Overlooking tag mistakes. The one thing that is certainly true is that
the code is cleaner and better organized.

Anyway, I had better go do my taxes. Thanks again.

Cardman
http://www.cardman.org
http://www.cardman.com
http://www.cardman.co.uk

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / February 2006

Image Alignment Issue