Css Template Code Question

[555]

Hello,

I have been working on a Joomla site and have not taken a CSS programming course yet in school, the site I am working on has a huge space gap within the pages and I got a answer as to what it could be but it was not really a detailed answer so I have no clue on how to fix the code or start at, maybe someone can please help that has more code knowledge then me?

here is what I was told that needs to be fixed, it seems to be a template error with a new extention that was installed

"CSS in your template is the issue. I suggest to set "float: left;" for div#content_outleft"

I looked threw the code and do not see a div#content_outleft in there.. here is the code

@charset "utf-8";
#left_border {
	float:left;
	width: 100%;
	text-align: left;
	background-repeat: repeat-y;
	margin: 0 auto;
}  
#right_border {
	float: right;
	background-repeat: repeat-y;
	background-position: right;
}
#bottom {
	float:none;
	background-repeat: repeat-x;
	background-position: bottom;
	width: 1000px;
}
#bottom_right {
	background-repeat: no-repeat;
	background-position: bottom right;
}
#bottom_left {
	background-repeat: no-repeat;
	background-position: bottom left;
}
#header  {
	background: #000;
	height: 37px;
	background-image: url(../images/header_bg_01.jpg);
	line-height: 30px;
	padding: 0 15px 0 15px;
	font-size: 24px;
	color: #d90000;
    text-indent:20px
} 
form {
	margin : 0;
	padding : 0;
	border : none;
}
#date {
	text-align:center;
	font-size: 11px;
	color: #494849;
	margin-right: 20px;
}
#pathway {
	float: left;
	color: #494849;
	font-weight: bold;
	font-size: 11px;
	height: 36px;
	line-height: 36px;
}
#pathway a {
	color: #494849;
	height: 36px;
	line-height: 36px;
}
#search_out {
	float: right;
	background-image: url(../images/search.png);
	background-repeat: no-repeat;
	width: 197px;
	height: 30px;
	margin: 3px 0 0 0;
	padding:0;
}
#search {
	margin: 9px 0 7px 45px;
}
#search input, 
#search .inputbox {
	float: left;
	margin: 0;
	background-color: #fff;
	border: none;
	padding: 0;
}
#banner_out {
	background-repeat: repeat-x;
	height: 275px;
	width: 100%;
}
#banner_in {
	float: left;
	color: #000;
	height: 275px;
	font-size: 10px;
	background-repeat: no-repeat;
	background-position: left;
	width: 100%;
	font-family: Verdana, Arial, sans-serif;
}
#banner {
	float: right;
	padding: 30px 30px 0px 0px;
}
.sitetitle {
	font-size: 30px;
	float: left;
	text-indent: 45px;
	padding-top: 200px;
    font-variant:small-caps;
	color: #494849;
	font-family: Baskerville Old Face, Tahoma, Helvetica, sans-serif;
}
#topmenu_out {
	height: 30px;
	background-repeat: repeat-x;
	border-right:1px solid gray;
	border-left:1px solid gray;
}
#topmenu_left {
	height: 30px;
	background-repeat: no-repeat;
}
#topmenu_right {
	height: 30px;
	background-repeat: no-repeat;
	background-position: right;
}
#topmenu {
	height: 30px;
	line-height: 30px;
	color: #000;
	text-align: left;
	float: left;
	font-variant:small-caps;
	padding-left: 50px;
	overflow:hidden;
}
#topmenu ul, 
#topmenu li {
	display: inline;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}
