I'm learning Zurb Foundation, so this is my first web site attempt. I have a problem with the Stick Top Bar. It "kind of" works, but it does some strange things when collapsed (all my items collapse into the button menu == small screen/window).
The problem is that if I go to the bottom of the page and I click on the "Menu" button on the top bar (on a small screen/window), the page goes to the top. My english is not the best, so I'll live this preview of the webpage so you can check it out:
http://okgo.comuv.com/
Steps to reproduce:
1) Resize your browser window until the topbar becomes collapsed (mobile version of the topbar).
2) Scroll down to the bottom.
3) Click "menu".
I've tried removing almost everything on the page, but the problem still persists.
Here's the code so you can take a look at it:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Beyond The Sky</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/custom.modernizr.js"></script>
<style type="text/css">
body, html {
height: 100%;
width: 100%
}
#homepage {
background-color: black;
background-attachment: scroll;
background-image: url(img/nasabackground.jpg);
background-position: center center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
#content {
background-color: black;
background-attachment: fixed;
background-image: url(img/stars.jpg);
background-position: center center;
background-repeat: repeat;
}
#homepagecontentwrapper {
height: 100%;
width: 100%;
overflow: hidden;
display: table;
}
#maintitlewrapper {
display: table-cell;
vertical-align: middle;
}
#maintitle {
color: black;
font-family: Verdana, sans-serif;
}
.centertext {
text-align: center;
}
</style>
</head>
<body>
<div id="homepage">
<div id="homepagecontentwrapper">
<div id="maintitlewrapper">
<div class="row">
<div class="small-12 columns">
<h1 id="maintitle">Hello There!<br/>This is a great site. Don't you think?</h1>
</div>
</div>
<div class="row">
<div class="large-2 small-6 columns centertext">
Contacto
</div>
<div class="large-2 small-6 columns centertext">
Nosotros
</div>
<div class="large-8 hide-for-small columns">
</div>
</div>
</div>
</div>
</div>
<div class="contain-to-grid sticky">
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Beyond The Sky</h1></li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="active">Main Item 1</li>
<li class="divider"></li>
<li>Main Item 2</li>
<li class="divider"></li>
</ul>
</section>
</nav>
</div>
<!--Content Placeholder-->
<div id="content">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<!--End of Content Placeholder-->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Related
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
I am not a front-end developer so I suspect I might be missing something really basic. Nevertheless I cannot figure out a solution.
I have a div element and I simply want to apply some padding at the top so that it does't interfere with the heading. I have looked around and I have seen similar problems with margin collapsing but I don't think it's the case since here I am dealing with two separate div not enclosing each other (tot-header and content).This is what I have written so far.
<!DOCTYPE html>
<html>
<head>
<title>Blogologo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="css/head.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="tot-header">
<div class="page-header">
<h1>Blogologo</h1>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="container">
<div class="row">
<div id="central" class="col-md-8">
Preview
</div>
<div id="side" class="col-md-4">
<ul class="side-menu">
<li>Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
and the css
.tot-header {
position: fixed;
top: 0px;
width: 100%;
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.content {
padding-top: 10cm;
}
However the padding seems not to work. Any ideas?
What browser are you using? From what I can see it seems to be working perfectly. There is a huge space between the two divs caused by the padding-top of the .content div. That is until your scroll, because your top header has a fixed position.
This is your code:
http://codepen.io/anon/pen/WweMPG?editors=1100
.tot-header {
position: fixed;
top: 0px;
width: 100%;
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.content {
padding-top: 10cm;
}
<div class="tot-header">
<div class="page-header">
<h1>Blogologo</h1>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="container">
<div class="row">
<div id="central" class="col-md-8">
Preview
</div>
<div id="side" class="col-md-4">
<ul class="side-menu">
<li>Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</div>
</div>
</div>
The code appears to me to be working perfectly. What did you expect it to look like?
remove
position:fixed;
and change your .content css
from padding-top:10cm; to padding-top:10px;
in your css you can try using pixels instead of cm e.g.
.content {
padding-top: 100px;
}
Also you may try using margin instead of padding e.g.
.content {
margin-top: 100px;
}
And give it more padding or margin untill your content appears
I am trying to change the background image of a jumbotron I have on one of my views and it just isnt working. I have looked at numerous posts on stack, and tried all of the suggested solutions but none of them are working for me.
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>About</li>
<li>Me</li>
</ul>
</div>
</nav>
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>Allan Araujo</h1>
<p>Example paragraph</p>
</div>
</div>
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
</div> <!--END CONTENT-->
</body>
</html>
CSS:
/* ============================================= JUMBOTRON ============================================= */
.jumbotron {
background: url('/img/congruent_pentagon.png') no-repeat center center !important;
background-size: cover;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
My folders are structured as follows:
FOLDER
--css
--style.css
--dist
--img
--congruent_pentagon.png
--header.php
--index.php
I have tried to change the url to go see if that was the issue, but that did not fix the problem either. The weird part is the the background right now is grey, but not displaying the image that I want it to.
EDIT: now displaying entire html/css doc. I am using php to load in nav bars but I just combined them here to make it easier to look at.
The issue is related to the url to your image, change it to /img/congruent_pentagon.png
Online example: http://jsfiddle.net/tthLjchm/1/
Css:
.jumbotron {
background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important;
height: 50%;
margin-top: 10px;
color: black;
}
.jumbotron p, h1 {
text-align: center;
}
The issue was that the image had to be placed within my css folder.
I am using the latest version of Foundation to add an off-canvas navigation menu and add a toggle to the tab-bar. While I have this working with the tab-bar being sticky, the content of the off-canvas menu scrolls with the page. How can I make the content of the menu be sticky such that on any size screen or page vertical scroll position hitting the menu toggle will show the menu content without scroll? My HTML so far is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="contain-to-grid sticky">
<nav class="tab-bar top-bar" data-topbar data-options="sticky_on: large">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
</nav>
</div>
<div class="inner-wrap">
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</aside>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<!-- Content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Make the height of the content 95vh and the overflow-y=scroll. Whenever the content on the right is scrolled, the off-canvas menu is unaffected and remains at the top.
CSS:
.mycontent {
height:95vh;
overflow-y:scroll;
/* fix scrolling on webkit touch devices (iPhone etc) */
-webkit-overflow-scrolling: touch;
}
HTML:
<div class="row mycontent" >
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
Try this in css (Works 100%)
.tab-bar {
position: fixed;
width: 100%;
z-index: 702;
}
I had the same issue, couldn't get it to stick when open. In the end I went with this:
CSS:
.tab-bar {
position: fixed;
z-index: 9999;
width: 100%;
}
Added an inner wrapper for the off canvas menu right after the "<aside>" tag, before the "off-canvas-list" <ul>s.
.inner-canvas-menu-wrapper
{
position: fixed;
top: 0;
overflow-y: hidden;
width: inherit;
padding-top: 2.8125rem; (standard height of the "tab-bar")
}
JS
Changed foundation.offcanvas.js -> settings -> open_method to "overlap"
Now it overlaps, but it at least it is fixed/sticky. You may want to change close_on_click to "true" as well in this setup.
If you are using Foundation 6 it will be fixed by default:
https://foundation.zurb.com/sites/docs/off-canvas.html#sass-reference
I have two areas, left menu pane and right content pane. CSS code for both left and right are as below
/*-----------------navi_left area-----------------------*/
layoutform {
clear: both;
//background-color: #e2e2e2;
font-size: 1em;
height: 100%;
}
.div_navi {
border:1px solid #CCCCCC;
width:216px;
height: inherit;
float: left;
}
/*------------------Contents area--------------------*/
.div_text{
border:1px solid #CCCCCC;
vertical-align:top;
width:761px;
height: 100%;
//padding:0px 0px 0px 34px;
font-size:11px;
line-height:22px;
float: right;
}
The problem is that, on some pages the right pane has more height due to more content. I want to make such that if the right page gets more height, left should inherit height from it. Below picture shows that both are unequal. I am developing application in asp.net MVC4 and _layout.cshtml is
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Fleets Go Green DataServer</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="#Url.Content("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css")" rel="Stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.15.min.js")" type="text/javascript"></script>
</head>
<!-- New Script Added -->
<script type="text/javascript" src="#Url.Content("~/Scripts/myFile.js")" ></script>
<body>
<div class="content-wrapper">
<header>
<div class="content-wrapper">
<div class="div_line">
<div class="div_grey"></div>
<div class="div_blue"></div>
</div>
<div class="empty"></div>
<div class="div_logo">
<div class="div_left_logo">
<img src="~/Images/fgg_logo.gif" >
</div>
<div class="div_right_logo">
<img src="~/Images/fgg_head.gif" >
</div>
</div>
<div class="empty"></div>
<div class="div_line">
<div class="div_grey"></div>
<div class="div_blue">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
</div>
</div>
<div class="empty"></div>
<!--
<div class="float-left">
<p class="site-title">#Html.ActionLink("Fleets Go Green Get Your Measurement", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Fahrzeuge", "Index", "Fahrzeuge")</li>
<li>#Html.ActionLink("Impressum", "About", "Home")</li>
<li>#Html.ActionLink("Kontakt", "Contact", "Home")</li>
</ul>
</nav>
</div>-->
</div>
</header>
<!-- Body Layot-->
<layoutform>
<div class="div_content">
<div class="div_navi">
<div class="navi_empty"> </div>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Fahrzeuge", "Index", "Fahrzeuge")</li>
#if (User.Identity.IsAuthenticated)
{
<ul id="submenu">
<li>#Html.ActionLink("Smart Fortwo ED", "SmartFrortED", "Fahrzeuge")</li>
<li>#Html.ActionLink("Citroën C-Zero", "CitroenCZero", "Fahrzeuge")</li>
<li>#Html.ActionLink("miAmore", "Miamore", "Fahrzeuge")</li>
<li>#Html.ActionLink("VW Golf Blue e-Motion", "VWGolfBlueEMoon", "Fahrzeuge")</li>
<li>#Html.ActionLink("VW e-up!", "VWeup", "Fahrzeuge")</li>
<li>#Html.ActionLink("VW Elektro-Caddy", "VWElectroCaddy", "Fahrzeuge")</li>
</ul>
}
<li>#Html.ActionLink("Impressum", "About", "Home")</li>
<li>#Html.ActionLink("Kontakt", "Contact", "Home")</li>
#if (User.Identity.IsAuthenticated)
{
<li>#Html.ActionLink("Passwort ändern", "ChangePassword", "SGAccount")</li>
}
#if (User.IsInRole("Administrator"))
{
<li>#Html.ActionLink("Security Guard", "Index", "Dashboard", new { area = "SecurityGuard" }, null)</li>
}
</ul>
<div class="div_bottom_logo">
<img src="~/Images/995_bmu_logo_vmxk9d.png" >
</div>
</div>
<div class="div_text">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
</div>
<div class="empty"></div>
</layoutform>
<footer>
<div class="content-wrapper">
<div class="div_line">
<div class="div_grey"></div>
<div class="div_blue">© #DateTime.Now.Year - Niedersächsisches Forschungszentrum Fahrzeugtechnik (NFF) | IFAM Bremen |
</div>
</div>
<div class="empty"></div>
<!-- <div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - imc Meßsysteme GmbH Berlin +49 (0)30 467090-0 - Frankfurt +49 (0)6172 59672-0 - Schweiz +41 (0)52 7221455 - Österreich +49 (0)6172-59672-0</p>
</div>-->
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/themes/base/css")
#RenderSection("scripts", required: false)
</div>
</body>
myFile.js looks like this
var heightright = $('.rightcontent').height();
$('.leftcontent').css('height', heightright);
alert('JS working');
I'll throw out an idea using JS - FIDDLE.
Looking around a bit, apparently it's very difficult to do what you want with CSS without some fancy and less than optimal code (absolute positioning, etc)
References:
Floated div 100% height of parent inline-block div
Floated div 100% height of dynamic parent without absolute position?
How to make a floated div 100% height of its parent?
http://css-tricks.com/forums/topic/div-child-needs-to-have-height-of-100-of-div-parent/
JS
var heightright = $('.rightcontent').height();
$('.leftcontent').css('height', heightright);
You could call the js on pageload or on .change of the height of the right div.
Best of luck.
Try this CSS:
<style type="text/css">
/*-----------------navi_left area-----------------------*/
layoutform {
clear: both;
//background-color: #e2e2e2;
font-size: 1em;
height: 100%;
background:#0066FF;
}
.div_navi {
border:1px solid #CCCCCC;
width:216px;
display:block;
position:relative;
float: left;
height:100%;
}
/*------------------Contents area--------------------*/
.div_text{
border:1px solid #CCCCCC;
vertical-align:top;
width:761px;
//padding:0px 0px 0px 34px;
font-size:11px;
line-height:22px;
display:block;
position:relative;
float: right;
height:100%;
}
</style>