Learn VBA & Macros in 1 Week!

CSS - I Need Help Asap! Template Isn't Coming Together!

Full Excel VBA Course - Beginner to Expert

I Need Help Asap! Template Isn't Coming Together!	View Content

I am trying to design a template and have spent hours trying to figure out where I'm going wrong. I am fairly experienced, but am used to designing with tables and read that it's better to design with DIV tags and assign CSS to position the elements (http://www.csszengarden.com ). The URL to the site I am designing is: http://www.electracustomhomes.com/new.php

Here is the XHTML code:

Code:

<!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="en" lang="en">
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
<body>
<div id="page">
	<div id="template_header_top">
		<div id="template_header_01"> </div>
		<div id="template_header_02"> </div>
		<div id="template_header_03"> </div>
	</div>
	<div id="template_header_bottom">
		<div id="template_header_04"> </div>
		<div id="template_header_05"> </div>
		<div id="template_header_06"><div id="search">{search}</div></div>
	</div>		
   <div id="template_left"></div>
   <div id="content">
      <div id="sidebar">
	      <div id="menu">
	         {menu template='simple_navigation.tpl' collapse='1'}
	      </div>	
	      <div id="news">
	         <h2>News</h2>
	          {news number='3' detailpage='news'}
	      </div>
      </div>
      <div id="main">
         <h2>{title}</h2><div id="print">{print showbutton=true script=true}</div>
         {content} <br />
         <div class="left49">
            <p>{cms_selflink dir="previous" label=""}</p>
         </div>
		 <div class="right49">
		 	<p>{cms_selflink dir="next" label=""}</p>
		 </div>
      </div>      
   </div>
  <div id="template_right"></div>
  <div id="template_footer">
	  <div id="template_bottom_left"></div>
	  <div id="template_bottom"></div>
	  <div id="template_bottom_right"></div>
   </div>
</div>
</body>
</html>

And the CSS to accompany it:

Code:

* {
margin:0;
padding:0;
}

body {
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   background-color: #620E0C;
   color: #000;
}

img {
   border: 0;
}

a,
a:link 
a:active {
   text-decoration: underline;
   background-color: inherit; 
   color: #620E0C; 
}
a:visited {
   text-decoration: underline;
   background-color: inherit;
  color: #620E0C; 
}

a:hover {
   text-decoration: none;
   background-color: inherit;
   color: #0000FF;
}

div#page {
   border: none;
   margin: 0 auto;
   width: 800px;
   color: #000;
}

div#content {
   clear: both;
   width: 775px;
   height: 100% !important;
   background-color: #ccc;
   color: #000;
   margin: 0px;
   padding: 0px;
}

div#template_left {
   height: 100%;
   width: 12px;
   background: url(uploads/images/template_left.jpg) repeat-y left top;
   float: left;
}

div#template_right {
   height: 100%;
   width: 12px;
   background: url(uploads/images/template_right.jpg) repeat-y right top;
   float: right;
}

div#main {
   width: 200px;
   height: 100%;
   float: right;
}


div#sidebar {
   width: 200px;
   height: 100%;
}

div#menu {
	width: 180px;
	height: 100%;
}

div#menu dfn {
	display: none;
}

div#menu li {
	list-style: none;
}

div#news {
   width: 180px;
   height: 100%;
}

div#template_footer {
   clear: both;
   height: 40px;
   color: #fff;
   background-color: #620E0C;
   margin: 0px;
   padding: 0px;
}

div#template_bottom_left {
   width: 12px;
   height: 40px;
   background: url(uploads/images/template_bottom_left.jpg) no-repeat left bottom;  
}

div#template_bottom {
   width: 775px;
   height: 40px;
   background: url(uploads/images/template_bottom.jpg) no-repeat center bottom;
}


div#template_bottom_right {
   width: 12px;
   height: 40px;
   background: url(uploads/images/template_bottom_right.jpg) no-repeat right bottom;
}

I hope I've given all the information you might require... like I said, I really don't know why it's not working.

Thanks in advance,
Marcus

Full Excel VBA Course - Beginner to Expert

Need Css Help Asap

Similar Tutorials

View Content

ok im very very new to css so i need to ask a few questions and get a few answers. i use css for link effects, table properties and various little tid bits and such, but ive never done a layout in pure css code. if anyone could help me it would be great, i looked on http://www.w3schools.com/css/css_examples.asp and couldnt find anything related.

ok what i need to know is how the make a shadow effect on <div> tags and i need to know how (if its possible) to make the corners round. another basic thing i dont know is how to display data in div tags like i would in tables with <td> tags. like 2 div tags side by side.

