I'm working on building a website, and I have an issue where the navbar is hiding the first bit of the page so I can't see the information. How would I fix this? The link to my website is here:
codepen.io/sookyungahn/pen/wzQkBp?editors=1100
In your case, add padding-top in home div id with same size height on your nav bar.
<div class="container-fluid well" id="home" style="display:block; padding-top:50px;">
Add a padding of the size of your navbar's height to the body.
In the official bootstrap example here, they add a 70px padding on top. Basically,
body {
padding-top: 70px;
}
Since 2017 add position: sticky; top:0; to navbar and it will fix this problem.
<img style="margin-right:10px;margin-top:50px" class="image gap img-rounded pull-left" src="http://odezhda-stilnaya.ru/kartinki/1/ptichka_babochki_zvezdy_2560x1600.jpg" alt="PLACEHOLDER IMAGE" />
<div>
<h3 style="font-family:HelveticaNeue, Tahoma; font-weight:200;margin-top:50px;">I am a website developer, passionate about programming and assisting people. I am currently an intern at a tech startup.
</h3>
Great Code:)
Just add margin-top:50px as shown.
Happy Coding :)
Related
I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.
Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.
I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.
Here is the relevant code:
<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
<a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<img class = "img-responsive" src="/img/img.png" alt="...">
<div class="caption">
<h5 class="text-center">Some Caption</h5>
</div>
</a>
</div>
</div>
You can see what I am talking about here:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
There it might be easier to follow the CSS as well.
Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.
I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!
Thanks!
Brian
I am in need of help. I am currently developing my new webstore for my website, and I cannot figure out ho to properly align my text, images and buttons. I have tried many things in order to align them, but I cannot seem to figure out how to do it myself. I'll provide more info if needed. Thanks in advance!
Here is my code and below you can see the result:
Assuming that you just want to align all the items vertically, you can simply give the container a value of text-align:center while giving the containing block a width. So for the purpose of your code it would be something like this. Not that I've changed your markup as you were using inline styling.
The wrapper I've set as display:flex to help it align nicely. You can read about flexbox here
HTML:
<div class="wrapper">
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: left;" title="" src="//dunb17ur4ymx4.cloudfront.net/packages/images/d04fbf5918208479df283e7fa0ad8f0fcc0d7acb.png"/>
<button>helpme</button>
</section>
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: center;" src="//dunb17ur4ymx4.cloudfront.net/packages/images/f6f9b85569cc52ddc9bf5e57b4fd28309093fdcc.png"/>
<button>helpme</button>
</section>
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: center;" src="//dunb17ur4ymx4.cloudfront.net/packages/images/f6f9b85569cc52ddc9bf5e57b4fd28309093fdcc.png"/>
<button>helpme</button>
</section><
</div>
CSS:
.wrapper section {
text-align:center;
justify-content:center;
width:200px;
}
.wrapper {
display:flex;
}
Fiddle
I'm in my way to do an app with ionic and angularJS and i'm trying to make my bar-footer not to overlap the few content that there's in the end, so the content has to finish being shown and, then, footer is the last thing there without overlapping something, which property do I have to apply? Because I've tried all about position property and none of them has worked for me, here I leave you an image of what's happening now:
http://s23.postimg.org/b9uhjq0ej/Captura.png
As you can see, my last item of the list is overlapped by my footer.
Thank you all for your answers and help! :)
--EDITED (providing code):
<ion-content>
<ion-list class="pagina">
<a class="item item-thumbnail-left" ng-repeat="poblacio in poblacions" href="#/app/ambFiltreActivitats" ng-click="doGuardarPoblacio(poblacio.title)">
<img style="width:50px; height:auto; margin-left: 60px;" ng-src="{{poblacio.url}}"/>
<br/><br/>
<b>{{poblacio.title}}</b>
</a>
</ion-list>
</ion-content>
<div class="bar bar-footer">
<div class="title"></div>
</div>
And no, I have no CSS property but background-color one, If I apply position: relative the footer does not even show, and with absolute or fixed it remains the same as in the photo of the link.
Add 'has-footer' to <ion-content> can solve this problem.
I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my HTML:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit="">
<li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
</ul>
</div>
</section>
</div>
Here's the HTML once foundation.orbit.js does its thing:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<div class="orbit-container orbit-stack-on-small">
<ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
</ul>
Prev <span></span>
Next <span></span>
<div class="orbit-slide-number">
<span>1</span> of <span>2</span>
</div>
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
</div>
</div>
<ol class="orbit-bullets">
<li data-orbit-slide-number="1" class="active"></li>
<li data-orbit-slide-number="2" class=""></li>
</ol>
</div>
</section>
</div>
I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.
When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.
If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.
Any ideas would be much appreciated.
I'm going to try to avoid being overly verbose here.. but this is what I've found and while I wouldn't call this a complete fix, because i'm not sure what started the differences in css the following code solved the problem.
I found this because I have a local environment as well as a dev environment for the site. The local environment was working great, but the production environment had all the issues you mentioned above.
The first issue of course is the generated container div setting the height to 0px. This is strange enough. I manually added the height to the container in the css. The reason all the images are hiding is they're set to margin-left: 100% or some large left margin and they're all positioned absolutely. I wish I could be more help as to why the code differences are present, maybe I'll find more time to investigate further but for now its working.
Anyway, the following was the fix:
.orbit-container { height:250px; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
.orbit-container { height:auto; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
A little upgrade from a previous solution. With this modification, it will be more easy to show the slideshow on a phone and a desktop.
Are you sure the url to the images are ok?
I had the same problem but with 2 of my 3 images and the problem was in the url
I was having the same problem and I've just found that using individual modules (I'm using compass) instead of using foundation.min.css solves the problem, have you tried to use foundation.css (not minyfied)?
I am building a phonegap app that needs to scale to all resolutions, and am thus defining everything in terms of percentages. I'm also using a fixed header with a div I defined in Jquery as the contents.
The problem I have is that during the transition between pages, there is a 'stutter' because the page height changes during the transition. I'm trying to stop this from happening. Any thoughts?
I've created a sample below to really illustrate the point.
http://jsfiddle.net/fz7qs/2/
<div id="pageContainer" style="position: relative !important; height: 100%;">
<div data-role="page" id="test1">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<a id="page2link">To Page 2</a>
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="test2" style="height: 568px">
<div data-role="header">
<h1>Page 2</h1>
</div>
<a id="page1link">To Page 1</a>
<div data-role="content" style="height: 50%;">
<p style="height: 80%; border: 1px solid black;">This is page 2</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
The entire jsFiddle page jumps on the very first visit in Chrome desktop browser, so press the jsFiddle RUN Button to load correctly before use.
EDIT: Answer and jsFiddle revised per comment section developments.
EDIT 2: jsFiddles now use jQuery 1.7.2 with jQuery Mobile 1.2.0 to fix Chrome Browser Bug.
jsFiddle DEMO
The solution is to set your styles in a CSS file and not the HTML section since the jQuery Mobile UI has it's own style themes via a style sheet too.
Also, you have an extra closing div for page at the bottom in that HTML as well as not closing the webpage. The head section in your HTML is not necessary for jsFiddles, as the page is setup for HTML5 and you just need to import files (mobile jQuery) into jsFiddle using the Manage Resources button.
Although you listed in your Question as complete percentage units, I've keep the pixels units as shown in your example, but those can be percentages as well.
CSS Settings:
a {
cursor: hand;
cursor: pointer;
}
.content1 {
height: 268px;
}
.text1 {
height: 50%;
border: 1px solid black;
}
.content2 {
height: 568px;
}
.text2 {
height: 80%;
border: 1px solid black;
}
In your HTML section, I've also pinned the footer to the bottom of the page using data-position:
<div data-role="footer" data-position="fixed">
Besides pinning the footer to the bottom of the page, you can also have it not animate by adding an extra setting of data-id for each page that has the same value.
<div data-role="footer" data-id="foo" data-position="fixed">
jsFiddle FOOTER.
EDIT 2: Per recent discovery of jQuery 1.8.2 and jQuery Mobile 1.2.0 bug seen in Chrome (hidden scrollbar still causes body elements to jump), here is a revised jsFiddle example:
jsFiddle Percentage Based with jQuery 1.7.2 and jQuery Mobile 1.2.0
About this bug:
I just discovered that using jsFiddle with jQuery 1.8.2 and jQuery Mobile 1.2.0 does not work as intended when overflow is set to hidden during use of a scrollBars function within that jsFiddle.
That function is to hide the browsers scrollbars during jQuery animations, preventing elements to briefly jump around during the animation period of page changes.
The browsers scrollbars are in fact hidden, but elements in the body section continue to "jump" as if the scrollbars are still present.
This does not happen when jsFiddle jQuery is set to 1.7.2.
If your curious how to have multiple psuedo pages on a single page, check out this jsFiddle for an unrelated SO Answer here.
Try to change this:
<div data-role="content" style="height: 50%;">
to that:
<div data-role="content" style="height: auto;">
example: http://jsfiddle.net/fz7qs/13/