menu pionowe,poziome i z hover podswietlenie html5 icss?

2014-03-17 08:58:48 Post #1 mordrag

 
czesc
można prosić o przykłady tych menu co w temacie, wiem tylko jak sie liste tworzy i zreszta ciezko?

2014-03-17 09:09:21 Post #2 nospor

 
Pierwszy lepszy przyklad z googla
http://kodcss.pl/kurs-css/lekcje/dzial-4/rozwijane-poziome-menu-css
a w google jest cała masa innych przykładów

2014-03-17 09:38:30 Post #3 mordrag

 
mam taki przykład menu jak wstawic obrazki do menu?

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello, HTML5!</title>
<style>
ol {
list-style-type:none;
padding:0;
margin:0;
background-color:#FFF;
font-size:18px;
height:2em;
line-height:2em;
text-align:center;
}
ol a {
display:block;
text-decoration:none;
color:#000;
padding:0 5px;
}
ol > li {
float:left;
width:150px;
margin-left:1px;
background-color:#808080;
height:2em;
}
ol > li:first-child {
margin-left:0;
}
ol > li:hover {
background-color:#808080;
}
ol > li:hover > a {
color:black;
}
ol > li:hover > ul {
display:block;
}
ol > li > ul {
display:none;
list-style-type:none;
padding:0;
margin:0;
}
ol > li > ul > li {
position:relative;
background-color:#EEE;
}
ol > li > ul > li > a {
border-top:1px solid #FFF;
}
ol > li > ul > li:hover {
background-color:#DDD;
}
ol > li > ul > li:hover > a {
color:#09C;
}
</style>
</head>
<body>
<ol>
<li><a href="#">opcja - 1</a>
<ul>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
</ul>
</li>
</body>
</html>

2014-03-17 10:13:34 Post #4 nospor

 
Wyrazaj się precyzyjniej.... Gdzie te obrazki? Obok tekstow XXX? No to normalnie, przy pomocy znacznika IMG

2014-03-17 10:20:44 Post #5 mordrag

 
do listy ul chce dodać obrazki, jak te menu dodac do <article>?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello, HTML5!</title>



<style>