Thanks very much in advance!

Problem... Text Coming Out Of A Div...

Similar Tutorials

View Content

The DIV is set to 100% height...

http://www.webpagedesignrus.co.uk/DECS/services.php

Can you please tell me how to fix this? The site has to be done in 30 minutes...

Please help,

Thanks.

Where Is This Ghost Text Coming From In Ie6?

Similar Tutorials

View Content

There is some text appearing below the footer (see red background colored area) in my layout in IE6 and I don't know why. Can someone please take a look at:
http://rikahs.com/dermody/test.htm in IE6?

Here is a screenshot of the text:

Thank you.

Desperately Need Css Help Asap (hover - Image Question)

Similar Tutorials

View Content

I'm taking a condensed class at the community college here and my final is due tomorrow night. My teacher has a very thick Russian accent and is very difficult to understand, and does not make himself particularly available away from class hours...so...I'm sort of stuck. I understand that this is an embarrassingly basic CSS I've got rigged up here, so I need no critiquing on it, though if you feel you must, go ahead. Anyway, I was finishing the thing up tonight and realized that I missed one of the requirements for this final project (sloppy handwriting =( ). My main question is this: On each page I have a series of thumbnails, and one larger image at left. I would like to (either with addition to the CSS, or with not too much extra addition to each of the thirty some pages) create a hover effect wherein ONLY the larger image at left will load a larger version of the image on mouseover. I found a few examples on CSS tutorial websites but have been unable to correctly apply it. I am really in a jam and would appreciate any help anyone could give me on this. Additionally, (I know this one is really pushing it) I was not able to resize images, as I am on a new machine and a tight budget, so couldn't afford a copy of photoshop. Most of the images are already resized to 600 x 800 (downloaded from my photobucket account onto the new machine after the old died) but a few of them are larger sizes...so on the mouseover, is there a way to constrain all images to their correct proportions, regardless of filesize? I think this might be an impossibility but I thought it was worth the time to ask anyway (e.g. 600 x 800 images that are constrained to a smaller size, will pop over on mouseover to full 600 x 800, while images that may exceed those dimensions would still on mouseover pop over at a maximum of 600 or 800, whichever side is the largest, and the smaller size whatever it should be proportionally)?

I know this is really convoluted and probably sounds incredibly dumb, but most of us in the class have essentially self-taught ourselves, given how difficult our instructor is to follow in the classroom, so I've done everything on this project by trying to find examples in a pretty terrible text book.

Any help would be hugely appreciated.

I am pasting in the CSS sheet, as well as the code for an example page, so that someone might possibly be able to help me correct/add this.

If you are able to help, please be as explicit and obvious as possible, because I am having a hard time working this out on my own.

CSS:

html, body {
font: 11px "Arial", Lucida Grande, Verdana, Sans-Serif;
margin: 0;
padding: 0;
}

#container {
width:800px;
margin-left:auto;
margin-right:auto;
}

#header {
width:800px;
text-align:center;
margin-top:5px;
margin-bottom:5px;
}

#header h1 {
margin:0;
font-size:18px;
}

#breadcrumb {
list-style-type: none;
margin:0;
padding:0;
margin-left:auto;
margin-right:auto;
}

#breadcrumb li{
float:left;
color:black;
padding-right:3px;
}

#breadcrumb li a{
text-decoration:none;
font-style:italic;
color:black;
}

#nav {
list-style-type: none;
margin:0;
padding:0;
}

#nav li{
float:left;
text-align:center;
width:25px;
}

#nav li#pages{
width:700px;
font-size:14px;
}

#nav li a img{
border:0;
}

#content {
width:800px;
}

#large-image-frame {
width:400px;
float:left;
}

#large-image-box {
margin-top:5px;
padding-top:10px;
width:320px;
margin-right:auto;
margin-left:auto;
background-color:black;
padding-bottom:10px;
}

#large-image-box img{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}

#large-image-box span{
font-size: 12pt; display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
height:60px;
width:300px;
background-color:white;
}

#thumbnail-box {
width:400px;
float:left;
}

#thumbnails {
list-style-type: none;
margin:0;
padding:0;
float:left;
}

#thumbnails li {
margin:0;
padding:0;
float:left;
}

div.small-image-box {
background-color:black;
width:110px;
margin-bottom:10px;
margin-left:15px;
text-align:center;
padding-bottom:5px;
padding-top:5px;
}

div.small-image-box img {
margin-bottom:5px;
display:block;
margin-left:auto;
margin-right:auto;
}

