I have an animated canvas and i am trying to overlay a responsive web template on top of it, however the web template just sits at the bottom of the canvas and not on top of it. I have tried to change the absolute layout but that then removes the responsive aspect of the website.
I have also tried to add a zindex but again that didn't make any difference, any advice or nudge in the right direction would be appreciated.
A link to the template is below
http://www.redstardigitalmedia.co.uk/blue/index.html
Thanks
I modified your page using chrome developper tool, I've added to your canvas element:
<canvas id="world" width="1600" height="779" style="
z-index: -1;
position: absolute;">
and to your page :
<div class="gridContainer clearfix" style="
position: absolute;
z-index: 1;">
And it works fine (although the canvas animation fluency could be improved, do you use requestAnimationframe ?)
Related
I just got into Angular Material! Now I created a project and I'm trying to stack GridLists on each other. (Let's say for a grid based game. Tiled background with enemy tiles on top.)
The current hierarchy is:
<custom-element style="position: relative; z-index: 0;">
<mat-grid-list cols="3" rowHeight="1:1" gutterSize="0px" style="position: relative; z-index:2">
<mat-grid-title *ngFor="/* stuff generating an image */">
<img src="/* source dependent on the ngFor */"/>
</mat-grid-title>
</mat-grid-list>
<mat-grid-list cols="3" rowHeight="1:1" gutterSize="0px" style="position: relative; z-index:3">
<mat-grid-title *ngFor="/* stuff generating an image */">
<img src="/* source dependent on the ngFor */"/>
</mat-grid-title>
</mat-grid-list>
</custom-element>
The custom element is inside a flex layout (row, space-around, every child has flex-grow: 1)
Though they are still below each other, not stacked. :/
How do I fix that?
(Btw I noticed a gutter size of 0px doesn't work perfectly. There's still some background color shining through between some tiles. I think it has to do with anti-aliasing but I have no idea how to disable it for the grid or something.)
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.
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.
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>
I have two images that I want to be positioned directly on top of each other. This HTML is generated by a script every so often so I have included the CSS directly within the HTML itself.
<div style="text-align:center">
<img id="background"
style="position: absolute; z-index: 1; "
src="background.png"/>
<img id="foreground"
style="position: relative; z-index: 10; "
src="foreground.png" border="0" usemap="#map"/>
</div>
It works perfectly, except in Chrome.
In firefox and Internet explorer it works 100% of the time, I can sit and hit refresh and it is fine. In Chrome sometimes on page load or refresh the background image appears to be shifted 50% to the right?
I just did a quick test and 5/10 times (half of the time) it would appear shifted to the right on a refresh.
Does anyone have any ideas what could be causing this?
Assuming that your foreground and background images are the same size, it seems as if you are trying to do this:
<img id="foreground" style="margin-left:auto; margin-right:auto; background:url("background.png");" src="foreground.png" usemap="#map"/>
The margin-left:auto; margin-right:auto; will center the image within its parent element.