Please, give me some help in the following:
HTML code:
<div id="medium_ribbon">
<ul class="up_rectangles">
<li id="first_up"> </li>
<li id="second_up"> </li>
<li id="third_up"> </li>
<li id="fourth_up"> </li>
</ul>
</div>
Next, CSS code:
#medium_ribbon {
text-align:center;
background-color:#172236;
padding-top:20px;
}
.up_rectangles{
list-style: none;
margin-bottom: 0px;
}
.up_rectangles li {
line-height: 200px;
width: 265px;
background-color: #C8CACF;
display: inline-block;
margin-right:15px;
}
.up_rectangles>li:last-child {
margin-right:0;
}
Finally, the result:
The picture is a bit aligned to the right and I cannot discover the reason no matter how much I've tried.
Thank you
Your browser's default stylesheet automatically puts padding on .up_rectangles.
Simply reset if by applying this CSS rule:
.up_rectangles{
padding: 0;
}
Then it will work as expected: http://jsfiddle.net/R8pL3/
by default <ul> have some padding and margin.
So add the margin:0 and padding:0 in `.up_rectangles' class.
so the code will be like.
.up_rectangles
{
list-style-type: none;
margin: 0;
padding:0
}
Add padding-left:0 to your .up_rectangles class. The browser, be default, adds padding to ul elements. By adding padding-left:0 to the ul you'll fix this.
.up_rectangles{
list-style: none;
margin-bottom: 0px;
padding-left:0;
}
Here's the working demo.
Related
I am trying to make the menu links (under Menu) on the following website fill the full width of the bar. So when you have "Soup & Salad" as active, it extends all the way to the left of the blue bar. There should also be no space between blocks when you hover over the link next to the active state.
http://www.woodonwellington.com/
ul#menuNav
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
background-color: #0c0648;
padding-top: 13px;
padding-bottom: 12px;
}
#menuNav li
{
display: inline;
list-style-type: none;
}
#menuNav a {
padding-top: 13px;
padding-bottom: 13px;
padding-left: 20px;
padding-right: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #fff;
cursor: pointer;
}
It happens because your li is set to display:inline; In your code you have an enter and a couple of spaces/tabs between the <li></li> blocks. To fix this you have to write the tags right after eachother. You want to limit the space between those <li> tags.
In stead of this:
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
Do this:
<ul>
<li>
Content
</li><li>
Content
</li><li>
Content
</li>
</ul>
Answer on comment:
The same problem appeared on the link itself. As you can see on the image below you made the li elements touch eachother.
Now to make the links touch eachother you have to do the same.
Instead of:
<li>
<a>Link</a>
<li>
Do this:
<li><a>
Link
</a><li>
It is not a nice solution but it will fix your spacing between the links.
you could use display:table/table-cell to acomplish this:
basic CSS to apply:
#menuNav {
display:table;
width:100%;
border-collapse:collapse;
}
#menuNav li{
display:table-cell;
}
#menuNav li a {
display:block;
text-align:center;
}
remove any floats from CSS to test this. float kills display (unlesss set to flex, but this is another option)
You can simply remove the display: inline; in your .css and add float:left;
#menuNav li
{
list-style-type: none;
background-color:red;
float:left;
}
This will remove all the spaces.
Check this
http://jsfiddle.net/BishanMeddegoda/30w56oft/
I have a list of urls in ul element and I want the list in one row. I've tried this way to place them in the center of the page but they are not exactly in the center.
This is the HTML code
<ul id="links">
<li class="inner-li"> about
</li>
<li class="inner-li"> projects
</li>
<li class="inner-li"> photoblog
</li>
<li class="inner-li"> music
</li>
</ul>
and this is the style that I've tried
.inner-li {
font-size: 1.25em;
float: left;
margin-left: 1em;
list-style-type: none;
}
#media screen and (min-width: 21em) {
#links {
width: 21em;
margin: 0 auto;
}
}
and you can see it in JsFiddle.
Add display:table and padding:0 to #links like:
#media screen and (min-width: 21em) {
#links {
display:table;
margin: 0 auto;
padding: 0;
}
}
Also add
#links > li:first-child{
margin:0;
}
cause first li element no need to has margin-left
fiddle
It's not centered because you've applied margin-left for the <li>'s.
.inner-li {
font-size: 1.25em;
float: left;
margin-left: 1em; /* this */
list-style-type: none;
}
Which will push the first <li> 1em away from the center.
You can achieve the same layout, centered by changing it to padding: 0 .5em instead.
Demo
add this code your css file :
you should definition your menu width and other necessary codes.
#links {
min-width: 100%;
}
I'm trying to center a horizontal list of image links, though it seems that the left of the images are being centered. As you can see, the center of the list of images (which are all the same size) is slightly to the right of the text.
HTML:
<div id='nav'>
<ul>
<li>
<a href=''><img src='images/login.png' /></a>
</li>
<li>
<a href=''><img src='images/add.png' /></a>
</li>
<li>
<a href=''><img src='images/forum.png' /></a>
</li>
</ul>
</div>
Css:
#nav {
text-align: center;
}
#nav ul {
list-style: none;
margin: 20px auto;
}
#nav li {
display: inline-block;
margin: 0px 30px;
}
What can I do to completely center it?
Working Demo : http://jsfiddle.net/3d6TS/
The <ul> tag by default adds padding. You need to set padding:0 manually to <ul> tag.
#nav ul {
list-style: none;
margin: 20px auto;
padding:0;
}
#nav { text-align: center; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
the solution is the display:inline on the li
A good solution would be to maintain the margin-left and make sure the first child has a left margin of 0. This causes both the first and last children to have no margins on the edges it meets with the parent. This is good as :first-child doesn't catastrophically break styles in >=ie7 where as :last-child is unsupported in <=ie8 making the reverse of this infeasible for the time being.
#nav ul li {
display: inline-block;
margin-left:30px;
}
#nav ul li:first-child {
margin-left:0;
}
Here is my HTML:
<ul class="links">
<li>
Home
</li>
<li>
Google
</li>
</ul>
CSS:
ul.links {
list-style: none outside none;
margin: 0;
padding: 0;
}
.links li {
float: left;
margin: 8px 4px -2px;
}
When viewing this in IE6 the list items are 100% in width, where as I need them to be as wide as the text they contain plus the padding.
Any ideas?
.links li {
display:inline;
}
.
When you float an element you must apply a width attribute.
width:100px; /* or whatever */
Here is my code:
HTML
<div class="menu">
<ul>
<li class="active">HOME</li>
<li class="active">COMPANY</li>
<li class="active">SOLUTIONS</li>
<li class="active">SERVICES</li>
<li class="active">NEWS & EVENTS</li>
<li class="active">BLOGS</li>
<li class="active">CONTACTS</li>
</ul>
</div>
CSS
.header .menu ul { margin:33px 10px 0 0; padding:0; float:right; width:auto; height:12px; list-style:none;}
.header .menu ul li { margin:0 4px; float:left;}
It does not recognize the height feature. Why? How can I set the height of menu item?
You're missing a semicolon :-)
You can also try setting the line-height property of the li tags to change the position of the text in the element:
.line-height-li {
line-height: 30px;
}
Just increase the padding-top and padding-bottom as you want. Line height effect other. I found out it by testing it. It work for me.
.header .menu ul { margin:33px 10px 0 0; padding:0; float:right; width:auto;list-style:none;}
.header .menu ul li { margin:0 4px; float:left;}
.active{height:50px;}
ul is set to a height of 12 pixels, at least in Firefox.
Is the height set on the correct element? You're asking how to set the height of a menu item (presumably, an li) but your CSS says you're setting the height of the ul. Perhaps, moving height: 12px; from where it is to .header .menu ul li could help.
The height of the list does not necessarily change the height of the visible list items. I created a small example to show how those heights look like, if you hover on the items, you'll see the height's changing. That because of the overflow attribute of the list.
.menu ul {
margin: 10px 10px 10px 5px;
padding: 10px;
float: right;
width: auto;
height: 12px;
list-style: none;
background: cyan;
overflow: hidden;
}
.menu ul:hover {
overflow: visible;
}
.menu ul li {
margin: 4px;
padding: 4px;
float: left;
background: yellow;
}
<div class="menu">
<ul>
<li class="active">HOME</li>
<li class="active">COMPANY</li>
<li class="active">SOLUTIONS</li>
<li class="active">SERVICES</li>
<li class="active">NEWS & EVENTS</li>
<li class="active">BLOGS</li>
<li class="active">CONTACTS</li>
</ul>
</div>
Anyway, in your example, there's no div with a class "header" in your HTML, that's confusing for beginners. Your CSS rules begin with ".header".