#topmenu a {
	color: #494849;
	float: left;
	height: 30px;
	border: none;
	background: none;
	font-size: 12px;
	font-family: Tahoma, Arial,Verdana ;
	padding: 0px 14px;
	line-height: 23px;
	font-weight: bold;
}
#topmenu  a:hover, 
#topmenu #active_menu, 
#topmenu li#current a {
	text-decoration: underline;
	background-image: url(../images/topmenu_over.png);
	color: #a60000;
	background-repeat: repeat-x;
	padding-top:1px;
}
#container {
	padding-bottom: 10px;
}
#maincontent {
	padding:0;
	margin: 3px 33px 10px 33px;
}
#left_out {
	width: 180px;
	float: left;
	padding: 0;
	margin: 0;
	background-color: #b3b3b3;
	overflow:hidden;
}
#right_out  {
	width: 180px;
	float: right;
	padding: 0;
	margin: 0;
	background-color: #d7d7d7;
	overflow:hidden;
}
#left_out ul, #left_out li, #right_out ul, #right_out li {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#left_out ul.menu li a, 
#left_out ul.menu li#current a, 
#left_out a.mainlevel,
#right_out ul.menu li a, 
#right_out ul.menu li#current a, 
#right_out a.mainlevel {
	display: block;
	height: 25px;
	line-height: 25px;
	background-repeat: no-repeat;
	background-position: left;
	width: 172px;
	font-size: 12px;
	font-weight: normal;
	text-indent: 20px;
	overflow:hidden;
}
#left_out ul.menu a:hover, 
#right_out ul.menu a:hover,
#left_out a.mainlevel:hover, 
#right_out a.mainlevel:hover, 
#left_out #active_menu, 
#right_out #active_menu,
#left_out ul.menu li#current a,
#right_out ul.menu li#current a {
	background-image: url(../images/mainlevel_over.png);
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: left;
	color: #000;
}
#left_out a.sublevel, 
#left_out ul.menu li#current li a,
#left_out ul.menu li li a,
#left_out ul.menu li li#current a,
#left_out ul.menu li li#current li a,
#left_out ul.menu li li li a,
#right_out a.sublevel, 
#right_out ul.menu li#current li a,
#right_out ul.menu li li a,
#right_out ul.menu li li#current a,
#right_out ul.menu li li#current li a,
#right_out ul.menu li li li a {
	background-repeat: no-repeat;
	height: 20px;
	line-height: 20px;
	background-position: left;
	text-indent: 20px;
	border: none;
	display: block;
}
#left_out a.sublevel#active_menu,
#right_out a.sublevel#active_menu,
#left_out a.sublevel:hover,
#right_out a.sublevel:hover,
#left_out ul.menu li#current li a,
#left_out ul.menu li li#current a,
#left_out ul.menu li li#current li a,
#right_out ul.menu li#current li a,
#right_out ul.menu li li#current a,
#right_out ul.menu li li#current li a,
#left_out ul.menu li#current a:hover,
#right_out ul.menu li#current a:hover,
#left_out ul.menu li li a:hover,
#right_out ul.menu li li a:hover{
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: left;
	color: #ffffff;
}
#left_out .module, 
#right_out .module, 
#left_out .moduletable, 
#right_out .moduletable,
#left_out .module_menu, 
#right_out .module_menu, 
#left_out .module_text,
#right_out .module_text {
	background-repeat: repeat-y;
	margin: 0;
	padding: 0;
}
#left_out .module_text,
#right_out .module_text,
#left_out a,
#right_out a  {
	background-repeat: repeat-y;
	margin: 0;
	padding: 0 3px 0 3px;
}
#left_out .module div, 
#right_out .module div, 
#left_out .moduletable div, 
#right_out .moduletable div,
#left_out .module_menu div, 
#right_out .module_menu div,
#left_out .module_text div,
#right_out .module_text div {
	background-position: bottom;
	background-repeat: no-repeat;
	width: 180px
}
#left_out .module div div, 
#right_out .module div div, 
#left_out .moduletable div div, 
#right_out .moduletable div div,
#left_out .module_menu div div, 
#right_out .module_menu div div,
#left_out .module_text div div,
#right_out .module_text div div {
	background-position: top;
	background-repeat: no-repeat;
}
#left_out .module div div div, 
#right_out .module div div div, 
#left_out .moduletable div div div, 
#right_out .moduletable div div div,
#left_out .module_menu div div div, 
#right_out .module_menu div div div,
#left_out .module_text div div div,
#right_out .module_text div div div{
	background: none;
	padding: 5px 5px 10px 5px;
	overflow: hidden;
	width: 165px;
}
#left_out .module div div div div, 
#right_out .module div div div div, 
#left_out .moduletable div div div div, 
#right_out .moduletable div div div div,
#left_out .module_menu div div div div, 
#right_out .module_menu div div div div,
#left_out .module_text div div div div,
#right_out .module_text div div div div {
	padding: 0;
}
#left_out h3, 
#right_out h3 {
	height: 35px;
	width: 172px;
	background-repeat: no-repeat;
	color: #222;
	line-height: 35px;
	text-indent: 20px;
	font-variant:small-caps;
	padding: 0;
	margin: 3px 0 0 0;
	font-size: 14px;
	font-weight: bold;
	border:1px solid #666;
}
#content_outleft, 
#content_outmiddle, 
#content_outright {
	margin: 0 0 10px 0;
}
#content_outleft {
	margin: 0 0 0 188px;
}
#content_outmiddle {
	margin: 0 188px;
}
#content_outright {
	margin: 0 188px 0 0;
}
#top {
	background-image: url(../images/chrome/user_top_bg.jpg);
	border:1px solid gray;
	padding: 0 10px 10px 10px;
}
#top h3 {
	border-top:1px solid #666;
	border-bottom:1px solid #666;
	background-color: #ddd;
	text-indent: 10px;
}

