Nifty Corners

256 Posts

joshlfisher Reply #1, 19 years, 11 months ago

I would like to use Nifty Cube on a template I am working on.
I found some examples here:

http://www.html.it/articoli/niftycube/index.html

I tried setting it up, but it didn’t work. Here’s what I did:

Added this in the header:

<script type="text/javascript" src="assets/js/niftycube.js"></script>

Added this after <body> tag:

<script type="text/javascript">
window.onload=function(){
Nifty("div#page","big");
}
</script>

I uploaded the files in the zip from the example page to /assets/js/ :
niftycorners.css
niftcube.js
niftylayout.css
niftylayout.js

I would like to be able to have a gradient background with a centered page w/ rounded corners.

What am I missing?

PM me to find out how you can get a FREE ipad 2!

788 Posts

jesster444 Reply #2, 19 years, 11 months ago

I don’t know what you are missing with the Nifty Corners thing. But you can accomplish what you are trying to do without using Javascript. I did a quick mock up for you here:

http://www.fredsbarn.com/sandbox/corners.html

Jesse R.
Consider trying something new and extraordinary.
Illinois Wine

Have you considered donating to MODx lately?
Donate now. Every contribution helps.

256 Posts

joshlfisher Reply #3, 19 years, 11 months ago

Thank you, Jesse!
I was able to get little quarter-round graphics (part of a CSS bullet, right?) to show up, but that was about it.
I am horribly lacking in CSS understanding. What I would like to do is to round the corners of the #page div. Heres my basic template:

<!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>[(site_name)] | [*pagetitle*]</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <META name="verify-v1" content="4674DQNmnSZcZMO6hRg36qOapUQL+1O7Itu+3YX1emM=" />
	<!--<link rel="stylesheet" href="[(base_url)]assets/templates/backinblack/testing.css" type="text/css" media="screen" />-->
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
	<link rel="icon" type="image/png" href="http://throughmylensphotography.com/tmlpicon.png" />
    <base href="[(site_url)]" />

<!--[if lte IE 6]>

  <style type="text/css" media="screen, tv, projection">
        body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */
        #content { margin-left: 22px; } /* to avoid the BMH */
        a,  a:link { border-bottom-style: solid } /* becuase IE just doesn't dot */
  </style>


<script type="text/javascript" src="assets/js/sleight.js"  ></script>
<script type="text/javascript" src="assets/js/sifr.js"     ></script>
<script type="text/javascript" src="assets/js/niftycube.js"></script>

<![endif]-->

	<script src="manager/media/script/scriptaculous/prototype.js" type="text/javascript"></script>
    <script src="manager/media/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>
	<link href="testing.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="curvy">
	<div id="ctl">
		<div id="quadtl">•</div></div>
	<div id="cbl"><div id="quadbl">•</div></div>
	<div id="ctr"><div id="quadtr">•</div></div>
	<div id="cbr"><div id="quadbr">•</div></div>

	<div id="page">
		<div id="header">
			<div id="topheader"></div>
			<div id="headertitle"></div>

	  </div>
<!-- close #header -->
	<div id="content">
			<div class="post">
				<h3 id="post-">Photography By Seth Fisher<br /><br />[*longtitle*]</h3>[*navbartext*] [*#content*]
			</div>
<!-- close .post (main column content) -->
	</div>
<!-- close #content -->
	<div id="sidebar">
      <p>[*sidebar*]</p>
      </div>
	<div class="clear"> </div>

	<div id="footer">{{Footertext}}</div>
<!-- close #footer -->

	</div>
<!-- close #page -->
</div>
 </body>
</html>

I am trying to build a page that is a fullpage gradient background defined in <body> with slightly more narrow black, rounded corner section defined in<page>.

Here is my CSS:

/*
Theme Name: backinblack
Theme URI: http://www.tattoocms.it/templates/backinblack.html
Author: Nicola Lambathakis


------------------------------------------------------------------------- */

/* THIS IS THE START OF ROUND CORNERS CSS                       */
<style type="text/css">

#curvy {position:relative; width:776px; height:500px; background-color: #000; color:#000; margin:10px auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#000; overflow:hidden;}
#ctl {top:0px; left:-2px; margin-top: 10px;}
#cbl {top: 480px; left:-2px;}
#ctr {top:0px; left:776px; margin-top: 10px;}
#cbr {top: 480px; left:776px;}
#quadtl, #quadtr, #quadbl, #quadbr {position:absolute; font-size:150px; font-family:arial; line-height:40px;}
#quadtl, #quadtr {color:#000;}
#quadbl, #quadbr {color:#000;}
#quadtl {left:-8px;}
#quadtr {left:-25px;}
#quadbl {left:-8px; top:-17px;}
#quadbr {left:-25px; top:-17px;}
#page {
	position:absolute;
	top:5px;
	left:5px;
	width:776px;
	height: 263px;
}
#page p {font-size:14px; line-height:17px; color:#fff;}

