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>
Related
I've searched the existing questions and found some similar issues, but the suggestions there didn't solve my problem.
Here is the issue:
We are using the Visual Editor plugin for Wordpress. My boss wanted this plugin to be used for a special promotion area in the header - he wants to display images that are clickable or have a button. I wrote some custom CSS so this plugin will do that. The issue, as you know, is you can't make a link in CSS. So for the background image, I needed a button. However in this particular case there was so much text on the image, a button would not work.
So, I wrote an ID that I could call in HTML. I made a link, called the ID, and then inside the ID I put a text indent that would push the text off the page and the image would be clickable.
The issue here is that for some reason the image would not fully load. It was cutting off height-wise. I had set width: 100%; and height: auto;, but neither of those things worked.
So, I ended up simply inserting the IMG normally, and linking it normally, but now the problem is I need it to be responsive.
I wrote a class called .responsive-image and made the width: 100%; and height: auto; but this still doesn't work.
Do I need to put the responsive image information elsewhere? Do I need to write some other class? I'm at a loss and have looked at this too long at this point.
You can see this header widget right here - 100daysofrealfood.com/carrot-top-almond-pesto-sustainable-almond-recipes/
And if you inspect you can see what I mean about it not being responsive.
Here's what I've written to insert it into the widget:
<div class="days100-background-header-widget"><div class="responsive-image"><a
href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
I have the class in there two places. Maybe that's the issue?
Here's the CSS for the main header widget class:
.days100-background-header-widget{
display: flex;
align-items: center;
justify-content: center;
}
Any feedback is really appreciated. Thanks for reading this super long question!!
The problem is not on the image itself, but on the parent <div> with the class of .days100-background-header-widget. It is set to display: flex so that div is not 100%.
If you want to center things on the screen you can use margin: 0 auto on a block element.
.days100-background-header-widget{
display: block;
margin: 0 auto;
}
.responsive-image {
width: 100%;
height: auto;
}
<div class="days100-background-header-widget">
<div class="responsive-image">
<a href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
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.
I have designed a web page which is utilizing full screen in resolution 1366*768.
Now if I am viewing my webpage on some other resolution all the div tags overlap..
that thing I corrected by keeping all my webpage in a table..
but still I am getting a scroll in lower resolutions..
Can we do something like decreasing the font and image sizes based on resolution..
Table based layouts are usually a really bad idea. The best way to make a webpage look nice for different resolutions is, to use div with a width property in percentage. A small example would be:
CSS:
#main{
width: 70%;
position: absolute;
left: 25%;
top:0px;
}
#left{
position: absolute;
left: 0px;
width:20%
}
img{
width: 100%;
}
HTML:
<div id="left">
<p>
This is the left coulmn.<br />
This is the left coulmn.<br />
<img id="picture1" src="pic.png" />
</p>
</div>
<div id="main">
<p>
This is the main div with a lot of text.
This is the main div with a lot of text.
This is the main div with a lot of text.
This is the main div with a lot of text.
This is the main div with a lot of text.
</p>
</div>
[using float instead of absolute position is also a common solution, to archive different columns]
Two answer you're question about decresing the fon size based on resolution: This would be possible, using Javascript (Get the resolution, changing the image size dynamically). But it would be abusing web technoligies - so just go with CSS percentage properties. If you need help in your particular case, please post the code of your basic page structure. Also google for "CSS 2/3 column layout".
EDIT: shorted example code + insert a img tag
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.