#content {
	background-repeat: repeat-x;
	background-position: bottom;
	width: auto;
	min-height: 500px;
	margin-top: 10px;
	border-top: 2px solid #666;
}
#content_border_left {
	background-repeat: repeat-y;
	background-position: top left;
}
#content_border_right {
	background-repeat: repeat-y;
	background-position: top right;

}
#content_bottom_right {
	background-repeat: no-repeat;
	background-position: bottom right;
	min-height: 500px;
	padding-bottom:50px;
}
#content_bottom_left {
	background-repeat: no-repeat;
	background-position: bottom left;
	padding: 3px 5px 55px 5px;
}
ul.pagination {
	width: 500px;
}
#blank {
	width: 100%;
	height: 50px;
	background-color: transparent;
}
br.clr{
	clear:none;
}
.pagenav {
	border : 1px solid #666;
	padding : 3px 5px 2px 5px;
	margin : 5px 1px 5px 1px;
	background-image : url(../images/button.jpg);
}
.pagenav:hover {
	border : 1px solid #444444;
	background-image : url(../images/button_hover.jpg);
}
.blog {
	width : 100%;
}
.blog_more {
	margin : 10px 5px 20px 5px;
}
.blog_more strong {
	margin : 2px;
	display : block;
	font-size : 14px;
	font-weight : bold;
}
.article_separator {
	clear : both;
	display : block;
	height : 10px;
	margin-bottom : 10px;
	border-bottom : 1px solid #888888;
}
.user_bg, 
.user_left, 
.user_right {
	height: 148px;
}
.user_bg {
	margin: 0 0 10px 0;
	padding: 0;
	background-repeat: repeat-x;
	width: 100%;
}
.user_left {
	background-repeat: no-repeat;
	background-position: left top;
}
.user_right {
	background-repeat: no-repeat;
	background-position: right top;
}
.user_bg .topmodule_usertwo {
	width: 45%;
	height: 140px;
	margin: 0px;
	float: left;
	padding: 0px;
}
.user_bg .topmodule_userone {
	width: 100%;
	height: 140px;
	margin: 0px;
	float: left;
	padding: 0px;
}
.user_bg ul, 
.user_bg li,
.user_bg li:hover,
.user_bg ul:hover {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	background-image:none;
}
.module ul,
.module li, 
.module ul:hover ,
.module li:hover {
	list-style-type: none;
	background: none;
}
.user_bg th, 
.user_bg h3 {
	height: 28px;
	line-height: 30px;
	font-size: 14px;
	color:  maroon;
	padding: 0px 0px;
	font-family:  Arial, Helvetica, Sans-Serif;
	margin: 0 0 5px 0;
	font-weight: bolder;
	font-variant:small-caps;
	border-bottom: 1px solid silver;
}
.user_bg .user_inside {
	margin: 5px 5px 5px 20px;
	height: 136px;
	overflow: hidden;
	padding: 0px 5px;
	font-size: 11px;
}
.user_bg .user_inside1 {
	margin: 5px 5px 5px 30px;
	height: 136px;
	overflow: hidden;
	padding: 0px 5px;
	font-size: 11px;
}
.separator {
	width: 2%;
	min-width: 22px;
	height: 140px;
	float: left;
	background-repeat: no-repeat;
	background-position: top center;
}
#user_bottom {
	padding: 0px 16px;
	margin: 35px;
}
#user_bottom .user_bg {
	margin: 0;
}
.user_bg .bottom_user, .user_bg .bottom_user1, .user_bg .bottom_user2, .user_bg .bottom_user3 {
	width: 30%;
	height: 140px;
	margin: 0px;
	float: left;
	padding: 0px;
}
.user_bg .bottom_user1 {
	width: 100%;
}
.user_bg .bottom_user2 {
	width: 45%;
}
.user_bg .bottom_user3 {
	width: 30%;
}
.user_bg .bottom_user1 {
	width: 30%;
	height: 140px;
	margin: 0px;
	float: left;
	padding: 0 0 0 15px;
}
#footer {
	background-color: transparent;
	background-image: url(../images/footer.jpg);
	background-repeat: no-repeat;
	color: #494849;
	text-align: center;
	padding: 10px 0px 0px 0px;
	font-family: Tahoma, Arial, Verdana;
	height: 190px;
}

