[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Use a style sheet to make background of page be gray while body is centered with a slim border around it.

Posted on 2005-04-07
15
Medium Priority
?
351 Views
Last Modified: 2010-04-25
An example of this would probably be Macromedias page (for what i want mine to look like).  Basically i would like mine laid out in tight looking rectangle in the center of the screen (light gray or white background for text area of page), with a small black border around it (anyway to have a drop shadowoff one side so it looks like its coming out of the page?). and then have the page background be a darker color.
0
Comment
Question by:TheRookie32
  • 7
  • 7
14 Comments
 
LVL 6

Author Comment

by:TheRookie32
ID: 13728937
PS I am using DW and FW both MX...
0
 
LVL 9

Accepted Solution

by:
stengelj earned 1400 total points
ID: 13730440
Does this work for you?

-------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
      body {
            background-color: #666666;
            height: 100%;
            padding: 0;
            margin: 0;
      }
      #OuterBox {
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            border-right-width: 5px;
            border-bottom-width: 5px;
            border-right-style: solid;
            border-bottom-style: solid;
            border-right-color: #333333;
            border-bottom-color: #333333;
      }
      #InnerBox {
            background-color: #CCCCCC;
            border: 1px solid #000000;
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
}
-->
</style>
</head>
      <body>
            <div id="OuterBox">
                  <div id="InnerBox">
                  </div>
            </div>
      </body>
</html>
0
 
LVL 6

Author Comment

by:TheRookie32
ID: 13765759
after some mods it does... but it doesnt really add the drop shadow look.  may need to slice an image of one and bring it into the outermost table...
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 6

Author Comment

by:TheRookie32
ID: 13774109
How can i get it to where there is the same amount of area at the bottom of the page as there is at the top.
0
 
LVL 9

Expert Comment

by:stengelj
ID: 13774236
The example I provided centers the box on the page in IE, FireFox, and Opera.  You must have changed somthing.

Would have been nice if you had given me the opportunity to earn and "A" grade.  Maybe if you post your code for me or a link to the page I can fix it and you'll reconsider your grade?
0
 
LVL 6

Author Comment

by:TheRookie32
ID: 13774449
ok.  Heres what i have in the CSS file:  

.OuterBox
{
      position: absolute;
      top: 25%;
      left: 25%;
      width: 50%;
      height: 50%;
      background-color:#FFFFFF;
      border-right-width: 5px;
      border-bottom-width: 5px;
      border-right-style: outset;
      border-bottom-style: outset;
      border-right-color: #999999;
      border-bottom-color: #999999;
      border-left-color:#000000;
      border-left-style:solid;
      border-left-width: 2px;
      border-top-width: 2px;
      border-top-style:solid;
      border-top-color:#000000;
      width: 800px;
     }
      
.MidBox{
              padding-bottom:10px;
              padding-left:10px;
              padding-right:10px;
              padding-top:10px;
              border-width:medium;
              border-color:#FFFFFF;
          height: 100%;
          width: 100%;
          margin: 0px;
          padding: 10px;
              font-family:Verdana, Arial, Helvetica, sans-serif;
}
      
.InnerBox
{
          background-color: #ededed;
              border-style:none;
          height: 50%;
          width: 100%;
          margin: 0px;
          padding: 50px;
              font-family:Verdana, Arial, Helvetica, sans-serif;
}