div.small-image-box span {
height:10px;
width:100px;
background-color:white;
display:block;
font-size:9px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#instructions {
width:800px;
}

a:link, a:visited, a:active { text-decoration: none }

a:hover { color: black;
background-color: white;
text-decoration: none;
border: 2px solid black; }

and the section of code which I would like the mouseover to be effective on:

<div id="content">

<div id="large-image-frame">

<div id="large-image-box">

<img src="images/OP06.jpg" width="94%" height="94%" alt="OP06" />

The section in red is where the image is that I would like to be able to mouseover for a larger (approximately 600 x 800 or 600 x _______/ or _____________ x 800, depending on proportions). Again, I'm desperate, and would be super super grateful for any help/pity any of you might toss my way. Thanks.

How Do I Tell Which Css Code Is Coming From A Particular Style Sheet?

Similar Tutorials

View Content

This is kind of an odd situation. Hopefully someone who's better at CSS than I am can see what I'm doing wrong.

Unfortunately, since I'm a new member to this forum, I can't post links to the pages in question. So I'll try to explain the situation the best way I can.

I have a page that was originally created using one style sheet. Another webmaster in our company made some adjustments for me, but she attached a different style sheet, one that's used for another website, and used that for the changes.

I've been trying to just incorporate the styles from her sheet into the original style sheet. I even took that style sheet and made a copy of it and put it in my folder. But there's something in her style sheet that sets the layout, so whenever I delete it, the formatting goes just a little off.

I don't think I'm explaining this very well. Ideally, I'd like to just keep it all in one style sheet, but the page doesn't seem to like that. And I can't really modify the problem style sheet, because it's used by other pages.

It's really hard to explain without viewing the two sample pages. Don't know the rules here yet, but maybe if somebody has a suggestion, I can send you the links and you can look at them yourself.

If anyone understands this rambling mess, I'd really appreciate your help.

Thanks,

Ann Daman

Css Template To Buy

Similar Tutorials

View Content

I am looking to purchase a CSS only template (no flash, no php, etc) that is for a company who sells software. I need it to support and have room for a lot of text and am not interested in several columns. A dropdown menu would be ideal.

I have been looking on various sites but haven't found anything suitable. Does anyone know of any off hand? Thanks!

Css Style Template

Similar Tutorials

View Content

Hi, just writing to get peoples oppinions.

i have created a template for standardising the way my collegues at work layout their style sheets.

any feedback will be welcome;

PHP Code:
/* ==== General Rules ==== */
    body {

    }
    h1 {

    }
    h2 {

    }
    h3 {

    }
    h4 {

    }
    h5 {

    }
    h6 {

    }
    p {

    }
    a:link, a:visited {

    }
    a:hover {

    }
    img {

    }
    th {

    }
    td {

    }
    dt {

    }
    li {

    }
