Proste menu z rollover

Mar 18
2009
Comments Off



Rollover otzrymywany poprzez konwersję listy w blok przy użyciu “display: block” i zmianie koloru tła poprzez “a:hover”.

HTML

<div id=”navicontainer”>

<ul id=”navilist”>

<li id=”active”><a href=”#” id=”current”>Link jeden</a>

<ul id=”subnavlist”>

<li id=”subactive”><a href=”#” id=”subcurrent”>Link w submenu </a></li>

<li><a href=”#”>Link w submenu</a></li>

<li><a href=”#”>Link w submenu</a></li>

</ul>

</li>

<li><a href=”#”>Link dwa </a></li>

<li><a href=”#”>Link trzy </a></li>

</ul>

</div>

CSS

#navicontainer { margin-left: 30px; }

#navicontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

font-family: verdana, arial, Helvetica, sans-serif;

}

#navcontainer li { margin: 0 0 1px 0; }

#navicontainer a

{

display: block;

padding: 5px 10px;

width: 140px;

color: #fff;

background-color: #036;

text-decoration: none;

}

#navicontainer a:hover

{

color: #fff;

background-color: #69C;

text-decoration: none;

}

#navicontainer ul ul li { margin: 0 0 1px 0; }

#navicontainer ul ul a

{

display: block;

padding: 5px 5px 5px 30px;

width: 125px;

color: #fff;

background-color: #369;

text-decoration: none;

}

#navicontainer ul ul a:hover

{

color: #fff;

background-color: #69C;

text-decoration: none;

}

Written by admin in: CSS, Menu, Tutorial | Tags:

Menu rollover – obrazy

Mar 16
2009
Leave a
Comment



Efekt został osiagnięty poprzez zastosowanie obrazów.

oraz

Kod CSS:

HTML

<div id=”navcontainer”>

<ul id=”navlist”>

<li id=”active”><a href=”#” id=”current”>Link 1</a>

<ul id=”subnavlist”>

<li id=”subactive”><a href=”#” id=”subcurrent”>podmenu</a></li>

<li><a href=”#”>Subitem two</a></li>

<li><a href=”#”>podmenu</a></li>

<li><a href="#">podmenu</a></li>

</ul>
</li>

<li><a href="#">Link 2</a></li>

<li><a href="#">Link 3</a></li>

<li><a href="#">Link 4</a></li>

</ul>

</div>

CSS

#navcontainer { margin-left: 30px; }

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

font-family: verdana, arial, Helvetica, sans-serif;

}

#navcontainer li { margin: 0; }

#navcontainer a

{

display: block;

padding: 5px 10px;

width: 140px;

color: #000;

background-color: #ADC1AD;

text-decoration: none;

border-top: 1px solid #fff;

border-left: 1px solid #fff;

border-bottom: 1px solid #333;

border-right: 1px solid #333;

font-weight: bold;

font-size: .8em;

background-image: url(images/image1.jpg);

background-repeat: no-repeat;

background-position: 0 0;

}

#navcontainer a:hover

{

color: #000;

background-color: #889E88;

text-decoration: none;

border-top: 1px solid #333;

border-left: 1px solid #333;

border-bottom: 1px solid #fff;

border-right: 1px solid #fff;

background-image: url(images/image2.jpg);

background-repeat: no-repeat;

background-position: 0 0;

}

#navcontainer ul ul li { margin: 0; }

#navcontainer ul ul a

{

display: block;

padding: 5px 5px 5px 30px;

width: 125px;

color: #000;

background-color: #C5D8C5;

text-decoration: none;

font-weight: normal;

}

#navcontainer ul ul a:hover

{

color: #000;

background-color: #889E88;

text-decoration: none;

}

Written by admin in: CSS, Menu, Tutorial | Tags:

Szablon HTML i CSS

Mar 05
2009
Leave a
Comment

Połaczączmy dokument HTML i plik CSS.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Moja pierwsza strona</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<body>

<div id=”header”>
<h1>Nagłówek</h1>
</div>
<div id=”navigation”>
<h2>Nawigacja</h2>
<ul>
<li><a href=”first.html”>link</a></li>
<li><a href=”second.html”>link</a></li>
<li><a href=”third.html”>link</a></li>
</ul>
</div>
<div id=”content”>
<h2>Treśćt</h2>
<p>treść stronye</p>
</div>
<div id=”footer”>
<p>Autor: BLA BLA</p>
</div>

</body>
</html>

Kod pliku css o nazwie style.css.

body {
background-color: Green;
}
div {
border: 3px solid Black;
padding: 7px;
width: 600px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}

#navigation {
float: left;
width: 150px;
}
#content {
float: left;
width: 430px;
}
#footer {
clear: both;
}

Ustaliliśmy w nim tło dokumentu dla wszystkich elementów.

Ustaliliśmy również podstawowe style dla konkretnych sekcji <div>.

Aby połączyć ze sobą dwa pliki, w dokumencie HTML w sekcji nagłówka wstawiamy nastepujący kod:

<link rel="stylesheet" href="style.css" type="text/css">
Written by admin in: Artykuły, CSS, HTML, Tutorial | Tags: ,
« Older Entries
Newer Entries »

Visit Our Friends!

A few highly recommended friends...

Archives

All entries, chronologically...

Pages List

General info about this blog...