(This shoves it into the bottom, middle ish of the page.  Id like it to be centered horizontally.  with a bit of area at the top and bottom of the browser (even it if resizes and you have to scroll down)  Cheers!

PS How do i change the grade?
0
 
LVL 9

Expert Comment

by:stengelj
ID: 13775784
Ok,  I fixed a few problems...

On big problem is that you have conflicting width values for the OuterBox (% and Pixel).  Since you want the box centered and you want it to adjust to the screen size, you need to keep it a percentage.  To increase the height or width of the box, decrease the the top or left margin and double those percentage points to the height or width.

For example, if I want to make the box wider, I would decrease the left margin by 5% and ADD 10% to the width.  In my example below I made the box bigger.

Also, I reworkd some of you attributes and got rid of some that didn't do anything.  Please let me know if this helps...

Oh, to change points, post a request in Community Support.  Your not obligated, and only do it if I have really helped.

New example (tested in IE, FireFox, and Opera)...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
     body {
            background-color: #666666;
            height: 100%;
            padding: 0;
            margin: 0;
           }
     .OuterBox {
            position: absolute;
            top: 20%;
            left: 20%;
            height: 60%;
            border-right-width: 5px;
            border-bottom-width: 5px;
            border-right-style: outset;
            border-bottom-style: outset;
            border-right-color: #333333;
            border-bottom-color: #333333;
            background-color: #FFFFFF;
            border-left-color: #000000;
            border-left-style: solid;
            border-left-width: 2px;
            border-top-color: #000000;
            border-top-style: solid;
            border-top-width: 2px;
            width: 60%;
          }
      .MidBox{
            height: 100%;
            width: 100%;
            margin: 0px;
            }
      .InnerBox {
            background-color: #ededed;
            height: 50%;
            Margin: 10px;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            display: block;
}
-->
</style>
</head>
      <body>
            <div class="OuterBox">
                  <div class="MidBox">
                        <div class="InnerBox">
                              <p>This is a test. </p>
                        </div>
                  </div>
            </div>
      </body>
</html>
0
 
LVL 6

Author Comment

by:TheRookie32
ID: 13777398
Its better but it still "sits" on the bottom of the browser.  How can you get it to where it has a bit of area like at the top?  And is it possible so that it is centered in the browser as you resize it (until it gets smaller than 800 pixels as that is how large the page is).  Thanks again for all your help and i have no problem changing the grade when we get it perfect.  I appreciate your continued help and support!

ps this is going in a css file and not in an inline style sheet.  does that matter?
0
 
LVL 9

Expert Comment

by:stengelj
ID: 13777620
"still "sits" on the bottom of the browser"

I'm not sure what you mean.  If you copy/paste my code into a new html file, everything should center perfectly.  Is there any way you could post a link to the page so I can also check your HTML?  Or, can you send it to me at: stengelj<at>rowdydata<dot>com?
0
 
LVL 6

Author Comment

by:TheRookie32
ID: 13786770
I mean that there is no space in the browser window at the bottom of the page.  Is the reason it isnt working because the style sheet you are proposing is inline vs referenced?

cheers!
0
 
LVL 9

Expert Comment

by:stengelj
ID: 13787059
"inline vs. referenced" - shouldn't matter.

I think you have something funky happening in your HTML--that's why I want to look at it!

As for the fixed pixel width that you want to do...you can do it if you put it in a table but FireFox and Opera won't center it vertically, only horizontally.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
     body {
          background-color: #666666;
          height: 100%;
          padding: 0;
          margin: 0;
          }
     .OuterBox {
          top: 20%;
          height: 400px;
          border-right-width: 5px;
          border-bottom-width: 5px;
          border-right-style: outset;
          border-bottom-style: outset;
          border-right-color: #333333;
          border-bottom-color: #333333;
          background-color: #FFFFFF;
          border-left-color: #000000;
          border-left-style: solid;
          border-left-width: 2px;
          border-top-color: #000000;
          border-top-style: solid;
          border-top-width: 2px;
          width: 800px;
         }
     .MidBox{
          height: 100%;
          width: 100%;
          margin: 0px;
          }
     .InnerBox {
      background-color: #ededed;
      height: 50%;
      Margin: 10px;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      display: block;
      text-align: left;
}
-->
</style>
</head>
<body>
<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
      <tr>
            <td align="center" valign="middle">
            <div class="OuterBox">
                  <div class="MidBox">
                        <div class="InnerBox">
                              <p>This is a test. </p>
                        </div>
                  </div>
            </div>      
            </td>
      </tr>
</table>
</body>
</html>
</html>
0
 
LVL 9

Expert Comment

by:stengelj
ID: 13787285
Ah, just had a thought...somtimes it's the simple things that get ya.

I'll bet that the amount of content that you are putting in the InnerBox makes the box exceed the 60% height setting.  This would cause the box to grow downward.  My guess is that you still have an equal amount of space above and below the box but you have to scroll down to see it.  Either you're going to have to accept that, make the box height bigger/top margin smaller, or cut down on the amount of stuff you are putting into the box.

You can test this by removing some stuff from the box and see if it shrinks up to the right size.

Let me know.
0
 
LVL 6

Author Comment

by:TheRookie32
ID: 13793482
Yup that did it.  Thanks for your continued help.  Ill post the grade change request right now!
0
 
LVL 9

Expert Comment

by:stengelj
ID: 13793654
Thank you. Glad we finally got it going.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Please read the paragraph below before following the instructions in the video — there are important caveats in the paragraph that I did not mention in the video. If your PaperPort 12 or PaperPort 14 is failing to start, or crashing, or hanging, …
As many of you are aware about Scanpst.exe utility which is owned by Microsoft itself to repair inaccessible or damaged PST files, but the question is do you really think Scanpst.exe is capable to repair all sorts of PST related corruption issues?
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question