Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Location
    Waterford, NY
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigation Background style flows into other elements?

    I feel that this should be a rather simple answer, and something I am just overlooking. But I have been working within the wordpress header.php file and though the background for the navigation bar displays appropriately I cannot figure out why it flows into other design elements on the site. This is particularly evident in the shop page. I am assuming I am missing some form of stop command in the style section. Although this is hardly the finished design, I am looking to solve this issue before attempting to move forward with the custom navigation bar.

    Any advice on where to look for this issue would be greatly appreciated. I have added the URL below rather than try to post all of the code elements which apply into this topic.

    URL - runeworksgames.com/shop

    Thank you in advance for any assistance.

  • #2
    New to the CF scene
    Join Date
    Jul 2014
    Location
    Waterford, NY
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The only way I saw to manage this through the style was to use <style scoped> are there any drawbacks to utilizing this sort of coding, or is there a better way?

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,714
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Before answering I have a couple of things....
    Do you need all the ../ in url(../../../Runeworks_Images/Nav_Bar_Back.jpg);???

    I corrected some things in the HTML

    Code:
    <ul>
    <li><a href="/">HOME<a></li> <!--             CHANGE TO <li><a href="/">HOME</a></li>  -->
    <li><a href="aboutus">ABOUT</li> <!--             CHANGE TO <li><a href="aboutus">ABOUT</a></li>  -->
    <li><a href="forum">FORUMS</a></li>
    </ul>
    and
    Code:
    	<div id="header" class="column span-14">
    		<div id="logo" class="column first">
    		<a href="https://runeworksgames.com/" title="Coming Soon to Upstate N.Y.">
    <img src="../../../Runeworks_Images/logo_transp.png";" alt="Runeworks Games" /><!--  CHANGE TO    <img src="Runeworks_Images/logo_transp.png"  alt="Runeworks Games" />   YOU MIGHT NEED ../ BUT ONLY ONE-->
    		</a>
    		</div>
    	</div>
    ok ANSWER:
    Remove:
    Code:
    ul {
    	//background: url(Runeworks_Images/Nav_Bar_Back.jpg); /* I took the intro off and used a base of http://runeworksgames.com/ */
    	list-style-type: none;
    	margin: 0;
    	overflow: hidden;
    }
    And add this:
    Code:
    #navigation-bar{
    	background: url(Runeworks_Images/Nav_Bar_Back.jpg); /* YOU MIGHT NEED ../ BUT ONLY ONE */
    }
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Jul 2014
    Location
    Waterford, NY
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Apparently the additional "../" were not needed, I was going off of information which stated that you needed to utilize one sequence for every directory you needed to move up towards the element identified.

    And just to clarify, where does the line of code at the end of you post get inserted. And so that I have a better understanding, is that the proper way to point to a specific div id in order to make changes only to that property?

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,714
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Yes #navigation-bar is the correct way to point to anything that has that id, a div, a form, anything. Just remember that an ID is unique and can be used only once in a document unlike a class which can be use over and over.
    What I gave you was a CSS selector. After you delete the ul rule just put it under the last selector in the CSS section.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,714
    Thanks
    25
    Thanked 660 Times in 659 Posts
    In your header you have:
    Code:
    <style type="text/css" id="custom-background-css">
    body.custom-background { background-color: #07467c; }
    </style>
    Remove the id="custom-background-css"part and move the style section you have in the body to it.
    The body CSS section:
    Code:
    <style> 
    ul {
    background: url(../../../Runeworks_Images/Nav_Bar_Back.jpg);
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    }
    
    li {
    	float: left;
    display: inline;
    padding-right: 2px;
    }		
    </style>
    Make it one file with the changes listed above:
    Code:
    <style type="text/css">
    body.custom-background { background-color: #07467c; }
    ul {
    	list-style-type: none;
    	margin: 0;
    	overflow: hidden;
    }
    
    li {
    	float: left;
    	display: inline;
    	padding-right: 2px;
    }
    #navigation-bar{
    	background: url(../Runeworks_Images/Nav_Bar_Back.jpg);
    }
    </style>
    Apparently the additional "../" were not needed, I was going off of information which stated that you needed to utilize one sequence for every directory you needed to move up towards the element identified.
    They were referring to the dots only.
    ./ means this directory and is the fastest way to id it.
    ../ is one directory up.
    .../ is one more up.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •