#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    11
    Rep Power
    0

    Need help resizing background color


    Hey. I am new to this forum, but I hope to be recieved well.
    I'll be honest about my intentions - I can't promise that I will spend a whole lot of time answering questions on here, but when I have time, I will try
    Now, to the point

    I have made a dropdown menu where I change the background behind my level 1 list items on hover, but it hugs the text very, very close. I want it to give some room, and I can't seem to get there.

    I would post pictures of what I mean, but that is not permitted for new users I am afraid

    I used this code to change the background color:

    CSS Code:
    #navigate ul li:hover {
    	background-color: #322d2d;
    	border-top-right-radius: 15px;
    	border-top-left-radius: 15px;
    }
    #navigate ul li:first-child {
    	background: transparent;
    }


    (the first-child is because the first item is called "home" and I don't want that to change on hover)

    Thanks in advance
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Welcome to DevShed Forums, Anarasha.

    Did you give any padding to "#navigate ul li"? If that doesn't do it, we will need to see more of your code to be able to help you.

    As you (may have) found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    An annotated screenshot can be helpful in answering questions. However, there is also a policy that prevents users from posting attachments until they have 30 posts and have been a member for 30 days, so if needed http://imageshack.us/ can be used to host images.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    11
    Rep Power
    0
    Thank you for the warm welcome
    I thought about the solution to images you mentioned, but I was afraid it would get me banned. But here goes:

    What I get:
    i47 . tinypic . com/zk50ly.jpg

    What I want(plus the round corners of course, I just didn't add it to my 'shop):
    i50 . tinypic . com/apel21.jpg

    The padding thing I tried already, and it didn't do it I'm afraid :/
    Here is my markup code:
    HTML Code:
    <div id="navigate">
     
    <ul>
     
    <li><a href="../../index.html">Forside</a></li>
     
    <li><a href="#">Mit CV</a>
    	<ul>
    		<li><a href="cv.html">Om CVet</a></li>
            <li><a href="om_mig.html">Om mig</a></li>
            <li><a href="skolegang.html">Skolegang</a></li>
        	<li><a href="fritid.html">Fritid</a></li>
        	<li><a href="interesser.html">Interesser</a></li>
            <li><a href="kompetencer.html">Personlige kompetencer</a></li>
            <li><a href="kurser.html">Kurser</a></li>
    	</ul>
    </li>
     
    <li><a href="#">Cases</a>
    	<ul>
    		<li><a href="../cases/omkring_cases.html">Om cases</a></li>
    		<li><a href="../cases/eksempler.html">Eksempler p mit arbejde</a></li>
    		<li><a href="../cases/grafiskdesign.html">Grafisk Design</a></li>
    		<li><a href="../cases/grafiskworkflow.html">Grafisk Workflow</a></li>
    		<li><a href="../cases/typografi.html">Typografi</a></li>
    		<li><a href="../cases/grafikogbillede.html">Grafik og Billede</a></li>
    	</ul>
    </li>
     
    </ul>
     
    </div>


    And here is all the CSS related to my dropdown menu:
    CSS Code:
    #navigate li { 	
    float: left; 	
    list-style: none; 	
    position: relative; 
    } 
    #navigate ul ul { 
    position: absolute; 	
    height: 0; 	
    overflow: hidden; 	
    float: right; 	
    opacity: 0; 
    left: -25px; 	
    transition: 0.3s ease; 	
    -moz-transition: 0.3s ease; 	
    -webkit-transition: 0.3s ease; 
    } 
    #navigate ul li:hover ul { 	
    display: block; 	
    z-index: 1; 	
    background-color: #322d2d; 	
    height: auto; 	
    opacity: 1; 	left: -157px; 	
    border-bottom-left-radius: 15px; 	
    border-bottom-right-radius: 15px; 	
    text-align: right; 
    } 
    #navigate ul li:hover { 	
    background-color: #322d2d; 	
    border-top-right-radius: 15px; 	
    border-top-left-radius: 15px; 
    } 
    #navigate ul li:first-child { 	
    background: transparent; 
    }   
    #navigate ul ul li { 	
    border-bottom-width: 2px; 	
    border-bottom-color: #000; 	
    border-bottom-style: solid; 	
    width: 200px; 	
    padding: 10px; 
    } 
    #navigate ul ul li:last-child { 	
    border: none; 
    } 
    #navigate ul ul li a { 	
    font-size: 15px; 
    } 
    #navigate ul { 	
    float: right; 	
    margin-right: 10px; 
    }
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    11
    Rep Power
    0
    I put a bare essentials version of the site online as to show how the menu works.
    Nothing else works at all, and please don't judge the design - it is far, far, far, far from done :P
    www . dennis-mediegrafiker . dk/nytdesign/
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    So what does it looks like when you apply padding to the list-items?

    By the way, a <div> may not be a child of an <a> element in XHTML 1.0. If you want the links to look like blocks, simply give them "display:block".

    Also when you use prefixed properties as well as the unprefixed CSS3 property, the unprefixed one should come after the prefixed ones.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    Code:
    #navigate ul li:hover { // add padding here for left & right
    background-color: #322d2d; 
    border-top-right-radius: 15px; // delete this
    border-top-left-radius: 15px; //delete this
    }
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    11
    Rep Power
    0
    Hey and thanks for all the answers
    I managed to fix it by a small epiphany this morning - thanks to you all inspiring me.
    This fixed it:

    #navigate ul li a {
    padding-right: 5px;
    padding-left: 5px;
    }

    However, now I have a different issue. I need both my dropdowns to align along the dropdown part's right side lining up with my padding's right side. Is there any easy way to do this, or do I need to add classes and different positioning to every level 1 item?

    A classmate of mine helped me to fix this I had forgotten to add a width to the level 1 items. Doing this helped :P

IMN logo majestic logo threadwatch logo seochat tools logo