I have an unordered list item element with some list items and links. Above each link I would like to show an image. I would like the text to be horizontally aligned below the relevant image.
<ul>
<li>Accounts</li>
<li>Search</li>
<li>Bag</li>
</ul>
This is my CSS
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
li a:before {
display: block;
width: 50px;
height: 50px;
background: url('http://placehold.it/50x50') no-repeat center;
content: '';
margin-bottom: 5px;
}
Just add text-align:center to the li and a left/right margin of auto for the pseudo element and then you can go one step further and set a width for the li so that they're all the same width regardless of the length of the text.
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
width:75px;
display: inline-block;
text-align:center;
}
li a {
display:block;
}
li a:before {
display: block;
width: 50px;
height: 50px;
background: url('http://placehold.it/50x50') no-repeat center;
content: '';
margin:0 auto 5px;
}
<ul>
<li>Accounts</li>
<li>Search</li>
<li>Bag</li>
</ul>
An alternative solution using flexbox.
You can make the a element a flex container, and center the content horizontally.
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
a {
display: flex;
flex-direction: column;
align-items: center;
min-width: 4em;
}
li a:before {
display: block;
width: 50px;
height: 50px;
background: url('http://placehold.it/50x50') no-repeat center;
content: '';
margin-bottom: 5px;
}
<ul>
<li>Accounts</li>
<li>Search</li>
<li>Bag</li>
</ul>
Related
I have tried to use the margin and padding tags, but I can never get it right because screen sizes change, and that makes the arrangements change. Also tried using flex
I am trying to make a navigation bar (top) in HTML and CSS, but I want to make all the tags uniform in spacing so it looks nicer.
Right now it looks like this:
Here is my HTML code:
<div class="header">
<div class="container">
<h1 class="logo"></h1>
<div class="nav">
<ul>
<li>Home</li>
<li>History</li>
<li>Where to Eat</li>
<li>Places to visit</li>
<li>Beauties of Nature</li>
<li>How to navigate Seoul</li>
</ul>
</div>
</div>
</div>
CSS:
.container {
width: 80%;
margin: 0 auto;
}
.header {
background: #293380;
}
.header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
.nav {
float: right;
}
.nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
flex: 1;
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
.nav a {
color: #F0EFF7;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
.nav a:hover {
color: #953D60;
}
.nav a::before {
content: '';
display: block;
height: 5px;
background-color: #F7D9F1;
position: absolute;
top: 0;
width: 0%;
in your css file, under .nav ul, write justify-content: space-between;, which spaces all the elements evenly.
I really recommend you look further into justify-content, since its the main way to space out the content the way you want. Really good tool
I'm very new to coding and am working on a fictitious website for a restaurant. I can't seem to figure out how to remove the gap between my drop down menu and top navigation bar under the menu section. Ideally I would like the pink drop down box to be directly under the black nav bar. Any suggestions on what I have done wrong? I've played around with margins and padding everywhere. Even did a margin 0 and padding 0 at the start of my CSS page to see if that wold have an effect, it didn't.
Attached is my code for HMTL and CSS
body {
background-color: #41393d;
}
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: black;
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: black;
}
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo {
height: 100%;
display: table-cell;
vertical-align: middle;
} /* Navigation */
.navigation {
float: right;
height: 100%;
} .navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 0px 20px;
position: relative;
}
a:hover {
color: #8a8c8f !important;
} .navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#BE1E2D;
font-family: athelas,
serif; font-style:normal;
text-decoration: none;
} .sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: #d4a18d;
} .navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
<!DOCTYPE html>
TOWN_Restaurant` <header>
<div class="header">
<div class="header_content">
<div class="logo_container">
<img alt="TOWN logo" id="image" class="logo" src="images/town_logo.png">
</div>`
<ul class="navigation">
<li>Home</li>
<li>Our Story</li>
<li>Menu
<div class="sub_menu1">
<ul>
<li>Cuisine</li>
<li>Beverages</li>
</ul>
</div>
</li>
<li>Contact</li>
<li>Reservations</li>
</ul>
</div>
</div>
</header>
The problem is that your nav <ul> has a margin of 16px for top and bottom while the height is 100% of the parent's height which is 50px so the total height of the <ul> is:
50px (parent's height) + 16px (margin-top) + 16px (margin-bottom) = 82px
and this is making it get out of the header which has a fixed height of 50px.
To get this fixed, you have to
1st: set your nav <ul>'s margin to 0 and use padding-top on the <li>s instead with their box-sizing value set to border box so that padding doesn't affect the height of the <li>s.
2nd: set the top of your "sub_menu1" to 100% (which is 50px in this case [the parent's height]) and this will get the the dropdown menu right beneath your navigation.
and here it is working:
body {
background-color: #41393d;
}
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: black;
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: black;
}
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo {
height: 100%;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
}
a:hover {
color: #8a8c8f !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color: #BE1E2D;
font-family: athelas, serif;
font-style: normal;
text-decoration: none;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: #d4a18d;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
TOWN_Restaurant`
<header>
<div class="header">
<div class="header_content">
<div class="logo_container">
<img alt="TOWN logo" id="image" class="logo" src="images/town_logo.png">
</div>`
<ul class="navigation">
<li>Home</li>
<li>Our Story</li>
<li>Menu
<div class="sub_menu1">
<ul>
<li>Cuisine</li>
<li>Beverages</li>
</ul>
</div>
</li>
<li>Contact</li>
<li>Reservations</li>
</ul>
</div>
</div>
</header>
I cannot seem to get the navigation to vertical-align: middle; along with the title. Any idea how to fix this issue?
https://jsfiddle.net/ozvmkeaq/
header,
nav {
height: 80px;
}
header {
background-color: #E74C3C;
vertical-align: middle;
}
header nav {
float: right;
list-style: center;
text-transform: uppercase;
color: #ECF0F1;
vertical-align: middle;
}
nav li {
display: inline;
padding: 10px;
}
nav a {
display: inline-block;
text-decoration: none;
}
.title {
float: left;
}
.title h1 a {
color: #ECF0F1;
text-decoration: none;
padding: 15px;
}
<header>
<div class="title">
<h1> HTTP</h1>
</div>
<nav>
<ul>
<li class="active">Home</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
</header>
By adding the following CSS, the links vertically center.
ul { margin: 0; height: 100%; display: table; width: 100%;}
nav ul li { height: 100%; vertical-align: middle; display: table-cell;}
I've also updated your fiddle: https://jsfiddle.net/ozvmkeaq/2/
Basically, you need the combination of table and vertical-align properties to tell the browser you want the content in the middle.
As as an alternative, you can also use flex-box.
display: flex;
align-items: center;
You need to set vertical-align:middle to the list items themselves. I would also set it to the links directly to compensate for any list item padding etc.
For example:
nav ul li, nav ul li a{vertical-align:middle;}
This is because vertical-align sets the position based on the parent element, so you need to set it to the child element (different from properties such as text-align where you can set the style to the parent element to affect the elements within).
See more on vertical align at the W3C vertical-align property guide.
Or Try it here.
Try this
header {
background-color: #E74C3C;
height: 5em;
position: relative;
}
header * {
padding: 0;
margin: 0;
}
header a {
text-decoration: none;
}
header nav, header .title {
display: block;
height: 100%;
}
header .title {
position: absolute;
top: 0;
left: 0;
}
header .title h1 {
position: relative;
top: 0.70em;
}
header .title a {
color: #ECF0F1;
margin: 0 0.5em;
}
header nav {
position: absolute;
right: 0;
top: 0;
padding: 0 0.5em;
}
header ul {
list-style-type: none;
list-style-position: inside;
position: relative;
top: 2em;
right: 0;
}
header ul li {
display: inline-block;
padding-right: 0.25em;
}
update this 2 style and it should do the trick.
nav ul
{
padding: 0px;
margin: 0px;
}
nav li
{
display:inline-block;
padding-right:10px;
padding-left:10px;
line-height: 80px;
background-color: green;
}
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
Trying to position a horizontal menu over an image.
I have it positioned over the image as of now, but I can't seem to center the li elements to the middle of the screen.
Here is the HTML:
<div id="banner">
<img src="security-people-interior.jpg"/>
</div>
<div id="menu-outer">
<div id="menu">
<ul id="horizontal-list">
<li>About</li>
<li>Products</li>
<li>Monitoring</li>
<li>Testimonials</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</div>
The CSS3:
#banner {
display: block;
margin-left: auto;
margin-right: auto;
}
img, #banner {
width: 100%;
}
#menu-outer {
background: url(images/bar-bg.jpg) repeat-x;
z-index: 100;
position: absolute;
top: 25%;
width: 100%;
}
#menu {
????
}
ul#horizontal-list {
/*list-style: none;*/;
}
ul#horizontal-list li {
display: inline;
}
#menu a {
text-decoration: none;
margin: 10px;
float: left;
color: black;
padding: 2px 5px;
text-align: center;
white-space: nowrap;
}
#menu a:hover {
color: #fff;
background: red;
}
The only thing I am able to use is float in #menu{} in the css, but obviously float doesn't have centering.
CSS3 isn't my particular favourite to deal with, so any help would be greatful thanks.
Here are two options:
Set the display of the #horizontal-list element to inline-block and then use text-align: center on the parent element in order to center it.
Example Here
#menu {
text-align: center;
}
#horizontal-list {
display: inline-block;
}
Alternatively, using flexboxes:
Example Here
#menu {
display: flex;
justify-content: center;
}