/* ==== Layout Rules ==== */
    #topBar {

    }
    /* ==== Specific Rules ==== */
        #topBar h1 {

        }
        #topBar h2 {

        }
        #topBar h3 {

        }
        #topBar h4 {

        }
        #topBar h5 {

        }
        #topBar h6 {

        }
        #topBar p {

        }
        #topBar a:link, #topBar a:visited {

        }
        #topBar a:hover {

        }
        #topBar img {

        }
        #topBar th {

        }
        #topBar td {

        }
        #topBar dt {

        }
        #topBar li {

        }

    #leftBar {

    }
    /* ==== Specific Rules ==== */
        #leftBar h1 {

        }
        #leftBar h2 {

        }
        #leftBar h3 {

        }
        #leftBar h4 {

        }
        #leftBar h5 {

        }
        #leftBar h6 {

        }
        #leftBar p {

        }
        #leftBar a:link, #leftBar a:visited {

        }
        #leftBar a:hover {

        }
        #leftBar img {

        }
        #leftBar th {

        }
        #leftBar td {

        }
        #leftBar dt {

        }
        #leftBar li {

        }

    #rightBar {

    }
    /* ==== Specific Rules ==== */
        #rightBar h1 {

        }
        #rightBar h2 {

        }
        #rightBar h3 {

        }
        #rightBar h4 {

        }
        #rightBar h5 {

        }
        #rightBar h6 {

        }
        #rightBar p {

        }
        #rightBar a:link, #rightBar a:visited {

        }
        #rightBar a:hover {

        }
        #rightBar img {

        }
        #rightBar th {

        }
        #rightBar td {

        }
        #rightBar dt {

        }
        #rightBar li {

        }

    #mainContent {

    }
    /* ==== Specific Rules ==== */
        #mainContent h1 {

        }
        #mainContent h2 {

        }
        #mainContent h3 {

        }
        #mainContent h4 {

        }
        #mainContent h5 {

        }
        #mainContent h6 {

        }
        #mainContent p {

        }
        #mainContent a:link, #mainContent a:visited {

        }
        #mainContent a:hover {

        }
        #mainContent img {

        }
        #mainContent th {

        }
        #mainContent td {

        }
        #mainContent dt {

        }
        #mainContent li {

        }

    #bottomBar {

    }
    /* ==== Specific Rules ==== */
        #bottomBar h1 {

        }
        #bottomBar h2 {

        }
        #bottomBar h3 {

        }
        #bottomBar h4 {

        }
        #bottomBar h5 {

        }
        #bottomBar h6 {

        }
        #bottomBar p {

        }
        #bottomBar a:link, #bottomBar a:visited {

        }
        #bottomBar a:hover {

        }
        #bottomBar img {

        }
        #bottomBar th {

        }
        #bottomBar td {

        }
        #bottomBar dt {

        }
        #bottomBar li {

        }

    #vNav {

    }
    /* ==== Specific Rules ==== */
        #vNav h1 {

        }
        #vNav h2 {

        }
        #vNav h3 {

        }
        #vNav h4 {

        }
        #vNav h5 {

        }
        #vNav h6 {

        }
        #vNav p {

        }
        #vNav a:link, #vNav a:visited {

        }
        #vNav a:hover {

        }
        #vNav img {

        }
        #vNav th {

        }
        #vNav td {

        }
        #vNav dt {

        }
        #vNav li {

        }

    #hNav {

    }
    /* ==== Specific Rules ==== */
        #hNav h1 {

        }
        #hNav h2 {

        }
        #hNav h3 {

        }
        #hNav h4 {

        }
        #hNav h5 {

        }
        #hNav h6 {

        }
        #hNav p {

        }
        #hNav a:link, #hNav a:visited {

        }
        #hNav a:hover {

        }
        #hNav img {

        }
        #hNav th {

        }
        #hNav td {

        }
        #hNav dt {

        }
        #hNav li {

        }

/* ==== Custom Rules ==== */
    .imgLeft {
         margin: 2px;
         float: left;
    }
    .imgRight {
        margin: 2px;
         float: right;
    }

Newbie With Css Template

Similar Tutorials

View Content

Hello! My first post...but definitely not my last. I'm working on a new site and used a CSS template designed by someone else. My problem is I can't figure out how to change any of the width parameters without screwing up how the page looks. If anyone could help me with resizing the width that would be greatly appreciated. The web site is located at www.easyplateau.com.

Thanks!

daniel

Template Problem

Similar Tutorials

View Content

Hi, I'm having a little trouble positioning something on my header. Here's my site: http://ne-yofan.com/test/. I'd like to position the blog in the header to the left without divs. How would I?

Also my header looks different in Firefox and Internet Explorer. How can I fix that?

Please and thank you.

Problem With Css Template

Similar Tutorials

View Content

I am constructing my very first website using a freeCSS template..Embouteillage.

When I upload it to my webhost (agilityhoster) everything appears to work OK..but the header colour and some of the graphic images don't apear. I've even uploaded the template without making any changes to the original..but the same result. Can anyone help me solve the riddle, Many thanks.

Template Issues

Similar Tutorials

View Content

Here is index.php code.

<body>

<div id="container">
<div id="header">
header stuff goes he
</div>

<div id="container2">

<div id="container3">
<div id="content"> main content </div>
<div id="sidebarLT">
left side bar
</div>
</div>

<div id="sidebarRT">
right side bar
</div>
</div>

<div id="top_navlist">
top nav will go here</div>

<div id="footer">
footer info will go here
</div></div>

</body>
</html>

Here is CSS:
/* CSS Document */

body {
margin-top: 0px;
margin-bottom: 30px;
backround-color: #FFFFFF;
}
#container {
width: 850px;
margin: 0 auto;
margin-top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
backround-color: #fff
border: 1px solid #333;
}
#container2 {
width: 850px;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #666666;
border: 1px solid #ff00cc;
}
container3 {
width: 635 px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color:#666666
border: 1px solid #ff00cc;
}
/*/ HEADER /*/
#header {
width: 850px;
height: 140px;
border: 1px solid #ff6600;
padding-left: 10px;
padding-top: 10px;
border: 1px solid #006600;
float: right;
}

#content {
width: 400px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border: 1px solid #006600;
float: right;
}

/*/ NAVIGATION /*/
#top_navlist {
top: 20px;
width:850px;
line-height:normal;
clear:both;
border:1px solid #000066;
position: absolute;
}

