How to add a line break... or something

[PeterGar]

I want to create a little distance between my banner header and the "Share" and "Slideshow" buttons at http://photos.petergarr.com/sample001.

How so?

Thanks.

[denisegoldberg]

I want to create a little distance between my banner header and the "Share" and "Slideshow" buttons at http://photos.petergarr.com/sample001. (http://photos.petergarr.com/sample001.)

This will drop the entire breadCrumbTrail a little bit. Play with the numbers until you get the look that you want.

#breadCrumbTrail {
margin-top: 10px !important;
}
--- Denise

[PeterGar]

Sorry for the delayed response, but thanks! I'm now spending some time on my site for the first time since you replied to the post. It worked! :clap

This will drop the entire breadCrumbTrail a little bit. Play with the numbers until you get the look that you want.

#breadCrumbTrail {
margin-top: 10px !important;
}
--- Denise

[PeterGar]

Okay, I'm noticing this isn't doing exactly what I want. I want to create a little more distance between the bottom of my custom banner header and the Share and Slideshow buttons.

Is this possible?

[denisegoldberg]

Okay, I'm noticing this isn't doing exactly what I want. I want to create a little more distance between the bottom of my custom banner header and the Share and Slideshow buttons.
Maybe I'm not understanding what you are trying to do. If you change the margin-top (make it larger) in the CSS above, it will drop the breadCrumbTrail lower on the page, which increases the space between your banner and the share and slideshow buttons.

Try adjusting that number, and if that doesn't get what you're looking for - can you post a diagram? Or an annotated screen shot showing what it is that you want to move?

--- Denise

[jfriend]

Maybe I'm not understanding what you are trying to do. If you change the margin-top (make it larger) in the CSS above, it will drop the breadCrumbTrail lower on the page, which increases the space between your banner and the share and slideshow buttons.

Try adjusting that number, and if that doesn't get what you're looking for - can you post a diagram? Or an annotated screen shot showing what it is that you want to move?

--- Denise

Denise, I think you'd want to adjust the margin on the breadcrumb (not breadCrumbTrail) if you want the whole thing to drop down evenly. The breadCrumbTrail is just the navigation links and doesn't include the buttons. It's the breadcrumb that goes all the way across the page and includes the buttons.

[denisegoldberg]

Denise, I think you'd want to adjust the margin on the breadcrumb (not breadCrumbTrail) if you want the whole thing to drop down evenly. The breadCrumbTrail is just the navigation links and doesn't include the buttons. It's the breadcrumb that goes all the way across the page and includes the buttons.
You're probably right. But when I adjusted the breadCrumbTrail in web dev, the whole thing did drop down. In fact, I tried both independently, and both adjustments appeared to my eyes to do the same thing in this case.

Peter -
Try adjusting the value for #breadcrumb (instead of #breadCrumbTrail) as John suggested and see if that gets you the look you want.

--- Denise

[PeterGar]

Thanks Denise and John. You both rock! Just for testing, I set the #breadCrumbTrail to 150 px. It did move the navigation links down, but not the Slideshow and Share buttons. ::Sigh::

I don't have a #breadcrumb line in my CSS. Where and how do I add it?

Below is my current CSS. Here's a link to my newest gallery: http://photos.petergarr.com/20081102

______

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://petergarrphotography.smugmug.com/photos/361912992_wTYox-O.jpg) no-repeat;
_background: none;
}

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

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

#userBio {
width: 550px;
display: inline;
float: left;
position: relative;
}

/* turn off the login link on the minifooter */
.loginLink {
display: none;
}

#extraDiv1 {
display: none;
}

#breadCrumbTrail {
margin-top: 150px !important;
}

[PeterGar]

bump

[jfriend]

Thanks Denise and John. You both rock! Just for testing, I set the #breadCrumbTrail to 150 px. It did move the navigation links down, but not the Slideshow and Share buttons. ::Sigh::

I don't have a #breadcrumb line in my CSS. Where and how do I add it?

Below is my current CSS. Here's a link to my newest gallery: http://photos.petergarr.com/20081102

______

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://petergarrphotography.smugmug.com/photos/361912992_wTYox-O.jpg) no-repeat;
_background: none;
}

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

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

#userBio {
width: 550px;
display: inline;
float: left;
position: relative;
}

/* turn off the login link on the minifooter */
.loginLink {
display: none;
}

#extraDiv1 {
display: none;
}

#breadCrumbTrail {
margin-top: 150px !important;
}

If you want to change the height of the overall breadcrumb instead of just the trail, then you'd just use:

#breadcrumb {
margin-top: 150px !important;
}

instead of

#breadCrumbTrail {
margin-top: 150px !important;
}