I have a footer, which has a horizontal menu.
CSS
footer {
height:99px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 20px;
padding-top:26px;
}
li {
float:right;
width:8%;
}
I want to make it so that when I make other menus, the css for the footer menu won't affect it. What would be an effective method for this? The html is just a basic <footer> tag.
In this case, you can use descendant relationship, where you say apply the style to ul elements which comes inside a footer element.
footer {
height:99px;
}
footer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 20px;
padding-top:26px;
}
footer ul li {
float:right;
width:8%;
}
If you want to be more specific(if you might have multiple footer elements in the page) you can assign a class to the footer like myfooter then use the class selector also like
footer.myfooter {
}
footer.myfooter ul {
}
footer.myfooter ul li {
}
Have a look st the different CSS selctors
Related
I want to create a custom class that controls both the space between list item and the space after the final item.
I have accomplished the first, but I can't figure out the second. Here's the code I'm trying:
/*Custom long list styles*/
.long-list ul {
margin-bottom: 9px;
}
.long-list li {
margin-bottom: 2px;
}
The LI code works, but the UL code does nothing. The bottom margin ends up being whatever I set the LI to — in this case, 2px.
If you don't want your last <li> to have a margin:
li:not(:last-child) {
margin-bottom: 2px;
}
Or if you need a specific margin for it:
li {
margin-bottom: 2px;
}
li:last-child {
margin-bottom: XXpx;
}
I am having some problems with my CSS external style sheet. I am trying to make a unordered list into navigation bar. I am attempting to do this by adding multiple styles to my navbar div but none of the changes are having any effect on the page when they are inside the navbar div.
#navbar{
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
}
Thanks in advance
You can't nest them like that, try this:
The space between tags/identifiers means the right option is inside the left.
#navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar ul li {
display: inline;
}
The syntax you're currently using is only valid if you're using the Sass/SCSS preprocessor. While Sass is super-awesome, you'd probably be better off using vanilla CSS for now to build a solid CSS foundation. But whenever you want to get some exposure to Sass, check out their docs here: http://sass-lang.com/guide.
In the meantime, this should work for you:
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar li {
display: inline;
}
I know it's a dumb question but I couldn't find a solution myself. I have two lists in my HTML page. First one is :
<ul id="menu">
<li><a href='#Url.Action("MainPage","Shirts")'>Main Page</a></li>
<li><a href='#Url.Action("OnSale","Shirts")'>On Sale</a></li>
<li><a href='#Url.Action("Recent","Shirts")'>Recent</a></li>
</ul>
The second one is a PagedListPager which generates an HTML list :
#Html.PagedListPager(Model, page => Url.Action("Mainpage",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
This is my CSS for this HTML :
ul {
list-style-type:none;
margin:0;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
li a {
display:block;
min-width:140px;
}
li:hover a {
background: #19c589;
}
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
}
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
}
My problem is that, I want my CSS to work for only the first list, not the second one. I know I need to add a class for first list's elements and edit CSS for that class. But I couldn't do it. I don't know what to do for li ul li a in CSS. Can you tell me how to edit CSS and first list in this case? Thanks.
Try:
#menu > li {
display:inline-block;
float: left;
margin-right: 1px;
}
#menu > li a {
display:block;
min-width:140px;
}
You can use CSS3 child selectors to select specific properties:
ul li a { /* shared styles */ }
ul > li > a { /* parent list styles */ }
ul ul > li > a { /* child list styles */ }
https://css-tricks.com/child-and-sibling-selectors/
You say you have two lists on your page (so two ul elements). And you only want to apply certain css to the first list without using a class or id selector.
You can use the first-of-type pseudo selector, like so:
ul:first-of-type { }
And to apply the css to its children:
ul:first-of-type li { }
According to Can I use this is pretty well supported (unless you need IE8 support).
I am going nuts, what am I missing, something obvious I am sure, to make my nav buttons stack next to each other inline and not on top of each other. When I tried using display: inline they all got real tiny like slivers!
http://awesomenesslabs.com/staging/brenna-resp/
Just change your UL and LI CSS to this:
ul {
list-style: none outside none;
display: block;
}
li {
line-height: 18px;
margin-bottom: 12px;
display: inline-block;
}
#navbar > ul > li {
display: inline-block;
}
You should add a class like this.
#navbar ul li {
display: inline-block;
}
and your work tab hover position should be
.nav-work-button:hover {
background-position: 0 -47px;
}
I'm in the process of making my own blog, I haven't got a domain yet so it's not live(I've been building the site from a folder with different directories as the pages). I've been working on the blog and I was looking for a simple navigation menu. I found one on the internet. I'm trying to center the navigation bar and I've tried many solutions that worked for other peoples websites but it isn't working for mine. This is the code (I've tweaked it to my own colors and nav titles)
<ul id="list-nav">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
And this is the CSS:
ul.list-nav {
list-style:none;
width:525px;
margin-right: auto;
margin-left: auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
"Help me Obi Wan Kenobi your my only hope!"
Your first CSS selector is looking for a ul with a class of list-nav, not an id of list-nav. Change your first CSS rule to:
ul#list-nav {
padding: 0;
margin: 0;
list-style: none;
width: 525px;
margin: 0 auto;
}
And your navigation bar is magically centered. Please see this jsFiddle for a working demonstration > http://jsfiddle.net/TLaN5/. Obviously you'll need to amend the width of the parent ul in order to accomodate the correct width of the elements within, but you should get the idea.
I would wrap the entire page inside <div class="wrap">. You have declared margin twice in the code, so I would remove the first occurrence and leave it like:
ul#list-nav {
padding: 0;
list-style: none;
width: 725px; //NOTE I have increased the width value.
margin: 0 auto;
}
Also, find
ul {
display: inline;
text-decoration: none;
color: black;}
[around line 20] and remove display: inline; rule. This should fix your issues. Check the live example here.
You can give a define size to the ul and center its content (remove the display-inline, indeed)
ul {
width: 960px;
margin: 0 auto;
text-align: center;
}
Then display the child li elements as inline blocks :
ul li {
display: inline-block;
}
The inline-block property won't work in ie7, so check your browser targets first...
Another way is to just use the good ol'
ul li {
float: left;
}
ul:after {
display: block;
content: "";
clear: both;
}
But the li won't be centered within the ul and you'll have to use javascript if you absolutely want to do this dynamically (without assigning a fixed with to each li).