#copy {
	font-size: 11px;
	font-variant:small-caps;
	padding-left: 10px;
}
#othermenu {
	overflow: hidden;
	font-size: 10px;
}

#othermenu_in ul, 
#othermenu_in li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: inline;
}
#othermenu_in {
	margin-right: -2px;
}
#othermenu_in a {
	color: #494849;
	border-right: 1px solid #8B8B8B;
	padding: 0px 20px;
}
.clr {
	clear:both;
}
body  {
	font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
	background: #a19e9e;
	background-image: url(../images/bg_01.jpg);
	background-position: center top;
	background-repeat:repeat-y;
	margin: auto;
	padding: 0;
	text-align: center;
	color: #000;
    width: 1000px;
}
p, td, tr {
	font-size: 11px;
	padding: 0;
	margin: 20px 10px;
	font-family: Tahoma, Arial, Verdana;
}
ul {
	margin: 0px;
	padding: 0px 0px 0px 18px;
	list-style-type: square;
} 
a:link, a:visited {
	color: #a60000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.button {
	color : #101010;
	background-color : #ddd;
	text-align : center;
	font-size : 10px;
	border : 1px solid #2c2c2c;
	padding : 2px 3px 2px 3px;
	margin : 2px 3px 2px 3px;
	background-image : url(../images/button.jpg);
}
.button:hover {
	background-image : url(../images/button_hover.jpg);
	border : 1px solid #444;
	color: #ff0000;
}

