Space <li> evenly?

Space <li> evenly? - html

I have OCD and the following needs to be fixed (the spacing of word's in my navigation bar).
body {
width: 100%;
background-color: #e6e6e6;
font-family: Miramonte;
margin: auto;
}
.navContainer {
height: 30px;
width: 100%;
margin: auto;
padding-top: 30px;
}
nav {
width: 100%;
max-width: 400px;
background-color: #333;
padding: 0;
margin: 1em auto;
overflow: visible;
height: 30px;
}
nav ul {
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
}
nav ul li {
text-align: center;
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
float: left;
width: 20%;
max-width: 80px;
display: block;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
color: #d9d9d9;
overflow: visible;
line-height: 30px;
display: block;
position: relative;
}
a:hover {
color: #e6e6e6;
}
a img {
width: 90%;
margin: 0;
padding: 0;
vertical-align: baseline;
position: absolute;
bottom: -30px;
right: 5%;
left: 5%;
}
<div class="navContainer">
<nav>
<ul>
<li> art
</li>
<li> download
</li>
<li>
<a href="home.html">
<img src="image/symbol.png">
</a>
</li>
<li> portfolio
</li>
<li> product
</li>
</ul>
</nav>
</div>
All I need is the words to be evenly spread out with the image still intact in the middle like the picture dictates.
Notice how the word art is unevenly spread compared to the right side?
I am the first one to say that I am building my own website and I am new to CSS/HTML scripting.
Appreciate the help,
Thanks.

Use display: table / table-cell for the list / list items.
body {
width: 100%;
background-color: #e6e6e6;
font-family: Miramonte;
margin: auto;
}
.navContainer {
height: 30px;
width: 100%;
margin: auto;
padding-top: 30px;
}
nav {
width: 100%;
list-style: none;
max-width: 400px;
background-color: #333;
padding: 0;
margin: 1em auto;
overflow: visible;
height: 30px;
}
nav ul:before {
display: table;
content: " ";
}
nav ul {
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
}
nav ul li {
text-align: center;
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
float: none;
width: 1%;
max-width: 80px;
display: table-cell;
position: relative;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
color: #d9d9d9;
overflow: visible;
line-height: 30px;
display: block;
position: relative;
}
a:hover {
color: #e6e6e6;
}
a img {
width: 90%;
margin: 0;
padding: 0;
vertical-align: baseline;
position: absolute;
bottom: -30px;
right: 5%;
left: 5%;
}

Removing the float: left and the display: block from the nav ul li CSS selector and then adding
display: flex;
flex-flow: row wrap;
justify-content: space-between;
to the nav ul CSS selector will change the display from block to flexible boxes, allowing for the text to be more evenly spread out throughout the entire element
body {
width: 100%;
background-color: #e6e6e6;
font-family: Miramonte;
margin: auto;
}
.navContainer {
height: 30px;
width: 100%;
margin: auto;
padding-top: 30px;
}
nav {
width: 100%;
max-width: 400px;
background-color: #333;
padding: 0;
margin: 1em auto;
overflow: visible;
height: 30px;
}
nav ul {
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
nav ul li {
text-align: center;
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
// float: left;
width: 20%;
max-width: 80px;
// display: block;
flex: 1;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
color: #d9d9d9;
overflow: visible;
line-height: 30px;
display: block;
position: relative;
}
a:hover {
color: #e6e6e6;
}
a img {
width: 90%;
margin: 0;
padding: 0;
vertical-align: baseline;
position: absolute;
bottom: -30px;
right: 5%;
left: 5%;
}
<body>
<div class="navContainer">
<nav>
<ul>
<li> art
</li>
<li> download
</li>
<li>
<a href="home.html">
<img src="image/symbol.png">
</a>
</li>
<li> portfolio
</li>
<li> product
</li>
</ul>
</nav>
</div>
</body>
EDIT:
I added a few characters around the word art in the link to give it some spacing to resemble the other links.
is how you create whitespace in HTML

Something like this (with slightly changed markup)?
body {
width: 100%;
background-color: #e6e6e6;
font-family: Miramonte;
margin: auto;
}
.navContainer {
height: 30px;
width: 100%;
margin: auto;
padding-top: 30px;
}
nav {
width: 100%;
max-width: 400px;
background-color: #333;
padding: 0;
margin: 1em auto;
display: flex;
height: 30px;
}
nav ul {
display: flex;
height: 30px;
margin: 0;
padding: 0;
}
nav ul:nth-child(1), nav ul:nth-child(3) {
flex: 1;
justify-content: space-between;
}
nav ul:nth-child(1)::before, nav ul:nth-child(3)::before,
nav ul:nth-child(1)::after, nav ul:nth-child(3)::after{
content: '';
}
nav ul:nth-child(2) {
width: 18%;
}
nav ul li {
text-align: center;
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
max-width: 80px;
display: block;
}
nav ul:nth-child(2) li {
width: 100%;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
color: #d9d9d9;
overflow: visible;
line-height: 30px;
display: block;
position: relative;
}
a:hover {
color: #e6e6e6;
}
a img {
width: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
position: absolute;
bottom: -30px;
left: 0%;
}
<div class="navContainer">
<nav>
<ul>
<li> art </li>
<li> download </li>
</ul>
<ul>
<li><img src="http://www.pd4pic.com/images/eye-black-fan-symbol-design-sun-flower-circle.png"></li>
</ul>
<ul>
<li> portfolio </li>
<li> product </li>
</ul>
</nav>
</div>

Try this, just change the nav percentage as per your requirement. Also for more accurate results you can add media query.
body {
width: 100%;
background-color: #e6e6e6;
font-family: Miramonte;
margin: auto;
}
.navContainer {
height: 30px;
width: 100%;
margin: auto;
padding-top: 30px;
}
nav {
width: 100%;
list-style: none;
max-width: 75%;
background-color: #333;
padding: 0;
margin: 1em auto;
overflow: visible;
height: 30px;
}
nav ul:before {
display: table;
content: " ";
}
nav ul {
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
}
nav ul li {
text-align: center;
overflow: visible;
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
float: none;
width: 1%;
max-width: 80px;
display: table-cell;
position: relative;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
color: #d9d9d9;
overflow: visible;
line-height: 30px;
display: block;
position: relative;
}
a:hover {
color: #e6e6e6;
}
a img {
width: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
position: absolute;
bottom: -30px;
right: 0;
left: 0;
}
<body>
<div class="navContainer">
<nav>
<ul>
<li> art
</li>
<li> download
</li>
<li>
<a href="home.html">
<img src="image/symbol.png">
</a>
</li>
<li> portfolio
</li>
<li> product
</li>
</ul>
</nav>
</div>
</body>

Related

Why doesn't nav height automatically adjust to its content?

I have the following nav element in my html:
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>
My CSS design for the normal size of the homepage looks like this:
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
This works perfectly fine. However, for smaller displays, I want to display the navigation items vertically, so I have the following CSS code:
#media screen and (max-width: 1000px) {
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.navunderline {
display: none;
}
nav li:hover {
background-color: #8b131f;
}
}
Here is the problem: The height of my nav element in this case is set to auto. If I set a fixed value, it displays correctly. However, I want to adjust it automatically to the size of the content. Problem is, that with height set to auto, the nav element completely vanishes to zero height. How can I set it, so it's height is adjusted by the elements it contains?
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#media screen and (max-width: 1000px) {
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.navunderline {
display: none;
}
nav li:hover {
background-color: #8b131f;
}
}
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>

