Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
Creating and linking external CSS files
by Ades Tynyshov
Advanced CSS (linking to an external style sheet)
by Adam Priestley
CSS Menu Style 1
by Nick La
Basic CSS
by Lindsay Coome
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 2
rss

CSS Menu Style 2

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

Added: Apr 03, 2006 Rating:  Average Rating: 3.47 Votes: 30 Position: 3802 of 13056Average Rating: 3.47 Votes: 30 Position: 3802 of 13056Average Rating: 3.47 Votes: 30 Position: 3802 of 13056Average Rating: 3.47 Votes: 30 Position: 3802 of 13056Average Rating: 3.47 Votes: 30 Position: 3802 of 13056 Level: Experienced Software:  DreamweaverGoLiveFrontPage

Style 2

Source Code

<div id = "style2">
<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_box2">
Style 2 Content Box </div>

Final Result

style 2

Click here to view live demo

CSS for #style2

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

CSS for H1

#style2 h1 {
font-size: 16px;
font-weight: bold;
background-color: #FF6600;
width: 120px;
padding: 5px;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #BB4A00;
border-bottom: 1px solid #FF6600;
border-left: 1px solid #FF6600;
margin: 10px 0px 0px 0px; }

h1

  • font size = 16px
  • bold font
  • background = #FF6600
  • width = 120px
  • padding(around) 5px
  • set H1 float(align) to left
  • 1px border-top #FF6600
  • 1px border-right #BB4A00
  • 1px border-bottom #FF6600
  • margin: top=10, right=0, bottom=0, left=0

CSS for UL

#style2 ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
clear: left; }
  • margin = 0
  • padding = 0
  • no list style
  • float left
  • clear left float of H1 tag

CSS for LI

#style2 li {
width: 130px;
font-size: 14px;
font-weight: bold;
background-color: #FF9900;
border-right: 1px solid #DF5900;
border-bottom: 1px solid #FF6600;
border-left: 1px solid #FF6600; }

li

  • width = 130
  • font-size = 14
  • bold font
  • background = #FF9900
  • border-right 1xp
  • border-bottom 1px
  • border-left 1px

CSS for link

#style2 li a {
width: 120px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px; }
  • width = 120
  • font color = white
  • no underline
  • display as block
  • padding around = 5

CSS for visited link

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

CSS for hover link

#style2 li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFCC33; }
  • font color = black
  • no underline
  • background = #FFCC33

CSS for content box

.content_box2 {
width: 586px;
font-family: Arial;
font-size: 11px;
background-color: #FFFF91;
border: 1px solid #FF6600;
padding: 15px;
float: left; }
  • width = 586
  • font = Arial
  • font size = 11px
  • background color = #FFFF91
  • border around = 1px
  • padding around = 15
  • float left


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 2"