Goal: A clean minimal site which shows a cool video from vimeo, centered on the screen along with a logo and some text.
The site has a background, with a container on top which is centered and which contains all the content.
Problem:
When moving the mouse over the player the whole container disappears:
Link: http://yurapamba.com/
I tried different things with containers and turning parts of the css on and off but nothing seems to do the trick.
Code HTML:
<div id="container" class="border">
<div id="content" class="border">
<div class="logo border2"></div>
<div class="text border2">
<div class="wide_space">
</div>
<iframe src="//player.vimeo.com/video/100941286?autoplay=0&color=cf9999&title=0&byline=0&portrait=0" width="740" height="416" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="narrow_space">
<center>E-MAIL // PHOTOGALLERY (COMING SOON)
</div>
</div>
</div>
Code CSS
#container {
margin: 0 auto;
padding: 0 20px 0 20px;
height: auto;
width: 870px;
overflow: hidden;
opacity: 0.9;
}
#content {
position:absolute;
top:50%;
left: 50%;
height:auto;
width: 760px;
margin:-400px 0 0 -400px;
padding: 35px 20px 50px 20px;
background-color: white;
-moz-box-shadow: 0px 10px 50px 1px #353535;
-webkit-box-shadow: 0px 10px 50px 1px #353535;
box-shadow: 0px 10px 50px 1px #353535;
}
remove the overflow:hidden. I've tidied up your footer too.
body {
height: 100%;
}
#container {
width: 870px;
height: auto;
opacity: 0.9;
}
#content {
position: center;
top: 50%;
left: 50%;
height: auto;
width: 760px;
margin: 0 auto;
background-color: white;
-moz-box-shadow: 0px 10px 50px 1px #353535;
-webkit-box-shadow: 0px 10px 50px 1px #353535;
box-shadow: 0px 10px 50px 1px #353535;
}
footer {
position: relative;
height: 20px;
}
<body>
<div id="container">
<div id="content">
<iframe src="//player.vimeo.com/video/100941286?autoplay=0&color=cf9999&title=0&byline=0&portrait=0" width="740" height="416" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<footer>
E-MAIL // PHOTOGALLERY (COMING SOON)
</footer>
</div>
</div>
</body>
Your CSS is a bit strange..
You can remove the absolute positioning on the iframe #content wrapper and remove the strange margins and replace with auto..
#content {
height:auto;
width: 760px;
margin:auto;
padding: 35px 20px 50px 20px;
background-color: white;
-moz-box-shadow: 0px 10px 50px 1px #353535;
-webkit-box-shadow: 0px 10px 50px 1px #353535;
box-shadow: 0px 10px 50px 1px #353535;
}
this will get you some better results anyway
Related
I want to align the Google Maps box and the text bow in the same line, but I can't.
I've already tried with position: relative and changed the top and left sizes, but despite they were aligned, a huge blank space took place on the bottom.
.ind-mapa {
position: relative;
overflow: hidden;
padding-top: 56.25%;
z-index: 1;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1;
}
.ind-media {
float: left;
border: 0.5px #f6e8d5 solid;
overflow: auto;
margin-left: 50vw;
border-radius: 10px;
box-shadow: 3px 3px 5px 3px #cccccc;
z-index: 1;
}
<div class="ind-contato">
<div class="ind-mapa" style="display: inline-block;">
<iframe class="resp-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6150.579385265073!2d-46.595158112257735!3d-23.56282631464785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5eb2bb2e0fd7%3A0x598f639056140b1f!2sR.+do+Orat%C3%B3rio%2C+1036+-+Mooca%2C+S%C3%A3o+Paulo+-+SP%2C+03118-030!5e0!3m2!1spt-BR!2sbr!4v1548656882243"
frameborder="0" style="border-radius: 10px; border: 0.5px #f6e8d5 solid; box-shadow: 3px 3px 5px 3px #cccccc;" align="left" allowfullscreen></iframe>
<div class="ind-media" style="display: inline-block;">
</div>
</div>
Flex layout does the trick:
.ind-mapa {
position: relative;
display: flex;
}
.ind-mapa>* {
flex: 0 1 auto;
border-radius: 10px;
box-shadow: 3px 3px 5px 3px #ccc;
z-index: 1;
}
.resp-iframe {
flex: 0 0 auto;
margin-right: 20px;
}
<div class="ind-mapa">
<iframe class="resp-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6150.579385265073!2d-46.595158112257735!3d-23.56282631464785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5eb2bb2e0fd7%3A0x598f639056140b1f!2sR.+do+Orat%C3%B3rio%2C+1036+-+Mooca%2C+S%C3%A3o+Paulo+-+SP%2C+03118-030!5e0!3m2!1spt-BR!2sbr!4v1548656882243"
frameborder="0" allowfullscreen></iframe>
<div class="ind-media">
I want to align the Google Maps box and the text bow in the same line, but I can't. I've already tried with position: relative and changed the top and left sizes, but despite they were aligned, a huge blank space took place on the bottom.
</div>
</div>
CSS Flexbox will do the job, see: https://www.w3schools.com/css/css3_flexbox.asp and https://css-tricks.com/snippets/css/a-guide-to-flexbox/
See snippet with a minimal working sample.
Also you did not close the div's properly.
I've already tried with position: relative and changed the top and
left sizes, but despite they were aligned, a huge blank space took
place on the bottom.
On your code, the MAP is not getting the full height because you positioned the iframe as position: absolute; and did not set the height, so if you set .resp-iframe with height: 100%; the iframe will be at the same height as it's parent.
Viva Mooca bella!
.ind-contato {
display: flex;
}
.ind-contato > div,
.ind-contato > iframe {
flex: 0 0 50%;
box-shadow: 3px 3px 5px 3px #ccc;
border-radius: 10px;
box-shadow: 3px 3px 5px 3px #ccc;
}
<div class="ind-contato">
<iframe class="resp-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6150.579385265073!2d-46.595158112257735!3d-23.56282631464785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5eb2bb2e0fd7%3A0x598f639056140b1f!2sR.+do+Orat%C3%B3rio%2C+1036+-+Mooca%2C+S%C3%A3o+Paulo+-+SP%2C+03118-030!5e0!3m2!1spt-BR!2sbr!4v1548656882243"
frameborder="0" allowfullscreen></iframe>
<div class="ind-media">
Box on the side.
</div>
</div>
I'm trying to create a div that stays under the bottom of the page and is invisible there. I mean, you can't scroll to it. I tried to google it, but I just can't make it, neither negative bottom-margin, nor negative bottom, nor relative/absolute positioning couldn't make it...
Could anyone of you help me, please?
Here's a snippet of my site - I wanna "Menu" image to be invisible on the bottom (outside the display area), so it can then slide up when needed.
body {
overflow-x: hidden;
margin: 0;
padding: 0;
}
.main-container {
width: 100vw;
height: 100vh;
background-color: #780d0d;
position: absolute;
}
.mainmenu {
width: 70vw;
height: 82vh;
position: relative;
top: 8vh;
left: 15vw;
-webkit-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
}
.menu-bottom {
height: 20%;
width: 33.2%;
background-color: red;
border: 1px solid;
display: inline-block;
margin: 0 -5px 0 0;
}
.menu-side-holder {
height: 80%;
width: 30%;
display: inline-block;
}
.menu-side {
height: 50%;
background-color: red;
border: 1px solid;
display: block;
margin: 0;
vertical-align: top;
}
#menu-img {
height: 80%;
width: 40%;
display: inline-block;
margin: 0 -4px;
vertical-align: top;
clear: none;
}
.menu-bottom-slider {
display: inline-block;
width: 100%;
background-color: green;
}
#slider {
position: absolute;
padding-left: 43.5%;
bottom: 0;
margin-bottom: -30vh;
}
<div class="main-container">
<div class="mainmenu">
<div class="menu-side-holder">
<div class="menu-side" id="ogloszenia">
1
</div>
<div class="menu-side">
3
</div>
</div>
<img id="menu-img" src="img/main4.jpg">
<div class="menu-side-holder">
<div class="menu-side">
3
</div>
<div class="menu-side">
4
</div>
</div>
<div class="menu-bottom">
5
</div>
<div class="menu-bottom">
6
</div>
<div class="menu-bottom">
7
</div>
<div class="menu-bottom-slider">
<img id="slider" src="http://s32.postimg.org/xrrmzmohx/slider.png">
</div>
</div>
</div>
place your target div as direct child of body (not nested inside other divs) and use this style:
position:absolute;
bottom:-100% // or fixed size if height is known
One way you might be able to do this is by making it absolute and give it a negative bottom equal to the height of the element like so
.menu-bottom-slider{
position: absolute;
bottom: -(height of element goes here)px
}
Why don't you put
opacity: 0
on the element and position it where you need it ON the page. Then when you want to use it, use jQuery to change the opacity and animate it.
This would be the css of your div section.
#divname {
position:fixed;
height:50px;
background-color:red;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
Your body would look like this.
**body{
margin-bottom:50px;
}**
Your code is nearly working, but you are using overflow-x, and you need overflow-y.
EDIT:
Another way is to set the position of the slider to fixed. This means that the position does not depend on the scroll position, so you can't scroll to it:
body {
overflow-x: hidden; /* you could also change this to overflow-y */
margin: 0;
padding: 0;
}
.main-container {
width: 100vw;
height: 100vh;
background-color: #780d0d;
position: absolute;
}
.mainmenu {
width: 70vw;
height: 82vh;
position: relative;
top: 8vh;
left: 15vw;
-webkit-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
}
.menu-bottom {
height: 20%;
width: 33.2%;
background-color: red;
border: 1px solid;
display: inline-block;
margin: 0 -5px 0 0;
}
.menu-side-holder {
height: 80%;
width: 30%;
display: inline-block;
}
.menu-side {
height: 50%;
background-color: red;
border: 1px solid;
display: block;
margin: 0;
vertical-align: top;
}
#menu-img {
height: 80%;
width: 40%;
display: inline-block;
margin: 0 -4px;
vertical-align: top;
clear: none;
}
.menu-bottom-slider {
display: inline-block;
width: 100%;
background-color: green;
}
#slider {
position: fixed; /* This fixes the slider, you can't scroll to it! */
padding-left: 43.5%;
bottom: 0;
margin-bottom: -30vh;
}
<div class="main-container">
<div class="mainmenu">
<div class="menu-side-holder">
<div class="menu-side" id="ogloszenia">
1
</div>
<div class="menu-side">
3
</div>
</div>
<img id="menu-img" src="img/main4.jpg">
<div class="menu-side-holder">
<div class="menu-side">
3
</div>
<div class="menu-side">
4
</div>
</div>
<div class="menu-bottom">
5
</div>
<div class="menu-bottom">
6
</div>
<div class="menu-bottom">
7
</div>
<div class="menu-bottom-slider">
<img id="slider" src="http://s32.postimg.org/xrrmzmohx/slider.png">
</div>
</div>
</div>
I made a fixed header div to my site and added a shadow under it but it doesn't fit my browser (100% width) ??
here is my css:
body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
#head{
width: 100%;
height: 60px;
background-color: #5B86E1;
box-shadow: 0 10px 17px -5px #000000;
position: fixed;
}
#content{
width: 900px;
padding-top: 60px;
min-height: 100px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="head">
</div>
<div id="content">
</div>
</body>
</html>
Here is a screen capture:
You have a negative spread radius; for it to be full width you want this:
box-shadow: 0 10px 17px 0px #000000;
Demo:
body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
#head{
width: 100%;
height: 60px;
background-color: #5B86E1;
box-shadow: 0 10px 17px 0px #000000;
position: fixed;
margin-right: auto;
margin-left: auto;
}
#content{
width: 900px;
padding-top: 60px;
min-height: 100px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="head">
</div>
<div id="content">
</div>
</body>
</html>
The most waterproof solution: make your element longer (either with the width or padding property) than the viewport, and set negative margins (note: the margins are only really required to make this work with non-fixed elements). Your new #head css:
#head {
width: 110%;
margin: 0px -5%;
height: 60px;
top: 0;
background-color: #5B86E1;
box-shadow: 0 10px 17px 0px #000000;
position: fixed;
}
As other answers have mentioned: it is advised to set the border-radius spread property to a non-negative value. Or you could use separate box-shadows for each side.
Give the fixed element a position using left top ``right```
header{
position:absolute;
left:0px;
top:0px;
right:0px;
height:60px;
background-color:#00f;
box-shadow:0px 0px 17px #000;
}
Added a fiddle: https://jsfiddle.net/hpdymvqg/
The issue is beause you have a negative value for your box-shadow. Changing it to the following fixes the issue:
box-shadow: 0 10px 17px 0px #000000;
Tested here
I'm having an issue with div overlapping, I believe it's to do with different screen resolutions.
This is my CSS:
#menu {
background: #fff;
width: 790px;
}
#site {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 1075px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 15px 0px #000;
padding: 2px;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#social {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 100px;
box-shadow: 0px 0px 5px 2px #000;
padding: 5px;
float:left;
position:fixed;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#categories {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 100px;
box-shadow: 0px 0px 5px 2px #000;
padding: 5px;
float:left;
position:fixed;
top: 250px;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#categories img {
border-radius: 15px 15px 15px 15px;
}
And this is my HTML:
<div align="center">
<div id="social">
<h3 style="font-size:18px">Follow Us!</h3>
<a href="#">
<img src="logo.png" />
</a>
<a href="#">
<img src="logo2.png">
</a>
</div>
<div id="categories">
<h3 style="font-size:18px">Categories!</h3>
<a href="categories.php">
<img src="gamereviewresized.png">
</a>
</div>
When I visit my site, it looks like this: http://prntscr.com/6v5qaj
It looks like this for someone with a different screen resolution though: http://prntscr.com/6v5qp3
Help would be appreciated on how to prevent overlapping on different resolutions.
Thanks!
Your #site div has a 1075px fixed width and auto left and right margins.
#site {
width: 1075px;
margin-left: auto;
margin-right: auto;
}
Meanwhile, the Game Reviews tab has a fixed-width of 100px.
Consequently, any screen width less than 1275px (where the margin between the left-edge of the screen and the left-edge of #site is narrower than 100px) will lead to the Game Reviews tab overlapping #site.
Suggestions:
1) Give #site a left-hand margin wider than the 100px wide Game Reviews tab (and right-hand margin to match)
2) For #site, change the width: 1075px; declaration to max-width: 1075px; (this will enable the width of #site to shrink when the screen is narrower than 1275px).
Example:
#site {
max-width: 1075px;
margin-left: 120px;
margin-right: 120px;
}
You'll have to use media queries to adjust the height the image , in your case i am guessing the image is :
<img src="gamereviewresized.png">
here is a simple example how you can adjust the height of a img using a media query :
<img src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="">
CSS ::
img{
max-width:400px;
height: auto;
}
#media only screen and (max-width : 480px) {
img{
max-width:200px;
height: auto;
}
}
fiddle here. , reduce the width of the display section to below 480px to see what i mean .
you can study more media queries here.
How do I give margin to an box respective to a floated box? Here's my source code:
<!DOCTYPE html>
<html>
<head>
<title>Boxes</title>
<link rel="stylesheet" type="text/css" href="intro.css">
</head>
<body>
<div id="page">
<div id="header">
<h3 class="welcome">Welcome</h3>
<h5 class="welcome">to</h5>
<h1 class="welcome" style="color:green;font-family:cursive">Tamim's</h1>
<h5 class="welcome">page</h5>
</div>
</div>
<div class="navigation">
<ul>
<li>home</li>
<li>photos</li>
<li>important-links</li>
<li>facebook</li>
</ul>
</div>
<div id="left">
<img src="408528_10200574301423959_1609852992_n.jpg">
</div>
<div id="right"></div>
<div id="test"></div>
</div>
</body>
</html>
and
#page{
min-width:360px;
margin: 10px auto 10px auto;
background-color: rgb(32,127,224);
padding: 20px;
border: 2px solid black;
box-shadow: inset 0px 0px 10px #777777;
border-radius: 5px;
}
#header{
width: 360px;
margin: 0px auto 0px auto;
text-align: center;
}
.welcome{
margin: auto;
text-align: center;
display: inline;
}
#left{
width: auto;
margin-top: 10px;
float: left;
border: 2px inset red;
padding: 10px;
border-radius: 5px;
background-color: rgb(157,160,146);
height: 425px;
}
#right{
float: right;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
border: 2px solid green;
border-radius: 5px;
height: 425px;
width: 67%;
background-color: rgb(121,241,240);
}
.navigation{
padding: 1px 3px 3px 3px;
margin: 20px auto 20px auto;
width: 500px;
height: 40px;
background-color: red;
border-radius: 5px;
text-align: center;
}
.navigation li{
margin: 3px 6px 3px 6px;
display: inline;
border: 2px solid black;
padding: 2px;
zoom:1;
width:auto;
}
#test{
margin: 5px 5px 5px 5px;
height: 100px;
background-color: black;
clear: both;
border-radius: 5px;
}
Here's the code on Fiddle
Now when I give top a margin, it is not getting below the left or right? How do I give margin with respect to left? and also why my #lefts height is greater than right? But I have given them the same height 425px.?
Now when I give top a margin, it is not getting below the left or right?
Because you clear:both in the test - footer div. You have to set margin-bottom to the left and right see demo.
DEMO: http://jsfiddle.net/goodfriend/69QKz/14/
Why my #lefts height is greater than right?
It looks like it was caused by the padding in the left box.
DEMO with padding in left: http://jsfiddle.net/goodfriend/69QKz/6/
DEMO without padding in left: http://jsfiddle.net/goodfriend/69QKz/5/
Note: I also deleted one </div> end tag because it was closing the page div after the header..