How is this done? (Navigation Buttons)

Hey there!

So basically I found a way to learn is to find a website I like and try to copy it (Make a new one from scratch in dreamweaver), Is that a good way?

Anyways, that wasnt the question. As I’m now copying http://nicklas-bendtner.com/ I’m at the button (About me, Fanzone, News, My Career) section and I’m wondering how this is done? I watched the source code but didnt find out of it.

Hope I can get some help.

Id didn’t look at the source code, but it a simple effect and this is how I would do it.

Keep in mind : DON’T USE DREAMWEAVER TO DESIGN… use it to code, soon you will even realize you can code on SimpleText or any other text editor.

  1. Semantically any menu is really a bunch (read:‘list’) of links in no particular order. So the HTML that denotes this an unordered list (UL). Remeber what I said to you in previous post you can just learn ISOLATED tricks and put them together, as CSS interacts with mark up and with itself… so lets take care of the whole header rather than the menu. You need to account for the red bar across the sreen, the centering of the page, and you will want something for the logo.

Your markup will be something like:

<div class="wrap">
<div class="hed">
<h1>Logo</h1>
<ul class="nav">
<li><a href="#">About me</a></li>
<li><a href="#">My Career</a></li>
<li><a href="#">News</a></li>
<li><a href="#">and so forth</a></li>
</ul>
</div>
</div>
  1. First lets do the cross screen red bg.
.wrap{ background:red; }
  1. we need to center the head and make it clear/contain all the floats that it will have.
.hed {overflow:hidden; /* contains floats*/
         margin:0 auto;  width:960px;  /* centers element*/
}
  1. Lets take care of that logo.
   .hed h1 {float:left;}
  1. Lets put the navigation on the right
.nav{ float:right;  padding:0; margin:0;  list-style:none;}
  1. lets make the list item into a HORIZONTAL line
.nav li { float:left;}
  1. and finally for links:
.nav li a{ display:block;
text-decoration:none;
color:#fff;
border-bottom:3px solid transparent;
font: (style to taste);
}
.nav li a:hover{ dborder-bottom-color:#fff;} 

and that’s the gist of it. Hope this helps … :slight_smile:

I truly appriciate your answer but it did not work :(, first I tried it on the site I was working on but it didnt work so afterwards I tested it on a brand new one and it didnt work either.
The White things appeared under the text in the dreamweaver preview but as soon as I tried it in browser they dissapeared and the words get messed up.

To be honest I have no Idea what the problem is.

And by the way, I’m almost finished with the index, heres how it looks so far - http://www.kwpwebdesign.se/ but I want it as http://www.nicklas-bendtner.com

If anyone, or you could help me with those buttons I would be glad. :smiley:

Please: IGNORE DREAMWEAVER!!! DW is not a web browser nor is it designed to do proper web design. Use the DW text editor ( codeview) and then preview on any ( or if possible ALL) browsers.

Also I had a typo, coreect tis rule:

 .nav li a:hover{ border-bottom-color:#fff;}

I made one minor modification, but it was irrelevant to the menu. in any case this is the whole code working together:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>lesson</title>
		<style type="text/css">
body {background:#000; padding:0; margin:0}
.wrap{ background:red; }
.hed {overflow:hidden; /* contains floats*/
         margin:0 auto;  width:960px;  /* centers element*/
         position: relative;
}
   .hed h1 {position:absolute; top:0; margin:0;}/* using AP to position the logo, this way it wont be accounted when the height of the red bar is calculated. Depending on the situation this may or may not be what you want */
   .nav{ float:right;  padding:0; margin:0;  list-style:none;}
   .nav li { float:left;}
   .nav li a{ display:block; 
text-decoration:none; 
color:#fff;
border-bottom:3px solid transparent;
padding: 10px;
font: (style to taste);
}
.nav li a:hover{ border-bottom-color:#fff;}
		</style>
	</head>
	<body>
<div class="wrap">
<div class="hed">
<h1>Logo</h1>
<ul class="nav">
<li><a href="#">About me</a></li>
<li><a href="#">My Career</a></li>
<li><a href="#">News</a></li>
<li><a href="#">and so forth</a></li>
</ul>
</div>
</div>
	</body>
</html>

And you’ve just awarded the price - Timesaver. Thanks so much for taking your time doing this for me and I will now read through everything to know what it means. :slight_smile:

Can you guys see this page http://www.kwpwebdesign.se/ - You see where it says “Uppdateringar” beside the Facebook Icon, how can I like “margin” (put the text down) for example 2px. As you can see its not in line with the logo as I want it.

Im not advertising for my site. Its just the site ive been building on as you can see in this thread.

Inside of “#innerbox3” in the HTML, you have a random <p> there. You need to get rid of that. There is no erason to have it there in the first place :). If you want that spacing, you can give #innerbox3 some top padding.

That will allow .updatingrar to get a top margin working. So that’s how you can move the text down a bit :).

Yeah, that worked, but what about

"Bygga hemsidan

10 March 2012

Idag håller jag fortfarande på att bygga hemsidan som inom kort tid är klar."

— In the left column - how is that possible so these come closer to eachother?

By default, many elements have default margins and paddings on them.

In order to have a level playing ground, you need to reset them all to 0, and if you want, you reset some margins on there manually. Much easier to handle cross browser.

Eric Meyers reset is fine :). It’s a bit bloated so if you want to trim it down a bit, you can.

I’d like to echo the others by saying don’t use only Dreamweaver!

You won’t learn to code by using a WYSIWYG editor. If I were you, I’d sit down with a book (check out Build Your Own Site the Right Way with HTML and CSS from your local library) and make it in a basic text editor or code editor (you can use Dreamweaver for making the code - it’s nice to have fast-closing tags, etc.). My favorite is [URL=“http://notepad-plus-plus.org/”]Notepad++.

Good luck!
~TehYoyo

Cool, Will i learn much from this, and what would be the next step since I normally read a book in 2 days? :stuck_out_tongue:

Apply it! Go out and make a custom website. It doesn’t have to be a fantastic site, but if you get a basic page and then go from there you’ll learn a lot.

~TehYoyo

I’m thinking about buying this e-book.

It’s a great book. Personally, I find hard copies much better. Again, check out your library! Much easier, quicker, etc. But then again, libraries in Sweden might not have English books. I know for sure that my library doesn’t have Swedish books /:

~TehYoyo

Yeah, swedish libraries may not have it that’s why I would maybe buy the e-book.

“Personally, I find hard copies much better.” What did you mean about that?

And by the way, do you really think that i will learn much more than I know know, as you can see on my page, http://www.kwpwebdesign.se , thats basically the most advanced I can do and Im not sure if im setting up the page right with margins, paddins etc.

Honestly, you should get the book. Heck, if you find out you don’t like it, or it doesn’t meet your expectations, there is a 30 day risk free trial. Money back guarentee. Give it a go :). I’ve never owned the book (or read it) but it’s a no risk situation.

Like an actual book, not a PDF.

~TehYoyo

Ah I get it! :stuck_out_tongue:

Get it? Got it? Good.

~TehYoyo