Banner and Navbar alignment [Sitemap] - Digital Grin Photography Forum

View Full Version : Banner and Navbar alignment

robertlee

Mar-15-2009, 08:39 PM

I changed the font on my banner 'RLSImaging". After the
change, I suceeded in getting my banner and navbar to line up properly
with my header line; in Firefox. In Explorer my banner intersects
the header line. Any suggestion on how align my banner in Explorer.

Thanks

www.rlsimaging.com

jfriend

Mar-15-2009, 09:03 PM

You have an unstable situation in your CSS that different browsers handle differently. You have the contents of your header div as larger than the containers. The browser doesn't know what to do.

For example, you have:

#myHeader {height: 26px;}

But, you have an h1 tag inside that banner that wants to be 52px high (15px top margin, 10px bottom margin and 27px contents.

The browser isn't sure what to do and FF3 and IE7 give you different answers. The solution is to stop overconstraining the problem and only define a height for things that you have to and let the browser figure out the rest.

I would suggest removing the height definition from myHeader and adding some top padding so it becomes this:

#myHeader {border-bottom: 2px solid teal; padding: 10px 0 4px;}

Then, get rid of the h1 rule entirely as it is really messing things up:

/* changing height(margin) of my banner from top margin */
h1 {
font-size:22px;
margin-bottom:10px;
margin-top:15px;
}

Then, move the font-size to the myBanner and simplify the margins:

#myBanner {margin-left: 10px; font-family: Arial; font-size:22px; font-weight:bold;}

Then, get rid of the <h1> tags in your banner as they are just causing you grief when you can format it with CSS more easily without those.

Or, if you want to just replace all of your CSS, you can remove the <h1> tags from your banner and then just replace all of your CSS with this:

/* changing copyright rlsimaging font
body.tempClass, body.tempClass2 {
font-family:Arial;
font-size:12px;
} */

/* ???? not sure what it does
body.tempClass, body.tempClass2 {
font-family:Arial;
font-size:36px;
} */

/* 1. REMOVING ITEMS */

#photoKeywords {display: none;}

/* Removing the words gallery categories on your home page: */
#categoriesBox .boxTop { display: none; }

/* hides your name */
#userName {display: none;}

/* hides the word home from home and gallery page */
#userHome {display: none;}

/* remove slideshow logo */
#userBio {
text-align: center !important;
}

/* remove glow around slidehshow */
#homepage, #category, #smugmug, #smugmug_small,
#journal, #filmstrip, #slideshow, #critique,
#allthumbs, #traditional, #singleImage,
#content, #bodyWrapper, #footer {
background: none !important;
}

/* Hide the stylebar because we have replaced it with a YUI menu */
#stylebar {display:none !important;}

/* removing bio photo box */
#bioBox .photo {display: none;}

/* removing white border around lightbox image */
#lightBoxImage {
border: none;
margin: 0 auto;
cursor: pointer;
}

/* hide border on slideshow */
#bioBox .boxBottom {border:none !important; background:none;}
#homepage {width:820px;}

/* 2. CHANGING ITEMS */

/* change thumbnail border colour */
.imgBorder {border-color: teal !important;}

/* change contact and questbook photo size s or m colour */
a {
color:teal;
}

/* change colour of navbar hover - see below under navbar section */

/* change the text color to white */
.title,
*.title,
* .title,
.box .title {
color:#blue;
}

/* change navbar - gallery, home etc font and margin from edge*/
#navcontainer {
float: right;
width: 430px;
height:30px;
font-family: Arial, Segoe Script, Helvetica;
font-size:18px;
}

#navcontainer ul
{
margin: 0;
padding: 1;
list-style-type: none;
text-align: right;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none; /* adjust right em and mavcontainer width above */
padding: .2em 0.7em;
color: #fff;
}

#navcontainer ul li a:hover
{
color: #fff;
}

/* change colour of nav bar hover colours */
#navcontainer ul li a:hover {
color:teal;
}

/* change the height of the navbar, home, galleries etc.*/
ul, ol {
margin:0 0 10px;
padding:5px 0 0 30px;
}

/* changing banner font */
#myBanner {margin-left: 10px; font-family: Arial; font-size:22px; font-weight:bold;}
#myBanner h2 {margin:0; font-size: 180%;}

/* adding line to header */
#myHeader {border-bottom: 2px solid teal; padding: 10px 0 4px;}

/* expanding gallery to six from four */
/* Open Wide! Demo here: http://www.wolfsnap.com */
.galleries #homepage,
#content.userKeywords,
#header_wrapper, #footer_wrapper, #cobrand_footer,
#category, #subcategory, #header,
#smugmug, .smugmug #header, .smugmug #footer {
margin-left: 15px;
margin-right: 15px;
min-width: 755px;
width: auto;
_width: expression(document.documentElement.clientWidth < 790? "760px" : "auto");
}

/* move logon copyright rss down */
#critique #photos {
margin:125px 7;
}

/* moving add comment on questbook page */
#critique #photos
{ margin:125px 7;
}

/* moving rss feeds login etc. on contact and guestbook page */
#comment_header {
padding:20px 0 50px;
}

