WordPress.org

Forums

[resolved] CSS help! need help in moving my navigation bar? (3 posts)

  1. janadora
    Member
    Posted 5 years ago #

    here's the link:
    http://sapatero.com/shop/?page_id=3&cate...

    I wanted to move the navigation bar(pinkish) down just above the white area for the body but i just can't seem to find what to tweak. I'm kinda new in CSS.

    here's the CSS code:

    /*
    Theme Name: Crafty Cart
    Version: 1.0.7
    Author: Billion Studio
    Author URI: http://www.billionstudio.com/
    Tags: two columns, e-commerce, shop, cart, widgets, gravatars
    Description: A Retro Shop Theme designed for the WP e-Commerce Plugin
    Licence: This theme is released under the terms of the GPL Version 2 Licence.
    */

    @import url('./style-reset.css');
    @import url('./style-common.css');

    /* Default fonts and colors
    ======================================... */
    body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,inpu... {
    color: #375362;
    font-family: "Verdana", "Lucida Fax", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
    color: #666;
    font-family: "Century Schoolbook", "Century", Georgia, "Times New Roman", serif;
    font-weight: normal;
    }

    /* LAYOUT
    ======================================... */
    body {
    font-size: 70%;
    line-height: 150%;
    background: url('images/bg-page.png') repeat-x left top;
    background-color: #FCF1D3;
    }

    div#page {
    width: 820px;
    margin: 0 auto;
    }

    div.container {
    width: 820px;
    margin: 0 auto;
    height: 100%;
    overflow: auto;
    }

    div.small {
    width: 220px;
    float: left;
    }

    div.large {
    width: 600px;
    float: right;
    }

    div.full {
    width: 100%;
    float: left;
    }

    #content div.container.body .large {
    background-color: #fff;
    padding-top: 16px;
    padding-bottom: 20px;
    }

    /* HEADER
    ======================================... */
    #header {
    width: 100%;
    margin: 0 auto;
    }

    #header .container {
    padding: 25px 0 40px;
    background: url('images/logo.png') no-repeat 3px bottom;
    }

    #header h1,
    #header h4 {
    text-transform: none;
    }

    #header h1,
    #header h4,
    #header h1 a {
    color: #666;
    }

    #header h1 {
    display: block;
    font-weight: normal;
    float: left;
    padding: 0 20px 1px 0;
    margin: 0 12px 0 0;
    width: 200px;
    text-align: left;
    }
    #header h1:first-line {
    font-weight: bold;
    }
    #header h1 a,
    #header h1 a:visited {
    display: block;
    padding-left: 30px;
    color: #4D3F44;
    text-decoration: none;
    width: auto;
    }

    #header h4 {
    font-size: 120%;
    float: right;
    letter-spacing: 1px;
    padding: 0;
    line-height: 100%;
    text-transform: uppercase;
    }

    /* SUB HEADER
    ======================================... */
    #sub-header {
    clear: both;
    width: 100%;
    margin: 0 auto;
    background-color: #DA424E;
    }
    #sub-header ul {
    padding: 6px 70px 6px 12px;
    height: 100%;
    overflow: auto;
    color: #fff;
    font-weight: bold;
    }
    #sub-header ul li {
    display: block;
    float: left;
    white-space: nowrap;
    padding: 0;
    }
    #sub-header ul li.first {
    border-left: 0;
    }
    #sub-header ul li a {
    color: #ddd;
    display: block;
    line-height: 100%;
    float: left;
    padding: 5px 10px 5px;
    }
    #sub-header ul li a:hover {
    color: #fff;
    text-decoration: none;
    }
    #sub-header ul li.current-cat a {
    color: #fff;
    text-shadow: none;
    }
    #sub-header ul li ul {
    display: none;
    }

    /* MAIN NAVIGATION
    ======================================... */
    #navigation {
    clear: both;
    width: 100%;
    margin: 0 auto;
    background: url('images/bg-nav.png') no-repeat left top;
    }
    #navigation .container {
    position: relative;
    height: 144px;
    overflow: visible;
    }
    #nav {
    position: relative;
    float: right;
    height: 42px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    z-index: 100;
    background: transparent url(images/nav-bg.gif) repeat-x left top;
    background-color: #DB4650;
    text-align: right;
    line-height: 175%;

    }
    #nav li {
    position: relative;
    float: left;
    height: 42px;
    font-size: 100%;
    }
    #nav li.last-page-item a {
    background-image: none;
    }
    #nav li a {
    display: block;
    float: left;
    background: url(images/nav-separator.gif) no-repeat right top;
    padding: 11px 12px 10px;
    color: #fff;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    text-align: left;
    }
    #nav li a:hover,
    #nav ul li a:hover,
    #nav li.current_page_item a,
    #nav li.current_page_parent a {
    color: #FFD3D4;
    }

    #nav li ul {
    position: absolute;
    visibility: hidden;
    float: none;
    top: 144px;
    left: 0px;
    width: 150px;
    margin: 0;
    padding: 5px 10px 6px 10px;
    z-index: 10000;
    border: 1px solid #C0ACB2;
    border-bottom-width: 2px;
    border-bottom-color: #AF9DA3;
    border-top: 0;
    background-color: #fff;
    opacity: 0.97;
    }

    #nav li:hover ul,
    #nav li.iehover ul {
    visibility: visible;
    }
    #nav ul li{
    display: block;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    font-size: 100%;
    line-height: 100%;
    overflow: hidden;
    white-space: normal;
    border-bottom: 1px dotted #E1DAB7;
    }
    #nav ul li:last-child {
    border-bottom: 0;
    }
    #nav

  2. esmi
    Forum Moderator
    Posted 5 years ago #

    Please don't post huge chunks of code here. For larger blocks of code, use the WordPress pastebin. It makes life easier for everyone.

    As for your site, I've just checked it in FF3 and IE8 and it looks fine. Did you manage to sort the CSS problem out?

  3. janadora
    Member
    Posted 5 years ago #

    yes, sorry for the code chunk. ^_^

Topic Closed

This topic has been closed to new replies.

About this Topic