I am trying to make a simple piece of code that makes some links sit in the top right corner of the page, but they won't line up nicely. They keep lining up vertically, and I want them horizontal. I'm sure it's probably something obvious I'm missing, but I'm not sure what. I also tried using float left but it didn't change anything.
CSS & HTML
.social {
position: fixed;
right: 0;
/* display:inline-block; */
/* float:left; */
}
.social-buttons-list {
list-style-type: none;
list-style-position: outside;
margin: 0;
padding: 0;
/* display: inline-block; */
/* float:right; */
}
.social-button {
margin: 5px;
width: 50px;
height: 50px;
display: inline-block;
/* float:right; */
}
<div class="social">
<ul class="social-buttons-list">
<li>
<a href="">
<img src="img/Twitter.png" alt="" class="social-button">
</a>
</li>
<li>
<a href="">
<img src="img/Facebook.png" alt="" class="social-button">
</a>
</li>
<li>
<a href="">
<img src="img/Snapchat.png" alt="" class="social-button">
</a>
</li>
</ul>
</div>
You're forgetting that the <li> of your list has a default display:block. By addressing that and adding text-align: right to your list you'll achieve a horizontal, right-aligned list.
.social {
position: fixed;
right: 0;
/* display:inline-block; */
/* float:left; */
}
.social-buttons-list {
list-style-type: none;
list-style-position: outside;
margin: 0;
padding: 0;
/* display: inline-block; */
/* float:right; */
text-align: right;
}
.social-buttons-list li {
display: inline-block;
}
.social-button {
margin: 5px;
width: 50px;
height: 50px;
display: inline-block;
/* float:right; */
}
<div class="social">
<ul class="social-buttons-list">
<li>
<a href="">
<img src="img/Twitter.png" alt="" class="social-button">
</a>
</li>
<li>
<a href="">
<img src="img/Facebook.png" alt="" class="social-button">
</a>
</li>
<li>
<a href="">
<img src="img/Snapchat.png" alt="" class="social-button">
</a>
</li>
</ul>
</div>
They are aligning because you have the buttons in "un-ordered list" , they are used to display list. Just remove them
.social {
position: fixed;
right: 0;
/* display:inline-block; */
/* float:left; */
}
.social-buttons-list {
list-style-type: none;
list-style-position: outside;
margin: 0;
padding: 0;
/* display: inline-block; */
/* float:right; */
}
.social-button {
margin: 5px;
width: 50px;
height: 50px;
display: inline-block;
/* float:right; */
}
<div class="social">
<a href="">
<img src="img/Twitter.png" a class="social-button">
</a>
<a href="">
<img src="img/Facebook.png" class="social-button">
</a>
<a href="">
<img src="img/Snapchat.png" class="social-button">
</a>
</div>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
color: white;
}
http://codepen.io/anon/pen/BLBBWG
Here is your solution
Related
So I making a menu for a website, whenever the website loads the menu looks like img#1, the icons on the side are stacked, which I don't want to.
img1
After you hover over the icons they stack properly img#2.
after hovering
Which is how I actually want it.
I am sure it's just something small but I can't figure it out?
nav {
height: 40px;
background-color: var(--main-bg-color);
width: 100%;
margin: 2% 0;
}
.menu-icon {
display: none;
}
.main-nav {
margin-right:auto;
padding-left:4%;
width:fit-content;
}
nav li {
display: inline;
padding-right:5%;
}
nav a {
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
color: var(--light-color);
font-family: var(--font-h);
}
.icon-nav{
margin-left:auto;
padding-right:4%;
}
.icon-nav a{
padding: 0 5%;
}
html
<nav>
<div class="menu-icon">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="main-nav">
<ul>
<li>
Home
</li>
<li>
About me
</li>
<li>
Skills
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="icon-nav">
<a href="" target="_blank">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
</nav>
Your problem is likely related to a problem in your layout of .icon-nav and it's padding.
Some ways you can fix this is by:
Adding :not(:last-child) in the .icon-nav a CSS selector making it:
.icon-nav a:not(:last-child) {
padding: 0 5%;
}
OR
Adding:
First, adding width: 15%; to .icon-nav.
Second, sdding width: 75%; to .main-nav.
and adding a .icon-nav::before { content: ""; width: 15%; display: inline-block;}
/******* EXTRA *******/
#screen{
resize:horizontal;
overflow:hidden;
background-image: url('data:image/svg+xml;utf8, <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1" ><rect x="0" y="0" width="10" height="10" fill="lightgrey"/><rect x="10" y="10" width="10" height="10" fill="lightgrey"/></svg>');
}
/*********************/
/********** Things forgotten **********/
html {
--main-bg-color: black;
--light-color: red;
--font-h: /*monospace*/
;
}
ul {
display: inline;
list-style-type: none;
}
#screen div {
display: inline-block;
height: 1em;
}
#screen div * {
border-width: 0;
}
/**************************************/
nav {
height: 40px;
background-color: var(--main-bg-color);
width: 100%;
margin: 2% 0;
}
.menu-icon {
display: none;
}
.main-nav {
margin-right: auto;
padding-left: 4%;
width: fit-content;
/* ADDED { */ width: 70%; /* } */
}
nav li {
display: inline;
padding-right: 5%;
}
nav a {
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
color: var(--light-color);
font-family: var(--font-h);
}
/*= ADDED =======================*/
.icon-nav::before {
content: "";
width: 15%;
display: inline-block;
}
/*===============================*/
.icon-nav {
margin-left: auto;
padding-right: 4%;
/* ADDED {*/ width: 15%; /* } */
}
.icon-nav a {
padding: 0 5%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="screen">
<nav>
<div class="menu-icon">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="main-nav">
<ul>
<li>
Home
</li>
<li>
About me
</li>
<li>
Skills
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="icon-nav">
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
</div>
</nav>
</div>
</body>
</html>
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
I'm trying to center these images in the UL. I've looked at some of the other topics on this, but couldn't apply the solutions to my situation. If anyone can help me, I'd appreciate it. Thank you.
JSFiddle: https://jsfiddle.net/dvbL2d5y/1/
HTML
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS
#posts-wrap {
padding: 30px 50px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
Please apply below css. i have removed the float property and introduce display:inline-block.
#posts-wrap {
padding: 30px 50px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
padding:0;
}
#equipment-gallery li {
display: inline-block;
list-style: none;
margin: 20px;
}
I have modified your code. I hope it helps. You just need to add inline-block to an element if you want to center it with the help of text-align: center tag.
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
display:inline-block;
margin:0;
padding:0;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Is this what you were looking for?
#equipment-gallery li {
float: left;
list-style: none;
margin: 0 auto;
display: block;
width: 100%;
}
Remove "float:left" from this class"#equipment-gallery li" and add "display:inline-block"
#equipment-gallery li {
display: inline-block;
list-style: none;
margin: 20px;
}
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
display: inline-block;
padding: 0;
text-align: center;
}
#equipment-gallery li {
float: none;
list-style: none;
margin: 20px;
display: inline-block;
}
You can see link fiddler add this css https://jsfiddle.net/zdso82b7/1/
To align center I had used flexbox concept in ul tag
ul.medium-grid {
display: flex;
align-items: center;
justify-content: center;
flex-flow: wrap row;
}
for more details regarding flex box, please find on CSS-Tricks A Complete Guide to Flexbox
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
display: flex;
justify-content: center;
flex-flow: wrap row;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Im trying to have a menu where I have some links floated at left and then I have a div with some links that I want floated at right.
I'm trying to do this with the code below and it is working, but the left links and right links are no aligned at the center of the menu in terms of height, do you know why?
And also the :hover effect is not occupying the entire height of the menu.
CODE:
.container {
width: 100%;
background: yellow;
float: left;
}
.content {
height: 50px;
}
.menu-list {
list-style: none;
}
.menu-list li {
float: left;
}
.menu-links {
float: right;
}
.menu-list li a {
color: #aaa;
text-decoration: none;
line-height: 50px;
font-weight: bold;
}
.menu-list li a:hover {
background: red;
}
<div class="container">
<div class="content">
<ul class="menu-list">
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
</ul>
<div class="menu-links">
Link 1
Link 2
</div>
</div>
</div>
JsFiddle
Check this fiddle here
It happens because, you have used menu-list with ul and menu-links with div.
In basic HTML, ul has predefined padding and margin. So, first of all clear out that padding and margin then style menu-list and menu-links accordingly.
Instead of adding extra space or element use following html,
<div class="container">
<div class="content">
<ul class="menu-list">
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
</ul>
<ul class="menu-links">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
And your respective CSS will be,
body {
padding: 0;
margin: 0
}
.container {
display: block;
width: 100%;
background: yellow;
clear: both;
padding: 10px;
}
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
a {
text-decoration: none
}
.menu-list,
.menu-links {
list-style: none;
margin: 0;
padding: 0
}
.menu-list {
float: left
}
.menu-links {
float: right
}
.menu-list li,
.menu-links li {
display: inline-block
}
Try this one
.container{
width:100%;
background:yellow;
float:left;
}
.content{
height: 50px;
}
.menu-list{
list-style:none;
margin: 0;
float: left;
}
.menu-list li{
display: inline-block;
}
.menu-links{
float: right;
}
.menu-links a{
line-height: 50px;
}
.menu-list li a{
color:#aaa;
text-decoration: none;
line-height: 50px;
font-weight: bold;
}
.menu-list li a:hover{
background:red;
padding: 16px 0px;
}
<div class="container">
<div class="content">
<ul class="menu-list">
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
<li><a title="" href="">Home</a></li>
</ul>
<div class="menu-links">
Link 1
<a href="" >Link 2</a>
</div>
</div>
</div>
How about this fiddle?
It is generally better to float the ul and give the li display: inline;
ul also has a default margin and padding on it so you need to use a reset of some sort
ul.menu-list{
margin: 0 0 0 15px;
padding: 0;
}
*Revised to make CSS only
Would something like this work? You just need to know the height of your nav bar, and add a pseudo-element of that height to each of the separate nav sections. https://jsfiddle.net/will0220/wg7hwc7s/
Just set them to display: inline-block and vertical-align: middle to keep them centered in the height of your nav bar by comparing it to the pseudo element. This should work with any number of lines of text in each button.
.container{
width:100%;
background:yellow;
float:left;
}
.menu-list{
list-style:none;
}
.menu-list{
float: left;
padding: 0;
margin: 0;
}
.menu-links{
float: right;
}
.menu-list li a{
color:#aaa;
text-decoration: none;
line-height: 50px;
font-weight: bold;
}
.menu-list:before, .menu-links:before{
content: '';
display: inline-block;
vertical-align: middle;
height: 50px;
width: 0;
}
.menu-list li, .menu-links a{
display: inline-block;
vertical-align: middle;
}
.menu-list li a:hover{
background:red;
}
You can use display:table-cell property to easily do that and also you don't have to use float for li to display as horizontal menu instead use display:inline
updated fiddle here
I want the text to be on the right side of my footer and the images to be on the left. Every time I had the float: right to the "footer li.pictures" the background colour disappears.
Before adding float: right:
http://i57.tinypic.com/2cp9mkj.png
After adding float: right:
http://i60.tinypic.com/206y1rr.png
html:
<div class="events">
<div class="row">
<div class="col span-12">
<footer>
<ul class="links">
<li class="links">Home</li>
<li class="links">Vendors</li>
<li class="links">Events</li>
<li class="links">Location</li>
<li class="links">Volunteer</li>
</ul>
<ul class="pictures">
<li class="pictures">
<a href="#">
<img src="images/insta.png" alt="instagram icon">
</a>
</li>
<li class="pictures">
<a href="#">
<img src="images/twit.png" alt="twitter icon">
</a>
</li>
<li class="pictures">
<a href="#">
<img src="images/face.png" alt="facebook icon">
</a>
</li>
</ul>
</footer>
</div>
</div>
</div>
css:
.row {
margin: 0 auto;
clear: both;
}
.col {
box-sizing: border-box;
float: left;
width: 100%;
margin: 0;
}
body {
margin: 0px 0;
}
footer {
background-color:#343434;
width: 100%;
margin-top: 20px;
height: auto;
font-family: 'billymedium';
font-size: 23px;
line-height: 23px;
}
footer a, a:visited {
color: #b7b7b7;
text-decoration: none;
}
footer a:hover {
color: #5a8747;
}
footer img {
max-width: 30px;
padding-top: 10px;
padding-bottom: 5px;
}
footer ul.links, ul.pictures {
list-style: none;
margin-top: 0;
padding: 0;
}
footer li:first-child {
display: inline;
margin-left: 0px;
}
footer li.links {
display: inline;
margin-left: 25px;
float: left;
padding-top: 15px;
}
footer li.pictures {
display: inline;
margin-right: 5px;
text-align: right;
}
Adding this CSS to your stylesheet should solve the problem:
footer {
overflow: hidden;
}
This is a clearing issue. You might have a .clearfix or .clear class made if this site is using a framework but basically it looks like this:
.clear {
clear: both;
}
Add this inside of the "col span-12" div right before it ends:
<div class="clear"></div>
If you don't want to create a class, this also works:
<div style="clear:both;"></div>