• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support SmugMug Customization again: a Navbar positioning issue

FAQtoid

Ever wanted to create an Avatar? Creating an Avatar!

Searching Dgrin with Google Searching with Google

Dgrin Challenges

Congratulations to the Winner of DSS #130 (Hot or Cold), Memol..

The next Dgrin Challenge DSS #131 (Music) is open for entries through June 24th, 2013 at 8:00pm PDT.

As always, we look forward to your participation but please do take a moment to read through the rules before posting your entry.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Need some help with Accessories?

Tutorials

Ever find yourself wondering just how someone managed to create an image using different effects?

Here are three simple tutorials we hope will encourage you to try something new.

The Hot Seat

A lifelong interest in landscape photography has led Eyal Oren to make a study of his adopted hometown of Marblehead, MA. As you can see, his dedication is paying off!

Africa!

Dgrinners Harryb, Pathfinder, and others joined Andy Williams and Marc Muench on Safari in East Africa recently. Here are some awesome threads to check out!

 
Thread Tools Display Modes
Old Feb-19-2012, 02:56 PM
#1
Josti is offline Josti OP
Beginner grinner
again: a Navbar positioning issue
Hi pros,

yes, I searched the forum and also the web, but as a newbie I haven't figured it out yet - unfortunately.
I have both a custom header and Navbar. The header is a jpg. which spans over the whole webpage (980px) and can be found here:
http://www.shutterbits.com/photos/i-...PbDbLjs-X3.jpg

I created the Navbar based on the tutorial and it should be placed right above the white line in the header to look like this (no matter how big the browser window is):
http://www.shutterbits.com/photos/i-...Mz3sSRD-X3.png

I currently inserted the Navbar as a float, however it doesn't help me if the browser is bigger (wider) than 980px.
I tried a couple of CSS positioning but can't figure it out.

Any suggestions from the pros?

Thanks a lot!

Josti


www.shutterbits.com
Old Feb-19-2012, 03:43 PM
#2
Allen is online now Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by Josti View Post
Hi pros,

yes, I searched the forum and also the web, but as a newbie I haven't figured it out yet - unfortunately.
I have both a custom header and Navbar. The header is a jpg. which spans over the whole webpage (980px) and can be found here:
http://www.shutterbits.com/photos/i-...PbDbLjs-X3.jpg

I created the Navbar based on the tutorial and it should be placed right above the white line in the header to look like this (no matter how big the browser window is):
http://www.shutterbits.com/photos/i-...Mz3sSRD-X3.png

I currently inserted the Navbar as a float, however it doesn't help me if the browser is bigger (wider) than 980px.
I tried a couple of CSS positioning but can't figure it out.

Any suggestions from the pros?

Thanks a lot!

Josti


www.shutterbits.com
See if this works, check other browsers.
Code:
#navcontainer {
   margin: 38px auto 0;
   position: relative;
   left: -350px;
}

#my_banner {
display: none;
width: 980px;
height: 89px;
margin: -50px auto 0;
background: url(http://www.shutterbits.com/photos/i-PbDbLjs/0/X3/i-PbDbLjs-O.jpg) no-repeat;
}
Old Feb-19-2012, 04:08 PM
#3
Josti is offline Josti OP
Beginner grinner
Quote:
Originally Posted by Allen View Post
See if this works, check other browsers.
Code:
#navcontainer {
   margin: 38px auto 0;
   position: relative;
   left: -350px;
}

#my_banner {
display: none;
width: 980px;
height: 89px;
margin: -50px auto 0;
background: url(http://www.shutterbits.com/photos/i-PbDbLjs/0/X3/i-PbDbLjs-O.jpg) no-repeat;
}
That's awesome! It is what I was looking for! Thanks for your quick response. Would it be possible to shift the Navbar a little closer to the white line? So that it has about the same distance to it than the "shutterbits" in the banner?
Old Feb-19-2012, 04:26 PM
#4
Allen is online now Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by Josti View Post
That's awesome! It is what I was looking for! Thanks for your quick response. Would it be possible to shift the Navbar a little closer to the white line? So that it has about the same distance to it than the "shutterbits" in the banner?
Play with the top margin.
Code:
#navcontainer {
    margin: 38px auto 0;
    position: relative;
    left: -350px; }
Old Feb-19-2012, 04:35 PM
#5
Josti is offline Josti OP
Beginner grinner
Quote:
Originally Posted by Allen View Post
Play with the top margin.
Code:
#navcontainer {
    margin: 38px auto 0;
    position: relative;
    left: -350px; }
Yes, got it! Played with the margins and it worked.

Thanks again! You made my day.

Josti
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
DropDown NavBar Positioning and Color CerebrusX SmugMug Customization 6 Aug-08-2012 09:42 AM
navbar issue akendall SmugMug Customization 3 Jul-15-2010 12:11 PM
navbar code RogersDA SmugMug Customization 2 Feb-18-2010 05:11 PM
Navbar and Slideshow Positioning CerebrusX SmugMug Customization 4 Nov-30-2008 03:23 PM
banner and navbar confusion... bazancik SmugMug Customization 3 Aug-19-2008 04:02 AM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump