I am working on a simple UL based horizontal navigation. What I would like is for the clickable area to match the height and width of each LI. I have tried a lot of variations on this theme, but this is about the happiest compromise shown below, where I get about half the area within each LI to be clickable when the text is aligned in the middle. Thanks for any input.
body {
background-color: #ffaa00;
}
#main {
width: 1200px;
height: 890px;
margin: 0 auto;
}
#content {
width: 100%;
height: 100%;
border: 1px solid #000;
background-color: #fff;
margin: 0;
padding: 0;
}
#nav {
height: 50px;
width: 100%;
background-color: #ccc;
}
ul {
margin-top: 0;
padding-left: 0;
list-style-type: none;
}
li {
display: table-cell;
height: 50px;
width: 190px;
vertical-align: middle;
text-align: center;
}
li:hover {
background-color: #999;
border-radius: 6px;
}
a {
display: inline-block;
height: 25px;
width: 190px;
}
<div id="main">
<div id="content">
<div id="nav">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</div>
You have to change height to 100% and use :before to vertical-align text middle.
body {
background-color: #ffaa00;
}
#main {
width: 1200px;
height: 890px;
margin: 0 auto;
}
#content {
width: 100%;
height: 100%;
border: 1px solid #000;
background-color: #fff;
margin: 0;
padding: 0;
}
#nav {
height: 50px;
width: 100%;
background-color: #ccc;
}
ul {
margin-top: 0;
padding-left: 0;
list-style-type: none;
}
li {
display: table-cell;
height: 50px;
width: 190px;
vertical-align: middle;
text-align: center;
}
li:hover {
background-color: #999;
border-radius: 6px;
}
a {
display: inline-block;
height: 100%;
width: 190px;
}
a:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
<div id="main">
<div id="content">
<div id="nav">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</div>
Related
How to put the picture in the left side of my navbar?
I can't seem to understand how it works- the picture is going up and the navbar is outside the div.
body {
margin: 0;
}
#navbar {
background-color: gray;
width: 100%;
height: 160px;
}
#logo {
width: 50%;
height: 50%;
}
ul {
list-style: none;
background-color: red;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}
#navbar li {
display: inline;
}
#navbar li a {
display: inline-block;
padding: 10px;
font-size: 20px;
text-decoration: none;
}
<div class="container">
<div id="navbar"> <img class="logo" src="logo.gif">
<ul>
<li>Home</li>
<li>Game Info</li>
<li>Gameplay</li>
<li>Media</li>
</ul>
</div>
</div>
use this code
#navbar{
position: absolute;
right: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
In the case you want to use flexbox, you may try this:
favorite body {
margin: 0;
}
#navbar {
background-color: gray;
width: 100%;
height: 160px;
/*****************/
display:flex;
justify-content:space-between;
align-items:center;
/*****************/
}
#logo {
width: 50%;
height: 50%;
}
ul {
list-style: none;
background-color: red;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}
#navbar li {
display: inline;
}
#navbar li a {
display: inline-block;
padding: 10px;
font-size: 20px;
text-decoration: none;
}
<div class="container">
<div id="navbar"> <img width="40" class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png">
<ul>
<li>Home</li>
<li>Game Info</li>
<li>Gameplay</li>
<li>Media</li>
</ul>
</div>
</div>
1-Access class logo by '.'
2-apply positioning to class logo as i applied and set height and width of class
3- set width of also
heres my code
favorite body {
margin: 0;
}
#navbar {
background-color: gray;
width: 100%;
height: 160px;
/*****************/
display:flex;
justify-content:space-between;
align-items:center;
/*****************/
}
.logo {
position :relative;
top: 0px;
width: 10%;
height: 27%;
}
ul {
list-style: none;
background-color: red;
width: 90%;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}
#navbar li {
display: inline;
}
#navbar li a {
display: inline-block;
padding: 10px;
font-size: 20px;
text-decoration: none;
}
<div class="container">
<div id="navbar"> <img width="40" class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png">
<ul>
<li>Home</li>
<li>Game Info</li>
<li>Gameplay</li>
<li>Media</li>
</ul>
</div>
</div>
down vote favorite body {
margin: 0;
}
#navbar {
background-color: gray;
width: 100%;
height: 160px;
}
#logo {
width: 50%;
height: 50%;
}
ul {
list-style: none;
background-color: red;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}
#navbar li {
display: inline;
}
#navbar li a {
display: inline-block;
padding: 10px;
font-size: 20px;
text-decoration: none;
}
<div class="container">
<div id="navbar"> <img class="logo" src="logo.gif">
<ul>
<li>Home</li>
<li>Game Info</li>
<li>Gameplay</li>
<li>Media</li>
</ul>
</div>
</div>
use this css
ul {
list-style: none;
background-color: red;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
display: inline-block;
}
I am currently playing arround with customizing lists in HTML and CSS, so I tried to use custom images to be used for the li 'dot'.
However, it is not shown. Could someone tell me whats wrong with this code snippet?
body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
height:100vh;
background-color: white;
}
.container > div {
min-height: 100vh;
border: 1px solid black;
box-sizing:border-box;
background-color: inherit;
}
container > div .content{
height: 100vh;
width: 100vw;
background-color: inherit;
}
.full-width {
width:100%;
}
.half-width {
width:50%;
}
.half-width > .half-width-content{
position: relative;
margin-top: 0;
height: 100%;
width: 100%;
}
list-div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list-div ul {
padding: 0;
width: 75%;
}
.list-div li {
position: relative;
margin-bottom: 5px;
padding: 10px;
text-align: left;
visibility: visible;
text-transform: uppercase;
}
.list-div li:nth-child(1){
list-style-image: url('https://fakeimg.pl/30x30/?text=A');
list-style-position: outside;
}
<div class="container">
<div class="half-width">
<div class="half-width-content">
<div class="list-div">
<ul class="items-list" id="list">
<li>List item A</li>
<li>List item B</li>
<li>List item C</li>
<li>List item D</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Use list-style-type: none; and
margin-left:40px; to li
body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
height:100vh;
background-color: white;
}
.container > div {
min-height: 100vh;
border: 1px solid black;
box-sizing:border-box;
background-color: inherit;
}
container > div .content{
height: 100vh;
width: 100vw;
background-color: inherit;
}
.full-width {
width:100%;
}
.half-width {
width:50%;
}
.half-width > .half-width-content{
position: relative;
margin-top: 0;
height: 100%;
width: 100%;
}
list-div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list-div ul {
padding: 0;
width: 75%;
}
.list-div li {
position: relative;
margin-bottom: 5px;
padding: 10px;
text-align: left;
visibility: visible;
text-transform: uppercase;
list-style-type: none;
margin-left:40px;
}
.list-div li:nth-child(1){
list-style-image: url('https://fakeimg.pl/30x30/?text=A');
list-style-position: outside;
}
<div class="container">
<div class="half-width">
<div class="half-width-content">
<div class="list-div">
<ul class="items-list" id="list">
<li>List item A</li>
<li>List item B</li>
<li>List item C</li>
<li>List item D</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Edit to your comment center li with image use as below to .list-div li:nth-child(1)
background: url(https://fakeimg.pl/30x30/?text=A);
list-style-type: none;
margin: 0;
padding: 10px 10px 10px 48px;
vertical-align: middle;
background-repeat: no-repeat;
body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
height:100vh;
background-color: white;
}
.container > div {
min-height: 100vh;
border: 1px solid black;
box-sizing:border-box;
background-color: inherit;
}
container > div .content{
height: 100vh;
width: 100vw;
background-color: inherit;
}
.full-width {
width:100%;
}
.half-width {
width:50%;
}
.half-width > .half-width-content{
position: relative;
margin-top: 0;
height: 100%;
width: 100%;
}
list-div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list-div ul {
padding: 0;
width: 75%;
}
.list-div li {
position: relative;
margin-bottom: 5px;
padding: 10px;
text-align: left;
visibility: visible;
text-transform: uppercase;
list-style-type: none;
margin-left:40px;
}
.list-div li:nth-child(1){
background: url(https://fakeimg.pl/30x30/?text=A);
list-style-type: none;
margin: 0;
padding: 10px 10px 10px 48px;
vertical-align: middle;
background-repeat: no-repeat;
}
<div class="container">
<div class="half-width">
<div class="half-width-content">
<div class="list-div">
<ul class="items-list" id="list">
<li>List item A</li>
<li>List item B</li>
<li>List item C</li>
<li>List item D</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I'm trying to reproduce a header that looks something similar to this:
But I can't seem to be able to create the repeating diamond pattern under the black bar. The diamond pattern looks like this:
Here's what I currently have written in HTML and CSS, it's only a test version for now
figure {
background: black;
border-radius: 3px;
height: 50px;
margin: 0px;
}
html {
background-color: grey;
width: 1212px;
height: 1476px;
margin: auto;
}
img {
border-radius: 100%;
position: relative;
vertical-align: middle;
left: 50px;
bottom: 30px;
}
figcaption {
display: inline-block;
vertical-align: middle;
}
li {
display: inline-block;
text-decoration: none;
overflow: hidden;
margin-bottom: 50px;
}
a {
list-style: none;
text-decoration: none;
text-align: center;
color: white;
}
ul:first-child {
float: left;
margin-left: 100px;
}
ul:last-child {
float: right;
margin-left: 550px;
}
div {
background-color: blue;
width: 100%;
height: 70px;
}
<div></div>
<figure>
<img width="100" height="100" src="http://i.imgur.com/HiCMdId.png" />
<figcaption>
<ul>
<li>
test
test
</li>
</ul>
<ul>
<li>test
</li>
<li>test
</li>
<li>test
</li>
<li>test
</li>
</ul>
</figcaption>
</figure>
You should put the image as a background to a div that spans the whole width of the menu. You can remove the image src from the HTML.
So your CSS would look similar to this :
figure{
background-image: url('http://i.imgur.com/HiCMdId.png');
background-repeat: background-repeat: repeat-x;
width: 100%;
}
This is what I got. I am using a psuedo element called ::after. Just be warned, since there is no class called on the figure that if you made any other figure tags on the page, they would also have that background unless you override the styles.
figure {
background: black;
border-radius: 3px;
height: 50px;
margin: 0px;
position: relative;
}
figure::after {
content: ' s';
position: absolute;
top: 100%;
left: 0;
right: 0;
background: url(http://i.stack.imgur.com/bisH4.png) repeat-x 0 0;
z-index: -1;
display: block;
color: transparent;
background-size: 10px 10px;
}
html {
background-color: grey;
width: 1212px;
height: 1476px;
margin: auto;
}
img {
border-radius: 100%;
position: relative;
vertical-align: middle;
left: 50px;
bottom: 30px;
}
figcaption {
display: inline-block;
vertical-align: middle;
}
li {
display: inline-block;
text-decoration: none;
overflow: hidden;
margin-bottom: 50px;
}
a {
list-style: none;
text-decoration: none;
text-align: center;
color: white;
}
ul:first-child {
float: left;
margin-left: 100px;
}
ul:last-child {
float: right;
margin-left: 550px;
}
div {
background-color: blue;
width: 100%;
height: 70px;
}
<div></div>
<figure>
<img width="100" height="100" src="http://i.imgur.com/HiCMdId.png" />
<figcaption>
<ul>
<li>
test
test
</li>
</ul>
<ul>
<li>test
</li>
<li>test
</li>
<li>test
</li>
<li>test
</li>
</ul>
</figcaption>
</figure>
I have a row of 3 elements and for some reason I can't get the left side nav list to work with inline-block. It works for the second and I've come across this problem before but don't remember the exact reasoning behind the problem since that was when I first started to learn to build websites.
#nav {
display: block;
clear: both;
width: 100%;
min-width: 1200px;
height: 50px;
margin-right: auto;
margin-left: auto;
}
#nav_left {
display: block;
float: left;
margin-left: auto;
margin-right: auto;
width: 36.5%;
height: 40px;
text-align: left;
}
#nav_left ul {
font-size: 19px;
letter-spacing: 1px;
list-style-type:none;
}
#nav_nav li {
width: 15%;
display: inline-block;
}
#nav_left li a {
text-decoration: none;
}
#center {
display: block;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-size: 20px;
letter-spacing: 1px;
width: 24%;
height: 40px;
text-align: center;
}
#nav_right {
display: block;
float: right;
margin-top: -44px;
margin-left: auto;
margin-right: auto;
width: 36.5%;
height: 40px;
text-align: left;
}
#nav_right ul {
font-size: 19px;
letter-spacing: 1px;
list-style-type:none;
}
#nav_right li {
width: 15%;
display: inline-block;
}
#nav_right li a {
text-decoration: none;
}
<section id="nav">
<div id="nav_left">
<ul>
<li>item
</li>
<li>item
</li>
<li>item
</li>
</ul>
</div>
<div id="center">
<p>words here</p>
</div>
<div id="nav_right">
<ul>
<li>item
</li>
<li>item
</li>
<li>item
</li>
</ul>
</div>
</section>
I appreciate any help given, thanks.
The reason is you had typo with #nav_left
You have:
#nav_nav li {
width: 15%;
display: inline-block;
}
Change it to:
#nav_left li {
width: 15%;
display: inline-block;
}
Snippet Demo below:
#nav {
display: block;
clear: both;
width: 100%;
min-width: 1200px;
height: 50px;
margin-right: auto;
margin-left: auto;
}
#nav_left {
display: block;
float: left;
margin-left: auto;
margin-right: auto;
width: 36.5%;
height: 40px;
text-align: left;
}
#nav_left ul {
font-size: 19px;
letter-spacing: 1px;
list-style-type: none;
}
#nav_left li {
width: 15%;
display: inline-block;
}
#nav_left li a {
text-decoration: none;
}
#center {
display: block;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-size: 20px;
letter-spacing: 1px;
width: 24%;
height: 40px;
text-align: center;
}
#nav_right {
display: block;
float: right;
margin-top: -44px;
margin-left: auto;
margin-right: auto;
width: 36.5%;
height: 40px;
text-align: left;
}
#nav_right ul {
font-size: 19px;
letter-spacing: 1px;
list-style-type: none;
}
#nav_right li {
width: 15%;
display: inline-block;
}
#nav_right li a {
text-decoration: none;
}
<section id="nav">
<div id="nav_left">
<ul>
<li>item
</li>
<li>item
</li>
<li>item
</li>
</ul>
</div>
<div id="center">
<p>words here</p>
</div>
<div id="nav_right">
<ul>
<li>item
</li>
<li>item
</li>
<li>item
</li>
</ul>
</div>
</section>
I have been trying to vertical align links in a list, where all but one of the links has background color/border (to look like a button).
Even though the code on this fiddle works, it doesn't respect the reduced height of that link (the Sign In link).
html body,
ul,
div,
li,
a {
padding: 0;
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.inner {
height: 75px;
background-color: grey;
}
a {
color: white;
text-decoration: none;
font-weight: normal;
}
.logo {
display: block;
background-image: url(http://static1.tme.eu/pics/icons/no-image-placeholder-big.png);
background-size: 150px 20px;
background-position: left center;
background-repeat: no-repeat;
height: 100%;
width: 150px;
}
.right-nav {
height: 100%;
display: inline-block;
float: right;
}
ul {
height: 100%;
margin: 0;
}
ul li {
height: 100%;
float: left;
display: table;
margin: 0;
padding: 0;
line-height: 46px;
margin-left: 20px;
}
ul li a {
display: table-cell;
vertical-align: middle;
line-height: 46px;
}
.icon-user:before {
content: "\e745";
}
a.button {
height: 60px;
background-color: #f38060;
border-radius: 3px;
border: 1px solid #f38060;
box-sizing: border-box;
color: white;
display: table-cell;
font-size: 14px;
font-weight: normal;
line-height: 20px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
text-align: left;
vertical-align: middle;
}
<div class="inner">
<ul class="left">
<li>
<a class="logo" href="/"></a>
</li>
</ul>
<div class="right-nav">
<a class="mobile-menu right" href="#"><span class="icon-menu"></span>
</a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>
<a class="button" href="#" style="height: 60px;">Sign In
<span class="icon-user"></span>
</a>
</li>
</ul>
</div>
</div>
JSFiddle link: http://jsfiddle.net/6er3aguk/
What I would like to achieve is basically to have some sort of top/bottom margin on that Sign In link, so it doesn't stick to the top and bottom of the surrounding div.
Any ideas on how I can achieve that?
This is how I would create the effect that you're looking for.
This will vertically center the links, clear the parent properly. And irregardless of the browsers font-setting, at it's minimum width it will stop contracting with 15px of spacing between each element and the sides of the container if the window is smaller than the nav, instead of overlapping or moving to new lines.
This also completely avoids the use of floats and display: table hacks.
JSFiddle
*, *:before, *:after {
box-sizing: border-box;
}
html body, ul, div, li, a {
padding: 0;
margin: 0;
}
.left, .right {
position: absolute;
top: 0; bottom: 0;
white-space: nowrap;
}
.left {
position: absolute;
left: 15px;
}
.right {
text-align: right;
position: absolute;
left: 172.5px;
right: 0;
}
.inner {
position: relative;
height: 75px;
background-color: grey;
}
ul {
height: 100%;
font-size: 0;
}
ul:before {
content: " ";
height: 100%;
}
ul:before,
ul li {
display: inline-block;
vertical-align: middle;
}
ul li a {
font-size: 12pt;
display: block;
vertical-align: middle;
color: white;
text-decoration: none;
font-weight: normal;
padding: 10px 7.5px;
}
.right li:last-child {
padding-left: 7.5px;
padding-right: 15px;
}
.right a {
border-radius: 3px;
}
.right a:hover {
background: #888;
}
.icon-user:before {
content:"\e745";
}
a.button {
background: #f38060;
color: white;
padding: 10px 15px;
}
a.button:hover {
background: #f98666;
}
a.logo {
background-image: url(//placehold.it/150x20);
background-size: 150px 20px;
height: 20px;
width: 150px;
padding: 0px;
}
<div class="inner">
<ul class="left">
<li><a class="logo" href="/"></a></li>
</ul>
<div class="right">
<a class="mobile-menu" href="#">
<span class="icon-menu"></span>
</a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>
<a class="button" href="#">Sign In
<span class="icon-user"></span>
</a>
</li>
</ul>
</div>
</div>
You can achieve the preferred style by putting the Sign In text and the span inside a div and applying the same styles you did for a.button to that div.
html body,
ul,
div,
li,
a {
padding: 0;
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.inner {
height: 75px;
background-color: grey;
}
a {
color: white;
text-decoration: none;
font-weight: normal;
}
.logo {
display: block;
background-image: url(http://static1.tme.eu/pics/icons/no-image-placeholder-big.png);
background-size: 150px 20px;
background-position: left center;
background-repeat: no-repeat;
height: 100%;
width: 150px;
}
.right-nav {
height: 100%;
display: inline-block;
float: right;
}
ul {
height: 100%;
margin: 0;
}
ul li {
height: 100%;
float: left;
display: table;
margin: 0;
padding: 0;
line-height: 46px;
margin-left: 20px;
}
ul li a {
display: table-cell;
vertical-align: middle;
line-height: 46px;
}
.icon-user:before {
content: "\e745";
}
#signin {
max-height: 60px;
background-color: #f38060;
border-radius: 3px;
border: 1px solid #f38060;
box-sizing: border-box;
color: white;
display: table-cell;
font-size: 14px;
font-weight: normal;
line-height: 20px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
text-align: left;
vertical-align: middle;
}
<div class="inner">
<ul class="left">
<li>
<a class="logo" href="/"></a>
</li>
</ul>
<div class="right-nav">
<a class="mobile-menu right" href="#"><span class="icon-menu"></span>
</a>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>
<a class="button" href="#" style="
height: 60px;
">
<div id="signin">Sign In<span class="icon-user"></span>
</div>
</a>
</li>
</ul>
</div>
</div>