I have two major problems with my code.
Problem 1 - Alignment: Inside the <nav> I created two <div> tags. One for the logo, and one for the hyperlinks, but I can't manage to align then. I've been stuck on this for hours.
Problem 2 - Overlapping: If the screen-size is a bit small, when I hover over an element of the navigation bar they overlap each other, which in theory is fine, however it doesn't cover the element behind, so both element keeps displaying.
Is there a way to prevent this from happening? btw, this problem only happens when I'm using a small screen size.
The image below can illustrate both problems:
body{
background-color: rgb(210,210,210);
margin:0px;
padding: 0px;
}
nav{
background-color: rgb(97, 97, 97);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right:10px;
display: flex;
}
section{
padding: 0 10%;
}
#Logo{
width: 20%;
height: inherit;
float: left;
clear: left;
}
#Hyperlinks{
width: 80%;
float: right;
text-align: right;
}
#Logo p{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande';
font-size: 120%;
color: white;
padding-left: 40px;
}
#Hyperlinks a{
font-size: 1.2rem;
text-align: center;
text-decoration: none;
color: white;
padding-right: 5px;
}
#Hyperlinks li li>a{
font-size: 1.1rem;
}
#Hyperlinks>ul>li:hover {
background-color: rgb(27, 129, 107);
border-radius: 0 0 10px 0;
}
#Hyperlinks ul li li:hover{
background-color: rgb(27, 129, 107);
}
#Hyperlinks ul ul li:last-child{
border-radius: 0 0 10px 0;
}
#Hyperlinks>ul>li>a{
border-right:solid white 3px;
}
#Hyperlinks ul{
padding-inline-start: 0;
}
#Hyperlinks>ul>li{
display: inline-block;
padding: 10px 50px 10px 2px;
margin-right: 10px;
}
#Hyperlinks ul ul{
display: none;
}
#Hyperlinks>ul>li{
position: relative;
}
#Hyperlinks ul li:hover ul{
display: block;
position: absolute;
width: 92%;
left: 0%;
top: 42px;
background-color: rgb(97, 97, 97);
border-radius: 0 0 10px 0;
}
#Hyperlinks li:hover li{
display: block;
padding: 1em 0em 1em 5px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Bar 3</title>
<link rel="stylesheet" href="gabarito2.css">
</head>
<body>
<header>
<nav>
<div id="Logo">
<p>MySite.com</p>
</div>
<div id="Hyperlinks">
<ul>
<li>Home</li>
<li>Tutorial
<ul>
<li>Tutorial 1</li>
<li>Tutorial 2</li>
<li>Tutorial 3</li>
</ul>
</li>
<li>About</li>
<li>Newsletter
<ul>
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section>
<h2>Test</h2>
<p>Hello, it`s just a test. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa! Impedit amet voluptates reiciendis esse quisquam. Eum quia, facere laboriosam quos possimus, ratione, optio incidunt sunt dolorum commodi magni.</p>
</section>
</body>
</html>
Get rid of all the floats and use flexbox exclusively. Make sure your ul and li have no default margins and paddings.
Just set a background color and z-index if necessary.
how can I add a space between those 2 images and dont allow the text to break on the center of the page? It's for a college project and I've never programmed before.
i actually dont know whats going on on this template i have to edit.. i just need to add a photo of a person in the image circle (which i know how to) and a text of their review, but the images keep going off position and text breaks in the middle..
/*
Horizons by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
#import url("font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900");
/* Basic */
}
body {
background: #222833;
}
body,
input,
select,
textarea {
color: #555555;
font-family: 'Raleway', sans-serif;
font-size: 13pt;
font-weight: 300;
line-height: 1.75em;
}
a {
color: #3ac984;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
strong,
b {
font-weight: 700;
}
em,
i {
font-style: italic;
}
p,
ul,
ol,
dl,
table,
blockquote {
margin: 0 0 2em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-weight: 700;
line-height: 1.75em;
margin-bottom: 1em;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
text-decoration: none;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.25em;
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
hr {
border-top: solid 1px #888888;
border: 0;
margin-bottom: 1.5em;
}
blockquote {
border-left: solid 0.5em #888888;
font-style: italic;
padding: 1em 0 1em 2em;
}
section.special,
article.special {
text-align: center;
}
header.major {
padding-bottom: 4em;
}
header h2 {
margin: 0;
padding: 0;
font-size: 3em;
font-weight: 600;
}
header .byline {
font-size: 1.6em;
}
footer> :last-child {
margin-bottom: 0;
}
footer.major {
padding-top: 3em;
}
/* Form */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
background: none;
border: solid 1px #888888;
color: inherit;
display: block;
outline: 0;
padding: 0.75em;
text-decoration: none;
width: 100%;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #3ac984;
}
input[type="text"],
input[type="password"],
input[type="email"] {
line-height: 1em;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.5;
position: relative;
top: 3px;
}
:-moz-placeholder {
color: inherit;
opacity: 0.5;
}
::-moz-placeholder {
color: inherit;
opacity: 0.5;
}
:-ms-input-placeholder {
color: inherit;
opacity: 0.5;
}
.formerize-placeholder {
color: rgba(85, 85, 85, 0.5) !important;
}
/* Image */
.image {
border: 0;
position: relative;
}
.image.fit {
display: block;
}
.image.fit img {
display: block;
width: 100%;
}
.image.feature {
display: block;
margin: 0 0 2em 0;
}
.image.feature img {
display: block;
width: 100%;
}
.image.feature2 {
display: block;
margin: 0 0 5em 0;
}
.image.feature2 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: left margin 40px;
}
/* Icon */
.icon {
position: relative;
}
.icon:before {
content: "";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
.icon>.label {
display: none;
}
/* Lists */
ol.default {
list-style: decimal;
padding-left: 1.25em;
}
ol.default li {
padding-left: 0.25em;
}
ul {
margin: 0;
padding: 0;
}
ul.default {
list-style: none;
}
ul.default li {
display: block;
padding: 0.60em 0;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
}
ul.default> :first-child {
padding-top: 0;
border-top: none;
}
ul.icons {
cursor: default;
}
ul.icons li {
display: inline-block;
line-height: 1em;
padding-left: 0.5em;
}
ul.icons li:first-child {
padding-left: 0;
}
ul.actions {
cursor: default;
}
ul.actions:last-child {
margin-bottom: 0;
}
ul.actions li {
display: inline-block;
padding: 0 0 0 1.5em;
}
ul.actions li:first-child {
padding: 0;
}
ul.actions.vertical li {
display: block;
padding: 1.5em 0 0 0;
}
ul.actions.vertical li:first-child {
padding: 0;
}
ul.contact li {
padding: 1.05em 0;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
}
ul.contact li>span {
display: inline-block;
}
ul.contact li .address,
ul.contact li .mail,
ul.contact li .phone {
float: left;
width: 100px;
font-weight: 600;
}
ul.contact> :first-child {
padding-top: 0;
border-top: none;
}
ul.style li {
clear: both;
display: block;
padding-top: 3em;
}
ul.style> :first-child {
padding-top: 0;
}
ul.style h3 {
display: block;
margin: 0;
padding-bottom: 0.50em;
font-size: 1.1em;
font-weight: 700;
color: #404040;
}
ul.style .fa {
float: left;
display: inline-block;
width: 80px;
height: 80px;
margin-right: 1em;
background: #3ac984;
line-height: 80px;
text-align: center;
border-radius: 10px;
font-size: 2em;
color: white;
}
ul.list {
list-style: none;
}
ul.list li {
display: block;
padding: 0.60em 0;
border-top: 1px solid;
border-color: red;
}
ul.list> :first-child {
padding-top: 0;
border-top: none;
}
/* Tables */
table {
width: 100%;
}
table.default {
width: 100%;
}
table.default tbody tr {
border-bottom: solid 1px #888888;
}
table.default td {
padding: 0.5em 1em 0.5em 1em;
}
table.default th {
font-weight: 700;
padding: 0.5em 1em 0.5em 1em;
text-align: left;
}
table.default thead {
background: #555555;
color: #fff;
}
/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
background: #3ac984;
border-radius: 40px;
border: 0;
color: white;
cursor: pointer;
display: inline-block;
padding: 0.80em 2em;
text-align: center;
text-decoration: none;
font-size: 1.4em;
font-weight: 600;
min-width: 10em;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:hover {
background-color: #32b777;
}
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
.button.fit {
width: 100%;
}
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
.button.small {
font-size: 0.8em;
}
/* Wrapper */
.wrapper.style1 {
background: #fff;
}
.wrapper.style2 {
background: #ececec;
padding: 6em 0;
text-align: center;
}
.wrapper.style4 {
background: #ececec;
padding: 1em 0;
text-align: center;
}
.wrapper.style3 {
padding: 2em 0 3.5em 0;
background: #ececec;
}
.wrapper.style3 span {
display: inline-block;
padding-top: 0.80em;
font-size: 2em;
font-weight: 600;
}
.wrapper.style3 .button {
float: right;
}
/* Header */
#header {
background: #333333 url("../images/pic01.jpg") no-repeat;
background-size: cover;
color: #fff;
padding: 6em 0;
text-align: center;
background-position: 0% 65%;
position: relative;
}
#header:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(16, 32, 48, 0.25);
}
#header>* {
position: relative;
z-index: 1;
}
.homepage #header {
padding: 8em 0;
background-position: center;
}
#logo {
font-size: 2em;
}
#nav>ul {
margin: 0;
}
#nav>ul>li {
border-radius: 10px 10px 0 0;
display: inline-block;
margin-left: 0.5em;
padding: 0.5em 1.5em;
}
#nav>ul>li a {
color: #FFF;
text-decoration: none;
font-size: 1.2em;
}
#nav>ul>li:first-child {
margin-left: 0;
}
#nav>ul>li:hover a {
color: #fff;
}
#nav>ul>li.active {
background: #3ac984;
}
#nav>ul>li.active a {
color: white;
}
#nav>ul>li>ul {
display: none;
}
/* Dropotron */
.dropotron {
margin-top: -2px;
background: #3ac984;
border-radius: 10px;
color: white;
min-width: 12em;
padding: 1em 0;
}
.dropotron>li {
line-height: 2em;
padding: 0 1em;
}
.dropotron>li>a {
color: #FFF;
text-decoration: none;
}
.dropotron>li.active>a,
.dropotron>li:hover>a {
color: #FFF;
}
.dropotron.level-0 {
border-radius: 0 10px 10px 10px;
font-size: 1em;
}
/* Banner */
#banner {
text-align: center;
padding: 4em 0 0 0;
}
#banner .major h2 {
font-size: 3.5em;
}
#banner .major .byline {
display: block;
margin: 0em 2em;
line-height: 1.6em;
font-size: 1.5em;
}
#banner a {
color: inherit;
}
/* Main */
.no-sidebar #main .major,
.left-sidebar #main .major,
.right-sidebar #main .major {
text-align: left;
}
.homepage #main .major {
text-align: center;
}
#main {
padding: 6em 0;
}
#main .sidebar .major {
padding-bottom: 2em;
}
#main .sidebar .major h2 {
font-size: 1.8em;
}
#main .sidebar .default li {
border-color: #cdcdcd;
}
#main .sidebar .default a {
color: #464646;
}
#main .sidebar> :first-child {
margin-bottom: 3em;
}
/* Footer */
#footer {
padding: 4em 0;
color: #fff;
}
#footer .major h2 {
font-size: 2em;
color: #FFF;
}
#footer .major .byline {
font-size: 1.1em;
}
#footer .copyright {
margin-top: 3em;
padding-top: 3em;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
text-align: center;
color: inherit;
}
#footer a {
color: inherit;
}
#middle {
height: 600px;
width: 300px;
background: green;
}
<!DOCTYPE HTML>
<!--
Horizons by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Horizons by TEMPLATED</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1>Vista 702</h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Fotos</li>
<li>Depoimentos</li>
<li>Planos</li>
</nav>
<!-- Banner -->
<div id="banner">
<div class="container">
<section>
<header class="major">
<h2>Vista 702</h2>
<span class="byline">… a melhor vista de Juiz de Fora para se passar o feriado, réveillon e comemorações em geral.</span>
</header>
Sign Up
</section>
</div>
</div>
</div>
</div>
<!-- Featured -->
<div class="wrapper style2">
<section class="container">
<header class="major">
<a id="fotos"></a>
<h2>Fotos</h2>
<span class="byline">Sua visita começa aqui.</span>
</header>
<div class="row no-collapse-1">
<section class="4u">
<a class="image feature"><img src="images/pic02.jpg" alt=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="4u">
<a class="image feature"><img src="images/pic03.jpg" alt=""></a>
<p>Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis. Donec magna.</p>
</section>
<section class="4u">
<a class="image feature"><img src="images/pic04.jpg" alt=""></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
</div>
</section>
</div>
<div class="wrapper style2">
<section class="container">
<header class="major">
<a id="depoimentos"></a>
<h2>Depoimentos</h2>
<span class="byline">Os viajantes recomendam.</span>
</header>
<div class="row no-collapse-1">
<section class="">
<a class="image feature2"><img src="https://abrilexame.files.wordpress.com/2016/09/size_960_16_9_google-robert-bunsen.jpg" align="left"=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="">
<a class="image feature2"><img src="https://eduardhosp-alemao.com.br/wp-content/uploads/2018/05/Hashtag-Google-Alem%C3%A3o-Sem-Complica%C3%A7%C3%A3o.jpg" align="left"></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
</div>
</section>
</div>
<!-- Main -->
<div id="main" class="wrapper style1">
<section class="container">
<header class="major">
<a id="planos"></a>
<h2>Uma janelas, diversas</h2>
<span class="byline">Um plano para todos os bolsos.</span>
</header>
<div class="row">
<!-- Content -->
<div class="6u">
<section>
<ul class="style">
<li>
<span class="fa fa-wrench"></span>
<h3>Integer ultrices</h3>
<span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim.</span>
</li>
<li>
<span class="fa fa-cloud"></span>
<h3>Aliquam luctus</h3>
<span>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
</li>
</ul>
</section>
</div>
<div class="6u">
<section>
<ul class="style">
<li>
<span class="fa fa-cogs"></span>
<h3>Integer ultrices</h3>
<span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim.</span>
</li>
<li>
<span class="fa fa-leaf"></span>
<h3>Aliquam luctus</h3>
<span>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
</li>
</ul>
</section>
</div>
</div>
</section>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<!-- Lists -->
<div class="row">
<div class="8u">
<section>
<header class="major">
<h2>Donec dictum metus</h2>
<span class="byline">Quisque semper augue mattis wisi maecenas ligula</span>
</header>
<div class="row">
<section class="6u">
<ul class="default">
<li>Pellentesque elit non gravida blandit.</li>
<li>Lorem ipsum dolor consectetuer elit.</li>
<li>Phasellus nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam pharetra.</li>
</ul>
</section>
<section class="6u">
<ul class="default">
<li>Pellentesque elit non gravida blandit.</li>
<li>Lorem ipsum dolor consectetuer elit.</li>
<li>Phasellus nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam pharetra.</li>
</ul>
</section>
</div>
</section>
</div>
<div class="4u">
<section>
<header class="major">
<h2>Donec dictum metus</h2>
<span class="byline">Mattis wisi maecenas ligula</span>
</header>
<ul class="contact">
<li>
<span class="address">Address</span>
<span>1234 Somewhere Road #4285 <br />Nashville, TN 00000</span>
</li>
<li>
<span class="mail">Mail</span>
<span>someone#untitled.tld</span>
</li>
<li>
<span class="phone">Phone</span>
<span>(000) 000-0000</span>
</li>
</ul>
</section>
</div>
</div>
<!-- Copyright -->
<div class="copyright">
Design: TEMPLATED Images: Unsplash (CC0)
</div>
</div>
</div>
<a id="middle"></a>
</body>
</html>
thanks
Just use white-space: nowrap on the text element to make the text stay on the same line regardless of the parents size.
And for the images, you need to either add margin or padding on the parent container.
i.e,
.4u p {
white-space: nowrap;
}
and
.4u{
padding: 0.23em;
}
or
.4u{
margin: 0.23em;
}
apparently the footer background went missing too
Edited:
This is the changes I made to your code
.flex {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flex-item + .flex-item {
margin-top: 30px;
}
.image.feature2 {
display: block;
margin: 0 0 7em 0;
}
<div class="row no-collapse-1">
<div class="flex">
<section class="flex-item">
<a class="image feature2"><img
src="https://abrilexame.files.wordpress.com/2016/09/size_960_16_9_google-robert-bunsen.jpg" align="left" =""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="flex-item">
<a class="image feature2"><img src="https://eduardhosp-alemao.com.br/wp-content/uploads/2018/05/Hashtag-Google-Alem%C3%A3o-Sem-Complica%C3%A7%C3%A3o.jpg" align="left"></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
I've been struggling with this for a while and couldn't find the right solution.
At the bottom of the page I've a footer that's full width. Inside it I want to display I list of messages and right next to its left an icon, in this case it's a Font Awesome icon.
The message list needs to be centered both vertically and horizontally and the icon has to be centered vertically.
I've tried doing this using ul elements with display: inline-block and text-align: center.
The messages displays correctly but the icon is stuck in the same place no matter the size of its container.
Here's what I've so far:
<div class="error-message-container">
<ul class="error-message-bell">
<li aria-hidden="true" class="fa fa-bell-slash-o"></li>
</ul>
<ul class="error-message-list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem</li>
<li>ipsum</li>
</ul>
</div>
and the css:
.error-message-container {
border: 1px solid blue;
bottom: 0;
color: light-blue;
font-size: 12px;
left: 0;
position: fixed;
text-align: center;
width: 100%;
}
.error-message-container .error-message-bell {
display: inline-block;
font-size: 20px;
height: 100%;
margin-top: 0;
padding: 0;
vertical-align: middle;
}
.error-message-container .error-message-list {
display: inline-block;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;
}
https://jsfiddle.net/b1rw80jz/1/
Does anyone know how can I accomplish this?
Thanks
If you need only one icon, you can use pseudo-elements::before for the bell
.error-message-container {
border: 1px solid blue;
bottom: 0;
color: light-blue;
font-size: 12px;
left: 0;
position: fixed;
text-align: center;
width: 100%;
}
.error-message-container .error-message-list {
display: inline-block;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;
position: relative; /** this provides reference to the ::before element **/
}
.error-message-list::before {
content: "\f1f6"; /** refers to awesome font **/
font-family: FontAwesome; /** refers to awesome font **/
position: absolute; /** this will stick to error-message-list **/
top: 50%; /** this will position the icon 50% height of the error-message-list **/
margin-top: -10px; /** minus half the icon height to truely vertically centered **/
left: -20px; /** this will push it to the left out the error-message-list **/
}
https://jsfiddle.net/b1rw80jz/6/
You could use flex-box like this:
+CSS
.error-message-container {
border: 1px solid blue;
bottom: 0;
color: light-blue;
font-size: 12px;
left: 0;
position: fixed;
text-align: center;
width: 100%;
}
.error-message-container .error-message-bell {
display: inline-block;
font-size: 20px;
height: 100%;
margin: 0;
padding: 0;
}
.error-message-container .error-message-list {
display: inline-block;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;
}
.center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
+HTML
<div class="error-message-container center">
<ul class="error-message-bell center">
<li aria-hidden="true" class="fa fa-bell-slash-o"></li>
</ul>
<ul class="error-message-list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem</li>
<li>ipsum</li>
</ul>
</div>
Demo
You could add line-height: 5; vertical-align: top; to .error-message-container .error-message-bell.
Fiddle: https://jsfiddle.net/b1rw80jz/1/
Try to change the .error-message-list display to block and add margin-bottom: -5px; to .error-message-bell instead of margin-top
https://jsfiddle.net/b1rw80jz/3/
HTML
<div class="error-message-container">
<div class="inner-container">
<ul class="error-message-bell">
<li aria-hidden="true" class="fa fa-bell-slash-o"></li>
</ul>
<ul class="error-message-list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem</li>
<li>ipsum</li>
</ul>
</div>
</div>
CSS
.inner-container{margin: 0 auto;
display: inline-block;}
.error-message-container .error-message-bell {
display: table-cell;
font-size: 20px;
height: 100%;
margin: 0 auto;
padding: 0;
vertical-align: middle;}
.error-message-container .error-message-list {
display: table-cell;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;}
Font-Awesome already does it for you by using the <i> element and nesting it within your <li>. Refer to documentation. BTW, I put a DANGER! icon in just for the hell of it.
<li><i class="fa fa-bell-slash-o" aria-hidden="true"></i> ERROR!</li>
FIDDLE
I'm having issues forcing a link to take full height of its parent container.
Here is a Fiddle of my code: http://jsfiddle.net/z2ua5g4j/
a > span.button-single {
font-size: 30px;
color: #fff;
display: block;
margin-bottom: 8px;
margin-left: 0px;
}
.box {
background-color: #f5f5f5;
border: 1px solid #dcdcdc;
height: 100%;
}
.box h1 {
color: #667477;
font-size: 24px;
margin-left: 20px;
}
.box p {
color: #b1b1b1;
font-size: 13px;
margin-left: 20px;
margin-bottom: 20px;
}
.box a.button {
width: 95px;
background-color: #b4b4b4;
margin-right:-1px;
color: #fff;
padding-top: 13px;
padding-bottom: 13px;
font-size: 15px;
line-height: 16px;
text-align: center;
float: right;
height: 100%;
display: block;
}
.box a.button:hover {
text-decoration: none;
background-color: #a7a7a7;
}
Basically, I want to make the gray button (on the right) take full height of the box container. As of writing, I've tried setting the link to display block and set its height to 100%, but with no avail.
Any ideas?
I changed box to 100px, and setup parent elements of the button to have 100% height
However, you still may want to take a look at http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm to understand how height:100%; is different from width:100%;. I'm guessing you believe they work the same.
#import url("http://getbootstrap.com/dist/css/bootstrap.min.css");
a > span.button-single {
font-size: 30px;
color: #fff;
display: block;
margin-bottom: 8px;
margin-left: 0px;
}
.box {
background-color: #f5f5f5;
border: 1px solid #dcdcdc;
height: 100px;
}
.box h1 {
color: #667477;
font-size: 24px;
margin-left: 20px;
}
.box p {
color: #b1b1b1;
font-size: 13px;
margin-left: 20px;
margin-bottom: 20px;
}
.box a.button {
width: 95px;
background-color: #b4b4b4;
margin-right:-1px;
color: #fff;
padding-top: 13px;
padding-bottom: 13px;
font-size: 15px;
line-height: 16px;
text-align: center;
float: right;
height: 100%;
display: block;
}
.box a.button:hover {
text-decoration: none;
background-color: #a7a7a7;
}
.row{
height: 100%;
}
<div class="box">
<div class="row">
<div class="col-sm-10">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum purus ut pretium ultricies. Cras pulvinar tincidunt lorem, ut posuere risus mollis in. Fusce pharetra urna nec sagittis suscipit.</p>
</div>
<div class="col-sm-2" style="height:100%;">
<span class="button-single glyphicon glyphicon-plus-sign"></span> More<br/>Details
</div>
</div>
</div>
Just use the btn-block class instead of messing around with div heights, like this:
<div class="col-md-3"><button class="btn btn-block" >Show Details</button></div>
I am trying to create a custom list using pseudo elements in CSS.
When I add this "position: absolute; top: 6px; left: 0px;", my images for my arrows disappear altogether. When I remove the above line of code, my arrow images appear above the text each list item.
I want my custom arrows to appear next to the next of each list item. How can I fix this?
Here is my code.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Web Page</title>
<style type="text/css">
body { font-family: Arial; font-size: 16px; background-color: #f8e6ae; color: #888; }
.page { background-color: #fff; padding: 20px 30px 30px 50px; margin: 100px; }
.page h1 {
color: #fff;
font-size: 1.3em; font-weight: normal;
text-transform: uppercase;
background-color: #d60000;
position: relative;
margin: 0px -70px 20px -50px;
padding: 18px 0px 16px 50px;
}
.page h1:after {
content: '';
display: block; height: 40px; width: 40px;
background: url(images/fold.gif) no-repeat 0 0;
position: absolute; right: 0px; bottom: -40px;
}
.page p { line-height: 1.2em; }
.page a { color: #1badd2; text-decoration: none; }
.page ul { margin: 0; padding:0; }
.page li { display: block; position: relative;
padding: 2px 0px 8px 35px;
}
.page li:before {
content: '';
display: block;
background: url(images/arrow.png) no-repeat 0 0;
height: 12px; width 30px;
position: absolute; top: 6px; left: 0px;
background-size: 20px 8px;
}
</style>
</head>
<body>
<div class="page">
<h1>My Web Page</h1>
<p>Lorem ipsum dolor sit amet consectetur adi pisicing elit sed do eiusmod tempor incid idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citation ull amco laboris nisi ut aliquip ex ea commodo consequat elit sed do.</p>
<ul>
<li>Automating Web Graphics</li>
<li>Slice Tool</li>
<li>Smart Objects</li>
<li>Layer Comps</li>
</ul>
</div>
</body>
</html>
.
I was missing a colon for the width property in the preceding line of code.