CSS Problems

D

dee

I'm really not sure if anyone can help me - I know this is a FrontPage
newsgroup, not a CSS one! However, here goes:

I'm new to CSS and am struggling with my first design. I'm so tempted to go
back to tables but am trying not to!

I have posted my HTML and CSS below. Very simply, I would like 3 columns
that should look like (in order from top of page):

A "banner image" that goes across the entire page - 100%.

A container that is 65% the width of the page, that houses:

-A header that is currently in three divs, but could be in one, if I could
figure out how.

-A horizontal ul navigation bar.

-Three columns, the middle being for the main content.

A footer that spans the main content (65%)

I have copied and pasted from here and there (very generously explained and
offered), but am missing something.

Here is my HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Language" content="en-ca">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="djh_styles_sheet.css">

</head>

<body>
<div id="banner">
<img src="djh_banner.jpg" width="100%" height="100"
alt="Welcome"
</div>



<div id="wrapper1"><!-- sets background to white and creates full length
leftcol-->

<div id="wrapper2"><!-- sets background to white and creates full length
rightcol-->

<div id="maincol"><!-- begin main content area -->

<div id="leftcol"><!-- begin leftcol -->
<p> <img src="djh_logo.jpg" width="150" height="100"</p>
</div><!-- end leftcol -->

<div id="rightcol"><!-- begin rightcol -->
<p><img src="people.jpg" width="275" height="150"</p>
</div><!-- end righttcol -->

<div id="centercol"><!-- begin centercol -->
<h1><p> </p>


<p>Build Your People...</p>
<p>&nbsp&nbsp&nbsp&nbspBuild Your Business.</p></h1>


</div><!-- end centercol -->


<p class="clear"></p>
<div id="nav_bar"><!-- begin nav_bar -->
<ul>
<li><a href=#"index.htm">Home &nbsp</a</li>
<li><a href="#about_us.htm">About Us &nbsp</a</li>
<li><a href="#services.htm">Services &nbsp</a</li>
<li><a href="#">Training &nbsp</a</li>
<li><a href="#contact_us.htm">Contact Us &nbsp</a</li>
<li><a href="#links.htm">Links &nbsp</a</li>
<li><a href="#">Library &nbsp</a</li>
<li><a href="#testimonials.htm">Testimonials &nbsp</a</li>
<li><a href="#find_us.htm">Find Us &nbsp</a</li>
<li><a href="#employment.htm">Employment &nbsp</a</li>

</ul>
</p>
</div><!-- end nav_bar -->
<div id="maincol2"><!-- begin second main content area -->

<div id="leftcol2"><!-- begin leftcol -->
<p> sfsdfsdfsdfskdfklsd jflsdlf sdklf jsdf</p>
</div><!-- end leftcol -->

<div id="rightcol2"><!-- begin rightcol -->
<p>ksdlfslf jlskdf jklsdj fl dlsfj dsf</p>
</div><!-- end righttcol -->

<div id="centercol2"><!-- begin centercol -->
<p>dsfldsklf jf sdklf jlf dlf jdfjl fl</p>


</div><!-- end centercol -->
<!-- end main content area -->

</div><!-- end wrapper1 -->

</div><!-- end wrapper2 -->








</body>

</html>

Here is my CSS:

/* Make sure to use background-color: xxx and color: xxx in background rule,
because different browsers use different rules */
/* The following has the html for older browers like Opera */
html, body {margin: 0; padding: 0; font-family: verdana, geneva, arial,
helvetica, sans-serif; margin-top: 0; margin-bottom: 0.5em;
background-color: #AE2623; color: #AE2623; text-align: center}
h1 {font-family: trebuchet ms, verdana, geneva, arial,
helvetica, sans-serif; font-size: 110%; color: #841518; font-weight: bold;
margin-bottom: .1em; }
p {font-family: trebuchet ms, verdana, geneva, arial,
helvetica, sans-serif; font-size: 85%; color: #000000; margin-top: 0;
margin-bottom: 0.5em }
..clear {clear: both;}
#wrapper1 {
position:relative;
text-align:left;
width:65%;
background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
}
#wrapper2 {
position:relative;
text-align:left;
width:100%;
}
#wrapper3 {
position:relative;
text-align:left;
width:100%;
background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
}
#wrapper4 {
position:relative;
text-align:left;
width:100%;
background:url("../images/leftcolor_bg.gif") repeat-y top left;
}
#header {
position: relative
background:#BB62AB;
padding:10px;
width: 100%
margin:0;
align: center
float:center;
color:#FFF;
}
#header h1 {
font-size:200%;
}
#header a:hover {
color:#7A2875;
}
#nav_bar {position: relative; margin: 0 auto; ;/* align for good browsers */
text-align: left; /* counter the body center */
; column-span: 3; font-family: verdana, geneva, arial, helvetica,
sans-serif; font-size: 75%; text-decoration: none; width: 100%; }
#nav_bar ul {list-style: none; margin-right: 1em; padding: 0.2em 0.6em 0.2em
0.6em; padding-top: 1em; white-space: nowrap;}
#nav_bar li {display: inline;}

