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>
Related
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
This is an easy question. But what I want to know is: Is there a way to delete a div without removing its content USING bootstrap? I can also refactor the question to: Is there a way to delete a div CLASS dynamically with Bootstrap?
My code is simple:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
GOOGLE MAP
</div>
<div class="col-md-2"></div>
</div>
</div>
I know there already exists a way to make it visible and or hide it (hidden-phone ..), but what I want to do is actually remove the container, the row and the cols and leave the google map to fill the whole width.
What I have right now is:
<div class="container hidden-phone">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="googleMap"> ... </div>
</div>
<div class="col-md-2"></div>
</div>
</div>
And then, right after that, I add the div of the google map again. But instead of hidden-phone, now:
<div class="googleMap visible-phone"> ... </div>
This way, when you switch to a phone, the container and separations of the map with the screen are none.
This is the easiest way, but it seems a little unpractical, because maybe I don't see one, but it is there, so I'm downloading the map into the client twice, I believe that is not clever.
I could always use JavaScript(jQuery) to listen to the event of resizing and remove it my self.. That is not a problem at all, but maybe bootstrap has a build-in functionality already, something like a data attribute like "data-hidden-phone-class='someClass'", or maybe a class that hides some classes when resizing like: "hidden-classes-phone" this way when the screen resizes to a phone one, boostrap would hide all the classes of that element? Or something.
I know the names for attributes and classes are not attractive, but is for the purpose of the question.
I hope I made myself clear enough, let me know if you don't understand something, thanks!
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 the following html structure:
<div class="decorator">
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="readmore"><a></a></div>
</div>
I am trying to select the LAST EC_MyICHP_Item, by using last-child, but in vain. (both CSS and jQuery) Could you help me?
Thanks.
You need to use :last-child at the end of the selector.
div.EC_MyICHP_Item:last-child
http://reference.sitepoint.com/css/pseudoclass-lastchild
Example: http://jsfiddle.net/jasongennaro/zrufd/
Please note: this will not work in earlier versions of IE.
EDIT
As per the comment about the last div being added and it interfering. You're right. It does cause :last-child to choke... at least in Chrome where I tested it.
If your HTML structure remains the same, that is, always three div.EC_MyICHP_Item, you could do this
.EC_MyICHP_Item:nth-child(3)
Updated Example: http://jsfiddle.net/jasongennaro/zrufd/1/
EDIT #2
unfortunately the number of EC_MyICHP_Item div's varies
In that case, I would use jQuery:
$('.EC_MyICHP_Item:last')
Further updated example: http://jsfiddle.net/zrufd/2/
.EC_MyICHP_Item:last-child should work well.
It's important to realize that E:last-child means "an E element, which is a last child", not "last child of E element".
I added the ID for merely testing purposes.
But use :last.
http://jsfiddle.net/aDbcW/1/
.EC_MyICHP_Item:last-child would only work if the div is the last child of its parent div. Since you have div.readmore as the last child of the parent, your selector wouldn't work. You need to use .EC_MyICHP_Item:last-of-type instead.
Edit: in jQuery this would translate to .EC_MyICHP_Item:last.
I have a page of things that looks like this (and yes, I have included the scriptaculous javascripts, because the toggle actually does work):
<html>
<div id="container">
<div id="thing1" class="thing" >
<p>Some visible stuff 1</p>More1
<div id="extra1" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
<div id="thing2" class="thing">
<p>Some visible stuff 2</p>More2
<div id="extra2" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
<!-- 96 more entities of class="thing" -->
<div id="thing99" class="thing">
<p>Some visible stuff 99</p>More99
<div id="extra99" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
</div>
</html>
When I click on the "More99" link at id="thing99" which is way down at the bottom of the page, , the div at id="extra99" appears as it should, but the page then the page automatically scrolls back to the top.
When I clck the "More1" link at the top, it stays focused at the top.
Is there anyway I can keep the page from scrolling back to the top and/or to refocus it back to where I just clicked? I don't want to scroll back down and find out which one I just made visible.
Try return false; after your Effect.toggle(); calls.
More99
This isn't the ideal way of handling this, but it should fix your immediate problem. Ideally, you would remove all of your Javascript from your HTML, and do away with all onclick attributes, handling everything from a remote block of Javascript.
Jonathan & Tatu started me on the right track. I tried "return false", and it worked some of the time.
With the "return false" concept in hand, I searched GOogle and stumbled on this page for hrefs and return false.
That "#" tag kept returning me to the top of the page. I tried href="" without the "return false", and it worked as desired, but it randomly reloaded the page as well.
The following solution gave me what I wanted consistently:
More99
Everything worked as desired, and no random page reloads.