# Personal Portfolio Launched!



## Trip (Nov 13, 2003)

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. ]


----------



## phatcactus (Nov 13, 2003)

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.


----------



## mdnky (Nov 14, 2003)

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.


----------



## TommyWillB (Nov 14, 2003)

I'm always dubious when folks turn text into images...







Why?


----------



## Trip (Nov 14, 2003)

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

Thanks for all the comments guys.


----------



## Arden (Nov 15, 2003)

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.


----------



## mr. k (Nov 15, 2003)

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]
}


----------



## Trip (Nov 15, 2003)

Thanks everybody! I'll be updating pretty soon!


----------



## Trip (Nov 22, 2003)

...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.


----------



## Darkshadow (Nov 23, 2003)

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!


----------



## symphonix (Nov 23, 2003)

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"


----------



## mdnky (Nov 23, 2003)

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.


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/


----------



## TommyWillB (Nov 23, 2003)

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.


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.):
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.
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...)


----------



## evildan (Nov 24, 2003)

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.


----------



## Trip (Dec 2, 2003)

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]



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



> background-color: #FFFFFF;
> AND
> <body bgcolor="#ffffff">



Why's that not working?

Thanks for all the help and comments everybody!


----------



## mdnky (Dec 3, 2003)

No go on Mozilla Win, looks alright in IE6 though. Here's your problem for the background:


```
[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.


```
[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


----------



## Trip (Dec 3, 2003)

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.


----------



## Darkshadow (Dec 3, 2003)

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.


----------



## mr. k (Dec 3, 2003)

IE Windows chokes on display table


----------



## Arden (Dec 3, 2003)

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.


----------



## mdnky (Dec 5, 2003)

Choke isn't a good description of it...more like crashes...


----------



## Trip (Dec 28, 2003)

Arden said:
			
		

> 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.



Yes, everything is from scratch.

How exactly do I make a link open in a new window? Same code as in HTML?


----------



## phatcactus (Dec 29, 2003)

I hate to be off topic, but while we're talkin' about the icons, what's the deal with the numerals on that pocket watch?  III and VI are right, but the other two...?  I keep looking at it trying to figure it out, like a riddle or something, but I'm stumped.


----------



## Arden (Dec 29, 2003)

A) <a href="blahblahblah.html" target="new">This is the simplest way.</a>

B) I look at the watch... it has 4 at the top and 11 on the right.  Trip, do you need a quick brush up on your Roman numerals?


----------



## Trip (Dec 29, 2003)

The numbers on the watch were given to me by a Norwegian guy, I asked him for help and those were the numbers he gave me.


----------



## TommyWillB (Dec 29, 2003)

ROMAN NUMERALS AND DATES


----------

