css image positioning question

I'm trying to be a good forward-thinking web designer and am giving the xhtml/css design thing a try with the site I'm currently building. The challenge is to do the whole layout without using a table, but I'm having a hell of a time.

You can see the site now at: http://epoch.pursuedbybear.com - currently, I've got the header and footer table-free, but it's the main content area that's giving me trouble. It's using a table right now, since that's so easy, but I'd like to fix that.

Here's what I want: the page is 750 pixels wide, centered. I would like the text to be on the left taking up about 400 pixels, with the margins it currently has. I would like the image to be on the right, aligned to the very edge of the header and just underneath it - no gaps. I would like a 1px black border on the left and right.

I can ALMOST get there with CSS, but everything I've tried has put the image slightly off (typically not flush against the header or after the text entirely). - you can see my latest efforts at http://epoch.pursuedbybear.com/page2.shtml.

Can anyone offer advice on this? I feel so close, but so infuriatingly far...

Thanks,
Daniel

It is quite simple, once you know how.

CSS is quite powerful but you have to get used to THINK differently [so said Steve Jobs ].

Positioning images:
float is your friend here. Let the text float on the left side but then you enter image before the text.

Don't put the image in a div [<div id="mainimage">]

However, I would not even bother with float. I would have put the image in the background of the 'div', and positioned it on the top right. Then I would have used 'padding' to stop the text from running over the image.

Border would be easy. I should not have to tell you how to assign left right borders to any block element.

I noticed that not only that you used tables, you have nested tables. Nested tables are a big no-no for advanced web designer.

So the layout would be:



Just a quick few words.

Have fun

Thanks for your help - it works well.

So that got rid of one table. I'd like to get rid of the other one as well, if possible...but I don't know how.

it's almost like a bulleted list, but the images are different for each line. the images should be right-aligned, and the text left-aligned, with a bit of space between them.

You can see what I mean at the current page: http://epoch.pursuedbybear.com - here I'm cheating by using a table. I'd like it to look exactly like this, only without the table.

Any suggestions?
-D

The idea was to LEARN from my notes not to copy them.

You have copied one of the options without learning the concept. This way, you would need to get help for each and every element in your design.

I am going to give you the idea, BUT..... you have to get a good dose of RTFM.



Another way is to use the list as you mentioned.

Start reading the CSS manual and experiment.

Good luck

hi there
here's one suggestion.

replace the complete table with this div-statements


further add to your css-file
so in mozilla browswer it looks like the file attached.
hope i could help. if you had another idea please post it here.
be good,
tigercat

I don't know why people automatically assume TABLE-less design when you say XHTML/CSS . XHTML just means stricter HTML and CSS is supposed to separate style from content (yes I said style not positioning). TABLEs STILL have their use. CSS still can't do somethings as well as a good ol' TABLE and you're still going through the same hacks just to get it working in different browsers. I do agree that XHTML/CSS is a good step towards an actual standard for browsers, but XHTML/CSS does not AUTOMATICALLY mean TABLE-less design.

Wasn't that what I had just said?

I intentionally did not provide the final entries so that the deolmstead would get the chance to read CSS and learn something.

Sometimes providing the final answer is not useful. As per my first post, after providing the final answer, I noticed that deolmstead only copied the answer and did not learn from it therefore the next question which is basically the same as first, aligning block-level elements with the use of float.


Good luck

Clan: I've got 'em. I read 'em. They still don't make much sense to me. I've been wrestling with "Eric Meyer on CSS" for a few days now, but it seems like he skips over the really basic stuff for the complex concepts, leaving me to wrestle with things I KNOW should be really simple. It is, as you said, learning to "think" differently.

And I agree with the post about table-less design: I'm not doing this because I think I SHOULD, I'm doing this to see if I CAN - hopefully eventually achieving fluency in both methods.

So rest assured I'm TRYING to learn. I think I've got the typography stuff down, it's the images that are throwing me for a loop.

Thanks, guys. I promise I won't come here for you to tell me how to do every element of my sites.

Best,
-Daniel

AFA manual, I only check the source:
http://www.w3.org/TR/1999/REC-CSS1-19990111

It should take a few hours to read it all. I still do [I did it an hour ago] check with above.

Learning to think differently IS the key.

Tables are meant for tabular data. In tables, each box is an individual item.

In table-less design, each item is a LAYER so in a div you have the background layer, the border, then another layer with text etc.

As a general concept, there is place for tables in web design and there is a place for other elements.

Problem is that everybody, myself included, started with using tables as a layout tool rather as a data display tool.

There are occasion that what is desired is not possible to achieve without the use of tables.
But there are many instances that a table is not needed. In general I would say 70% table usage in the net is not needed.

What is the big deal, display does suffer. If you have an entire page in a table, especially for a large and content intensive page, it would take longer for the page to load as the entire page has to load before browser starts to display it.

Same page without tables would display the visible part first and as you are looking at the display continues to download the rest. It can make the difference of seconds especially on a slow connection.

As an example of clean design
http://www.csszengarden.com/ does a very good job without having to resort to tables.

I have seen many others too. I myself have started to rethink my design strategy and try to avoid unnecessary complication whenever possible.

BTW, you are welcomed to come with your problems as we ALL do need some help now and then.
I think it is better to show people what they should do rather than simply provide the answer.


Good luck

Positioning, especially in elastic designs, can be very frustrating and difficult to understand. I highly recommend Big John and Holly Bergevin's /*Position Is Everything*/. Their explanations of just what is going on are very in-depth, yet clear enough for even me to understand (mostly).

cheers,

gary

dont avoid tables totally... if part of the layout is truly tabular data like sidebar links then by all means use them... just use the CSS for everything else.

OK. Diligent student that I am, I've tried applying the rules that I learned on the newslogo table to the last remaining table on my site. On the contact page, the contact information falls into two neat columns tucked under the header - witness the table version here: http://epoch.pursuedbybear.com/contact.shtml

So (with much experimentation), says I, I will create two divs, one for the left column and one for the right. I write the following code:



and write these two classes in my css file:



This looks jim-dandy in PC IE6, but a wreck in Mozilla - see http://epoch.pursuedbybear.com/contact2.shtml for yourself. If you don't happen to have Mozilla installed, I will describe it. The first line of the first div has sunk so only the tops of the tallest letters are visible. The next two lines are fine. The first two lines of the second div are much further left than they should be, but the third line (a link) is perfectly placed.

Has anyone come across this problem before? Is there a better way to write this that will make Mozilla (and presumably other non-IE browsers) happy?

Thanks,
Daniel

I don't know why .secondcol was offset to the left, but I do know what happened to the first line of .firstcol. It was shoved up under the contact image. What you see is the below