16 replies [Last post]
Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

Howdy all,

I am an artist/animator that has been coding his own site for years now, but I haven't really been keeping up with the new code the last couple years. I am trying to figure out CSS, but am having a hard time with how to match the design I created in photoshop.

Before this, I have just been using slices and dreamweaver to create my sites, and have had pretty good luck...

http://webspace.ringling.edu/~dsmith/ (my current site)

... but I decided that I want to use CSS for the nav menu to help make navigating the site easier. I am also wanting to make the site load faster and take less bandwidth which I heard that CSS was also good for.

Here is my next version of the site design...

I guess my main questions right now would be...
How do I approach cutting this up so that everything lines up correctly? and
Does anyone know a tutorial site that shows how to create a custom css nav menu that incorporates images?

Thanks for the time,
-d

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 days 13 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

You could check out the

You could check out the sliding doors technique over at A List Apart:
http://www.alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/

Just use it on the entire UL instead of the LIs. You could also adapt it to use a sliver of the background using background attachment of repeat-x (horizontal only repeat) on the LIs if you don't want to make a silly long image for the UL background.

For the drop down look at Son of Sukerfish:
http://htmldog.com/articles/suckerfish/dropdowns/

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 days 13 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

HAHA! I loved "The Layover"!

HAHA! I loved "The Layover"! Big smile

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

:)

Thanks much, that took a year and a half of my life.

If you ever get into animation, trust me. Don't do a bird. I never did get that thing rigged correctly, and messing with it ate up a month and a half of my animation schedule.

I am checking out the links you gave me. Thanks for the help.

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

So...

EDIT: Got the dreamweaver problem worked out...

New question... Do I want to be creating multiple .css files or do I want all of the div's to reference the same external file?

As an example. I was told that I am going to want a seperate div for my logo, "the art and animation of..." image, my nav bar, ...etc...

Should all that code be in the same dimind.css or should I have a nav.css, dimind.css, ...etc...?

Thanks much

PS. Is there any way I can post in this forum without having the stupid image verification each post?

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 days 13 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

Bai Fan wrote: EDIT: Got the

Bai Fan wrote:

EDIT: Got the dreamweaver problem worked out...

So, you threw it in the trash? Great. Tongue

Concerning the other questions, perhaps you could check out the tutorials at http://htmldog.com Do them in order and do them all. Some of your questions imply that your foundation is shaky and needs to be fortified before building a site.

Bai Fan wrote:

PS. Is there any way I can post in this forum without having the stupid image verification each post?

I think it has something to do with post count.

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

Yeah...

My foundation is that I used to be a programmer at my first college (Southern Oregon University), then decided that I didn't really want to spend so much time at a computer and tried to switch to art... only to realize that animation is one of the most time consuming fields out there. Joke's on me.

I haven't really done straight code writing in about 10 years, since at my last college (Ringling College of Art & Design) I found that working in dw seemed to go by quicker. All CA students had to have a functional website on completion of our thesis, and since they didn't teach how to create a site and most artists know nothing about coding, I had to do about 13 other student's sites for them during thesis' final week. :\ Got to where I could throw one together with galleries and embedded videos in about 3 hours.

As to the CSS part, I just started looking into that about two days ago after realizing that a dropdown navbar would really increase the usability of my site. I am slowly getting the hang of it, but I have to admit that I am finding the structuring a bit confusing and have walked away a couple times.

:\

I will check out the link.
Thanks again.

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 days 13 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

Please remember that CSS

Please remember that CSS requires a valid markup structure to work properly or at least predictably. Don't rely on dreamweaver to turn out proper code. It won't.

The suggestion on doing the beginner markup tutorials wasn't meant to imply you hadn't programmed or didn't know what you were doing. It's just that you can either throw together a tag soup page, mishmashed together by fiddling with buttons until it looks ok or you can create a page with a semantic markup structure will give you a stress-free basis to build upon. Your pages will be lighter, the trees will stand taller and unicorns will play gaily on your lawn.

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

No worries...

I was just trying to convey how long it has been since I was up to date with advances in code. Smile

I have been doing a bit with mel programming for maya and just started looking into Python because maya is starting to integrate that instead of mel, but other than that, I am archaic.