/* 3. ADDING FUNCTIONALITY */

/* to make nav bars work */
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}

.galleries #bioBox {
display: none;
}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

/* 4. FUTURE CHANGES */

/* left next alterations in as comment */

/* test changing background colour of homepage not the slideshow box
body {background-color: red !important;} */

/* left next alterations in as comment */
/* change slideshow box colour on home page
#bioBox.box {background-color:red;}
#bioBox .boxBottom {background:none !important;} */

/* left next alterations in as comments */
/* change contact and questbook border and box colour
.gallery_7225444 #photos,
.gallery_7198785 #photos {
background:none !important;
background-color:solidteal !important;
} */

/* left next alterations in as comments */
/* changing contact and guestbook box colour
.gallery_7225444 #photos,
.gallery_7198785 #photos {
background:none !important;
background-color:teal !important;
} */

/* left next alterations in as comments */
/* changing thumbnail gallery box colour
#smugmug #photos {background: none !important; background-color:teal!important;} */

/* change slideshow box colour on home page #bioBox.box {background-color:#666666;} #bioBox .boxBottom {background:none !important;} */

/* changing location of contact picture to line picture with text */
#journal .caption {
padding-top:0;
}

/* making gallery page all grey insted of black and grey */
{background: none !important;}
.box,
.boxTop,
.boxBottom,
#galleriesBox.box,
#categoriesBox.box,
#subcategoriesBox.box
{background: none !important;}

/* moving homepage slideshow down */
#userBio, #rating, .boxBottomNav {
padding:5px 0;
text-align:left;
}

/*changing of thumbnail gallery background color
#smugmug {
background: #grey !important;
padding: 0 5px;
}
#breadCrumbTrail .nav {
color: #666;
} */

It should end up looking like this:

http://content.screencast.com/users/jfriend/folders/Jing/media/32027514-c73e-4b6d-a747-4893bb074c50/2009-03-15_2203.png

robertlee

Mar-15-2009, 09:35 PM

Thanks for the help; the changes that you suggested
worked. I thought there was a conflict with the code;
but wasn't sure which one was causing the problem.

www.rlsimaging.com

You have an unstable situation in your CSS that different browsers handle differently. You have the contents of your header div as larger than the containers. The browser doesn't know what to do.

For example, you have:

#myHeader {height: 26px;}

But, you have an h1 tag inside that banner that wants to be 52px high (15px top margin, 10px bottom margin and 27px contents.

The browser isn't sure what to do and FF3 and IE7 give you different answers. The solution is to stop overconstraining the problem and only define a height for things that you have to and let the browser figure out the rest.

I would suggest removing the height definition from myHeader and adding some top padding so it becomes this:

#myHeader {border-bottom: 2px solid teal; padding: 10px 0 4px;}

Then, get rid of the h1 rule entirely as it is really messing things up:

/* changing height(margin) of my banner from top margin */
h1 {
font-size:22px;
margin-bottom:10px;
margin-top:15px;
}

Then, move the font-size to the myBanner and simplify the margins:

#myBanner {margin-left: 10px; font-family: Arial; font-size:22px; font-weight:bold;}

Then, get rid of the <h1> tags in your banner as they are just causing you grief when you can format it with CSS more easily without those.

Or, if you want to just replace all of your CSS, you can remove the <h1> tags from your banner and then just replace all of your CSS with this:

/* changing copyright rlsimaging font
body.tempClass, body.tempClass2 {
font-family:Arial;
font-size:12px;
} */

/* ???? not sure what it does
body.tempClass, body.tempClass2 {
font-family:Arial;
font-size:36px;
} */

/* 1. REMOVING ITEMS */

#photoKeywords {display: none;}

/* Removing the words gallery categories on your home page: */
#categoriesBox .boxTop { display: none; }

/* hides your name */
#userName {display: none;}

/* hides the word home from home and gallery page */
#userHome {display: none;}

/* remove slideshow logo */
#userBio {
text-align: center !important;
}

/* remove glow around slidehshow */
#homepage, #category, #smugmug, #smugmug_small,
#journal, #filmstrip, #slideshow, #critique,
#allthumbs, #traditional, #singleImage,
#content, #bodyWrapper, #footer {
background: none !important;
}

/* Hide the stylebar because we have replaced it with a YUI menu */
#stylebar {display:none !important;}

/* removing bio photo box */
#bioBox .photo {display: none;}

/* removing white border around lightbox image */
#lightBoxImage {
border: none;
margin: 0 auto;
cursor: pointer;
}

/* hide border on slideshow */
#bioBox .boxBottom {border:none !important; background:none;}
#homepage {width:820px;}

/* 2. CHANGING ITEMS */

/* change thumbnail border colour */
.imgBorder {border-color: teal !important;}

/* change contact and questbook photo size s or m colour */
a {
color:teal;
}

/* change colour of navbar hover - see below under navbar section */

/* change the text color to white */
.title,
*.title,
* .title,
.box .title {
color:#blue;
}

