Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

I need some CSS Help my friends

janitorC7

janitorC7

macrumors 6502a
Original poster
Feb 10, 2006
640
20
California
ok the website that I'm working on here.

I posted it to http://www.kidneysocal.org/cmsms

It shows up almost all rite in safari, but firefox and ie do not seem to show the backround color that is behind the page wrapped. Here is what it looks like in safari, ok wells its and attachment.

the white backround is supposed to go to the very bottom.

also I want to set up a different so that the page you are on (in this case board) stays highlighted.
also please note that this will be in the CMSMS Content management system

These are my only proablems right now.

Please advise. I will post my code below.

Also design critique is always appreciated

thanks

Cooper

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>National Kidney Foundation of Southern California | Board</title>
<link href="css/template.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	color: #3B4E59;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

#pagewrapper #contentwrap #mcontentwrap div {
}
#pagewrapper #contentwrap #mcontentwrap #wrap #content {
	padding: 10px;
	height: auto;
	width: 567px;
	text-align: left;
}
.main {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: 333333;
	font-weight: bold;
	text-transform: capitalize;
}
-->
</style>
</head>

<body>
<div id="pagewrapper">
  <div id="header"></div>
  <div id="menu_horiz">
    <div id="rightwrap">Home    News     Education     Community     Who we are     You can help </div>
  </div>
  <div id="contentwrap">
    <div id="mcontentwrap">
      <div id="topcontrolwrap">
        <div id="path">NKFSc  -  Who we are  -  Board </div>
        <div class="style1" id="print"><img src="images/00000002.jpg" alt="Print" width="20" height="20" /> <img src="images/00000002-2.jpg" width="20" height="20" /><img src="images/00000002-1.jpg" width="20" height="20" /></div>
      </div>
      <div id="wrap">
        <div id="content">
          <p class="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
          <p class="substyle">Lorem Ipsum Dolor </p>
          <p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus volutpat eleifend nibh. Aenean mattis ipsum et ipsum. Phasellus aliquet tortor in elit. Integer tristique <img src="" alt="" name="image" width="162" height="141" class="image" id="image" />sagittis massa. Maecenas eleifend arcu. Fusce commodo dignissim augue. Vivamus consequat metus et ipsum. Donec enim purus, varius vel, feugiat ut, consectetuer at, sem. Fusce interdum, magna ut lobortis viverra, odio justo blandit purus, quis mollis quam ipsum nec turpis. Phasellus cursus eros vitae ante.</p>
          <p class="content">Vivamus consectetuer laoreet ante. Aliquam sit amet ligula sit amet est aliquet volutpat. Nullam ut felis non nisl ullamcorper faucibus. Quisque cursus iaculis mi. Vivamus non est vel justo semper faucibus. Curabitur id nibh. Integer nec dolor at tellus mollis condimentum. Duis vitae arcu at neque semper posuere. Nam eros odio, suscipit nec, porttitor vel, tristique convallis, nisl. Cras vulputate. Nullam placerat purus lobortis est rutrum adipiscing. Quisque rutrum urna dapibus justo. Morbi viverra iaculis mi. Vestibulum massa metus, auctor ac, condimentum sed, congue sed, urna. In hac habitasse platea dictumst. Nullam quis leo.</p>
          <p class="content">Nulla sollicitudin porta urna. Curabitur eu ligula. Duis lectus dui, volutpat pulvinar, rutrum in, mattis facilisis, risus. Cras nulla sapien, rutrum quis, consectetuer eget, lacinia eu, est. Vivamus facilisis adipiscing ipsum. Suspendisse potenti. Fusce tempus pede. Fusce in orci. Sed lacus. Nunc aliquet. Curabitur venenatis. Sed sit amet lectus vitae nisi dignissim condimentum.</p>
          <p class="content"> </p>
          <p class="content"><span class="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></p>
          <p class="substyle">Lorum</p>
          <p class="content">Vivamus consequat. Phasellus interdum, lectus vel mattis suscipit, magna arcu <img src="" name="image" width="213" height="185" class="image" id="image" />vestibulum nunc, et venenatis erat velit non tortor. Vestibulum eget sapien. Fusce blandit turpis eget sem. Nulla facilisi. Praesent sapien mi, tincidunt a, bibendum vel, interdum sed, ligula. Etiam quis ante a sapien dictum interdum. Sed accumsan dignissim libero. Curabitur pretium, ante et viverra rhoncus, augue leo blandit sem, sit amet egestas enim nunc et sem. Mauris vestibulum.</p>
          <p class="content">Praesent odio risus, volutpat eget, vehicula vel, faucibus eget, pede. Nam massa. Sed iaculis. Cras consectetuer lectus eget dolor. Nunc faucibus auctor neque. Cras mollis tempor odio. Mauris porta libero in velit. Nullam eros. Donec condimentum, est in consectetuer ornare, lectus urna posuere neque, non lobortis augue nisi vel nisl. Nulla sed elit sit amet risus lacinia pretium. Donec fringilla.</p>
        </div>
      </div>
    </div>
    <div id="subnav">
      <ul>
        <li>Subnav 1</li>
        <li>Board</li>
        <li>Subnav 3</li>
        <li>Subnav 4</li>
        <li>Subnav 5 </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

