I have made a page in which i m using a list to display the items horizontally
Now i can see the result in the page here
But when i drag and make the browser window short i get a garbled list
as in the scrren-shot here
http://pradyut.dyndns.org/WebApplicationSecurity/people_ss.JPG
http://pradyut.dyndns.org/WebApplicationSecurity/people_ss.JPG
I m using a css in the list as : -
#navlist li
{
padding: 1em;
float: left;
list-style-type: none;
}
at the end of the list i m using a clearing div
#clear-both
{
clear: both;
}
Any help
Thanks
Pradyut
[2]: [2]: http://pradyut.dyndns.org/WebApplicationSecurity/people_ss.JPG
I can't seem to access your site.
Try using display:inline instead of float:left
#navlist li
{
padding-right: 1em;
display: inline;
list-style-type: none;
}
The problem is the varying heights of each LI element. If you give them all a common height, the layout flows properly when the window is resized:
#navlist li
{
height: 100px;
padding: 1em;
float: left;
list-style-type: none;
}
well could solve the problem using a min-height in the another div css
#another
{
padding: 5px;
background-color: green;
min-height: 75px;
}
thanks...
Related
How do I get the underline on my nav to be as long as the a element and not the li element?
Example Plnkr
As Drew kindly pointed out, there is default Bootstrap padding. This fixed it:
.navbar-right li a {
padding-left: 0;
padding-right: 0;
margin-left: 10px;
margin-right: 10px;
}
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;
}
Here Is the link of the page on which I am working.
In the CONSULTANT section there is a list. I want to make the bullets size smaller.
I have done CSS:
.career ul li span {
font-size: 18px;
}
.career ul li{
font-size: 10px !important;
}
Please help me to make bullets size smaller.
Thanks
There is no <!DOCTYPE html> in your HTML page. so that you're not able to decrease Bullet size
#trainoasis is right, decreasing the font-fize for li works. Tried with ChromeDeveloper tools, but this CSS should do the trick.
.career ul li {
font-size: 0.5em;
}
You can use :before to create your own bullet and have it's own font-size
.career ul li {
list-style: none;
}
.career ul li:before {
content: '■';
vertical-align: middle;
display: inline-block;
margin-top: -3px;
font-size: 12px;
margin-right: 4px;
}
Fiddle
To reduce the size of bullet list, we can use before pseudo element.
For the list we have to give
ul{
list-style: none;
}
And then using pseudo element, we can create bullet as per our needed size and content
ul li:before {
content: ".";
position: absolute;
}
You can style the positions by giving top,bottom,left, right values.
If you have any queries please check,
http://frontendsupport.blogspot.com/2018/05/reduce-bullet-size-in-list.html
Code was taken from the above site.
How do a create menus with pure css that are evenly spaced and the li elements take the entire ul space?
I followed this solution to create the menus that are evenly spaced out: https://stackoverflow.com/a/17951253/757955
I want the li elements to take up all the area of the ul element. I have a separator image I want to put between the menu items. Also I want people to be able to click anywhere in the menu item and be taken to that page.
Here is the js fiddle: https://jsfiddle.net/prusikknot/btp6Lkos/
Notice how the red and green boxes don't touch. I want the red and green boxes to touch between each other at the midway point between the menus.
There will be a variable number of menus and the menu names will vary in length. I'm targeting IE8+ and the latest version of the other major browsers but the old IE part may get dropped.
Here is the html:
<nav id="idMainNav">
<ul>
<li>ASDF</li>
<li>QWER</li>
<li>ZXCVB</li>
<li>UIOP</li>
<li>HJKL</li>
<li>VBNM</li>
<li>TYUI</li>
</ul>
</nav>
Here is the css:
#idMainNav{
width: 900px;
}
#idMainNav ul {
margin: 0px;
padding: 0px;
text-align: justify;
line-height: 0;
background-color: #e9e8e8;
}
#idMainNav ul:after {
content: '';
display: inline-block;
width: 100%;
list-style: none outside none;
}
#idMainNav li {
position: relative;
display: inline-block;
line-height: 100%;
text-align: center;
font-size: 15px;
font-weight: bolder;
cursor: pointer;
}
#idMainNav li:first-child {
padding-left: 10px;
}
#idMainNav li:last-child {
padding-right: 10px;
}
li {
background: green;
}
li:nth-child(odd) {
background: red;
}
#idMainNav a {
color: #000000;
height: 59px;
line-height: 59px;
text-decoration: none;
}
The thing about display:inline-block; is that it behaves like text and creates white space between elements. To counteract this, make the inline-block parent element have a font-size:0; (in this case the ul) and then reset the li to a font-size value not relative to the parent (since it's now 0).
Also, you don't really need to set justify to anything here, you just need to explicitly state the width of all the lis. In my test, setting the li to width:13.95%; worked nicely but it depends on the number of lis.
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).