Welcome!

[threedash]

This is my first attempt at creating a web portfolio.

I've looked into coding but I'm not 100% about everything. this is my website layout. I'm not asking anyone to code anything for me, but i would like a push in the right direction.

thank you

_threedash

[Andy]

First of all, you should keep your coding design-agnostic. That is, you should not use names such as "left" and "center". Instead use names that describe the content, such as "navigation".

Second of all, you should have a logo that works as a homepage link. Users would expect that. You could still "save space" by combining your graphics into a CSS sprite.

I coded the following template, which all my website projects are based off: http://nova-group.se/template/
I made it with accessibility, design-agnosticism and Yahoo's Performance rules in mind.

As for your navigation menu, here's an example:

Code: Select all

#navigation {
  float: left;
}

#navigation h2 {
  left: -999em;
  position: absolute;
}

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 367px;
}

#navigation a {
  background: url(sprite.png) no-repeat;
  display: block;
  height: 100px;
  overflow: hidden;
  text-indent: -999em;
}

#projects a { background-position: -367px 0 }
#about a { background-position: -734px 0 }

#home a:hover { background-position: 0 -100px }
#projects a:hover { background-position: -367px -100px }
#about a:hover { background-position: -734px -100px }

#content {
overflow: hidden; /* so the float won't affect my content */
}


[threedash]

Hi Andy,

thanks for your help. I have a question. so on the Main page where I have the txt box, how do I setup the tag to place the txt exactly where i want it to be?

(div center)

[Andy]

The code I gave you already places it to the right of the navigation menu.

To center the whole thing, just do margin: 0 auto; on #wrapper.

[threedash]

hey andy,

I followed your advice and redid my navigation, thanks by the way.

for the main section (the 'welcome to threedash' button, the hover state should be shown) instead of the normal state. how to i change that?

_threedash

[Andy]

Well, you still haven't done the navigation menu properly.

You're supposed to use an unordered list (<ul>):

Code: Select all

<div id="navigation">
  <h2>Navigation</h2>
  <ul>
    <li id="welcome"><a href="/">Welcome to treedash</a></li>
    <li id="about"><a href="about.html">About me</a></li>
    <li id="webdesign"><a href="webdesign.html">Web Design</a></li>
    <li id="mograph"><a href="mograph.html">Motion Graphics</a></li>
  </ul>
</div>


Just as presented in my template (see above post). The CSS code I posted above also contains the hover state.