I have the following HTML code in which the images can move.
<div id="templatemo_slider">
<!-- This is the container for the carousel. -->
<div id = "carousel1" style="width:960px; height:280px;background:none;overflow:scroll; margin-top: 20px">
<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
<!-- You can place links around these images -->
<img class="cloudcarousel" src="images/slider/02.jpg" alt="CSS Templates 2" title="Website Templates 2" />
<img class="cloudcarousel" src="images/slider/02.jpg" alt="CSS Templates 2" title="Website Templates 2" />
<img class="cloudcarousel" src="images/slider/03.jpg" alt="CSS Templates 3" title="Website Templates 3" />
<img class="cloudcarousel" src="images/slider/04.jpg" alt="CSS Templates 4" title="Website Templates 4" />
<img class="cloudcarousel" src="images/slider/05.jpg" alt="Flash Templates 1" title="Flash Templates 1" />
</div>
<!-- Define left and right buttons. -->
<center>
<input id="slider-left-but" type="button" value="" />
<input id="slider-right-but" type="button" value="" />
</center>
</div>
For screenshot link actual :
I want to put webpages instead of images.
For that I have tried using
<iframe class="cloudcarousel" src="http://www.bookmyshow.com" width = "800px" height ="1000px"></iframe></a>
It shows the image, but is not properly aligned, after putting width in iframe the frame is moving to left and inside the page bookmyshow is coming incomplete"
Screenshot Link error:
Related
Why isn't my image showing up with the url I'm using? The url is valid and I used the same method to insert other images and it worked. First code is the url that isn't showing up and the other one are the images that are showing up. I have also included the images of what appears on the webpage for the unresponsive image as well as the responsive one.
<div>
<img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
<h1 id="myname">John Smith</h1>
<h3>Web developer</h3>
<p>{{ pause and ponder }}</p>
</div>
</div class="intro">
<div class="project-grid">
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
</div>
I don't understand what the issue I did the exact same thing for both but only the second group of images is showing up on my webpage.
You've got special character quote marks instead of regular ones surrounding the src attribute.
Change the ” character to ". Most likely it was converted in something like Word or Outlook.
Fixed HTML:
<img src="https://via.placeholder.com/150/0000FF/808080" alt="Profile Pic" />
You used "https://...." for the profile picture, but if your development server is on "http://...", then the profile picture won't show up due to cross-protocol restrictions.
Change
<img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
to
<img src=”http://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
I want to change the contents of a div using a button click and in another click I want to bring back the old contenns to div I am using a image for button...
My div code is below
<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
<div class="pic-row" >
<img src="images/A.Png" />
<img src="images/B.Png" />
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />
<img src="images/I.Png" />
<img src="images/J.Png" />
<img src="images/K.Png" />
<img src="images/L.Png" />
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />
<img src="images/W.Png" />
<img src="images/X.Png" />
<img src="images/Y.Png" />
<img src="images/Z.Png" />
</div>
</div>
<img style="position:absolute; left: 272.5px; top: 647px; width: 171px; height: 122.5px;" src="images/Btn_Lower.png" id="image1" />
Please help me to solve this issue
I don't want to confuse you by solving your problem, instead I would like to give you a short and simple example.
You can't achieve it by only using HTML you need javascript. So here is a way.
1) When you say content, it is referred as innerHTML in javascript.
2) I think you know about onclick, it is called click event. Similar to that you have a lots of different events in javascript for keypress, doubleclick, etc.,
3) Hope you know ID, called as unique selector. Other selector like class and you can HTML5 data-attributes.
4) To select an element, in JS you can use different methods like,
document.getElementById // select element based on Unique ID
document.getElementsByClassName // select element based on class
document.getElementsByTagName // select element based on Tag name
If you're insterested to learn more about javascript refers Mozilla Developers Network
Here is the shot example I would like to present to you.
HTML:
<div id="divd">First</div>
<button onclick='changeMe()'>Click It</button>
JS:
function changeMe() {
var div = document.getElementById('divd').innerHTML;
if (div === 'First') {
document.getElementById('divd').innerHTML = "Second";
} else {
document.getElementById('divd').innerHTML = "First";
}
}
Demo
I have an instance of CKEditor running to edit small parts of a website. The original HTML is:
<div class="slide slideleft">
<a href="#" class="slidelefta">
<img src="img/left.png" alt="previous" />
</a>
</div>
<div class="slide slidemid noauto" style="height: auto; text-align: center;">
<a href="#" class="sliderighta">
<img src="img/main_item.png" alt="item" />
</a>
</div>
<div class="slide slideright">
<a href="#" class="sliderighta">
<img src="img/right.png" alt="next" />
</a>
</div>
now, when I load it into CKEdit (inside a <textarea>, all correctly encoded with PHP's htmlspecialchars() method), it replaces all my carefully crafted DIVs and styles with the following:
<p><img alt="previous" src="img/left.png" /></p>
<p><img alt="burg.ring1" src="img/main_item.png" /></p>
<p><img alt="next" src="img/right.png" /></p>
which of course totally ruins the page's layout. Can CKEditor somehow be set to not do that?
Thank you!
Since CKEditor 4.1 the Advanced Content Filter feature is enabled. You need to configure it in order to have your HTML passing the validation. See my previous answer here: CKEditor strips inline attributes.
code below renders search form in below logo:
LOGO IMAGE
Logon or register
Search:
How to chage it so that Login/Search is rendered after logo in same row:
Logon or register
LOGO IMAGE
Search:
site.master contains:
<div id="header" style="margin: 0; background-color: white; width: 100%">
<a href="http://mysite.com">
<img alt='' style='width:30%' src='/Store/Logo' />
</a>
<div >
<p class="accBoxUnloggedOther">
Logon
or <a href="/register">
Register</a></p>
<br />
<form action="/Store/Search" style="margin:0">
<input class="searchfield" id="Search" />
<input class="button blue bigrounded" type="submit" value="Search... " />
</form>
</div>
....
Use style="float:right;" on the inner div. But you should try to avoid using inline CSS. It leads to a maintenance nightmare.
jsFiddle
You could also put the elements you want in the same line in a <div> tag and the image in another <div>
I am trying to put two banners on top of a navigation bar with everything nicely centered. I can get the two banners to nicely sit by one another but when I make the browser window smaller the first banner goes on top of the second!
Is there a code where I can prevent this? If so please let me know.
This is what I have so far:
<center>
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
<BR>
You can set a min-width on the container of the banners.
Edit based on your comment:
<center> <!-- *shudder* -->
<div style="min-width: 860px;"> <!-- inline only for example purposes -->
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
</div> <!-- ditch the BR -->
...
</center>