I have a navigation menu on top and the content overlaps the navigation menu. What I want is that the content must be below the navigation bar. How to fix this? Help me please?
Here is the screenshot:
http://s1277.photobucket.com/user/fuscia_pink19/media/ss_zps888fc3e9.png.html
As you can see the aaaa letters are on the navigation bar also.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
}
nav {
float: right;
position: absolute;
top: 28%;
right: 16%;
font-size: 20px;
}
nav li {
list-style: none;
display: inline;
}
nav li a {
text-decoration: none;
color: #a4d0dd;
padding: 11px 25px;
}
#wrap {
position: fixed;
left: 0;
top: 0;
background-color: black;
width: 100%;
height: 80px;
border-bottom: 1px solid #444444;
}
</style>
</head>
<body>
<div id="wrap">
<nav>
<ul>
<li>
Home
</li>
<li>
My Profile
</li>
<li>
Account
</li>
<li>
Logout
</li>
</ul>
</nav>
</div><!-- ENDING TOP_MENU DIV -->
<div class="content">
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
</div>
</body>
</html>
To get the content 'below' the navigation you need to add a margin-top that has the same height as your navigation bar, in this case '80px'
So you add this line to your CSS:
.content { margin-top: 80px; }
Related
I'm using a template found https://bootstrapious.com/p/bootstrap-sidebar (it's the 2nd sidebar option). I have it integrated into a stock MVC5 application and everything works except for whatever is in RenderBody(), it's not responsive to when the sidebar is toggled open/closed. It is responsive when I resize the page, and the sidebar responds appropriately too, but I don't want the sidebar to overlay the contents on RenderBody(). How would I go about fixing that? Thank you in advanced!
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<!--
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>-->
</div>
</nav>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
Site.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #367fa9;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #3c8dbc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #367fa9;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #3c8dbc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #3c8dbc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: calc(100% - 250px);
padding: 40px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
#content.active {
width: 100%;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
}
#content.active {
width: calc(100% - 250px);
}
#sidebarCollapse span {
display: none;
}
}
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've learned how to create a jquery ui tab, thanks to http://jqueryui.com/tabs, and customized the look of it. I've been searching the web on how to highlight a selected tab by changing it's background color when someone clicks on it. So far, it's been frustrated and unsuccessful.
Here's the HTML Code Use:
<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<title>Jquery Tab Test</title>
</head>
<body>
<div id="tab-wrapper">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<br class="clearboth" />
<div id="tabs1" class="tab-content">
Content 1
</div>
<div id="tabs2" class="tab-content">
Content 2
</div>
<div id="tabs3" class="tab-content tabs3">
Content 3
</div>
</div>
</div>
</body>
and CSS:
body, html {
height: 101%;
}
body {
font-family: arial;
}
.clearboth {
clear: both;
padding: 0;
margin: 0;
}
#tab-wrapper {
background-color: #f00fff;
border: solid 1px #909090;
padding: 5px;
width: 330px;
}
#tabs {
overflow: hidden;
}
#tabs ul li,
#tabs ul {
margin: 0;
padding: 0;
list-style: none;
}
#tabs ul a {
float: left;
padding: 5px;
display: block;
width: 100px;
text-align: center;
text-decoration: none;
color: #000000;
height: 20px;
line-height: 20px;
font-size: 10pt;
font-weight: bold;
background-color: #cccccc;
}
#tabs ul a:hover {
background-color: #f1f1f1;
}
#tabs .tab-content {
padding: 5px;
display: block;
background-color: #f1f1f1;
font-size: 10pt;
height: 300px;
border-top: solid 1px #000000;
}
Please help if anyone can.
Jquery assigns the selected tab the class="ui-tabs-active" so to style it simply hook your css into it as follows:
#tabs .ui-tabs-active {
background: yellow;
}
This works for me:
#tabs .ui-tabs-active {
background: yellow;
}
but the above answer did not - the order in the css file is important - the above is after hover.
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
I'm a bit of a JQuery Mobile Noob and I've been trying to search for an answer to this, but to no avail. I've created a ui-navbar with five custom data icons. Problem is when I select one of the five links, the buttons to the left of the selected link take on the selected icon. Also, what should be the right arrow on the ul-listview element, also takes on the selected icon albeit it's hard to see. Had to use Firebug to expand that in order to see if's the selected data-icon.
Here's the code I'm using for the navbar in my footer:
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
And some of the CSS:
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(images/nav.png);
background-position: 0 0;
background-repeat: no-repeat;
}
Any idea why this might be happening? It has to be something with my styles I would think.
don't use the name ui-icon only, instead use ui-icon-something, see also the docu about custom icons
Custom Icons
To use custom icons, specify a data-icon value that has a unique name
like myapp-email and the button plugin will generate a class by
prefixing ui-icon- to the data-icon value and apply it to the button:
ui-icon-myapp-email.
You can then write a CSS rule in your stylesheet that targets the
ui-icon-myapp-email class to specify the icon background source. To
maintain visual consistency with the rest of the icons, create a white
icon 18x18 pixels saved as a PNG-8 with alpha transparency.
In this example, we're just pointing to a standalone icon image, but
you could just as easily use an icon sprite and specify the
positioning instead, just like the icon sprite we use in the
framework.
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<style>
.ui-icon-taifun {
background-image: url("taifun.png");
}
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon-taifun {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon-taifun {
background-image: url(taifun.png);
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Pets</h2>
<ul data-role="listview">
<li>Canary</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Farm animals</h2>
<ul data-role="listview">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div><!-- /collapsible -->
</div>
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
</div>
</body>
</html>
screenshot