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.
Related
I'm currently trying to add some simple padding to the bottom of my testimonial element, so that it doesn't end right after the text.
It seems that no matter what value I enter in padding or padding-bottom, the bottom padding expands a set amount. I'm wondering how to fix this so it displays padding that is specific to the value I set.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
How padding shorthand works....
default declaration of padding looks like this:
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
You can abbreviate that and apply padding to all sides equally:
padding: 10px;
You can abbreviate a little less and apply different values to top and bottom, and right and left.
This equates to padding: top/bottom right/left;
padding: 10px 20px;
You can use full abbreviations to apply different values to each of the 4 sides independently:
This equates to padding: top right bottom left; or:
padding: 10px 20px 5px 20px;
In your CSS you have no top or bottom padding applied to the testimonial class, you only have right/left padding applied:
.testimonial {
padding: 0 5%;
}
You basically have (pseudo code as example):
.testimonial {
padding: top=0 right=5% bottom=0 left=5%;
}
If you want a the same padding all the way around, remove the first 0 in the property:
.testimonial {
padding: 5%;
}
If you want a similar top/bottom padding, then merely adjust the padding property to add top/bottom values:
.testimonial {
padding: 10% 5%;
}
If you want different padding on the top and bottom, then adjust the padding property to add all the values:
.testimonial {
padding: 0 5% 10% 5%;
}
You don't have any bottom padding. Changing to padding: 10px 5% adds 10px padding to the top and bottom, 5% to the left and right.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 10px 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5% 5% 0;
background-color: rgba(50, 173, 140, 0.82);
}
Adding all of the values ( even if 0 ) solved the problem right away.
Also, I am aware that if only two values are given the 1st represents top and bottom.
You don't currently have padding on the bottom of the testimonial div.
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 1% 5%;
background-color: rgba(50, 173, 140, 0.82);
}
Change the padding to the above ... padding: 1% 5%; or to target specifically the bottom ... padding 0 5% 1%; ... do that and you should be good to go, unless I'm misunderstanding your question. Good luck!
Found that having the last set of text in .testimonial in a paragraph tag, it was inserting a line break. So simply took that away and now it seems to be working fine.
I' am doing a project and I have a little issue with z-index property.
Here is my code:
(HTML)
<div class="outer_obw">
<div class="obw1">
<div class="box" id="blue_box">
<div id="inn_blue" class="inner_box"><p>Box1</p></div>
</div>
</div>
<div class="main_box_content">
<div class="back_box">
<div class="main_box">
<p id="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="obw3">
<div class="box" id="green_box">
<div id="inn_green" class="inner_box"><p>Box2</p></div>
</div>
</div>
</div>
</div>
(CSS)
.outer_obw {
width: 78.5%;
margin: 0 auto;
}
.obw1 {
min-height: 80px;
}
.obw3 {
min-height: 80px;
margin-top: -40px;
}
.box {
width: 25.25%;
min-height: 80px;
cursor:pointer;
position: relative;
}
.inner_box {
height: 68px;
margin: -10.5px 6px;
text-align: center;
position: relative;
}
#inn_blue {
background-color: #fff;
z-index: 5;
}
#inn_green {
background-color: #fff;
z-index: 5;
}
#blue_box {
background-color: blue;
float: left;
z-index: 1;
}
#green_box {
background-color: green;
float: right;
}
.main_box_content {
display: table;
width: 78.5%;
position: absolute;
margin-top: -40px;
}
.back_box {
display: table;
background-color: blue;
width: 65%;
margin: 0 17%;
position: relative;
z-index: 3;
}
.main_box {
display: table;
background-color: #f1f1f1;
margin: 6px;
padding: 0.5% 3%;
position: relative;
z-index: 10;
}
Here is all code and visualization.
I intended to achieve such an effect:
All what I need to do is insert inn_blue and inn_green (white fields of box1 and box2) between main_box (gray field with a text) and back_box (red background of the main box.
I don't know what I'm doing wrong. Z-index of the main_box should be greater than z-index of inn_blue/inn_green and z-index of the inn_blue/inn_green should be greater then back_box.
And so it is in my code, but the effect is not what I expected...
So the question is what am I doing wrong?
There are so many layers of complexity in your example. Instead, let's use the natural layers to our advantage and position with absolute and minimal markup.
The basics
Start off with a wrapper to contain your three boxes:
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
The wrapper will be position: relative and its three children will be positioned with position: absolute and top / right / bottom / left. In order to allow a flexible size that resizes in proportion, we can make use of the viewport width (vw) unit for both the width and the height. Each child div is given a percentage height.
.wrapper {
position: relative;
background: #EEE;
height: 60vw;
width: 80vw;
}
.wrapper div {
position: absolute;
height: 25%;
width: 20%;
}
.wrapper .one {
top: 16px;
left: 16px;
background: blue;
}
.wrapper .two {
top: 50%;
left: 50%;
margin: -23% 0 0 -31%;
height: 60%;
width: 62%;
background: red;
}
.wrapper .three {
bottom: 16px;
right: 16px;
background: green;
}
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
That gives us this:
Layer the main box
Now we want the red square to overlap both the blue and green squares. All we have to do is move the red <div> below them in the markup. The last element in the markup will overlap the elements before it naturally.
<div class="wrapper">
<div class="one"></div>
<div class="three"></div>
<div class="two"></div><!-- move it one line down -->
</div>
.wrapper {
position: relative;
background: #EEE;
height: 60vw;
width: 80vw;
}
.wrapper div {
position: absolute;
height: 25%;
width: 20%;
}
.wrapper .one {
top: 16px;
left: 16px;
background: blue;
}
.wrapper .two {
top: 50%;
left: 50%;
margin: -23% 0 0 -31%;
height: 60%;
width: 62%;
background: red;
}
.wrapper .three {
bottom: 16px;
right: 16px;
background: green;
}
<div class="wrapper">
<div class="one"></div>
<div class="three"></div>
<div class="two"></div><!-- move it one line down -->
</div>
Now we have the correct layers:
Add the border layers
In order to reduce complexity, we can create the box borders with :before pseudo elements. These will create the extra elements we need to create the overlapping borders.
Give each child div a :before element and background color like below:
.wrapper div:before {
content: '';
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
z-index: -1;
}
.one:before {
background: blue;
}
.two:before {
background: red;
}
.three:before {
background: green;
}
The -1 z-index will ensure that they are overlapped by the div backgrounds and the -6px position on all sides pulls them outside by 6px to give us a 6px border.
The final product
We add z-index: 1 to the wrapper, so that it wont overlap our border pseudo elements. box-sizing: border-box is used so that the padding is incorporated into the widths and heights.
Example 1
Limitation of this example: We cannot use overflow to hide excessive text on the main box, as it will cut off our border or cause a scroll bar to always be present..
.wrapper {
position: relative;
background: #EEE;
height: 60vw;
width: 80vw;
max-width: 772px;
max-height: 579px;
min-width: 390px;
min-height: 292px;
z-index: 1;
}
.wrapper div {
position: absolute;
box-sizing: border-box;
background: #FFF;
height: 25%;
width: 20%;
text-align: center;
padding: 10px;
}
.wrapper div:before {
content: '';
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
z-index: -1;
}
.one:before {
background: blue;
}
.two:before {
background: red;
}
.three:before {
background: green;
}
.wrapper .one {
top: 16px;
left: 16px;
}
.wrapper .two {
top: 50%;
left: 50%;
margin: -23% 0 0 -31%;
height: 60%;
width: 62%;
background: #EEE;
text-align: left;
}
.wrapper .three {
bottom: 16px;
right: 16px;
}
<div class="wrapper">
<div class="one">Box1</div>
<div class="three">Box3</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
Example 2
Slightly less elegant, the main box border is positioned relative to the wrapper itself, we can use overflow in this example to cut off or scroll excessive text.
.wrapper {
position: relative;
background: #EEE;
height: 60vw;
width: 80vw;
max-width: 772px;
max-height: 579px;
min-width: 390px;
min-height: 292px;
z-index: 1;
}
.wrapper div {
position: absolute;
box-sizing: border-box;
background: #FFF;
height: 25%;
width: 20%;
text-align: center;
padding: 10px;
}
.wrapper:after {
content: '';
position: absolute;
margin: -23% 0 0 -31%;
top: calc(50% - 6px);
left: calc(50% - 6px);
height: calc(60% + 12px);
width: calc(62% + 12px);
background: #F00;
z-index: -1;
}
.wrapper div:before {
content: '';
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
z-index: -1;
}
.one:before {
background: blue;
}
.three:before {
background: green;
}
.wrapper .one {
top: 16px;
left: 16px;
}
.wrapper .two {
top: 50%;
left: 50%;
margin: -23% 0 0 -31%;
height: 60%;
width: 62%;
background: #EEE;
text-align: left;
}
.wrapper .three {
bottom: 16px;
right: 16px;
}
<div class="wrapper">
<div class="one">Box1</div>
<div class="three">Box3</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
By streamlining the markup and css a bit and only z-indexing the necessaries (namely .top-box-border and .mid-box-inner) I believe I have what you're looking for:
[class*="border"] {
width: 100px;
height: 100px;
border: 10px solid green;
position: relative;
}
[class*="inner"] {
width: 100%;
height: 100%;
background-color: #999;
position: relative;
text-align: center;
box-sizing: border-box;
padding: 1ex 1em;
}
.mid-box-border {
width: 200px;
height: 200px;
border-color: blue;
margin-top: -40px;
margin-left: 75px;
}
.mid-box-inner {
background-color: #ccc;
text-align: left;
z-index: 20;
}
.bot-box-border {
margin-top: -40px;
margin-left: 255px;
}
.top-box-border {
z-index: 10;
}
<div class="top-box-border">
<div class="top-box-inner">Box 1</div>
</div>
<div class="mid-box-border">
<div class="mid-box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic accusantium dicta sint a cum eveniet, id! Corrupti sit reprehenderit ad veniam ratione mollitia molestiae, sapiente quasi id esse, incidunt eligendi.</div>
</div>
<div class="bot-box-border">
<div class="bot-box-inner">Box 2</div>
</div>
Set position: initial; for .back_box
Just make position relative for each box and position absolute for the background(border) and content holder to make them out of their workflow, then first element will take higher z-index and the elements in the back will take lower, look at this one https://jsfiddle.net/s3y94x1w/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.cont {
width: 100%;
}
.blue-box {
width: 20%;
height: 150px;
position: relative;
margin: 10px 0px 0px 8%;
cursor: pointer
}
.blue-box .background {
background-color: blue;
height: 100%;
width: 100%;
position: absolute;
}
.blue-box .content {
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 2
}
.red-box {
width: 40%;
height: 150px;
position: relative;
margin-left: 19%;
margin-top: -70px;
}
.red-box .background {
background-color: red;
height: 100%;
width: 100%;
position: absolute;
}
.red-box .content {
background-color: #eee;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 3;
overflow: hidden
}
.green-box {
width: 20%;
height: 150px;
position: relative;
margin-left: 50%;
margin-top: -70px;
cursor: pointer
}
.green-box .background {
background-color: green;
height: 100%;
width: 100%;
position: absolute;
z-index: -1
}
.green-box .content {
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
<div class="cont">
<div class="blue-box">
<div class="background"></div>
<div class="content">Box1</div>
</div>
<div class="red-box">
<div class="background"></div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<div class="green-box">
<div class="background"></div>
<div class="content">Box2</div>
</div>
</div>
Okay, so I've been practicing yesterday and after a few hours I checked this in Chrome (was working with firefox). How should i fix that?
I don't know where does it take the ridiculous height from.
Here's the preview i get (left is firefox, right is chrome)
Styling:
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #f0ca4d;
display: flex;
justify-content: center;
font-family: "Roboto";
color: white;
}
.popup {
margin-top: 100px;
width: 400px;
/* height: 300px;*/
background-color: #fff;
-webkit-box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
-moz-box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
position: relative;
}
.top {
width: 100%;
height: 70px;
background-color: #324d5c;
display: flex;
justify-content: flex-start;;
flex-direction: row;
}
.top span {
margin: 32px 16px 16px 16px;
font-size: 24px;
font-weight: 300;
}
.content {
color: rgba(0,0,0,0.5);
margin: 32px 32px 0px 32px;
line-height: 150%;
}
.fab {
width: 48px;
height: 48px;
background-color: #de5b49;
border-radius: 50%;
margin-left: auto;
margin-right: 16px;
position: absolute;
right: 0px;
top: 46px;
text-align: center;
}
.fab:hover span {
cursor: pointer;
}
.fab span {
font-size: 30px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
font-weight: 300;
line-height: 48px;
display: inline-block;
}
.bot span {
text-transform: uppercase;
color: #324d5c;
font-weight: 500;
padding: 16px 32px 16px 32px;
transition: background-color 0.45s cubic-bezier(0,1,.83,.67) 0.08s;
background-color: white;
}
.bot span:hover {
background-color: #f8f8f8;
cursor: pointer;
}
.bot {
width: 100%;
display: flex;
justify-content: flex-end;
}
#disabled {
color: #d1d1d1;
margin-right: auto;
}
#disabled:hover {
background-color: white !important;
cursor: default;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
Sctructure:
<div class="popup">
<div class="top">
<span>Warning box</span>
</div>
<div class="fab">
<span>+</span>
</div>
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> -->
</div>
<div class="bot">
<span id="disabled">disabled</span>
<span>ENABLED</span>
</div>
</div>
Can't get this to work.
This is what I have in chrome..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<title> Stack Overflow issues</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #f0ca4d;
display: flex;
justify-content: center;
font-family: "Roboto";
color: white;
}
.popup {
margin-top: 100px;
width: 400px;
/* height: 300px;*/
background-color: #fff;
-webkit-box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2);
-moz-box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2);
box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2);
position: relative;
}
.top {
width: 100%;
height: 70px;
background-color: #324d5c;
display: flex;
justify-content: flex-start;
;
flex-direction: row;
}
.top span {
margin: 32px 16px 16px 16px;
font-size: 24px;
font-weight: 300;
}
.content {
color: rgba(0, 0, 0, 0.5);
margin: 32px 32px 0px 32px;
line-height: 150%;
}
.fab {
width: 48px;
height: 48px;
background-color: #de5b49;
border-radius: 50%;
margin-left: auto;
margin-right: 16px;
position: absolute;
right: 0px;
top: 46px;
text-align: center;
}
.fab:hover span {
cursor: pointer;
}
.fab span {
font-size: 30px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
font-weight: 300;
line-height: 48px;
display: inline-block;
}
.bot span {
text-transform: uppercase;
color: #324d5c;
font-weight: 500;
padding: 16px 32px 16px 32px;
transition: background-color 0.45s cubic-bezier(0, 1, .83, .67) 0.08s;
background-color: white;
}
.bot span:hover {
background-color: #f8f8f8;
cursor: pointer;
}
.bot {
width: 100%;
display: flex;
justify-content: flex-end;
}
#disabled {
color: #d1d1d1;
margin-right: auto;
}
#disabled:hover {
background-color: white !important;
cursor: default;
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Likely future */
}
</style>
</head>
<body>
<div class="popup">
<div class="top">
<span>Warning box</span>
</div>
<div class="fab">
<span>+</span>
</div>
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> -->
</div>
<div class="bot">
<span id="disabled">disabled</span>
<span>ENABLED</span>
</div>
</div>
</body>
</html>
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>
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