I was using some code from this (http://webdesignerwall.com/tutorials/css-elastic-videos) site to have a nice "elastic" video container that would size with my responsive design.
I'm looking to do something similar but with images. So it resizes with the design, keeping the proportions and allow it to expand a bit outside it's current containers' margins.
I think I need to wrap the image in a div and position that somehow but I just need some advice if anyone has done something similar to this. The exact dimensions/etc are not important, just the process behind it. Thanks!
Here's an image to what I'm looking to accomplish: http://i.stack.imgur.com/84KvA.gif
How about something like this:
img {
max-width: 110%;
margin: 0 -5%;
}
Just an update, I decided to break the image out from the content, I'll add fake classes to help explain what I did...
<div class='no-longer-padded-post-element'>
<img src="now-can-span-full-width.jpg" />
<div class='content-with-padding'>
title
content
meta
etc.
</div>
</div>
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
I'm currently stuck on a problem I can't fix on my own.
I've cut a image into different layers I want to overlay on a website. Basically you can enable and disable various layers.
An example would be this:
Image of a tree without leaves
Actual leaves of the tree
Now there is a checkbox and when you click on it it'll either enable or disable the leaves.
Now I have some options to position those elements via css:
Make all images the same size and fill smaller ones with transparency. Something like this: http://i.imgur.com/GRd4eaI.png
Crop those large images into smaller ones. Here I don't know how to position them via css properly so they'll resize with the other pictures.
Create a canvas and draw the image onto it, then display that canvas.
I've currently implemented this and it works like I want. Problem though is that it'll lag when using the phone (Only renders part of the image till it finally finish after ~20 seconds to display the image properly)
I guess that would be the proper way to go but my problem here is that I don't know how to set the size of the overlaying smaller images.
Html Code:
<div class="container">
<img style="top:0%; left:0%;" src="img.png" />
<img style="top:69.56%; left:26.16%;" src="smallImage.png" />
<img src="images/null.png" id="last">
</div>
And the css code to that:
#container {
position: relative;
}
#container img:not(#last) {
position: absolute;
width: 100%;
height: 100%;
}
The null image is just there that overlaying other images work with that method.
The problem I have here is now that the smaller image will be positioned correctly but it wont shrink down to the proper size inside the div: http://i.imgur.com/4EgGIAl.png
I don't think that this would be the proper way, or easy way to do it. But I guess I'll use this then when I need to.
Also I think it's good to say that I'm working with image maps and areas. So perhaps that'll make it a bit more difficult to use then.
It would be very great if you could help me here, thanks :)
I have some divs set up to display images as links with and im trying to set up a standardized way to place an image in the div and at LEAST have it stretch the image to fit for me. I would really like to be able to adjust the cropping to fit in the square, but i realize that may be a bit tricky.
Heres what i currently have:
(tried to post image but dont have the rep just yet so heres a link http://i.stack.imgur.com/nNRD9.jpg
How would i go about doing this? I thought that using
style="height:100%; width:100%"
would work, but it still didnt stretch the photo to the maximum height, possibly due to how i have things layed out.
In the photo above, each photo is set up like:
<div class="4u 12u$(mobile)">
<article class="item">
<img src="images/resume.jpg" title="My Resume" alt="My Resume" />
<header>
<h3>My Resume</h3>
</header>
Thanks!!
A fiddle (http://jsfiddle.net/), and a pen (http://codepen.io/), are great ways to present what you are trying to do for other people. You can put your HTML, CSS, and JS, and it will render it for you, for free. Check them out.
You can use display: table, display: table-row, and display: table-cell on the div container, <div>, and the <article> respectively.
Another great solution is using a flexbox, Css Tricks have a great guide on it.
If you are interested in grids and frameworks I will suggest that you check out “Foundation”, or “Bootstrap” or the myriad of other HTML5 frameworks.
Put your code in a fiddle, so we will be able to help you out with your code. Until then, here is a suggestion
a{width:auto; display:inline-block; min-height:100px; overflow:hidden;}
img{width:100%;}
Overflow:hidden; will hide the parts of the <img/> that lies outside the bounds of <a>
Specifying width and height to .item class might fix it.
Please post the css style you have done so far so that we can look into it and suggest changes to achieve your requirement.
I have no containers, no wrappers.
I simply have a layout like so...
<body>
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
<div class="clear"></div>
<div id="footer">
</div>
What I am wanting to do is to make sure the footer always stays at the bottom of the screen whether I have content that goes pretty far down and or even not enough content to go all the way to the bottom of the screen.
As of right now, I can get either two of the ways listed above to work, but I want both to work.
Here is the CSS I have set-up for this.
html {
height: 100%;
}
body {
height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
I am aware that if I apply a min-height: 100%; to the HTML Element within the CSS Document that will go as the content goes, but if I do not have any content, per se, it will not stick at the bottom of the screen. Resolution regardless.
I have ran into this problem multiple times, and never am quite sure how to figure it out. So, some help would be much appreciated, along with some explanation.
Thank you so much everyone for your help!
use this mate, it's a really well explained and easy to follow tutorial:
http://code.google.com/p/cleanstickyfooter/
Best sticky footer ever works really really well
Quote from the site (and I agree completly):
The Difference
Google "sticky footer", I have listed below why this technique works
better than the top results from this search.
http://ryanfait.com/sticky-footer/ - This technique is similar, but
cleanStickyFooter takes it much further. The technique located here
doesn't play nicely when you want to make your footer have a width of
100%.
http://www.cssstickyfooter.com/ - This technique is one out of many I
am referring to when I say its invasive with CSS clearing hacks.
Do you want the footer to be attached to the bottom of the content whatever the amount of content, or at the bottom of the screen whatever the amount of content?
If the first, don't bother positioning it - let it go with the page flow after the content.
If the second, use position: fixed
You may need to be a little more clear. What scrolls? Header? Left? Right? Footer? Are Left and Right part of your overall content? Why is your Body positioned relative? Why do you have a "height: 100%;" for html?
You can take a look at the layout specified in this Artice by RyanFait
Cross browser, and always works :)
As the title states,
I am currently building a website, I am new to this and am trying to learn quickly. However this problem is quite frustrating as websites I have gone to do not help.
So at the moment I have an image that is of a high enough resolution that it should fill the screen easily. However when I load the HTML the image is zoomed in on the top right corner which is the only part visible. I have tried using "height" and "width" commands. I have also tried without them. I have attempted to use a <div> and <body>. However this problem still persists.
Another point is that when I use a <div> the whole screen is not filled, it still has a white border around what I believe is the <div>.
If you need to support older browsers, it's not as simple as just adding one or two properties.
Read this: http://css-tricks.com/3458-perfect-full-page-background-image/
Another point is that when I use a <div> the whole screen is not
filled, it still has a white border around what I believe is the
<div>.
You need this CSS to remove the default margin on body:
html, body {
margin: 0;
padding: 0;
}
OK, I would suggest you to make the width and height not in px but in % and secondly try setting the image using CSS
Read this Link, it will be more useful
http://css-tricks.com/3458-perfect-full-page-background-image/