Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Creating a Web page region using HTML with external CSS file.

    Hello, guys!

    I am new here and I need your help. I have to create a Web page region like this:

    I have to use HTML with external CSS file and each line should be a hyperlink. Can somebody help me, please?
    Thanks in advance!
    Last edited by scourgy; 04-27-2011 at 05:03 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by scourgy View Post
    Hello, guys!

    I am new here and I need your help. I have to create a Web page region like this:

    I have to use HTML with external CSS file and each line should be a hyperlink. Can somebody help me, please?
    Thanks in advance!
    Have you tried any code yourself? If so show us what you have. Is this a school project?
    Teed

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    42
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Menus should be done with unordered lists.

    Code:
    <ul>
    <li><a href="poop.htm>bananaz</a></li>
    <li><a href="crabcakes.htm>orungez</a></li>
    <li><a href="llama.htm>moo</a></li>
    </ul>
    you can make it horizontal, by making the li's float left like this
    Code:
    li {
      float:left;
      /*some pretty design*/
    }
    then you can change the appearing using the hover pseudo class like this

    Code:
    li:hover {
     /*some pretty changes*/
    }
    This is a neato article that explains drop down menus, which is unrelated but a pretty good article. Answer to your question? floattinggg.

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, it's a school project, but I don't have enough time to complete it. My key problem is the decoration of this menu. So far I've done this:

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    	<title> Excercise 3 </title>
    	<style type="text/css">
    	body {font-family:calibri;}
    	.parent {background:rgb(0,101,202);border:2px white outset}
    	div {padding:7px;display:inline-block; background:#FFFFDD ;margin:-3px;border:1px solid; }
    	a {color:black}
    	a:hover {color:white; background:rgb(0,101,202);text-decoration:100%}
    	</style>
    </head>
    <body>
    		<div class="parent">
    			<div class="mydiv"> <a href="item1"> Item 1 </a></div>
    			<div class="mydiv"> <a href="item2"> Item 2 </a></div>
    			<div class="mydiv"> <a href="item3"> Hovered Item 3 </a></div>
    			<div class="mydiv"> <a href="item4"> Some Longer Item 4 </a></div>
    		</div>
    </body>
    </html>
    I will be very appreciative if you can help me.

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    As msevrens already suggested, a navigation menu belongs in a list like so:

    Code:
    <div id="navcontainer">
          <!-- Navigation Menu -->
                    <ul id="navlist">
                      <li><a href="Home.html">Home</a></li>
                      <li><a href="Products.html">Products</a></li>
                      <li><a href="Services.html">Services</a></li>
                      <li><a href="Support.html">Support</a></li>
    
                    </ul>
              </div>
    Then the css would be something like this:

    Code:
    ul#navlist {
            margin: 0;
            padding: 0;
            list-style-type: none;
            white-space: nowrap;
    }
    
    ul#navlist li {
            float: left;
            font-family: verdana, arial, sans-serif;
            font-size: 9px;
            font-weight: bold;
            margin: 0;
            padding: 5px 0 4px 0;
            background-color: #eef4f1;
            border-top: 1px solid #e0ede9;
            border-bottom: 1px solid #e0ede9;
    }
    
    #navlist a, #navlist a:link {
            margin: 0;
            padding: 5px 9px 4px 9px;
            color: #95bbae;
            border-right: 1px dashed #d1e3db;
            text-decoration: none;
    }
    
    ul#navlist li#active {
            color: #95bbae;
            background-color: #deebe5;
    }
    
    #navlist a:hover {
            color: #74a893;
            background-color: #d1e3db;
    }
    You can change the colors if you'd like, I just worked this up quickly to give you something to go on.

    I would suggest however, that in the future for homework assignments, you start earlier so you have enough time to complete them....
    Teed

  • Users who have thanked teedoff for this post:

    scourgy (04-27-2011)


  •  

    Posting Permissions

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