User Name
Password
AppleNova Forums » Programmer's Nook »

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


Register Members List Calendar Search FAQ Posting Guidelines
CSS noob need schooling (Using CSS to replace a table)
Thread Tools
ThunderPoit
InvaderJak
 
Join Date: May 2004
Location: Saint Paul
Send a message via AIM to ThunderPoit Send a message via Yahoo to ThunderPoit  
2006-08-25, 00:14

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/

Last edited by ThunderPoit : 2006-08-25 at 00:30.
  quote
Artap99
Totally awesome.
 
Join Date: Aug 2005
Location: Charlotte, NC
Send a message via AIM to Artap99  
2006-08-25, 00:30

You could always center the middle images and make them absolute and make the others relative or absolute to them.
  quote
staph
Microbial member
 
Join Date: May 2004
Send a message via AIM to staph  
2006-08-25, 01:06

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.
  quote
mooty
Senior Member
 
Join Date: Jan 2005
Location: London, UK
 
2006-08-25, 02:18

Quote:
Originally Posted by staph
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/
  quote
ThunderPoit
InvaderJak
 
Join Date: May 2004
Location: Saint Paul
Send a message via AIM to ThunderPoit Send a message via Yahoo to ThunderPoit  
2006-08-25, 07:00

i put that together in 2 min :P
ill get the <p> taken care of later today, and ill try that min. width. thanks
  quote
staph
Microbial member
 
Join Date: May 2004
Send a message via AIM to staph  
2006-08-25, 08:28

Quote:
Originally Posted by mooty
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
  quote
drewprops
Magnificent Basturdâ„¢
sagacious-d
 
Join Date: May 2004
Location: Atlanta
 
2006-08-25, 08:30

I built a gallery software of sorts on my 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).

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
ThunderPoit
InvaderJak
 
Join Date: May 2004
Location: Saint Paul
Send a message via AIM to ThunderPoit Send a message via Yahoo to ThunderPoit  
2006-08-25, 19:29

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?
  quote
staph
Microbial member
 
Join Date: May 2004
Send a message via AIM to staph  
2006-08-25, 21:48

Quote:
Originally Posted by ThunderPoit
is there a way to eliminate this spacing?
Try tweaking the padding and margin properties for the images.
  quote
ThunderPoit
InvaderJak
 
Join Date: May 2004
Location: Saint Paul
Send a message via AIM to ThunderPoit Send a message via Yahoo to ThunderPoit  
2006-08-25, 22:30

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?
  quote
Brad
Selfish Heathen
 
Join Date: May 2004
Location: Zone of Pain
 
2006-08-25, 22:35

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.

The quality of this board depends on the quality of the posts. The only way to guarantee thoughtful, informative discussion is to write thoughtful, informative posts. AppleNova is not a real-time chat forum. You have time to compose messages and edit them before and after posting.
  quote
ThunderPoit
InvaderJak
 
Join Date: May 2004
Location: Saint Paul
Send a message via AIM to ThunderPoit Send a message via Yahoo to ThunderPoit  
2006-08-25, 23:12

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?
  quote
Brad
Selfish Heathen
 
Join Date: May 2004
Location: Zone of Pain
 
2006-08-25, 23:59

Quote:
Originally Posted by 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?
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.


Quote:
Originally Posted by ThunderPoit
also, any thoughts on the alignment part?
Do this:

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

The quality of this board depends on the quality of the posts. The only way to guarantee thoughtful, informative discussion is to write thoughtful, informative posts. AppleNova is not a real-time chat forum. You have time to compose messages and edit them before and after posting.
  quote
ThunderPoit
InvaderJak
 
Join Date: May 2004
Location: Saint Paul
Send a message via AIM to ThunderPoit Send a message via Yahoo to ThunderPoit  
2006-08-26, 08:22

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?
  quote
Koodari
Veteran Member
 
Join Date: Jun 2004
 
2006-08-26, 09:48

Quote:
Originally Posted by 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?
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.
  quote
ThunderPoit
InvaderJak
 
Join Date: May 2004
Location: Saint Paul
Send a message via AIM to ThunderPoit Send a message via Yahoo to ThunderPoit  
2006-08-26, 10:16

ok, i think i can live with formatting it like this:
Code:
<img><img><img><br>
and still have it render correctly
thanks guys
  quote
Brad
Selfish Heathen
 
Join Date: May 2004
Location: Zone of Pain
 
2006-08-26, 13:52

Quote:
Originally Posted by 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?
Sadly, in this case, yes.

If you ever discover a way around that, let me know!
  quote
ThunderPoit
InvaderJak
 
Join Date: May 2004
Location: Saint Paul
Send a message via AIM to ThunderPoit Send a message via Yahoo to ThunderPoit  
2006-08-26, 14:01

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
  quote
Brad
Selfish Heathen
 
Join Date: May 2004
Location: Zone of Pain
 
2006-08-26, 14:09

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:

[html]<p>
<img /><img /><img />
<br />
<img /><img /><img />
<br />
<img /><img /><img />
<br />
</p>[/html]

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

These are not okay:

[html]<p>
<img />
<img />
<img />
<br />
<img />
<img />
<img />
<br />
<img />
<img />
<img />
<br />
</p>[/html]


[html]<p>
<img /> <img /> <img /><br />
<img /> <img /> <img /><br />
<img /> <img /> <img /><br />
</p>[/html]

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

The quality of this board depends on the quality of the posts. The only way to guarantee thoughtful, informative discussion is to write thoughtful, informative posts. AppleNova is not a real-time chat forum. You have time to compose messages and edit them before and after posting.
  quote
ThunderPoit
InvaderJak
 
Join Date: May 2004
Location: Saint Paul
Send a message via AIM to ThunderPoit Send a message via Yahoo to ThunderPoit  
2006-08-26, 14:54

one last quick question. what does margin: 0 auto; do?
  quote
chucker
‽
 
Join Date: May 2004
Location: near Bremen, Germany
Send a message via ICQ to chucker Send a message via AIM to chucker Send a message via MSN to chucker Send a message via Yahoo to chucker Send a message via Skype™ to chucker 
2006-08-26, 15:06

Quote:
Originally Posted by ThunderPoit
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.
  quote
ThunderPoit
InvaderJak
 
Join Date: May 2004
Location: Saint Paul
Send a message via AIM to ThunderPoit Send a message via Yahoo to ThunderPoit  
2006-08-26, 15:18

ahh, cool
  quote
Koodari
Veteran Member
 
Join Date: Jun 2004
 
2006-08-26, 16:15

Quote:
Originally Posted by Brad
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:
Code:
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.
  quote
Kraetos
Lovable Bastard
 
Join Date: Dec 2005
Location: Boston-ish
 
2006-08-28, 13:20

Quote:
Originally Posted by staph View Post
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?

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

Last edited by Kraetos : 2006-08-28 at 13:26.
  quote
staph
Microbial member
 
Join Date: May 2004
Send a message via AIM to staph  
2006-08-28, 20:16

Quote:
Originally Posted by Kraetos View Post
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.
  quote
Posting Rules Navigation
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Post Reply

Forum Jump
Thread Tools
Similar Threads
Thread Thread Starter Forum Replies Last Post
Web Designer Noob Needs Schooling atomicbartbeans General Discussion 5 2005-09-18 04:58


« Previous Thread | Next Thread »

All times are GMT -5. The time now is 10:15.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Copyright ©2004 - 2018, AppleNova