Personal Portfolio Launched!

Trip

Trip

Registered
http://www.tannersite.com/

Simple design for a simple reason. ;)
I created it as a simple "quick" portfolio so design firms and design schools could get a glimpse at my work. Not to mention it's my first XHTML/CSS website ever.

Be gentle. :)

[EDIT: I'm going to add 2 more pages to the site once Darkshadow helps me out. ;)]
 
Visually, it's absolutely fabulous. I love your stuff. Really, really nice work.

If your goal, however, is to separate style from content, I'd go pick up Zeldman's Designing With Web Standards book. I haven't read it myself, but it seems to be the bible modern markup. Yours is semantically very lacking. But everyone starts that way.

A quick and easy suggestion for ya: I always add a space before the final slash of my self-closing tags. Older browsers tend to choke if you don't.

EDIT: A superb example of the direction you do NOT want to head in is my own site: http://www.pedestrianisaprettygoodband.com/home/ . Notice the absolutely horrifying amount of non-semantic DIVs and SPANs where regular logical markup would work much, much better. It's amazing the site works at all. But like I said, everyone goes through this kinda stuff while they're learning.
 
Nicely done, though you might want to consider removing some of the p tags used for spacers, handling that in the CSS for the img tags.
 
I'm always dubious when folks turn text into images...

footer.gif


Why?
 
Because I don't know how to create a rounded table and then place the text over it using CSS/XHTML. That's why. :D

Thanks for all the comments guys. ;)
 
It's not that hard, really... the easiest way is to use a (!) table and simply put the corners and sides where they should in a 3x3 cell table, and use the same color for the background.

Or, you could make that image the background of a div of the same size.

Trip, if you need any more help, feel free to ask me... I'm pretty versed in XHTML and CSS.
 
trip - take all the text out of that image. Then create a <div id="contact">. Inside #contact, put a p for each line, and then declare a few bits of css.
#contact {
background: url('/path/to the circle image/');
width, height, blabla
}
#contact p {
text-align: center;
display: block; /* makes the p's wrap */
font: (size)/(line height) [list of fonts to use, first choice to last choice with serif or sans-serif]
}
 
...and updated.
I did do a small clean up of the code for the most part. But it's still quite messy, and it's not uniform. But as far as that goes: I don't care THAT much. ;)
 
Heh, I say do what makes you happy. ;)

Oh yeah, if you happen to see me (actually) on, feel free to IM me. Or these other guys too.

I just say me because I'm temporarily laid off this whole week - company I work for isn't opening back up 'til the first of December. I'm going to be very bored doing nothing for a whole week!
 
Your design style is really good. Everything looks very clean and professional, while still being artistic and expressive (just look at Trip's icons)... not an easy thing to achieve. Its a pretty satisfying "glimpse" :)
 
arden said:
It's not that hard, really... the easiest way is to use a (!) table and simply put the corners and sides where they should in a 3x3 cell table, and use the same color for the background.
Click to expand...
Using a table for layout is against the idea of CSS and XHTML.

The simplest method out right now is only available for Mozilla/Gecko browsers. It's browser specific, but will validate since they use W3C vendor tags. Of course, IE users are screwed when it comes to that method.

-moz-border-radius:

http://www.eightlines.com/neil/mozskin/csscommands.html

Probably the best method is to create a background image at the dimensions you want for a DIV. You could also stack three divs, one with just the top image, one with the middle image & content, and then the bottom image. Similar to how you could go about it with table-based layout, only using divs.

Then again if you're happy with it, then that's what counts.

------------edit------------

After going through my links, I found this again....forgot about it. I was going to use it on a site I'm working on, from everything I've heard this method works really well.

http://www.redmelon.net/tstme/4corners/
 
Trip said:
...and updated.
I did do a small clean up of the code for the most part. But it's still quite messy, and it's not uniform. But as far as that goes: I don't care THAT much. ;)
Click to expand...
Okay, but in Mozilla Firebird I see 2 issues related to "defaults".
(If you want to make sure your browser never "assumes" the wrong default you should always set defaults explicity.):
  1. In Firebird it default to putting a blue border around an linked image... So your main images have these. Make the images have "border=0" to make these go away.
  2. Same deal with the page background color. You have not set your so it defaults to whatever the browser wants (not always white)... In my case purple. You should explicity make your BODY bgcolor="#ffffff", or white. (I always intentionally set my browser to default to something like purple so I never forget to explicitly set this...)
 
Excellent work Trip... I really like it. Clean and clear design! I'm with TommyWillB on the graphic text... of course I think it's somewhat expectable in a personal portfolio site. You really don't have to worry about Google indexing or even speed unless it becomes atrociously slow. You have those liberties with a portfolio website.
 
TommyWillB said:
[*]Same deal with the page background color. You have not set your so it defaults to whatever the browser wants (not always white)... In my case purple. You should explicity make your BODY bgcolor="#ffffff", or white. (I always intentionally set my browser to default to something like purple so I never forget to explicitly set this...)
[/list]
Click to expand...

Ok, fixed the boarders issue, but I already have the background color set... see:

background-color: #FFFFFF;
AND
<body bgcolor="#ffffff">
Click to expand...

Why's that not working?

Thanks for all the help and comments everybody! :D
 
No go on Mozilla Win, looks alright in IE6 though. Here's your problem for the background:

Code: 
[i]Original Code[/i]
body {background-color: #FFFFFF; background: url(images/background.gif) repeat-x;
 
You're calling the background attribute twice, so it's disregarding the first one which is color. You need to do it at once with the background one, or use the seperate methods together...
 
[i]Option 1[/i]
body { background: #fff url("images/background.gif") repeat-x;
 
[i]Option 2[/i]
body { background-color: #fff; background-image: url("images/background.gif"); background-repeat: repeat-x;


The images still have a border, at least in Mozilla...it's cause of the syntax.

Code: 
[i]Original[/i]
img { margin: 20px 0 20px 0; border=0; } 
 
That = is causing he.. for less forgiving browsers like Mozilla...IE just follows it's usual guessing game and gets it right.
 
[i]Fixed[/i]
img { margin: 20px 0 20px 0; border:0; }

The CSS won't validate due to the use of display: table for some reason.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.tannersite.com%2Fpage.css&warning=1&profile=none&usermedium=all
 
Thanks for all the help! I've updated the css file now.
Any more problems or concerns should be mentioned, I need to learn as much as I can and I havn't found any way better than your guys help. :)
 
Yes, display: table-data isn't a valid CSS style; it's display: table-cell.

Also, you're closing your first <div class="table /> tag there. With that / at the end, it's closing that div right then and there.

Hmm, but if you actually fix it, you may start getting some display issues in IE...IE doesn't seem to like the display:table properties much.
 
Trip, did you make all of those icons from scratch in Photoshop? Even the sailor's hat?

You should make the sites you designed open in a new browser window so clicking them won't take people away from your site. A good rule of thumb is: internal links, same frame/window; external links, new window.
 
You must log in or register to reply here.
Back
Top