I want to display a subtitle text, running over the top of an image, aligned to the bottom (of the DIV containing the image).
I was expecting I'd need to use Z-Index but for some reason it works without. I'd really like to understand why.
Here's the HTML:
<div class="latest-item">
<img src="images/latest-image-placeholder.png" alt="latest-image-placeholder"/>
<div class="latest-item-copy">Bad schools, flawed justice create crime. Test Bad schools, flawed justice create crime. Test </div>
</div>
And here's the corresponding CSS:
.latest-item {
height: 130px;
background-color: fuchsia;
margin-bottom: 20px;
overflow: hidden;
position: relative;
}
.latest-item-copy {
width: 220px;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
bottom: 0px;
position: absolute;
padding-left: 5px;
padding-right: 15px;
padding-top: 2px;
padding-bottom: 4px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
font-family: Georgia, Times New Roman, serif;
font-size: 14px;
line-height: 18px;
color: #F1F1F1;
font-weight: bold;
}
And here's what it outputs: http://i.stack.imgur.com/Hdl9l.png
When you position an item absolutely, it pulls the element out of the document flow. It's the same thing that happens when you float an element. They automatically get placed in a different "layer" that has a higher z-index.
Because you're using position: absolute
Related
I'm making a portfolio page with html/css at the basic level
I made a button with an animation effect using pseudo-class: active.
Below is my html, css code.
div,
input,
textarea {
box-sizing: border-box;
}
body {
margin: 0;
}
html {
line-height: 1.15;
}
* {
margin: 0;
padding: 0;
}
.main-bg {
background: rgb(2, 0, 36);
background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(172, 224, 255, 1) 0%, rgba(106, 166, 241, 1) 0%, rgba(73, 73, 182, 1) 100%);
width: 100%;
height: 1000px;
}
.main-introduction {
color: white;
width: 40%;
padding: 10px;
position: relative;
left: 100px;
top: 100px;
}
.main-introduction>h1,
p {
margin-bottom: 10px;
}
.showBtn {
/* margin-top: 10px; */
width: 110px;
padding: 15px;
border-radius: 15px;
background: rgb(98, 98, 98);
color: white;
border: none;
box-shadow: 3px 3px 3px black;
transition-duration: 0.3s;
cursor: pointer;
}
.showBtn:active {
margin-left: 5px;
margin-top: 5px;
box-shadow: none;
}
.phone {
width: 30%;
position: relative;
left: 1000px;
top: 2px;
}
.white-banner {
background: white;
text-align: center;
padding: 20px;
height: 200px;
}
.white-banner>h4,
p {
margin-bottom: 20px;
}
```
<body>
<div class="main-bg">
<div class="main-introduction">
<h1>Frontend Student Developer, <span style="font-size: larger; color: rgb(165, 255, 252);">Dan</span></h1>
<br>
<p>Always considering improvements, growing, code.</p>
<p>Recently fell in love with developing.</p>
<button class="showBtn">Show More</button>
</div>
<div>
<img src="img/phone.png" alt="phone" class="phone">
</div>
<div class="white-banner">
<h4>god tell us the reason youth is wasted on the young</h4>
<p>Lorem ipsum dolor sit amet consectetur elit.</p>
<button class="showBtn" style="width: 150px;">Show Portfolio</button>
</div>
</div>
</body>
When I cliked a button, as you saw, animation effect is happen by giving margin when I clicked(:active) btn.
But Phone image and white-banner also got animation effect!!
I thought about margin collapse. However, it was judged that it was not because the upper and lower borders were not overlapped.
Also I tried giving some additional margin. (Annotated code on .showBtn) But..
It didn't work, but rather the shadow effect turned strange. I also want to know why shadow effect turned strangely.
I don't know why this happened..
Problem : your 'html structure objects' interact with each others.
You can solve it too much ways with using css.
But you have to know this : 'The right way is only a few.'
This way is better for you : 'Learn more about CSS.'
For example :
Option 1 : Seperate your main objects divs and give they are some height and width.
Place they are right and left side.
// But you will have to give they are responsive behaviors.
// You will need some css experience.
Option 2 : Make your hero image 'absolute' not 'block'.
// And you will need for place it 'very well' some css knowledge like flex.
// learn 'flex'.
Option 3 : You can use your image like a background-image for your div.
// and make it contain, re-size and place it with some responsive behaviors.
// it will be never interaction with other html elements.
Option 4 : Use grids for seperate your html objects for not-interact with each others.
// learn grids.
// =============== best way. =============== //
if you don't want to save only today...
Examine other's similar html/css code examples.
Find similars but responsive ones.
// =============== best way. =============== //
I created multi-line-padded text based on Matthew Pennell's solution (codepen by CSS Tricks). In Chrome all looks fine, but in Firefox height of span elements bigger than height of their ancestor. If I adjust vertical padding for Firefox, in Chrome will be same problem, and vice versa.
Why it happens? What the real technical reasons of this problem?
HTML Code:
<div class="padded-multiline">
<h1>
<strong>How do I add padding to subsequent lines of an inline text element?</strong>
</h1>
</div>
CSS Code:
:root {
font-family: Arial, sans-serif;
font-size: 20px;
}
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}
Setting a line-height: 1; on strong will fix the problem also read my comment.
Chrome and Firefox seems to use different text layout system.
In Chrome it will floor the line-height attribute and Firefox seems to use the correct one.
To achieve the same effect for title, just use only the outline.
H1 does not need strong.
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding:1px;
color: #fff;
display: inline;
outline: 10px solid #c0c;
margin: 0;
font-size:16px;
}
<div class="padded-multiline">
<h1>How do I add padding to subsequent lines of an inline text element?</h1>
</div>
Here is codepen: http://codepen.io/anon/pen/vgRvjM
If you need exactly visual (that means less purple space from top and bottom, you can use for example border from after and before):
.padded-multiline:before{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
top:-3px;
}
.padded-multiline:after{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
bottom:-3px;
}
Codepen for this solution: http://codepen.io/anon/pen/QdmzxK
Unfortunately, there isn't a full and clean crossbrowser workaround. Because different UAs render text different, height of each textline may be taller a bit (or vice verca). So, I create a solution based on SCSS calculations of required box' sizes, and hide artefacts via overflow property.
Here is my solution, if you meet the same problem: http://codepen.io/ifiri/pen/ygEeeL
HTML:
<p class="multiline-text">
<span class="multiline-text__wrapper multiline-text__wrapper--outer">
<span class="multiline-text__wrapper multiline-text__wrapper--left">
<span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span>
</span>
</span>
</p>
SCSS:
/*
Variables
*/
$base-line-height: 1.75;
$base-font-size: 1.25em;
$multiline-padding-base: ($base-line-height / 2) * 1em;
$multiline-padding-horizontal: $multiline-padding-base;
$multiline-padding-vertical: $multiline-padding-base - (1em / 2);
$multiline-bg-color: #a5555a;
$multiline-font-color: #fff;
/*
= Snippet Styles
This code is required
*/
.multiline-text {
color: $multiline-font-color;
padding: 0px $multiline-padding-horizontal;
// hide line-height artefacts
overflow: hidden;
position: relative;
}
.multiline-text__wrapper {
background-color: $multiline-bg-color;
padding: $multiline-padding-vertical 0px;
}
.multiline-text__wrapper--outer {
// Inner padding between text lines
line-height: $base-line-height;
}
.multiline-text__wrapper--left {
position: relative;
left: -($multiline-padding-horizontal);
}
.multiline-text__wrapper--right {
position: relative;
right: -($multiline-padding-horizontal / 2);
}
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>
I'm trying to make a button using three background images so that we can pull in translations for the the text of the button and expand nicely. We'll probably add a base style for IE8 but our designer wants us to use this style and we couldn't recreate it nicely with pure CSS3.
Here are the images:
Here's the HTML (just a simple button, but thought I should put it anyway:
<button class="back clickable" aria-label="Back" onclick="javascript:history.back();">Back</button>
I've already tried a couple of things; I'll paste the CSS of both attempts.
Attempt 1: Using Pseudo-selectors
http://jsfiddle.net/c2B6X/
.back {
background: url("images/back-middle.png") 14px 0 repeat-x;
color: $white;
height: 28px;
padding: 5px;
&:before {
background: url("images/back-front.png") 0 0 no-repeat;
width: 14px;
}
&:after {
background: url("images/back-end.png") 100% 0 no-repeat;
width: 8px;
}
}
Attempt 2: Three background-images
http://jsfiddle.net/nPUQN/
.back {
background: none;
background-image: url("images/back-middle.png"), url("images/back-end.png"), url("images/back-front.png");
background-position: 14px 0, 100% 0, 0 0;
background-repeat: repeat-x, no-repeat, no-repeat;
border-right: 8px transparent;
border-left: 14px transparent;
color: $white;
height: 28px;
padding: 5px;
}
If it looks like atypical CSS that's because we're using SASS.
Is there something obvious I'm missing or doing wrong? Any advice on how to make this work would be greatly appreciated.
EDIT
Since I got so many answers that "work", I'll mark correct the answer that works best in Chrome, FF and IE9.
EDIT 2
I've tried all answers and none work in IE9. We have to support IE9 (and IE8, but I won't even go there for now). I'm going to start a bounty. Anyone who can supply an answer that works for IE9, Firefox and Chrome gets it.
Pseudo-content requires content, so you'll first need to specify that:
.selector::before {
content: ' ';
}
Then to define any layout such as width and height you'll need to display the pseudo elements as a block or inline-block. Block layout will force each pseudo element to wrap and inline-block will sit on the line so you'll either have to use floats or absolute positioning.
.selector {
position: relative;
height: 28px;
/* allow for the pseudo-elements which do not have layout due to absolute positioning */
margin: 0 15px;
}
.selector::before,
.selector::after {
content: ' ';
position: absolute;
top: 0;
width: 15px;
height: 28px;
}
.selector::before {
left: -15px;
}
.selector::after {
right: -15px;
}
Demo here for you: http://codepen.io/anon/pen/yaJGI
You'll need to add content for :before and :after to show. After that, you can position them absolutely and by giving them right: 100% and left: 100% respectively, you can position them in front of and behind the button.
button {
background:transparent;
border: none;
padding: 0;
margin: 0;
line-height: 1;
font-size: 12px;
cursor: pointer;
margin-left: 14px; /* width of :before */
}
.back {
background: url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat-x;
color: white;
height: 28px;
padding: 5px;
position: relative;
}
.back:before {
position: absolute;
content: "";
height: 28px;
top: 0;
right: 100%;
background: url("http://i.stack.imgur.com/6m2HC.png") 0 0 no-repeat;
width: 14px;
}
.back:after {
position: absolute;
content: "";
height: 28px;
top: 0;
left: 100%;
background: url("http://i.stack.imgur.com/2WA5B.png") 100% 0 no-repeat;
width: 8px;
}
The definitions of before and after are slightly the same, so you could write it down more compactly, but you need to re-sass it anyway. ;)
http://jsfiddle.net/c2B6X/
Tip: Note that downloading three images is less efficient. You can create one image that contains the start and end at the top, and the middle part at the bottom. By positioning the background, you can show the right part inside the elements. This technique is called sprites and it decreases the number of requests to make.
I came up with a little something that you can take a look at. You can modify it to best fit your needs.
http://jsfiddle.net/Xy7Hv/1/
HTML:
<button class="back">Back</button>
CSS:
.back {
border: none;
height: 28px;
padding-right: 8px;
padding-left: 14px;
background-image: url("http://i.stack.imgur.com/DaQcG.png"),
url("http://i.stack.imgur.com/6m2HC.png"),
url("http://i.stack.imgur.com/2WA5B.png");
background-position: 14px 0px, left, right;
background-size: 30px 100%, 14px 28px, 8px 28px;
background-repeat: no-repeat,no-repeat,no-repeat;
}
("background-size: 30px" is the width of the button, so if all your buttons are the same size it shouldn't be a problem)
with your multiple background version, you could add gradient or white image to build your button bg , keeping some space with padding.
http://jsfiddle.net/nPUQN/1/
.back {
background:
url("http://i.stack.imgur.com/2WA5B.png") 100% 0 no-repeat ,
url("http://i.stack.imgur.com/6m2HC.png") 0 0 no-repeat,
-webkit-linear-gradient(0deg, white 0, white 14px , transparent 14px ,transparent) 0 0 no-repeat ,
-webkit-linear-gradient(180deg, white 0, white 8px , transparent 8px ,transparent) 0 0 no-repeat ,
url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat
;
color: $white;
height: 28px;
padding: 5px 8px 5px 14px;
}
prefixed for chrome, add other prefix needed or use a prefix js :)
I add this answer because i like to keep the other as it is.
This one is to be tested in IE8/9 with pseudo and position:
http://codepen.io/gcyrillus/full/lBpaI or to edit :
http://codepen.io/gcyrillus/pen/lBpaI
.back {
background:
url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat
;
color: white;
height: 28px;
padding: 5px;
position:relative;
overflow:visible;
}
.back:before {
content:url(http://i.stack.imgur.com/6m2HC.png);
top:0;
left:-14px;
position:absolute;
}
.back:after {
content:url(http://i.stack.imgur.com/2WA5B.png);
position:absolute;
right:-8px;
top:0;
}
I used this code today. It's similar to your 2nd example, but uses the background shortcut property and a mixture of position strings.
background: url("../images/img01.png") 0px 0px no-repeat, url("../images/img02.png") 53px 0px repeat-x, url("../images/img03.png") right top no-repeat;
img01 = left image (53px wide)
img02 = fill image
img03 = right image
I am trying to create a box that has a 'highlight' down the sides of it, and at the top.
The CSS for the box was pretty simple, however, now that I introduced this 'highlight' to the design, it has added another level of complexity to the CSS...
I have tried a lot of things, not sure if they will help but here is my most recent:
/* Define the Main Navigation Drop Downs */
#mn_navigation .dd {position:relative;width:226px;padding:29px 0 0;background:transparent url("//beta.example.co.uk/_images/_global/dd_handle.png") no-repeat;z-index:1000;}
#mn_navigation .dd nav {padding:30px 0;background:#3E5032 url("//beta.example.co.uk/_images/_global/dd_bg.png");border-radius:3px;}
#mn_navigation .dd nav a {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff !important;height:25px;line-height:25px;}
Please note I have posted the above to show that I have actually tried to sort this myself. The above code will probably not even help as a starting point as a restructure of the HTML may be necessary!
Here is the current HTML (probably needs to be restructured):
<div id="dd_foo" class="dd">
<nav>
LINK
</nav>
</div>
Here is a possible restructure (something like):
<div id="dd_foo" class="dd">
<div class="handle"><!-- Dropdown Handle --></div>
<nav>
LINK
</nav>
</div>
This is what I need the box to look like (notice the faint white border at the top and half way down the sides):
I have also included the box split into its separate elements (handle and background)
I think I can see how this can be done with clever overlaps and nested divs, but ideally I don't really want to resort to this... Can anybody suggest an alternative solution?
Simplest approach
You can try achieving this using a simple box shadow:
.plaque {
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
/*...*/
}
An Example
Here's an example using 1 class and a div on jsbin.
Copy paste code
This code is only for modern browsers; it might cause ie < 9 and other non supporting browsers to explode.
.plaque:after {
top: -9px;
content: " ";
height: 11px;
width: 30px;
position: absolute;
pointer-events: none;
left: 50%;
margin-left: -15px;
display: block;
background-repeat: no-repeat;
}
.plaque {
width: 250px;
height: 100px;
display: block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
border-radius: 5px;
border: 1px solid transparent;
font-family: sans-serif;
color: white;
font-size: 1.2em;
text-overflow: ellipsis;
position: relative;
top: 6px;
}
/* Use whatever background you want */
.plaque { background-color: green; }
.plaque:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqMUktPU0EU/mZuL6Up1RCjC4oRau4t4FJ84EKID/ZAjI9/6Mo/4MadG5dqJGjBatpyuY+2UNreeXDOBE0MNHGSSWZyzvnOd77zicdbd+EVJKyxGPSHmC4XIYSAMQYCoJhn81wJKSnHWhR8D1oZl69yhamiD8GBSefpywc2XKzjy7fP+PDuk5iUJxnksvvkxX1buxkgThOEt5exvr1qJ+XKy5CfvXpow9oSsn6GdqeF40EPK+GKY/ZfTNa3Vm1AI6TdFAeNfQgp0CKgrJehVg1AGl5gJLTWfxGfv15zI3BBnB5CehJGG5Cw8EjY6tw8KjNXsfv9K96//SguMOERgoU6+ic9NH8eQClNGzDQBMLb4FU1fzdxFB+hev0WNnbu2X802TxnkGQJoriNymwZHrFgAbhdidbOK+YTxR0ojLEc3sHmm0dOI8Gq10n9OI1xGLVcMvuGGYyHOYqlKcfK9wvOF3/i12ZvoFK+gsavPUgGSLsJkm4En4xDTqMi45iUZqZdd34zJY7L8was2enoGMHCEmS3l6LxYx9qrJ2I7FTNelBxPlKuYDgYu9nzUe6cenoygqF/J2o7AmcCDACumSjtgWp8aAAAAABJRU5ErkJggg==); }