#nav_bar li a:link, #nav_bar li a:visited {font-size 70%; display: inline;
padding: 0.4em 0.1em 0.4em 0.5em;
width:117px;white-space:normal;text-align:center;
border-left: 4px solid #efb22D; border right: 1px dash #efb22D;
background-color: #cc0000; color: #ffffff; text-decoration: none;
margin-right: .1em; width: 75px}

#maincol {
position:relative;
margin:0;
padding:10px;
}
#maincol2 {
position:relative;
margin:0;
padding:10px;
}
#leftcol {
position:relative;
top:10px;
left:-10px;
float:left;
width:150px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:130px; /* actual value */
margin:0 0 -10px 0;
padding-left:0px;
background:#FFFFFF;
z-index:100;
}
#leftcol2 {
position:relative;
top:10px;
left:-10px;
float:left;
width:150px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:130px; /* actual value */
margin:0 0 -10px 0;
padding:0px;
background:#FFFFFF;
z-index:100;
}
#rightcol {
position:relative;
top:-10px;
right:-10px;
float:right;
width:300px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:280px; /* actual value */
margin:0 0 -10px 0;
padding:0px;
background:#FFFFFF;
z-index:99;
}

#rightcol2 {
position:relative;
top:-10px;
right:-10px;
float:right;
width:300px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:280px; /* actual value */
margin:0 0 -10px 0;
padding:0px;
background:#FFFFFF;
z-index:99;
}
#centercol {
position:relative;
right:-10px;
float:left;
margin:0 0 -10px 0;
padding:10px;
background:#FFFFFF;
z-index:99;
}


#centercol p {
font-family: verdana, geneva, arial, helvetica, sans-serif; font-size:
120%; color: #CC0000; font-weight: bold; margin-bottom: 0; text-align: left;
padding-left: 200px;

}
#centercol2 {
position:relative;
right:-10px;
float:left;
margin:0 0 -10px 0;
padding:0px;
background:#FFFFFF;
z-index:99;
}
#centercol2 a {
color:#666;
}
#centercol2 a:hover {
border-bottom:1px solid;
color:#9343B9;
}
#footer {
position:relative;
top:1px;
background:#7A2875;
width:100%;
clear:both;
margin:0;
padding:1% 0;
text-align:center;
color:#CCC;
}


Any help would be greatly appreciated!
 
T

Trevor Lawrence

dee said:
I'm really not sure if anyone can help me - I know this is a FrontPage
newsgroup, not a CSS one! However, here goes:
Click to expand...

A quick reply to say
Yes, this is a good place to post.

I may be able to look at your problem a little later today (after I return
from shopping), At first glance, what you want seems quite feasible

In the meantime, someone else may reply
 
T

Trevor Lawrence

dee said:
I'm really not sure if anyone can help me - I know this is a FrontPage
newsgroup, not a CSS one! However, here goes:

I'm new to CSS and am struggling with my first design. I'm so tempted to
go
back to tables but am trying not to!

I have posted my HTML and CSS below. Very simply, I would like 3 columns
that should look like (in order from top of page):

A "banner image" that goes across the entire page - 100%.

A container that is 65% the width of the page, that houses:

-A header that is currently in three divs, but could be in one, if I could
figure out how.

-A horizontal ul navigation bar.

