adv banner
CSS List Menus and Buttons
by GreyCobra.com
CSS Menu Using JavaScript (Revised)
by Joseph Skidmore
Conquering Cascading Style Sheets
by Chris Converse
Basics of CSS
by Stian Bakkane
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials CSS Menu Style 3
rss

CSS Menu Style 3

Author: Nick La More by this author
Browse Pages: << <  1  2  3

Added: Apr 03, 2006 Rating:  Average Rating: 3.67 Votes: 39 Position: 2334 of 12768Average Rating: 3.67 Votes: 39 Position: 2334 of 12768Average Rating: 3.67 Votes: 39 Position: 2334 of 12768Average Rating: 3.67 Votes: 39 Position: 2334 of 12768Average Rating: 3.67 Votes: 39 Position: 2334 of 12768 Level: Experienced Software:  DreamweaverGoLiveFrontPage

Style 3

Source Code

<div id = "style3">
<h1>My Site:</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">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


print this page tell a friend subscribe to newsletter subscribe to rss
Rate this Material: Bad 1 2 3 4 5 Excellent
Browse Pages: << <  1  2  3

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "CSS Menu Style 3"