CSS Counterstrike HTML/CSS Question!

Hello!

I've edited the Counterstrike template (Counter-Strike template) for a website I'm working on, but when I try to make the main content box larger (by changing the width from 496 pixels to 600 pixels) the right image box ("rightcol_img.gif") does not "snap to" the edge of the newly wider content box, instead it seems "fixed" to the original width. So, after making the content box wider, it actually overlaps that right image box. I've looked through the code and can't figure out what I'm missing! Could someone help me out?

Thanks in advance!

 

If you make the main content box wider then the images for the top and bottom rounded-corner effect will no longer fit (main_bg_top.gif and main_bg_bot.gif).

I stopped looking at the problem at that point. If you manage to get the images you need and are still stuck please get back to me.

 

I resized the images so that they fit. Please take a look and let me know if this is what you are looking for:

counter_strike

 

Hey Tom,

Yes, that is what I'm going for! Which images did you resize? I tried re-sizing the logo, it did not show up as wider, and when I changed the CSS code from 484 pixels to 600 pixels to match the actual size of the wider image, it bumped it to the right. When I tried making the main_bg_top.gif and main_bg_bot.gif all 600 pixels wide, in addition to the logo being 600 pixels wide, the nav menu was overlapping the main content box!

Thanks

 

Thanks Geoff, but I can easily make the top & bottom gifs 600 pixels wide in Photoshop

 

I resized main_bg_top.gif and main_bg_bot.gif as noted by Geoff Tyler. No need to resize the logo. It looks fine even with the wider box. The image might get distorted when resized.

When you resized the main content box you must adjust the body as well. Your CSS code should be like this:

Code:

* {
    margin: 0px;
    padding: 0px;
}

body {
    color: #fff;
    background-color: #484848;
    font-family: 'verdana', 'helvetica', sans-serif;
    font-size: 100%;
    text-align: center;
}

table {
    font-size: 1em;
}

td {
    color: #fff;
    background-color: inherit;
    font-family: 'verdana', 'helvetica', sans-serif;
    font-size: 1em;
}

a {
    color: #fff;
    background-color: inherit;
    text-decoration: underline;
}

a:hover {
    color: #fff;
    background-color: inherit;
    text-decoration: none;
}

img {
    border: none;
}

ul, ul li {
    list-style: none outside;
}

ol, ol li {
    list-style: decimal inside;
}

p {
    padding: 0.6em 0em 0.6em;
}

fieldset {
    border: none;
}

input, textarea, select {
    font-family: 'verdana', 'helvetica', sans-serif;
    font-size: 13px;
}

.hidethis {
    display: none;
}

.clearthis {
    margin : 0px;
    height : 1px;
    clear : both;
    float : none;
    font-size: 1px;
    overflow : hidden;
    visibility: hidden;
}


/* ++++++++++++++++++++ Image Thumbnails ++++++++++++++++++++ */

.tb_center {
    text-align: center;
}

.tb_center img {
    margin: 1.3em auto;
    border: 1px #fff solid;
}



/* ++++++++++++++++++++ Body Wrappers ++++++++++++++++++++ */

#body_wrapper {
    margin: 35px 10px;
    width: 1086px;
    background: url('images/rightcol_img.gif') no-repeat 100% 68px;
    font-size: 0.71em;
}

/* ++++++++++++++++++++ Body Container ++++++++++++++++++++ */

#body_container {
    float: right;
    position: relative;
    left: -243px;
    width: 600px;
    background: url('images/main_bg_bot_2.gif') no-repeat 0% 100%;
}

#body_container_b {
    padding: 15px 0px;
    width: 600px;
    background: url('images/main_bg_top_2.gif') no-repeat 0% 0%;
}

#body_container_c {
    color: inherit;
    background-color: #8e8257;
    border-left: #fff 6px solid;
    border-right: #fff 6px solid;
}



/* ++++++++++++++++++++ Page Header ++++++++++++++++++++ */

#page_header {
    padding-bottom: 2px;
    color: inherit;
    background-color: #b3ab78;
}