/*/ RIGHT SIDEBAR /*/
#sidebarRT {
float: right;
width: 175px;
padding-left: 21px;
padding-right: 10px;
padding-top: 10px;
border: 1px solid #000066;
}
/*/ LEFT SIDEBAR /*/
#sidebarLT {
float: left;
width: 175px;
padding-left: 21px;
padding-right: 10px;
padding-top: 10px;
border: 1px solid #00ff66;
}
/*/ FOOTER /*/
#footer {
margin-top: 15px;
padding-top: 0px;
padding-bottom: 0px;
clear: both;
width: 850px;
background-color:#FFF;
border: 1px solid #ff0066;
}

The issue is that the main content is to the right of the sidebarRT. Other issue is that the top spot for navigation is set to the right and not aligned with the whole template.

Help Modifying A Template

Similar Tutorials

View Content

Hi,
I am creating a site (www dot 1913atc dot co dot uk) using a downloaded template. I want to increase the hight of the header, but I am having some trouble doing this so it does not affect the other parts of the top menu. Can someone please tell me how to go about increasing the height.

Thanks

Help! Trying To Manipulate Template

Similar Tutorials

View Content

Help! I bought a template that is supposed to be easily manipulated, but I am stuck... Can anybody offer some help on a couple files?

I have emailed requesting support now a couple times with no response.

I am trying to change the script so there is no white space for text an just have white text over the same grey/black background on my index page? I would like it to match the front page with the faded grey to black background and the text boxes black with white text
My front page is rotating pictures as a slideshow can they be clickable and serve as a navigation to my gallery?

If you are willing to help please let me know!

Thanks so much! New to css....

Need Help With Joomla Css Template

Similar Tutorials

View Content

Hi,

just to explain I know absolutely nothing about css. I can barely manage to change fonts, so please be gentle with me. I am quite capable of following straight forward instructions though so if you can help it would be much appreciated. I have a website (URL address blocked: PM me to get URL)/joomla that I'm playing with. The submenu's are where I have an issue - they appear exactly as I want when a menu item is selected (indented and normal font weight) however when a sub menu item is selected the indent dissappears and it treats it like a main menu item. Below is the code where I think the issue is.
I've been googling like mad to see if anyone else has the same problem with this particular template but no joy. On a seperate note if there are any joomla template experts out there I would be happy to pay a reasonable fee to make some other modifications (basically the padding and position of the main column is all over the place dependent on the content that is displayed). I'd also like to upgrade this to joomla 1.6 at some stage. Enquired with a couple of "professional" Joomla developers and recieved no reply. I assume my requirements are too small for them to consider, and that they are just too rude to reply to say so.

/*LEFT COL LINK*/
#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
line-height: 18px;
padding: 0 0 0 8px;
text-decoration: none;
font-size: 11px;
background: url(../images/menu_row.jpg) center left no-repeat;
margin: 0;
height: 18px;
color: #666666;
font-weight: bold;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
color: #4CAFC6;
text-decoration: none;
}

/*LEFT COL CURRENT LINK*/
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link,
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
line-height: 18px;
padding: 0 0 0 8px;
text-decoration: none;
color: #666666;
font-weight: bold;
font-size: 11px;
background: url(../images/menu_row.jpg) center left no-repeat;
margin: 0;
height: 18px;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
color: #4CAFC6;
text-decoration: none;
}

/*LEFT COL SUB LINK*/
#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link {
text-decoration: none;
color: #666;
margin: 0 0 0 6px;
font-size: 11px;
background: url(../images/submenu_row.jpg) center left no-repeat;
font-weight: normal;
display: block;
line-height: 18px;
padding: 0 0 0 18px;
border: none;
height: 18px;
}

#leftcolumn ul.menu li ul li#current a, #leftcolumn ul.menu li ul li#current a:link, #leftcolumn ul.menu li ul li#current a:visited, #leftcolumn ul.menu li ul li#current a:hover {
font-size: 11px;
margin: 0 0 0 6px;
padding: 0 0 0 18px;
text-decoration: none;
border: none;
color: #333;
background: url(../images/submenu_row.jpg) center left no-repeat;
height: 18px;
line-height: 18px;
}
/*SUBMENU POSITION*/
#leftcolumn ul.menu li#current ul {
margin: 0;
padding: 0;
}

#leftcolumn ul.menu li#current ul li {
margin: 0;
padding: 0;
}

/*CURRENT SUBMENU POSITION*/
#leftcolumn ul.menu li ul {
margin: 0;
padding: 0;
}