</style>

/*             THIS IS THE START OF THE STANDARD CSS                            
#page {
	width: 776px;
	text-align: left;
	background-repeat: repeat-x;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-color: #000000;
	background-image: url(imgs/bgpage.jpg);
}




 */
* {
    margin: 0;
    padding: 0;
}
body {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: small;
	text-align: center;
	color: #FFFFFF;
	background-color: #000000;
	background-repeat: repeat-x;
	margin-bottom: 0px;
	background-image: url(imgs/bgpage.jpg);
}
#textsummary {
	background-image: url(imgs/bglines.gif);
	background-repeat: repeat;
	padding: 4px;
}
div, p, img, a, td, ul, ol {
    font-size: 1em;
}
#searchbox {
	top: 15px;
	width: 230px;
	position: absolute;
	left: 20px;
	height: 30px;
	padding: 0px;
	font-style: italic;
	font-weight: bold;
	color: #FFFFFF;
}
#topbox {
	top: 140px;
	width: 230px;
	position: absolute;
	left: 580px;
	height: 50px;
	color: #FFFFFF;
	font-size: 100%;
	font-weight: normal;
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 30px;
}

b {
	color: #DEB67A;
}


ol {
    margin-left: 1em;
    padding-left: 1em;
}
ol li {
    margin-left: 1em;
    padding: 0 0 .5em .3em;
    list-style: decimal;
}
/* ---[ links ]------------------------------- */

a:link {
	color: #efeeee;
	text-decoration: none;
	background-color: transparent;

	}
a:visited {
	color: #efeeee;
	text-decoration: none;
	background-color: transparent;
	}
a:hover {
	color: #00CCFF;
	text-decoration: none;
	}
a.more {
	padding-right: 7px;
	background: url(../img/more-blue.gif) no-repeat 100% 5px;
	background-color: #9D9A95;
	}

/* ---[ common elements ]--------------------- */

p {
	margin: 1em 0 1em;
	padding: 0;
	}
h1 {
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-size: 150%;
	font-weight: normal;
	padding: 5px;
	margin: 10px;
	color: #FFFFFF;
	}
h2 {
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-size: 150%;
	font-weight: normal;
	padding: 0;
	margin: 0 0 1em 0;
	color: #CC6600;
	background-repeat: repeat-y;
	}
h3 {
	margin: 1.5em 0 0 0;
	padding-top: 5px;
	padding-bottom: 2px;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-size: 120%;
	font-weight: bold;
	color: #FFFFFF;
	background-image: url(/imgs/dotbig.gif);
	background-color: transparent;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #efeeee;
	}
h3 a:link, h3 a:visited {
	font-size: 110%;
	text-decoration: underline;
	border-bottom: none;
	color: #EAC994;
	}
h3 a:hover {
	color: #CC9900;
	}
h4, h5 {
	margin: 1.5em 0 0 0;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-size: 130%;
	font-weight: bold;
	color: #FFFFFF;
	}
h1 span, h2 span, h3 span {
	color: #ED0608;
	}

p { padding: 0 0 1em; }

