So I have a parallax scrolling web page you can see it here I would like to be able to have a link my blog which obviously is not on the same page because its not a regular style web page. I have gotten the ribbon/banner to show up on a page that is not like my web page, you can see it here. I'm simply using a div to show it.
<div class="wrapper">
<div class="ribbonw"><div class="ribbon"><a href="google.com">Visit my blog </div>
</div>
</div>
How would I add it to the web page with out screwing up the page. I have done some research on how to make the banner, but I'm not sure how to add it to the page because when ever I do it just either doesn't show up on the page or is just a long white strip on the page.
So to summerize up what I'm asking is how do I add a banner like the one on the second link to my page I would like it to look something like the banner on this page.
To answer the question for future users what I had to do was add the code above into the actual first "slide" or first div. What I mean by that is that in a parallax scrolling page you have your pages split up into divs. So i just had to add my banner into the first div. It looks something like this:
<!-- begin slide 1 -->
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div class="wrapperr">
<div class="ribbonw">
<div class="ribbon">
Visit my blog
</div>
</div>
</div>
more content here
</div>
<!-- end slide 1 -->
as you can see I just had to add the content into the slide. I had it outside before therefore creating another slide.
Related
I am creating a responsive one page portfolio that has About, Skills, Work and Contact sections. I am coding from scratch using HTML and CSS alone. To navigate to each section up on clicking the links on the navbar, I have used the following lines of code:
<div class="about">
About
</div>
<div class="skills">
Interests
</div>
<div class="work">
Work
</div>
<div class="contact">
Contact
</div>
When I resize the window below 650px, I am unable to navigate to the individual sections correctly. Like for instance when I click on About, the page goes to the bottom of About and so on.
How do I rectify this without using Bootstrap or any jQuery?
The screen shots of the problem are attached below:
Screen shot of the page while clicking on About:
Screen shot of the page while clicking on Work:
PS:
I also tried increasing the padding-top and padding-bottom below the 650px break point to achieve the result (to display the sections correctly up on clicking). But on doing so, there is a lot of empty space.
hello use this JQuery code
$(".nav").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
in navigation panel
About
and section or div id
<section id="about">....content of this section... </section>
I am working on converting a twitter bootstrap theme into a wordpress theme and adding onto it.
I am having issues adding full width items into the theme. I have tried adding a slider plugin that is set to full width. Although when it is added it goes to a fixed width, the same happens if I add an image aswell. It seems all of the content in my page does this except for my header and footer.
Also it seems every time I add in anything to the page the page/footer gets messed up. I am still learning css though.
I am posting a link to the site to see if anyone can take a look and give me a hand.
http://goo.gl/8JUDA
It looks like you contained the element that you want to stretch the size of the window within a .container div.
.container is used in bootstrap for fixed layouts. Instead try using the .container-fluid class.
For example:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
Read more: http://twitter.github.io/bootstrap/scaffolding.html#layouts
I've integrated the facebook login in a site which seems to be the source of some trouble.
Whenever I log in with the 'regular way' (by an self created field) there is no problem, but once I use a facebook login the divs of the site are getting messed up.
I've got a wrapper with a width of 90% of the page, inside this div there are two divs one named content with 80% of the width of the wrapper and the other once receives the other 20% of the width.
<div id="wrapper">
<div id="content">
content here...
</div>
<div id="sidebar">
side bar items etc.
</div>
</div>
Now if I press F12 to check the source / inspect elements of the site it shows up perfectly
with the regular login. However once I login with facebook the following pops up:
<div id="wrapper">
<div id="content">
content here...
<div id="sidebar">
side bar items etc.
</div>
</div>
</div>
Is this caused by the facebook plugin loading, whilst php/html is not waiting to generate any content and just continues? I am 100% sure this is caused by the login as I excluded any other option.
Perhaps you could add an element which would hold/wrap arround the Facebook login with fixed dimensions(width/height) and the css property overflow:hidden
I'm making a login page with Twitter's Bootstrap, and I have a problem. I can't get a thumbnail to display where I want it to. You can see here: http://metamint.net/login
I want to put a thumbnail in the blank space next to the forms, but it won't work correctly; the forms are pushed down or moved off to the side. How can I do this correctly? Thanks.
Couple of problems.
You put the thumbnail in a row, so it's going to clear all floats.
You put the thumbnail first, which doesn't flow well with how bootstrap is set up.
Try something like this:
<div class="row">
<div class="span4">
.... form content here
</div>
<div class="span4">
.... thumbnail content here
</div>
</div>
(When loading) For some reason the content of my page shifts down really far while the background is stationary and then jumps back up to the appropriate placement. Anyone know why or how to fix this issue? I would really appreciate some help. Thanks!
Sounds to me like your background isn't really a background, but rather a layer with an image in it that you've stacked behind your content.
I generally find this to be a pain because if for some reason the z-index of the items get's confused (and it sounds like this is what's happening here), weird things will happen when the page loads.
I personally recommend you set the background image on the same block that all your content goes on. Consider the following
<div id="content">
<div class="header"> </div>
<div class="navigation"> <!-- Menu goes here --> </div>
<div class="main"> <!-- Main content goes here --> </div>
</div>
#content { background: transparent url("Images/mybackground.png"); }
This will set the background on the page element that also houses your content. Assuming I've identified the problem corrently, this should solve your problem.
HTH