Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > PHP/MySQL > BOOK: Professional Joomla! ISBN: 978-0-470-13394-1
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Display Modes
  #1 (permalink)  
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;
}
 


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 12: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 12:50 AM



All times are GMT -4. The time now is 02:28 AM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.