style problem

**fodo** · 12-03-2008, 12:22 PM

I am using layout 3.3 fluid/fluid/fluid
I want to style the left and right cols and have applied css rules, but they have no effect.
Can any one help please?
mark up

Code:

<body>
<div id="maincontainer">
	<div id="contentwrapper">
	
	<div id="contentcolumn">
			<div class="innertube"><img border="0" src="images/SHCBook.jpg" width="237" height="317" alt="Successful Home Catering"/></div>
		</div>
	</div>

	<div id="leftcolumn">
<div class="innertube">
						<br />
						<br />
						<br />
						<br />
						<ul>
						<li class="left">Getting Started</li>
						<li>Developing Yowr Own Personal Style</li>
						<li>Shopping</li>
						<li>General Planning</li>
						<li>The Young Market</li>
						<li>International Cusine</li>
						<li>Catering for Commercial Outlets</li>
						<li>Events and Menus</li>
						<li>Case Studies</li>
						<li>Recipes</li>
						<li>How to Purchase</li>
						
</div>

	</div>

	<div id="rightcolumn">
<div class="innertube">
						<p class="right">Hello and welcome to Suuccessful Home Catering, the essentail and most valuable publication for you if you are interested in setting up a business in this growing and most exciting market.</p>
						<p class="right">Previously released as a highly successful series of monthly lessons, we have taken the modules and combined them into an easy to understand and simple to use single publication.<p/>
						<p class="right">This will take you through all the key areas you will need to know in the setting up of your successful home catering business.</p>
</div>
	</div>
</div>	
</body>
</html>

CSS

	Code:
	body{
	margin: 0;
	padding: 0;

	background: #6EC6F1;
	text-align: center;
}
#maincontainer{
	width: 900px;
	margin: 0 auto;
	padding-top: 5px;
	background: url('../images/backgroundx900.jpg');
	background-repeat: no-repeat;
	width: 900px;
	height: 692px;
}
#contentwrapper{
	float: left;
	width: 100%;
	/*background: url('../images/bookx900.jpg');*/
	background-repeat: no-repeat;
	
	width: 900px;
	height: 692px;
}

#contentcolumn{
margin: 100px 30% 0 30%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 30%; /*Width of left column in percentage*/
margin-left: -100%;
margin-top:100px;
background: url('../images/Appetisers.jpg');
text-align: left;

}
#leftcolumn ul{
  	list-style-type:none;
  	font-size: 12px;
}
.left li{
  	margin-bottom: 5px;
  	font-size: 12px;
  	font-weight: bold;
  	color:#000000;
}
#rightcolumn{
float: left;
width: 30%; /*Width of right column in pixels*/
margin-left: -30%; /*Set margin to that of -(RightColumnWidth)*/
margin-top:100px;
background: #FDE95E;
}
.right p{
  font-size: 12px;
  font-weight: bold;
  text-align:left;
  color:#000000;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

**Snookerman** · 12-03-2008, 12:31 PM

You missed the close tag for the list:

Code:

<ul>
  <li class="left">Getting Started</li>
  <li>Developing Yowr Own Personal Style</li>
  <li>Shopping</li>
  <li>General Planning</li>
  <li>The Young Market</li>
  <li>International Cusine</li>
  <li>Catering for Commercial Outlets</li>
  <li>Events and Menus</li>
  <li>Case Studies</li>
  <li>Recipes</li>
  <li>How to Purchase</li>
</ul>

**fodo** · 12-03-2008, 12:47 PM

Hi thanks for spotting that
However my styles are still not getting applied.
For instance li class left should give me bold and 12 px size should it not.
I only styled one at this point

**Snookerman** · 12-03-2008, 01:09 PM

That is because you are referring to a list item inside a tag with the class left. Your code should just be:

Code:

.left {
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: bold;
	color:#000000;
}

That targets all the tags with the class left.

**Schmoopy** · 12-03-2008, 01:09 PM

Change your CSS to this to make the font size bigger, instead of applying rules to the leftcolumn ul, apply it to the innertube ul and it works. The innertube is a class, and not an id, as you have it in your CSS. Also you have ".left li" which is also incorrect, it should be "li.left" as the li comes first:

Code:

.innertube ul{
  	list-style-type:none;
  	font-size: 12px;
}
li.left{
  	margin-bottom: 5px;
  	font-size: 12px;
  	font-weight: bold;
  	color:#000000;
}
p.right{
  font-size: 12px;
  font-weight: bold;
  text-align:left;
  color:#000000;
}

Also the same with "right .p" the p comes before the right class.

Hope this helps you out, tell me if I've left any other CSS rule out and I'll see what I can do to fix it.

**Snookerman** · 12-03-2008, 01:11 PM

Same thing with this one:

Code:

.right {
	font-size: 12px;
	font-weight: bold;
	text-align:left;
	color:#000000;
}

**Snookerman** · 12-03-2008, 01:15 PM

To clarify:
.left targets all tags with the class left.
li.left targets all li tags with the class left.

**fodo** · 12-03-2008, 01:18 PM

Thanks guys. Thas set me on the right course.
How would I apply a small space to the left and to the right of the outter cols?
Would I just apply margin-left and margin-right? I thought this might upset the 3 col layout.

**Schmoopy** · 12-03-2008, 01:19 PM

Instead of margin you could use padding, if that's what you want, or do you want the columns to be pushed apart?

**fodo** · 12-03-2008, 01:24 PM

I just want say 10px; to move the left col right and the same for the right to move it left. This hopefully leaves a gap so the cols are not against the boundary of the maincontainer.

Thread: style problem

Thread Tools

Search Thread

style problem

Bookmarks

Bookmarks

Posting Permissions