Cze??,
chcia?bym poprosi? Was o pomoc w zaokr?gleniu rogów menu za pomoc? skryptu Nifty Corners. Krótko mówi?c - div wype?niony tekstem bez problemu si? zaokr?gla, za to div z menu si? buntuje.
Kod strony:
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
<meta name="Description" content=" opis strony " />
<meta name="Keywords" content=" slowa kluczowe " />
<meta name="Author" content=" Hoopak " />
<title> Loerm ipsum </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#tresc","big");
Nifty("div#multi_drop_menus");
}
</script>
<link rel="stylesheet" href="niftyCorners.css" type="text/css" />
</head>
<body>
<div id="logo">
<a href='index.html'>
<span id='vip'> VIP </span><br/>
<span id='salon'>SALON PI?KNO?CI</span>
</a>
</div>
<!-- MENU !-->
<div id='multi_drop_menus'>
<ul>
<li><a href='#'>O Nas</a> </li>
<li> <a href='#'>Oferta salonu</a>
<ul>
<li><a href='#'>Fryzjerstwo</a></li>
<li><a href='#'>Kosmetyka</a></li>
<li><a href='#'>Solarium</a></li>
<li><a href='#'>Makija? wieczorowy</a></li>
<li><a href='#'>Makija? ?lubny</a></li>
<li><a href='#'>Analiza kolorystyczna</a></li>
<li><a href='#'>Lekcje makija?u</a></li>
<li><a href='#'>Metamorfoza</a></li>
<li><a href='#'>Obs?uga sesji foto <br/> i planu filmowego</a></li>
<li><a href='#'>Makija? do pokazów mody</a></li>
<li><a href='#'>Makija? do portfolio</a></li>
<li><a href='#'>Body painting</a></li>
<li><a href='#'>Wieczorki panie?skie</a></li>
</ul>
</li>
<li> <a href='zaproszenia.html'> Zaproszenia </a> </li>
<li> <a href='cennik.html'> Cennik </a> </li>
<li> <a href='#'> Aktualno?ci </a> </li>
<li> <a href='#'> Wspó?praca </a> </li>
<li> <a href='#'> Komentarze </a> </li>
<li> <a href='#'> Kontakt </a> </li>
</ul>
</div>
<div id="tresc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec nibh lorem. Nulla orci turpis, sollicitudin sit amet pharetra non, fermentum dignissim mauris. Cras quis augue quis lorem rutrum adipiscing ac a ante. Nulla tincidunt arcu eu risus ultricies sit amet hendrerit dolor commodo. Donec eleifend adipiscing magna, et lobortis dui semper eu. Curabitur vehicula consequat consequat. In rhoncus vulputate massa, nec dictum eros fermentum a. Cras dictum auctor commodo. Proin posuere felis arcu. Nulla in nibh lacus. Curabitur egestas purus a arcu varius lacinia. Nulla euismod, velit et viverra suscipit, lorem massa malesuada sem, vel aliquet nulla justo nec magna. Ut augue sapien, fringilla id iaculis sit amet, facilisis vitae est. Etiam sit amet dolor ut lacus tincidunt mattis. Vestibulum tortor purus, aliquam vel blandit id, tincidunt sed enim. Nunc turpis leo, lobortis vel hendrerit blandit, iaculis eu elit. Integer id arcu a mi malesuada posuere ut non elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
<div id='stopka'>
</div>
<div id='podstopka'>
CORPINGHT!
</div>
</body>
</html>
Kliknij i zaczekaj na załadowanie kodu ...
Oraz CSS:
body {font-family: veranda, arial, sans-serif;background:#771718; background-image:url(background.PNG); margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#tresc {
padding: 7px 7px;
margin-top: 7%;
margin-left: 15%;
margin-bottom: 10%;
background-color: #CECFD1;
width: 70%;
}
#logo {
margin-left: 10%;
}
#logo a {
text-decoration: none;
color: white;
font-family: times;
font-weight: bold;
}
#vip {
text-decoration: underline;
font-size: 90px;
}
#salon {
margin-left: 4%;
}
#stopka {
width: 100%;
height: 6px;
background-color: red;
}
#podstopka {
text-align: right;
color: white;
font-weight: bold;
font-size: 10px;
}
/* menu */
#multi_drop_menus* {
margin: 0 0 0 0;
}
#multi_drop_menus {
float:left;
margin-top: 3%;
margin-left: 10%;
padding-left: 0;
background-color: #CECFD1;
height: 22px;
width: 80%;
}
#multi_drop_menus ul {
float:left;
margin-top: 0px;
}
#multi_drop_menus li {
list-style-type:none;
float:left;
position:relative;
}
#multi_drop_menus a {
color: #6F1413;
text-decoration: none;
padding-right: 10px;
font-size: 19px;
font-variant: small-caps;
font-weight: bold;
}
#multi_drop_menus li ul {
position: absolute;
padding: 5px 5px 5px 5px;
width: 15em;
display:none;
}
#multi_drop_menus li:hover ul{
display:block;
background-color: #CECFD1;
}
#multi_drop_menus li ul li{
width:100%;
}
#multi_drop_menus a:hover {
color: #CECFD1;
background: #6F1413;
}
/*koniec menu*/
Kliknij i zaczekaj na załadowanie kodu ...
Ca?o?? oraz pi?kny efekt jak "zaokr?gla" menu mo?na zobaczy? tutaj:
http://hoopak.na1...index.html
hoopak dodał/a następującą grafikę:
|
v7.02.04
Rozwiń Kod źródłowy HTML
Nie pomagam na komunikatorach oraz PW!
