Jump to content

Search the Community

Showing results for tags 'horizontal navigation'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 2 results

  1. Hey, So I have started styling some of my website I am working on. I am working on the navigation currently and managed to get the horizontal menu centered. Unfortunately, I need it to also drop to a new line when on a small window such as a smart phone. Currently the first couple of links show up while the rest disappear. Any ideas? ThanksI have the menu inserted with php include inside a div id="mainNav" the menu is <ul class="menu"> <li><a href="/index.php" target="_self"><span>Home</span></a></li> <li><a href="/career/index.php"><span>Career</span></a></li> <li><a href="/portfolio/index.php"><span>Portfolio</span></a></li> <li><a href="/fun/index.php"><span>Just For Fun</span></a></li> <li><a href="/contact/index.php"><span>Contact</span></a></li></ul> #mainNav {text-align: center;width: 100%;position: relative;overflow: hidden;background: url('/images/topMenuImages.png') repeat-x; .menu {margin: 0;padding: 0;height: 30px;background: url('/images/topMenuImages.png') repeat-x;left: 50%;clear: left;float: left;position: relative;}.menu li {padding: 0;margin: 0;list-style: none;display: block;float: left;position: relative;right: 50%;}.menu li a {float: left;padding-left: 15px;display: block;color: rgb(255,255,255);text-decoration: none;font: 12px Verdana, Arial, Helvetica, sans-serif;cursor: pointer;background: url('/images/topMenuImages.png') 0px -30px no-repeat;}.menu li a span {line-height: 30px;float: left;display: block;padding-right: 15px;background: url('/images/topMenuImages.png') 100% -30px no-repeat;}.menu li a:hover {background-position: 0px -60px;color: rgb(255,255,255);}.menu li a:hover span {background-position: 100% -60px;}.menu li a.active, .menu li a.active:hover {line-height: 30px;font: 12px Verdana, Arial, Helvetica, sans-serif;background: url('/images/topMenuImages.png') 0px -90px no-repeat;color: rgb(255,255,255);}.menu li a.active span, .menu li a.active:hover span {background: url('/images/topMenuImages.png') 100% -90px no-repeat;} in addition, in my header section I tried creating a background with a dark blue which I did fine, but when I then attempted to change the text to a white color, for some reason it is not allowing me to do so. I made a #Header h1 h2 { color:FFF;} yet nothing changed. I tried putting this style inside the include file for the header, and inside the external CSS, neither worked. The only thing that worked was when i did a style for the specific page. But since this needs to go through the entire site, this wont work. Any ideas what is preventing the style from showing up?
  2. Hey, I posted this yesterday, but for some reason I do not see it today. I'm not sure what happened. Anyway, I have a horizontal navigation bar that I managed to find a solution to center it which is good. Unfortunately, I also need it to wrap to an additional line when on a smaller browser window, such as a smart phone. Currently the links that don't fit within the window just do not show up. Any ideas how to fix this? And if I am using a background image to create the buttons, is that going to effect things? I can probably just replace the image with a color.I currently have the naigational element inserted with a php include with a div id="mainNav" <ul class="menu"> <li><a href="/index.php" target="_self"><span>Home</span></a></li> <li><a href="/career/index.php"><span>Career</span></a></li> <li><a href="/portfolio/index.php"><span>Portfolio</span></a></li> <li><a href="/fun/index.php"><span>Just For Fun</span></a></li> <li><a href="/contact/index.php"><span>Contact</span></a></li></ul> #mainNav {text-align: center;width: 100%;position: relative;overflow: hidden;background: url('/images/topMenuImages.png') repeat-x;}.menu {margin: 0;padding: 0;height: 30px;background: url('/images/topMenuImages.png') repeat-x;left: 50%;clear: left;float: left;position: relative;}.menu li {padding: 0;margin: 0;list-style: none;display: block;float: left;position: relative;right: 50%;}.menu li a {float: left;padding-left: 15px;display: block;color: rgb(255,255,255);text-decoration: none;font: 12px Verdana, Arial, Helvetica, sans-serif;cursor: pointer;background: url('/images/topMenuImages.png') 0px -30px no-repeat;}.menu li a span {line-height: 30px;float: left;display: block;padding-right: 15px;background: url('/images/topMenuImages.png') 100% -30px no-repeat;}.menu li a:hover {background-position: 0px -60px;color: rgb(255,255,255);}.menu li a:hover span {background-position: 100% -60px;}.menu li a.active, .menu li a.active:hover {line-height: 30px;font: 12px Verdana, Arial, Helvetica, sans-serif;background: url('/images/topMenuImages.png') 0px -90px no-repeat;color: rgb(255,255,255);}.menu li a.active span, .menu li a.active:hover span {background: url('/images/topMenuImages.png') 100% -90px no-repeat;} Also, while I'm at it, what do I need to establish the "active" link
×
×
  • Create New...