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!