a, a:link {
    text-decoration: underline;
    color: #CCCCCC;
}
a:visited { color: #CCCCCC; }
a:hover { color: #FFFFFF; text-decoration: none;}
a:active { color: #FFFFFF; text-decoration: none;}


a img, img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #ED0608;
	border-right-color: #ED0608;
	border-bottom-color: #ED0608;
	border-left-color: #ED0608;
}

ul {
    list-style: none;
    margin: 0 0 20px 1em;
}
li {
    list-style: none;
    padding-left: 1em;
    margin-bottom: 3px;
}


.clear {
	clear: both;
	height: 1px;
	margin: -1px 0 0;
	font-size: 1px;
}


#page {
	width: 776px;
	text-align: left;
	background-repeat: repeat-x;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	background-color: #000;
}

#content {
	float: left;
	text-align: left;
	width: 540px;
	padding: 0;
	line-height: 1.5em;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 20px;
	color: #FFFFFF;
	background-color: #000000;
}
#content h3 {
	color: #efeeee;
	height: 32px !important; /* for most browsers */
	height /**/:57px; /* for IE5/Win */
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0px;
}

/* Album Nav bar*/
#albumnav {
	position: relative;
	padding-top: 3px;
	padding-bottom: 5px;
	padding-left: 2px;
	left: 0px;
	top: 0px;
	height: 20px;
	z-index: 5;	
}
#albumnav ul {
	padding: 5px 0 5px 0;
	margin: 0 0 0 0;
}

#albumnav li {
	list-style-type: none;
	display: inline;
	margin: 0;
	padding: 0;
}

#albumnav a:link, #albumnav a:visited {
	line-height: 14px;
	margin: 0 10px 4px 10px;
	text-decoration: none;
	color: #CCC;
	padding-bottom: 5px;
}

#albumnav a.indicator:link, #albumnav a.indicator:visited {
	border-bottom: 4px solid #FFF;
	padding-bottom: 5px;
	color: #FFF;
}

#albumnav a:hover {
	color: #FFF;}

/* Header
------------------------------------------------------------------------- */


#sitetitle {
    margin: 0;
	color: #efeeee;
	text-shadow: #81A75B 2px 2px 2px;
	text-align: center;
	padding-right: 20px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding-top: 4px;
	padding-right: 4px;
	padding-left: 4px;
	padding-bottom: 0px;
	font-style: normal;
	font-weight: bold;
	font-size: xx-large;
	background-repeat: no-repeat;
	background-position: left top;
	height: 75px;
	z-index: 3;
	}


#topheader {
	background-image: url(imgs/tmlpheadergraph.png);
	background-repeat: no-repeat;
	background-position: center;
	height: 75px;
	padding-top: 5px;
	z-index: 1;

}
#headertitle {
	height: 100px;
	background-image: url(imgs/tmlpheadertitle.png);
	background-repeat: no-repeat;
	background-position: center;
	padding-bottom: 5px;
	
}

#header {
	position: relative;
	background-repeat: no-repeat;
	background-position: left;
	height: 173px;
	background-color: #000000;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 0px;
	padding-left: 4px;
	margin-bottom: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	z-index: 2;
	visibility: visible;
}

#header h1 {
	margin: 0;
	color: #efeeee;
	text-shadow: #81A75B 2px 2px 2px;
	text-align: center;
	padding-right: 20px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding-top: 15px;
	padding-bottom: 0px;
	padding-left: 20px;
	font-family: Rage Italic;
	font-style: normal;
	font-weight: bold;
	font-size: 50px;
	background-repeat: no-repeat;
	background-position: left top;
	height: 75px;
	z-index: 3;
}
#header h1 a {
    text-decoration: underline;
    border-bottom: none;
    color: #FFFFFF;
	z-index: 2;
}
#header h1 a:hover {
    color: #efeeee;
    text-shadow: #fff 0 0 4px;
}

/* Flex Search Form styles--------------------- */

.FSF_input {
	color: #FFFFFF;
	width: 55%;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 1px;
	padding-left: 5px;
	border: 1px solid #FFFFFF;
	background-color: #666666;
	background-image: url(imgs/bglines.gif);
	background-repeat: repeat;
   }
#login {
	background-color: #CCCCCC;
}
#date {
}



	.FSF_input:focus {
	border: 1px solid #CC6600;
	color: #990000;
	background-color: #333333;
	background-image: url(imgs/bgsearch.gif);
	background-repeat: repeat;
   }

.FSF_submit, .FSF_submit:focus {
	margin-left: 5px;
	height: 22px;
	width: 22px;
	border: 0;
	text-indent: -9999px;
	cursor: pointer;
	background-image: url(imgs/search.gif);
	background-repeat: no-repeat;
    }

