Skip navigation
Currently Being Moderated

how to get padding background coloured

Feb 1, 2014 9:33 PM

Tags: #help #dreamweaver #link

I'm still working on my site. The nav bar works fine now, it centers perfect.

What i now need an answer for is that I set a class for 'this-page' to get a color background for the nav of this page. I could get a color, but it is not full width of the box. The area of padding is not colored.

For now I set it on orange to make it clear what I mean. I want it extended to the black border.

The link is: www.hoddenbagh.nl/test

 
Replies
  • Currently Being Moderated
    Feb 2, 2014 12:06 AM   in reply to LaurensHoddenbagh

    You have padding: 0 1%; set for Block 1, 2, and so on. Because the block that contains the nav element has padding any element inside it will not extend to the full width or height.

     

    Put the padding in your a.this page like this:

     

    a.thispage {

              background-color: #E78500;

              display: block;

              padding: 1px 10px;

    }

     

    That should put you on the right track.

     

    You should also change the font color for the hover state for a.thispage so that the text doesn't match the background when you hover over your Home link....

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 1:42 AM   in reply to LaurensHoddenbagh

    Your menu html is not set up correctly, using a series of <divs> is bad practice. Replace those <divs> with a list as below:

     

     

    <!--Start Menu-->

    <div class="nav_container">

    <ul>

    <li><a href="index.html" class="thispage">Home</a></li>

    <li><a href="http://www.travelingphototeam.com">TravelingPhotoTeam</a></li>

    <li><a href="overons.html">Over Ons</a></li>

    <li><a href="bijbelopen.html">Bijbel Open</a></li>

    <li><a href="nostalgie.html">Nostalgie</a></li>

    <li><a href="contact.html">Contact</a></li>

    </ul>

    </div><!-- end nav_container -->

     

    Then replace the css below:

     

    .nav_container {

    a.thispage: #E78500}

     

    .block1,

    .block2,

    .block3,

    .block4,

    .block5,

    .block6

    {

    width: auto;

    display: inline-block;

    padding: 0 1%;

    border: 1px solid #000000;

    margin-left: 1%;

    margin-right: 1%;

    }

     

    with:

     

    .nav_container ul {

        margin: 0;

        padding: 0;

    }

     

    .nav_container li {

        margin: 0;

        padding: 0;

        list-style: none;

        display: inline;

    }

     

    .nav_container a {

    display: inline-block;

    text-decoration: none;

    padding: 0.5% 1%;

    border: 1px solid #E78500;

    color: #999;

    }

     

    .nav_container a:hover {

    color: #E78500;

    }

     

    /* Page marker css */

    .nav_container a.thispage {

    background-color: #E78500;

    color: #fff;

    }

     

     

     

    Finally get rid of the css below from your stylesheet which is at the end of your main css styles and before the tablet css styles begin.

     

    a.thispage {

    background-color: #E78500;

    display: block;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 4:15 AM   in reply to LaurensHoddenbagh

    Change a.thispage to div.thispage and change the markup to

    <div class="block1 thispage"><a href="index.html">Home</a></div>

    PS. Waar zijn de fotos van ons Australië

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 11:28 AM   in reply to LaurensHoddenbagh

    LaurensHoddenbagh wrote:

     

    Thank you Osgood...

    I used your advice. Initially I setup the navbar like this, but because I couldn't get it centered I tried div's.

    BTW in your solution the center option, provided by Nancy, was not included, but I did it myself. Learning all the time.

     

    I never suggested in my solution that you should delete this css selector

     

    .nav_container {

    width: 100%;

    text-align: center;

    }

     

     

    LaurensHoddenbagh wrote:

     

    As you can see in the test site, I added a link for the English version of this site (which will be online when this Dutch site is ready). What I would like is that instead of the words 'English Site' there is a picture of a flag. Is that possible?

     

    Just replace the word 'English Site' with an image of a flag

     

     

    <li><a href="http://www.hoddenbagh.nl/english"><img src="englishFlag.gif" width="xxx" height="xxx" alt="English Site"></a></li>

     

    Although that most probably isnt going to look that great. Personally I would put the flag icon in the top right corner of the page maybe.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2014 12:12 PM   in reply to LaurensHoddenbagh

    LaurensHoddenbagh wrote:

     

     

    When I see the result I prefer to have the flag button floated to the right at the edge of the navigator container. Is that possible?

    Thanks for the help!

     

    I said I didn't think it would be pretty.

     

    Delete the <li></li>tag which contains the flag image.

     

    Create a <div> for the flag as below and insert it directy after the - <div class="nav_container">

     

    So your code now looks like:

     

    <!--Start menu-->

    <nav class="fluid nav_container">

    <div class="nav_container">

    <div id="englishSite"><a href="http://www.hoddenbagh.nl/english"><img src="http://www.hoddenbagh.nl/test/images_png/US-UK flag.gif" width="50" height="25" alt="English Site"></a></div><!-- end englishSite -->

     

     

    Add position: relative; to the .nav_container css selector:

     

     

    .nav_container {

        position: relative;

    }

     

     

    Then include these additional css selectors for the flag <div>

     

    #englishSite {

    position: absolute;

    top: 0;

    right: 0;

    width: 50px;

    }

    #englishSite a {

    border: none;

    }

    #englishSite a img {

    border: none;

    }

     

    NOW the only problem with that is once the browser viewport gets narrower the flag image will encroach onto your navigation. This is where you have to make decisons. Once the design starts to break down you need to use the media queries to put things right. You can hide the main menu and replace it with a responsive one which takes up less real-estate or you can reposition the flag somewhere else on the page.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points