Ok, so i have an unordered list with a background applied to it.
I also have list items with classes so
i can specify the width of each one individually.
Why can i not see the changes like width i added to the classes on each list?
although i do see it in Dreamweaver design view.
<ul id="graph">
<li class="1"><span>HTML</span></li>
<li class="2"><span>CSS</span></li>
<li class="3"><span>Javascript</span></li>
<li class="4"><span>SEO</span></li>
<li class="5"><span>Photoshop</span></li>
</ul>
#graph li {
list-style-type: none;
display: block;
background-image: url(../img/graph_bg.gif);
background-repeat: repeat-x;
margin-top: 20px;
}
#graph li .1 {
height: 35px;
display: block;
width: 85%;
}
etc , etc
I believe that 1, etc are not valid class names. I suspect they need to start with a letter.
Edit: on an unrelated note, is there any reason why you have <span> tags inside the <li> tags?
Related
I have just started learning about web development and I'm having some issues. In the website that I am currently creating I have a navigation menu. However, I also have other ul and li elements throughout the main content of the web page. I have been trying to get certain styles to apply to just my navigation bar and not the bulleted lists in my content but no matter what I try, I either get the styles on both my navigation and the content or on none. I have looked on google and a lot of different websites, I have tried having the .navigation and # in front of my styles but nothing seems to be working. I must be doing something wrong somewhere but I have no idea what it could be. If someone could help that'll be wonderful! The following is my navigation barcode:
<div id=navbar">
<ul>
<li>
Home
</li>
<li>
About Volleyball
</li>
<li>
Sign-Up
</li>
<li>
Announcements
</li>
<li>
Contact Us
</li>
<li>
Links
</li>
</ul>
</div>
and these are the styles on my separate css style sheet that I wish to apply to just the above code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4da6ff;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 75px;
text-decoration: none;
}
li a:hover {
background-color: #80bfff;
}
You can simply select only elements which are children of you navbar by prepending your selectors with #navbar which selects the element with the id navbar and the selectors after that will only search in its children:
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4da6ff;
}
#navbar li {
float: left;
}
#navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 75px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #80bfff;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>About Volleyball</li>
<li>Sign-Up</li>
<li>Announcements</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</div>
<ul>
<li>No styles applied</li>
<li>No styles applied</li>
</ul>
In your .css file you can create classes to use across elements.
Try this in the .css file.
.hello {
color: blue;
text-align: center;
}
Then try this in your html
<h1 class="hello">Hello World</h1>
This will apply the style defined in the .css file to the element with the class "hello".
More information about classes can be found here: https://www.w3schools.com/cssref/sel_class.asp
If you want to add style to any specific element then you can add CSS code to that specific element like: for tag you can use p{color:red} OR by using class: p.my-element{color:red} or using ID: p#{color red}
You are in your initial phase of learning development. So read and write your own code.
Look into id's and classes.
This will allow you to style elements seperately.
I have my horizontal navigation, and one of the links has a dropdown menu. I'm having trouble removing my the vertical scrollbar from my horizontal navigation. Because of this, you have to scroll down to see the dropdown. If I remove the scrollbar, you cannot see the dropdown menu. I've tried to set a height, tried different overflow settings, even z-index.. nothing has worked.
https://jsfiddle.net/83qgv1nb/
nav.mainNav {
margin: 0;
padding: 0;
width: 75%;
float: right;
display: block;
overflow: auto;
}
ul.menu {
margin: 0;
padding: 0;
height: 100px;
overflow-y: visible;
}
li.item {
margin: 0;
padding: 0;
height: 100px;
width: 16%;
position: relative;
float: left;
list-style-type: none;
}
a.navLink {
margin: 0;
padding: 0;
display: block;
text-align: center;
line-height: 95px;
text-decoration: none;
font-weight: bold;
}
<nav class="mainNav">
<ul class="menu">
<li class="item">
About
<ul class="sub_menu">
<li class="sub_item">
Location
</li>
<li class="sub_item">
History
</li>
<li class="sub_item">
Community Involvement
</li>
<li class="sub_item">
Leadership
</li>
</ul>
</li>
<li class="item">Services</li>
<li class="item">Projects</li>
<li class="item">Blank</li>
<li class="item">Blank</li>
<li class="item">Contact</li>
</ul>
</nav>
1st you should remove your
.mainNav{
...
overflow:auto"
...
}
This is clearly what makes your menu "scrollable"!
Here, your "submenu" is always visible... If you're looking for a way to show/hide your submenu then You should use "bootstrap", it's easy and it has lots of examples of dropdown menus.
If you want to make it yourself, then :
Try to identify your dropdown menu item, give it a class or something that allows you to check if user clicks on a dropdown or not.
Then, on "click", do an action that show/hides the next list element. (jquery's got a "toggle()" function made for this kind of job)
On document load, set all your dropdown menus with display:none. To hide them. Then, on click on them, just use toggle() on them, or add them an attribute that makes them visible, such as an "active" class.
here is a short example on how you could handle this with jQuery : https://jsfiddle.net/83qgv1nb/21/
(this is just an example, there are lots of other examples or way to do this, I'm not pretending that my example here is the best way!)
if you do not use jQuery, then just check this link : Using Javascript to hide and show drop down menu and text field
update :
This is what you try to do with css i guess... : https://jsfiddle.net/83qgv1nb/27/
So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.
ul#menuItems {
background: none;
height: 50px;
width: 100px;
margin: 0;
padding: 0;
}
ul#menuItems li {
display: inline;
list-style: none;
margin-left: auto;
margin-right: auto;
top: 0px;
height: 50px;
}
ul#menuItems li a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bolder;
color: #000;
height: 50px;
width: auto;
display: block;
text-align: center;
line-height: 50px;
}
<ul id="menuItems">
<li>
Home
</li>
<li>
DJ Profiles
</li>
</ul>
Currently I am unsure of what is causing this issue, how would I go about and resolve it?
Updated Answer
I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
}
<ul>
<li> some item
</li>
<li> another item
</li>
</ul>
This fiddle shows how
http://jsfiddle.net/9th7X/
ul, li {
display:inline
}
Great references on lists and css here:
http://alistapart.com/article/taminglists/
I guess the simple solution i found is below
ul{
display:flex;
}
A much better way is to use inline-block, because you don't need to use clear:both at the end of your list anymore.
Try this:
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
CSS:
ul > li{
display:inline-block;
}
Have a look at it here : http://jsfiddle.net/shahverdy/4N6Ap/
You could also use inline blocks to avoid floating elements
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
and then style as:
li{
/* with fix for IE */
display:inline;
display:inline-block;
zoom:1;
/*
additional styles to make it look nice
*/
}
that way you wont need to float anything, eliminating the need for clearfixes
Here you can find a working example, with some more suggestions about dynamic resizing of the list.
I've used display:inline-block and a percentage padding so that the parent list can dynamically change size:
display:inline-block;
padding:10px 1%;
width: 30%
plus two more rules to remove padding for the first and last items.
ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}
strong tex
ul {
list-style: none;
display: flex;
justify-content: space-around;
}
<ul>
<li>bla</li>
<li>blabla</li>
<li>blablabla</li>
</ul>
So what I need help with, is how do I remove the newline after a <li> and or <ul>
This is my css:
#ranks li {
background: url(/img.png) no-repeat top left;
}
#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; }
#ranks .sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; }
and this is the html:
<ul id="ranks"><li class="sprite-admin"></li></ul>
It all works well while only one of the <ul id ="etc"> is there, but if there are multiple, it will make a new line and 'stack' them.. is it possible to make them not stack, and just go left to right?
Thanks
EDIT:
Demo : /removed/
You have a few options:
#ranks li {
float: left;
}
This will float all of your list items to the left, without wrapping, until horizontal screen space is no longer available. Alternatively,
#ranks li {
display: inline-block;
}
Which will also put your elements side-by-side, but handle them as bock level elements. If you don't care about block-level styling, you could go with straight inline-display:
#ranks li {
display: inline;
}
Which will treat the list items like any other inline element (such as <span> or <a>).
There are some other inherent styles that exist on list items, as well as their list parent, that you may need to do away with. Be sure to check out margin, and padding.
Demo: http://jsbin.com/iconud/edit#html,live
Look Out Ahead!
You may find that there is an unsightly gap between your list items when they're positioned side-by-side. This is a common problem with inline-lists. One solution is to remove the newline space between closing and opening list item tags:
<ul id="ranks"><li>
Index</li><li>
Contact</li><li>
Portfolio</li>
</ul>
Or have them all inline, a little less discernible:
<ul id="ranks">
<li>Index</li><li>Contact</li><li>Portfolio</li>
</ul>
This is a little tough on the eyes. With HTML, since closing tags aren't always required, you can also leave off the closing tag (though this makes me a bit nervous):
<ul id="ranks">
<li>Index
<li>Contact
<li>Portfolio
</ul>
Multiple Lists Inline Too!
From some of the OP's comments, it appears they might be trying to get not only list items inline, but lists themselves. If that's the case, apply the same aforementioned rules to the lists themselves:
#ranks,
#specs {
margin: 0;
padding: 0;
display: inline-block;
}
#ranks li,
#specs li {
display: inline-block;
border: 1px solid #CCC;
padding: 5px 10px;
}
Here were have identified two sets of rules using selectors that search for id's, and then tags. You could simplify this by apply a common class to the lists, or by basing the selectors off of a common parent element. Next is the markup:
<ul id="ranks">
<li>Index</li>
<li>Contact</li>
<li>Portfolio</li>
</ul>
<ul id="specs">
<li>Foo</li>
<li>Bar</li>
</ul>
This results in both lists, and their items, being displayed in a horizontal fashion.
Demo: http://jsbin.com/iconud/2/edit
with some css
<style type="text/css">
#ranks li { display:block; float:left; }
</style>
updated as comments: with display:block
ul li{ display:inline;} do the trick?
<li> by default is display:block;
if you give it display:inline; or diplay:inline-block; that should remove the linebreak
This is a basic example of horizontal UL's
HTML
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<span class="clearFloats">
CSS
.item {
float: left;
}
.clearFloats {
clear: both;
}
JSFiddle Example: http://jsfiddle.net/peterf/DEUBf/
Another option is to set font-size: 0 in the ul, then restore the desired font-size in the li tags. I prefer this as it's contained within the ul tag, doesn't need further hacks like clear:both, and explains better what the styling is meant to do (hide anything not inside a list item).
ul {
list-style-type: none;
font-size: 0;
}
li {
display: inline-block; /* Or inline, as you like */
font-size: 16px;
}
I have a mockup layout for something here. Essentially there are sections, columns and fields, which are all written as a combination of <ul> and <li> elements. This is done specifically for later parsing.
A snippet of the HTML:
<li class="layout"><span class="type">[Column] </span>
<ul class="layout-children">
<li class="field"><span class="type">[Text] </span>A field</li>
<li class="field"><span class="type">[Text] </span>Another field</li>
<li class="field"><span class="type">[Text] </span>Yet another field</li>
</ul>
</li>
<li class="layout"><span class="type">[Column] </span>
<ul class="layout-children">
<li class="field"><span class="type">[Text] </span>More fields</li>
<li class="field"><span class="type">[Text] </span>And one more field</li>
</ul>
</li>
If you go to the linked content you'll note that those columns sit vertically.
I want the columns to sit beside each other, but I am not sure how to go about it.
It would be preferable if the HTML didn't change, just the CSS.
I just added this to your css:
ul .section-children li.layout {
display : inline-block;
}
Unfortunately, I don't know how well supported inline-block is nowadays.
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
In your <UL> tag use the css attribute "list-style:none;" and in the <li> tag use the css attribute "display:inline;" you'll have to play around with the padding and margin to make it look good, but those two attributes will get you on your way. For a better example see my Non-Profit website: Technically Learning
How about this:
.layout { float: left; width: 50%; margin: 0; border: 0; padding: 0; /* background: transparent */ }
* html .layout { display: inline } /* IE margin hack */
.field { clear: both }
yeah using display:block it would be impossible to make them sit beside each other unless if you'd try to specify a width for each of them
but if that's the case just use display:inline
Just an alternative to using inline elements since IE has had a history of padding problems with inline:
.layout-children:after
{
content: "";
display: block;
height: 0px;
clear: both;
}
.layout-children .field
{
float: left;
}
Using inline or inline-block is going to be nothing but trouble. It's a much better idea to use floats as #Dmitry Z has suggested (but without the margin hack, which isn't necessary).
A simple float: left will work (with a minor adjustment for the width)
li {
margin: .5em 1em;
padding: .1em;
font-family: sans-serif;
list-style-type: none;
border: 1px #666 solid;
float: left;
}
#layout-section {
width: 85%;
}