I want to make a title overlay an image. That's easy, but I want it to be a certain width, and have the text in blocks. Here's an image of what I want:
I'd like to do this in CSS if possible, but I'm fine with using Javascript.
See a live example here. Try this:
HTML:
<div>
<span>Hello world</span><br>
<span>More text here</span>
</div>
CSS:
div {
width: 400px;
height: 400px;
background-image: url(http://www.hotels.tv/london-hotels/images/destinations/1/w97654_8.jpg);
background-repeat: no-repeat;
background-image-width: 100%;
}
div span {
font-size: 30px;
position: relative;
top: 100px;
background-color: gray;
color: white;
}
EDIT
In this example, the text is aligned to the bottom by using display: table-cell and vertical-align: bottom on the parent
EDIT 2
For a transparent background, use rgba(), as in this example
EDIT 3
To align the text right, set text-align: right on the parent, as in this example
Might need a little tweaking to get it exactly how you want to look but here's a starting point.
<style>
#image_container {
position: relative;
background-image: url(path/to/image) no-repeat;
width: 500px;
height: 500px;
}
#image_container .title {
position: absolute;
top: 300px;
background: #000;
background: rgba(0,0,0,0.75);
color: white;
font-size: 30px;
font-weight: bold;
}
</style>
<div id="image_container">
<div class="title">
<p>Some Text</p>
</div>
</div>
jsFiddle demo
HTML:
<div id="background">
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</div>
CSS:
#background {
background: url(http://css-tricks.com/examples/TypeOverImage/images/3754004820_91a5c238a0.jpg) no-repeat;
width: 400px;
height: 300px;
}
span {
position:relative;
clear:both;
float:left;
color:#fff;
font-size:23px;
font-weight:bold;
top:150px;
margin-top:-2px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.7);
padding: 5px 15px;
}
This might get you started: http://jsfiddle.net/FyL6J/
There is no reason why this has to be done using jQuery, but I find .position() to be helpful.
Something like this? http://jsfiddle.net/EcXZZ/
The first and simplest way I see to do so would be to get a png image with desired opacity, by example a 1x1 RGB(0,0,0) pixel with 40% opacity for the title background and set your CSS this way :
<style>
.image_holder
{
position: absolute;
left: 10px;
top: 10px;
}
.image_holder > img
{
position: absolute;
left: 0;
top: 0;
}
.image_title_overlay
{
position: absolute;
left: 0;
top: 120px;
background-image: url('images/black.40%opacity.1x1.png');
color: 'white';
padding: 10px 12px;
}
</style>
<div class="image_holder">
<img src="image_url.jpg"/>
<p class="image_title_overlay">A Movie in the Park: <br/>Kung Fu Panda</p>
</div>
I would use rgba... basically like this:
span {
background-color: rgba(0, 0, 0, 0.4);
padding: 5px 17px;
}
http://jsfiddle.net/TCtR5/3/
Related
I have stumbled upon a frontend problem where I cannot figure out what the best approach is.
The simplified layout I need to achieve can be looked up here: https://jsfiddle.net/kw56sa84/
content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.end-of-body-block {
width: 50%;
margin: 0 auto;
padding: 30px;
border: 1px solid #a00;
position: relative;
transform: translateY(50%);
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9)
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
<div class="footer">
Links and other information that should be visible
</div>
</div>
Basically what I have are content and footer and there is a block that should be 50% in the body and 50% in the footer, and have both element contents moved by a dynamic half-height of the connecting element. In the jsfiddle example, the footer content should have some sort of padding. The height of all elements is dynamic.
The main question I suppose here is - is it possible to achieve this with CSS (solution may include grids, flexboxes), or am I out of luck and should seek a JS solution?
EDIT Here you can see a simplified design that should be achieved:
Thanks in advance!
Based on your explication you want that class: "end-of-body-block" be positionned dynamicly between body and footer.
The basic idea is to remove the red box from the normal flow by using position: absolute; but by doing that, it is loosing basic position strucutre. So we fix it with parent with position: relative;. Which is classic move.
To do so, I added position:relative; in .content:
.content{
position:relative;
}
And then I postionned absolute your red block as followed:
.end-of-body-block{
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
EDIT
JS to add dynamic padding on content and footer.
DEMO:
var heightRed = document.getElementsByClassName('end-of-body-block')[0].offsetHeight;
heightRed = (heightRed / 2) + 2 + 'px';
var content = document.getElementsByClassName('content')[0]
var footer = document.getElementsByClassName('footer')[0]
content.style.paddingBottom = heightRed;
footer.style.paddingTop = heightRed;
.content{
position:relative;
}
.content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.end-of-body-block {
width: 50%;
margin: 0 auto;
padding: 30px;
border: 1px solid #a00;
/*position: relative;
transform: translateY(50%);*/
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9);
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
<div class="footer">
Links and other information that should be visible
</div>
</div>
After a few hours of trial and error, I came up with an idea of how to solve this. It's a real hacky solution, but in my case it actually works, maybe someone else will find it useful.
So in my case the footer had an image background, thus making it more difficult to think of this, however.. solution here could be to simulate the same background as the other part where your element isn't.
To elaborate, instead of trying to move the other element's content, make it seem that it does so. I moved the red box to the footer instead, so it takes up the whole height it needs. Then add a pseudo (before) element as absolute to the red box's parent and make it full width and 50% of it's height. See here for example https://jsfiddle.net/co35svtd/4/
.content {
position: relative;
z-index: 0;
width: 100%;
display: inline-block;
}
.wrapper {
background: #eee;
}
.content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.footer-block-wrapper {
position: relative;
}
.end-of-body-block {
width: 50%;
margin: 0 auto 0;
padding: 30px;
border: 1px solid #a00;
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9);
box-sizing: border-box;
z-index: 10;
}
.end-of-body-block:before {
content: '';
z-index: -1;
position: absolute;
height: 50%;
width: 100%;
top: 0;
left: 0;
right: 0;
background: #fff;
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
position: relative;
z-index: 100;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
</div>
<div class="footer">
<div class="footer-block-wrapper">
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
Links and other information that should be visible
</div>
</div>
I know it's not the answer I was looking for, but this hack does the job for me.
I am trying to implement bigtext on a dynamic container. I get this to work with fittext neatly but I like the resizing of bigtext better.
Does anyone know how to prevent the text overlap with bigtext?
This is the bit of HTML test code:
<div id="fittextContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTower" src="{{=URL('static','images/tower_.png')}}"/>
<div id="fittext" class="containerText">
Fittext. Make better decisions where location matters
</div>
</div>
<div id="bigtextContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTower" src="{{=URL('static','images/tower_.png')}}"/>
<div id="bigtext" class="containerText">
<span>BigText</span><span>Make better</span><span>decisions where location matters</span>
</div>
</div>
This is the CSS:
#fittextContainer {
position: relative;
width: 100%;
height: auto;
background-size: cover;
}
#bigtextContainer {
position: relative;
width: 100%;
height: auto;
background-size: cover;
}
.imgTower {
width: 100%;
height: auto;
}
.containerText {
position: absolute;
top: 25%;
left: 0;
right: 0;
margin: auto;
width: 80%;
height: auto;
text-align: center;
color: white;
line-height: 1em;
font-weight: 700;
opacity: 0.8;
text-shadow: 3px 3px #3f51b5;
}
And this is how it looks like:
Hi There. It's difficult to test it for myself because I don't have the measures of your image (It would be nice if you could write it down). First of all, I would recommend you to integrate the image in the div with the css line:
background-image: url();
You can also try to use some padding and don't use a solid value (like x em) or something sometimes instead of auto. Auto messes many things up in my experience.
Cheers,
Daniel.
Ok, I got this fuzzed out now. Line height needs to be set to normal and the page is game.
line-height: normal;
I previously removed the line-height property completely and assumed that normal would be the default value for line-height. But this doesn't seem to be the case. Or I might have changed the presumed default by using normalize CSS.
I also removed the height: auto instructions which are not required to make this work.
Here is the updated html:
<div class="imgContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTransparent" src="{{=URL('static','images/tower_.png')}}"/>
<div id="fittext" class="containerText">Make better decisions where location matters</div>
</div>
<div class="imgContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTransparent" src="{{=URL('static','images/tower_.png')}}"/>
<div id="bigtext" class="containerText"><span>Make better</span><span>decisions where location matters</span></div>
</div>
Here is the updated CSS:
.imgContainer {
position: relative;
width: 100%;
background-size: cover;
}
.imgTransparent {
width: 100%;
}
.containerText {
position: absolute;
top: 25%;
left: 0;
right: 0;
margin: auto;
width: 80%;
text-align: center;
color: white;
line-height: normal;
font-weight: 700;
opacity: 0.8;
text-shadow: 3px 3px #3f51b5;
}
Here is the result (fittext on top):
Background
I needed some basic text over image for my website.I have done so by first giving a transparent black box using rgb and rgba functions.Then placed text over it by declaring image as "relative" and text as "absolute".
Problem
When I resize the browser,the text runs out of image in downward direction.
It is shown in https://jsfiddle.net/Lheg26kw/
Here is html-
<div class="hero-container">
<div class="hero-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%>
<div class="hero-text">
<p>This is text<br>
<span>this is some more text for trial of this problem</span></p>
</div>
</div>
</div>
Here is CSS:
.hero-image{
position: relative;
width: 100%;
}
.hero-text p{
position: absolute;
text-align: center;
bottom: 0px;
top: 0px;
width: 100%;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.4);
padding-top: 80px;
color: white;
font-weight: bolder;
}
.hero-text span{
font-weight: normal;
}
Need
I need the text to stay on image after resizing to minimum amount i.e. if website is accessed through a mobile.
You could clone the content to another div below the hero and then hide the .hero-text
$(window).on('resize', function() {
var $mobileContent = $('.mobile-content');
var $bodyWidth = $('body').width();
if ($bodyWidth < 620) {
var $innerHero = $('.hero-text').html();
$mobileContent.html($innerHero);
} else {
$mobileContent.empty();
}
}).trigger('resize');
body {margin: 0;}
.hero-image {
position: relative;
width: 100%;
}
.hero-text p {
position: absolute;
text-align: center;
bottom: 0px;
top: 0px;
width: 100%;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.4);
padding-top: 80px;
color: white;
font-weight: bolder;
}
.hero-text span {
font-weight: normal;
}
.mobile-content {
color: #000;
font-weight: 700;
text-align: center;
}
#media(max-width: 620px) {
.hero-text {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="hero-container">
<div class="hero-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%>
<div class="hero-text">
<p>This is text
<br>
<span>this is some more text for trial of this problem</span>
</p>
</div>
</div>
</div>
<div class="mobile-content"></div>
If you don't put a minimum size on the image then eventually the text won't fit no matter what. But one thing I'd suggest is changing your padding-top: 80px; from a constant value of 80px to a percentage like padding-top: 25%;. This will help it scale better as the image changes in size.
This will work: (replace your css with these)
.hero-image{
position: relative;
width: 100%;
}
.hero-image img{
width:100%;
display:block;
}
.hero-text{
width:100%;
height:100%;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.4);
position: absolute;
top:0;
left:0;
}
.hero-text p{
position: absolute;
text-align: center;
top: 50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
width:100%;
padding: 5px 0;
margin:0;
color: white;
font-weight: bolder;
}
.hero-text span{
font-weight: normal;
}
I just recently added the JQuery accordion affect to my site and applied the heightStyle: fill so that it would fill up the entire window.
However, it's filling up what looks like an extra 1px or maybe 2px, and now it's causing the vertical scroll bar to appear. I'm thinking I have extra padding that may be causing it, or some margin somewhere, but I've tried everything and can't seem to figure out where the extra pixel or two are coming from.
Can you guys figure out where? I just want to get rid of it so that it fills the entire page, but doesn't cause the vertical scrollbar.
Live Example: http://jsfiddle.net/r2Vra/ (If you resize the result window you will need to re-run)
HTML:
<body>
<div id="palette">
<div id="accordion">
<h3>Upper Case</h3>
<div id="upperCase"></div>
<h3>Lower Case</h3>
<div id="lowerCase"></div>
<h3>Numbers</h3>
<div id="numbers"></div>
<h3>Punctuation</h3>
<div id="punctuation"></div>
</div>
</div>
<div id="canvas">
<div id="trash"></div>
</div>
</body>
CSS:
/****************************************************************************************
* GENERAL
*****************************************************************************************/
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/****************************************************************************************
* PALETTE
*****************************************************************************************/
#palette {
float: left;
width: 320px;
height: 100%;
background-color: #888;
padding: 0 5px;
background: url(../img/texture.png) repeat;
}
#palette .letter {
font-family: 'Chango', cursive;
display: inline-block;
font-size: 4em;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
cursor: move;
}
/****************************************************************************************
* CANVAS
*****************************************************************************************/
#canvas {
margin-left: 320px;
height: 100%;
z-index: 0;
background: url(../img/refrigerator.jpg) no-repeat center center fixed;
background-position: left 200px center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#canvas .newLetter {
font-family: 'Chango', cursive;
display: inline-block;
font-size: 4.4em;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
cursor: move;
}
#trash {
position:fixed;
right:0;
bottom:10px;
z-index: 100;
}
#trash a{
display: block;
background: url(../img/trashcan-sprite-tiny2.png) no-repeat;
height: 110px;
width: 125px;
}
#trash a:hover{
background-position: 0px -113px;
}
#trash img {
border: none;
}
/****************************************************************************************
* JQUERY UI CSS OVERRIDE
*****************************************************************************************/
#accordion .ui-accordion-content {
padding: 0 .5em;
}
/*
.ui-helper-reset {
line-height: 1.2;
}
.ui-widget {
font-size: 1em;
} */
JavaScript:
$(function() {
$( "#accordion" ).accordion({ heightStyle: "fill" });
});
You can fix this by adding this:
#accordion .ui-accordion-content {
margin-bottom: -2px;
}
It's not perfect solution but it works.
I figured out a solution that works for me.
I just added an extra div and made it's boundaries a bit smaller than the parent div.
NOTE: It's unfortunate that I had to add an extra div, so if anyone still knows an alternative then let me know.
HTML:
<div id="palette">
<div id="container">
<div id="accordion">
<h3>Upper Case</h3>
<div id="upperCase"></div>
<h3>Lower Case</h3>
<div id="lowerCase"></div>
<h3>Numbers</h3>
<div id="numbers"></div>
<h3>Punctuation</h3>
<div id="punctuation"></div>
</div>
</div>
</div>
CSS:
#container {
height: 99.5%;
}
Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.
Here is the website if you want to visually see the issue:
http://codepen.io/willc86/pen/hpFLe
I am not sure why links don't want to move when I use margin-left or margin-top
css is
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
and my html is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
Facebook
Google
Yahoo
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>
Add this to #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
Also check the demo.
Note that this might give trouble if you want to lines of menu.
General tip : always add line-height equal to div's height to align your link in vertical middle position
line-height:80px; in #header a would do the job for you! :)
If you want to align the links vertically:
#header a {
...
line-height: 80px;
}
#header a {
border: 3px solid #008000;
display: inline-block;
margin: 0 40px;
position: relative;
top: 50%;
}
Note: the top: 50% somehow uses height and margin of parent.
You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).
HTML:
<div id="links"> Facebook
Google
Yahoo
</div>
CSS:
#header a {
border: 3px solid green;
margin-left: 40px;
margin-right: 40px;
}
#links {
display: inline-block;
position: relative;
top: 36%;
}
http://codepen.io/anon/pen/vbJkg