header {height:100px;width:1000px; background-color:#00A693; border:1px solid white;clear:both}

article {height:500px; width:500px; background-color:#00A693; border:1px solid white;clear:both }

aside {height:500px; width:500px; background-color: #00A693; position:absolute; margin-left:500px; bottom:113px;border:1px solid white;clear:both}

footer {height:60px; width:1000px;background-color:#00A693;boder:1px solid white;clear:both;}



ol {
list-style-type:none;
padding:0;
margin:0;
background-color:#FFF;
font-size:18px;
height:2em;
line-height:2em;
text-align:center;
}

ol a {
display:block;
text-decoration:none;
color:#000;
padding:0 5px;
}

ol > li {
float:left;
width:150px;
margin-left:1px;
background-color:#808080;
height:2em;
}


ol > li:first-child {
margin-left:0;
}

ol > li:hover {
background-color:#808080;
}

ol > li:hover > a {
color:black;
}


ol > li:hover > ul {
display:block;
}


ol > li > ul {
display:none;
list-style-type:none;
padding:0;
margin:0;
}

ol > li > ul > li {
position:relative;
background-color:#EEE;
}

ol > li > ul > li > a {
border-top:1px solid #FFF;
}


ol > li > ul > li:hover {
background-color:#DDD;
}

ol > li > ul > li:hover > a {
color:#09C;
}

</style>
</head>

<body>
<header>naglowek</header>

<article>

<ol>
<li><a href="#">menu</a>
<ul>
<li><a href="#">Strona glowna</a></li>
<li><a href="#">O mnie</a></li>
<li><a href="#">O rybach</a></li>
<li><a href="#">Galeria</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</li>

</article>

<aside>aside</aside>

<footer>stopka</footer>

</body>

</html>

2014-03-17 10:23:12 Post #6 nospor

 
Nadal nie wiem o co ci chodzi.
Napisalem ci: jak chcesz obok tekstow XXX to normalnie przy pomocy znacnzika IMG.
Jak chcesz jako tlo, to przy pomocy stylu background-image

2014-03-17 10:27:27 Post #7 mordrag

 
ok dzieki obrazki skapowałem a czemu mam taka dziure tu na stronce?

http://vpx.pl/i/2014/03/17/sc1.jpg

2014-03-17 10:31:29 Post #8 nospor

 
Otwierasz OL ale nigdzie go nie zamykasz

2014-03-17 10:36:18 Post #9 mordrag

 
ol jest otwarte to czemu mam dziure?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello, HTML5!</title>



<style>

header {height:100px;width:1000px; background-color:#00A693; border:1px solid white;clear:both}

article {height:500px; width:500px; background-color:#00A693; border:1px solid white;clear:both }

aside {height:500px; width:500px; background-color: #00A693; position:absolute; margin-left:500px; bottom:113px;border:1px solid white;clear:both}

footer {height:60px; width:1000px;background-color:#00A693;boder:1px solid white;clear:both;}



ol {
list-style-type:none;
padding:0;
margin:0;
background-color:#FFF;
font-size:18px;
height:2em;
line-height:2em;
text-align:center;
}

ol a {
display:block;
text-decoration:none;
color:#000;
padding:0 5px;
}


ol > li {
float:left;
width:150px;
margin-left:1px;
background-color:#FDD700;
height:2em;
}


ol > li:first-child {
margin-left:0;
}


ol > li:hover {
background-color:#EEE;
}

ol > li:hover > a {
color:#09C;
}

ol > li:hover > ul {
display:block;
}

ol > li > ul {
display:none;
list-style-type:none;
padding:0;
margin:0;
}


ol > li > ul > li {
position:relative;
background-color:#EEE;
}


ol > li > ul > li > a {
border-top:1px solid #FFF;
}

ol > li > ul > li:hover {
background-color:#DDD;
}

ol > li > ul > li:hover > a {
color:#09C;
}

</style>
</head>

<body>
<header>naglowek</header>

<article>

<ol>
<li><a href="#">dział - 1</a>
<ul>
<li><a href="#">link - 1</a></li>
<li><a href="#">link - 2</a></li>
<li><a href="#">link - 3</a></li>
<li><a href="#">link - 4</a></li>
<li><a href="#">link - 5</a></li>
</ul>
</li>

</article>

<aside>aside</aside>

<footer>stopka</footer>

</body>

</html>

2014-03-17 10:41:02 Post #10 nospor

 
No widze ze jest otwarte.... toc ci pisze, ze jak cos otwierasz, to masz to potem zamknąć...

2014-03-17 10:50:19 Post #11 mordrag

 
zamknałem i dalej dziura jak to wsadzić do <article>?

2014-03-17 10:53:42 Post #12 nospor

 
Wywal z definicji styli dla OL o to:
background-color: #FFF;
i bedzie git.

2014-03-17 10:59:06 Post #13 mordrag

 
dzieki pomogło, w tych przeróbkach jestem jeszcze słaby:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello, HTML5!</title>

<style>

header {height:100px;width:1000px; background-color:#00A693; border:1px solid white;clear:both}

article {height:500px; width:500px; background-color:#00A693; border:1px solid white;clear:both }

aside {height:500px; width:500px; background-color: #00A693; position:absolute; margin-left:500px;

bottom:113px;border:1px solid white;clear:both}

footer {height:60px; width:1000px;background-color:#00A693;boder:1px solid white;clear:both;}





a {
display:block;
text-decoration:none;
color:#000;
padding:0 5px;
}

li {
float:left;
width:150px;
margin-left:1px;

height:2em;
}

li:first-child {
margin-left:0;
}


li:hover {

}

li:hover > a {
color:#09C;
}


li:hover > ul {
display:block;
}


li > ul {
display:none;
list-style-type:none;
padding:0;
margin:0;
}

li > ul > li {
position:relative;

}


li > ul > li > a {
border-top:1px solid #FFF;
}


li > ul > li:hover {

}

li > ul > li:hover > a {
color:#09C;
}

</style>
</head>

<body>
<header>naglowek</header>

<article>

<li><a href="#">menu</a>
<ul>
<li><a href="#">link - 1</a></li>
<li><a href="#">link - 2</a></li>
<li><a href="#">link - 3</a></li>
<li><a href="#">link - 4</a></li>
<li><a href="#">link - 5</a></li>
</ul>
</li>

</article>

<aside>aside</aside>

<footer>stopka</footer>

</body>

</html>

Odpowiedz

Ostatnio na forum

  1. PHP Developer - Gdań... moze kobieta
  2. PHP Developer - Gdań... Tomek ARforce
  3. Hackathon Distribute... aleksandra_c
  4. Klasa obsługi szablo... freeboc
  5. PHP [Symfony] Develo... NewPerspective
  6. [Wrocław][PHP Develo... Software house Amsterdam Standard sp. z o.o.
  7. Senior PHP Developer... Kingit

Skrypty użytkowników

  1. Klasa obsługi szablo... Lirdoner
  2. Sekcje user76
  3. Klasa walidująca for... user76
  4. Licznik Gości online korey
  5. Form Builder Comandeer
  6. Dynamiczny licznik z... korey
  7. Captcha Comandeer