So, let me tell my problem directly to the point. I'm developing a website right now. And so I try to visit this website I'm developing on with my iphone. The problem is, I got some different output when I visit that site with my PC and when I visit it with my iphone. This image is when I visit it with my PC's Chrome and the output is just the same with all other browser in my PC while this is when I visit it with my iphone's Safari and so the output is same too when I visit it with my iphone's Chrome . See the difference betwwem visit from iphone and from PC? Yep. I got that "space" above my navigation bar while visiting it with my iphone. So can anybody help me solve this problem? Thanks a lot in advance.
Btw this is my CSS and HTML
body {
background: rgb(25, 181, 254);
margin: 0px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#header {
width: 100%;
min-width: 1050px;
height: 150px;
margin-bottom: 20px;
text-align: center;
}
#logoBox {
display: inline-block;
width: 300px;
height: 150px;
overflow: hidden;
}
#logoBox:active {
height: 140px;
margin: 5px auto;
}
.logo {
background: url('img/icon/logo.png') no-repeat;
width: 300px;
height: 100%;
}
#navBox {
width: 150px;
height: 150px;
overflow: hidden;
display: inline-block;
}
.transition {
transition: height 0.15s, margin 0.15s, background 0.7s;
-webkit-transition: height 0.15s, margin 0.15s, background 0.7s;
-o-transition: height 0.15s, margin 0.15s, background 0.7s;
-ms-transition: height 0.15s, margin 0.15s, background 0.7s;
-moz-transition: height 0.15s, margin 0.15s, background 0.7s;
}
#navBox:active {
height: 140px;
margin-bottom: 5px;
}
#navBox.green {
background: rgb(80, 190, 106);
}
#navBox.orange {
background: rgb(250, 170, 30);
}
#navBox.green:hover {
background: rgb(4, 160, 114);
}
#navBox.orange:hover {
background: rgb(240, 130, 20);
}
#iconBox {
height: 53.4%;
width: 100%;
margin-top: 13.4%;
text-align: center;
}
#iconBorder {
width: 70px;
height: 70px;
border-radius: 40px;
border: 5px solid rgb(255, 255, 255);
}
img.icon {
width: 50px;
height: 50px;
margin-top: 10px;
}
a.nav {
display: inline-block;
text-decoration: none;
}
#navProp {
width: 100%;
height: 33.3%;
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
font-size: 25px;
margin-top: 6.7%;
}
.center{
margin-left:auto;
margin-right:auto;
}
<html>
<head>
<title>Welcome to SIRIUS</title>
<?php require_once "theme.php"; ?>
</head>
<body>
<div id="header">
<a href="index.php" class="nav">
<div id="logoBox" class="transition">
<img src="img/icon/logo.png" class="logo">
</div>
</a>
<!--
-->
<a href="index.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon home">
</div>
</div>
<div id="navProp">Home</div>
</div>
</a>
<!--
-->
<a href="aboutUs.php" class="nav">
<div id="navBox" class="orange transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon aboutUs">
</div>
</div>
<div id="navProp">About Us</div>
</div>
</a>
<!--
-->
<a href="register.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon register">
</div>
</div>
<div id="navProp">Register</div>
</div>
</a>
<!--
-->
<a href="login.php" class="nav">
<div id="navBox" class="orange transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon login">
</div>
</div>
<div id="navProp">Login</div>
</div>
</a>
<!--
-->
<a href="admin.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon admin">
</div>
</div>
<div id="navProp">Admin</div>
</div>
</a>
</div>
</body>
</html>
Apologies I cant see your images as work are blocking content :P
Im guessing here but most likely it would be something that is being specified by the browser, that you have not margins etc. Try using a reset.css file or maybe using debugging (F12) on a desktop and pretend to be a phone to debug. (I'm pretty sure in chrome you can specify a phone browser type to be, im assuming all modern browsers have emulation for mobile)
Or it could be min-width: 1050px;
If you are designing this for responsive design you might want to make some #media queries.
[edit] I also notice you have nothing specifying html. Perhaps the browser is adding some css against the html tag? html {margin:0; padding:0;}
Related
I have to use parallax.js to background images in owl carousel. For example I wanna use http://pixelcog.github.io/parallax.js/ with https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html
How can I do it?
pen: https://codepen.io/naaatasha/pen/gRdoej
<div class="owl-carousel slider">
<div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://trawnik.nazwa.pl/TrawnikProducent2016/wp-content/uploads/slide-strong-1.jpg">
<div class="container">
<div class="box">
<h2 class="h2 wow fadeIn text-right">co tam</h2>
<span class="subtitle wow fadeIn">ihsisdijbvjd</span>
</div>
</div>
</div>
<div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://www.focus.pl/upload/galleries/19/trawa-19061_l.jpg">
<div class="container">
<div class="box">
<h2 class="h2">lorem ipsum</h2>
<span class="subtitle">asdsk jbsjfd</span>
</div>
</div>
</div>
</div>
.slider {
position: relative;
display: table;
}
.box {
display: table-cell;
vertical-align: middle;
width: 1%;
}
.slide-wrapper {
height: 800px;
width: 100%;
background-color: #333;
backround-size: cover;
}
.h2 {
font-size: 40px;
font-weight: 500;
margin: 0;
text-transform: uppercase;
}
.subtitle {
display: block;
font-family: 'latolight', sans-serif;
font-size: 30px;
text-transform: uppercase;
}
.parallax-window {
min-height: 400px;
background: transparent !important;
}
jQuery(document).ready(function() {
jQuery(".slider").owlCarousel({
items: 1,
loop: true,
nav: false,
dots: false,
autoplay: true,
autoplayTimeout: 4000,
animateIn: 'fadeIn',
//onChange : callback
});
// function callback(event) {
// jQuery('.parallax-window').parallax();
// }
});
I am using a standard bootstrap 3 navbar and I am trying to align the text of the menu options to be on the same horizontal level as the text and the pictures in the footer.
Basically on the left side I want the first letter of the menu item "Home" to be vertically aligned with the first letter of the footer, which is the item "Impressum".
On the right side I want the image of the footer to be aligned to the last item of the menu, which is contact.
Any help would be highly appreciated.
here is my code:
<nav id="navbar-primary" class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>COLLECTION</li>
<li>ONLINE SHOP</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
<hr>
</div><!-- /.container-fluid -->
</nav>
<!-- Footer -->
<div id="footer">
<div class="row">
<hr>
<div class="col-lg-6 col-lg-offset-1 col-xs-6">
IMPRESSUM |
INFO |
PRESSE </p>
</div>
<div class="col-lg-1 col-xs-2">
<img src="img/pinterest.png" alt="" class="img-responsive"> </div>
<div class="col-lg-1 col-xs-2">
<img src="img/instagram.png" alt="" class="img-responsive"> </div>
<div class="col-lg-1 col-xs-2">
<img src="img/facebook.png" alt="" class="img-responsive"> </div>
</div>
<!-- /.row -->
</div>
And here is my CSS:
#navbar-primary.navbar-default {
background: transparent;
border: none;
}
#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
display: inline-block;
float: none;
}
#navbar-primary.navbar-default .navbar-nav > li > a {
color: rgba(77, 77, 77, 1);
background-color: rgba(248, 248, 248, 0);
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 5px;
}
#navbar-primary.navbar-default .navbar-nav>li>a:hover,
#navbar-primary.navbar-default .navbar-nav>li>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
}
#navbar-primary.navbar-default .navbar-nav>.active>a,
#navbar-primary.navbar-default .navbar-nav>.active>a:hover,
#navbar-primary.navbar-default .navbar-nav>.active>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
https://jsfiddle.net/DTcHh/9901/
I think you should set your css according to your layout, So far i made some alteration in your css check this code
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
#navbar-primary.navbar-default {
background: transparent;
border: none;
}
#navbar-primary.navbar-default .navbar-nav {
width:100%;
text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
display: block;
float: left;
}
#navbar-primary.navbar-default .navbar-nav > li > a {
color: rgba(77, 77, 77, 1);
background-color: rgba(248, 248, 248, 0);
padding-left: 50px;
padding-right: 48px;
width:15px;
}
#navbar-primary.navbar-default .navbar-nav>li>a:hover,
#navbar-primary.navbar-default .navbar-nav>li>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
}
#navbar-primary.navbar-default .navbar-nav>.active>a,
#navbar-primary.navbar-default .navbar-nav>.active>a:hover,
#navbar-primary.navbar-default .navbar-nav>.active>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
here is my code http://jsfiddle.net/sanand29/5p8vgseh/2/ `
Page Header
</div>
<div class="ui-grid-a">
<div id="div1" class="ui-block-a">1st</div>
<div id="div2" class="ui-block-b">2nd</div>
<div id="div3" class="ui-block-a">3rd</div>
<div id="div4" class="ui-block-b">4th</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
.ui-grid-a div {
height: 150px;
}
#div1 {
background: #DDD;
background-image: url('xyz.png');
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
I am not getting the image inside the divided sections and even if i am getting image, its not responsive, please help
You need to add the following CSS to each of your div
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?
I'm a complete noob to RoR, Bootstrap and all things code based. I'm trying to implement a full screen Bootstrap Carousel in my RoR app similar to this: http://surfscore.me/
This is what I have so far: http://cryptic-woodland-6000.herokuapp.com/
Can anyone please tell me why I can't get the image to full width....it's driving me crazy!
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 0px;
height: 100%;
width: 100%;
color: #5a5a5a;
margin: 0;
margin-right: 0;
min-height: 100%;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.logo-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 5%;
margin-bottom: -90px;
margin-left: 5%;
/* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* Carousel base class */
.carousel {
margin-bottom: 0px;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
height: 100%;
}
.carousel img {
position: relative;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
margin: 0;
}
.carousel-caption {
background-color: #0001;
position: absolute;
max-width: 400px;
padding: 35px 20px;
margin-top: 40px;
margin-left: 50px;
margin-bottom: 45%;
z-index: 20;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 4px 4px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
/* Footer
-------------------------------------------------- */
.footer {
padding: -90;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<!-- Logo attempt
================================================== -->
<div class="logo-holder">
<img src="images/hselogo.png">
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" >
<div class="carousel-inner">
<div class="carousel-caption">
<h1>COMING SOON!</h1>
<p class="lead">We're busy doing some 'market research'!</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
<div class="item active">
<img src="images/greek1.jpg" alt="">
</div>
<div class="item">
<img src="images/hotel.jpg" alt="">
</div>
<div class="item">
<img src="images/mykonos.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->
<!-- FOOTER -->
<footer>
<p class="pull-right">91-93 Buckingham Palace Rd, London, SW1W 0RP.</p>
<p>© 2013 HOP SKIP ESCAPE LTD · Privacy · Terms</p>
</footer>
</div><!-- /.container -->
</body>
</html>
You can achieve a similar effect by dropping the container class