I am currently trying to make an animation with a welcome message. I want it to be placed in the verticalmiddle of my div. I transform it from a big font to a small font and it seems like the big fonts height is still affecting the positioning or am I wrong?
#barbar{
height:10%;
width: 100%;
background-color:rgba(79, 79, 90, 0.92);
bottom: 0;
position: fixed;
z-index: 3;
}
.hello{
color: black;
font-family: "Times New Roman";
text-align: center;
animation: ease;
animation-name: gas;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration:2s;
position: fixed;
font-size: 100px;
bottom: 700px;
margin-left: -20%;
white-space: nowrap;
}
#keyframes gas{
from { font-size: 500px; bottom: 700px; margin-left: -20%;}
to { font-size: 12px; bottom: 0; margin-left: 15%;}
}
<div id = "barbar">
<h3 class ='hello'> Welocme User </h3>
</div>
As you can see my h3 is inside the div but it still somehow doesn't end up where I want it to be placed. to bottom:-x% is not the soulution im looking for.
Add "margin-bottom: 0;" to your h3 tag.
By default, the browser adds a margin of 1em to h3 elements. Since the "em" unit is relative to font-size, when you add "font-size: 100px" to your element you also get 100px of margin.
I suggest using a CSS reset. It will clear all the browser's defaults, preventing it to add unwanted styles on your page. It also makes sure that your page will look exactly the same in all browsers since different browsers use different defaults. I suggest using meyerweb reset on all your pages.
Related
I have an image of a soundman holding a boom that slides in from the left on my index page. In order to have the text underneath the boom, I have the text and the image on different axes. There is something problematic when it comes to different screen sizes because the text moves up and down quite a bit depending on the screen size which can create an overlap with the image of the boom. I was in the process of creating multiple breakpoints (oh my god there are so many) when I thought maybe there would be a better way to have the text and the image all adjust in relation to each other.
codepen: https://codepen.io/arpunk/pen/vYLbvOG
site: www.productionsound.net
Is there a better way to code the image/text?
Pasted the appropriate code below but the full code/html is on codepen
Thank you!
.mainwrapper {
position: absolute;
overflow: hidden;
z-index: -1;
width: 100%;
height: 100%;
}
.mainlogo {
position: absolute;
left: -100%;
max-width: 90%;
height: auto;
-webkit-animation: slide 0.5s forwards;
-webkit-animation-delay: 2s;
animation: slide 0.5s forwards;
animation-delay: .5s;
padding-left: 20px;
}
.mainlogoname {
font-family: 'Montserrat', sans-serif;
font-size: 140%;
width: 58%;
height: auto;
line-height: 25px;
position: absolute;
top: 350px;
left: 37%;
z-index: -1;
padding-bottom: 60px;
}
If you use the vw unit, you can set the top position based on the width of the browser viewport. Then you can have the text move up and down as the image shrinks and grows, and you only need one media query to make it stay put when the image reaches its full size.
Updated Codepen
.mainlogoname {
top: calc(100px + 20vw);
left: 38%;
}
#media (min-width: 1100px) {
.mainlogoname {
top: 330px;
}
}
See CSS-Tricks: Fun with Viewport Units for more info on the vw unit.
I'm working on a home page for a film company's website, and it has a CSS button with a hover effect that is going to open a lightbox once it's ready, at the moment I just have it set to href="#" as a placeholder until I'm ready to implement the lightbox. There is also a small image of a downward pointing arrow, with the link set to an anchor that isn't on the page yet. Both of these work in Firefox, but in Chrome the hover effect doesn't work on the button, and it behaves as if neither of these elements have anchor tags around them. I poked around with Chrome's dev tools and it seems as though the span around the button may be the culprit as Chrome seems to be resizing it, but I can't figure out any reason why the image link isn't working, and I'm not entirely sure why Chrome is disagreeing with the span.
The strange part is that there are three other CSS buttons with hover effects in a seperate div, and they all work just fine.
The website is currently uploaded at http://www.gruntwork.us/reelindi/test/
The style sheet can be found at http://www.gruntwork.us/reelindi/test/reelindi.css
CSS:
div.header {
position:absolute;
top: 0;
left: 0;
right: 0;
background-image:url("resources/images/bg.jpg");
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height:430px;
width:100%;
z-index: -1;
}
img.arrow {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 58px;
z-index: 999;
}
span.redBtn a {
text-align:center;
display:block;
margin: 0 auto;
width: 150px;
margin-top: -40px;
z-index: 999;
}
a.redBtn {
color: #fff;
background-color: #d94d4d;
font-size: 1.125em;
padding: 8px 18px;
text-decoration: none;
text-align: center;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
border-radius: 5px;
}
a.redBtn:hover {
background-color: #bf3030;
}
HTML:
<div class="header">
<h1 class="header">Reel Indi</h1>
<h2 class="header">"Storytelling in motion."</h2><br>
<span class="redBtn">Push the red button!</span>
<img class="arrow" src="resources/images/arrow.png">
</div>
I've searched around but can't find an answer for this. Help?
Seems like your header's z-index: -1 rule pushes everything "behind" the body content, causing you not to be able to receive mouse events on that layer. Changing it to zero or higher will let you have hover effects and other events just fine.
I have an image gallery sliding images in an out only with css.
See http://codepen.io/anon/pen/xmhzE?editors=110 for the example or the attached code.
It works fine as long as the #images-div does not have overflow: hidden set. When overflow is set to hidden, the absolute positioning of the single images does not work anymore. When I use negative values for the left-property of the images it also works with overflow hidden.
Does overflow:hidden change the way how absolute children are layouted?
Does anyone has a solution to this problem?
Sources
index.html:
<div id="images">
<img id="image1" src="http://i.imgur.com/dL3io.jpg" />
<img id="image2" src="http://i.imgur.com/qASVX.jpg" />
<img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
1
2
3
4
</div>
base.css:
body {
text-align: center;
}
#images {
width: 400px;
height: 250px;
/*overflow: hidden; if this is set absolute positioning of images breaks*/
position: relative;
background-color: red;
margin: 20px auto;
}
#images img {
width: 400px;
height: 250px;
display: block;
position: absolute;
top: 0px;
left: 400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images img:target {
top: 0px;
left: 0px;
z-index: 9;
opacity: 1;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}
This puzzle kept me going. I just couldn't leave it be.
So last evening I was fiddling with it, but couldn't fix it (untill just yet :) ).
Testcase 1
While simplifying things I removed the opacity from the image-elements and left only 1 image and one link. I've set the image to 390px initially so that I can make sure that it is at that position (you can see just a little bit of the left of it).
http://codepen.io/anon/pen/tpCrc
Conclusion:
So what's important to notice is that fact that the image initially is there where it should be.
Then when clicking button 1 you can see it simply skips the transition.
So the browser doesn't change the position of the element, because of overflow:hidden (like the title of this post suggests). It goes to the position mentioned in the CSS (in the :target part), but without the transition.
Testcase 2
Then I got wondering why the browser would act that way and I kept thinking that maybe the focussing of the image element had something to do with it.
If you think about it: when clicking one of the buttons you add #target to the URL of the page and browser then tries to "scroll" to that element. To that, that element has to be visisble.
So I wondered: maybe the CSS has nothing to do with it. Let's try:
so I completely removed the :target-part and the transitions.
http://codepen.io/anon/pen/IvfBE
Conclusion:
Wow! What do we see there? When clicking one of the buttons the image still jumps to left:0 !!
I think we got a lead there.
Still though, I didn't know how to actually fix that. Still seems like a browser-bug to me.
The fix
Then - after a good night of sleep - I woke up with a fresh new idea.
What if we don't actually target the element we want to transition?
So I added a container to each image-element and target that instead.
<div id="images">
<div id="img1container"><img id="image1" src="http://i.imgur.com/dL3io.jpg" /></div>
<div id="img2container"><img id="image2" src="http://i.imgur.com/qASVX.jpg" /></div>
<div id="img3container"><img id="image3" src="http://i.imgur.com/fLuHO.jpg" /></div>
<div id="img4container"><img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" /></div>
</div>
<div id="slider">
1
2
3
4
</div>
In the CSS the position of the image now has to be changed by "[parentElement]:target img" instead.
body {
text-align: center;
}
#images {
width: 400px;
height: 250px;
overflow: hidden; /* this did break it in the past ;) */
position: relative;
background-color: red;
margin: 20px auto;
}
#images img {
width: 400px;
height: 250px;
display: block;
position: absolute;
top: 0px;
left: 400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images div:target img {
top: 0px;
left: 0px;
z-index: 9;
opacity: 1;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}
And the working example:
http://codepen.io/anon/pen/lyzhi
Conclusion:
Yay!! Indeed, by not putting focus on the element you want to transition, it doesn't break.
So, you've got your fix there, but it still seems like a browser/engine-bug to me.
So I'd suggest you create a bugreport somewhere (if you've got time).
BTW: I've tested this in Chrome and IE - both the latest versions only. You might want to test this in Firefox and maybe some other browsers.
I'm designing a web site
http://zinzinzibidi.com/TurkAntivirusResponsive/Anasayfa
It has a white space problem at right side.
http://www.responsinator.com/?url=http%3A%2F%2Fzinzinzibidi.com%2FTurkAntivirusResponsive%2FAnasayfa
You can see there is an extra "scroll X" area at 320px width;
My CSS file: http://zinzinzibidi.com/Areas/TurkAntivirusResponsive/Content/css/style.css
I can't see any wrong code at my CSS.
How can I fix it?
I was check you site, extra "scroll x" area is in all format
try to avoid width and fixed width
use width=100% instead
Ok, you put
html {
font-family: sans-serif;
overflow-x: hidden;
}
its hide scroll but not solve your problem
1st you menu
.nav-mobile {
margin: auto;
position: relative;
width: 320px; <-- delete or put 100%
}
next line
.nav-mobile-button {
border-bottom: 1px dotted #777777;
cursor: pointer;
font-weight: bold;
height: 60px;
line-height: 60px;
margin: auto;
position: relative;
text-align: center;
transition: all 0.2s ease-in-out 0s;
width: 320px; <-- delete or put 100%
}
That's just some of your lines to manage experiment whit your css
you have some padding that force some div sections out of screen
Say I have the following in my CSS:
h1 {
font-family: Verdana;
font-size: 20pt;
color: Black;
z-index: 2;
opacity: 1.0;
}
#topFrame {
position: fixed;
top: 0;
left: 20%;
right: 20%;
height: 120px;
overflow: hidden;
border: 1px solid black;
background-image: url(dunno.jpg);
text-align: center;
vertical-align: center;
opacity: 0.5;
z-index: 1;
}
When I place the div with id "topFrame" in the HTML and then try to write a header using h1 tags, the header is as opaque as the image (so rather than being "stand-out" black it shows up as a dull grey.
Is there any way I can make it so that the h1 stands out in terms of opacity whilst still keeping the image semi-opaque, without creating an invisible div to house the header (if that makes sense)?
There is no real solution for this.
If you have a parent element having an opacity of 0.5, the child will have the same opacity.
One way to prevent this is to position your h1 tag on top of your #topFrame, and you will have to make sure the h1 is not a child of #topFrame
h1{ font-family: Verdana; font-size: 20pt; color: Black; z-index: 2; opacity: 1.0; position: fixed; left: 20%; right: 20% }
Something similair to that.
CSS Opacity is inherited to children. You could use a transparent PNG for the background of topFrame, you could mimic a parent-child relationship as shown in this: http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children article or else you'll be out of luck, I think.