Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

With all this talk of CSS and layout

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:
Code: 
.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.
 
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.
 
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.
Click to expand...
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.
 
Floats will definitely do it. Hassle me tomorrow to work on a quickie layout, if you don't come across it yourself before then.
 
i went ahead and set it up for you here. 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.
 
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.
 
Rower:

i've always just used breaks in sites that i've written. what is the advantage to using <p> over <br>?
 
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 */
}
 
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:

Code: 
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
 
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.
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back