3 replies to this topic

[DJM]

Just wanted to ask for some help with my site regarding CSS Stylesheet. If you go to my site and see that there is a menu list on the left hand side. I wanted to create another box under that one the same width. The contents of my CSS Stylesheet is below, anyone know how to do this? As I have tried but am unable to do so.

I also previously got help to set up that current menu so it is embedded using a particular code that links to another file so I only have to change that particular file in order to change the menu thus not having to change every page on the site when I want to change the menu. It would be great if I could set this up the same. But for now I just need to know how to do it.

I thought I would post this here as the help I have had previously with this forum was great and I appreciate everyone's help, thanks.

* {
	margin: 0;
	padding: 0;
}

body {
background: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 17px;
color: #eee;
}

a {
text-decoration: none;
color: #FFE788;
}
a:hover {
text-decoration: none;
color: #eee;
}

#wrap {
margin: 20px auto;
width: 800px;
}

#header {
height: 60px;
line-height: 60px;
}
#header h1 {
color : #fff; 
font-size: 50px;
letter-spacing: -7px;
}

#left {
margin-top: 10px;
float: left;
width: 160px;
font-size: 13px;
padding: 10px;
background: #2F2C2C;
border-left:1px solid #FFE788;
border-right:1px solid #FFE788;
border-top:1px solid #FFE788;
border-bottom:1px solid #FFE788;
}
#left ul {
list-style-type: square;
padding: 5px 0 10px 30px;
color: #FFE788;
}
#left h2 {
font-size: 20px;
font-weight: 100;
letter-spacing: -2px;
padding: 5px 0 5px 0;
}

#right {
margin-top: 10px;
margin-bottom: 50px;
float: right;
width: 580px;
background: #2F2C2C;
text-align: justify;
padding: 10px;
border-left:1px solid #FFE788;
border-right:1px solid #FFE788;
border-top:1px solid #FFE788;
border-bottom:1px solid #FFE788;
}
#right h2 {
font-weight: 100;
letter-spacing: -2px;
font-size: 28px;
padding: 15px 0 10px 0;
}
#right h2 a {
}
#right h2 a:hover {
color: #fff;
text-decoration: none;
}

#footer {
background: #0D0D0D;
font-size: 11px;
text-align: center;
margin-top: 30px;
padding: 5px 0;
}

[truefusion]

The problem is how you structured the content. #left should be its own container, whose only purpose is to float to the left; it should not have any other styling (except perhaps width). Therefore you can shove other boxes in there and they will all be on the left side and they can have their own styling.

[DJM]

truefusion, on 01 September 2010 - 05:33 AM, said:

The problem is how you structured the content. #left should be its own container, whose only purpose is to float to the left; it should not have any other styling (except perhaps width). Therefore you can shove other boxes in there and they will all be on the left side and they can have their own styling.

Oh ok, would you be able to post the style sheet here with the modifications to show me? As I am a bit of a spazoid with this stuff, if not I'll give it a blind crack myself, thanks.

[truefusion]

DJM, on 01 September 2010 - 05:41 AM, said:

Oh ok, would you be able to post the style sheet here with the modifications to show me? As I am a bit of a spazoid with this stuff, if not I'll give it a blind crack myself, thanks.

I would change this:

#left {
margin-top: 10px;
float: left;
width: 160px;
font-size: 13px;
padding: 10px;
background: #2F2C2C;
border-left:1px solid #FFE788;
border-right:1px solid #FFE788;
border-top:1px solid #FFE788;
border-bottom:1px solid #FFE788;
}

To this:

#left {
margin-top: 10px;
float: left;
width: 160px;
font-size: 13px;
}

#left div {
padding: 10px;
background: #2F2C2C;
border-left:1px solid #FFE788;
border-right:1px solid #FFE788;
border-top:1px solid #FFE788;
border-bottom:1px solid #FFE788;
}

That way you can do:

<div id="left">
<div>Navigation box #1</div>
<div>Navigation box #2</div>
</div>