BKGPhoto
Aug-12-2009, 04:59 PM
First off let me thank everyone that has helped me build my site. You guys and gals have been awsome. I finally addded a blog and amazingly enough I was able to get it to match my smugmug site. I do however have a couple of questions. Is their a way to make the pages fully visible without having to scroll down? I would especially like my homepage slideshow to be fully visible without scrolling. Next question is would somebody be willing to review my code to make sure I do not have any critical errors. This is the first site I have built and I am a big time amateur. Also any feedback about layout and design would be greatly appreciated. (site is kinda bare bones now still working on adding content.
/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */
/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 1px 0px 35px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 800px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}
.menu ul {
padding: 5px 0px 5px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}
.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}
.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: black ; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 75px; /* main box width */
height: 20px; /* main box height */
border: 1px solid red; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: #FF0000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}
* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}
.menu ul li ul {
display: none;}
/* */
/* Specific to Non-IE browsers */
/* */
.menu ul li:hover a {
color: red; /* main when hover DD */
background: white; /* main when hover DD */
}
.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -4px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display: block;
background: red; /* DD FO non-hover */
color: white; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px; /* DD FO box width */
}
.menu ul li:hover ul li a:hover {
background: red; /* DD FO hover */
color: white; /* DD FO hover */
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 102px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 146px; /* FF FO box width */
}
/* */
/* Specific to IE browsers */
/* */
.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: white; /* main hover */
background:red; /* main hover */
}
.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}
.menu ul li a:hover ul li a {
display: block;
background: white; /* IE DD color non-hover */
color: red; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 146px; /* IE DD FO box */
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}
.menu ul li a:hover ul li a:hover {
background: blue; /* DD FO hover includes menu 6 */
color: gold; /* DD FO hover includes menu 6 */
}
.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 147px; /* FO right left */
}
/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width: 125px;
w\idth: 139px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}
/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a {
width: 125px; /* unknown */
w\idth: 104px; /* DD FF width */
}
/*END EXTRA ADDS FOR IE*/
/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}
/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}
/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}
/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}
/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}
/* ==== END NAVBAR CODE ==== */
.nophotos h3 {display: none;}#photoKeywords { display: none; }#bioBox .boxBottom {background: none !important; border: none !important;}#bioText {display: none;}
.galleryPage #imageInfo {display:none}#bioBox .photo {
display: none;}
/*====About-Page====*/
.gallery_8767392 #breadCrumbTrail,
.gallery_8767392 .play_slideshow,
.gallery_8767392 #albumNav_top,
.gallery_8767392 #albumNav_bottom,
.gallery_8767392 .nophotos h3,
.gallery_8767392 .pageNav
{display:none;}
.gallery_8767392 .journal_entry
{border:none;}
/*====Contact-Page====*/
.gallery_8745645 #breadCrumbTrail,
.gallery_8745645 .play_slideshow,
.gallery_8745645 #albumNav_top,
.gallery_8745645 #albumNav_bottom,
.gallery_8745645 .nophotos h3,
.gallery_8745645 .pageNav,
.gallery_8745645 #stylebar
{display:none;}
.gallery_8745645 .journal_entry
{border:none;}
/*====Guestbook-Page====*/
.gallery_8745018 #breadCrumbTrail,
.gallery_8745018 .play_slideshow,
.gallery_8745018 #albumNav_top,
.gallery_8745018 #albumNav_bottom,
.gallery_8745018 .nophotos h3,
.gallery_8745018 .pageNav,
.gallery_8745018 #sizePicker
{display:none;}
.gallery_8745018 #myText {
margin: 0 auto;
width: 600px;
background: #eee;
color: #444;
padding: 0 20px 5px 20px;
}
/*====No More Border====*/
.galleryPage,
.boxBottom,
.boxTop,
.box
{border:none !important;}
/*====No More Background====*/
.boxBottom,
.boxTop,
.box
{background:none !important;}
.gallery_8745018 #myText {
margin: 0 auto;
width: 600px;
background: #eee;
color: #444;
padding: 0 20px 5px 20px;
/*====No More Border====*/
.galleryPage,
.boxBottom,
.boxTop,
.box
{border:none !important;}
/* hide things not needed on page */
.gallery_8859110 .nophotos h3,
.notLoggedIn .gallery_8859110 #breadcrumb,
.notLoggedIn .gallery_8859110 .journal_entry,
.gallery_8859110 #albumNav_top,
.gallery_8859110 #albumNav_bottom {display: none;}
www.bkgphoto.com (http://www.bkgphoto.com)
/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */
/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 1px 0px 35px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 800px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}
.menu ul {
padding: 5px 0px 5px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}
.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}
.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: black ; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 75px; /* main box width */
height: 20px; /* main box height */
border: 1px solid red; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: #FF0000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}
* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}
.menu ul li ul {
display: none;}
/* */
/* Specific to Non-IE browsers */
/* */
.menu ul li:hover a {
color: red; /* main when hover DD */
background: white; /* main when hover DD */
}
.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -4px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display: block;
background: red; /* DD FO non-hover */
color: white; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px; /* DD FO box width */
}
.menu ul li:hover ul li a:hover {
background: red; /* DD FO hover */
color: white; /* DD FO hover */
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 102px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 146px; /* FF FO box width */
}
/* */
/* Specific to IE browsers */
/* */
.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: white; /* main hover */
background:red; /* main hover */
}
.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}
.menu ul li a:hover ul li a {
display: block;
background: white; /* IE DD color non-hover */
color: red; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 146px; /* IE DD FO box */
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}
.menu ul li a:hover ul li a:hover {
background: blue; /* DD FO hover includes menu 6 */
color: gold; /* DD FO hover includes menu 6 */
}
.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 147px; /* FO right left */
}
/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width: 125px;
w\idth: 139px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}
/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a {
width: 125px; /* unknown */
w\idth: 104px; /* DD FF width */
}
/*END EXTRA ADDS FOR IE*/
/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}
/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}
/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}
/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}
/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}
/* ==== END NAVBAR CODE ==== */
.nophotos h3 {display: none;}#photoKeywords { display: none; }#bioBox .boxBottom {background: none !important; border: none !important;}#bioText {display: none;}
.galleryPage #imageInfo {display:none}#bioBox .photo {
display: none;}
/*====About-Page====*/
.gallery_8767392 #breadCrumbTrail,
.gallery_8767392 .play_slideshow,
.gallery_8767392 #albumNav_top,
.gallery_8767392 #albumNav_bottom,
.gallery_8767392 .nophotos h3,
.gallery_8767392 .pageNav
{display:none;}
.gallery_8767392 .journal_entry
{border:none;}
/*====Contact-Page====*/
.gallery_8745645 #breadCrumbTrail,
.gallery_8745645 .play_slideshow,
.gallery_8745645 #albumNav_top,
.gallery_8745645 #albumNav_bottom,
.gallery_8745645 .nophotos h3,
.gallery_8745645 .pageNav,
.gallery_8745645 #stylebar
{display:none;}
.gallery_8745645 .journal_entry
{border:none;}
/*====Guestbook-Page====*/
.gallery_8745018 #breadCrumbTrail,
.gallery_8745018 .play_slideshow,
.gallery_8745018 #albumNav_top,
.gallery_8745018 #albumNav_bottom,
.gallery_8745018 .nophotos h3,
.gallery_8745018 .pageNav,
.gallery_8745018 #sizePicker
{display:none;}
.gallery_8745018 #myText {
margin: 0 auto;
width: 600px;
background: #eee;
color: #444;
padding: 0 20px 5px 20px;
}
/*====No More Border====*/
.galleryPage,
.boxBottom,
.boxTop,
.box
{border:none !important;}
/*====No More Background====*/
.boxBottom,
.boxTop,
.box
{background:none !important;}
.gallery_8745018 #myText {
margin: 0 auto;
width: 600px;
background: #eee;
color: #444;
padding: 0 20px 5px 20px;
/*====No More Border====*/
.galleryPage,
.boxBottom,
.boxTop,
.box
{border:none !important;}
/* hide things not needed on page */
.gallery_8859110 .nophotos h3,
.notLoggedIn .gallery_8859110 #breadcrumb,
.notLoggedIn .gallery_8859110 .journal_entry,
.gallery_8859110 #albumNav_top,
.gallery_8859110 #albumNav_bottom {display: none;}
www.bkgphoto.com (http://www.bkgphoto.com)