5 replies [Last post]
Dwight..H
Offline
newbie
Last seen: 14 years 6 days ago
Joined: 2008-01-10
Posts: 3
Points: 0

I'm sorry about the mess up on the tags. I hope this is better, Thanks

I've tried adding some CSS features to a website I created for a group I am associated with. I originally used frames because I saw another site I liked that impressed me. I have 30 years experience with IBM RPG, and am learing web stuff, so please bear with me.

I came across several articles on the web talking about the problems you have when using frames, and have decided to rewrite my site. I need some advice along the way and this forum appears to be the place to ask.

At the top of my page, I had a header with tables and 3 images.




 

I would like to define a box from the top left of the page to the top right
that goes behind the images.

so far I hae this, and am trying to figure out how to work the box.
I have a Master.css where I have:

.Master { font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal;

a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
.SmallerLinks {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
.MainText {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
color: 3366ff;

}
P.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; COLOR: #003366; FONT-FAMILY: "Century Gothic"; mso-style-parent: ""; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"
}
LI.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; COLOR: #003366; FONT-FAMILY: "Century Gothic"; mso-style-parent: ""; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"
}
DIV.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; COLOR: #003366; FONT-FAMILY: "Century Gothic"; mso-style-parent: ""; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"
}
H1 {
FONT-WEIGHT: normal; FONT-SIZE: 24pt; MARGIN: 12pt 0in 3pt; COLOR: #330099; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-bidi-font-family: Arial; mso-style-next: Normal; mso-outline-level: 1; mso-font-kerning: 16.0pt; mso-bidi-font-weight: bold
}
H2 {
FONT-WEIGHT: normal; FONT-SIZE: 18pt; MARGIN: 12pt 0in 3pt; COLOR: #3366ff; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-bidi-font-family: Arial; mso-style-next: Normal; mso-outline-level: 2; mso-bidi-font-weight: bold; mso-bidi-font-style: italic
}
H3 {
FONT-WEIGHT: normal; FONT-SIZE: 14pt; MARGIN: 0in 0in 0pt; COLOR: #9900ff; TEXT-INDENT: 0.25in; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-hyphenate: none; mso-bidi-font-family: Arial; mso-style-next: Normal; mso-outline-level: 3; mso-bidi-font-weight: bold
}
H4 {
FONT-WEIGHT: normal; FONT-SIZE: 12pt; MARGIN: 12pt 0in 3pt; COLOR: #330099; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-hyphenate: none; mso-style-next: Normal; mso-outline-level: 4; mso-bidi-font-weight: bold
}
H5 {
FONT-WEIGHT: normal; FONT-SIZE: 10pt; MARGIN: 12pt 0in 3pt; COLOR: #3366ff; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-hyphenate: none; mso-style-next: Normal; mso-outline-level: 5; mso-bidi-font-weight: bold; mso-bidi-font-style: italic
}
H6 {
FONT-WEIGHT: normal; FONT-SIZE: 8pt; MARGIN: 12pt 0in 3pt; COLOR: #9900ff; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-hyphenate: none; mso-style-next: Normal; mso-outline-level: 6; mso-bidi-font-weight: bold
}
P.MsoHeading7 {
FONT-WEIGHT: bold; FONT-SIZE: 14pt; MARGIN: 0in 0in 0pt; COLOR: #cc0033; FONT-FAMILY: Arial; mso-bidi-font-size: 48.0pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-style-next: Normal; mso-outline-level: 7
}
LI.MsoHeading7 {
FONT-WEIGHT: bold; FONT-SIZE: 14pt; MARGIN: 0in 0in 0pt; COLOR: #cc0033; FONT-FAMILY: Arial; mso-bidi-font-size: 48.0pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-style-next: Normal; mso-outline-level: 7
}
DIV.MsoHeading7 {
FONT-WEIGHT: bold; FONT-SIZE: 14pt; MARGIN: 0in 0in 0pt; COLOR: #cc0033; FONT-FAMILY: Arial; mso-bidi-font-size: 48.0pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-style-next: Normal; mso-outline-level: 7
}
P.MsoBodyText {
FONT-SIZE: 10pt; MARGIN-LEFT: 0in; COLOR: #003366; MARGIN-RIGHT: 0in; FONT-FAMILY: Arial; mso-bidi-font-size: 13.5pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto
}
LI.MsoBodyText {
FONT-SIZE: 10pt; MARGIN-LEFT: 0in; COLOR: #003366; MARGIN-RIGHT: 0in; FONT-FAMILY: Arial; mso-bidi-font-size: 13.5pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto
}
DIV.MsoBodyText {
FONT-SIZE: 10pt; MARGIN-LEFT: 0in; COLOR: #003366; MARGIN-RIGHT: 0in; FONT-FAMILY: Arial; mso-bidi-font-size: 13.5pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto
}
A:link {
COLOR: #9900ff; TEXT-DECORATION: underline; text-underline: single
}
SPAN.MsoHyperlink {
COLOR: #9900ff; TEXT-DECORATION: underline; text-underline: single
}
A:visited {
COLOR: #3366ff; TEXT-DECORATION: underline; text-underline: single
}
SPAN.MsoHyperlinkFollowed {
COLOR: #3366ff; TEXT-DECORATION: underline; text-underline: single
}
.MainBlueBold {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
color: #0000FF;

}
.MainBlue {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #0000FF;

}
.CHIPRed {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #CC0033;
}
.MainBlueLight {
font-family: Verdana;
font-size: 14pt;
color: #0000FF;

}
.MainBlueBoldHdr {
font-family: Arial, Helvetica, sans-serif;
font-size: 18pt;
font-weight: bold;
color: #0000FF;
}
.ChipRedHdr {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #CC0033;
font-weight: bold;

}
.MainDarkBlue {
font-family: Verdana;
font-size: 14pt;
color: #000099;
font-weight: normal;

}
.MainDarkBlueHdr {
font-family: Verdana;
font-size: 18px;
font-weight: bolder;
color: #000099;

}
.MainBkg {
background-color: e7e7e7;
background-image: url(Home_files/main_files/bkgd.jpg);

}
.DirectorsNames {
font-family: Verdana;
font-size: 10pt;
font-weight: bold;

}
.SideBackground {
background-color: #FFFF66;
}
.PhoneNumbers {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
.eMailLink {
font-family: Verdana;
font-size: 9pt;
font-weight: bold;
}
.FinePrint {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
}
.bodySide {
background-color: ffffcc;
}
.BlueBackground {
background-color: 0033cc;
}

My HTML for my new headerlooks like this


body {
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set */
}

       

What do I need to add to get it to put a box across the top ?

Thank you again for suggestions and help.

Dwight

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Code?

Verschwindende wrote:
  • CSS doesn't make pies

Dwight..H
Offline
newbie
Last seen: 14 years 6 days ago
Joined: 2008-01-10
Posts: 3
Points: 0

My frame program I am rewritting

Smile Smile I have a frame working around the header portion of my program.

I've tried changing the border color and the background color to be blue, but it is ignoring them. Can anyone pooint me in the direction to fix them?

Home page


           

Thank you in advance for any suggestions.

Dwight

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

background-color:

background-color: #0033cc;

Lose whatever code generator you're using. It's turning out crap for code. It's always a good plan to run your markup through the W3 validator.

Open a plain text editor and start typing.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Dwight..H
Offline
newbie
Last seen: 14 years 6 days ago
Joined: 2008-01-10
Posts: 3
Points: 0

A beginner trying to convert frame based site to css

I guess I was finding css code in html styles used for examples on my last post. I agree it was pretty bad. I found the Layout Generator on your tools menu and used it.

I created a shell of what I am looking for... sorta.

I got colors OK for my test and it helped my heading. When I call up my new
program I get spaces between the heading and my columns on the screen?

Am I missing something with the padding or margins that causes the space?

Here is my current iteration. I learned a lot from the example from the
tool but have more to go and want to thank you for it.

Here is my current itteration of my css

html, body{ margin:0; padding:0; } #pagewidth{ max-width:1100px;

min-width:1100px;
}