.submit:hover, .FSF_submit:hover {
	height: 22px;
	width: 22px;
	border: 0;
	cursor: pointer;
	background-image: url(imgs/searchover.gif);
	background-repeat: no-repeat;
    }

	/*---Post ----*/

	#RightPost {
	margin-bottom: 2px;
	margin-left: 2px;
	padding: 5px;
	}
#summaryPost {
	padding: 5px;
	margin-bottom: 2px;
}
#summaryPost h3 {
	color: #EAC994;
	height: 52px!important; /* for most browsers */
	height /**/:57px; /* for IE5/Win */
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 60px;
	background-image: url(imgs/bgsummaryh3.gif);
	background-repeat: no-repeat;
	}

	#summaryPost a:hover {
	color: #FFFFFF;
	}
#summaryPost a:link  {
	color: #EAC994;
	font-size: 100%;
	}
#summaryPost a:visited {
	color: #EAC994;
	font-size: 100%;
	}
#summaryPost a:hover {
	color: #FFFFFF;
	}
#summaryPost a:link  {
	color: #EAC994;
	font-size: 100%;
	}
#summaryPost h3 a:visited {
	color: #EAC994;
	font-size: 100%;
	}

.post {
	border-bottom: 1px solid #ddd;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1.5em;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 1.5em;
	padding-left: 10px;
}

.post h3 {
    margin-top: 0;
    color: #EAC994;
}
.post ul li {
	background: url(imgs/tictac_orange.gif) no-repeat 0 6px;
	margin-left: 0em;
}



/* Related Links
------------------------------------------------------------------------- */
#navlist li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}


/* Sidebar
------------------------------------------------------------------------- */

#sidebar {
	font-size: 85%;
	line-height: 1.4em;
	color: #FFFFFF;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 562px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 4px;
	border-left-style: none;
	/*background-image: url(imgs/bgpage.gif);*/
	background-repeat: repeat;
	background-color: #000000;
}

#sidebar h1 {
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-size: 150%;
	font-weight: normal;
	padding: 5px;
	margin: 10px;
	color: #FFFFFF;
}

#sidebar h2 {
    padding: 25px 0 0 35px;
    color: #666;
    height: 32px !important; /* for most browsers */
    height /**/:57px; /* for IE5/Win */
}

#sidebar ul, #sidebar p {
	margin-left: -5px;
	margin-top: 5px;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 1em;
	padding-left: 15px;
}

#sidebar h3 {
	color: #00FF00;
	font-size: 140%;
	background-repeat: repeat;
	background-position: left top;
	font-weight: bold;
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 12px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 15px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	}
#sidebar h3 a:hover {
	color: #CCCCCC;
	font-weight: bold;
	font-size: 140%;

	}
	#sidebar h3 a:link, h3 a:visited {
	font-size: 120%;
	text-decoration: none;
	border-bottom: none;
	color: #efeeee;
	font-weight: bold;
	}

#sidebar h4 {
	color: #FFFFFF;
	font-size: 120%;
	border: none;
	margin-top: 30px;
	margin-right: 0;
	margin-bottom: 12px;
	margin-left: 5px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 0;
	}
	#sidebar h4 a:hover {
	color: #efeeee;
	font-size: 120%;

	}
	#sidebar h4 a:link  {
	color: #FFFFFF;
	font-size: 120%;
	padding-left: 5px;

	}
	#sidebar h4 a:visited {
	color: #FFFFFF;
	font-size: 100%;


	}
#poll {
}


#sidebar img {
	vertical-align: top;
	padding: 0px;
	}
#news {
}



/* Footer
------------------------------------------------------------------------- */
#footer {
	margin: 0px;
	font-size: 85%;
	color: #FFFFFF;
	background-repeat: repeat;
	background-position: left bottom;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
	height: 62px;
	text-align: center;
	vertical-align: bottom;
	background-color: #3B4043;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-image: url(imgs/bglines.gif);
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #333333;
}

#footer p {
	background-image: url(imgs/bottom_sash.gif);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
}

#footer a {
	border-bottom: none;
	color: #FFFFFF;
	font-weight: bold;
}
/*---others---*/

