With my wanting to open up the space between my page title and the navigation bar, I was running into problems...Then along came Dantcer with a similar situation (
"Nav Bar Issue with IE"). Tho her resolve was different than my objective, the process she ended up using satisfied me, giving me the illusion I wanted. Hadn't really thought about it much except that many questions regarding "How to make a banner?" have been asked recently...soooo, here goes.
Please take into consideration that this theme is Skyline, and it is the only theme I've worked with. I can only give you legitimate findings in this realm, but it may give you an idea of what you may be able to do with other themes. This all came about as the result of many "trials & errors"...I shouldn't be the only one...lol
This is the base CSS pertaining to the positioning of the "owner navigation bar" of the Skyline theme:
div.owner_nav {
border: none;
margin: 0;
height: 163px;
}
div#subnavc {
width: auto;
}
div#subnav {
padding: 1px;
padding-left: 5px;
background: none;
background-color: #000;
border: none;
border-top: 1px solid #99f;
border-bottom: 1px solid #99f;
height: auto;
} To give you an idea of the dimensional difference, this is the top portion of the Skyline theme with that CSS...
Working with the height and padding of the div.owner_nav portion, and adjusting the padding-top of div#subnav to coordinate those efforts...
/*Navigation bar*/
div.owner_nav {
border: none;
margin: auto;
height: 260px;
width: auto;
padding: 25px 0px 285px 0px;
background: none;
}
/*owner nav bar - BG & border*/
div#subnav {
padding: 1px;
padding-left: 30px;
padding-top: 310px;
background: none;
border: none;
height: auto;
width: auto;
}
"Pushing" the page title a little, if you want it aligned to the left as I do...aligning it with the "Home" tab, placing it more within the body of your page as you scroll down, is accomplished here:
h1#page_owner_title {
padding-left: 25px;
}
This is what I came up with...
JFYI: The image I am using is 750x562px...
body {
background-color: #000000;
/* GTO - image from http://www.gtoforum.com/photopost/showphoto.php/photo/454/limit/views */
background-image:url(IMAGE URL);
background-attachment: scroll;
background-position: top center;
background-repeat: no-repeat;
width: auto;
} You also realize that you have options at this point...ie:
background-attachment: fixed;
background-position: center;
Another feature that can be used with this rendition is the vertical navigation bar...Thanks go to Denim, my friend, who passed this concept on to me...and which I modified to fit the illusion I wanted:
/*Navigation bar*/
div.owner_nav {
border: none;
margin: auto;
height: 260px;
width: auto;
padding: 25px 0px 285px 0px;
background: none;
}
/*Vertical Nav bar CSS from Denim - modified*/
div#subnavc {
background: none;
width: 110px;
border: none;
/*moved bar down fr title - and to rt*/
padding-top: 60px;
padding-left: 35px;
margin: 0px;
position: absolute;
}
div#subnav {
padding: 0px;
padding-left: 8px;
margin: 0px;
background: none;
border: none;
height: 25px;
}
/*nav buttons - not "In Use" or hover*/
a.topt, a:visited.topt {
line-height: 2.4em;
display: block;
float: left;
width: 110px;
/*spacing between tabs*/
height: 40px;
text-align: left;
font-family: comic sans-serif;
font-weight: bold;
font-size: 18px;
font-style: oblique;
color: #ECE5B6;
padding: 0px;
margin: 0px;
background: none;
/*background: url(URL) no-repeat center;*/
border: none;
}
/*hover on all - not "In Use"*/
a.topt:hover, a:visited.topt:hover {
line-height: 2.4em;
display: block;
float: left;
text-align: left;
font-family: Arial;
font-weight: bold;
font-size: 18px;
color: #fff;
padding: 0px;
margin: 0px;
background: none;
/*background: url(URL) no-repeat center;*/
border: none;
}
/*"In Use" tab - not hover*/
a.toptsel, a:visited.toptsel {
line-height: 2.4em;
display: block;
float: left;
width: 110px;
/*space below "In Use" tab*/
height: 40px;
text-align: left;
font-family: comic sans-serif;
font-style: oblique;
font-weight: bold;
font-size: 18px;
color: #ECE5B6;
padding: 0px;
margin: 0px;
background: none;
/*background: url(URL); no-repeat center;*/
border: none;
/*to add blinking (FF) "In Use" tab on nav bar*/
text-decoration: blink;
}
/*"In Use" tab - hover*/
a.toptsel:hover, a:visited.toptsel:hover {
line-height: 2.4em;
display: block;
float: left;
text-align: left;
font-family: Arial;
font-weight: bold;
font-size: 20px;
color: #fff;
padding: 0px;
margin: 0px;
background: none;
/*background: url(URL) no-repeat center;*/
border: none;
}
/*end of modified vertical CSS*/
This is what I came up with...
UPDATE: As of the "upgrade", mid June 2008, you MUST remove all /* notes */ within the brackets, ie { } , so the height and width don't get "stripped" from the Custom CSS!
