I can't float a div - html

I have an adsense block that I'm adding to wordpress I'm using a plugin to add the shortcode.
I want it to wrap the text around. So I add the code:
<div style="float:left;">
ADSENSE CODE
</div>'
But it just positions it to the left with the text underneath.
On my other blog, this works just fine. But on a new blog that I'm making it doesn't work at all. I'm pulling my hair out trying to figure out why!
I changed the theme to 2010, 2011 and 2012 and it's always the same. But as I say, on my other blog it works just fine!
I've tried different browsers, cleared cache, etc.

It looks like a typo:
- <div style="left;">
+ <div style="float:left;">
or even better use classes and ids to set it up in a stylesheet that you can use on other pages as well.
<style>
.ads{float:left;}
</style>
...
<div class="ads">

Related

Center DIV in "Miniport" html5 template

I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!

selecting deep elements in d3

So for my question you can refer to udacity.com main page.
Im trying to access this text -"The Udacity Difference" somewhere on the middle of the page.
I tried this :
d3.select("div.banner-content.h2.h-slim")
d3.select("div.banner-content.h-slim")
None of the above is working. So I tried looking in dev-tools element section for this page.
Then I could hover and see that :
div.banner-content has further
{div.container
{div.row
{div.col-xs-12 text-center
{h2.h-slim}}}}
Then I thought ok I shoud try if I can get the "container" atleast, but then even this
d3.select("div.banner-content.div.container")
OR
d3.select("div.banner-content.container")
doesnt work !!!!
Wheres the fault in logic ?
You can find nested elements using d3's chained syntax as shown below.
HTML:
<div class="banner-content">
<div class="container">
<h2 class="h-slim">Header</h2>
</div>
</div>
Code:
d3.select("div.banner-content").select("div.container").select("h2.h-slim")
EDIT: No need to type such long syntax. Just need to separate the selectors using a space.
d3.select("div.banner-content div.container h2.h-slim")
Code below will also give you the same results in this case. You can specifically add tags if necessary.
d3.select("div.banner-content .container .h-slim")

How to open html page directly to div id location?

I am using tables to open 3 websites on one page - works fine.
I would like those pages to jump into a specific location when loaded but it does not seems to work.
I tried jumping to the div id location using:
https://example.com/home.html#div id
sometimes it works and sometimes not... what am I missing? Is this the best way to do it?
Please advice,
You need to add an tag as the first element in that div. And then navigating to https://example.com/home.html#blah will bring you there
Do something like this:
http://jsfiddle.net/w9sNc/6/
go to second div
<div id="first"></div>
<div id="second">
<a name="blah"></a>
</div>

Expression Engine tags causing DIV to disappear!? How can I solve this?

I am using Expression Engine to develop a site. I have created the page I want in a template file and now I am making use of EE's tags to make the content dynamic.
{exp:channel:entries channel="test123"}
{test123}
<div class="panel" style="margin-bottom:10px;">
<div class="paneldiv" style="background-color: red;">
hello there
</div>
</div>
{/test123}
{/exp:channel:entries}
The above code makes my DIV disappear. But if I remove the tags, the DIV shows up.
Its also worth noting that when the tags are in and I click "view rendered template" the DIV shows up.
Very strange! I've been bashing my head all day!
I believe you are using the {test123} tag incorrectly. First, I'm assuming that {test123} refers to a Channel Field within the 'test123' Channel. If so, then you simply need to remove the {/test123} ending tag, as data field tags are usually single-variable tags.
The reason your div content is disappearing is that EE is failing to process {test123} as a variable pair, and therefore it doesn't show the content within.

How can I have 2 CKEditor instances on the same line without causing problems?

I have a section of HTML that I would like to be editable with CKEditor but in 2 different pieces.
Ideally I would want my HTML to look like:
<div class="page-header">
<h1>
<span>Heading</span>
<small>Subheading</small>
</h1>
</div>
where the subheading would be displayed on the same line as the heading and each are editable separately. This looks fine without CKEditor enabled.
One attempt was to hack the editor to enable span and small tags: (Enable CKEditor4 inline on span and other inline tags)
CKEDITOR.disableAutoInline = true;
CKEDITOR.dtd.$editable.span = 1;
CKEDITOR.dtd.$editable.small = 1;
$("[data-allowed-formating='all']").ckeditor();
http://jsfiddle.net/OzzieOrca/PCH9z/1/
This mostly works but if you double click the Header (to select everything) and start typing, it deletes the subheading and you can't get it back until you refresh the page
I tried using <div style="display: inline"> instead of the small and span but when CKEditor is instantiated, it changes the styling of the div and the subheader drops below the header.
I will try see if there is anything else I can do with CKEditor or see if I have any other HTML layout or styling ideas but any suggestions would be appreciated.
(I had the same issue with TinyMCE so I tried CKEditor and I think I like it better so I decided to keep using it but I still have this same problem)
Edit:
I finally tried this:
<div class="page-header">
<h1 class="pull-left">Header</h1>
<h1 class="pull-left">
<small class="padding-left">Subheader</small>
</h1>
<div class="clearfix"></div>
</div>
but then realized that this wouldn't wrap the subheader but just moves it to a new line if it is too long. I submitted this bug report: http://www.tinymce.com/develop/bugtracker_view.php?id=6354 which includes this example of what I want to do and what is not working http://jsfiddle.net/OzzieOrca/jKmZ7/
First, make sure the editor doesn't attach itself to the <h1> element.
If that works correctly, then I suggest to wrap the elements that you want to edit in a block element during edit and restore the DOM when editing stops.
I don't know why CKEeditor might distinguish between inline and block elements but it's quite possible that it never occurred to the author that someone might want to edit only part of a block.