#page_header h1 {
    position: relative;
    top: -4px;
    width: 100%;
    height: 40px;
    background: url('images/counterstrike_logo.gif') no-repeat 50% 50%;
}



/* ++++++++++++++++++++ Page Content ++++++++++++++++++++ */

#page_content {
    padding: 15px 17px 10px;
    font-weight: bold;
    text-align: left;
}

.link_readmore {
    padding: 35px 0px 10px;
    text-align: right;
}

.link_readmore a {
    margin-left: auto;
    display: block;
    width: 94px;
    height: 24px;
    background: url('images/button_readmore.gif') no-repeat 0% 0%;
}



/* ++++++++++++++++++++ Navigation Menu ++++++++++++++++++++ */

#navmenu {
    float: left;
    margin-top: 68px;
    position: relative;
    left: 77px;
    width: 166px;
    background: url('images/navmenu_bg_bot.gif') no-repeat 0% 100%;
    font-size: 1.15em;
    font-weight: bold;
}

#navmenu_b {
    padding: 15px 0px;
    width: 166px;
    background: url('images/navmenu_bg_top.gif') no-repeat 0% 0%;
}

#navmenu_c {
    color: inherit;
    background-color: #6d6845;
    border-left: #fff 6px solid;
}

#navmenu a {
    text-decoration: none;
    text-transform: uppercase;
}

#navmenu li {
    border-top: #fff 1px solid;
}

#navmenu li a {
    display: block;
    padding: 5px 0px;
    width: 160px;
}

#navmenu li a:hover {
    color: inherit;
    background-color: #989160
}

#navmenu li.list_first {
    border-top: none;
}

/* ++++++++++++++++++++ Page Footer ++++++++++++++++++++ */

#page_footer {
    padding: 20px 0px;
    font-size: 0.9em;
    font-weight: bold;
}

 

This is why I'm confused: my main_bg_top.gif and main_bg_bot.gif *are* re-sized to 600 pixels, and this is what it looks like:

The main content box is no longer overlapping the "rightcol_img", but see how the nav menu now overlaps the content box?



My CSS code does look like what you posted, and this is the other portion that I also edited:



What am I missing?!

Thanks again for your help!

 

Can you post your entire actual CSS code (not an image) so I can copy and paste it into mine?

If this is on a website can you also give us the link? PM me if you wish not to make it public. Thanks.

 

It's not online yet - I'm working on making that happen this weekend

Here's the full CSS code:

Code:

/* +++++++++++++++++++++++++++++ Shifting Ground +++++++++++++++++++++++++++++ */


/* ++++++++++++++++++++ Common Styles ++++++++++++++++++++ */


* {
	margin: 0px;
	padding: 0px;
}

body {
	color: #fff;
	background: #000066;
	font-family: 'verdana', 'helvetica', sans-serif;
	font-size: 100%;
	text-align: center;
}

table {
	font-size: 1em;
}

td {
	color: #fff;
	background-color: inherit;
	font-family: 'verdana', 'helvetica', sans-serif;
	font-size: 1em;
}

a {
	color: #fff;
	background-color: inherit;
	text-decoration: underline;
}

a:hover {
	color: #fff;
	background-color: inherit;
	text-decoration: none;
}

img {
	border: none;
}

ul, ul li {
	list-style: none outside;
}

ol, ol li {
	list-style: decimal inside;
}

p {
	padding: 0.6em 0em 0.6em;
}

fieldset {
	border: none;
}

input, textarea, select {
	font-family: 'verdana', 'helvetica', sans-serif;
	font-size: 13px;
}

.hidethis {
	display: none;
}

.clearthis {
	margin : 0px;
	height : 1px;
	clear : both;
	float : none;
	font-size: 1px;
	overflow : hidden;
	visibility: hidden;
}


/* ++++++++++++++++++++ Image Thumbnails ++++++++++++++++++++ */

.tb_center {
	text-align: center;
}

.tb_center img {
	margin: 1.3em auto;
	border: 1px #fff solid;
}



/* ++++++++++++++++++++ Body Wrappers ++++++++++++++++++++ */