fieldset {
    border: none;
}

legend {
	display: none;
}

/* images
------------------------------------------------------------------------------- */

p img {
	padding: 0;
	max-width: 100%;
}

img.centered {
	display: block;
	margin: 0 auto;
}
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}
  /*MENU left*/
  #menu {
	color: #C7FF42;
    }
#menu li {
    list-style: none;
    color: #C7FF42;
    background-image: url(imgs/button-li.gif);
    background-repeat: no-repeat;
    background-position: 0 -1px;
    padding-top: 2px;
    padding-right: 0px;
    padding-bottom: 2px;
    padding-left: 22px;
    }
    #menu li.here {
	font-size: 1em;
	background-image: url(imgs/button-li-here.gif);
	background-repeat: no-repeat;
	background-position: 0 0px;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 22px;
	color: #FFFFFF;
    }
#menu li li {
    font-size: 1em;
    background-image: url(imgs/button-lili.gif);
    background-repeat: no-repeat;
    background-position: 0 0px;
    padding-top: 2px;
    padding-right: 0px;
    padding-bottom: 2px;
    padding-left: 20px;
    }
#menu li li.here {
	font-size: 1em;
	background-image: url(imgs/button-lili-here.gif);
	background-repeat: no-repeat;
	background-position: 0 0px;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 20px;
	color: #FFFFFF;
    }
#menu li li li {
    font-size: 1em;
    background-image: url(imgs/button-lilili.gif);
    background-repeat: no-repeat;
    background-position: 0 0px;
    padding-top: 2px;
    padding-right: 0px;
    padding-bottom: 2px;
    padding-left: 22px;
    }
    #menu li li li.here {
	font-size: 1em;
	background-image: url(imgs/button-lilili-here.gif);
	background-repeat: no-repeat;
	background-position: 0 0px;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 22px;
	color: #FFFFFF;
    }
#menu ul {
    padding: 10px;
    margin: 5px;
    }
#menu ul ul {
    display:none;
    padding: 5px 10px 10px 0;
}
#menu li.here ul {
    display:block;
    padding: 3px 0 2px 13px;
    font-size: 1em !important;
    background-repeat: no-repeat;
    background-position: 0 5px;
  }
#menu ul ul ul {
    padding: 0 !important;
    margin: 0 0 -4px 0 !important;
    }
#menu a {
    font-size: 1em;
    text-decoration: underline;
    }
#menu a:link {
    color: #C7FF42;
    font-weight: normal;
	text-decoration: underline;
    }
#menu a:visited {
    color: #C7FF42;
	text-decoration: underline;
    }
#menu a:hover {
    color: #FFFFFF;
	text-decoration: none;
    }
  /*END MENU left*/
/*  poll.css - stylesheet settings for poll snippets */

  .poll {
  width:90%;
  font-size:1em;
  margin:8px;
  padding:0;

}
 .poll_container {
	width:90%;
	color:White;
	padding-top:0.5em;
	padding-bottom:0.5em;
	margin-left:auto;
	margin-right:35px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #A5C51A;
	border-right-color: #A5C51A;
	border-bottom-color: #A5C51A;
	border-left-color: #A5C51A;
	height: 200px;
}

.poll_comments_container {
  width:100%;
  background-color:#6D6D6D;
  color:White;
  border:1px solid black;
  padding-top:.5em;
  padding-bottom:.5em;
  padding-left:.5em;
  padding-right:.5em;
  margin-left:auto;
  margin-right:auto;
}
.poll_question {
  width:100%;
  text-align:center;
}
.poll_row_container {
  width:100%;
  padding:.1em 0;
}
.poll_choice {
  width:30%;
  float:left;
  text-align:left;
  padding-left:0em;
}
.poll_votes {
  width:15%;
  float:left;
  padding-right:.5em;
  text-align:right;
}
.poll_bar_container {
  width:35%;
  height:.98em;
  background-color:#6D6D6D;
  border:1px solid black;
  float:left;
  margin:.1em;
}
.poll_bar {
  height:.98em;
  background-color:#00FF7F;
  float:left;
  margin:0;
  padding:0;
}
.poll_percent {
  text-align:right;
  padding-right:1em;
  margin-left:2px;
  margin-right:2px;
}
.poll_totalvotes {
  width:45%;
  text-align:right;
}
.float_left_text_right {
  width:50%;
  float:left;
  text-align:right;
  margin:0;
  padding:0;
}
.float_right_text_left {
  width:50%;
  float:right;
  text-align:left;
  margin:0;
  padding:0;
}
.space_line {
  clear: both; margin: 0; padding: 0; width: 90%;
}

