I have been working on a new site and when I was trying to use the navigation bar (while in mobile device mode) the navigation bar started drawing under the text. I have checked the code from my previous website and I just do not understand why it does not work. I can't even interact with the navigation bar.
Here is what happens: https://gyazo.com/91ca07c2fafd81355152f5c2379fd89d
Here is the code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<title>Landing Page</title>
</head>
<body>
<div class="main">
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbutton">
<i class="fas fa-bars"></i>
</label>
<img src="./img/logo.png" alt="Logo" />
<ul>
<li><a class="active" href="./">Home</a></li>
<li>Store</li>
<li>Download</li>
</ul>
</nav>
<main>
<div class="header"><p>Example Client</p></div>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id
pharetra metus. Nullam sit amet lorem sapien. Aliquam commodo
pretium.
</p>
</div>
<div class="footer">
<a href="https://t.me/scaldings">
<i class="d-block fab fa-telegram text-muted fa-lg mx-2"></i>
</a>
<a href="https://discord.com/channels/#me/394894093437763594">
<i class="d-block fab fa-discord text-muted fa-lg mx-2"></i>
</a>
<p>© Example Client</p>
</div>
</main>
</div>
</body>
</html>
CSS:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
::-webkit-scrollbar {
display: none;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.main {
width: 100vw;
height: 100vh;
background: url("/img/bg.jpg") no-repeat;
background-size: cover;
}
nav {
height: 100px;
width: 100%;
background: rgba(97, 97, 97, 0.4);
}
/*Logo*/
nav img {
width: 80px;
float: left;
margin-top: 10px;
margin-left: 80px;
transition: 0.3s;
}
nav img:hover {
filter: brightness(80%);
}
/*Logo*/
/*Navigation links*/
nav ul {
float: right;
margin-right: 80px;
}
nav ul li {
display: inline-block;
line-height: 100px;
margin: 0 10px;
font-size: 20px;
}
nav ul li a {
padding: 0 10px;
color: #ffffff;
transition: 0.3s;
}
nav ul li a:hover {
color: #bdbdbd;
}
a.active {
border: 1.9px solid #ffffff;
border-radius: 1px;
}
a.active:hover {
border: 1.9px solid #bdbdbd;
}
.checkbutton {
float: right;
line-height: 100px;
margin-right: 80px;
color: #ffffff;
font-size: 30px;
transition: 0.3s;
cursor: pointer;
display: none;
}
.checkbutton:hover {
color: #bdbdbd;
}
#check {
display: none;
}
/*Navigation links*/
/*Main wrapper*/
main {
height: calc(100vh - 100px);
position: relative;
}
.header {
position: absolute;
top: 30%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 72px;
color: #ffffff;
transition: 0.3s;
}
.description {
text-align: center;
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 600px;
font-size: 18px;
color: #d8d8d8;
word-wrap: normal;
transition: 0.3s;
}
.footer {
position: absolute;
float: left;
bottom: 0;
margin-left: 10px;
color: #ffffff;
}
.footer a {
color: #ffffff;
}
.footer a:hover {
color: #bdbdbd;
}
/*Main wrapper*/
/*Responsive part*/
#media (max-width: 952px) {
nav ul li a {
font-size: 20px;
}
main h1 {
font-size: 64px;
}
}
#media (max-width: 858px) {
.checkbutton {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(97, 97, 97, 0.4);
top: 100px;
left: -100%;
text-align: center;
transition: all 0.8s;
}
nav ul li {
display: block;
margin: 60px 0;
}
nav ul li a {
font-size: 20px;
}
main h1 {
font-size: 60px;
}
#check:checked ~ ul {
left: 0;
}
}
/*Responsive part*/
Thank you in advance!
Increase z-index of the if the element you want to be on top.
simple example:
.below-item{
z-index:1;
}
.top-item{
z-index:2;
}
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'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 have css for displaying an image content on the left and a sidebar on the right. The image can vary in side and orientation (landscape, portrait), therefore I want the details sidebar on the right side of the image to be relatively positioned to the image.
Here is the screenshort:
The css code is as follows:
* {
margin: 0;
padding: 0;
}
a {
/* text-decoration: underline; */
text-decoration: none;
color: #6B2E42;
}
a:hover {
text-decoration: none;
}
body {
background: #C9CFCD url(images/img01.gif);
font-size: 11pt;
color: #323232;
line-height: 1.75em;
}
body,input {
font-family: Arial, sans-serif;
}
#content {
/* HOLDS THE IMAGE */
background: #FFFFFF;
/* width: 595px; */
color: #6E6E6E;
padding: 10px 10px 0 35px;
float: left;
border-bottom: solid 2px #BBC1BF;
}
#page {
margin: 20px 0 20px 0;
position: relative;
width: 980px;
padding: 0;
}
#page ul {
list-style: none;
}
#page ul li {
padding: 2px 0 2px 0;
border-top: solid 1px #D9D9D9;
}
#sidebar {
background: #FFFFFF;
margin: 0 0 0 685px;
color: #6E6E6E;
padding: 10px 10px 10px 20px;
width: 225px;
border-bottom: solid 2px #BBC1BF;
}
#wrapper {
width: 980px;
margin: 35px auto 0 auto;
position: relative;
}
And here is the layout:
<body>
<div id="page">
<div id="content">
<p>
<img src="Mona_Lisa_by_Leonardo_da_Vinci.jpg">
</p>
<br class="clearfix" />
</div>
<div id="sidebar">
<h3>DETAILS</h3>
<div class="date-list">
<ul class="list date-list">
<li class="first"><span class="id">ID:</span> 1</li>
<li class="last"><span class="ref">REFERENCE No.:</span> LSK001</li>
<li><span class="title">TITLE:</span> Monalisa</li>
<li><span class="obj">OBJECT TYPE:</span> Painting</li>
<li class="last"><span class="mat">MATERIAL USED:</span> Canvas,oil...</li>
<li class="last"><span class="tech">TECHNIC:</span> brush stroking...</li>
<li class="last"><span class="width">WIDTH:</span> 1 meter</li>
<li class="last"><span class="height">HEIGHT:</span> 3 meters</li>
<li class="last"><span class="artist">ARTIST:</span> Da Vi nci</li>
<li class="last"><span class="source">SOURCE:</span> ....</li>
</ul>
</div>
<h3>DESCRIPTION</h3>
<p>
Urna dis suscipit lorem sed luctus. Elementum suspendisse tempus fermentum ornare libero phasellus nibh conseuqat dolore.
</p>
</div>
<br class="clearfix" />
</div>
</body>
Please, see attached screenshort for the layout in the browser.
joseph
So if picture is small - sidebar on the right, if large, sidebar under the image?
#page{
width: 600px;
margin: 0 auto;
background-color: #efefef;
overflow:hidden;
}
#content,
#sidebar{
float:left;
}
#sidebar{
margin: 10px;
padding:10px;
background-color: tan;
}
.clear{
clear: both;
}
http://jsfiddle.net/sy9xM/1/ - you can change img width to check the result. Does it works for you?
Hi~ I'm making an art portfolio online and I've run into an issue. I've used sticky footer ryanfaitdotcom/sticky-footer/ and now my page seems unnecessarily long. Any advice would be appreciated!
Here's the code:
deleted because it's wrong. correct code can be found on bottom
or here:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/layout.css"/>
<link rel="stylesheet" href="css/style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div id="page-wrap" class="group">
<div id="main-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut </p>
</div> <!-- End main-content -->
</div> <!-- End page-wrap -->
<div class="push"></div>
</div> <!-- End wrapper -->
<div class="footer">
<img src="Images/organicspahouston_logo.png" width="400" height="238" />
<div class="bottom">
<p>Copyright (c) 2008</p>
</div>
</div>
</body>
with style.css
* {margin: 0;padding: 0;}
html { height: 100%; background:#B5A9A0 url(../Images/osh_pic_bg1.png) no-repeat; background-size: 100%}
body { height: 100%; font: RomulC; font-size: 12px; color:#A39E95; text-align: center }
article, aside, figure, footer, header, nav, section { display: block; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */
.wrapper {
position: relative;
width: 800px;
margin: 0 auto -258px;
}
#page-wrap { width:800px; -moz-border-radius: 15px;
border-radius: 15px; margin: 175px auto; background:#000; position:relative;}
#main-content { float:right; width: 640px; margin: 10px 10px 10px 0px; -moz-border- radius: 15px;
border-radius: 15px; background: #2D261C; position: relative; padding: 10px 0px 0px 0px; }
.footer {
position: relative;
width: 100%;
margin: 0 auto 0;
padding: 0;
text-align:center;
height: 258px;
overflow:hidden;
}
.footer img {
position: relative;
width: 400px;
margin: 0 auto;
}
.bottom {
position: relative;
width: 100%;
height: 20px;
margin: 0 auto 0;
padding: 0;
text-align:center;
background-color: #000000;
}
.bottom a {
color: #fff;
text-decoration: underline;
border: 0;
}
.bottom p {
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
}
</html>
and layout.css from sticky footer
* {
margin: 0;
}
html, body {
height: 800px;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -258px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
height: 258px; /* .push must be the same height as .footer */
}
.push {
height: 258px; /* .push must be the same height as .footer */
}
/*
#Samich provided me with the solution below (plus helped me immensely with cleaning things up). I was adding margin, but I had to add it to BOTH sides so it went from:
#page-wrap { width:800px; -moz-border-radius: 15px;
border-radius: 15px; margin: 175px auto; background:#000; position:relative;}
to
#page-wrap { width:800px; -moz-border-radius: 15px;
border-radius: 15px; margin: 175px auto Opx; background:#000; position:relative;}
http://jsfiddle.net/kagawa_leah/c2N24/11/
What a difference a 0 makes.
You need to set the height of your footer and margin-bottom of your wrapper to the same value. In your case it's 4em.
http://jsfiddle.net/WqNEj/3/
P.S.
http://jsfiddle.net/WqNEj/8/
I've set overflow:hidden in the footer because it's height 260px which is bigger than footer height.
.push must be the same height as your footer , but negative: Set .push to margin-bottom: -258px