Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times

    heder HTML5 help

    header HTML5 help

    im new to webdesign, i find really hard coding my layout, and its just a header,

    could give some examples how to code this one, thanks

    sample.jpg
    Last edited by graphicnerd; Nov 15th, 2013 at 10:10 PM.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    ???? What do you mean?

    You want the HTML/CSS ...?

    If you can't get past the header, you have a tough road ahead for the rest of your site. What are we supposed to show you?


  4. #3
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times
    Quote Originally Posted by mlseim View Post
    ???? What do you mean?

    You want the HTML/CSS ...?

    If you can't get past the header, you have a tough road ahead for the rest of your site. What are we supposed to show you?
    im stuck , coding my navs. .

    sampl1.jpg

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    Give a link to the webpage you're working on. If I can see it, that might help.

    Is what you're doing an assignment for a class of some kind?
    Last edited by mlseim; Nov 15th, 2013 at 11:26 PM.


  6. #5
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times
    Quote Originally Posted by mlseim View Post
    Give a link to the webpage you're working on. If I can see it, that might help.

    Is what you're doing an assignment for a class of some kind?
    i didnt not uploaded it because its just an assignment, no live site, please could you help me on this, im way too far for this project.content_structure.jpg

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    So what you show in that picture is what you have so far? Can you post the HTML you have? What kind of class is this for?


  8. #7
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times
    Quote Originally Posted by mlseim View Post
    so what you show in that picture is what you have so far? Can you post the html you have? What kind of class is this for?

    here it is sir, this one so far

    11.jpg

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    I mean post it here ... select, copy, and paste here so I can actually copy and paste it into my own text editor. Don't post a photo, post the code itself.


  10. #9
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times
    Quote Originally Posted by mlseim View Post
    I mean post it here ... select, copy, and paste here so I can actually copy and paste it into my own text editor. Don't post a photo, post the code itself.
    here is my website sir, kinda stuck http://raineerdelarita.6te.net/brokerage/


    putting my social icons

    like this one . . my mock up

    1wqsx.jpg


    <!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>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
    </head>
    <body>
    <header>
    <div id="logo">
    <a href="index.html"><img src="mockup_03.gif" alt="" /></a>
    </div>

    <ul>
    <li class="selected"><a href="#"><span>FAQ</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
    <li><a href="#"><span>Member Login</span></a></li>

    <div class="connect">
    <a href="#" id="facebook">facebook</a>
    <a href="#" id="twitter">twitter</a>

    </div>

    </ul>


    </header>
    </body>
    </html>

    ----------
    ---------
    ----------

    -------------------------- CSS ----------------------


    @charset "utf-8";
    /* CSS Document */

    body {
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
    padding: 0;
    }

    header {
    margin:0 auto;
    padding: 0;
    overflow: hidden;
    width: 960px;
    }

    header #logo {
    float: left;
    height: 130px;
    width: 340px;
    }

    header ul
    {
    float:left;
    margin:0;
    padding:100px 0 0 150px;
    width:400px;
    overflow:hidden;

    }


    header ul li a,
    header ul li a span,
    header ul li a:hover,
    header ul li a:hover span,
    header ul li.selected a,
    header ul li.selected a span {
    background:url(images/Untitled-1.gif);
    }


    header ul li
    {
    float:left;
    width:130px;
    margin:0;
    padding:0;
    list-style:none;
    }

    header ul li a
    {

    height:36px;
    background-position: 10px 0;
    color: #2a4f5e;
    display: block;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    margin: 0;
    padding: 0 0 0 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #fff;
    }

    header ul li a span
    {

    background-position: -70px 0;
    display: block;
    margin: 0;
    padding: 0 10px 0 0;
    }

    header ul li a:hover {

    background-position: -186px -37px;

    text-shadow: none;
    }

    header ul li a:hover span
    {

    background-position: -70px -37px;
    }



    header ul li.selected a{

    background-position: 10px 36px;
    color: #fff;
    text-shadow: none;
    }

    header ul li.selected a span{

    background-position: -70px -74px;
    }


    header ul .connect
    {
    float:right;
    padding:90px 100px 0 150px;
    overflow:hidden;
    width:130px;
    }

    header ul .connect a
    {
    float:left;
    display:block;
    overflow:hidden;

    }

    header ul .connect a#facebook {
    background:url(images/social.gif) no-repeat 0 0;
    height:27px;
    width:40px;
    margin:0 18px 0 0;
    float:left; text-indent: -99999em;
    }

    header ul .connect a#twitter {
    background:url(images/social.gif) no-repeat;
    height:24px;
    width:33px;
    margin:0 18px 0 0;
    text-indent: -99999em;
    background-position: -4px -45px;
    }
    Last edited by graphicnerd; Nov 18th, 2013 at 01:34 AM.

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    First of all, make your FaceBook and Twitter icons two separate icons. Right now, they are combined into one .gif image. Make them separate, and make them both the same size GIF (width, height).

    EDIT:
    I'm not sure of the scope of your class ... what the assignment is, or how you are allowed to do it.

    With menu/navigation, I never do it from scratch ... there are already completed CSS menus of all kinds to pick from. No need to reinvent it when you can use what is available.

    See this:
    http://www.cssplay.co.uk/menus/

    Every kind of menu you can think of. In your case, it's probably number 6 in this list:
    http://www.cssplay.co.uk/menus/pro_horizontal.html

    Every one of us developers/designers, whatever you want to call us, use snippets of scripts from other sites, other files, previous projects, etc. You've spent many hours attempting to do just your header/navigation and still have problems with it. Use what is available and save yourself tons of time and energy.

    You'll have to tell me (or us) what your class is about and what you are allowed to use (in regards to pre-made scripts).
    Last edited by mlseim; Nov 18th, 2013 at 07:50 AM.



Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Tags for this Thread

All times are GMT -6. The time now is 09:48 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com