-Three columns, the middle being for the main content.

A footer that spans the main content (65%)

I have copied and pasted from here and there (very generously explained
and
offered), but am missing something.
Click to expand...

Well, I have had a little bit of a look, and it is confusing.

I see this structure

<div id="banner"> </div>
<div id="wrapper1">
<div id="wrapper2">
<div id="maincol">
<div id="leftcol"> </div>
<div id="rigthtcol"> </div>
<div id="centercol"> </div>
<div id="navbar"> </div>
<div id="maincol2">
<div id="leftcol2"> </div>
<div id="rightcol2"> </div>
<div id="cemtercol2"> </div>
</div>
</div>

The second last </div> closes "maincol2"
The last </div> closes "maincol"
"wrapper1" and "wrapper2" are not closed

Here http://trevorl.mvps.org/ratec/ is a site I constructed which has:
banner
left column (with navigation)
main column
footer

From your description, I think you would need
banner
header
navbar
leftcol centercol rightcol
footer
(all except banner only 65%)

I may have another try tomorrow to construct yours like this, but it is
nearly dinner time for me now.
 
D

dee

Hi Trevor,

Thanks so much for your replies. Yes, you are right in what I am trying to
achieve.

I see you're in Australia - quite the time difference!

I will look forward to your news and thank you again so much!
 
T

Trevor Lawrence

dee said:
Hi Trevor,

Thanks so much for your replies. Yes, you are right in what I am trying
to
achieve.

I see you're in Australia - quite the time difference!

I will look forward to your news and thank you again so much!
Click to expand...

Hi Dee,

Well, I have done the best that I can.

I have attempted to simplify the CSS as much as possible, but to keep the
particular colours, etc that you have chosen.

You will have to take care that the column widths in HTML match with those
in the CSS, i.e. leftcol 150px , centercol 350px , rightcol 275px. If the
column contents, especially images, are too wide,.they may overlap.

One thing I had trouble with is the footer. It is slightly smaller in width
than the <div>s above it and I can't figure out why

Other with more CSS experience than I may be able to offer (constructive)
criticism.

HTML Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Language" content="en-ca">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="djh_styles_sheet.css">
</head>

<body>
<div id="banner">
<img src="djh_banner.jpg" width="100%" height="100" alt="Welcome">
</div>

<div id="wrapper1"><!-- sets background to white-->

<div id="header">
<h1>Header Stuff in Here</h1>
</div>

<div id="nav_bar"><!-- begin nav_bar -->
<p>
<ul>
<li><a href=#"index.htm">Home &nbsp</a</li>
<li><a href="#about_us.htm">About Us &nbsp</a</li>
<li><a href="#services.htm">Services &nbsp</a</li>
<li><a href="#">Training &nbsp</a</li>
<li><a href="#contact_us.htm">Contact Us &nbsp</a</li>
<li><a href="#links.htm">Links &nbsp</a</li>
<li><a href="#">Library &nbsp</a</li>
<li><a href="#testimonials.htm">Testimonials &nbsp</a</li>
<li><a href="#find_us.htm">Find Us &nbsp</a</li>
<li><a href="#employment.htm">Employment &nbsp</a</li>
</ul>
</p>
</div><!-- end nav_bar -->

<div id="maincol"><!-- begin main content area -->
<div id="leftcol"><!-- begin leftcol -->
<p> <img src="djh_logo.jpg" width="150" height="100"></p>
<p> Left column stuff<br>
sfsdfsdfsdfskdfklsd jflsdlf sdklf jsdf</p>
</div><!-- end leftcol -->

<div id="centercol"><!-- begin centercol -->
<h1>
<p>centercol heading</p>
<p>Build Your People...</p>
<p>&nbsp&nbsp&nbsp&nbspBuild Your Business.</p>
</h1>
<p> Centercol stuff <br>
dsfldsklf jf sdklf jlf dlf jdfjl fldz wre rerwi</p>
</div><!-- end centercol -->

