On Saturday, December 5, 2009 6:43:10 pm Brian M. Curran wrote:
> >> Brian M. Curran wrote:
> >> Hello,
> >> Can someone tell me the technique this site used to get the black of the
> >> header to span perfectly across my entire screen, without any
> >> left-to-right scroll bar?
> >>
> >> http://www.designhammer.com/services/web-design.php
> >>
> >> I looked at the CSS, but I'm not fully understanding it.
> >>
> >> Sincerely,
> >> Brian
> >
> > The simplified structure is two wrappers each of width 100%.
> > The top wrapper is the header.
> > The bottom wrapper encloses two-adjacent fixed width columns.
> >
> > Best,
> > ~d
>
> Thanks David.
>
> My friend just showed me how to do more things with firebug than I knew
> about, so now I have a few more questions to you all.
>
> 1.
> #dh-header-wrapper {
> -moz-background-clip:border;
> -moz-background-inline-policy:continuous;
> -moz-background-origin:padding;
> background:#1E1E1E url(../images/common/header-wrap-bkgd.png) repeat-x
> scroll center top;
> height:153px;
> width:100%;
> }
>
> This is the repeating image that fills the whole browser width? How come it
> isn't 1px wide, as 1px seems that it would be a better width to repeat? (It
> seems to be 153px wide.)
It's not 1px wide, because it's not a solid color. It's speckled. and the
speckle pattern apparently is 96px wide. (It's not 153px wide, it's a 153px
tall, because that's the height of the header. It's 96px wide.)
>
> 2.
> #dh-header {
> -moz-background-clip:border;
> -moz-background-inline-policy:continuous;
> -moz-background-origin:padding;
> background:transparent url(../images/common/header-bkgd.png) no-repeat
> scroll center top;
> height:153px;
> margin:0 auto;
> position:relative;
> width:830px;
> }
>
> So this is an image that is behind everything? And why is it transparent?
That's the image that's in the header, but the width of the content (830px)
The slightly whiter part behind the logo. It's not transparent. look up the
syntax for the background shorthand property. The background-color is
transparent. It could really be anything since it's covered by the
background-image. It's probably not actually specified in the CSS.
transparent is the Firebug default.
>
> 3.
> Lastly, you can get a list and images to hover over another image (the
> #dh-header-wrapper in this example) by using absolute positioning? It seems
> the images need a z index, but the list doesn't?
>
> Sincerely,
> Brian
>
> ______________________________________________________________________
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
