Loading a HTML Page inside a DIV - css

Hi I have a div question,
on my home page I have a menu its in a div. The body has another div. Can I put or somehow call a specific div content from another page into the div of the homepage body when I call for it from my menu. or how can I put the other page inside the body div with out using Iframes. For example:
<html>
<body>
<div>content from the another_page.html div.</div>
or
<div>another_page.html inside here</div>
</body>
Can this be done? Thank you in advance.

You can use jQuery for solving this.
Please refer to this for loading div from another page inside div:
Load content of a div on another page
And for loading another page inside div:
loading html page inside div

You have a number of ways to do this, as commented already, ajax is probably what is used in most cases. However it can also be done using PHP, jQuery, and an HTML object.
Link to similar question: here

You could try this and style it with css
<body>
<iframe src="page1.html">
</iframe>
<iframe src="page2.html">
</iframe>
</body>

Related

CSS center is working on two pages but not the other

The CSS centering works on this page: http://www.paragondictionary.info/A.html
But not on this page: http://www.paragondictionary.info/C.html
Both HTML pages are using the same CSS link so I don't know why the centering is not working on one page. Any help is appreciated.
The reason it's not working on the second one is because you forgot to add the
<div class="center">
</div>
that surrounds the definition list in the body
If you look at the first page in view source, you can see on line 20 there's a class called
.center
That is used to presumably, center the content.
you have forgotten to use {div class="center"} in the second page.

Wordpress div class container, is it special in wordpress?

Hiall,
could someone please tell me, is the
<div class="container">
class/element some kind of special class for wordpress???
This div is currently wrapping all the content on my site and I am trying to put html code outside of this div, but no matter what I do it won’t let me and it automatically puts everything inside this div.
I’m looking at the file that contains the ending
</body>
</html>
tags for the document and when I try to put code right before the end like
<div class=“myotherrclass”></div>
</body>
</html>
When I load the page in the browser the last tag before , it automatically always puts the closing tag for the container div! eg.
<div class=“myotherrclass”></div>
</div> <!— container class closing div, automatically appears from no where! —>
</body>
</html>
Any help trying to understand what is happening would be great
I started with the Underscores.me starter theme and just deleted the "container" div from both header.php (the opening) and footer.php (the closing). And...nothing bad happened! Will report back if something does, but right now I'm deleting div tags not being used in order to make sense of what's going on. This one's gone!

How to wrap image tag with anchor tag to make it clickable?

Hy, I have the following situation:
I am trying to change the design of my feedly-index page. (I can not change the HTML)
And I am facing a problem I coulnd't solve the past two hours.
In the HTML there are some div elements with random IDs and '_content' at the end.
Within these div's there is an img tag - what I want to do is to wrap this img-tag with an anchor-tag to make it clickable.
Situation:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
What I want as outcome:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<a href='LINK_TO_AN_IMAGE'>
<img src='LINK_TO_AN_IMAGE'>
</a>
</div>
Is this even possible with CSS?
I could make it work with JavaScript, but the div's are loaded dynamically via AJAX:/
So the JavaScript Script would just run for the current div's but not the one which are loaded dynamically.
It's not possible with just CSS because CSS is meant or styling the page and not or adding dynamic elements to the page.
But we can do it using JS.
As you are creating those elements using ajax call. On the success callback of the ajax call, you can wrap the image with a tags.
for example:
$.ajax({
url : "/make.php"
}).done(function() {
var images = $("div img");
$.each(images, function() {
$(this).replaceWith($("<a href=''>"+this.outerHTML+"</a>")); //construct url dynamically via some variable
});
});
DEMO
If you are not able to edit the html this could be tricky.
It can't be done with pure css... css can't create links.. I mean it could be possible with js i suppose, besides that if the ids are random it makes it even more difficult.
--edit additional--
If you could wrap the whole area that holds the divs inside a div then you might have a chance with jquery...
e.g:
<div id="holderdiv">
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
</div>
You can then use jquery to make all instances of #holderdiv > div > img a link to the image path?

Why is my footer not aligned at center on pages without a sidebar?

My footer isn't aligned at the center on pages without a sidebar. On pages with a sidebar, the alignment is perfectly fine. Why is this happening? Can anyone help please?
Here's a link to the site I'm working on: http://www.thesuperwomanlifestyle.com/
The home page has no sidebar so the footer isn't aligned at the center. If you check other pages that have a sidebar, the alignment is alright.
Please help!
Fix your code errors, like the missing closing </p> and </div> tags. Those errors will throw the footer out of alignment. See [Invalid] Markup Validation of thesuperwomanlifestyle.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code. Find the source in index.php and footer.php, but that depends on your theme. Start fixing the code errors and revalidate.
And fix the BOM file type of your header.php and index.php files, as per the warning in the validation report. Change them to unicode no BOM.
I have checked your code by using view source page for both home page and inner pages. I found that in home page the is inside and in inner pages the is outside .
So check your PHP template file for inner pages and close the div of "insidewrap" after footer's div.
Hope it solves your problem.
There are several reasons, in your footer you have diferent code in the diferent sections, and there are a image than not loads. Due to you use IDs for the DIVs, should be a good solution make the DIVs floating in the CSS code.
<div id='footer_left'>
<img src='http://www.christiflynn.com/wp-content/uploads/2014/03/Take-the-Lead3.jpg' />
</div>
<div id='footer_optin'>
<script type="text/javascript" src="//www1.moon-ray.com/v2.4/include/formEditor/genbootstrap.php?method=iframe&uid=p2c9303f30&version=1"></script>
</div>
#footer_left, footer_optin {
float:left;
width: 10em;
}
You might need to create another footer-page.php template. Then, rearrange another footer. Call the footer template by using get_footer('page');
Of course, when creating this, you will need to create a new template for footer so you can move it to the left.
If it's possible, we'd like to see your code for footer and the page code, please, so we can solve the problem.

Need help to adjust css for div class

I pasted this code into my header.php file to get an opt-in button:
<div class="createsend-button" style="height:27px;display:inline-block;"data-listid="r/72/191/0E3/389738A3FFEDFFA8">
</div>
<script type="text/javascript">....</script>
I can't seem to control the placement - if I add .createsend-button to css there's no effect. When I look at this in Firebug it says this div class is actually .subscribe-button-inner but customizing that class in css has no effect either.
What am I missing here?
My site is at : http://tinyurl.com/c5eujcj
The iframe for the createsend button has inline CSS including position: absolute. If createsend offers an option to change the button, that would be your best option. If not, use this:
<div class="applyStylesToThis">
<div class="createsend-button" style="height:27px;display:inline-block;" data-listid="r/72/191/0E3/389738A3FFEDFFA8"></div>
</div>

Resources