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):
Related
Maybe you can help me. Specifically, I want that the text is always in the same container position depending on the screen resolution. Are there any solutions for this? Do I need a JS function for this? I don't know what to search in order to fix this…
<style>
.logoBar {
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
br {
line-height: 10%;
}
.container{
border: 1px solid;
width: 90%;
height:90%;
min-width: 960px;
display:block;
margin-left: auto;
margin-right: auto;
top: 50%;
}
img {
max-width: 100%;
max-height: 100%;
}
#text {
z-index: 100;
position: absolute;
top: 29.5%;
left: 11%;
font-size: 115%;
font-family: Arial, Helvetica, sans-serif;
}
.divider{
width: 2%;
height: auto;
display: inline-block;
}
</style>
<body>
<script>
$(document).ready(function() {
//Call a variable to know the width of the window
var screenWidth = $(window).width();
$('container').css('width', screenWidth + 'px');
});
</script>
<div class="logoBar">
<img src="picture1.png" style="height: 15%; width: 15%">
<div class="divider"></div>
<img src="Log-05.png" style="height: 15%; width: 15%">
</div>
<br></br>
<div class="container">
<center><img src="Picture.png"></center>
<p id="text">20.5</p>
</div>
</body>
I would be very grateful for any kind of help.
Probably the solution is quite simple.
You are on the right track using %s to position the text box(es).
We do absolutely everything that we can in terms of % of width and height of the image. That way responsiveness is automatic.
There is no need to use Javascript. Measure the width and height of the image, the distance down and to the left of the 3 text boxes and the width and height of a text box and put the measurements into CSS variables. CSS can then calculate the correct % top, bottom, width and height as needed. It doesn't matter what units you use to do this measurement, as long as the same unit is used for all of them.
This snippet has measurements to give the idea. You may want to re-measure everything to get better accuracy.
The one outstanding thing that requires thought is the font size. This needs to be responsive rather than be defined in px etc. It is set to 1vw.
The minimum width requirement of the img has been removed so that the image can be seen in its entirety on smaller devices (the user can always zoom if they want). If the minimum is reinstated then there will have to be further thought on the font size to stop it decreasing not in relation to the img size.
<head>
<style>
* {
margin: 0;
padding: 0;
}
.logoBar {
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
br {
line-height: 10%;
}
.container{
border: 1px solid;
width: 90%;
height: auto;
/*min-width: 960px;*/
display:block;
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
--w: 1354;
--h: 665;
--x: 106;
--boxw: 113;
--boxh: 20;
--yvib: 230;
--ytemp: 294;
--yspeed: 354;
}
img {
width: 100%;
height: auto;
}
#vib {
--y: var(--yvib);
}
#temp {
--y: var(--ytemp);
}
#speed {
--y: var(--yspeed);
}
.text {
z-index: 100;
position: absolute;
text-align: center;
padding: 2px;
font-size: 1vw;
width: calc((var(--boxw) / var(--w)) * 100%);
height: calc((var(--boxh) / var(--h)) * 100%);
font-family: Arial, Helvetica, sans-serif;
top: calc((var(--y) / var(--h)) * 100%);
left: calc((var(--x) / var(--w)) * 100%);
color: red;
}
.divider{
width: 2%;
height: auto;
display: inline-block;
}
</style>
</head>
<body>
<!-- The top bit commented out as the question is about the main image not this bit
<div class="logoBar">
<img src="picture1.png" style="height: 15%; width: 15%">
<div class="divider"></div>
<img src="Log-05.png" style="height: 15%; width: 15%">
</div>
<br></br>
-->
<div class="container" onclick="console.log(event);">
<img src="https://i.stack.imgur.com/I9R3S.png">
<div id="vib" class="text">20.5</div>
<div id="temp" class="text">100</div>
<div id="speed" class="text">50</div>
</div>
</body>
The issue is with the h5 text not appearing within the div (id=text). if anyone could advise please! Thank you for reading this and taking your time to help!
<div id="footer">
<div id="instagram">
<div id="text">
<h5>Please follow our instagram for future updates !</h5>
</div>
<div id="insta-logo">
<div>
<a class="whitelink" href="https://www.instagram.com/craftyclams/" id="insta"></a>
</div>
</div>
</div>
</div>
CSS code for footer:
Where the div is positioned:
From what I see, your text is inside the div. I set up a jsfiddle for you: https://jsfiddle.net/vfakqg90/
Next time, please provide your CSS, not as a screenshot. I typed your CSS out fully.
If you can, provide your full HTML and CSS so I can take a further look. For now, I don't see a problem according to the jsfiddle I put together for you. The CSS you provided as a screenshot is below for others:
div#footer {
width: 100%;
height: 7%;
background: url("footerbg.jpg");
background-size: 100% 100%;
min-width: 1380px;
background-repeat: no-repeat;
}
div#instagram {
width: 80%;
height: 100%;
margin: 0 auto;
display: table;
table-layout: fixed;
}
div#instagram div#text {
width: 70%;
height: 100%;
padding-top: 15px;
display: table-cell;
}
div#instagram div#text h5 {
font-family: BRUX, serif;
color: #fff;
text-align: center;
font-size: 1.7em;
}
h5 a {
font-family: BRUX, serif;
color: #fff;
border-bottom: 3px solid #fff;
padding-bottom: 3px;
}
div#instagram div#insta-logo div {
width: 100%;
height: 100%;
padding-top: 30px;
}
#insta {
background: url("logo/insta_icon.png");
background-size: 100% 100%;
background-repeat: no-repeat;
display: block;
height: 90%;
text-indent: 100%;
white-space: nowrap;
width: 70%;
max-width: 250px;
max-height: 250px;
}
I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>
On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}
change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.
try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),
I would like to make certain elements of my page have more fluid transitions as they size down. If you look here:
http://abezieleniec.com/SIDWeb/
You can see that when you size down to tablet and phone size the first blue bar snaps to different positions to meet with the main logo. This was obviously done with media queries but I'm wondering if there is a way to make it more fluid with percentages? I'm assuming this would require some JS...
Any ideas are welcome!
Thanks
It's not too hard a process as it happens! It's something I had to use for the website here: http://flourishworld.co.uk/
The key is to use :before with "margin-top: xx%":
.element:before {
margin-top: 50%;
position: relative;
content: "";
display: block;
}
From looking at your site...it may be easier to just present some altered code. First I changed your markup (this may not work for you)
<div id="home" class="jumbotrontop animated fadeIn">
<div class="biglogo" style="opacity: 1;">
<img src="images/biglogofull.png">
</div>
</div>
Using the code idea above:
#home:before {
margin-top: 55%;
position: relative;
content: "";
display: block;
}
But for this to work you need some amended CSS code for other elements...
.jumbotrontop {
font-size: 21px;
height: 100%;
line-height: 2.1428571435;
color: inherit;
width: 100%;
background-size: cover;
z-index: 1;
}
.biglogo {
width: 80%;
display: block;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
margin-bottom: 130px;
opacity: 1;
position: absolute;
z-index: 100;
top: 0;
position: relative;
display: table;
}
.jumbotrontop img {
width: 100%;
height: auto;
margin: auto;
max-width: 740px;
display: block;
}
#home:after {
background-color: #eeeeee;
background-image: url(../images/background1.jpg);
display: block;
position: fixed;
top: 0;
left: 0;
content: "";
bottom: 0;
right: 0;
z-index: 1;
background-size: cover;
}
What this does is it takes your top element and takes it's height away, it's contents are positioned absolutely so it doesn't take up space. The :before element then adds a responsive height that will shrink as the width of the page shrinks. In doing so we had to change the logo markup around so that it stayed in a central location and continued to shrink as the window did.
Hope this helps! No JS, all CSS.
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/