Is it possible to create a html banner ad with inline css animations? I just need a div with my code that they will insert in their page, so the animation and styles need to be inline. i just need to animate an image of a button into the div so it looks like it's sliding in. I'm using relative positioning to layout the elements so far. Is this possible? Here is my code in the layout that I will need in the end. I need the div "button" to animate up from the bottom and land at bottom: 30px like it is now.
<div style="width:160px; height:600px; text-align:center; position: relative;">
<img src="images/Agent-Ad_Crush-160x600_b_110716.jpg" alt="Broadview Networks Generate New Leads And Crush The End Of The Year!" width="160" height="600" border="0" />
<div class="words" alt="" width="160" height="180"style="position: absolute; bottom: 150px; left: 11px;">
<img src="images/Agent-Ad_Crush-160x600_b_110716-words.jpg">
</div>
<div class="button" alt="" width="116" height="32"style="position: absolute; bottom: 30px; left: 22px;">
<img src="images/Agent-Ad_Crush-160x600_b_110716-button.jpg">
</div>
</div>
If you're using just HTML and inline CSS then the answer is no. Specifically, #keyframes can't be defined in inline styles. They can be defined in a <style> tag (as #Ryan Gee points out) but <style> tags have to be in the head, which rules it out for a banner ad.
Now, just to complicate things, at one point HTML5 introduced a scoped attribute that would let you use the <style> tag in the body, but support has since been dropped from most of the browsers.
If someone knows of an ingenious workaround I'd be very interested and impressed!
One option is to just use an animated .gif, if you're not depending on the user to click before the animation begins.
That way you wouldn't have all that overhead of html.
Another option would be, depending on their access on their host, to provide them with a fully qualified web page with the animation, that they can upload to their host. (Or, you can host the page)
Then, the div you provide along with the page, would contain an iframe that links to the web page, that renders the animation. This option might not be so responsive in terms of ui sizing.
You could use the <style> tag, but it's not advisable. See here for an explanation.
Related
Until now I got a webpage with a navigation bar, which is responsible to screensize, all is fine until this point.
But now it becomes a bit strange for me, I want to add a search icon (loupe) in the bottom left hand corner. My idea was to use the "aside" element (or "aside" section?) which is supported in html5, but if I put my icon in this aside element it is not visible. I hope you can help me. here some html code:
HERE IS SOME OTHER CODE WHICH WORKS PERFECT
.
.
.
<!-- Search Icon beginn -->
<aside>
<div class="searchicon">
<img src="img/Searchicon.png" alt="Search" height="30px" width="30px">
</div>
</aside>
<!-- Search Icon end -->
</body>
My plan is that the search icon is always on the left of the webpage (kind of a sidebar), I don't want to cover up the text which is at the site later on.
Thanks to you!
Try changing the z-index in css which will basically move an HTML element forward/backward :
.searchicon {
z-index: 2;
}
/*
Set the value to negative if you want the element to move backwards.
*/
The positioning of HTML elements is controlled in your CSS. In your case this is the searchicon class. You haven't provided the CSS but it might look something like this:
.searchicon {
position: fixed;
left: 150px;
bottom: 150px;
z-index: 2;
}
As a note, the aside element may not be the "most semantic" option based on what you've described. The HTML5 aside is intended to contain content that doesn't directly relate to the pages primary content. For example a sidebar containing related articles.
I have a div that is width 100%: Inside that div I am trying to float the image to the right.
<div class="card-panel valign-wrapper "
style="height: 50px; width: 100%; position: fixed; top: 290px;
background: white; z-index:3; ">
<h5 class="valign" class="right-align">Beer Menu</h5>
<img id = "moreInfo" style="vertical-align: middle; float: right" src="img/more.png"
height="30" width="30">
</div>
I have been playing with chrome inspect element trying a bunch of different ways to float the image to the right end of the screen and leave the text to the left but not working.
Here is an image with surrounding code:
Couple suggestions:
Use a separate CSS file. It will be easier to keep track of your CSS. Different rules might be taking precedence and it will be more clear if you use a separate file. It will also be easier to debug your CSS issue.
I am not sure why you have your with Beer Menu as a part of the class "right-align". Arent you aligning this left and trying to align the image of the three dots right? This is a little confusing.
You can always try the "right:0px;" CSS rule. I cant help you code something that works perfectly without being able to try it myself but that could solve your problem. You could also give "position:absolute;" a shot
Just be sure to clean up your CSS and it will all become easier.
EDIT:
Its not the best but adding this to your image worked for me:
right: 0px;
top: 10px;
position: absolute;
by just looking at that screenshot, you might try to give your img a position of relative. that generally fixes float problems. but don't forget to clearfix your parent element so the div doesn't collapse on itself.
I would also recommend not positioning everything as fixed, usually run into responsive issues with that unless initially positioned by JS, if so, my bad.
but with float issues, its usually positioning that screws it up.
good luck!
This is what I did, and it worked in my browser:
<h5 class="valign right-align" style="float:left">Beer Menu</h5>
While rest of the code remains the same.
Try putting them in a table and align the column content to right. Something like
<table style="width">
<tr>
<td><h5>Beer Menu</h5></td>
<td align="right"><img /></td>
</tr>
I have a banner which is scrolling multiple images using MD-Slider module (JCarousel). The website is responsive hence there would be 3 different layouts of any image inside the banner:
Normal Resolution:
Layout for iPads and bigger tablets:
Layout for Mobile:
Currently I have used temporary images in the banner in the following fashion:
banner1.jpg
banner1-iPad.jpg
banner1-mobile.jpg
So, "banner1" is the key here. This is how my div looks for normal layout:
<div class="md-slide-item slide-1" data-timeout="8000" data-thumb="http://xxxxxxxxxx.com/TestWebsite/sites/default/files/styles/md_slider_1_thumb/public/banner1.jpg?itok=y4RT2g4r" style="height: 268px; left: 0px; top: 0px; opacity: 1; display: block;">
<div class="md-mainimg">
<img class = "mdslider-img-tag" src="http://xxxxxxxxxx.com/TestWebsite/sites/default/files/banner1.jpg" alt="" style="width: 100%; height: auto; top: -59.3653846153846px; left: 0px;">
</div>
<div class="md-objects" style="font-size: 99%;">
</div>
</div>
I can use the class mdslider-img-tag to replace the image in CSS using some of the literature mentioned below:
1.https://css-tricks.com/replace-the-image-in-an-img-with-css/
2.http://www.emailonacid.com/blog/details/C13/a_slick_new_image_swapping_technique_for_responsive_emails
However, my problem lies in getting the key "banner1" inside the css before appending -iPad or -mobile part of the text to same so that the right image for the layout is displayed.
Is there an elegant way to achieve this?
Take a look at Interchange by Zurb, this works independent of Foundation themes but works best with them.
http://foundation.zurb.com/docs/components/interchange.html
While not a CSS solution I think this would actually be your best solution rather than creating a less than ideal CSS hack, CSS just isn't able to do what you want yet.
I have tried using the code provided at http://jsfiddle.net/heera/X3b5g/1/, and when I input my own variable names/images in the fiddle it works fine.
But I then put the CSS code into my child theme style.css and the HTML in my page and the images show one on top of the other, not side by side as I need. I'm not using variables that could be clashing and I'm driving myself insane with this - it is something in Wordpress that stops this from working.
.my-side-by-side {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 50px;
}
#my-button-centred {
text-align:center;
}
HTML:
<div id="my-button-centred">
<a href=""https://itunes.apple.com/us/app/belize-travel-guide-paid/id792977226?mt=8">
<img class="my-side-by-side" border="0" alt="" src="http://hotguidebelize.com/wp-content/uploads/apple-store.png" alt="" /></a>
<a href="https://play.google.com/store/apps/details?id=com.app_belizeguide.layout">
<img class="my-side-by-side" border="0" alt="" src="http://hotguidebelize.com/wp-content/uploads/google-store.png"/></a>
</div>
If I take out the div id and just use the div class, I do get the buttons side by side, but then they are not centred. What am I doing wrong?
Your code is working perfectly in fiddle: right here
Can you check the source code while testing it, and make sure no other styles overwriting it?,
if so try adding !important in the end of overwrited styles
Whenever you use a child theme you have to be mindful of any CSS from the parent theme. You may have to override some things from the parent theme.
some examples might be
margins
padding
position
display
You will have to inspect the element to see every CSS value that is being set that is not in your child theme and find which one(s) are causing it to display improperly.
In order to teach the different components of a website, I have a giant image (made in photoshop) with a bunch of boxes labeled header, sidebar, content, footer etc all in one image. Using absolutely positioned divs with images inside, I have made it so that when moused over certain parts of the image, like for example the logo, a box appears with information about that specific part of the website and this box appears on top of the logo.
The problem is that this doesn't seem to work in internet explorer (the images never appear) and the images are out of place on a Mac in Safari. The feature I am describing can be seen here
and some samples from my code are below. Is there a better way I can accomplish this task, or solve the problem of the images not appearing in internet explorer and being positioned differently on Macs in Safari?
HTML
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" width="326" height="109" alt="Logo Information"></div>
<div class="look" id="look2"><img src="images/extensive_look/header_info.jpg" width="236" height="74" alt="Header Information"></div>
<img src="images/extensive_look/website_layout.jpg" width="1200" height="890" alt="Website Layout">
CSS
.look:hover img{
visibility:visible;
}
.look {
position: absolute;
left: 320px;
top: 328px;
}
#look1 {
top:211px;
left:53px;
}
#look2 {
top: 205px;
left: 487px;
}
#look3 {
top: 282px;
left: 403px;
Something like this to complement the comment:
<div>
<h1 align="center">Extensive Look at a Website</h1><p style="width:800px;margin:0 auto;">As you can see in step 1 of the 7 steps, web design begins with an understanding of a website. Below is a model website featuring the different components of a website. As you scroll, make sure to mouse over the different components to get information on that component. It is important to note that while these are common parts of most websites, not every website will have every component.</p>
<p style="width:800px;margin:0 auto;"> </p>
</div>
<div class="content" style="position:relative;width:1200px;height:890px;background-image:url('images/extensive_look/website_layout.jpg');">
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" alt="Logo Information" height="109" width="326"></div>
rest of look things here.
</div>