I'm hoping someone can help me figure out a way to embed my Youtube code into WordPress, but keep it to the right of the screen, I assume floating, in order to have the text wrap around it.
[youtube height="208" width="350"]http://www.youtube.com/watch?v=vNJUL92y9wo[/youtube]
I've tried using:
<div style="float:left; padding:10px;">[youtube height="208" width="350"]http://www.youtube.com/watch?v=vNJUL92y9wo[/youtube]</div>
But whenever I use a "style" tag, it just disappears on the page and goes invisible.
I appreciate any help I can get. I hope I've been specific enough.
This worked for me using the [embed] tags instead of the YouTube ones:
<div style="float:right; padding:10px;">
[embed height="208" width="350"]http://www.youtube.com/watch?v=vNJUL92y9wo[/embed]
</div>
Related
I am trying to make a portfolio page and am want to use a thumbnail of one of my projects (a live page) as a link to that project. I've gotten the thumbnail made, but can't figure out how to make it a clickable link.
This is my code so far:
<div class="thumbnail-container">
<div class="thumbnail">
<figure>
<iframe src="https://codepen.io/valsburger/full/wppwmJ " scrolling="no">
</iframe>
</figure>
</div>
</div>
I've tried putting an element around the iframe in several locations. Nothing seems to be working.
Don't do that, will cause your page to be slower and frankly is just unnecessary.
Here is a photo of the page you want to:
Here is the code you should use:
<div class="thumbnail-container">
<div class="thumbnail">
<figure>
<img src="https://i.stack.imgur.com/7y4fc.jpg">
</figure>
</div>
</div>
An iframe is a "window into another world". There's could be lots of links in that window. So, it would be a bad idea if you could link the iframe itself. An iframe gets embedded, you cannot link it.
And frankly, I'm not sure WHY you'd even want to link an iframe in the first place? Seems very odd to me. Why don't you link the thumbnail itself?? That would be just a normal img element.
An ugly solution would be to place a transparent, relatively positioned <div> on top of the <iframe>, size it to cover the <iframe> and wrap it in <a> tags linking to your page.
Although I would suggest using regular <img> elements as thumbnails.
I am making a website for a class project and I'm running into an annoying issue... After my Div tags, my next heading tag <h2> is appearing beside my div gallery instead of below it.
What should I do?
I would put the h2 within a div as so:
<div style='display: block'>
<h2>what ever you want to say</h2>
</div>
I honestly can't say for sure as you didn't provide any code to work with. But this would be my best guess, if you have any questions comment :)
i have website in which i use bootstrap and new in css so there is space in right , want to remove that but some how can't do it , kindly help me . here the website link http://www.sabkideal.com/
and how to make mobile friendly website which display in google light browser because when i run the site they give error and not show the website . Kindly help me out
<div style="padding-top: 20px; margin-left: -10px;" class="container">
You have to remove margin
<div style="padding-top: 20px;" class="container">
well it entirely depends on what sort of content / html element you are working with.
This link has numerous solutions to your problem. Out of all of the solutions proposed in this link, solution 1 is my personal recommendation.
If you are working with a <p> element, which I dont think you are, you can use the CSS white space property.
If you working with the inner text of an element and are open not using CSS to fix this problem, then I would recommend using JS to clean up for the text for display.
Firstly i would like to say hello, this is my first question ever and it's been bugging me for awhile. I'm a newbie at html coding and i'd like to keep learning, it's interesting. Anyways to the question.
When i try to move a textbox over an image it gets lost behind the image like this:
<div style="background-color:#x;width:500px;height:300px;"> </div>
<p><img alt="" src="x" style="width:800px;height:401px;margin-top:-400px;margin-left:"/></p>
not sure if this helps, but try using the z-index property
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Maybe it is better to read the whole HTML tutorial on w3schools. http://www.w3schools.com/html/default.asp
If you want an image at the background of an text, set the image as a background!
This is quite strange to me... I have a small image that's a link and a text link underneath that. If I separate them with a <br/>, the text shows up formatted like a link but you cannot click it. If I use <p> </p> instead, the link works fine... I just don't want that much space in between them. I've closed both link tags so that's not the issue, and I've tested it in both Firefox and Chrome and both gave me the same issue.
Code portion:
<div id="content">
<br/><a href="#newtitles">
<img src="images/sterling.png" style="border: 1.5px; border-style:solid;"/></a>
<br/>
Fall 2011 Catalog<div style="position: relative;left:155px;bottom:20px;"><img src="images/new.png"/></div><hr/><br/>
</div>
I've determined that this is being caused by the neighboring div:
<div style="position: relative;left:155px;bottom:20px;"><img src="images/new.png"/></div>
When I take it out, the link works again for some reason.
You could always adjust the line-height property for the <p> so that there is the same amount of space as there would be with a <br />.
You can give the <p> an id, and then adjust its line-height, padding, margin, etc properties to remove some white-space.
This does not seem to be an html issue, but rather one with the layout. Can you post the relevant css? or even better, make a fiddle