12 replies to this topic

[_Metal_]

Hello!

I am not a programmer or something like that but I'm trying to do a website.
I am using a template that I make changes in it. The language is css.

So my question is about this part:

#page-bgbtm {

	padding: 0px 50px 0px 50px;

}


/* Content */


#content {

	float: left;

	width: 530px;

	padding: 0px 0px 0px 0px;

	margin-bottom: 40px;

}


#content a, #sidebar a {

	

	text-transform: uppercase;

	font-size: 11px;

	font-weight: bold;

}

What does page-bgbtm stand for? Page-background ...?
And second, if this part is what I think it is, then it is like a column on the right side. But how can I make this column slimmer?


Please tell me if you dont understand what I mean.
Thank you.

[WingedPanther]

It's a class that can be defined on elements where you want that formatting to apply.

[_Metal_]

sorry but I dont understand what you mean..

Can you please explain it a little further.

[Revolt]

I'd guess that stands for page background bottom.

That style is applied to an element with id 'page-bgbtm'. Probably a div. Check the html source and locate that element.

[_Metal_]

But in this template I'm using there is a text column on the right side on page. I want to either remove it or make it slimmer. But I can't find it in the code.

This is all code for the website:

body {

	margin: 0;

	padding: 0;

	background: #000000;

	font-family: candara;

	font-size: 15px;

	color: #666;

}


h1, h2, h3 {

	margin: 0;

	padding: 0;

	font-weight: normal;

	color: #3E3530;

}


h1 {

	font-size: 2em;

	text-transform: uppercase;

	font-family: candara;

	font-weight: normal;

	color: #606060;

	padding: 12px 0px;


}


h2 {

	font-size: 1.8em;

	text-transform: uppercase;

	font-family: candara;

	font-weight: normal;

	padding: 8px 0px;

}


h3 {

	font-size: 1.4em;

	text-transform: uppercase;

	font-family: candara;

	font-weight: normal;

	padding: 5px 0px;

}


p, ul, ol {

	margin-top: 10;

	line-height: 180%;

}


ul, ol {

}


a {

	text-decoration: none;

	color: #339CCB;

}


a:hover {

	text-decoration: underline;

	color: #8A8A8A;

}


#wrapper {

	margin: 0 auto;

	padding: 0;

}


/* Header */


#header {

	width: 940px;

	margin: 0 auto;

}


#header img {

	width: 940px;

	margin: 0 auto;

	padding: 0;

	margin-left:12px;

}


#namn {

	width: 940px;

	height:  60px;

	margin: 0px auto;

	background: #000;

}

#namn h1 {

	text-transform: uppercase;

	font-family: candara;

	font-size: 30px; 

	font-weight: normal;

	color: #FFF;

	padding: 0px 25px;

	margin-top:10px;

}

#namn h2 {

	text-transform: uppercase;

	font-family: candara;

	font-size: 18px; 

	font-weight: normal;

	color: #FFF;

	padding: 0px 25px;

}




/* Nav */


#nav {

	width: 837px;

	height: 50px;

	margin: -3px auto;

	padding: 0px 40px;

	background: url(http://staticjw.com/n/templates/Flowermum/images/img01.jpg) no-repeat left top;

        list-style:none;


}


#nav ul {

	margin: 0;

	padding: 0;

	list-style: none;

	line-height: normal;

}


#nav li {

	float: left;

}


#nav a {

	height: 35px;

	display: block;

	float: left;

	margin: 0px 20px 0px 10px;

	padding: 15px 25px 0px 10px;

	text-decoration: none;

	text-align: centre;

	font-family: candara;

	font-size: 13px;

	font-weight: normal;

	color: #FFFFFF;

	border: none;

}


#nav a:hover {

	text-decoration: underline;

}


#nav #active a {

	font-weight: bold;

}


#nav .first a {

	padding-left: 0px;

}



/* Page */


#page {

	width: 917px;

	margin: 0 auto;

	padding: 0;

	background: url(http://staticjw.com/n/templates/Flowermum/images/img04.jpg) repeat-y left top;

}


#page-bgbtm {

	padding: 0px 50px 0px 50px;

}