Code: 
body {
	margin: 0px;
	padding: 0px;
	background-color: cccccc;
}
#pagewrapper {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
	height: auto;
	position: relative;
	border-right-width: thin;
	border-bottom-width: thin;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #000000;
	border-bottom-color: #000000;
}
#pagewrapper #foot1 {
	position: absolute;
	bottom: 20px;
	left: 1px;
}
#pagewrapper #header {
	height: 118px;
	background-image: url(../images/header.jpg);
}
#pagewrapper #menu_horiz {
	height: 23px;
	background-image: url(../images/backnav.jpg);
}
#pagewrapper #menu_horiz #rightwrap {
	background-color: #000033;
	height: 23px;
	width: 593px;
	float: right;
	background-image: url(../images/backnav.jpg);
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	color: #FFFFFF;
}
#pagewrapper #menu_horiz #rightwrap #wrap ul {
	list-style-type: none;
	display: inherit;
}
#pagewrapper #menu_horiz #rightwrap #wrap li {
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	text-transform: capitalize;
	color: #FFFFFF;
	font-variant: normal;
	height: 23px;
}
#pagewrapper #menu_horiz #rightwrap #wrap {
	height: 4px;
}
#pagewrapper #menu_horiz #rightwrap #wrap ul {
	height: 23px;
}
#pagewrapper #contentwrap {
	margin-top: 7px;
	margin-right: 7px;
	margin-bottom: 7px;
}
#pagewrapper #contentwrap #subnav {
	width: 205px;
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #009966;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #009966;
	background-color: #E5E5E5;
}
#pagewrapper #contentwrap #subnav ul {
	list-style-type: none;
	display: inherit;
}
#pagewrapper #contentwrap #subnav li {
	padding: 3px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	text-transform: capitalize;
	color: #3B4E59;
	font-size: 14px;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #E5E5E5;
	border-right-color: #E5E5E5;
	border-bottom-color: #E5E5E5;
	border-left-color: #E5E5E5;
}
#pagewrapper #contentwrap #subnav li:hover {
	background-color: #F9F9F9;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #333333;
	border-bottom-color: #333333;
}
#pagewrapper #contentwrap #subnav li:link {
	color: #3B4E59;
}
#pagewrapper #contentwrap #contentheadwrap {
	width: 580px;
	float: right;
}
#pagewrapper #contentwrap div {
	width: 588px;
	float: right;
	background-color: #FFFFFF;
}
#pagewrapper #contentwrap #mcontentwrap #topcontrolwrap {
}
#pagewrapper #contentwrap #mcontentwrap #topcontrolwrap #path {
	width: auto;
	float: left;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #324651;
	padding: 6px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #31424C;
	font-variant: small-caps;
	text-transform: uppercase;
}
#pagewrapper #contentwrap #mcontentwrap #topcontrolwrap #print {
	width: auto;
	padding: 2px 6px 2px 2px;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #3F505F;
}
.content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: 333333;
	padding-left: 13px;
}
.style1 {font-size: 11px}
.substyle {
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	text-align: right;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #6A6A6A;
	font-size: 12px;
}
.image {
	float: left;
	margin: 7px;
	border: thin solid #010000;
}
#pagewrapper #footer1 {
	position: absolute;
	bottom: 99px;
	width: 320px;
	left: 318px;
}
#pagewrapper .footer {
	position: absolute;
	height: 10px;
	width: 100;
	bottom: 10px;
	visibility: visible;
}
#pagewrapper #foot {
	position: static;
	bottom: 1px;
}
 

