need layout help with portfolio site (and IE8 issues)

[aracaris]

If this isn't the right place for this thread please move it, I wasn't sure whether to post here or in web design.

I'm working on a portfolio, and have to say that it's the most difficult thing I've dealt with. Not because the layout is complex, it's not, but because I'm finding that it's just ending up too sparse and simple.

I'm having a hard time coming up with more to put on it to make it look more interesting, probably in part because I'm still somewhat new to this, and don't have much to put up on my portfolio yet, but there's got to be something more I can do to it to make it work better. Plus I'm having a hard time talking about myself, as portfolios tend to do. Any advice? Ideas? Places to look for inspiration as far as what to put on a portfolio site? I'm kind of stumped

Also I've tested it in several browsers, it looks fine in ie6, ie7 as well as Firefox, Opera, and Safari, but not so good in IE8, the rounded corners are just very slightly off in IE8 for some reason, especially if it's zoomed in to more than 100%, and if you zoom out, then it gets really broken (and it seems to be fairly common that zooming breaks layouts) so anyone know how to fix this layout issue in IE8, especially the zoom breaking the layout problem? The Flash gallery in particular gets really messed up with zoom.

http://mebdesign.net

 

[northpark]

Hi Megan,

I would put the h1 and navigation within a centre container as well as the main body. On a large screen it looks strange having them far left and right as if they're not part of the page.

The navigation looks a bit squished, add padding to the li eg:

#nav li {
padding-left:15px
}

also don't have the separating | within the link

<li>
<a href="../index.shtml">Main |</a>
</li>

instead you could use borders and then margins to control the height of them.

I would remove the huge gaps at the sides of the text and don't justify it.

There's no consistency in the padding between headings and paragraphs, headings are closer to the content above than the content below. Prob should be the other way round.

Structure wise, you've used empty tags to achieve rounded corners. There's loads of ways to achieve the same result without resorting to that.

Here's a list of techniques http://www.smileycat.com/miaow/archives/000044.php


Hope this helps

 

[aracaris]

Thanks, I've been pondering how to style the text better, it's still sort of in the beginning stages as far as that goes. Thinking about experimenting with some different fonts too, especially for the paragraphs, not sure whether I like the current font or not, but so far I like the font for the headers.

I considered doing what you suggested with the header and footer, but I want them to span the whole length of the window, and not to fit into the space provided by the containing div. Maybe I could play around with doing this with a second containing div, but that almost seems excessive perhaps?

I'm thinking perhaps a better option might for me to position things in the header and footer using percentages, so they aren't way off to the side in large screen resolutions, but I do want them to look somewhat separate from the rest of the page content.

 

[mcorton]

What I would suggest is using horizontal rules between sections. In your "What Can I Do For You" section perhaps provide links to examples. Also in that section you might use am icon beside each entry.

 

[aracaris]

The funny thing is I was pondering doing just that! At least as far as the hr effect goes, though I think I'd use border rather than hr. Good idea though, that or I was thinking of coming up with some neat little design that would serve the same purpose as a horizontal rule. What's hard is not making a design too sparse or too overboard and cluttered, I see A LOT of sites that are one or the other, right now I think I'm just slightly too sparse, so I've got to jazz up things a bit. I'm also considering doing some graphic redesign, perhaps incorporating some water color painting, but that's going to take a while, so I need something that still will work pretty well in the meanwhile.