#body_wrapper {
	margin: 35px 10px;
	width: 982px;
	background: url('images/rightcol_img.jpg') no-repeat 100% 68px;
	font-size: 0.71em;
}

/* ++++++++++++++++++++ Body Container ++++++++++++++++++++ */

#body_container {
	float: right;
	position: relative;
	left: -243px;
	width: 600px;
	background: url('images/main_bg_bot600.gif') no-repeat 0% 100%;
}

#body_container_b {
	padding: 15px 0px;
	width: 600px;
	background: url('images/main_bg_top600.gif') no-repeat 0% 0%;
}

#body_container_c {
	color: inherit;
	background-color: #000066;
	border-left: #fff 6px solid;
	border-right: #fff 6px solid;
}



/* ++++++++++++++++++++ Page Header ++++++++++++++++++++ */

#page_header {
	padding-bottom: 2px;
	color: inherit;
	background-color: #FFFFFF;
}

#page_header h1 {
	position: center;
	top: -4px;
	width: 600px;
	height: 73px;
	background: url('images/cg_logo.jpg') no-repeat 50% 50%;
}



/* ++++++++++++++++++++ Page Content ++++++++++++++++++++ */

#page_content {
	padding: 15px 17px 10px;
	font-weight: bold;
	text-align: left;
	
}

.link_readmore {
	padding: 35px 0px 10px;
	text-align: right;
}

.link_readmore a {
	margin-left: auto;
	display: block;
	width: 94px;
	height: 24px;
	background: url('images/button_readmore.gif') no-repeat 0% 0%;
}



/* ++++++++++++++++++++ Navigation Menu ++++++++++++++++++++ */

#navmenu {
	float: left;
	margin-top: 68px;
	position: relative;
	left: 77px;
	width: 166px;
	background: url('images/navmenu_bg_bot.gif') no-repeat 0% 100%;
	font-size: 1.15em;
	font-weight: bold;
}

#navmenu_b {
	padding: 15px 0px;
	width: 166px;
	background: url('images/navmenu_bg_top.gif') no-repeat 0% 0%;
}

#navmenu_c {
	color: inherit;
	background-color: #339933;
	border-left: #fff 6px solid;
}

#navmenu a {
	text-decoration: none;
	text-transform: uppercase;
}

#navmenu li {
	border-top: #fff 1px solid;
}

#navmenu li a {
	display: block;
	padding: 5px 0px;
	width: 160px;
}

#navmenu li a:hover {
	color: inherit;
	background-color: #FFCC00
}

#navmenu li.list_first {
	border-top: none;
}



/* ++++++++++++++++++++ Page Footer ++++++++++++++++++++ */

#page_footer {
	padding: 20px 0px;
	font-size: 0.9em;
	font-weight: bold;
}

Let me know what you think is out of whack... thanks again for your help!

 

Ok, I found it. You need to change the body_wrapper width from 982px to 1085px (line 100). This is to adjust the new width along with the change in body_container (from 496px to 600px).

As you may know, I developed a CMS and I also converted all the templates found here into themes where you can use to create your website. Here is a thread in promoting it. Let me know if you are interested in trying it out.

 

Yes!!! That worked! Thank you!!!

I checked out the thread that you referred to, but I work on Macs and the program is Windows only, correct?

I have another teensy question, if you don't mind... I'm wondering if it's possible to keep the hover "on" for the active page in the navigation menu? When you hover over one of the navigation buttons, it turns yellow, and I'm wondering if it's possible for it to stay yellow, according to what page is being viewed (i.e. "Home" on for the index, etc.)

Thanks again... really, really appreciate your help!

 

Here is my answer to your teensy question: yes, you certainly can keep the hover color for the active page. You simply insert the following code after line 210:

Code:

#navmenu #active a {
    color: inherit;
    background-color: #FFCC00
}

And then for each page insert id="active" at the li tag for the active page menu item.
Example: <li id="active"><a href="member.html">Members</a></li>

Check out my test site for the demo.

w-CMS runs on a server with PHP5 and SQLite enabled. Once your site goes online I can walk to through the process of installing it in your webhost’s server.