#header{
position:relative;
height:120px;
background-color:#0033cc;
width:100%;
}

#leftcol{
width:20%;
float:left;
position:relative;
background-color:#ffffcc;
left: 0px;
top: 120px;

}

#twocols{
width:80%;
float:right;
position:relative;
}

#rightcol{
width:167;
float:right;
position:relative;
background-color:#ffffcc;
Right: absolute;
top: 120px;

}

#maincol{
background-color: #e7e7e7;
float: left;
display:inline;
position: relative;
width:67%;
left: 168px;
top: 120px;

}


/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */


/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}

/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}

/* CSS Tabs */
#navlist {
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin-left: 0;
width: 12em;
font: normal 10px Verdana, sans-serif;
}

#navlist li {
list-style: none;
margin: 0;
font-size: 1em;
}

#navlist a {
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}

#navlist a#current { border-color: #5bd #035 #068 #f30; }

#navlist a {
width: 99%;
/* only necessary for Internet Explorer */
}

#navlist a {
voice-family: "\"}\"";
voice-family: inherit;
width: 9.6em;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}

#navcontainer>#navlist a {
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}

#navlist a:hover, #navlist a#current:hover {
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
}

#navlist a:active, #navlist a#current:active {
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em;
}

.Master {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: normal;

a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
.SmallerLinks {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
.MainText {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
color: 3366ff;

}
P.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; COLOR: #003366; FONT-FAMILY: "Century Gothic"; mso-style-parent: ""; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"
}
LI.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; COLOR: #003366; FONT-FAMILY: "Century Gothic"; mso-style-parent: ""; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"
}
DIV.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; COLOR: #003366; FONT-FAMILY: "Century Gothic"; mso-style-parent: ""; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"
}
H1 {
FONT-WEIGHT: normal; FONT-SIZE: 24pt; MARGIN: 12pt 0in 3pt; COLOR: #330099; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-bidi-font-family: Arial; mso-style-next: Normal; mso-outline-level: 1; mso-font-kerning: 16.0pt; mso-bidi-font-weight: bold
}
H2 {
FONT-WEIGHT: normal; FONT-SIZE: 18pt; MARGIN: 12pt 0in 3pt; COLOR: #3366ff; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-bidi-font-family: Arial; mso-style-next: Normal; mso-outline-level: 2; mso-bidi-font-weight: bold; mso-bidi-font-style: italic
}
H3 {
FONT-WEIGHT: normal; FONT-SIZE: 14pt; MARGIN: 0in 0in 0pt; COLOR: #9900ff; TEXT-INDENT: 0.25in; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-hyphenate: none; mso-bidi-font-family: Arial; mso-style-next: Normal; mso-outline-level: 3; mso-bidi-font-weight: bold
}
H4 {
FONT-WEIGHT: normal; FONT-SIZE: 12pt; MARGIN: 12pt 0in 3pt; COLOR: #330099; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-hyphenate: none; mso-style-next: Normal; mso-outline-level: 4; mso-bidi-font-weight: bold
}
H5 {
FONT-WEIGHT: normal; FONT-SIZE: 10pt; MARGIN: 12pt 0in 3pt; COLOR: #3366ff; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-hyphenate: none; mso-style-next: Normal; mso-outline-level: 5; mso-bidi-font-weight: bold; mso-bidi-font-style: italic
}
H6 {
FONT-WEIGHT: normal; FONT-SIZE: 8pt; MARGIN: 12pt 0in 3pt; COLOR: #9900ff; FONT-FAMILY: "Century Gothic"; mso-pagination: widow-orphan; mso-hyphenate: none; mso-style-next: Normal; mso-outline-level: 6; mso-bidi-font-weight: bold
}
P.MsoHeading7 {
FONT-WEIGHT: bold; FONT-SIZE: 14pt; MARGIN: 0in 0in 0pt; COLOR: #cc0033; FONT-FAMILY: Arial; mso-bidi-font-size: 48.0pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-style-next: Normal; mso-outline-level: 7
}
LI.MsoHeading7 {
FONT-WEIGHT: bold; FONT-SIZE: 14pt; MARGIN: 0in 0in 0pt; COLOR: #cc0033; FONT-FAMILY: Arial; mso-bidi-font-size: 48.0pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-style-next: Normal; mso-outline-level: 7
}
DIV.MsoHeading7 {
FONT-WEIGHT: bold; FONT-SIZE: 14pt; MARGIN: 0in 0in 0pt; COLOR: #cc0033; FONT-FAMILY: Arial; mso-bidi-font-size: 48.0pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-style-next: Normal; mso-outline-level: 7
}
P.MsoBodyText {
FONT-SIZE: 10pt; MARGIN-LEFT: 0in; COLOR: #003366; MARGIN-RIGHT: 0in; FONT-FAMILY: Arial; mso-bidi-font-size: 13.5pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto
}
LI.MsoBodyText {
FONT-SIZE: 10pt; MARGIN-LEFT: 0in; COLOR: #003366; MARGIN-RIGHT: 0in; FONT-FAMILY: Arial; mso-bidi-font-size: 13.5pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto
}
DIV.MsoBodyText {
FONT-SIZE: 10pt; MARGIN-LEFT: 0in; COLOR: #003366; MARGIN-RIGHT: 0in; FONT-FAMILY: Arial; mso-bidi-font-size: 13.5pt; mso-pagination: widow-orphan; mso-hyphenate: none; mso-fareast-font-family: "Times New Roman"; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto
}
A:link {
COLOR: #9900ff; TEXT-DECORATION: underline; text-underline: single
}
SPAN.MsoHyperlink {
COLOR: #9900ff; TEXT-DECORATION: underline; text-underline: single
}
A:visited {
COLOR: #3366ff; TEXT-DECORATION: underline; text-underline: single
}
SPAN.MsoHyperlinkFollowed {
COLOR: #3366ff; TEXT-DECORATION: underline; text-underline: single
}
.MainBlueBold {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
color: #0000FF;

}
.MainBlue {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #0000FF;

}
.CHIPRed {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #CC0033;
}
.MainBlueLight {
font-family: Verdana;
font-size: 14pt;
color: #0000FF;

}
.MainBlueBoldHdr {
font-family: Arial, Helvetica, sans-serif;
font-size: 18pt;
font-weight: bold;
color: #0000FF;
}
.ChipRedHdr {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #CC0033;
font-weight: bold;

}
.MainDarkBlue {
font-family: Verdana;
font-size: 14pt;
color: #000099;
font-weight: normal;

}
.MainDarkBlueHdr {
font-family: Verdana;
font-size: 18px;
font-weight: bolder;
color: #000099;

}
.MainBkg {
background-color: e7e7e7;
background-image: url(Home_files/main_files/bkgd.jpg);

}
.DirectorsNames {
font-family: Verdana;
font-size: 10pt;
font-weight: bold;

}
.SideBackground {
background-color: #FFFF66;
}
.PhoneNumbers {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
.eMailLink {
font-family: Verdana;
font-size: 9pt;
font-weight: bold;
}
.FinePrint {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
}
.bodySide {
background-color: ffffcc;
}
.BlueBackground {
background-color: 0033cc;
}

My html now looks like this:

Home page

Thnak you in advance for any suggestions

Dwight

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

<!DOCTYPE html PUBLIC

<head>

er that doesn't look right. Did you run the code through the validator?

Verschwindende wrote:
  • CSS doesn't make pies