Solved

Why won't this menu display correctly?

Posted on 2014-01-15
2
199 Views
Last Modified: 2014-01-16
Head out to http://www.brucegust.com/NHBC/mobile/about.php on your tablet.

You'll notice along the top, I've got a menu that you can sweep from left to right. Problem is, I can't figure out how to extend the scrollable area so it comes within 10px of the end.

Here's the portion of the stylesheet:

#scroll_bar {
height:27px;
width:1024px;
}

#makeMeScrollable div.scrollableArea *
{
      position: relative;
      display: block;
      float: left;
      margin-left: 5px;
      padding: 0;
      /* If you don't want the images in the scroller to be selectable, try the following
         block of code. It's just a nice feature that prevent the images from
         accidentally becoming selected/inverted when the user interacts with the scroller. */
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;
}


#scroll_caps
{
position:relative;
margin:auto;
width:950px;
height:27px;
}

#scroll_caps_left {
position:absolute;
left:3px;
width:17px;
height:27px;
background-image:url(images/left_arrow.png);
background-repeat:none;
}

#scroll_caps_right {
position:absolute;
right:3px;
width:17px;
height:27px;
background-image:url(images/right_arrow.png);
background-repeat:none;
}
      
#makeMeScrollable
{
margin-left:auto;
margin-right:auto;
height: 27px;
width:1000px;
}

...and here's the HTML:

<div id="scroll_container">
      <div id="scroll_caps_left"></div>
      <div id="scroll_caps_right"></div>
      <div id="scroll_caps">
            <div id="makeMeScrollable">
            <a href="index.php"><img src="images/link_home.png" border="0"/></a><a href="about.php"><img src="images/link_about.png" border="0"/></a><a href="visitors.php"><img src="images/link_guests.png" border="0"/></a><a href="ministries.php"><img src="images/link_programs.png" border="0"/></a><a href="children.php"><img src="images/link_children.png" border="0"><a href="https://www.google.com/calendar/embed?src=newnhbccalendar%40gmail.com&ctz=America/Chicago "><img src="images/link_calendar.png" border="0"/></a><a href="contact.php"><img src="images/link_contact.png" border="0"/></a></div>
      </div>
</div>

What do you think?
0
Comment
Question by:brucegust
2 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39784512
Looks like setting these two to 420px works

#scroll_caps {
position: relative;
margin: auto;
width: 420px;
height: 27px;
}

#makeMeScrollable {
margin-left: auto;
margin-right: auto;
height: 27px;
width: 420px;
}

Open in new window

0
 

Author Closing Comment

by:brucegust
ID: 39785410
Thanks, Scott!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Wrapper for APPs 9 84
remove background quote mark from widget 6 67
Porbably easy CSS question about overlapping and offset images 21 36
Center div containing a script 6 22
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question