Forum Moderators: not2easy
Thanks for your help.
we would really need a bit more information than that (not a site link though!)
e.g. are the "side panels" inside the container or are you referring to the body background that is still showing outside the container.
if you can post what CSS/HTML you have for the bare bones outline (no content or links required) and add some colours to help describe what you'd like to achieve I'm sure someone would manage to offer some pointers.
Suzy
I have the page at 600 (so it's a bit narrow) in a "container" and it fits "inside" the screen, sort of floating in the middle of the page. There are no vertical lines signifying the borders and there is white space (even though the page is also white) out to the right and left of the page. So I'm talking about the background that is outside the container, I guess. :)
I'd like to have the vertical lines on the side of the page and use a different color (choose any color and I'll change it later) on the sides on the outside of the page. I see this often and my hope is this will make the page standout on the screen.
Here is the CSS...
body, table { margin:0px; padding:0px; background:#ffffff; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12pt;}
a { color:#0000aa; text-decoration:underline; }
a:hover { text-decoration:underline; }
h1 { font-family:Tahoma; font-size:14pt.; font-weight:bold; color:#000080;}
h2 { font-family:Tahoma; font-size:12pt.; font-weight:bold; }
#title { color:#ccf; font-weight:bold; font-family:serif; font-size:35px; padding:10px; }
#heading { background:#ffffff; padding:20px; height:180px; }
#mainText { padding:10px; padding-top:0px; vertical-align:top;}
#linkList { background:#f0ffff; padding:10px; }
#boxed { border:#555555 solid 1px; padding:10px; }
#column1 { vertical-align:top; }
#column2 { vertical-align:top; width:180px; border:#555 solid 1px; background:#f0ffff; /*previously #eeeeee */}
#privacy { font-size:10px; }
.highlight { background:#ffff00; }
.nounderline { text-decoration:none; }
.yellowBlock { background:#ffffcc; }
I'm not sure what to post of the HTML, but hopefully the CSS will give you what you need.
Also, is it a "no-no" to post the link (that could make it easier to see the HTML)?
Thanks again, I'm glad to be hear and appreciate any help one can offer.
Wrap everything in a div and give it border properties:
<div id="border">
rest of page here
</div>
then the css would look like this
#border {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
I made the change and I assumed the #000 could be replaced by the color I wanted to use for the borders, which in this case was #000080. Yet when I look at the page I see the vertical lines but the borders are still white. How do I make them the color I want?
I'd like to add a color to the side panels to make the page stand out more.
Try changing the background-color in your <body> tag to your chosen "side panel" color - and add a background-color:#fff; rule to the new #border div you created.
To get the exact look you are after, you may need to reference the "box model" that is behind the way browsers render html and css.
Here's an image from the W3C - the board that established the standards for html and css:
[w3.org...]
Thanks for your help.
So, try this. On a new line, immediately after the CSS rules that begin body, table paste in this:
body {background-color:#0000cc;}(or change #0cc to your favorite shade of blue)
Then change the rules for the #border id you created above -- to get rid of those single pixel borders that were not exactly what you had in mind, and to make the rest of the page have a white background.
#border {background-color:#ffffff;}
I'm not sure about the second part. I replaced (pasted the #border {background-color:#ffffff;}
line over the previous border code in the CSS. Was that where it was supposed go?
I didn't make any changes to the actual HTML page.
Anyway, now I no longer have any borders and all of the page is whilte. In fact, it looks just like it did before I started this thread. What have I done wrong?
What happens if you do this?
#border {background-color:#ffffff;margin:20px;}
Because you are talking about a centered page, I'm guessing there is a top level container (a table or a div most likely) that has width="100%" -- this page container is therefore filling the entire screen so none of the color background show through. From the CSS you pasted in above, I strongly assume it will be a table.
This should be the VERY FIRST <table> or <div> element in your code, not counting the border <div> you experimented with earlier. You can remove that div element (both the opening and closing tags) for now.
Once you locate this first table or div in your original mark-up, add a new attribute style="background-color:#009;" to the inside of the opening tag for that element, so that is looks something like:
<table width="100%" style="background-color:#000099;">
..or..
<div width="100%" style="background-color:#000099;">
...but there may also be other attributes in the tag as well. Just let them alone, making sure that a space separates each attribute from the next.
I don't know if this alone will be the complete fix. It might be, or it might turn more of your page blue than you want. If that happens, then we'll need to turn the rest of the background back to white. In that case we would want to find the very next <table> or <div> in the html, and give it a similar treatment but with a white background-color.
<table width="100%" style="background-color:#ffffff;">
..or..
<div width="100%" style="background-color:#ffffff;">
If your page stgructure is relatively basic, this should at least get you close to what you want -- let us know. If it isn't close, then your html layout is more complex (I am assuming something pretty simple) and we'll have to take it from there.
When I search for "table" I only find a closing tag at the bottom of the page. The first reference close to it at the top of the page is this...
<table cellspacing="0" cellpadding="0">
<tr>
<td id="column1">
<div id="mainText">
<font face="Arial, Helvetica">
So I haven't made any changes. BTW, would it be easier if I posted on sent you my URL so you could see the source code?
Thanks for your help and bearing with me. I know it's not easy but I do appreciate your help.
When I search for "table" I only find a closing tag at the bottom of the page. The first reference close to it at the top of the page is this...<table cellspacing="0" cellpadding="0">
Those two statements contradict each other, ealvin. Maybe use a computerize search in addition to looking visually.
Unless your html is pretty butchered, there IS an earlier opening table tag on the page to match each and every closing tag -- and you need to find the first such tag. Try this -- locate the opening tag for BODY and then read slowly and carefully forward from there. You should find the first opening table tag really quickly.
Or perhaps you can do a computerized search for <table (note, no closing bracket). However, given your earlier results with FrontPage search I would feel better at this point if you do a visual inspection.
<table cellspacing="0" cellpadding="0">
I'm pretty sure there is nothing before this. Sorry this is so difficult.
Sorry this is so difficult.
No worries - as you learn more you will find it easier and easier to describe things related to your html code. And truthfully, you can only get the best out of FrontPage if you also know a bit about html and css, so this is a good exercise.
Let's try this approach:
1. Find the opening <body> tag
2. Copy everything from that tag up to and including the <table cellspacing="0" cellpadding="0"> tag
3. Paste just that piece of your html into your next post - but change any domain name in there to "example.com"
