Navigation Problems

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Please check the following code and reply me any errors found.

navigation{
backround: url('resources/Navigation.jpg') no repeat;
}



  • Home

  • About Us

  • Sign Up

  • Directions

  • Conatact Us



  • I created simple navigation to my site by above code with backround. But it doesn't work for me. Pleae help me...
    Photo of Mohamed Shifreen

    Mohamed Shifreen

    • 7 Posts
    • 0 Reply Likes
    • very sad

    Posted 9 years ago

    • 1
    Photo of Sanja

    Sanja, Official Rep

    • 10698 Posts
    • 495 Reply Likes
    Hello Mohamed

    I don't believe your code completely showed up. Can you please try pasting your code again using either http://forsite.synthasite.com/encoder... to encode your code or using <!-- your code goes in here -->

    It would also be helpful if you could please post your site URL so that we can take a look at what has been done so far.
    Photo of Mohamed Shifreen

    Mohamed Shifreen

    • 7 Posts
    • 0 Reply Likes
    Sorry for above post. That was my 1st post, now only I undestand how to post html codes.
    Please check the following code and reply me any errors found.

    <style type="text/css">
    #navigation{
    color: rgb(0, 0, 255);
    backround: url('resources/Navigation.jpg');
    }
    </style>

    <div id="navigation">
    <ul>
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255)"; href="http://www.qs11forum.com/index.php&qu...;
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255)"; href="http://www.qs11forum.com/about-us.php... Us</a></li>
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255)"; href="http://www.qs11forum.com/sign-up.php&... Up</a></li>
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255)"; href="http://www.qs11forum.com/directions.p...;
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255)"; href="http://www.qs11forum.com/contact-us.p... Us</a></li>
    </ul>
    </div> <!-- end of navigation div -->

    I created simple navigation to my site by above code with backround. But it doesn't work for me. Pleae help me...
    Photo of Sanja

    Sanja, Official Rep

    • 10698 Posts
    • 495 Reply Likes
    Hello Mohamed

    Hmm.. I believe you need more css rules - specifically for your li tags. They don't have any defined rules on telling them how to behave.

    You may want to check out this CSS Menu generator: http://www.cssmenumaker.com/
    Photo of Mohamed Shifreen

    Mohamed Shifreen

    • 7 Posts
    • 0 Reply Likes
    I found a navigations for my site in your above link. I downloaded too. But i dont know how to use it's css style sheet to my site. Please help me for add a style sheet to the html widget and point out how to give a location of images that i have uploaded to the filemanager.

    Thanks for above usefull link.
    Photo of Sanja

    Sanja, Official Rep

    • 10698 Posts
    • 495 Reply Likes
    Hello Mohamed

    CSS files are uploaded to the "Resource" folder of your site. However, your custom styles are not auto-loaded for you. You will need to add them with the HTML widget.

    e.g.:

    <!--<link href="resources/your-custom-style.css" rel="stylesheet" type="text/css" media="screen" />-->

    * Please do not include the <!-- and -->
    * Replace "your-custom-style.css" with the name of your css file.

    You would add that snippet of code in the HTML Widget.

    Your images would also be "resources/yourimagefilename.jpg"

    You will need to alter this first on the CSS style sheet before uploading to your File Manager.

    Please let me know how this goes.
    Photo of Mohamed Shifreen

    Mohamed Shifreen

    • 7 Posts
    • 0 Reply Likes
    Okay! I done above steps as well. But backround image for my navigation is not displaying. You can see here - www.qs11forum.com
    Please help me.
    Photo of Sanja

    Sanja, Official Rep

    • 10698 Posts
    • 495 Reply Likes
    Hi Mohamed

    Is it possible for you to display the CSS code here? Then I can take a look at why your image is not showing up.
    Photo of Mohamed Shifreen

    Mohamed Shifreen

    • 7 Posts
    • 0 Reply Likes
    Here is my css style -
    #navigation {
    background-position:center;
    background-image:url(resources/Navigation.jpg) repeat-y;
    height:200px;
    width:150px;
    }

    Here is my html -
    <link href="navigation.css" rel="stylesheet" type="text/css" media="screen">
    <div id="navigation">
    <ul>
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255); font-size: medium;"; href="http://www.qs11forum.com/index.php&qu...;
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255); font-size: medium;"; href="http://www.qs11forum.com/about-us.php... Us</a></li>
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255); font-size: medium;"; href="http://www.qs11forum.com/sign-up.php&...;
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255); font-size: medium;"; href="http://www.qs11forum.com/directions.p...;
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255); font-size: medium;"; href="http://www..qs11forum.com/blog.php&qu...;
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255); font-size: medium;"; href="http://www.forum.qs11forum.com&quot;&...;
    <li style="color: rgb(0, 0, 255);"><a style="color: rgb(0, 0, 255); font-size: medium;"; href="http://www.qs11forum.com/contact-us.p... Us</a></li>
    </ul>
    </div>

    Tell me what's wrong in these codes?

    Thank you!
    Photo of Sanja

    Sanja, Official Rep

    • 10698 Posts
    • 495 Reply Likes
    Hello Mohamed

    I see that in your HTML section, you have the following:

    link href="navigation.css"

    this most likely needs to be changed to: link href="resources/navigation.css"

    Can you please give that a try?

    If you are still having some trouble, would you mind posting your URL to the page where you're trying to set this up?

    I'm sure that we're nearly there!
    Photo of Mohamed Shifreen

    Mohamed Shifreen

    • 7 Posts
    • 0 Reply Likes
    Hello Sanja!

    I am sorry to say, your last idea also not working and still same problem. Image doesn't display.

    Anyway thank you very much for your help!
    Photo of Sanja

    Sanja, Official Rep

    • 10698 Posts
    • 495 Reply Likes
    Hello Mohamed

    Can you please post your URL? I'd like to take a look at what's going on. If you're not comfortable with this, can you please send me an email to support@yola.com? I'm confident that we will get this working! I encourage you not to give up!
    Photo of Mohamed Shifreen

    Mohamed Shifreen

    • 7 Posts
    • 0 Reply Likes
    www.qs11forum.com
    I already posted my URL above my 4th post.
    Photo of Sanja

    Sanja, Official Rep

    • 10698 Posts
    • 495 Reply Likes
    Sorry Mohamed

    I couldn't see it before!

    It still does not seem like you have the entire CSS code. Can you please let me know which navigation you are using in the CSS generator? Did you upload your CSS file from the CSS generator? It appears that you are using the same code as the in the beginning of the thread. Your code should look something like this in your CSS file.

    /* V2 */

    .outer{
    margin:0px;
    padding:0px;
    }
    #menu {
    width: 200px;
    border-style: solid solid none solid;
    border-color: #94AA74;
    border-size: 1px;
    border-width: 1px;
    }
    #menu ul{
    list-style:none;
    padding:0px;
    margin:0px;
    }

    #menu li a {
    height: 32px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 24px;
    text-decoration: none;
    font-weight:normal;
    }

    #menu li a:link, #menu li a:visited {
    color: #5E7830;
    display: block;
    background: url(images/menu1.gif);
    background-repeat:no-repeat;
    padding: 8px 0 0 10px;
    }

    #menu li a:hover {
    color: #26370A;
    background: url(images/menu1.gif) 0 -32px;
    background-repeat:no-repeat;
    padding: 8px 0 0 10px;
    }

    #menu li a:active {
    color: #26370A;
    background: url(images/menu1.gif) 0 -64px;
    background-repeat:no-repeat;
    padding: 8px 0 0 10px;
    }
    Photo of Nazlie

    Nazlie

    • 9 Posts
    • 0 Reply Likes
    Hi Mohamed

    Try adding quotation marks around the url in background-image. It should look like this:

    background-image:url('resources/Navigation.jpg') repeat-y;

    Your image should display now.

    Take care
    Nazlie