Attachments

  • screenshotcmsms1.jpg
    screenshotcmsms1.jpg
    208.2 KB · Views: 181
What I've noticed about CSS is that it can get very confusing see what elements you need to add to the blocks.

Code: 
body {
	margin: 0px;
	padding: 0px;
	background-color: cccccc;
}

The main thing I've learned is no shortcuts. Your background color is "cccccc" not "#cccccc". FireFox and IE both need to have things defined, (for Javascript, it is not really that necessary for FireFox).

I recommend changing it to #cccccc.

Also, what do you mean about "board?" I am very confused on what you are asking here. If you mean you want to have something stay highlighted you would need to use Javascript for that.

Edit: I see what you mean now. You would have to write a JavaScript for that. I don't know the exact code off hand, but I know people around here can help.

Steve
 
LtRammstein said:
What I've noticed about CSS is that it can get very confusing see what elements you need to add to the blocks.

Code: 
body {
	margin: 0px;
	padding: 0px;
	background-color: cccccc;
}

The main thing I've learned is no shortcuts. Your background color is "cccccc" not "#cccccc". FireFox and IE both need to have things defined, (for Javascript, it is not really that necessary for FireFox).

I recommend changing it to #cccccc.

Also, what do you mean about "board?" I am very confused on what you are asking here. If you mean you want to have something stay highlighted you would need to use Javascript for that.

Edit: I see what you mean now. You would have to write a JavaScript for that. I don't know the exact code off hand, but I know people around here can help.

Steve
Click to expand...


Thanks man!

I see why that does not work, never really noticed that.


as for the starying highlighted thing, I'm using CMSMS, so I know that there is a way to do it in there, but I already have a guy helping me with that, so I should be good, but if anybody knows.

additionally how can I make the footer work so that the white expands all the way to the bottom, any ideas.

cooper
 
Well from my experience on that, I'd create an element and have JavaScript control that. I've been working with Spry Framework for AJAX recently, and it does a very good job on doing something similar to what you are asking, so I recommend looking into Spry.

Other than that, what you are mainly asking for is pure JavaScript on-the-fly editting. I don't know JavaScript well enough to be able to tell you how to do it, but maybe your friend could help you since, from what I understand, it isn't like you are needing to upload a photograph to a random server that needs to be resized and encoded to a different format before it's sent...

I do recommend this: http://javascript.internet.com.

There's a lot of free JavaScript people made, and you might be able to find the script you need there.

Steve
 
LtRammstein said:
Well from my experience on that, I'd create an element and have JavaScript control that. I've been working with Spry Framework for AJAX recently, and it does a very good job on doing something similar to what you are asking, so I recommend looking into Spry.

Other than that, what you are mainly asking for is pure JavaScript on-the-fly editting. I don't know JavaScript well enough to be able to tell you how to do it, but maybe your friend could help you since, from what I understand, it isn't like you are needing to upload a photograph to a random server that needs to be resized and encoded to a different format before it's sent...

I do recommend this: http://javascript.internet.com.

There's a lot of free JavaScript people made, and you might be able to find the script you need there.

Steve
Click to expand...

thanks man. I'll look into that.


Does anybody have any opinions on the design

I just uploaded an updated version to the server......

YOU are welcome to be critical!!!!

http://www.kidneysocal.org/cmsms
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back