CSS noob need schooling (Using CSS to replace a table)

[ThunderPoit]

Im trying to pick up where i left off a few years back with html coding and am trying to teach myself CSS at the same time. Im want to go full xhtml strict but I am running into problems with layout. I read that you are not supposed to use tables for page layout anymore and i am trying to solve what looks like it should be a simple problem, but the answer escapes me.
I want a simple gallery page that has say, 9 images arranged in a 3x3 grid. I can place this on the page without issue, but without the images being placed in a table, their arrangment changes should you resize the browser window. How can i fix this?

edit: here is an example of what i am trying to do: http://www.davidlegatt.com/layout/

[Artap99]

You could always center the middle images and make them absolute and make the others relative or absolute to them.

[staph]

Or you could specify a width and/or min-width for the <p> which contains them.

By the way, you need to close that <p> element.

[mooty]

By the way, you need to close that <p> element.

Yupp - Even more helpfully, you can get your code validated here for w3c conformance:

http://validator.w3.org/

[ThunderPoit]

i put that together in 2 min :P
ill get the <p> taken care of later today, and ill try that min. width. thanks

[staph]

Yupp - Even more helpfully, you can get your code validated here for w3c conformance:

http://validator.w3.org/

Better yet, get one of these:

For Safari: http://www.zappatic.net/safaritidy/

For Firefox: https://addons.mozilla.org/firefox/249/

-S

[drewprops]

I built a gallery software of sorts on my drewprops.com (http://drewprops.com) website and it seems to work okay, you might go look at my code and d/l my stylesheet to see what I did. Please note that I built that a year ago (I understand stylesheets a bit better now).

[ThunderPoit]

wow, that was simple enough, all i had to do was set it with a width of 500px and it held its shape. Unfortunatley, when i did this, it stopped following what was set in the body for centered alignment.
also, even tho the image physically stops at the red line, there is some spacing between all of them, otherwise, it would be only 450px accross. is there a way to eliminate this spacing?

[staph]

is there a way to eliminate this spacing?

Try tweaking the padding and margin properties for the images.

[ThunderPoit]

i set them to 0 px and it made no difference. it just seems very odd to me, even without the stylesheet, there is space between them
is it because i defined the width and height of each one?

[Brad]

Do you have any stray actual whitespace in the HTML? If there is any, that can cause horizontal gaps.

Do tighten up the vertical gaps, set your line-height to 0.

[ThunderPoit]

the only white space i have is the indents i used in the nesting of the tags. can this cause actual issues with the layout of the page?
also, any thoughts on the alignment part?

[Brad]

the only white space i have is the indents i used in the nesting of the tags. can this cause actual issues with the layout of the page?Yes. Delete all whitespace between tags. Spaces, tabs, and even line breaks.

I actually tried this on a copy of your source. Removing the whitespace fixes the horizontal gaps between the images and setting line-height to 0 fixes the vertical gaps between the images.


also, any thoughts on the alignment part?
Do this:

.album {
width: 500px;
line-height: 0;
margin: 0 auto;
}

[ThunderPoit]

so let me get this straight: in order for the page to look how i want, my code has to be a huge jumbled mess?

[Koodari]

so let me get this straight: in order for the page to look how i want, my code has to be a huge jumbled mess?I know nothing about HTML and CSS, but if that is the only problem, surely you can keep and modify a whitespaced human readable form of the page, and publish it through a script that strips off the extra whitespace and uploads to server.

[ThunderPoit]

ok, i think i can live with formatting it like this:

<img><img><img><br>

and still have it render correctly
thanks guys

[Brad]

so let me get this straight: in order for the page to look how i want, my code has to be a huge jumbled mess?
Sadly, in this case, yes. :(

If you ever discover a way around that, let me know! :)

[ThunderPoit]

it wasnt the tabbed indents, it was the linebreaks after each image tag. so its not a completely jumbled mess, but it was not as clean as i like to keep my code

[Brad]

To clarify, the problem is any whitespace between two specific inline (img has display:inline by default) elements that you want to touch.

So, this is okay:

<p>
<img /><img /><img />
<br />
<img /><img /><img />
<br />
<img /><img /><img />
<br />
</p>

...because there's no whitespace between the adjacent images.

These are not okay:

<p>
<img />
<img />
<img />
<br />
<img />
<img />
<img />
<br />
<img />
<img />
<img />
<br />
</p>


<p>
<img /> <img /> <img /><br />
<img /> <img /> <img /><br />
<img /> <img /> <img /><br />
</p>

...because any space, tab, or new line will be collapsed into a single space character and inserted between the output.

[ThunderPoit]

one last quick question. what does margin: 0 auto; do?

[chucker]

one last quick question. what does margin: 0 auto; do?

That's a shorthand for margin: 0 auto 0 auto;, meaning 0 margin at top and bottom and automatic margin at left and right. Effectively, this causes horizontal centering.

[ThunderPoit]

ahh, cool

[Koodari]

Sadly, in this case, yes. :(

If you ever discover a way around that, let me know! :)Like I said two posts before this post of yours I'm replying to: the answer is to run a formatting script that makes a non-whitespaced copy of your nice-to-edit, whitespaced HTML before publishing. The browsers don't care if it is a jumbled mess.

In pseudocode:take the html file text
split into sections of text not between tags, and text between tags
for sections not between tags
strip all whitespace
done
I believe anyone who has ever parsed XML with Perl, Python or similar fast-to-use language would do this in fifteen minutes. Sadly, I haven't.

I did a little surfing and am now assured that the problem (ignoring whitespace that is not inside tags) is simply impossible to fix inside HTML/CSS, because in HTML the linebreak is as significant as the letter 'a'. Neither can be stripped out with CSS. This problem wouldn't exist in CSS formatted XML, because between-tags whitespace means nothing in XML.
CSS3 drafts contain something to strip out whitespace but CSS3 is a long way to the future and drafts are... just that.

[Kraetos]

Better yet, get one of these:

For Safari: http://www.zappatic.net/safaritidy/

For Firefox: https://addons.mozilla.org/firefox/249/

-S

What, no Explorer version? :lol:

Seriously, though, will this work with Shiira or is their a Shiira version?

[staph]

Seriously, though, will this work with Shiira or is their a Shiira version?

I haven't the faintest idea, I'm afraid. I never use Shiira.