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.
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>
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 want to clip an img element from a CMS when it renders on the page so that, no matter the proportion of the XY dimensions of the original image, it looks the same as other buttons on the same page. The problem is when I build it with the following code, the Foundation grid breaks on smart phones and other mobile devices. Any suggestions?
.clipsquare {
overflow: hidden;
clip: rect(0px,60px,60px,0px);
position: absolute;
}
<div class="one columns">
<a class="th" href="http://my-url">
<div class="clipsquare"><img src="myImage.jpg" alt="title" width="90"></a></div>
</a>
</div>
class .one.columns on your div with the clipsquare image isn't correct foundation classes. In a standard 12 column layout you would do the following:
<div class="row">
<div class="large-12 columns">
<!-- Column content here -->
</div>
</div>
Further, there are two other questions I'd ask here:
Why aren't you using CSS to style your buttons? and/or...
Why aren't you letting your CMS resize your images for you?
clip has been deprecated. The new property that does the same thing and even more is called clip-path. It has few gotchas though,
AFAIK rect() doesn't work either. You need to use inset().
Dimensions need to be separated by space and not commas(,).
Webkit needs a prefix and positioning is not required.
Example,
.clipsquare {
overflow: hidden;
-webkit-clip-path: inset(0 60px 60px 0);
clip-path: inset(0 60px 60px 0);
}
For more information, on this topic, refer this excellent article on CSS Tricks,
http://css-tricks.com/clipping-masking-css/
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 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