#leftcolumn ul.menu li#current ul li a:hover {
color: #333;
}

#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
list-style: none;
}

Template Works In Ie But Not In Firefox

Similar Tutorials

View Content

http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.html
http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.css

those are my two files, it seems to be working okay in IE6/win but not in firefox...

anyone can maybe help me out? thanks it is much apprceiated.

edit: also both files validate

Please Help Me With A 3 Column Joomla Css Template

Similar Tutorials

View Content

hello community... i would like to humble ask for anyone's help on this one... i need to add a right column to this template to make it a 3 column joomla template. but since i dont know css, i really dont know what to do. please help me. i have privided the code below.

Here is the index.php

Code:


<?php
/**
 * @copyright	Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
 * @license		GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant
 * to the GNU General Public License, and as distributed it includes or
 * is derivative of works licensed under the GNU General Public License or
 * other free or open source software licenses.
 * See COPYRIGHT.php for copyright notices and details.
 */

defined('_JEXEC') or die('Restricted access');



?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!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; ?>" dir="<?php echo $this->direction; ?>" >
<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/layout.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/joomla.css" type="text/css" />
	<!--[if lte IE 6]>
		<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template_ie6.css"  type="text/css" />
	<![endif]-->
    <!-- Flow Player Start -->
<script type="text/javascript" src="flowplayer/flowplayer-3.0.6.min.js"></script> 
<!-- Flow Player End -->
<meta name="verify-v1" content="18/oD5mtAqJSklIsjK/k6NWXMxJ6ZNJMyoGRkIl3Md8=" /> 
</head>

<body id="template-body">
	
<div id="header">
	<div id="top"><jdoc:include type="modules" name="top" /></div>
	<div id="contact"><jdoc:include type="modules" name="user6" /></div>
</div>

<div id="mainnav">
	<div id="blog">
		<a href="irsblog/index.php">Blog</a>
	</div>
	<jdoc:include type="modules" name="user3" />
</div>

<div class="clear"></div>

<div id="mainbody">
	<div id="mainbody2">
		<div id="sidebar">
			<div class="inside">
				<jdoc:include type="modules" name="left" style="xhtml" />
			</div>
		</div>
        
        <div id="sidebar2">
			<div class="inside">
				<jdoc:include type="modules" name="right" style="xhtml" />
		</div>
        

        

		<div id="maincontent">
			<div class="inside">
				
			
				<?php if ($this->getBuffer('message')) : ?>

				<?php endif; ?>
				<jdoc:include type="component" />
			</div>
               
		</div>      
    


		</div>
        
		<div class="clear"></div>

		<div id="mainbottom-wrapper">
			<div id="mainbottom">
				<?php if( $this->countModules('user1') ): ?>
				<div class="mainbottom-box" id="box-1">
					<jdoc:include type="modules" name="user1" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<?php if( $this->countModules('user2') ): ?>
				<div class="mainbottom-box" id="box-2" >
					<jdoc:include type="modules" name="user2" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<?php if( $this->countModules('user4') ): ?>
				<div class="mainbottom-box" id="box-3">
					<jdoc:include type="modules" name="user4" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<?php if( $this->countModules('user5') ): ?>
				<div class="mainbottom-box" id="box-4">
					<jdoc:include type="modules" name="user5" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<div class="clear"></div>
				
			</div>
		</div>
		<div id="footer">
			<jdoc:include type="modules" name="footer" />
		</div>
		

	</div>
</div>

<div id="bottom">
	
	<div class="left">
		<?php echo JText::_("100 S. EDISON AVE., STE. A TAMPA, FL 33606"); ?><br />
		<?php echo JText::_("PHONE: (813) 229-7100 TOLL FREE: (888) 438-6474 FAX: (813) 251-9605"); ?>
	</div>

	<div class="right">
		<?php echo JText::_("&COPY; 2000-2009 Law Offices of  Darrin T. Mish, P.A"); ?>
	</div>
	
	<div class="clear"></div>
</div>
<script src="http://24520.hittail.com/mlt.js"; type="text/javascript"></script> 

</body>
</html>

here is the layout.css

Code:


#header {
	background: transparent url('../images/bg-header.jpg') no-repeat scroll 0 0;
	height: 149px;
	width: 990px;
	margin: 0 auto;
}

#mainnav {
	height: 46px;
	width: 990px;
	margin: 0 auto;
}

#mainbody {
	background: url('../images/bg-mainbody.png') repeat-y scroll 0 0;
	width: 1010px;
	margin: 0 auto;
}