.inputbox, input {
	border: 1px solid #cccccc;
}
.input, img {
	border: none;
}
.search {}
a.readon {
	background-image: url(../images/readon.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 102px;
	color: #a60000;
	float: left;
	text-indent: 18px;
	line-height: 15px;
	margin: 10px 0 0 0;
	padding:2px;
	font-size: 11px;
}
.back_button {
	background-image: url(../images/backbutton.gif);
	height: 20px;
	line-height: 15px;
	width: 102px;
	text-indent: 18px;
	color: #a60000;
	font-size: 11px;
	margin-top: 5px;
}
.back_button a:link {
	color: #000;
}
.componentheading {
	background-image: url(../images/componentheading.jpg);
	height: 29px;
	line-height: 25px;
	padding: 0px 10px;
	color: #101010;
	font-weight: bold;
	font-variant:small-caps;
	font-size: 12px;
	font-family: Arial, Helvetica, Sans-Serif;
}
.contentheading, .contentheading a {
	font-size: 14px;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-variant:small-caps;
	color: #101010;
	text-decoration:underline;
	text-indent: 10px;

} 
.contentdescription {
	padding: 10px;
} 
.sectiontableheader {
	padding: 3px 5px;
	background-color: #c5c5c5;
	color: #760000;
	font-size: 15px;
	border:1px solid #000;
}
.sectiontableentry0 {
	border-bottom : 1px solid #666;
	background-color : #fff;
	text-align : left;
}
.sectiontableentry1 {
	border-bottom : 1px solid #666;
	background-color : #e6e6e6;
	text-align : left;
}
.sectiontableentry2 {
	border-bottom : 1px solid #666;
	background-color : #fff;
	text-align : left;
}
.sectiontableentry1 td {
	padding : 2px 5px 2px 5px;
	margin : 1px;
}
.sectiontableentry2 td {
	padding : 2px 5px 2px 5px;
	margin : 1px;
}
.sectiontableentry0 td {
	padding : 2px 5px 2px 5px;
	margin : 1px;
}
table.poll {
	padding : 0;
	width : 80%;
	border-collapse : collapse;
}
table.poll td {
	padding :0 0 0 3px;
}

.createdate, 
.small {
	font-size: 10px;
	color: #494849;
	text-indent: 10px;
}
li {
	text-align : left;
	line-height : 14px;
	padding-left : 18px;
	background-image : url(../images/list.png);
	background-repeat : no-repeat;
	background-position : 0 2px;
	list-style-type : none;
}
li:hover {
	text-align : left;
	line-height : 14px;
	padding-left : 18px;
	background-position : 0 2px;
	background-image : url(../images/list_hover.png);
	background-repeat : no-repeat;
}

I have tried different templates and some work with the new Joomla extention like the purity template, and the beez template does not work :( I asked for help on joomla forums with no help, I was hopeing someone here would have some advice or some a little more about CSS code then me, thanks!

[Infiltrator]

Hi 555,

Div #content_outleft

I think this is the declaration you are looking for.

#content_outleft {

margin: 0 0 0 188px;

If you are using Windows, I would suggestion downloading a Text Editor, where you can search through the CSS code lines, to make the job easier for you.

[555]

I think I get it, so it should be this instead..?

#content_outleft {
	float: left;
}

I just got notepad++ which seems to be very good for editing code, without having to google and read tons of pages, can you please give me a quick summary of what the commands in CSS are "Div, and Li"?

also with Bash shell scripting "fi" command? I am going to school for programming now but have to take a bunch of dumb classes first (imo) like "computer concepts" I slept through that one, "intro to software programming" using puesdo code which I would have rather learned C++ for the semester, does not make sense to me to learn a fake programming language.. cant wait till I can start taking real programming classes, Thanks man!

Edited December 28, 2010 by 555

[Infiltrator]

May I recommend you this tutorial on CSS. It should clear a lot of things for you. It also have other tutorials like HTML5, so I think it would be a good starting place to learn, I use it sometimes when I am doing a bit of PHP coding myself.

http://www.w3schools.com/css/default.asp

Edited December 28, 2010 by Infiltrator

[Jason Cooper]

also with Bash shell scripting "fi" command? I am going to school for programming now but have to take a bunch of dumb classes first (imo) like "computer concepts" I slept through that one, "intro to software programming" using puesdo code which I would have rather learned C++ for the semester, does not make sense to me to learn a fake programming language.. cant wait till I can start taking real programming classes, Thanks man!

Pseudo code isn't about learning a fake language it is about getting the algorithm clear in your mind before sitting down and writing it on the computer. You will find that it can be very useful when learning as you concentrate on the algorithm separately to the coding and it is the algorithms that make the most difference rather than the language used.

[555]

Someone told me to do this "Set width for the main container, remove left margin. See how layouts in other templates are coded."

arghhh.. next semester I'm taking a CSS class, I must have ADD or something, I cant concentrate and read all of that stuff on w3schools and understand it. Just need to fix this one final error, it is driving me crazy..

Edited January 4, 2011 by 555