The website I´m currently working on is this: www.ernestoblancarte.com
Its a fluid layout and it works fine in Chrome and Explorer, but when trying it in Safari the proportions crush, i cant get it to work in both browser, please help.
Here is the css:
Thanks in advance.
body{
background:#FFF;
font-family:"futuraLT";
color:#FFF;
word-spacing:-3px;
}
body, html {
width:100%;
padding:0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#Background{
position: absolute;
margin:0;
z-index:0;
}
#Barra{
}
#Logo{
z-index:1;
position:absolute;
bottom:18.9259%;
margin-left:17.12083%;
margin-right:71.166%;
border-style:none;
}
#Center{
height:85%;
}
#Banner4{
margin-top:0px;
margin-left:43.672%;
margin-right:20.8854%;
position:absolute;
}
#Banner3{
max-width: 100%;
margin-top:11.65%;
margin-left:20.8854%;
margin-right:41.5625%;
position:absolute;
}
#Banner2{
margin-top:23.2744%;
margin-left:43.672%;
margin-right:20.8854%;
position:absolute;
}
#Banner1{
margin-top:34.75%;
margin-left:20.9634%;
margin-right:46.35416%;
position:absolute;
}
#BarrTXT{
position:absolute;
z-index:3;
margin-top:47.12511%;
width:100%
}
#Menutxt{
position:absolute;
left:30.5208%;
top: 30%;
width:4%;
margin:0 auto;
}
#Menutxt2{
width:5%;
position:absolute;
left:38.125%;
top:16%;
}
#Menutxt3{
width:4%;
position:absolute;
left:46.875%;
top:30%;
}
#Menutxt4{
width:4%;
position:absolute;
left: 57.38166%;
top: 30%;
}
#Menutxt5{
width:4%;
position:absolute;
left: 68.333%;
top: 30%;
}
maybe its:
margin-top: calc( 100vw * .1165 );
But I also don't see
position: relative
on any containing elements of the absolutely positioned elements
Related
I have a problem with my website slider images. I set my slider wrap and slider inner frame width to 100% but when I change the screen size the images size does not change. Also I set the images width to max-width:100% and the height of them to auto.
#sliderFrame {
position:relative;
width:100%;
margin: 0 auto; /*center-aligned*/
}
#slider, #slider div.sliderInner {
width:1280px;height:auto;/* Must be the same size as the slider images */
border-radius: 6px;
}
#slider {
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider div.loading {
max-width:100%; height:auto;
background:transparent url(loading.gif) no-repeat 50% 50%;
filter: alpha(opacity=60);
opacity:0.6;
position:absolute;
left:0;
top:0;
z-index:9;
}
#slider img, #slider>b, #slider a>b {
position:absolute;
border:none;
display:none;
max-width:100%;
height:auto;
}
#slider div.sliderInner {
overflow:hidden;
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
position:absolute;
top:0;
left:0;
max-width:100%;
height:auto;
}
<div id="sliderFrame">
<div id="slider">
<img src="image/Index_1600x500.jpg" alt="#cap1"/>
<img src="image/Index_TrackerPnale_1600x500.jpg"/>
<img src="image/Index_HyundaiSantafe_1600x500.jpg" alt="#cap2"/>
<img src="image/Index_Support.jpg" title="Support Team"/>
<img src="image/Index_SocialMedia_1600x500.jpg" title="Social Medias"/>
</div>
</div>
Your CSS doesn't really say much about your HTML - Also, we have no clue on what you really mean by slider - But follow this fiddle: https://jsfiddle.net/p3r1x5sj/ and see the very minimal CSS you're looking for.
#sliderFrame {
width:100%;
height:100px;
position:relative;
}
#sliderFrame #slider {
width:100%;
height:100%;
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
box-shadow: 0px 1px 5px #999999;
}
#sliderFrame #slider img {
width:100%;
position:absolute;
top:0;
left:0;
}
The img tags are what you have to control. Also, unless you crop the images using overflow:hidden; on your outermost container, the images may be all different heights. In this case you may want to consider using divs with background-images
i was looking about two hours, how to center a div on the screen. So, when you scroll down a huge page and click on a link, the div "pop up" should appear on the center of screen, not of page.
If you take code like this, it will only center the div on the page, so it's not visible without scrolling up:
.centerDiv {
width: 800px;
border-radius: 5px;
background: #ccc;
padding: 10px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -400px;
top: 50%;
left: 50%;
}
Thanks for your help :)
Instead of position: absolute try out position: fixed
Use position: fixed and then center it like so:
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
This will get it centered on the page wherever you are. Just display the popup when you want to. See my demo at the bottom for a look into what it would look like.
Example:
body {
height: 3000px;
}
.popup {
width: 200px;
height: 150px;
border: 1px solid;
background: red;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
<div class="popup">I stay in the middle no matter where you scroll.</div>
Another example showing you the click link at the bottom of the page:
Demo Here
Note: Scroll to the bottom and click the span.
/*
this is javascript free .. almost.
Here i show you how to create pure CSS3 overlays
this uses the :target pseudo class
*/
*{margin:0;padding:0;}
#overlay{ /* we set all of the properties for are overlay */
height:80%;
width:80%;
margin:0 auto; /* center dude */
background:white;
color:black;
padding:10px;
position:absolute;
top:5%;
left:10%;
z-index:1000;
display:none;
/* CSS 3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#mask{ /* create are mask */
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:500;
width:100%;
height:100%;
display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
display:block;
opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
display:block;
position:absolute;
top:-20px;
right:-20px;
background:red;
color:white;
height:40px;
width:40px;
line-height:40px;
font-size:35px;
text-decoration:none;
text-align:center;
font-weight:bold;
-webkit-border-radius:40px;
-moz-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
}
#open-overlay{ /* open the overlay */
padding:10px 5px;
background:blue;
color:white;
text-decoration:none;
display:inline-block;
margin:20px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
Open Overlay
<div id="overlay">
×
<div style="height:20%"></div>
<h2 style="font-size:35px">Pure CSS Overlay</h2>
<br />
<br />
<br />
<p style="font-size:22px;">This overlay is made using zero javascript. With the CSS :target pseudo class. You can target an element then change it's properties. Here we hide this div then show it upon targeting. (see the URL). To exit we'll just change the URL back!</p>
</div>
<div id="mask" onclick="document.location='#';"></div> <!-- the only javascript -->
Here's a pure CSS3 overlay right here for ya. As for centering; margin: 0 auto;
FIDDLE DEMO HERE DUDE
center div on screen with CSS
HTML
<div class="hm_container">
<div class="hm_content"></div>
</div>
CSS
.hm_container{position: absolute; top: 50%; margin-top: -125px; left: 0; width: 100%;}
.hm_content{width:50%; margin-left: auto; margin-right: auto; height:150px; border:#000 solid 1px;}
DEMO1
Another demo by using CSS3
HTML
<div class="vhm"></div>
CSS
.vhm{min-height:200px; width:500px; left:50%; top:50%; border:#000 solid 1px; position:absolute;
transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
-moz-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
}
DEMO2
I want the shadow to be behind the section. I've tried all the methods but still cannot find a way to figure it out .
Here is the jsfiddle
HTML
<section id="features" class="shadow">
<div class="container">Content</div>
</section>
CSS
section {
text-align:center;
position:relative;
z-index:20
}
#features {
padding:4rem 0;
background:#018CB8
}
.container {
color:#FFF;
margin:0 auto;
max-width:55rem;
width:90%
}
.shadow:after {
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);
box-shadow:0 0 40px rgba(0,0,0,0.8);
bottom:0;
left:10%;
right:10%;
width:80%;
height:50%;
-moz-border-radius:100%;
border-radius:100%
}
I have simplified your example right down:
Currently only z-index: -1 works, which has me confused.
Have a fiddle!
HTML
<div class="shadow">Content</div>
CSS
.shadow {
padding: 4rem 0;
background: #018CB8;
color:#FFF;
margin: 0 auto;
max-width: 55rem;
width: 90%;
position: relative;
text-align: center;
}
.shadow:after {
content:"";
position:absolute;
box-shadow:0 0 40px rgba(0, 0, 0, 0.8);
bottom:0px;
left:10%;
right:10%;
width:80%;
height:50%;
border-radius:100%;
z-index: -1;
}
Here you are: jsfiddle.
I added a margin-bottom: 40px to center the shadow. Is this what you were looking for?
My problem is that i want to display block from left to right. You can see my current effect and red box what I'm expecting to get.
what I'm doing wrong? as i did tried to use float left on nmenu_drop class.
CSS:
.wraper{
margin-left:10px;
float:left;
position:relative;
}
.notification_dropdown{
height:40px;
margin-right:10px;
float: right;
position:relative;
padding-left: 10px;
width:30px;
}
.nmenu_drop{
width:200px;
height:300px;
background:#FFF;
clear:both;
position:absolute;
margin-top:40px;
float:right;
}
.nmenu_drop{
display: none;
}
.notification_dropdown:hover + .nmenu_drop {
display: block;
background:#4B4B4B;
}
.nmenu_drop:hover {
display: block;
}
.notification_dropdown:hover{
background:#4B4B4B;
}
HTML:
<div class="wraper">
<div class="notification_dropdown">
<i class="fa fa-globe" style="font-size: 21;color: #8a8a8a; margin-top: 9px;"></i>
</div>
<div class="nmenu_drop">
notification
</div>
</div>
Try adding:
.nmenu_drop {
right: 0;
}
You can play with left and transition:
#wrapper{
position: relative; /* Important, we are going to offset to this div*/
}
#menu{
position: absolute;
width: 100%; /* It looks mobile, so I took this */
top: 0;
left: -105%; /* The extra 5% is easy fix to paddings and borders and stuff */
transition: left 0.5s; /* animate it */
}
#menu.Opened{
left: 0; /* position moved back in */
}
All you have to do now is to add a class Opened to it.
I've made a small demo
Anyone have solution for this i want to move div position via css on mouse hover move div down when i mouse over on div....
HTML
<div class="movediv">I Want to Move this div on hover via css</div>
<div class="testing">
<a class="Linktohover">Test</a>
<div class="showDiv">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
CSS
.showDiv {
position: absolute;
left: -9999px;
display: block !important;
font-size: 14px !important;
}
.testing:hover .showDiv {
left: 0px;
display: block !important;
}
.testing {
position: absolute;
top: 0px;
}
.movediv {
margin-top: 30px;
}
SEE DEMO
Like this types
DEMO
.container
{
position:absolute; bottom:0; right:0; left:0;
margin-right:auto; margin-left:auto;
width:50%; height:10%;
}
.a {position:absolute; bottom:0; left:20px; width:30%;}
.b
{
position:absolute; bottom:0; right:0; left:0;
margin-right:auto; margin-left:auto; width:30%;
}
.c {position:absolute; bottom:0; right:20px; width:30%;}
.b:hover ~ .a{
-moz-transform:translatex(-50px);
-ms-transform:translatex(-50px);
-o-transform:translatex(-50px);
-webkit-transform:translatex(-50px);
transform:translatex(-50px);
}
.b:hover ~ .c{
-moz-transform:translatex(50px);
-ms-transform:translatex(50px);
-o-transform:translatex(50px);
-webkit-transform:translatex(50px);
transform:translatex(50px);
}
Use
.movediv:hover { margin-top:30px;}
instead of
.movediv{ margin-top:30px;}
try this out
.showDiv{ position:absolute; left:-9999px; display:block !important; font-size:14px !important;}
.testing:hover .showDiv{ left:0px; display:block !important;}
.testing{ position:absolute; top:0px;}
.movediv{transition: width 2s,
-webkit-transition: width 2s, -webkit-transform 2000s;}
.movediv:hover{margin-left: 35px;
transform:rotate(0);
-webkit-transform:rotate(0); /* Safari */ }
and heres the ref for you
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition2
for smooth transitions