#mainbody2 {
	background: url('../images/bg-mainbody2.png') no-repeat scroll 0 0;
} 


#sidebar {
	background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
	color: #000000;
	width: 223px;
	min-height: 700px;
	margin-left: 15px;
	float: left;
}

#sidebar2 {
	background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
	color: #000000;
	width: 250px;
	min-height: 700px;
	margin-right: 15px;
	float: right;
}

#maincontent {
	width: 500px;
	float: right;
	margin-right: 15px;
}

#mainbottom-wrapper {
	border-top: 0px dotted #000;
	margin-top: 50px;
	margin: 0 15px;
} 

#mainbottom {
	background: none #EFEFEF no-repeat scroll 0 0;
	min-height: 192px;
	margin: 10px 0;
	padding: 0 10px;
	clear: both;
	color: #000000;
}

#footer {
	background: #0B60B7 url('../images/bg-footer.png') no-repeat scroll 0 0;
	text-align: center;
	color: #FFFFFF;
	padding: 10px 0;
	margin: 0 11px;
}

#bottom {
	background: #FFFFFF url('../images/bg-bottom.png') no-repeat scroll 0 0;
	margin: 10px 0 20px 0;
	width: 1010px;
	margin: 0 auto;
	padding: 10px 0;
}

and here is the template.css
Code:


/* @important */

* { margin:0; padding:0; }

body {
	background: #FFFFFF url('../images/bg.png') repeat-x scroll center top;
	font: 78% Arial,Tahoma,Verdana;
	color: #000000;
}

h1,h2,h3 {
	margin: 0 0 10px 0;
}

h1, .componentheading { font-size: 1.5em; }
h2, .contentheading { font-size: 1.2em; text-align:center; }
h3 { font-size: 1.167em; }

ul {
	margin: 10px 0 10px 0;
	padding: 0 0 0 35px;
}

li{}

a {
	text-decoration: underline;
	color: #666666;
}

p {
	margin: 0 0 15px 0;
	line-height: 20px;
}

img {
	border: none;
}

fieldset {
	border: none;
}

.clear{
	clear: both;
}

.inside {
	padding: 5px;
}

.left {
	float: left;
}

.right {
	float: right;
}

/* Header Style */

#top {
	height: 35px;
	text-align: right;
	color: #FFFFFF;
}

#contact {
	float: right;
	width: 300px;
	min-height: 80px;
	padding-right: 5px;
	color: #000000;
}

/* Mainnav Style*/

#mainnav ul {
	float: right;
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
}

#mainnav ul li {	
	background: url('../images/bg-menu.png') no-repeat scroll right center;
	display: inline;
	float: left;
	height: 46px;
	padding: 0 10px;
}

#mainnav ul li a {
	color: #FFFFFF;
	display: block;
	float: left;
	font-family: times new roman;
	font-size: 1.2em;
	font-weight: bold;
	line-height: normal;
	margin-top: 12px;
	text-decoration: none;
	text-transform: uppercase;
}

/* Blog Button */

#blog {
	float: right;
	margin: 10px 15px 0 120px;
	padding: 0;
	width: 60px;
}

#blog a {
	background: #F2A31E;
	color: #FFFFFF;
	display: block;
	font-family: times new roman;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	padding: 3px 0;
}


/* Advert Style */

#advert-wrapper {
	border-bottom: 0px dotted #000;
	padding: 0 0 10px 0;
}

.advert-box {
	min-height: 239px;
	width: 367px;
}

/* Sidebar Style */

#sidebar ul {
	list-style-position: inside;
	margin: 0;
	padding: 0;
}

#sidebar ul li {
	
	padding: 5px;
	border-bottom: 1px dotted #B9B9B9;
	list-style-image: url('../images/bullet.png');
}
#sidebar ul li a {
	color: #000000;
	text-decoration: none;
}

#sidebar .moduletable, #sidebar .moduletable_menu{
	margin: 0 0 15px 0;
}

/* Sidebar-c Style */

#sidebar-c ul {
	list-style-position: inside;
	margin: 0;
	padding: 0;
}

#sidebar-c ul li {
	
	padding: 5px;
	border-bottom: 1px dotted #B9B9B9;
	list-style-image: url('../images/bullet.png');
}
#sidebar-c ul li a {
	color: #000000;
	text-decoration: none;
}

#sidebar-c .moduletable, #sidebar .moduletable_menu{
	margin: 0 0 15px 0;
}

/* Main Content Style */

#maincontent img {
	padding: 5px;
}

/* Main Bottom Style */

.mainbottom-box {
	float: left;
	width: 228px;
	min-height: 166px;
	padding: 10px 5px;
	margin: 10px 0;
}

