Wrox Programmer Forums
|
BOOK: Professional Joomla! ISBN: 978-0-470-13394-1
This is the forum to discuss the Wrox book Professional Joomla! by Dan Rahmel; ISBN: 9780470133941
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Professional Joomla! ISBN: 978-0-470-13394-1 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old July 29th, 2011, 01:17 PM
Registered User
 
Join Date: Jul 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Chapter 3: Rounded corners not working?

I'm fairly new to Joomla & CSS, so this is (no doubt) due to something I'm doing - but I can't get the rounded corner graphics to work (Chapter 3, pp 60-68). Can anyone help me with this?

The CSS to create the first div showing the top-left corner works - the top left corner of .moduletable is rounded. But the others remain stubbornly unround.

Here's the CSS and index.php code. I entered it myself, but I've also checked it over and over for errors using my eyes and Firebug, and can't find a problem that would cause this.

Here's the code:

PHP (index.php) -

Code:
<html>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template
	?>/css/template.css" type="text/css" />
</head>

<body>

<jdoc:include type="message" />
<div id="logo"> </div>

<div id="colLeft">
    <jdoc:include type="modules" name="left" style="xhtml" />
    <div class="ArticleFooter"><p>&nbsp;</p> </div>
</div>

<div id="colCenter">
   <jdoc:include type="component" />
</div>

<div id="colRight">
   <jdoc:include type="modules" name="right" style="xhtml" />
   <div class="ArticleFooter"><p>&nbsp;</p></div>
</div>

<jdoc:include type="modules" name="debug" />
</body>
</html>
CSS:

Code:
/* Template Styles for the three column template */

/* Define the columns for layout with no visible borders */
#colLeft { float: left; width: 15%; padding: 5px;}
#colCenter {float: left; width: 60%; padding: 5px; }
#colRight { float: left; width: 15%; padding: 5px; }

/* Set the default font for body text */
Body {
font-family: Tahoma,Helvetica,Arial,sans-serif;
font-size: 0.7em/1.5;
}

/* Display the organizational logo */
#logo {
	width: 110%; height: 100px;
	margin-left: -10px;
	background: url(../images/logo.png) left no-repeat;
	border: 1px solid #244223 ;
	padding: 20px;
}

/* Create the first div that shows the top-left rounded corner */
.moduletable, .moduletable_menu {
	margin-top: 10px;
	background: #999   url(../images/topleft.gif)
	top left no-repeat;
	width: 90%;
}


/* Display the top-right rounded corner */
div.moduletable h3, .moduletable_menu h3, {
	background: url(../images/topright.gif)
	top right no-repeat;
	padding: 10px;
	border-bottom: 1px solid #fff;
	margin: 0;
	color: #FFFFFF;
}

/* Align the poll question correctly */
.moduletable table {
	margin-top: -1em;
}

/* Set the poll question parameters */
.poll td {
	font-size: 80%;
	margin-left: 5px;
	padding-left: 0px;
	margin-right: 5px;
	margin-top: 0em;
	padding-top: -10px;
{

.latestnews, .mainmenu, .keyconcepts, .othermenu {
	background: #ccc
	top right repeat-y;
	margin-left: 5px;
	padding-left: 0px;
	margin-right: 5px;
	margin-top: 0em;
}
					
div.moduletable li, .mainmenu li, .keyconcepts li, .othermenu li {
	background: #ccc
	top right repeat-y;
	margin-left: 1.5em;
	/*margin-top: -2em;*/
	padding: 5px;
	font-size: 80%;
}

.ArticleFooter {
	background: url(../images/bottomleft.gif);
	bottom left no-repeat;
	/* clear: both;*/
	margin: -14px 0px 0px 0px;
}

.ArticleFooter p {
	background: url(../images/bottomright.gif);
	bottom right no-repeat;
	display: block;
	clear: both;
	padding: 0 15px 15px 15px;
	margin: -0.8em 0 0 0;
}





Similar Threads
Thread Thread Starter Forum Replies Last Post
how to make image bix edges rounded seco Dreamweaver (all versions) 0 April 9th, 2007 05:30 PM
rounded corners chrisgm187 CSS Cascading Style Sheets 1 January 30th, 2007 01:16 AM
Rounded VB forms??? Lost_Found VB How-To 4 June 26th, 2004 01:05 AM
decimal values is rounded hosefo81 PHP Databases 2 December 9th, 2003 01:50 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.