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 5 of 5
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Unwanted styling wont go away !!!

    Hi,

    I must be missing something, but I can not see it

    In my HTML code I have a little navigation box like this:


    Code:
    <div class="cats">Resources</div>
    <nav>
      <ul>
        <li><h3>1&nbsp; <a href="http://villarentfethiye.simpg.net/Vacation-Villas-Fethiye-Rental-p9.html">Vacation Villas Fethiye Rental</a></h3><BR></li>
        <li><h3>2&nbsp; <a href="http://villarentfethiye.simpg.net/Vacation-Villa-Trekking-Turkey-p10.html">Vacation Villa Trekking Turkey</a></h3><BR></li>    
        <li><h3>3&nbsp; <a href="http://villarentfethiye.simpg.net/Trekking-Villa-Turkey-p11.html">Trekking Villa Turkey</a></h3><BR></li>
        <li><h3>4&nbsp; <a href="http://villarentfethiye.simpg.net/Windsurfing-Holiday-Fethiye-p12.html">Windsurfing Holiday Fethiye</a></h3><BR></li>
        <li><h3>5&nbsp; <a href="http://villarentfethiye.simpg.net/Book-Rental-Villa-in-Fethiye-p13.html">Book Rental Villa in Fethiye</a></h3><BR></li>
     </ul>
    </nav>

    And the CSS is like this:

    Code:
    	
    nav, section.newsletter{
    	display:block;
    	float:right;  
    	width:220px;
    	margin:-22px 0 0 10px;
    	}
    	
    nav, section.newsletter ul {
    	margin-bottom:20px;
    	padding:20px 10px;
    	list-style: none; 
    	list-style-type: none;
    	border:1px solid #AAA;
    	border-radius:12px;
    	-moz-border-radius:12px;
    	-webkit-border-radius:12px;
    	background:#FFF;
    	}
    
    nav, section.newsletter ul li {
    	margin:5px 5px;
    	padding:0 0;
    	position:relative;
    	}
    I have tried to stop the display of
    dots and numbers with the:
    list-style: none;
    list-style-type: none;


    But, they still show... as you can see here:



    And this is the live page:

    My page

    ( where you can see all the CSS )

    What have I done wrong ???

    Thanks.


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    122
    Thanks
    0
    Thanked 25 Times in 25 Posts
    The way i was able to remove your bullet points was to add the following css (Hope this helps):
    Code:
    li{
    list-style-type:none;
    }
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    	
    li{
    list-style-type:none;
    }
    nav, section.newsletter{
    	display:block;
    	float:right;  
    	width:220px;
    	margin:-22px 0 0 10px;
    
    	}
    	
    nav, section.newsletter ul {
    	margin-bottom:20px;
    	padding:20px 10px;
    
    	border:1px solid #AAA;
    	border-radius:12px;
    	-moz-border-radius:12px;
    	-webkit-border-radius:12px;
    	background:#FFF;
    
    	}
    
    nav, section.newsletter ul li {
    	margin:5px 5px;
    	padding:0 0;
    	position:relative;
    
    	}
    
    </style>
    
    <script>
    
    </script>
    </head>
    <body>
    
    <div class="cats">Resources</div>
    <nav>
      <ul>
        <li><h3>1&nbsp; <a href="http://villarentfethiye.simpg.net/Vacation-Villas-Fethiye-Rental-p9.html">Vacation Villas Fethiye Rental</a></h3><BR></li>
        <li><h3>2&nbsp; <a href="http://villarentfethiye.simpg.net/Vacation-Villa-Trekking-Turkey-p10.html">Vacation Villa Trekking Turkey</a></h3><BR></li>    
        <li><h3>3&nbsp; <a href="http://villarentfethiye.simpg.net/Trekking-Villa-Turkey-p11.html">Trekking Villa Turkey</a></h3><BR></li>
        <li><h3>4&nbsp; <a href="http://villarentfethiye.simpg.net/Windsurfing-Holiday-Fethiye-p12.html">Windsurfing Holiday Fethiye</a></h3><BR></li>
        <li><h3>5&nbsp; <a href="http://villarentfethiye.simpg.net/Book-Rental-Villa-in-Fethiye-p13.html">Book Rental Villa in Fethiye</a></h3><BR></li>
     </ul>
    </nav>
    
    
    
    </body>
    </html>
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thanks.

    I'll try a bit more.


    OK .. NOW if it works like this:

    Code:
    li {
    	list-style-type: none;
    	}
    Why isn't it working like this:

    Code:
    nav, section.newsletter ul li {
    	margin:5px 5px;
    	padding:0 0;
    	position:relative;
    	list-style: none; 
    	list-style-type: none;
    	}

    ???

    Is there something wrong with : nav, section.newsletter ul li


    .
    Last edited by jeddi; 06-10-2013 at 08:42 AM.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #4
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    OK

    So that must be the problem ... trying assign the same
    parameters to 2 type of tag.

    Because when I do this, it works fine ..

    Code:
    nav ul li {
    	margin:5px 5px;
    	padding:0 0;
    	position:relative;
    	list-style-type: none;
    	}




    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #5
    Regular Coder
    Join Date
    Aug 2012
    Posts
    122
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Now that i look at your code a little bit closer i see your original code has no class called to it (specific to your CSS):
    Code:
    <div class="cats">Resources</div>
    <nav>
      <ul>
        <li><h3>1&nbsp; <a href="#">Vacation Villas Fethiye Rental</a></h3><BR></li>
        <li><h3>2&nbsp; <a href="#">Vacation Villa Trekking Turkey</a></h3><BR></li>    
        <li><h3>3&nbsp; <a href="#">Trekking Villa Turkey</a></h3><BR></li>
        <li><h3>4&nbsp; <a href="#">Windsurfing Holiday Fethiye</a></h3><BR></li>
        <li><h3>5&nbsp; <a href="#">Book Rental Villa in Fethiye</a></h3><BR></li>
     </ul>
    </nav>
    But your CSS has class call outs such as
    Code:
    nav, section.newsletter{
    	}
    	
    nav, section.newsletter ul {
    	}
    
    nav, section.newsletter ul li {
    	}
    You don't call out any classes...it should work as this:
    Code:
    <section  class="newsletter">
    <nav>
      <ul>
        <li><h3>1&nbsp; <a href="#">Vacation Villas Fethiye Rental</a></h3><BR></li>
        <li><h3>2&nbsp; <a href="#">Vacation Villa Trekking Turkey</a></h3><BR></li>    
        <li><h3>3&nbsp; <a href="#">Trekking Villa Turkey</a></h3><BR></li>
        <li><h3>4&nbsp; <a href="#">Windsurfing Holiday Fethiye</a></h3><BR></li>
        <li><h3>5&nbsp; <a href="#">Book Rental Villa in Fethiye</a></h3><BR></li>
     </ul>
    </nav>
    </section>
    Last edited by Brandnew; 06-10-2013 at 06:23 PM.
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?


  •  

    Posting Permissions

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