.mainbottom-box ul {
	list-style-image: url('../images/bullet.png');
}

.mainbottom-box ul li {}

.mainbottom-box ul li a {
	text-decoration: none;
	color: #000000;
}

#box-2,#box-3,#box-4 {
	border-left: 1px dotted #B9B9B9;
} 

/*Footer Style */

#footer a {
	color: #FFFFFF;
}

/* Bottom Style */

#bottom .right, #bottom .left {
	font-size: 0.833em;	
}

#bottom .right {
	width: 157px;
}

#bottom .left {
	padding-left: 15px;
}

i would really appreciate it if anyone can help...

thankks a whole lot!!

Css Page Centered Template

Similar Tutorials

View Content

Trying to build a CSS Page Centered Template, where content autostretches containers height, as opposed to setting absolute heights. If one column is longer than the others the others should auto stretch to same height.

Also trying to work in a Footer that sits automatically at the bottom. Heres where I am at...as usual different story in every browser.

page
----
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0"><table><tbody ><tr><td><div class="container">

<div class="top">top</div>
<div class="main1">main1</div>
<div class="main2">main2</div>
<div class="main3">main3</div>

</div></td></tr></tbody></table></body></html>

CSS Sheet
----------
table {
width: 100%;
height: 100%;
}
td {
text-align: center;
vertical-align: top;
}
div.container {
position: relative;
margin: 0 auto;
width: 780px;
text-align: left;
height: 100%;
}
div.top {
position: absolute;
top: -3px;
left: 0px;
width: 780px;
height: 203px;
background-color: #CCC;
}
div.main1 {
position: absolute;
top: 200px;
left: 0px;
width: 200px;
height: 100%;
background-color: #BBB;
}
div.main2 {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 100%;
background-color: #DDD;
}
div.main3 {
position: absolute;
top: 200px;
left: 400px;
width: 380px;
height: 100%;
background-color: #AAA;
}

Get Rid Of Overhang On Joomla Template

Similar Tutorials

View Content

I am using a modified Joomla template for this site - (birminghamfiberguild . org) I need to simply nudge over the menus and the middle content to avoid the couple of pixel overhang going on, on the right. I have looked at it using Firebug and nothing I do seems to do the trick.

I'm doing this site for free for my non-profit org. I'd be appreciative of any help.

Css Template Positioning Problem

Similar Tutorials

View Content

Boo

Hi I'm building a new site in php & css. Im new to php yet seems fine so far. CSS I have had a little experience with due to my other site (thornapple.co.nz) yet I would still class myself as a eager learner.
You can view the test site as it currently is at -
darkasylum.org/site/template.php

grrr wont let me post the link!

Im just making up the template for the site. Its spilt into a few separate php files-
*Header/Top Nav
*Content
*Right Nav
*Footer

All is going fine yet I have came across a wee stumbling block.
There is a grungy flame bar that runs under the top nav and then again above the footer - framing the content. Im wanting to move these two bars- top one down say 18px and bottom up say 18px so it overlaps/layers over the content box and rightnav.

Can't seem to figure it out after much time trying a few things and a bunch of choice words spoken.... the computer hasn't had flying lessons(yet) but im a little frustrated knowing it's something simple and seeing I have positioned things over the top of others in the past.
Once done the image will be converted to black but this should really matter I guess...

As you can tell by looking at the site im still in the first building stages - getting the template set before we start to move on from there.

Sooo I have been looking around for a forum to ask on that's supportive and helpful. This forum seems a great place with many queries answered.

You can check out my style sheet here - darkasylum.org/site/style.css

Please ANY questions or if you need any part of my code just let me know.
I desperately need to get this project rolling as I'm now way behind and have articles etc coming in.

Help me Obi-Won kenobi your our only hope! (let's put your name there not Obi-Wons!)

How many posts do I need to do before I can post a link? Better go check now...

Thanks so much.

Warmest Wishes
Alex

Fixing An Image In Col2 Of Two Col Css Template

Similar Tutorials

View Content

will some one guide me how I can make the image attached in col2 to be fixed one and should not scroll down though the text in the col1 may scroll down.
I have used the following css code.
html, body {
margin:0;
padding:0;
border:0;
}
body {
background:#fff url(bg.jpg) center repeat-y;
}
#container {
max-width: 900px;
margin: 0 auto;
width: 80%;
}
#col1 {
width: 48%;
float: left;
}
#col2 {
width: 48%;
float: right;
}
#footer {
clear: both;
background:#fff;
padding:0.75em;
}