<div id="rightcol"><!-- begin rightcol -->
<p><img src="people.jpg" width="275" height="150"></p>
<p> Right column stuff<br> ksdlfslf jlskdf jklsdj fl dlsfj dsf
<br> ksdlfslf jlskdf jklsdj fl dlsfj dsf
<br> ksdlfslf jlskdf jklsdj fl dlsfj dsf
<br> ksdlfslf jlskdf jklsdj fl dlsfj dsf
<br> ksdlfslf jlskdf jklsdj fl dlsfj dsf</p>
</div><!-- end righttcol -->
</div><!-- end main content area -->

<div id="footer">
<p>Footer stuff here</p>
</div><!-- end footer -->

</div><!-- end wrapper1 -->
</body>
</html>

CSS (djh_styles_sheet.css)
body {
font-family: verdana, geneva, arial, helvetica, sans-serif;
background-color: #AE2623;
text-align: center;
padding: 0;
margin: 0;
}

h1 {
font-family: trebuchet ms, verdana, geneva, arial, helvetica, sans-serif;
font-size: 110%;
font-weight: bold;
color: #841518;
}

p {
font-family: trebuchet ms, verdana, geneva, arial, helvetica, sans-serif;
font-size: 85%;
color: #000;
border: 1px solid;
}

#wrapper1 {
position:relative;
background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
text-align:left;
width:65%;
}

#header {
position: relative;
background:#BB62AB;
width: 100%;
height: 100%;
text-align: center;
color:#FFF;
}
#header h1 {font-size:200%;}
#header a:hover {color:#7A2875;}

#nav_bar {
position: relative;
font-family: verdana, geneva, arial, helvetica, sans-serif;
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
font-size: 75%;
text-decoration: none;
width: 100%;
height: 100%;
}
#nav_bar li {display: inline;}
#nav_bar li a:link, a:visited {
font-size 70%;
width:120px;
text-align:center;
border-left: 4px solid #efb22D;
border right: 1px dash #efb22D;
background-color: #C00;
color: #FFF;
text-decoration: none;
}

#maincol {
position:relative;
padding:10px;
height:100%;
}

#leftcol {
position:relative;
width:150px;
top: 10px;
float:left;
voice-family: "\"}\"";
voice-family:inherit;
background:#FFF;
}

#centercol {
position:relative;
width:350px;
top: 10px;
margin-left:10px;
float:left;
background:#FFF;
}
#centercol p {
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 120%;
color: #C00;
font-weight: bold;
text-align: left;
}
#centercol a {color:#666;}
#centercol a:hover {
border-bottom:1px solid;
color:#9343B9;
}

#rightcol {
position:relative;
width:275px;
margin:0;
padding:0;
top:10px;
margin-left:10px;
float:left;
voice-family: "\"}\"";
voice-family:inherit;
background:#FFF;
}
#footer {
position:relative;
background-color:#FCF;
width:100%;
text-align:center;
color:#CCC;
}

What part of the world are you in?

If you are on US Eastern time, it is getting close to midnight there, so I
may not see a reply for a while.

Anyway good luck with it
 
T

Trevor Lawrence

Hi Dee,

Well, I have done the best that I can.

I have attempted to simplify the CSS as much as possible, but to keep the
particular colours, etc that you have chosen.

You will have to take care that the column widths in HTML match with those
in the CSS, i.e. leftcol 150px , centercol 350px , rightcol 275px. If the
column contents, especially images, are too wide,.they may overlap.

One thing I had trouble with is the footer. It is slightly smaller in
width than the <div>s above it and I can't figure out why

Other with more CSS experience than I may be able to offer (constructive)
criticism.
Click to expand...

A follow up

The width of the <div id ="maincol"> is set as 65%. But the <div>s contained
in it are in px.

This could be a problem with some resolutions. Both should be set in %, so
that they are compatible. I did have some trouble with doing this, so I
should try again. In the meantime, see how you go.
 
T

Trevor Lawrence

Trevor Lawrence said:
A follow up

The width of the <div id ="maincol"> is set as 65%. But the <div>s
contained in it are in px.

This could be a problem with some resolutions. Both should be set in %, so
that they are compatible. I did have some trouble with doing this, so I
should try again. In the meantime, see how you go.
Click to expand...

I have tried a few percentages and the CSS below seems to work down to
fairly small browser window sizes

