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