Jump to content


Photo

white border inside border


  • Please log in to reply
5 replies to this topic

#1 aebstract

aebstract
  • Members
  • PipPipPip
  • Advanced Member
  • 1,105 posts

Posted 14 June 2006 - 07:57 PM

I want a single div to be able to have a 1px border and a 2-3px border on the inside of the 1px. then have a bg color and padding of about 5px. A great example of what I want can be found at: www.gmail.com the login box how it has a thin border, then white then the bg color. I got all of it on my site except for the white part. Thanks in advance.

There is an area of the mind that could be called unsane, beyond sanity, and yet
not insane. Think of a circle with a fine split in it. At one end there's
insanity. You go around the circle to sanity, and on the other end of the
circle, close to insanity, but not insanity, is unsanity.


#2 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 14 June 2006 - 08:03 PM

View source.

The great example you cite was done with tables.

If it's all on your site, show us the CSS you have so far.
Legend has it that reading the manual never killed anyone.
My site

#3 aebstract

aebstract
  • Members
  • PipPipPip
  • Advanced Member
  • 1,105 posts

Posted 14 June 2006 - 08:54 PM

[a href=\"http://www.carbenco.com/beta/\" target=\"_blank\"]http://www.carbenco.com/beta/[/a]
I don't want to use tables, and here is the css for what you see:
#logintemp1 {
        position: absolute; top: 80px; right:7px;
        background-color: #CCCCCC;
        width: 195px;
                        border-width: 1px;
                        border-color: #666666;
                        border-style:solid;
            padding: 5px;
}

There is an area of the mind that could be called unsane, beyond sanity, and yet
not insane. Think of a circle with a fine split in it. At one end there's
insanity. You go around the circle to sanity, and on the other end of the
circle, close to insanity, but not insanity, is unsanity.


#4 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 14 June 2006 - 11:58 PM

You can't have two borders in one div, you gotta have 2 divs for 2 borders

NoGray.com


#5 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 15 June 2006 - 01:46 AM

I'm looking at your example, and it just doesn't work for me, so I'll have to agree with nogray and say that it doesn't work.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#6 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 15 June 2006 - 09:21 AM

The way google has done it is by having a td cell with a 1px border with 5 pix padding then in side that cell is a table whcih has the ligh blue background. So here is how they have done it:
<style type="text/css">
#outer {
  border: 1px solid #E8EEFA;
  padding: 5px;
  width: 225px;
}
#inner {
  padding: 10px;
  background-color: #E8EEFA;
}
#inner h1 {
  margin: 0px;
  padding: 0px;
  padding-bottom: 10px;
  font-size: 24p;
}
</style>

<div id="outer">
  <div id="inner">
    <h1>Header</h1>
    through a top-down, proactive approach we can remain customer focused and goal-directed,
    innovate and be an inside-out organization which facilitates sticky web-readiness
    transforming turnkey eyeballs
  </div>
</div>





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users