SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    <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>
    2) First lets do the cross screen red bg.
    Code:
    .wrap{ background:red; }
    3) we need to center the head and make it clear/contain all the floats that it will have.
    Code:
    .hed {overflow:hidden; /* contains floats*/
             margin:0 auto;  width:960px;  /* centers element*/
    }
    4) Lets take care of that logo.
    Code:
       .hed h1 {float:left;}
    5) Lets put the navigation on the right
    Code:
    .nav{ float:right;  padding:0; margin:0;  list-style:none;}
    6) lets make the list item into a HORIZONTAL line
    Code:
    .nav li { float:left;}
    7) and finally for links:
    Code:
    .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 ..

  3. #3
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.


    Quote Originally Posted by dresden_phoenix View Post


    and that's the gist of it. Hope this helps ..

  4. #4
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
     .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:
    Code:
    <!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>

  6. #6
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by dresden_phoenix View Post
    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:
    Code:
     .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:
    Code:
    <!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>

  7. #7
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,602
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #9
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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?


    Quote Originally Posted by RyanReese View Post
    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 .

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,602
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  11. #11
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    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 Notepad++.

    Good luck!
    ~TehYoyo

  12. #12
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Cool, Will i learn much from this, and what would be the next step since I normally read a book in 2 days? :P
    Quote Originally Posted by TehYoyo View Post
    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 Notepad++.

    Good luck!
    ~TehYoyo

  13. #13
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    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

  14. #14
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm thinking about buying this e-book.
    Quote Originally Posted by TehYoyo View Post
    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

  15. #15
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    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

  16. #16
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by TehYoyo View Post
    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

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,602
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  18. #18
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by kvnwpts View Post
    "Personally, I find hard copies much better." What did you mean about that?
    Like an actual book, not a PDF.

    ~TehYoyo

  19. #19
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah I get it! :P
    Quote Originally Posted by TehYoyo View Post
    Like an actual book, not a PDF.

    ~TehYoyo

  20. #20
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Get it? Got it? Good.

    ~TehYoyo

  21. #21
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    HAHAHA...hmm, I understood it.
    Quote Originally Posted by TehYoyo View Post
    Get it? Got it? Good.

    ~TehYoyo


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •