I'm trying to have my li element align in the middle - vertically.
But it looks like vertical-align is not working. Any ideas?
HTML
<body>
<div class="toolbar">
<ul>
<li>
<input type="radio" value="one" name="try" />
<img src="try1_30X30.png"/>
hello
</li>
<li>
<input type="radio" value="two" name="try" />
<img src="try2_30X30.png"/>
world
</li>
</ul>
</div>
</body>
CSS
.toolbar ul {
list-style-type: none;
height: 50px;
}
.toolbar ul li {
float: left;
display: block;
line-height: 50px;
padding-left: 10px;
vertical-align: middle;
}
Try to apply the vertical-align property to the img tag itself.
Please see code below or working example here (http://jsbin.com/oxoMeCo/1/)
<html>
<head>
<style type="text/css">
.toolbar ul {
list-style-type: none;
height: 50px;
}
.toolbar ul li
{
float: left;
display: block;
line-height: 50px;
padding-left: 10px;
}
.toolbar ul li img {
vertical-align:middle;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li>
<input type="radio" value="one" name="try" />
<img src="http://placehold.it/30x30">
hello
</li>
<li>
<input type="radio" value="two" name="try" />
<img src="http://placehold.it/30x30">
world
</li>
</ul>
</div>
</body>
</html>
Related
I have a checkbox like this,
<nav>
<div id="center">
<ul>
<li>Home</li>
<li>Skill</li>
<li>Profile</li>
</ul>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</div>
</nav>
but, the check box doesn't work on the check box selector and I don't know why.
this is my css nav and check box.
nav ul{
position: fixed;
width: 100%;
height: 200px;
background: #2c3e50;
top: 47px;
display: none;
text-align: center;
padding-left: 0;
transition: all .5s;
}
#check:checked ~ nav ul {
display: block;
}
On a related note, ~ is for the general successor sibling (meaning the element comes after this one).
Since your ul has the fixed position, move it after label tag.
Also remove nav from #check:checked ~ nav ul in css style.
nav ul {
position: fixed;
width: 100%;
height: 200px;
background: #2c3e50;
top: 47px;
display: none;
text-align: center;
padding-left: 0;
transition: all .5s;
}
#check:checked ~ ul {
display: block;
}
<nav>
<div id="center">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li>Home</li>
<li>Skill</li>
<li>Profile</li>
</ul>
</div>
</nav>
I am trying to use Material Design Lite library.
What's the best way to put an icon in one of the tabs and have the tab text below it (keeping in mind best practices and scalability).
https://codepen.io/anon/pen/BzAEQb
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<i class="material-icons">person</i><span class="MY-CLASS-2">TAB 1</span>
Tab 2
Tab 3
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
html
<div class="item">
<img src=""/>
<span class="caption">Tab</span>
</div>
css
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 50px;
}
img {
width: 30px;
height: 30px;
background-color: blue;
}
.caption {
display: block;
}
http://jsfiddle.net/ZhLk4/360/
I can do it by structuring one of the divs like so:
<i class="material-icons">person</i><span class="MY-CLASS-2">Profile</span>
And adding the following styles:
.MY-CLASS-1 {
position: relative;
width: 60px;
}
.MY-CLASS-2 {
display: block;
position: absolute;
bottom: -12px;
font-size: smaller;
left: 198px;
}
https://codepen.io/anon/pen/XKEQZr
How can I make this code better overall?
ul,
ul li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline-block;
}
ul li a {
background: #efefef;
padding: 0 15px;
text-decoration: none;
line-height: 40px;
display: inline-block;
}
ul li a span {
background: url('http://findicons.com/files/icons/2255/cologne/32/user.png') no-repeat #ccc;
width: 30px;
height: 30px;
margin: 0 15px 0 0;
display: inline-block;
vertical-align: middle;
}
<html>
<head>
</head>
<body>
<ul>
<li><span></span>aaaa</li>
<li><span></span>bbbb</li>
<li>cccc</li>
<li><span></span>dddd</li>
</ul>
</body>
</html>
Note: Click full page when testing.
As you can see by the snippet, the section with the class "common" is set to a fixed position, but it seems to be relative to the other section. How do I fix it so that the common section is fixed relative to the browser?
Jsfiddle:
https://jsfiddle.net/my1c76vb/?utm_source=website&utm_medium=embed&utm_campaign=my1c76vb
Code:
HTML5:
<?php session_start(); ?>
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Log in</title>
<body>
<section class="common">
<header>
<img src="resources/header.png" alt="Sqeaking Duck"/>
</header>
<aside class="menu">
<h3>Guest</h3>
<hr>
<nav>
<ul>
<li>Home</li>
<li>Log in</li>
<li>Register</li>
</ul>
</nav>
</aside>
</section>
<section class="login">
<form action="loginManager.php" method="post">
<fieldset>
<legend>Log in</legend>
User: <input type="text" name="username" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?></span><br>
Password: <input type="password" name="password" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?></span><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>
<p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p>
</section>
</body>
CSS:
/*Common pages */
.common {
z-index: 1;
margin-top: 10px;
position: fixed;
width: 100%;
}
header {
width: 100%;
text-align: center;
background-color: CornflowerBlue;
}
.menu {
margin-top: 25px;
width: 80px;
background-color: black;
text-align: center;
}
.menu h3 {
color: white;
display: inline-block;
margin: 0;
padding-top: 5px;
}
.menu hr {border-color: white;}
.menu nav {
display: inline-block;
text-align: left;
width: 100%
}
.menu ul {
list-style: none;
padding: 0px 0px 0px 10px;
margin: 0;
}
.menu li {
padding-bottom: 10px;
}
.menu a {
text-decoration: none;
color: white;
}
/*Log in page*/
.login {
text-align: center;
z-index: 0;
margin-top: 300px;
}
/*General*/
body {
background-color: grey;
}
First thing I noticed is that the fixed element is having a margin-collapse. Google how to fix margin-collapsing. I added,
padding-top: 1px;
to the body.
Next I added,
height: 2000px to the body so the body can scroll and you can see the position:fixed in play
https://jsfiddle.net/my1c76vb/1/
I am guessing you want a layout which somewhat represents YouTubes layout (with a fixed header and a side bar).
The elements that have a fixed positioning are "lifted up" from the page so the rest of the page renders as if those elements wouldn't even be there. That in mind you have to adjust your layout a little:
CSS
* {
padding: 0;
margin: 0;
}
header {
background-color: #222;
position: fixed;
top: 0;
width: 100%;
height: 150px;
}
.container {
margin-top: 150px; /*Same as header height*/
margin-left: 150px; /*Same as menu width*/
}
.menu {
background-color: #333;
position: fixed;
left: 0;
width: 150px;
}
.content {
padding: 10px;
}
HTML
<header></header>
<section class="container">
<aside class="menu">
<!-- Menu here -->
</aside>
<div class="content">
<!-- Content here -->
</div>
</section>
Here is a demo
The content must have a margin (or padding) so that it wont get buried under the fixed elements.
/*Common pages */
.common {
z-index: 1;
margin-top: 10px;
position: relative;
width: 100%;
}
header {
width: 100%;
text-align: center;
background-color: CornflowerBlue;
}
.menu {
margin-top: 25px;
width: 80px;
background-color: black;
text-align: center;
}
.menu h3 {
color: white;
display: inline-block;
margin: 0;
padding-top: 5px;
}
.menu hr {border-color: white;}
.menu nav {
display: inline-block;
text-align: left;
width: 100%
}
.menu ul {
list-style: none;
padding: 0px 0px 0px 10px;
margin: 0;
}
.menu li {
padding-bottom: 10px;
}
.menu a {
text-decoration: none;
color: white;
}
/*Log in page*/
.login {
text-align: center;
z-index: 0;
margin-top: 320px;
}
/*General*/
body {
background-color: grey;
}
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Log in</title>
</head>
<body>
<section class="common">
<header>
<img src="resources/header.png" alt="Sqeaking Duck"/>
</header>
<aside class="menu">
<h3>Guest</h3>
<hr>
<nav>
<ul>
<li>Home</li>
<li>Log in</li>
<li>Register</li>
</ul>
</nav>
</aside>
</section>
<section class="login">
<form action="loginManager.php" method="post">
<fieldset>
<legend>Log in</legend>
User: <input type="text" name="username" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?></span><br>
Password: <input type="password" name="password" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?></span><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>
<p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p>
</section>
</body>
</html>
I have a vertical menu. I would like to align vertically the name of the of items. I have this:
li {
list-style: none;
}
ul {
padding: 0;
}
img {
vertical-align: middle;
}
<ul>
<li>
<a href="#">
<img src="http://sermovi.es/images/car95.svg" />
<span>Cars</span>
</a>
</li>
<li>
<a href="#">
<img src="http://sermovi.es/images/restaurant95.svg" />
<span>Restaurants</span>
</a>
</li>
</ul>
The result is like this:
but I want this:
http://jsfiddle.net/o404phzt/
You could put the image in a fixed-width div:
li {
list-style: none;
}
ul {
padding: 0;
}
.menu-item {
display: inline-block;
width: 100px;
text-align: center;
}
img {
vertical-align: middle;
}
<ul>
<li>
<a href="#">
<div class="menu-item">
<img src="http://sermovi.es/images/car95.svg" />
</div>
<span>Cars</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-item">
<img src="http://sermovi.es/images/restaurant95.svg" />
</div>
<span>Restaurants</span>
</a>
</li>
</ul>
You can try CSS tables:
ul {
padding: 0;
display: table;
}
ul > li {
display: table-row;
}
ul > li > * {
vertical-align: middle;
display: table-cell;
}
<ul>
<li>
<img src="http://sermovi.es/images/car95.svg" />
<span>Cars</span>
</li>
<li>
<img src="http://sermovi.es/images/restaurant95.svg" />
<span>Restaurants</span>
</li>
</ul>
Note I removed the links because they interfere with the layout.
However, since you use <a href="#">, you are probably handling them with JS. Then, you can just remove them, do the same click handling with JS, and fake links with CSS:
ul {
padding: 0;
display: table;
}
ul > li {
display: table-row;
color: blue;
cursor: pointer;
}
ul > li:hover {
text-decoration: underline;
}
ul > li > * {
vertical-align: middle;
display: table-cell;
}
<ul>
<li>
<img src="http://sermovi.es/images/car95.svg" />
<span>Cars</span>
</li>
<li>
<img src="http://sermovi.es/images/restaurant95.svg" />
<span>Restaurants</span>
</li>
</ul>
Probably the easiest way is to create a 2x2 table and not using lists.
<table>
<tr>
<td>
<img src="http://sermovi.es/images/car95.svg" />
</td>
<td>
<span>Cars</span>
</td>
</tr>
<tr>
<td>
<img src="http://sermovi.es/images/restaurant95.svg" />
</td>
<td>
<span>Restaurants</span>
</td>
</tr>
</table>
You can still use classes inside the td tag as needed. (aligning for example).
Structuring the image and spans inside inline-block divs will solve this flexibly:
li {
list-style: none;
}
ul {
padding: 0;
}
img {
vertical-align: middle;
}
li {
width: 300px;
}
li div {
display: inline-block;
}
.image {
width: 50%;
text-align: center;
}
.text {
width: 50%;
}
<ul>
<li>
<a href="#">
<div class="image">
<img src="http://sermovi.es/images/car95.svg" />
</div>
<div class="link">
<span>Cars</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image">
<img src="http://sermovi.es/images/restaurant95.svg" />
</div>
<div class="link">
<span>Restaurants</span>
</div>
</a>
</li>
</ul>
Fiddle
The title says it all for some reason my margin 0 auto is not centering my margin: 0 auto; wont center my ul inside of the nav element. Any help would be greatly appreciated. I already took a look at other posts on stack regarding the same issues, and couldn't fix my issue.
CSS
/* Sets the body to take up 100% of the width of the browser */
body {
width: 100%;
background: #444444;
margin: 0px;
}
#container{
width: 100%;
}
header {
margin-left: -10px;
margin-top: -10px;
padding: 0 20px;
width: 25%;
height: 12000px;
background: url("imgs/headerBg.jpg") repeat-y;
float: left;
}
nav{
width:60%;
margin: auto;
}
nav ul{
width: 70%;
list-style-type: none;
text-align: center;
margin: 0 auto;
}
nav ul li{
height: 45px;
padding: 0px;
margin: 0px;
display: inline-block;
border-top: 3px double #fff;
}
nav ul li a{
text-decoration: none;
text-align: center;
font-weight: bold;
color: #ffffff;
font-size: 2.5em;
}
#homepage{
height: 120000px;
width: 65%;
float: left;
}
#homepage li{
list-style-type: none;
height: 14.20%;
}
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skull Alcohol ©</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="container">
<header>
<nav>
<ul>
<li>home</li>
<li>recipes</li>
<li>our products</li>
<li>shop</li>
<li>contact</li>
</ul>
</nav>
</header>
<section id="homepage">
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
</section>
<footer>
<div id="privacy">privacy</div>
<div id="tos">terms of service</div>
</footer>
</div>
</body>
</html>
It looks like your ul is actually centered, but because ul has a default padding on the left side it appears more to the right.
Try adding padding: 0 to your nav ul rule.