#leftcol {
position:relative;
width: 15%; /* was 150px; */
top: 10px;
float:left;
voice-family: "\"}\"";
voice-family:inherit;
background:#FFF;
}

#centercol {
position:relative;
width: 45%; /* was 350px; */
top: 10px;
margin-left:10px;
float:left;
background:#FFF;
}

#rightcol {
position:relative;
width: 37%; /* was275px; */
margin:0;
padding:0;
top:10px;
margin-left:10px;
float:left;
voice-family: "\"}\"";
voice-family:inherit;
background:#FFF;
}

You might also want to remove the border from the p style (I added it for
testing.)
p {
font-family: trebuchet ms, verdana, geneva, arial, helvetica, sans-serif;
font-size: 85%;
color: #000;
/* border: 1px solid; */
}
 
D

dee

I have been struggling on this page and appreciate your help.

I've now pretty much got the page done, but am now having issues with cross
browsers. In Safari and others, it doesn't display properly.

The test site address is: http://www.djhsolutions.ca/test/index3.htm

Any advice would be appreciated.
 
T

Trevor Lawrence

dee said:
I have been struggling on this page and appreciate your help.

I've now pretty much got the page done, but am now having issues with
cross
browsers. In Safari and others, it doesn't display properly.

The test site address is: http://www.djhsolutions.ca/test/index3.htm

Any advice would be appreciated.
Click to expand...

I am sorry. I can't help with Safari or Firefox - I got a bit lazy when I
got a new PC and didn't install Firefox.

The dictum is "Construct with Firefox and test in IE."

What this means is that Firefox is close to the standards and IE is not. So
if it works in Firefox, it should work in other browsers, EXCEPT for IE,
where the code sometimes has to altered to suit its NON-standard behaviour.

I hope others will give you some advice. I really must get FIrefox so that I
can help others (and even use it myself)
 
S

Stefan B Rusynko

According to http://validator.w3.org/check?verbose=1&uri=http://www.djhsolutions.ca/test/index3.htm
Looks like you are missing a closing div tag for <div id=subcontainer2>

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


|I have been struggling on this page and appreciate your help.
|
| I've now pretty much got the page done, but am now having issues with cross
| browsers. In Safari and others, it doesn't display properly.
|
| The test site address is: http://www.djhsolutions.ca/test/index3.htm
|
| Any advice would be appreciated.
| --
| Thanks!
|
| Dee
|
|
| "Trevor Lawrence" wrote:
|
| >
| > | > > A follow up
| > >
| > > The width of the <div id ="maincol"> is set as 65%. But the <div>s
| > > contained in it are in px.
| > >
| > > This could be a problem with some resolutions. Both should be set in %, so
| > > that they are compatible. I did have some trouble with doing this, so I
| > > should try again. In the meantime, see how you go.
| >
| > I have tried a few percentages and the CSS below seems to work down to
| > fairly small browser window sizes
| >
| > #leftcol {
| > position:relative;
| > width: 15%; /* was 150px; */
| > top: 10px;
| > float:left;
| > voice-family: "\"}\"";
| > voice-family:inherit;
| > background:#FFF;
| > }
| >
| > #centercol {
| > position:relative;
| > width: 45%; /* was 350px; */
| > top: 10px;
| > margin-left:10px;
| > float:left;
| > background:#FFF;
| > }
| >
| > #rightcol {
| > position:relative;
| > width: 37%; /* was275px; */
| > margin:0;
| > padding:0;
| > top:10px;
| > margin-left:10px;
| > float:left;
| > voice-family: "\"}\"";
| > voice-family:inherit;
| > background:#FFF;
| > }
| >
| > You might also want to remove the border from the p style (I added it for
| > testing.)
| > p {
| > font-family: trebuchet ms, verdana, geneva, arial, helvetica, sans-serif;
| > font-size: 85%;
| > color: #000;
| > /* border: 1px solid; */
| > }
| >
| > --
| > Trevor Lawrence
| > Canberra
| > Web Site http://trevorl.mvps.org
| >
| >
| >
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Drop down Navigation menue 1
Heigth stretching problem. FF/IE 2
from tables to css - I need help 1
news letter 1
pages don't work in Firefox? 2
CSS question 0
CSS Trouble 2
How to position image displayed from a link? 1

Top