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.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Nov 2013
    Posts
    1
    Member #
    37700

    New to HTML5 and CSS3

    Hey everyone, I'm still currently learning how to structure HTML to get the desired results I want when I later add in the CSS. I'm a graphic designer, and I've been working on building a portfolio website for a few days, and I've already ran into a problem at the very start.

    I am unsure if I have my nav element structured correctly within the HTML so that I could later add CSS and have it display how it does in the image attached. Could anybody help me figure this out, please?



    Code:
    <header>
    	<ul id="nav">
    		<li>
    			<a href="index.html">HOME</a>
    		</li>
    		<li>
    			<a href="#">ABOUT</a>
    		</li>
    		<li>
    				<a href="index.html"><img src="http://www.webdesignforums.net/forum/images/tb_logo.png" alt="T. Brown Design" /></a>
    		</li>
    		<li>
    			<a href="#">PORTFOLIO</a>
    		</li>
    		<li>
    			<a href="#">CONTACT</a>
    		</li>
    	</ul>
    </header>

  2.  

  3. #2
    Junior Member
    Join Date
    Nov 2013
    Location
    Dublin Ireland
    Posts
    6
    Member #
    37702
    I would probably use the html 5 nav id for the navigation instead of the ul id. Something like this

    <header>
    <nav id="main-nav">
    <ul>
    <li><a href="index.html"> Home </a></li>
    <li><a href="service.html"> Services</a> </li>
    <li><a href="contact.html"> Contact </a></li>
    </ul>
    </nav>
    </header>
    You would then target the navagation in your css with something like the following

    #main-nav li {
    display: inline;

    font-family:"Times New Roman", Times, serif;
    font-weight:italic;
    font-size: 20px;
    padding:5px 18px 5px 18px;



    }

    #main-nav li a {
    color:#3333cc;
    text-decoration:none;
    }


    #main-nav li a:hover {
    color: #ffffff;
    }

    Hope that helps


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
  •  
All times are GMT -6. The time now is 03:18 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com