What piece of code am I looking for? (pic inside)

Discussion in 'Programming' started by Copenhagen69, Jan 23, 2013.

  1. Copenhagen69

    Copenhagen69 Diamond Member

    Joined:
    Feb 8, 2005
    Messages:
    3,048
    Likes Received:
    0
    I am trying to lower the nav bar, but dont know much about CSS. So I was wondering what type of code I am looking for to adjust the nav bar and lower it some.

    any ideas?


    Thanks ahead of time!


    [​IMG]
     
  2. Markbnj

    Markbnj Elite Member <br>Moderator Emeritus
    Moderator

    Joined:
    Sep 16, 2005
    Messages:
    15,682
    Likes Received:
    3
    Hard to say without seeing the current markup and styles. Look in the markup and see what inline styles or stylesheet rules apply to the div that contains the "Drew and Lacey" header. Maybe it has a fixed height that is too small, but there are other possibilities. Best thing is to post the relevant pieces.
     
  3. Copenhagen69

    Copenhagen69 Diamond Member

    Joined:
    Feb 8, 2005
    Messages:
    3,048
    Likes Received:
    0
    If this is the right section it looks like ...




    Code:
    /*-------navigation-------*/
    #nav {
      bottom: 0;
      display: block;
      left: 0;
      position: absolute;
      text-transform: uppercase;
      width: 100%;
      z-index: 1500;
    }
    #nav h2 {
      display: none;
    }
    #nav ul {
      float: left;
      padding: 16px 0;
    }
    #nav ul li {
      background: transparent url(../images/navspace.jpg) no-repeat 100% 50%;
      display: inline;
      font-size: 1em;
      padding: 9px 14px 9px 10px;
      list-style: none;
      margin: 0;
      position: relative;
    }
    #nav ul li.last {
      background: none;
    }
    #nav ul li a {
      color: #fff;
      padding: 9px 17px 15px;
      text-shadow: 0px -1px 1px #000;
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      border-radius: 7px;
    }
    #nav ul li a:hover,
    #nav ul li a.active {
      color: #EF9F20;
    }
    #nav ul li.expanded a:hover,
    #nav ul li.expanded.hover a {
      background: transparent url(../images/navbg.jpg) repeat-x 0 0;
    }
    #nav ul li ul {
      color: #fff;
      display: none;/*  make sure the submenus aren't visible on load */
      font-size: 0.95em;
      left: 0.95em;
      line-height: 2.5em;
      padding: 0;
      position: absolute;
      top: 2.4em;
      width: 15em;
    }
    #nav ul li.hover ul {
      display: block;
    }
    #nav ul li.hover ul li ul,
    #nav ul li.hover ul li.hover ul li ul {
      display: none;
    }
    #nav ul li.hover ul li.hover ul,
    #nav ul li.hover ul li.hover ul li.hover ul {
      display: block;
    }
    #nav ul ul li {
      background: #0b0b0b url(../images/dd-space.jpg) repeat-x scroll 0 100%;
      display: block;
      line-height: 2.5em;
      margin: 0 !important;
      padding: 0;
      position: relative;
      text-align: left;
      width: 15em;
    }
    #nav ul ul li.last {
      background: #010101;
    }
    #nav ul li.expanded ul li.expanded a,
    #nav ul li.expanded ul li.expanded ul li.expanded a,
    #nav li.expanded ul li.expanded a:hover,
    #nav li.expanded ul li.expanded ul li.expanded a:hover {
      background: transparent url(../images/ddplus.gif) no-repeat 92% 50%;
    }
    #nav ul li.expanded ul li a,
    #nav ul li.expanded ul ul li a,
    #nav ul li.expanded ul ul ul li a,
    #nav ul li.expanded ul li.expanded ul li a,
    #nav ul li.expanded ul li.expanded ul li a:hover,
    #nav ul li.expanded ul li.expanded ul li.expanded ul li a,
    #nav ul li.expanded ul li.expanded ul li.expanded ul li a:hover,
    #nav li.expanded ul li.expanded li a:hover {
      background: transparent;
      display: block;
      height: auto;
      padding: 2px 15px;
    }
    #nav li.expanded ul li a:hover,
    #nav li.expanded ul ul li a:hover {
      background: transparent;
      color: #EF9F20;
      padding: 2px 15px;
    }
    #nav li .expanded ul {
      margin: -2.7em 0 0 16em;
    }
    #nav .block {
      margin: 0;
     
  4. Markbnj

    Markbnj Elite Member <br>Moderator Emeritus
    Moderator

    Joined:
    Sep 16, 2005
    Messages:
    15,682
    Likes Received:
    3
    That's the style sheet. Can you also post the markup for the page, or at least the header and nav bar portions?
     
  5. Copenhagen69

    Copenhagen69 Diamond Member

    Joined:
    Feb 8, 2005
    Messages:
    3,048
    Likes Received:
    0
    It is a theme I picked up for my drupal site ... Where would the markup page be located?

    here is there header and nav section ...

    Code:
    /*--------header--------*/
    #header-top {
      color: #999;
      padding: 3px 20px;
      height: 18px;
    }
    #header-top #member-login {
     color: #333;
     float: right;
    }
    #header-top a {
      color: #999;
      text-decoration: none;
      padding: 0 3px;
    }
    #header-top a:hover {
      color: #333;
      text-decoration: underline;
    }
    #header {
      height: 159px;
      position: relative;
    }
    #header a {
      color: #222;
      text-decoration: none;
    }
    #logo {
      padding: 16px 0 0 20px;
    }
    #logo img {
      float: left;
    }
    #logo h1#site-name {
      width: auto;
    }
    #logo h1#site-name a {
      font-size: 1.9em;
      float: left;
      font-weight: lighter;
      padding: 17px 0 0 10px;
      letter-spacing: 1px;
    }
    /*-------navigation-------*/
    #nav {
      bottom: 0;
      padding-top:50px;
      display: block;
      left: 0;
      position: absolute;
      text-transform: uppercase;
      width: 100%;
      z-index: 1500;
    }
    #nav h2 {
      display: none;
    }
    #nav ul {
      float: left;
      padding: 16px 0;
    }
    #nav ul li {
      background: transparent url(../images/navspace.jpg) no-repeat 100% 50%;
      display: inline;
      font-size: 1em;
      padding: 9px 14px 9px 10px;
      list-style: none;
      margin: 0;
      position: relative;
    }
    #nav ul li.last {
      background: none;
    }
    #nav ul li a {
      color: #fff;
      padding: 9px 17px 15px;
      text-shadow: 0px -1px 1px #000;
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      border-radius: 7px;
    }
    #nav ul li a:hover,
    #nav ul li a.active {
      color: #EF9F20;
    }
    #nav ul li.expanded a:hover,
    #nav ul li.expanded.hover a {
      background: transparent url(../images/navbg.jpg) repeat-x 0 0;
      
    }
    #nav ul li ul {
      color: #fff;
      display: none;/*  make sure the submenus aren't visible on load */
      font-size: 0.95em;
      left: 0.95em;
      line-height: 2.5em;
      padding: 0;
      position: absolute;
      top: 2.4em;
      width: 15em;
    }
    #nav ul li.hover ul {
      display: block;
    }
    #nav ul li.hover ul li ul,
    #nav ul li.hover ul li.hover ul li ul {
      display: none;
    }
    #nav ul li.hover ul li.hover ul,
    #nav ul li.hover ul li.hover ul li.hover ul {
      display: block;
    }
    #nav ul ul li {
      background: #0b0b0b url(../images/dd-space.jpg) repeat-x scroll 0 100%;
      display: block;
      line-height: 2.5em;
      margin: 0 !important;
      padding: 0;
      position: relative;
      text-align: left;
      width: 15em;
    }
    #nav ul ul li.last {
      background: #010101;
    }
    #nav ul li.expanded ul li.expanded a,
    #nav ul li.expanded ul li.expanded ul li.expanded a,
    #nav li.expanded ul li.expanded a:hover,
    #nav li.expanded ul li.expanded ul li.expanded a:hover {
      background: transparent url(../images/ddplus.gif) no-repeat 92% 50%;
    }
    #nav ul li.expanded ul li a,
    #nav ul li.expanded ul ul li a,
    #nav ul li.expanded ul ul ul li a,
    #nav ul li.expanded ul li.expanded ul li a,
    #nav ul li.expanded ul li.expanded ul li a:hover,
    #nav ul li.expanded ul li.expanded ul li.expanded ul li a,
    #nav ul li.expanded ul li.expanded ul li.expanded ul li a:hover,
    #nav li.expanded ul li.expanded li a:hover {
      background: transparent;
      display: block;
      height: auto;
      padding: 2px 15px;
    }
    #nav li.expanded ul li a:hover,
    #nav li.expanded ul ul li a:hover {
      background: transparent;
      color: #EF9F20;
      padding: 2px 15px;
    }
    #nav li .expanded ul {
      margin: -2.7em 0 0 16em;
    }
    #nav .block {
      margin: 0;
    }
     
  6. SockHaser

    SockHaser Member

    Joined:
    Jan 12, 2011
    Messages:
    170
    Likes Received:
    0
    That would be the html portions of the navigation area, hence HyperText Markup Language :p
     
  7. Ken g6

    Ken g6 Programming Moderator, Elite Member
    Moderator

    Joined:
    Dec 11, 1999
    Messages:
    11,762
    Likes Received:
    52
    This Is Sparta Drupal! It generates its HTML from deep in cryptic PHP functions. You shouldn't be fiddling with the markup.

    In my experience, the theme is generated from within sites/all/themes, though there could be another path being used. Find your theme, then look at the CSS folder within it. There will probably be many CSS files.

    Next, you need to find the IDs or classes being used to identify the part of the page you want to modify. Try pressing the F12 key while looking at the page in your browser. If this produces a section with a magnifying glass or arrow pointer button, click that. Then highlight the area you want to inspect and click it. That should give you some idea of the elements you want to modify.

    Note: if the above doesn't work, http://getfirebug.com/ and try again.