/* Content */


#content {

	float: left;

	width: 530px;

	padding: 0px 0px 0px 0px;

	margin-bottom: 40px;

}


#content a, #sidebar a {

	

	text-transform: uppercase;

	font-size: 11px;

	font-weight: bold;

}


/* Sidebar */


#sidebar {

	float: right;

	width: 280px;

	margin: 0px;

	color: #666;

}


#sidebar ul {

	margin: 0;

	padding-left: 15px;

list-style: square;

}	


#sidebar li {

	margin: 0;

	padding: 0;

}


#sidebar li ul {

	margin: 0px 0px;

	padding-bottom: 30px;

}


#sidebar li li {

	background: url(http://staticjw.com/n/templates/Flowermum/images/img07.gif) no-repeat left 15px;

	margin: 0px;

	padding: 0px 0px 0px 20px;

	line-height: 35px;

	border-bottom: 1px dotted #E7E2DC;

}


#sidebar li li span {

	display: block;

	margin-top: -20px;

	padding: 0;

	font-size: 11px;

	font-style: candara;

}


#sidebar li li a {

	padding: 0px 0px 0px 0px;

}


#sidebar h4 {

	height: 15px;

	text-transform: uppercase;

	font-family: candara;

	font-size: 1.8em;

	font-weight: normal;

	color: #606060;

}


#sidebar p {

	margin: 0 0px;

	padding: 0px 0px 20px 0px;

	text-align: justify;

}


#sidebar a {

	border: none;

	color: #339CCB;

}


/* Footer */


#footer {

	height: 50px;

	margin: 0 auto;

	padding: 0px 0 15px 0;

	font-family: Arial, Helvetica, sans-serif;

}


#footer p {

	margin: 0;

	padding-top: 20px;

	line-height: normal;

	font-size: 10px;

	text-transform: uppercase;

	text-align: center;

	color: #A19D9A;

}


#footer a {

	color: #A19D9A;

}



/* images */

#content img {

	background: #fafafa;

   border: 1px solid #dcdcdc;

	padding: 10px;

}

img.float-right {

  	margin: 5px 0px 10px 10px;  

}

img.float-left {

  	margin: 5px 10px 10px 0px;

}


fieldset#contact-form {margin:20px 0px 20px 10px;padding:10px;color:#000;width:380px;background:#fafafa;border:2px solid #dcdcdc;}

fieldset#contact-form label {font-size:13px;}

fieldset#contact-form input {height:20px;font-size:15px;margin-bottom:15px;padding:3px;}

fieldset#contact-form textarea {font-size:15px;margin-bottom:15px;width:360px;padding:3px;}

fieldset#contact-form #contact-button {font-size:14px;height:30px;margin-left:30px;}

input:focus, textarea:focus {background:#fff;border:1px solid #555;}

blockquote {font-style:italic;}

[Revolt]

No that's only the CSS code of the website.

I'd imagine that text column on the side corresponds to the #sidebar id.

[_Metal_]

But when I remove it nothing happens. The text is still there.. =(

[WingedPanther]

CSS controls how the HTML is displayed, not (in general) whether it is displayed.

[_Metal_]

So you mean that the changes must be done in the html code?

[Revolt]

If you want to remove the text altogether the easiest way would be by just removing the text from the HTML. If you just want to reduce the size of that column you must find you the id or class of the div where the text is contained and change its width via CSS. To help you find the id of something in HTML you have lots of useful tools such as firebug for firefox, dragonfly for opera and others

[_Metal_]

And the thing is that I can only make changes in the CSS code, not in the HTML. And I cant find anything that is called div or id in the CSS code. So is it possible to reduce the size of the column even though I can not make changes in the HTML?

[Revolt]

In order to know what to change in the CSS you have to take a look at the HTML code. You don't have to change it. Take a look at the page's HTML code and try to find the text that is in the sidebar. Then check the elements in which it is contained. One or more of them should have an id or class property. It is this id or class that is of interest to you so you can tell CSS what element to style.

Once again I repeat for clarity: the div elements and id properties appear in the HTML not the CSS