homepage Welcome to WebmasterWorld Guest from 54.205.247.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS positioning of images/ XHTML 1.1
Trisha




msg:1208783
 7:55 pm on Sep 26, 2002 (gmt 0)

I'm using CSS for positioning for a site I'm working on, and have run into a couple of somewhat minor problems. Both, as far as I can tell, have to do with a long, skinny image that runs down the left side of the pages.

I'm using a header with a two column layout. I use a float: left and float: right to position the column div's. (The CSS for both of those is included at the bottom of my post, if that helps). To position the image I used this:

img.img_dna{float: left;} - and it is also in the main/left div

I originally just had an align=left in the img tag, that worked ok, but if I understand XHTML 1.1 correctly it is not allowed.

The first problem is that when resizing a window (IE 5.5) to a small size, any additional images in the main/left column get moved down to below the long/skinny image, and the page ends up with a big empty space in it. Doesn't happen with align=left in img tag - horizontal scolls are created instead, which would be preferred in this case. Is it possible to keep this from happening? How else can I position the img other than with float:left? If I haven't explained this well I could put up a test page in my profile too, if that would help anyone to understand it better.

Second problem - in NN4.x, all the text in the main/left column gets moved below the long/skinny image. NN4.x is not a huge concern for this site, but since this is the only thing that doesn't work as good as I would like it to in this browser it would be nice to fix it if possible.

--------------------
CSS code:

Main (or left) column div is set up like this:
#main {
float: left;
padding-right:0px;
padding-left:0px;
margin-left: 0px;
margin-right:0px;
background: #fff;
border: 0px solid #000;
width: 70%;
}

the right column div like:
#right_column {
float: right;
padding: 0px;
margin-left: 0px;
margin-right:0px;
background: #fff;
border: 1px solid #369;
text-align:center;
width: 25%;
}

 

Nick_W




msg:1208784
 7:57 pm on Sep 26, 2002 (gmt 0)

Have you tried placing the image as a backgroun-image?

Nick

Trisha




msg:1208785
 8:13 pm on Sep 26, 2002 (gmt 0)

No, I haven't. I have never used a background image with CSS yet. How does it work? If it is in the same div as the main page text, will the text be written over it?

I just tested it again using both ways of positioning the long/skinny image in Opera 6.03. Both ways work how I would want it to, like the align=left in the img tag in IE 5.5. Of course, most people coming to the site won't be using Opera!

Another thing I could do is to make sure that any extra images are far enough down page so that they are already past the long/skinny image.

I should also mention that in many case the extra images on the pages will actually be small flash animations. I don't think that should make any difference though.

madcat




msg:1208786
 8:28 pm on Sep 26, 2002 (gmt 0)

No, I haven't. I have never used a background image with CSS yet. How does it work?

Basically, to try it out all you need is to apply one rule:

#main {
float: left;
padding-right:0px;
padding-left:0px;
margin-left: 0px;
margin-right:0px;
background: #fff url(img_dna.gif) no-repeat top left;
border: 0px solid #000;
width: 70%;
}

The position can be any pair combo of top, right, bottom and center in no particular order.

You can also replace no-repeat with repeat-y or repeat-x.

[edited by: madcat at 8:30 pm (utc) on Sep. 26, 2002]

Nick_W




msg:1208787
 8:30 pm on Sep 26, 2002 (gmt 0)

If it is in the same div as the main page text, will the text be written over it?

Yes, just make sure you give the text a margin that covers the bg img...

Nick

Trisha




msg:1208788
 1:31 am on Sep 27, 2002 (gmt 0)

Thanks Nick and madcat! I think using the background image will work.

Seems to work in NN4.x better too, although it still does some weird things to it. On some pages the right column stuff appears on the bottom, and the bottom text nav., (which is not in a separate div) appears in the right column instead. It also tries to use that image as a background in every cell of a table that is on one page of the site. It does good enough though.

Thanks again!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved