Need to change column widths and <img> question

xendistar · Joined: 08 May 2007 Posts: 32

I am using this web template:

http://www.oswd.org/design/preview/id/3621

Problem is I want to narrow the left column and expand the right column (by the same amount but can't find the bits in the CSS file (see CSS file below, sorry for having to post the entire file).

"left" is the left column, (headed Main Menu) and "main" is the right column, which one do I need to change.

Also, I have the code to for the CSS to put a border around all the images, now I can add this to the bottom of the CSS below and I get the desired result (I tried while testing the template). The problem is I may decide to use some small icons on the main menu and I won't want them with margins and borders like I do the pictures. Would I be able to assign the <img> tag for the main menu in the #left section of the CSS and a different setup for the <img> tag in the #main section of the CSS??

body {
font-family:arial, verdana, helvetica, sans-serif;
font-size:12px;
cursor:default;
background-color:#FFFFFF
}
* {
margin: 0px;
padding: 0px;
text-decoration: none;
}
html {
height:100%;
margin-bottom:1px;
}
#container {
width: 80%;
margin-right: auto;
margin-left: auto;
text-align: left;
background-color: #FFFFFF;
}
#header {
width:100%;
padding-top:15px;
}
.spacer {
width:100%;
height:15px;
}
hr {
border:0px;
color:#CCCCCC;
background-color:#CDCDCD;
height: 1px;
width: 100%;
text-align: left;
}
h1 {
font-size:28px;
color:#3333ff;
background-color:#FFFFFF;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-weight:300;
text-align:right;
}
h2 {
font-size:15px;
color:gray;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-weight:300;
text-align:right;
background-color:#FFFFFF;
}
h3 {
color:#3333ff;
font-size:15px;
text-align:left;
font-weight:300;
padding:5px;
margin-top:5px;
}

#left {
float:left;
width:250px;
background-color:#FFFFFF;
color:black;
}

#main {
margin : 5px 5px 5px 260px;
padding : 15px;
border-left : 1px solid silver;
}
p {
color:black;
background-color:#FFFFFF;
line-height:20px;
padding:5px;
}
a {
color:#3333ff;
background-color:#FFFFFF;
text-decoration:none;
}
a:hover {
color:#3333ff;
background-color:#FFFFFF;
text-decoration:underline;
}
#footer {
clear:both;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.right {
color:gray;
background-color:#FFFFFF;
float:right;
font-size:100%;
margin-top:5px;
}
.left {
color:gray;
background-color:#FFFFFF;
float:left;
font-size:100%;
margin-top:5px;
}

Regards

Tim

Airick1994 · Joined: 20 Dec 2007 Posts: 101 Location: Canada, eh?

For your question on the images, put this into your CSS:

xendistar · Joined: 08 May 2007 Posts: 32

Thank Airick, I can understand your answer so I think you understood the question.

Regards

Tim

Airick1994 · Joined: 20 Dec 2007 Posts: 101 Location: Canada, eh?

Wait, I helped? Kewlz. I didn't think I would.

By the way, it's Eric. Lol.

xendistar · Joined: 08 May 2007 Posts: 32

Solved the CSS problem, I had to reduce the "#left" width to around 180 and the "#main" margin to 190 to get the desired affect I wanted.

Tim