I started over and am trying things as simple as possible. So how I have the page set up right now,

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dimind.net - The Art and Animation of Daniel Smith</title>
<link href="CSS/dimind.css" rel="stylesheet" type="text/css" />
<link href="CSS/nav.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<ul id="nav">
	<li><a href="#">Galleries</a>
		<ul>
			<li><a href="#">Illustration</a></li>
			<li><a href="#">Concept Design</a></li>
			<li><a href="#">Photography</a></li>
			<li><a href="#">Animation</a></li>
		</ul>
	</li>
 
	<li><a href="#">Profile</a>
		<ul>
			<li><a href="#">Bio</a></li>
			<li><a href="#">Resume</a></li>
			<li class><a href="#">Kind Words</a></li>
			</ul>
	</li>
 
    	<li><a href="#">Resources</a>
		<ul>
			<li><a href="#">Free Textures</a></li>
			<li><a href="#">Tutorials</a></li>
			<li><a href="#">Links</a></li>
			</ul>
	</li>
    <li><a href="#">Contact</a></li>  
    <li><a href="#">Store</a></li>    
    <li><a href="#">Blog</a></li>   
 
    	</li>
</ul>
 
</body>
</html>

dimind.css (for all of the site design)

@charset "utf-8";
 
 
ul, li, html, a 
{margin: 0; padding: 0;}
 
 
body {
	background-image: url(../images/BG_Pinstripe.jpg);
	background-repeat: repeat;
	background-color: #464541;
 
	text-align: center;
	margin 0 auto;
	padding: 0;
	font: 95% arial, sans-serif;
}
 
 
a:link {color: #FFFFFF;}
a:visited {color: #FFFFFF;}
a:hover {color: #FFFFFF;}
a:active {color: #FFFFFF;}

nav.css (for the code of the navbar)

@charset "utf-8";
 
#nav, #nav ul {padding: 0;	margin: 0;	list-style: none;}
#nav a {display: block;	width: 8em;}
#nav li {float: left;	width: 6em;}

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 days 13 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

While you are transitioning

While you are transitioning your site it seems that you are not using any of the original code so the transitional doctype doesn't make much sense. Either go HTML strict, XHTML strict or just use the HTML5 doctype (which is what I do every time now).

The code looks good. Nice and light and, so far, semantic. One little validation accident though. Wink

There really is no need to split the CSS into two files. You can if you want, there's just not really a need and
I find it easier to keep it all in one file.

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

I am wanting....

I am wanting to have a vignette image on each side so the further away from the center you get the darker the page is, but I want them locked to the side.

I have the transparent .png files created. My question is "can I put the image links in the dimind.css file or since I am most likely going to have to use a div for each element do I put the code in each page's html?"

Arg I am getting sick of this word verification.
:\

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

Thanks again...

Thanks again for the help by the way.

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

Set up a tester site...

Because I think I am going to have tons of questions and problems troubleshooting this site, I decided that it would be best to just put up a live version to show how far I am and what I am currently working on.

The site is here...

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

With a lot of help...

...from Verschwindende...

http://feelerdealer.com/bai/

The main page an almost complete match to the photoshop design.

Smile

Now it is ready for content. Smile

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 days 13 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

It's a bit inflexible with

It's a bit inflexible with the fixed height of the slideshow DIV. I'd add a content section in place of it for pages that need to have a non-fixed height. Like this: http://feelerdealer.com/bai/contentPage.html

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

Nice!

That looks pretty tight.

There are a couple really small things that would need to be fixed (border to 1px, bg color change, content bottom has no shadow under it), but nothing really big it seems.

I am still stuck in Eugene till Tuesday, but am working to get the wireless net up so I will be able to be in contact again soon.

I think that will definitely come in handy.

Smile

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 days 13 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

Bai Fan wrote: That looks

Bai Fan wrote:

That looks pretty tight.

There are a couple really small things that would need to be fixed (border to 1px, bg color change, content bottom has no shadow under it), but nothing really big it seems. ...

That was just a quickie to give you the idea. There is a shadow at the bottom of the content page but it is the original light shadow and I accidentally made the side shadow darker.