/* change navbar - gallery, home etc font and margin from edge*/
#navcontainer {
float: right;
width: 430px;
height:30px;
font-family: Arial, Segoe Script, Helvetica;
font-size:18px;
}

#navcontainer ul
{
margin: 0;
padding: 1;
list-style-type: none;
text-align: right;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none; /* adjust right em and mavcontainer width above */
padding: .2em 0.7em;
color: #fff;
}

#navcontainer ul li a:hover
{
color: #fff;
}

/* change colour of nav bar hover colours */
#navcontainer ul li a:hover {
color:teal;
}

/* change the height of the navbar, home, galleries etc.*/
ul, ol {
margin:0 0 10px;
padding:5px 0 0 30px;
}

/* changing banner font */
#myBanner {margin-left: 10px; font-family: Arial; font-size:22px; font-weight:bold;}
#myBanner h2 {margin:0; font-size: 180%;}

/* adding line to header */
#myHeader {border-bottom: 2px solid teal; padding: 10px 0 4px;}

/* expanding gallery to six from four */
/* Open Wide! Demo here: http://www.wolfsnap.com */
.galleries #homepage,
#content.userKeywords,
#header_wrapper, #footer_wrapper, #cobrand_footer,
#category, #subcategory, #header,
#smugmug, .smugmug #header, .smugmug #footer {
margin-left: 15px;
margin-right: 15px;
min-width: 755px;
width: auto;
_width: expression(document.documentElement.clientWidth < 790? "760px" : "auto");
}

/* move logon copyright rss down */
#critique #photos {
margin:125px 7;
}

/* moving add comment on questbook page */
#critique #photos
{ margin:125px 7;
}

/* moving rss feeds login etc. on contact and guestbook page */
#comment_header {
padding:20px 0 50px;
}

/* 3. ADDING FUNCTIONALITY */

/* to make nav bars work */
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}

.galleries #bioBox {
display: none;
}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

/* 4. FUTURE CHANGES */

/* left next alterations in as comment */

/* test changing background colour of homepage not the slideshow box
body {background-color: red !important;} */

/* left next alterations in as comment */
/* change slideshow box colour on home page
#bioBox.box {background-color:red;}
#bioBox .boxBottom {background:none !important;} */

/* left next alterations in as comments */
/* change contact and questbook border and box colour
.gallery_7225444 #photos,
.gallery_7198785 #photos {
background:none !important;
background-color:solidteal !important;
} */

/* left next alterations in as comments */
/* changing contact and guestbook box colour
.gallery_7225444 #photos,
.gallery_7198785 #photos {
background:none !important;
background-color:teal !important;
} */

/* left next alterations in as comments */
/* changing thumbnail gallery box colour
#smugmug #photos {background: none !important; background-color:teal!important;} */

/* change slideshow box colour on home page #bioBox.box {background-color:#666666;} #bioBox .boxBottom {background:none !important;} */

/* changing location of contact picture to line picture with text */
#journal .caption {
padding-top:0;
}

/* making gallery page all grey insted of black and grey */
{background: none !important;}
.box,
.boxTop,
.boxBottom,
#galleriesBox.box,
#categoriesBox.box,
#subcategoriesBox.box
{background: none !important;}

/* moving homepage slideshow down */
#userBio, #rating, .boxBottomNav {
padding:5px 0;
text-align:left;
}

/*changing of thumbnail gallery background color
#smugmug {
background: #grey !important;
padding: 0 5px;
}
#breadCrumbTrail .nav {
color: #666;
} */

It should end up looking like this:

http://content.screencast.com/users/jfriend/folders/Jing/media/32027514-c73e-4b6d-a747-4893bb074c50/2009-03-15_2203.png

jujubee

Mar-31-2009, 10:50 AM

jfriend

Mar-31-2009, 11:35 AM

John, would it be possible for you take a quick look at my code to see where I went wrong on my banner and navbar alignment? I'm trying to have it set up similar to RLS Imaging, but I'm not following your instruction above. I appreciate your help. Change all your CSS customization to this:

/* hides your name (including any 's) */
#userName {
display: none;
}

/* hides the word home */
#userHome {
display: none;
}

#bioBox .photo {
display: none;
}

#userBio {
text-align: center !important;
}

#bioBox {
margin: 0 auto;
width: 860px;
}

#homepage {
margin: 0 auto;
width: 860px;
}

.boxBottom,
.boxTop,
.box {background: none;}

/* Header and Navbar */
#myHeaderWrapper {
margin: 5px 24px 15px; /* top right/left bottom*/
border-bottom: 1px solid #9e793e;
position:relative;
}

#myHeader {
width: 225px;
height: 75px;
background: url(/photos/502478461_cVPYy-O.jpg) no-repeat;
}

#navcontainer {
position:absolute;
right: 10px;
bottom: 10px;
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
font-size:130%;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}

.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}

.galleries #bioBox {
display: none;
}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}

.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox {
display: block;
}

And, you should get this:
http://content.screencast.com/users/jfriend/folders/Jing/media/db60939d-b659-477e-b641-d5c82f2e3eef/2009-03-31_1233.png

jujubee

Mar-31-2009, 12:46 PM

:clap