PDA

View Full Version : With all this talk of CSS and layout


brianellisrules
Jan 8, 2004, 02:17 PM
How would I do something like this with CSS?:

http://www.brianellisrules.com/beard/users/


I threw it together late one night so I didn't have time to sit and figure it out, so tables seemed like the fast/simple solution.

Help! :)

Thanks.

mnkeybsness
Jan 8, 2004, 08:19 PM
i assume that you would be able to do something similar to what i did for my archives (http://www.paularms.com/archives.html) i did have to fudge it a little to get each blogbody to expand dynamically to the amount of content using a layout table with a single cell. i'm sure there is a way to do it without a table, but haven't figured it out yet.

essentially all that i did was create a div class called archiveImg that looks like this:
.archiveImg {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
text-align: center;
width: 105px;
height: 140px;
float: left;
margin-right: 10px;
}

you could do the same thing, just changing to width, height, and margin-right to whatever size you need, and then create a div class that holds each element having a specific width to keep elements from going off too far.

Rower_CPU
Jan 8, 2004, 09:38 PM
Are you just wanting the photos and captions to display in a grid layout like that? I can whip something together with floats pretty easily if you'd like.

The one trick is that with varying image heights it can get a little odd looking.

brianellisrules
Jan 8, 2004, 11:08 PM
Originally posted by Rower_CPU
Are you just wanting the photos and captions to display in a grid layout like that? I can whip something together with floats pretty easily if you'd like.

The one trick is that with varying image heights it can get a little odd looking.
Yup, that's exactly it. I tried messing with floats for a bit, but didn't put too much effort into it at the time and since then I haven't really gone back to it.

Rower_CPU
Jan 9, 2004, 12:14 AM
Floats will definitely do it. Hassle me tomorrow to work on a quickie layout, if you don't come across it yourself before then.

mnkeybsness
Jan 9, 2004, 12:43 AM
i went ahead and set it up for you here (http://www.paularms.com/brianellisrules/). i just copied the html over and copied your style sheet. so you will need to change the links for them in the head. in the style sheet i just made two new elements #holder and .beardo

hope this is what you wanted.

Rower_CPU
Jan 9, 2004, 12:57 AM
Nice job, Paul. The only thing I'd change is to make the text a <p> rather than put the <br>s in there and add the appropriate rules in the CSS for their styling, but that's just a semantic nitpick.

mnkeybsness
Jan 9, 2004, 01:45 AM
Rower:

i've always just used breaks in sites that i've written. what is the advantage to using <p> over <br>?

brianellisrules
Jan 9, 2004, 08:10 AM
First off, thanks for the example. It seems as if Rower's rubbed off on you. :)

When I first looked at it this morning on Mozilla I thought, "wow, that's it!" Then at work I opened it up in IE and it's all left aligned. Weird.

I looked at the CSS you added and it seems like the width of each div 'beardo' is fixed... with the table, I guess the nice thing is that it's based on the image width, and the text in the row below (i.e. the pic description) automatically fits to that width.

Also, instead of the "holder" id, what if I just threw some <center> tags up there?


For reference:
#holder {
width: 845px;
padding: 0px;
margin-top: 0px;
margin-right: auto; /* the auto makes things get centered on your page */
margin-bottom: 0px;
margin-left: auto;
text-align: left;
voice-family: "\"}\""; /*this line and the next make IE windows agree with what's going on... i would leave them here */
voice-family: inherit;
}

.beardo {
width: 420px; /* i would keep all of the images the same width */
height: 600px; /* this is a general length... if you have too much text, things will get messed up */
float: left; /* this is the float position */
margin-right: 2px; /* this specifies how close the next element will be to its immediate right */
}

mnkeybsness
Jan 9, 2004, 09:27 AM
the center tag will not work.

i forgot... to make internet explorer do it.. (i am pretty sure) that you will need to have this in the style sheet:

body {
text-align: center;
}

at least that's how i made it work on my website...

stupid internet explorer... always hating on me.

ps: i made the changes on my version (can't test on IE cause my windows machine is messed up right now)

http://www.paularms.com/brianellisrules

ExoticFish
Jan 9, 2004, 10:18 AM
man i sure am learning a lot from you guys. i went through and read a bunch of stuff about css last night and it's pretty sweet stuff. i have another question though. here's what i did last night: http://www.exoticfish.net/newsite/

how do i get the "top_menu" where the visiters ip address is displayed to display the text aligned in the middle? is that possible? i know that there once was a "valign=middle" attribute in html but i've never gotten it to work properly (and that's not the css way!). thanks for all your guys' help so far.

Rower_CPU
Jan 9, 2004, 12:52 PM
mnkeybsness-
The reason I prefer <p> over <br> is that <br> is a presentational element rather than a semantic one.

I'll still use <br>s within a <p> or other tag, but it's just a preference of mine to not use them outside of the context of a paragraph, list item, etc.

Also, your redesign looks fine on IE6 and 5.5, but 5.0 isn't floating the <div>s.

ExoticFish-
I would use top and bottom padding within that <div> or on the <p> to achieve the vertically aligned appearance.

scamperwillow
Jan 9, 2004, 01:12 PM
Since I see you talking CSS, I just discovered this amazing!! site that demonstrates CSS in an extraordinary way. check it out:

http://www.csszengarden.com

It is very impressive!