I am working on an HTML CSS template, i stuck in a situation in which my list item (li) is getting bottom-margin from somewhere, here is my code:
JSFIDDLE
HTML
<div id="main-4">
<ul>
<li>
<img src="http://demo.htmlcoder.me/ivega/images/portfolio-1.jpg" alt="#">
</li>
<li>
<img src="http://demo.htmlcoder.me/ivega/images/portfolio-2.jpg" alt="#">
</li>
<li>
<img src="http://demo.htmlcoder.me/ivega/images/portfolio-3.jpg" alt="#">
</li>
<li>
<img src="http://demo.htmlcoder.me/ivega/images/portfolio-4.jpg" alt="#">
</li>
</ul>
</div>
CSS
#main-4 ul li {
list-style-type: none;
float: left;
width: 337px;
}
#main-4 ul li > img {
width: 337px;
}
it's because images do that. give your images vertical-align:bottom and see how it's being fixed:
#main-4 ul li {
list-style-type: none;
float: left;
width: 337px;
}
#main-4 ul li > img {
width: 337px;
vertical-align:bottom;
}
Related
I have to create left section for a website ".leftpart" in which I have parent navigation class ".nav-links" with CSS properties. I have also have same class ".nav-links" as a sub section under parent ".nav-links". I want to give a different background color "red" to child ".nav-links" [Edit and Save]. Can you anyone suggest best way to do this ?
My code is below, thanks in advance :
.leftpart {
width: 100%;
display: block;
margin: 20px;
}
.leftpart .nav-links ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
.leftpart .nav-links ul li {
margin-bottom:20px;
}
.leftpart .nav-links ul li a {
background:green;
color:#fff;
padding: 20px;
display: inline-block;
}
<div class="leftpart">
<div class="nav-links">
<h1> Primary Links </h1>
<ul>
<li>
Profile
</li>
<li>
Friends
</li>
<li>
Milestones
</li>
<li>
Groups
</li>
</ul>
<div class="sub-seciton">
<div class="nav-links">
<ul>
<li>
Edit
</li>
<li>
Save
</li>
</ul>
</div>
</div>
</div>
<div class="nav-links">
<h1> Secondary Links </h1>
<ul>
<li>
Privacy
</li>
<li>
Settings
</li>
</ul>
</div>
</div>
Just use an additional decedent selector only changing the background property:
.leftpart .nav-links .nav-links ul li a {
background: red;
}
.leftpart {
width: 100%;
display: block;
margin: 20px;
}
.leftpart .nav-links ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
.leftpart .nav-links ul li {
margin-bottom: 20px;
}
.leftpart .nav-links ul li a {
background: green;
color: #fff;
padding: 20px;
display: inline-block;
}
.leftpart .nav-links .nav-links ul li a {
background: red;
}
<div class="leftpart">
<div class="nav-links">
<h1> Primary Links </h1>
<ul>
<li>
Profile
</li>
<li>
Friends
</li>
<li>
Milestones
</li>
<li>
Groups
</li>
</ul>
<div class="sub-seciton">
<div class="nav-links">
<ul>
<li>
Edit
</li>
<li>
Save
</li>
</ul>
</div>
</div>
</div>
<div class="nav-links">
<h1> Secondary Links </h1>
<ul>
<li>
Privacy
</li>
<li>
Settings
</li>
</ul>
</div>
</div>
You need to target .nav-links inside the sub-section. You can also style your nav-links siblings separately. See my example:
.leftpart {
width: 100%;
display: block;
margin: 20px;
}
.leftpart .nav-links ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
.leftpart .nav-links ul li {
margin-bottom:20px;
}
.leftpart > .nav-links ul li a {
background:green;
color:#fff;
padding: 20px;
display: inline-block;
}
.leftpart .nav-links .sub-seciton .nav-links ul li a {
background:red ;
}
.leftpart > .nav-links:nth-child(2) ul li a {
background: blue;
}
<div class="leftpart">
<div class="nav-links">
<h1> Primary Links </h1>
<ul>
<li>
Profile
</li>
<li>
Friends
</li>
<li>
Milestones
</li>
<li>
Groups
</li>
</ul>
<div class="sub-seciton">
<div class="nav-links">
<ul>
<li>
Edit
</li>
<li>
Save
</li>
</ul>
</div>
</div>
</div>
<div class="nav-links">
<h1> Secondary Links </h1>
<ul>
<li>
Privacy
</li>
<li>
Settings
</li>
</ul>
</div>
</div>
Just set your CSS code more specific for it:
.leftpart {
width: 100%;
display: block;
margin: 20px;
}
.leftpart .nav-links ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
.leftpart .nav-links ul li {
margin-bottom:20px;
}
.leftpart .nav-links ul li a {
background:green;
color:#fff;
padding: 20px;
display: inline-block;
}
.leftpart .nav-links .sub-seciton .nav-links ul li a {
background:red;
color:#fff;
padding: 20px;
display: inline-block;
}
<div class="leftpart">
<div class="nav-links">
<h1> Primary Links </h1>
<ul>
<li>
Profile
</li>
<li>
Friends
</li>
<li>
Milestones
</li>
<li>
Groups
</li>
</ul>
<div class="sub-seciton">
<div class="nav-links">
<ul>
<li>
Edit
</li>
<li>
Save
</li>
</ul>
</div>
</div>
</div>
<div class="nav-links">
<h1> Secondary Links </h1>
<ul>
<li>
Privacy
</li>
<li>
Settings
</li>
</ul>
</div>
</div>
.leftpart {
width: 100%;
display: block;
margin: 20px;
}
.leftpart .sub-seciton>.nav-links ul li:nth-child(1) a,
.leftpart .sub-seciton>.nav-links ul li:nth-child(2) a{
background:red;
}
.leftpart .nav-links ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
.leftpart .nav-links ul li {
margin-bottom:20px;
}
.leftpart .nav-links ul li a {
background:green;
color:#fff;
padding: 20px;
display: inline-block;
}
<div class="leftpart">
<div class="nav-links">
<h1> Primary Links </h1>
<ul>
<li>
Profile
</li>
<li>
Friends
</li>
<li>
Milestones
</li>
<li>
Groups
</li>
</ul>
<div class="sub-seciton">
<div class="nav-links">
<ul>
<li>
Edit
</li>
<li>
Save
</li>
</ul>
</div>
</div>
</div>
<div class="nav-links">
<h1> Secondary Links </h1>
<ul>
<li>
Privacy
</li>
<li>
Settings
</li>
</ul>
</div>
</div>
I have a menu bar on a hover it should display a submenu. I am displaying the sub menu but it moving entire main menu to side. I want the submenu out of the main menu, next to the main menu.
my HTML code
<div class="MenuBar">
<ul>
<li><img src="#"><br>text1</li>
<div id="submenu">
this is a test div
</div>
<li><img src="#"><br>text2</li>
<li><img src="#"><br>text3</li>
</ul>
CSS
#submenu {
display: none;
}
.MenuBar ul li a:hover #submenu {
display: block;
position: relative;
top: 20px;
}
I think this is what you are after. I have added classes to the lists, changed your id submenu to class and added submenu items to all lists.
.MenuBar ul li .submenu {
display: none;
}
.MenuBar ul li.men1:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
.MenuBar ul li.men2:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
.MenuBar ul li.men3:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
<div class="MenuBar">
<ul>
<li class="men1">text1
<div class="submenu">
hovered 1st
</div></li>
<li class="men2">text2
<div class="submenu">
hovered 2nd
</div></li>
<li class="men3">text3<div class="submenu">
hovered 3rd
</div></li>
</ul>
Let me know if this was what you were after.
you can use following CSS for this:
if you want to show submenu in bottom of parent menu
.MenuBar ul li {
position: relative;
}
.MenuBar ul li:hover #submenu {
display: block;
position: absolute;
top: 100%;
left: 0px;
}
or if you want to show submenu in right of parent menu
.MenuBar ul li {
position: relative;
}
.MenuBar ul li:hover #submenu {
display: block;
position: absolute;
top: 0;
left: 100%;
}
Place the submenu div outside your lists. If you throw that inside a bunch of list item and play with display property, it will affect the list structure. Place that div outside the list item, position the submenu div with css so it always alignment to the respective menu item and them add your hover effect.
Change Html Like this:
<li>
<img src="#"><br>text1
<div id="submenu"><-----------------submenu must be child li
this is a test div
</div>
</li>
And Css Like This :
.MenuBar ul li a:hover + #submenu {<--------------use + selector
display: block;
position: relative;<-----Remove This
top: 20px;<------Remove This
margin-top: 20px;<----------Add This
margin-bottom: 10px;<-------Add This
}
Full Code:
#submenu {
display: none;
}
img {
width: 20px;
}
ul {
list-style: none;
}
.MenuBar ul li a:hover + #submenu {
display: block;
margin-top: 20px;
margin-bottom: 10px;
}
<div class="MenuBar">
<ul>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text1
</a>
<div id="submenu">
this is a test div
</div>
</li>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text2
</a>
</li>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text3
</a>
</li>
</ul>
</div>
I'd like to align a series of li items to the bottom of their parent, the ul. One of the tricky parts is: the li items require a float: left as well as the items being variable in height and width. Is there a way to achieve this without using a "hacky" method?
Here's my current code:
ul {
width: 1000px;
height: 400px;
float: left;
vertical-align: bottom; /* doesn't influence the list items because of the float: left. i thought i'd put it here anyways */
}
ul li {
float: left;
display: inline-block;
}
ul li figure {
/* determines the width & height of the list item */
margin: 0; padding: 0;
width: 150px;
height: 150px;
background: red;
}
ul li:nth-child(2n) figure {
width: 300px;
height: 300px;
}
<ul>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
</ul>
NOTE: The width of the ul's width is variable and my design requires there to be no gap between the list items. This is what I'm looking to achieve:
See snippet, note that the fixed width on the ul means an even distribution of the li with table-cell, so you may need to work on that in regards to the "gaps" between the li. As you didn't specify how that is supposed to look I didn't try to solve it in any specific way.
I think this is the way to go to get a bottom align.
ul {
height: 400px;
float: left;
display: table;
list-style: none;
}
ul li {
display: table-cell;
vertical-align: bottom;
margin: 0;
padding: 0;
}
ul li figure {
/* determines the width & height of the list item */
margin: 0;
padding: 0;
width: 150px;
height: 150px;
background: red;
display: inline-block;
}
ul li:nth-child(2n) figure {
width: 300px;
height: 300px;
}
<ul>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
</ul>
float is not compatible with vertical alignement.
inline-block & vertical-align does :
ul {
width: 1000px;
height: 400px;
float: left;
}
ul li {
/*float: left;*/
display: inline-block;
vertical-align:bottom
}
ul li figure {
/* determines the width & height of the list item */
margin: 0; padding: 0;
width: 150px;
height: 150px;
background: red;
}
ul li:nth-child(2n) figure {
width: 300px;
height: 300px;
}
<ul>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
</ul>
display:flex & align-items does :
ul {
width: 1000px;
height: 400px;
display:flex;
align-items:flex-end;
}
ul li {
display:block;
float:right;
/* whatevever float or display will be overide by flex model */
margin:1px; /* is efficent */
}
ul li figure {
/* determines the width & height of the list item */
margin: 0; padding: 0;
width: 150px;
height: 150px;
background: red;
}
ul li:nth-child(2n) figure {
width: 300px;
height: 300px;
}
<ul>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
</ul>
display:grid
* {margin:0;padding:0;}
ul {
width: 1000px;
height: 400px;
float: left;
display:grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 0));
grid-auto-flow: dense;
grid-auto-rows: minmax(150px, 300px);
grid-gap: 1px;/* whatever */
align-items: end;/* or align-self on children */
}
ul li {
display:block;
/* align-self: end; */
}
ul li:nth-child(2n) {
grid-column: span 2;}
ul li figure {
margin: 0; padding: 0;
width: 150px;
height: 150px;
background: red;
}
ul li:nth-child(2n) figure {
width: 300px;
height: 300px;
}
<ul>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
</ul>
display:table of course
Hi in the below code right end of the logo text want to display and all the three option in a single line.
expected output:
Logo Welcome Guest Free Register Login
can anyone help me
.logo {
float: left;
}
.logo a {
display: block;
}
.header {
margin: 10px 0;
}
.header-right ul li {
width: 52%;
float: right;
}
<div class="header">
<div class="container">
<div class="logo">
<a href="index.html">
<img src="images/logo.gif" alt="" />
</a>
</div>
<div class="header-right">
<ul>
<li>Welcome Guest</li>
<li>Free Register</li>
<li>Login</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
The problem is that you are giving float and width to every single li.
You want to do that to the ul and give display: inline-block to the li.
Something like this..
.logo {
float: left;
}
.logo a {
display: block;
}
.header {
margin: 10px 0;
}
.header-right ul {
float: right;
width: 52%;
}
.header-right ul li {
display: inline-block;
margin-right: 30px;
}
<div class="header">
<div class="container">
<div class="logo">
<a href="index.html">
<img src="images/logo.gif" alt="" />
</a>
</div>
<div class="header-right">
<ul>
<li>Welcome Guest</li>
<li>Free Register</li>
<li>Login</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
Try like this: Demo
.header-right{
width: 52%;
float: right;
}
.header-right ul li {
margin:0 20px;
display:inline-block;
}
Update your styles like this:
.header-right ul {
width: 52%;
float: right;
}
.header-right ul li
{display:inline;
margin-right:15px;
}
I have a nav bar with an image and a ul. I want to text in the ul to align to the bottom of the div but it at the top right now. How can i achieve this?
http://jsbin.com/otitaf/1/
<nav>
<div class="logo">
<img src="img/logo.jpg" id="logo">
</div>
<div class="nav">
<ul>
<li class="bottom">
Luigi's ♨ Pizzeria
</li>
<li>
Menu
</li>
<li class="bottom">
Map
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Praises
</li>
</ul>
</div>
</nav>
css
.logo{
width: 30%;
float: left;
}
.nav{
float: right;
}
#logo{
height: 100%;
margin-left: 25%;
}
.bottom{
position: relative;
vertical-align: bottom;
}
use below css to achieve your dream
#side-bar{ position:relative; }
#side-bar ul{position: absolute; bottom: 0;} /* this will apply to all ul available in side-bar
insted this, you can also add class or id to ul to select it specifically, like:
.sidebar-ul{position: absolute; bottom: 0;}
Try adjusting your ul and the positioning, something like this:
#side-bar section ul {
position: absolute;
bottom: 30px;
}