Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials CSS Menu Style 1
rss

CSS Menu Style 1

Added: Apr 03, 2006 Level: Experienced Software: Dreamweaver FrontPage GoLive  
Browse Pages: << < 1  2  3 
Author: Nick La More by this author

Style 3

Source Code

<div id = "style3">
<h1>My Site:</h1>
<ul>
<li><a href="/img_articles/7919/#">Home</a></li>
<li><a href="/img_articles/7919/#">About</a></li>
<li><a href="/img_articles/7919/#">Contact</a></li>
</ul></div>

<div class = "content_box3">
Style 3 Content Box </div>

Final Result

style 2

Click here to view live demo

CSS for #style3

#style3 {
font-family:Arial;
}
  • font = Arial

CSS for H1

#style3 h1 {
width: 120px;
font-size:14px;
font-weight:bold;
color: #FFFF99;
text-transform:uppercase;
margin:0px;
padding:16px 0px 2px 10px;
float:left;
background-image: url(gradient3.gif);
background-repeat:no-repeat; }

gradient3 = gradient3.gif

  • width = 120px
  • font size = 14px
  • bold font
  • font color = #FFFF99
  • transform text to uppercase
  • margin = 0
  • padding: top=16, right=0, bottom=2, left=10
  • float left
  • background image = gradient3.gif, no-repeat

CSS for UL

#style3 ul {
margin:0px;
padding: 8px 0px 0px 0px;
list-style:none; }
  • margin = 0
  • padding: top=8, right=0, bottom=0, left=0
  • no list style

CSS for LI

#style3 li {
width:130px;
font-size:14px;
font-weight:bold;
border-right:1px solid #FF6600;
float:left; }
  • width = 130
  • font-size = 14
  • bold font
  • border-right = 1xp #FF6600
  • float = left

CSS for link

#style3 li a {
width:120px;
color: #663300;
text-decoration:none;
display:block;
padding:5px;
background-image:url(gradient1.gif); }

gradient1 = gradient1.gif

  • width = 120
  • font color = #663300
  • no underline
  • display as block
  • padding around = 5
  • background image = gradient1.gif

CSS for visited link

#style1 li a:visited {
color: #663300;
text-decoration:none;}
  • font color = #663300
  • no underline

CSS for hover link

#style2 li a:hover {
color: #FF6600;
text-decoration:none;
background-image:url(gradient2.gif); }

gradient2 = gradient2.gif

  • font color = #FF6600
  • no underline
  • background image = gradient2.gif

CSS for content box

.content_box3 {
width:720px;
font-family:Arial;
font-size:11px;
background-color:#FFFF91;
border:1px solid #FF6600;
padding:15px;
clear:left; }
  • width = 720
  • font = Arial
  • font size = 11px
  • background color = #FFFF91
  • border around = 1px
  • padding around = 15
  • Clear left of UL tag


Author's URL: Nick La
Browse Pages: << < 1  2  3 
Learn HTML step-by-step from A to Z or improve your professional skills. More Tutorials: Featured Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

No comments yet...
Add comments to "CSS Menu Style 1"

Captcha