Problem is, that with height set to auto, the nav element completely vanishes to zero height. How can I set it, so its height is adjusted by the elements it contains?
This problem is occurring because your ul element has position: absolute. Because of this property, your ul element is no longer "living" in the same space of the normal document layout.
To fix this, you can add this to your media query:
#media screen and (max-width: 1000px) {
nav ul {
position: relative;
/* ... */
}
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#media screen and (max-width: 1000px) {
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
position: relative; /* Add this */
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.navunderline {
display: none;
}
nav li:hover {
background-color: #8b131f;
}
}
<nav>
<ul>
<li>
Unternehmen
<div class="navunderline"></div>
</li>
<li>
Leistungen
<div class="navunderline"></div>
</li>
<li>
Referenzen
<div class="navunderline"></div>
</li>
<li>
News
<div class="navunderline"></div>
</li>
<li>
Kontakt
<div class="navunderline"></div>
</li>
</ul>
</nav>

Navigation bar shrinks when position is set to fixed

I am currently having an issue where my navigation bar and banner shrink when I set their position to fixed.I have many things like changing z-index,setting its top position to 0,adding auto margin etc, and none of it worked.I hope someone can point me to my mistake.This is my html code:
html,
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
.banner {
width: 100%;
overflow: hidden;
background-color: white;
}
.banner img {
width: 70%;
height: 150px;
padding: 0 15%;
}
.top {
position: fixed;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<div class="banner">
<img src="images/winwin-logo-cover.jpg" alt="winwin logo">
</div>
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>
this is how it should look like
this is how it looks like when i put .top{position:fixed}

When you set an element to absolute or fixed position, it will be out of the the normal content flow and trigger the shrink to fit feature. You can apply the offsets and width/height to position and recreate the box size you wish to have.
.top {
position: fixed;
left: 0; /* ADDED */
top: 0; /* ADDED */
width: 100%; /* ADDED */
}
html,
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
.banner {
width: 100%;
overflow: hidden;
background-color: white;
}
.banner img {
width: 70%;
height: 150px;
padding: 0 15%;
}
.top {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<div class="banner">
<img src="images/winwin-logo-cover.jpg" alt="winwin logo">
</div>
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>

Because .top has no width. However, when set to fixed it is using the viewport width to calculate the width. You might want to set it to 75%.
You also might want to set .container to position: relative so .top will relate to its borders.
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
position: relative;
}
.top {
position: fixed;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>

html page doesn't fit screen

I'm trying to make my page feet the screen, but I found that a scroll bar always appear, I'm using vh and vw to try and make it, so it always displays the page without scroll bars. I think the problem is some type of padding, but I'm not sure, how can I make sure that the page is the size of the screen?
body {
margin: 0;
}
#container {
width: 100vw;
height: 100vh;
}
header {
height: 25vh;
width: 100vw;
background-color: #CCC;
text-align: center;
}
header img {
height: 20vh;
width: : 50vw;
}
aside {
width: 20vw;
height: 80vh;
background-color: #0C0;
float: right;
}
aside ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
aside li {
margin: 0;
padding: 0;
}
aside li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
height: 5vh;
}
aside li a:hover {
background-color: #CCC;
}
main {
width: 80vw;
height: 80vh;
background-color: #03C;
margin: 0;
padding: 0;
}
footer {
height: 5vh;
width: 100vw;
background-color: #CCC;
clear: both;
margin: 0;
padding: 0;
}
/*Menu*/
nav {
width: 100vw;
height: 5vh;
background-color: #666;
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
margin: 0;
padding: 0;
}
nav li a {
height: 3vh;
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 1vh 8vw;
}
nav li a:hover {
background-color: #CCC;
}
<div id="container">
<header><img src="imatges/Gwlogo.png" alt="Mountain View"</header>
<nav>
<ul>
<li>Home</li>
<li>Calendari</li>
<li>Formulari</li>
<li>Iframe</li>
</ul>
</nav>
<aside>
<ul>
<li>Home</li>
<li>Calendari</li>
<li>Formulari</li>
<li>Iframe</li>
</ul>
</aside>
<main></main>
<footer></footer>
</div>

