Solved

Trying to remove the auto padding that an ul and li is placing between ul's

Posted on 2008-06-25
7
1,034 Views
Last Modified: 2012-08-13
I have three unordered lists essentially stacked on top of one another. I want to remove the padding between these three unordered lists so that there is maybe 5px between them instead of the 50 that is defaulting in here.

I have tried adding padding: 0; to each ul and li class but that is not working. Any suggestions?

Thanks

<style type="text/css">

<!--

#brandcontainer {

	width: 950px;

	padding-right: 5px;

	padding-left: 5px;

	text-align:center;

}

ul#brandlist

{

padding: 0 0 0 0;

white-space: nowrap;

}
 

#brandnavlist li

{

display: inline;

list-style: none;

font-family:Arial, Helvetica, sans-serif;

font-weight:bold;

padding:0 0 0 0;

}
 

#brandnavlist a { padding: 0 10px 0 0; }
 

#brandnavlist a:link, #navlist a:visited

{

color: #666;

text-decoration: none;

}
 

#brandnavlist a:hover

{

color: #fff;

background-color: #cc0000;

text-decoration: none;

}

-->

</style>

<div><img src="content/images/2008/SPLASH-landing.jpg" width="960" height="360"></div>

<div id="brandcontainer">

	<ul id="brandnavlist" style="font-size:32px;">

		<li><a href="#">ELEMENTS</a></li>

		<li><a href="#">VISION STREET</a></li>

		<li><a href="#">VOX</a></li>

		<li><a href="#">QUICKSILVER</a></li>

		<li><a href="#">ADIDAS</a></li>

	</ul>

    <ul id="brandnavlist" style="font-size:25px;">

		<li><a href="#">ELEMENTS</a></li>

		<li><a href="#">VISION STREET</a></li>

		<li><a href="#">VOX</a></li>

		<li><a href="#">QUICKSILVER</a></li>

		<li><a href="#">ADIDAS</a></li>

        <li><a href="#">PONY</a></li>

        <li><a href="#">VOX</a></li>

	</ul>

    <ul id="brandnavlist" style="font-size:17px;">

		<li><a href="#">ELEMENTS</a></li>

		<li><a href="#">VISION STREET</a></li>

		<li><a href="#">VOX</a></li>

		<li><a href="#">QUICKSILVER</a></li>

		<li><a href="#">ADIDAS</a></li>

        <li><a href="#">VOX</a></li>

		<li><a href="#">QUICKSILVER</a></li>

		<li><a href="#">ADIDAS</a></li>

        <li><a href="#">ELEMENTS</a></li>

	</ul>

</div>

Open in new window

0
Comment
Question by:macegruvy
  • 5
  • 2
7 Comments
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
ID: 21870270
Add this as the first CSS style:

* {
 margin: 0;
 padding: 0;
}

Thanks,
Brad
0
 

Author Comment

by:macegruvy
ID: 21870294
OUTSTANDING. Thanks bdobyns, I was unaware you could * (wildcard) styles. nice.
0
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
ID: 21870293
If you do that, then you should be able to have it do what you want:
<div><img src="content/images/2008/SPLASH-landing.jpg" width="960" height="360"></div>

<div id="brandcontainer">

        <ul id="brandnavlist" style="font-size:32px;margin-bottom: 5px;">

                <li><a href="#">ELEMENTS</a></li>

                <li><a href="#">VISION STREET</a></li>

                <li><a href="#">VOX</a></li>

                <li><a href="#">QUICKSILVER</a></li>

                <li><a href="#">ADIDAS</a></li>

        </ul>

    <ul id="brandnavlist" style="font-size:25px;margin-bottom: 5px;">

                <li><a href="#">ELEMENTS</a></li>

                <li><a href="#">VISION STREET</a></li>

                <li><a href="#">VOX</a></li>

                <li><a href="#">QUICKSILVER</a></li>

                <li><a href="#">ADIDAS</a></li>

        <li><a href="#">PONY</a></li>

        <li><a href="#">VOX</a></li>

        </ul>

    <ul id="brandnavlist" style="font-size:17px;">

                <li><a href="#">ELEMENTS</a></li>

                <li><a href="#">VISION STREET</a></li>

                <li><a href="#">VOX</a></li>

                <li><a href="#">QUICKSILVER</a></li>

                <li><a href="#">ADIDAS</a></li>

        <li><a href="#">VOX</a></li>

                <li><a href="#">QUICKSILVER</a></li>

                <li><a href="#">ADIDAS</a></li>

        <li><a href="#">ELEMENTS</a></li>

        </ul>

</div>

Open in new window

0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
ID: 21870296
Yep. Makes things work much better. :o)
0
 
LVL 7

Accepted Solution

by:
Brad Dobyns, CSM earned 250 total points
ID: 21875480
If you are satisfied with the answer, would you please go ahead and close the question? :o)

Thanks,
Brad
0
 

Author Closing Comment

by:macegruvy
ID: 31470742
Apologies. I thought I closed this out last night. Thanks again.
0
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
ID: 21875617
No problem. Thanks for the points. :o)

Brad
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now