1 reply [Last post]
TechGuy1
TechGuy1's picture
Offline
newbie
Last seen: 11 years 5 weeks ago
Timezone: GMT-5
Joined: 2009-12-19
Posts: 2
Points: 4

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>

metaslug001
metaslug001's picture
Offline
Regular
Seattle/Oakland/Berlin
Last seen: 10 years 51 weeks ago
Seattle/Oakland/Berlin
Timezone: GMT+1
Joined: 2010-01-06
Posts: 28
Points: 28

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?