Well the net height of all the elements was more then 100vh. so you need to change that and also define max-height:100vh; on body, html
body {
margin: 0;
height:100vh;
width:100%;
max-width:100vh;
}
#container {
width: 100vw;
height: 100vh;
}
header {
height: 20vh;
width: 100vw;
margin:0;
padding:0;
background-color: #CCC;
text-align: center;
}
header img {
height: 20vh;
//width: 50vw;
margin:0 auto;
padding:0;
display:block;
}
aside {
width: 20vw;
height: 70vh;
background-color: #0C0;
float: right;
}
aside ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
aside li {
margin: 0;
padding: 0;
}
aside li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
height: 5vh;
}
aside li a:hover {
background-color: #CCC;
}
main {
width: 80vw;
height: 70vh;
background-color: #03C;
margin: 0;
padding: 0;
}
footer {
height: 5vh;
width: 100vw;
background-color: #CCC;
clear: both;
margin: 0;
padding: 0;
}
/*Menu*/
nav {
width: 100vw;
height: 5vh;
background-color: #666;
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
margin: 0;
padding: 0;
}
nav li a {
height: 3vh;
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 1vh 8vw;
}
nav li a:hover {
background-color: #CCC;
}
<div id="container">
<header><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" alt="Mountain View"</header>
<nav>
<ul>
<li>Home</li>
<li>Calendari</li>
<li>Formulari</li>
<li>Iframe</li>
</ul>
</nav>
<aside>
<ul>
<li>Home</li>
<li>Calendari</li>
<li>Formulari</li>
<li>Iframe</li>
</ul>
</aside>
<main></main>
<footer></footer>
</div>

