Im building a WordPress theme based on fullPage.js Im allmost finishing it. But I have encountered a problem that I cant figure it out.
In the next two examples there is a navigation bar, a first section containing slides and other sections below:
Here http://wordpress-123465.sae1.nitrousbox.com/azal/ scrolling down from the first section that contains slides is smooth and the corresponding link in the navigation bar works (when click scroll up to the slider section)
But here http://wordpress-123465.sae1.nitrousbox.com/azal-beta/ scrolling down is very dificult, also the keyboard doesnt work, after that is imposible to scroll up again, and the navigation bar doesnt work neither.
In both cases pointer in the right side of the screen work.
What could be wrong? Thanks
Your site contains only one section as a first child of the fullpage.js container.
You probably forgot to close some HTML tags and now you have many sections inside the 1st section.
Which is not the way fullpage.js works.
Fullpage.js requieres this structure:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
And now you have something like:
<div id="fullpage">
<div class="section">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
</div>
You should first try to fix HTML errors in your source code.
line 138, you closed </head>, it's ok. But you started a <nav> tag just after, without opening a <body> (which is opened at line 191). This is an error. Nav must be inside body tag
line 234 and 236, opening " character for style attribute is missing:
<div style=height:12px;">
Many div tags are not in the right place. Don't forget you can't do this:
<div>
<p>
</div>
</p>
instead, you must do this:
<div>
<p>
</p>
</div>
As a good starting point, use a HTML validator to check if your source is correct: http://validator.w3.org/check?uri=http%3A%2F%2Fwordpress-123465.sae1.nitrousbox.com%2Fazal%2F%23SliderTitle%2F2&charset=%28detect+automatically%29&doctype=Inline&group=0
Related
I'm using bootstrap panels for the first time, and my panel header and panel body are shorter than my panel which looks a bit strange. I'm a bit stuck as to what's actually happening as the bootstrap styling is being called.
Code below:
<div class="software well row hidden">
<div class="info">
<div class="panel panel-success">
<div class="panel-heading"><h3>This INSERT NAME is available to download!</h3></div>
<div class="panel-body">
Or if you've tried that and experienced issues then please fill out the additional info box below and a member of the service desk will be in touch.
</div>
</div>
</div>
</div>
From the Comments:
Hmm. I [can't reproduce](https://jsfiddle.net/pbdevch/6t9afwdu/) the error in a JSFiddle. Look if your CSS is overwritten by some theme or by your own styles.
Response:
#chade that was it thanks - it was a css style that was overwriting my panel and not my panel-heading as I was expecting!
I'm answering this so other users with the same problem can easily determine the answer that was provided.
one issue I don't quite understand.
I made an online sample, when I'm resizing the window, the SPANs response one by one.
Online sample http://jsfiddle.net/Pva7y/1/
Online Images
However, I copied the same code to my local html, the SPANs response just together.
Local Image.
why different? Thanks
HTML:
<div class="row ">
<div class="span7 blue">
1
</div>
<div class="span2 red">
2
</div>
<div class="span3 green">
3
</div>
</div>
CSS:
.blue{background-color:blue;}
.red{background-color:red;}
.green{background-color:green;}
First thing is that you forgot to use container div. Correct pattern is
<div class="container">
<div class="row">
<div class="span12">
1 2 3
</div>
</div>
</div>
See corrected jsfiddle (1).
Next, if you want your page to be responsive and fit the layout to the size of the viewport you have to also include bootstrap-responsive.css. See jsfiddle (2). In your local HTML you used either both bootstrap.css and bootstrap-responsive.css or prior files merged to one CSS for reducing client-server requests number.
Your <div>s are floated in your Fiddle, but they are not floated in your local html judging from your screenshot. And since bootstrap.css floats the <div> element with a class of span, I am guessing that bootstrap.css is not loaded properly in your local html file.
A way to troubleshoot your issue is to check the Inspector (if you're using Chrome), or Firebug (if you're using Firefox). Look at the computer style of the three <div>s in your fiddle AND your local html, and compare them. They must have been styled differently because they look different on the same browser, so that's the way to start troubleshooting.
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>
Please keep in mind that I am still learning HTML/CSS.
I have been working on a website for a client and have reached the point of being finished, however the footer is driving me insane!
I need two columns of text to follow the flow of the website, but no matter what I try the left column is stuck to the very end of the page and I cant move it to the center where the other column currently sits.
The website is http://www.eplsdesign.com/Grow/index.php
Thanks in advance
Hi now you write to in your html <div id="wrapper"> now it's change into <div class="wrapper">
Now just now replace to this
<div id="footer">
<div id="wrapper">
into this
<div id="footer">
<div class="wrapper">
I have a template that I am modifying the text and pictures. It's all based on a 960grid, and the text is styled in external css sheets. When I copy one of the pieces of text (placed on the right of the site), and paste... it kicks the text to the left sidebar. What am I doing wrong? When I check the pasted text, it contains the same class, as the one that I copied from.
Thanks in advance.. I'm new to this and its giving me such a hard time!
Most likely it is contained in something like a 'right sidebar' that actually places it on the right side of the page. Try making the division directly below where the division you copy ends.
<div class="right-sidebar">
<div class="something">
</div>
</div>
Into
<div class="right-sidebar">
<div class="something">
</div>
<div class="something">
</div>
</div>