Sat, 2009-12-19 18:23
Hello
I am fairly new to CSS. I have worked in web development for a while but not really the design side of things. I have used Artisteer for the last 9 months or so to develop Joomla sites. I just edited the CSS to my liking. Now I am trying to put together a pretty simple Joomla template on my own without Artisteer and I am stuck with the CSS positioning. This is probably a simple answer to change the code but I cant seem to find it. The messed up template is up at http://www.techsaviour.com/test. I just need help on aligning everything. Right now I am using negative margin values. It worked at first but then I changed the modules and everything screwed up. The css code is below as well as index.php
The header is one div and then two div classes (top_left and top_right) top_left is a module position but when I enable the module it messes up the whole header.
I also need help with the main content and right module css (sidebar)
ANY help is greatly appreciated! A fix or just some css tips in general.
Thanks
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; background-image: url(../images/bg.jpg); background-repeat:repeat-x; } #wrap { min-width:460px; max-width:770px; width:auto; /*Important!*/ text-align:left; margin:0 auto; /*aligns page to middle*/ } #header{ margin-top:-8px; width:100%; height:267px; background-color:#CCC; } .top_left{ margin:0; padding-top:15px; padding-left:10px; background-color:#490e14; height:100%; width:200px; } .top_right{ position:relative; height:100%; margin-top:-282px; margin-left:200px; background-image:url(../images/index_02.jpg); background-repeat:no-repeat; } #content{ width:550px; background-color:#FFF; padding-left:10px; padding-right:10px; } #sidebar{ float:right; height:385px; width:205px; margin-top:-400px; padding-top:15px; background-color:#FFF; border-left-width: 1px; border-left-style: dotted; border-left-color: #cccccc; } #footer{ text-align:center; } .contentheading{ font-family: Georgia,"Times New Roman",Times,serif; font-size: 24px; font-weight: normal; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #cccccc; padding: 5px 5px; margin-bottom: 10px; }
<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?> <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/sample/css/template.css" type="text/css" /> <?php if($this->countModules('left and right') == <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> $contentwidth = "100"; if($this->countModules('left or right') == 1) $contentwidth = "80"; if($this->countModules('left and right') == 1) $contentwidth = "60"; ?> <!-- Makes module columns collapsable --> </head> <body> <div id="wrap"> <div id="header"> <div class="top_left"> <jdoc:include type="modules" name="topleft" style="xhtml" /> </div> <div class="top_right"> <jdoc:include type="modules" name="topleft" style="xhtml" /> </div> </div> <div id="topmenu"> <jdoc:include type="modules" name="topmenu" style="xhtml" /> </div> <div id="content" <?php echo $contentwidth; ?>> <jdoc:include type="component" /> </div> <?php if($this->countModules('right')) : ?> <div id="sidebar"> <jdoc:include type="modules" name="right" style="xhtml" /> </div> <?php endif; ?> <?php if($this->countModules('footer')) : ?> <div id="footer"> <jdoc:include type="modules" name="footer" style="xhtml" /> </div> <?php endif; ?> </div> </body> </html>
Tue, 2010-01-12 16:41
#1
RE: CSS help on Joomla template Please
TechGuy1,
I took a look at the site but I'm not sure I see what the problem is. Can you be more specific in describing what you'd like to have happen and what exactly is not working?