PDA

View Full Version : Nifty Corners - how do I ...



jerry62704
Oct 16th, 2008, 06:24 PM
I tried to add "Nifty Corners" to the following code and it didn't work for me. What am I doing wrong? The bottom of the menu buttons should be rounded.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Sigma Alpha Epsilon - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- IMAGE SWAP JAVA DEFINING AREA -->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//-->
</script>

<link rel="stylesheet" type="text/css" href="css.css" />
<style type="text/css">
/* above = lower case and in quotes
below this resets the defaults for all browsers
so you always start from a known position */
* {
margin: 0;
padding: 0;
border: 0;
}

/* normally you don't want the full url, but I don't have images here */
body {
background-image: url("http://hilltop.bradley.edu/~jkdavidson/backgroundstrips.jpg");
background-repeat: repeat-x;
font-family: "Book Antiqua", Arial, sans-serif;
font-size: 12px;
width: 100%;
height: 100%;
}

/* this sets tag properties */
p {
margin-top: 20px;
line-height: 150%;
color: #9F9F9F;
}

img {
margin: 0;
padding: 0px;
}

ul {
display: block;
list-style-type: none;
}

li {
background-color: #53099D;
float: left;
padding: 12px 20px;
height: 20px;
color: #fff;
}

li a {
color: #fff;
text-decoration: none;
padding: 5px;
border-top: #FF8585 2px solid;
border-right: #410000 2px solid;
border-bottom: #410000 2px solid;
border-left: #FF8585 2px solid;
}

li a:hover {
border-top: #410000 2px solid;
border-right: #FF8585 2px solid;
border-bottom: #FF8585 2px solid;
border-left: #410000 2px solid;
color: #ffff00;
}

hr {
margin: 10px auto;
width: 60%;
background-color: #000;
height: 2px;
}

/* this is the various divs - "id='xxx'" and the full URL as I don't
have the image here */
#containerDiv {
width: 750px;
height: 100%;
position: relative;
margin: 0 auto;
background-image: url("http://hilltop.bradley.edu/~jkdavidson/coatofarms.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-color: #fff;
}

#headerDiv {
margin: 0 auto;
}

#menuDiv {
postion: relative;
margin-left: auto;
margin-right: auto;
width: 65%;
}

#contentLeftDiv {
float: left;
margin-top: 10px;
margin-left: 10px;
width: 70%;
}

#contentRightDiv {
float: right;
margin-top: 10px;
margin-right: 10px;
}

#clearFloats {
clear: all;
}

/* this starts repeatable (class) css */
.menu {
color: #000;
font-size: 1em;
}

.newsStory {
margin-top: 10px;
font-weight: bolder;
}

.welcome {
font-size: 2em;
font-family: Tahoma, serif;
font-weight: bolder;
margin-bottom: 20px;
}

.toSAE {
font-weight: bolder;
font-family: Tahoma, serif;
font-size: .6em;
}

.rtop, .rbottom{
display:block
}

.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden
}

.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
</style>
</head>

<body>
<div id="containerDiv">
<div id="headerDiv">
<img src="http://hilltop.bradley.edu/~jkdavidson/banner_2_1.jpg" alt="" />
</div>

<div id="menuDiv">
<ul>
<li class="menu">
<a href="http://hilltop.bradley.edu/~jkdavidson/index.html">home</a>
</li>
<li class="menu">
<a href="http://hilltop.bradley.edu/~jkdavidson/aulmni.html">alumni</a>
</li>
<li class="menu">
<a href="http://hilltop.bradley.edu/~jkdavidson/recruitment.html">recruitment</a>
</li>
<li class="menu">
<a href="http://hilltop.bradley.edu/~jkdavidson/athletics.html">athletics</a>
</li>
<li class="menu">
<a href="http://hilltop.bradley.edu/~jkdavidson/history.html">history</a>
</li>
</ul>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>

<!-- arbitrary sized to 70% - if it gets too large (80% for example)
the right side will be pushed down to below it as there won't be
room to fit it in next to it -->
<div id="contentLeftDiv">
<p class="welcome">
Welcome <span class="toSAE">to Sigma Alpha Epsilon</span>
</p>

<p>
Information about the chapter in some kind of two paragraph form.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare
ultricies libero. Donec fringilla, eros at dapibus fermentum, tellus
tellus auctor erat, vitae porta magna libero sed libero. Mauris sed
leo. Aliquam aliquam. Maecenas vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare
ultricies libero. Donec fringilla, eros at dapibus fermentum, tellus
tellus auctor erat, vitae porta magna libero sed libero. Mauris sed
leo. Aliquam aliquam. Maecenas vestibulum.
</p>
</div>

<div id="contentRightDiv">
<img src="http://hilltop.bradley.edu/~jkdavidson/sae-flag.jpg"
width="175" alt="SAE Flag" />
</p>
<p class="newsStory">
News + Events
<hr />
</p>
<p class="newsStory">
News Story 1
</p>
<p>
information on the story
</p>
<p>
inexplicable third line
<hr />
</p>
<p class="newsStory">
News Story
</p>
<p>
information on the story
<br />
inexplicable third line
</div>

<!-- BOTTOM BUTTON BAR AREA -->
<!-- this will "clear" the floating divs above so whatever comes
next will be below what is above. -->
<div id="clearFloats">&nbsp;</div>

<div>
<img src="http://hilltop.bradley.edu/~jkdavidson/banner_4.jpg" alt="" />
</div>

</body>
</html>

tomws
Oct 16th, 2008, 07:26 PM
I use one of Nifty Corners' half-brothers, but not for individual buttons. Maybe you can reverse engineer what I've done with a box of links and apply it to your situation.


/*rounded corners*/
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ffffff; border-left:1px solid #666666; border-right:1px solid #666666;}
.xb1 {margin:0 5px; background:#666666;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}


...


<div class="boxwrapper">
<div class="xtop">
<div class="xb1">&nbsp;</div>
<div class="xb2">&nbsp;</div>
<div class="xb3">&nbsp;</div>
<div class="xb4">&nbsp;</div>
</div>
<div class="boxheader">box header text</div>
<div class="boxlink">
<a href="/link.php"><div>link tex</div></a>
</div>
<div class="boxlink">
<a href="/link.php"><div>link text</div></a>
</div>
<div class="boxlink">
<a href="/link.php"><div>link text</div></a>
</div>
<div class="xbottom">
<div class="xb4">&nbsp;</div>
<div class="xb3">&nbsp;</div>
<div class="xb2">&nbsp;</div>
<div class="xb1">&nbsp;</div>
</div>
</div>