/* END - poll.css */
#readmore {
	background-image: url(imgs/bglines.gif);
	background-repeat: repeat-x;
	width: 120px;
	float: right;
	border: 1px solid #666666;
	text-align: center;
}
#authornews {
	float: left;
	width: 300px;
	font-size: 70%;
	font-style: italic;
}

PM me to find out how you can get a FREE ipad 2!

788 Posts

jesster444 Reply #4, 19 years, 11 months ago

Is there anyway you can post a link to the published page that is showing the bullets, but not your background image? That way I can get a better look at what is going on and offer better advice.

Jesse R.
Consider trying something new and extraordinary.
Illinois Wine

Have you considered donating to MODx lately?
Donate now. Every contribution helps.

788 Posts

jesster444 Reply #5, 19 years, 11 months ago

Also, without looking at anything further, the positioning of your bullets will likely be off. The positioning of your bullets takes into accoun the size of your bullets. Right now you have them set to "height=20px width=20px" So the positioning has to subtract off this size from the size of the DIV Container.

Since your width is set to 776px and your height is 500px then your bullet positioning should be like this:

#ctl {top:0px; left:0px;}
#cbl {top: 480px; left:0px;}
#ctr {top:0px; left:756px;}
#cbr {top: 480px; left:756px;}

Once I have a link to the page, I should be able to help more.

Jesse R.
Consider trying something new and extraordinary.
Illinois Wine

Have you considered donating to MODx lately?
Donate now. Every contribution helps.

256 Posts

joshlfisher Reply #6, 19 years, 11 months ago

Here’s the link:

http://throughmylensphotography.com/sandbox.html

PM me to find out how you can get a FREE ipad 2!

788 Posts

jesster444 Reply #7, 19 years, 11 months ago

Is this the kind of look you are going for, sans the blue gradient?

http://www.fredsbarn.com/sandbox/corners.html

Jesse R.
Consider trying something new and extraordinary.
Illinois Wine

Have you considered donating to MODx lately?
Donate now. Every contribution helps.

256 Posts

joshlfisher Reply #8, 19 years, 11 months ago

Almost...

Blue Gradient --> pure black

Black background --> light grey-to-dark grey gradient.

Also, I will have many <divs> nested under the rounded <div>.

I have set up a ’demo’ of what I am trying to achieve:

http://throughmylensphotography.com/sandbox.html

PM me to find out how you can get a FREE ipad 2!

788 Posts

jesster444 Reply #9, 19 years, 11 months ago

Alright,

I threw this together and I think it approximates what you are looking for:

http://www.fredsbarn.com/sandbox/corners.html

You should be able to place many <div> tags inside there, just make sure to take note of how you nest them and pay attention to what is inherited. I wasn’t sure if you wanted the white space at the bottom or the top, if you do, just simply change your background image to give that desired effect.

Also, the background for #ctl, #ctr needs to be set to as close of an approximation to the top of the gradient and #cbl, #cbr needs to be set to as close of an approximation as the bottom of the gradient. I just use the Color Picker tool in FireFox to accomplish this.

Jesse R.
Consider trying something new and extraordinary.
Illinois Wine

Have you considered donating to MODx lately?
Donate now. Every contribution helps.

256 Posts

joshlfisher Reply #10, 19 years, 11 months ago

Perfect! Jesse, You are a lifesaver! There is nothing like having an example l can look at, and tweak, to really learn something.

See here:

http://throughmylensphotography.com/sandbox.html

Just one question:
How do I get the text to show? tongue

I also need to find some way to stretch the gradient image down to the bottom of the page.
I don’t know if it is possible, but It seems like a good idea to use VML. (vector markup language?)
Anyone know what the browser and MODx compatibility is like on this?

PM me to find out how you can get a FREE ipad 2!