If you wanna main scroll bar disappear, add css properties overflow: hidden; in your body or html tag.
how can i make sure that the page is the size of the screen?
if the page you mean is body or html, set the padding, border, and margin to 0 just to make sure it's fit to the size of screen, but if you mean the page is div with id='container' try this
#container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
it will fit the screen

Nav button design issue

I'm trying to design my nav (4 items in total) to be in circles each spaced about 20 px apart, located on the top right of my screen. I got everything to "work" design wise, however, now that every nav item appears how I want it (in its own a circle), when I go to have them all positioned on the upper right the first 3 nav items have disappeared and only the 4th nav item is visible. Please help!
HTML:
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>
CSS:
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: absolute;
top: 50px;
right: 100px;}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 15%;
}

What about this:
#nav{
position: absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 120px;
float: left;
}
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>

Try:
#nav{
position: absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 15%;
}

It's because your navbutton elements have position: absolute so they overlap each other, i.e. only the last one is visible.
Try this snippet:
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: relative; /* ADDED */
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 20px;
}
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>

If you want the navigation to be in the top right corner of the page use this CSS:
#nav {
position: absolute;
top: 0;
right: 0;
}
#nav li {
display: inline-block;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: relative; /* ADDED */
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 100px;
margin: 20px;
}

#nav{
position:absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
margin: 20px;
float:left;
}

CSS: Hover effect over image with width: auto

I'm trying to make a caption appear whenever I hover on the image. I want the height of the image to be set to 200px, but the width to be auto. How can I make the span with the caption also correspond to the image width? Thanks!
HTML:
<div class="projects">
<a name="folder"></a>
<h1 class="heading">Projects</h1>
<p class="classProjectsInfo">Recent class projects</p>
<div class="classProjects">
<ul class="img-list">
<li>
<img src="checkers_cover.JPG">
<span class="description2"><span>Checkers61B</span></span>
</li>
<li>
<img src="cover_ngram.JPG">
<span class="description2"><span>NGramMap</span></span>
</li>
<li>
<img src="gitlet_cover.JPG">
<span class="description2"><span>Gitlet</span></span>
</li>
</ul>
</div>
</div>
CSS:
.classProjects {
text-align: center;
margin: 0;
padding: 0;
list-style-type: none;
}
.classProjects li {
display: inline-block;
padding: 5px;
margin: 10px;
position: relative;
height: 250px;
width: auto;
}
.classProjects img {
height: 250px;
width: auto;
}
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
height: 250px;
position: relative;
width: auto;
}
span.description2 {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 250px;
left: 0;
position: absolute;
top: 0;
width: auto;
}
span.description2 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.description2 {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 250px;
left: 0;
position: absolute;
top: 0;
width: auto;
opacity: 0;
}
ul.img-list li:hover span.description2 {
opacity: 1;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Space <li> evenly? - html

Related

Why doesn't nav height automatically adjust to its content?

Navigation bar shrinks when position is set to fixed

html page doesn't fit screen

Nav button design issue

CSS: Hover effect over image with width: auto

Categories

Resources