cduke250
asked on
CSS page help. EASY. Source included. ASAP!
All I have so far is at http://www.caboosepro.com/dsc/index.html
I am a total newbie at CSS, but I am determined to use it for this site. What I want, is to be able to add a main content area where currently the page is blank.
I would like to be able to add whatever I want into this area. When the content exceeds the current size, I want the left area with the black background to expand... I also of course want the footer to move down.
I would also like to be able to add content to the left black area.
So on some pages, the left area might be longer than the main area, and vice versa. Either way, I need an easy way to add content into my page.
The page needs to work with all major browsers.
Also, any tips or tricks or appreciated and will get you points if good. Any help explaining what my code is doing is bonus. Any help with redundant css or improper/inefficient use is bonus.
I really appreciate this you guys! I will be monitoring this 24/7 until I get it.
____________
|CSS Source |
+-------------------------
/*--| Setup the scrollbar (shows in ie only) |--*/
html{
scrollbar-arrow-color: #bfbd39;
scrollbar-base-color:#69BF
scrollbar-dark-shadow-colo
scrollbar-track-color: #AEEA90;
scrollbar-face-color: #404040;
scrollbar-shadow-color: #bfbd39;
scrollbar-highlight-color:
scrollbar-3d-light-color: #bfbd39; }
/*--| Setup the BODY |--*/
body {margin: 0; padding: 0; color: #000; font-family: verdana, arial, helvetica, sans-serif; font-size: .7em; text-align: justify;}
/*--| h1 |--*/
h1 {margin: 0;color: #000; font-size: .8em; font-family: verdana, arial, helvetica, sans-serif; text-align: justify; font-weight: normal;}
/*--| p |--*/
p { margin: 0;padding:0;color: #000; font-size: 1em; font-family: verdana, arial, helvetica, sans-serif; text-align: justify;}
/*--| Setup the link styles |--*/
a:link {text-decoration: none; font-weight: bold; color: #5A933C; }
a:visited {color: #5A933C; font-weight: bold; text-decoration: none; }
a:hover, a:active {color: #69BF3A; text-decoration: none; font-weight: bold;}
/*--| Setup top_pics area |--*/
#top_pics{width: 100%;}
/*--| Horizontal navigation bar |--*/
#bannernav{margin: 0; width: 100%; background-color: #000; float: left;}
#bannernav ul{margin: 0; padding: 0;}
#bannernav li {display: inline;}
#bannernav ul li a{float: left; margin: 0; padding: .4em .6em;color: #fff; background-color: #000; border-right: 1px solid #fff;font-weight: bold;}
#bannernav ul li a:hover{background-color: #5A933C; color: #fff; font-weight: bold;}
/*--| Setup header green h bar |--*/
#header {width: 100%; background: #69BF3A; border-top: 1px solid #fff; float: left;border-bottom: 1px solid #bfbd39;}
#header h1 {margin: 0;padding: .4em;color: #fff;font-size: 1em; font-family: verdana, arial, helvetica, sans-serif; text-align: center; font-weight: bold;}
#header h2 {margin: 0;padding: 1em;color: #fff;font-size: 1em; font-family: helvetica, arial, verdana, sans-serif; text-align: left; font-weight: bold;}
/*--| Setup outer_wrapper |--*/
#outer_wrapper {background: #fff url(../images/background.g
/*--| Setup container |--*/
#container {width: 100%; float: left; background: #fff url(../images/background.g
/*--| Setup content |--*/
#content {background: #fff url(../images/background.g
/*--| Setup left area |--*/
#left { width: 150px; float: left;}
#left h1 { margin-left: 10px; margin-top: 55px; color: #fff; font-size: 1em; font-weight: bold;}
/*--| Setup googlesearch |--*/
#googlesearch{ margin: 0; }
#googlesearch p{margin-left: 2px; margin-top: 10px; padding-left: 2px;color: #fff;}
/*--|Setup navcontainer area |--*/
#navcontainer{margin: 0; margin-left: -25px; margin-top: 55px; float: left; }
#navigation li{margin-left: 0;background-image: url(../images/arrow1.gif);
#navigation li a{color: #fff;font-size: 1em;text-decoration:none;f
#navigation li a:hover{font-weight: normal; color: #bfbd39;}
/*--| Setup footer |--*/
#footer {clear: both; float: left;width: 100%; padding: 0;background: #fff; border-top: 1px solid #CCCCCC;}
#footer h1 {padding: .4em;color: #C0C0C0; font-size: .8em; font-family: verdana, arial, helvetica, sans-serif;
text-align: justify; font-weight: normal; }
/*--| Setup .clearing |--*/
.clearing { height: 0; clear: both;}
/*--| Setup .floatleft |--*/
.floatleft{float: left; margin: 5px 0 5px 2px; padding: 0;}
/*--| Setup .floatright |--*/
.floatright{float: right; margin: 10px 2px 0 0; padding: 0;}
+-------------------------
_____________
| html Source |
+-------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DUKE SECURITY CORP :: WELCOME</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="favicon.ico" rel="SHORTCUT ICON" />
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<!-- Top area including pictures -->
<div id="top_pics">
<div class="floatleft"><a href="http://www.caboosepro.com/dsc/index.html"><img src="images/logo_3.gif" alt="" height="70" width="57" border="0"/></a></div>
<div class="floatright"><a href="http://we04.com"><img src="images/web04banner.gi
</div>
<!-- Clear the top_pics area so other objects can go below it -->
<div class="clearing"></div>
<!-- Top horizontal navigational bar -->
<div id="bannernav">
<ul id="bannernav1"><li id="active"><a href="http://www.caboosepro.com/dsc/index.html" id="current">dsc Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Learning Area</a></li></ul>
</div>
<!-- Green horizontal 'title-content-area' bar -->
<div id="header">
<h1>Welcome to Duke Security Corp.</h1>
</div>
<!-- outer wrapper div for 'middle' content -->
<div id="outer_wrapper">
<div id="container">
<div id="content">
<!-- left area with background -->
<div id="left">
<!-- search my site or web with wonderful google -->
<div id="googlesearch">
<form method="get" action="http://www.google.com/custom" target="_blank">
<p><input type="text" name="q" size="14" maxlength="255" value=""/>
<input type="submit" name="sa" value="GO" style="font-size:1em; font-weight: bold; background-color:#5A933C; color:#fff; border-color:#AEEA90"/></p
<input type="hidden" name="cof" value="S:http://www.caboosepro.com/dsc/;GL:0;VLC:#69BF3A;AH:left;LH:70;LC:#5A933C;L:http://www.caboosepro.com/dsc/images/logo_3.gif;ALC:#5A933C;LW:57;AWFID:06b1154700591ac5;"/>
<p><input type="hidden" name="domains" value="caboosepro.com"/><i
</div>
<h1>Resources</h1>
<!-- vertical navigation area and links -->
<div id="navcontainer">
<ul id="navigation"><li><a href="http://www.sans.org/top20/">Top 20 Risks</a></li>
<li><a href="http://www.sans.org/resources/glossary.php">Security Glossary</a></li>
<li><a href="http://infosecuritymag.techtarget.com/articles/may01/features_career_advice.shtml">Career Potential</a></li>
<li><a href="http://www.cert.org/tech_tips/intruder_detection_checklist.html">Intruder Detection</a></li>
<li><a href="http://hoaxbusters.ciac.org/">Hoaxbusters</a></l
</div>
</div><!--left-->
</div> <!--content-->
</div><!--container-->
<!-- clear the page -->
<div class="clearing"></div>
</div><!--outer_wrapper-->
<!-- The footer div -->
<div id="footer">
<h1>© 2004 Duke Security Corp. | <a href="disclaimer.html">Dis
<br/>Designed and maintained by Duke Security Corp. This site optimized for an 800 x 600 monitor resolution. | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.caboosepro.com/dsc/index.html">CSS</a> | <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.caboosepro.com%2Fdsc%2Findex.html">XHTML</a> | </h1>
</div>
</body>
</html>
+-------------------------
I am a total newbie at CSS, but I am determined to use it for this site. What I want, is to be able to add a main content area where currently the page is blank.
I would like to be able to add whatever I want into this area. When the content exceeds the current size, I want the left area with the black background to expand... I also of course want the footer to move down.
I would also like to be able to add content to the left black area.
So on some pages, the left area might be longer than the main area, and vice versa. Either way, I need an easy way to add content into my page.
The page needs to work with all major browsers.
Also, any tips or tricks or appreciated and will get you points if good. Any help explaining what my code is doing is bonus. Any help with redundant css or improper/inefficient use is bonus.
I really appreciate this you guys! I will be monitoring this 24/7 until I get it.
____________
|CSS Source |
+-------------------------
/*--| Setup the scrollbar (shows in ie only) |--*/
html{
scrollbar-arrow-color: #bfbd39;
scrollbar-base-color:#69BF
scrollbar-dark-shadow-colo
scrollbar-track-color: #AEEA90;
scrollbar-face-color: #404040;
scrollbar-shadow-color: #bfbd39;
scrollbar-highlight-color:
scrollbar-3d-light-color: #bfbd39; }
/*--| Setup the BODY |--*/
body {margin: 0; padding: 0; color: #000; font-family: verdana, arial, helvetica, sans-serif; font-size: .7em; text-align: justify;}
/*--| h1 |--*/
h1 {margin: 0;color: #000; font-size: .8em; font-family: verdana, arial, helvetica, sans-serif; text-align: justify; font-weight: normal;}
/*--| p |--*/
p { margin: 0;padding:0;color: #000; font-size: 1em; font-family: verdana, arial, helvetica, sans-serif; text-align: justify;}
/*--| Setup the link styles |--*/
a:link {text-decoration: none; font-weight: bold; color: #5A933C; }
a:visited {color: #5A933C; font-weight: bold; text-decoration: none; }
a:hover, a:active {color: #69BF3A; text-decoration: none; font-weight: bold;}
/*--| Setup top_pics area |--*/
#top_pics{width: 100%;}
/*--| Horizontal navigation bar |--*/
#bannernav{margin: 0; width: 100%; background-color: #000; float: left;}
#bannernav ul{margin: 0; padding: 0;}
#bannernav li {display: inline;}
#bannernav ul li a{float: left; margin: 0; padding: .4em .6em;color: #fff; background-color: #000; border-right: 1px solid #fff;font-weight: bold;}
#bannernav ul li a:hover{background-color: #5A933C; color: #fff; font-weight: bold;}
/*--| Setup header green h bar |--*/
#header {width: 100%; background: #69BF3A; border-top: 1px solid #fff; float: left;border-bottom: 1px solid #bfbd39;}
#header h1 {margin: 0;padding: .4em;color: #fff;font-size: 1em; font-family: verdana, arial, helvetica, sans-serif; text-align: center; font-weight: bold;}
#header h2 {margin: 0;padding: 1em;color: #fff;font-size: 1em; font-family: helvetica, arial, verdana, sans-serif; text-align: left; font-weight: bold;}
/*--| Setup outer_wrapper |--*/
#outer_wrapper {background: #fff url(../images/background.g
/*--| Setup container |--*/
#container {width: 100%; float: left; background: #fff url(../images/background.g
/*--| Setup content |--*/
#content {background: #fff url(../images/background.g
/*--| Setup left area |--*/
#left { width: 150px; float: left;}
#left h1 { margin-left: 10px; margin-top: 55px; color: #fff; font-size: 1em; font-weight: bold;}
/*--| Setup googlesearch |--*/
#googlesearch{ margin: 0; }
#googlesearch p{margin-left: 2px; margin-top: 10px; padding-left: 2px;color: #fff;}
/*--|Setup navcontainer area |--*/
#navcontainer{margin: 0; margin-left: -25px; margin-top: 55px; float: left; }
#navigation li{margin-left: 0;background-image: url(../images/arrow1.gif);
#navigation li a{color: #fff;font-size: 1em;text-decoration:none;f
#navigation li a:hover{font-weight: normal; color: #bfbd39;}
/*--| Setup footer |--*/
#footer {clear: both; float: left;width: 100%; padding: 0;background: #fff; border-top: 1px solid #CCCCCC;}
#footer h1 {padding: .4em;color: #C0C0C0; font-size: .8em; font-family: verdana, arial, helvetica, sans-serif;
text-align: justify; font-weight: normal; }
/*--| Setup .clearing |--*/
.clearing { height: 0; clear: both;}
/*--| Setup .floatleft |--*/
.floatleft{float: left; margin: 5px 0 5px 2px; padding: 0;}
/*--| Setup .floatright |--*/
.floatright{float: right; margin: 10px 2px 0 0; padding: 0;}
+-------------------------
_____________
| html Source |
+-------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DUKE SECURITY CORP :: WELCOME</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="favicon.ico" rel="SHORTCUT ICON" />
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<!-- Top area including pictures -->
<div id="top_pics">
<div class="floatleft"><a href="http://www.caboosepro.com/dsc/index.html"><img src="images/logo_3.gif" alt="" height="70" width="57" border="0"/></a></div>
<div class="floatright"><a href="http://we04.com"><img src="images/web04banner.gi
</div>
<!-- Clear the top_pics area so other objects can go below it -->
<div class="clearing"></div>
<!-- Top horizontal navigational bar -->
<div id="bannernav">
<ul id="bannernav1"><li id="active"><a href="http://www.caboosepro.com/dsc/index.html" id="current">dsc Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Learning Area</a></li></ul>
</div>
<!-- Green horizontal 'title-content-area' bar -->
<div id="header">
<h1>Welcome to Duke Security Corp.</h1>
</div>
<!-- outer wrapper div for 'middle' content -->
<div id="outer_wrapper">
<div id="container">
<div id="content">
<!-- left area with background -->
<div id="left">
<!-- search my site or web with wonderful google -->
<div id="googlesearch">
<form method="get" action="http://www.google.com/custom" target="_blank">
<p><input type="text" name="q" size="14" maxlength="255" value=""/>
<input type="submit" name="sa" value="GO" style="font-size:1em; font-weight: bold; background-color:#5A933C; color:#fff; border-color:#AEEA90"/></p
<input type="hidden" name="cof" value="S:http://www.caboosepro.com/dsc/;GL:0;VLC:#69BF3A;AH:left;LH:70;LC:#5A933C;L:http://www.caboosepro.com/dsc/images/logo_3.gif;ALC:#5A933C;LW:57;AWFID:06b1154700591ac5;"/>
<p><input type="hidden" name="domains" value="caboosepro.com"/><i
</div>
<h1>Resources</h1>
<!-- vertical navigation area and links -->
<div id="navcontainer">
<ul id="navigation"><li><a href="http://www.sans.org/top20/">Top 20 Risks</a></li>
<li><a href="http://www.sans.org/resources/glossary.php">Security Glossary</a></li>
<li><a href="http://infosecuritymag.techtarget.com/articles/may01/features_career_advice.shtml">Career Potential</a></li>
<li><a href="http://www.cert.org/tech_tips/intruder_detection_checklist.html">Intruder Detection</a></li>
<li><a href="http://hoaxbusters.ciac.org/">Hoaxbusters</a></l
</div>
</div><!--left-->
</div> <!--content-->
</div><!--container-->
<!-- clear the page -->
<div class="clearing"></div>
</div><!--outer_wrapper-->
<!-- The footer div -->
<div id="footer">
<h1>© 2004 Duke Security Corp. | <a href="disclaimer.html">Dis
<br/>Designed and maintained by Duke Security Corp. This site optimized for an 800 x 600 monitor resolution. | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.caboosepro.com/dsc/index.html">CSS</a> | <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.caboosepro.com%2Fdsc%2Findex.html">XHTML</a> | </h1>
</div>
</body>
</html>
+-------------------------
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
CSS used is
/*--| Setup the right area |--*/
#right {margin-left: 150px; padding: 20px;}
#right h1{color: #000;}
#right p{color: #000;}
/*--| Setup the right area |--*/
#right {margin-left: 150px; padding: 20px;}
#right h1{color: #000;}
#right p{color: #000;}
Looks great.
Did it work for you?
-klykken
Did it work for you?
-klykken
ASKER
A few more ?'s:
How can I get the google search located within the top black area (holds the horizontal navigation) and still maintain the single-line appearance?
Would it be possible to get the same black appearance without use of a picture?
How can I I get a div to house added images and effects behind the uppermost top_pics area (Above black area)?
How can I easily add in a third column on the right to hold additional items like a news feed?
Any/all suggestions appreciated.
How can I get the google search located within the top black area (holds the horizontal navigation) and still maintain the single-line appearance?
Would it be possible to get the same black appearance without use of a picture?
How can I I get a div to house added images and effects behind the uppermost top_pics area (Above black area)?
How can I easily add in a third column on the right to hold additional items like a news feed?
Any/all suggestions appreciated.
ASKER
At the updated site, on the bottom, what is a way I can split the text so 2204 Duke Street - Indianapolis, Indiana 46205 - U.S.A. - appears on left and the rest on right. and
Duke Security Corp. © 2004 | Disclaimer | Copyright | on left and the rest on right?
Duke Security Corp. © 2004 | Disclaimer | Copyright | on left and the rest on right?
cduke250,
I applaud your desire to get all these things fixed and/or modified. Unfortunately, we need to keep these threads to a single question each. I would recommend closing this one if your initial question has been answered, and then go from there.
Thanks,
Sean
I applaud your desire to get all these things fixed and/or modified. Unfortunately, we need to keep these threads to a single question each. I would recommend closing this one if your initial question has been answered, and then go from there.
Thanks,
Sean
ASKER
Ya I agree, these are really tough questions and need to be asked and paid for individually and separately.
padding: 20px 10px 20px 20px;
Where each value represents, in order: top, right, bottom, left.
Good Luck! :-)
-klykken