Log in

View Full Version : 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



<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


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:

<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:

.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:



.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:

.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.
fodo
12-04-2008, 12:41 PM
Can anyone assit with helping me obtain a small gap either side of the left and right cols please.