CSS Image within div will not change sizes - html

I have two divs on my page, and between the two div's I have an image. Let me further explain...
Div 1 - This is the page's container.
Div 2 - Holds a few lines of text
Image - Just an ordinary jpeg image I want to format.
Div 2 takes up 40% of my page starting from the page's left border. It stretches very far down my page. So, this leaves around 60% of my page left to work with. I want for my image to be 200px wide, and 110px in height. For one reason or another, my image just appears on the bottom of my page in it's original (pre-format) width and height. I will show you the code that I am using.
HTML:
<div id="container">
<div id="div2">
<p> Hi SO, I hope someone can help me with this issue! </p>
</div>
<img id="image1" src="test.jpg" alt="" />
</div>
CSS:
#image1{
width:200px;
height:100px;
position:relative;
float:right;
}
To recap, I want the image 'image1' to be aligned between the left edge of 'div2' and the page's right border. So, I want it centered between the two but NOT centered on my page of course.

I don't think you want to be working with percentages to achieve what you describe.
This is basically what you want:
http://jsfiddle.net/fdXHs/2/
You can check my styles to see how I did it, if you need a more thourough explanation I will post it.
Also you describe that nothing happens to the image, this indicates that no styles are being applied, check your css markup if theres anything that might cause not being used.
AFTER WEBSITE EDIT
The column that needs to hold both elements (the image and the 40% width div) isn't wide enough to hold them both (combined width is 957px, container width is 845px). There isn't enough room for the image so it gets bumped under the first div...
replace prductsummary with:
#productsummary {
clear: both;
background: red;
margin: 0 220px 0 10px;
padding: 10px 0 0 0;
)
And the image:
#lol {
width: 200px;
float: right;
margin: 10px;
}

Try adding float:left; to #div2, like so. Basically, to float content to the right of something, that other content must also be floated. Even then, though, if the floated content doesn't fit the remaining space, it'll go onto the next line.
If you're still having trouble setting the image dimensions, check to make sure that you aren't overriding the css in the image tag itself (say, <img src="whathaveyou.jpg" width=500 height=500> or <img src="whathaveyou.jpg" style="width:500;height:500">)

Related

Html Div Link covers an entire background row

I just made a div-link with an image src. Almost everything is ok nevertheless the image-link-div, although its positioned just where i want to it to be, covers (as a link) an entire row from left to right, like it is using an entire line. Any object I put near the code gets placed after (above) or before (bottom) of this invisible link row. Any help ?
**The image its just the Google homepage logo on every navigation:
white background
properties:
width - 70px
height - 38px (auto stretched on paint, saved as .jpg)
CSS:
.box4
{
margin-left: 0%;
margin-right: 80%;
display: block;
}
HTML:
<div class="box4" onclick="location.href='https://www.google.cl'" style="cursor:pointer;"> <img src="Imagenes/Google.jpg"> </div>
In short, the problem with your div-link :
<div> uses by default display: block, you don't need to define it for divs
all of your other "boxes" use float: left which reduces width of block to it's minimum if width is not specified and removes what you call "invisible link row"
learn more about display and float attributes, it's hard to create a layout if you don't know absolute basics of CSS

CSS make free space decrease first when window is shrinked

I have just started HTML/CSS this week, so sorry if I sound stupid anywhere. Anyway, here's my question:
I am programming a website where all the content is enclosed by a border. The margins to the left and right are 25%. Now, when I shrink the browser, all of the content stays 25% inside the browser always. I want the site to first use up the 25% free space on the left and right... If I'm not explaining properly, I'll show an example. When you are reading a PDF file(http://www.kb.nl/sites/default/files/docs/pdf_guidelines.pdf open to try) and you shrink the window size, the A4 page sized block (all the content) does not shrink until all the grey space on the left and right has been used up. I want to have that in my website. Here are screenshots:
http://i.imgur.com/uhq035r.png <-- full size
SKkt4DK.png <-- shirnkied window
Cant post more than 2 links, that's why i only put the image ID. So yeah, how can I achieve this?
Edit: I've tried the positioning properties before but it didn't work.
What you need to do is have your inner content sit in a container. The container's width should be 100% of the page, and your inner content's left/right margins set to auto.
That way when the page's width shrinks, the container still takes 100% of the width, but the inner content's margins are adjusting to the new changes.
HTML
<div id="container">
<div id="content">
</div>
</div>
CSS
#container{
width:100%;
height:800px;
background-color: gray;
}
#content{
width:800px;
height:100%;
background-color: green;
margin: 0 auto;
}
Demo :
http://jsfiddle.net/zvo4u72x/
Adjust accordingly, but using this sample code should demonstrate what you need.

Vertically position an image inside a div

I have a problem I'd like some help with. Thankfully my code can be flexible, so I'll just give some generic markup.
My major limitation (due to the way I am retrieving the information from a database) is that the images CANNOT be background images, otherwise this would be easy.
I simply want an image to change when I hover over it. I have made an image twice as high as I need it - half colour, half black and white. The idea is, the image is exactly the same (a person) - but when you hover over it - you see the colour version.
I have constructed my 'hover' image 200 pixels wide, and 400 pixels high. It is marked up very simply:
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='.....' alt='....' />
</div>
</div>
So I am figuring I need something like:
.staff_image {
float: left;
height: 200px;
width: 200px;
}
The trouble is - using this, the 400px high image displays by default in the centre of that staff_image div - so I see half the black and white photo, and half the colour.
I am going to be using jQuery to do the hover - so just need some CSS tips on what properties I need to use to:
Have the image display at the very top
Have the image display from halfway down
Everything I try with padding and margin seems to push all content down, and doesn't move the actual picture inside at all. I basically need to know how to maneuver an image that is too tall for a fixed height div around WITHIN that div. And none of the answers I can find here seem to help. There are lots of them on centering an image - but centering is NOT what I want to do - it's the opposite! :)
Thanks for any help.
Here you go: http://jsfiddle.net/xqxSK/
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' />
</div>
</div>
.staff_image {
overflow: hidden;
height: 200px;
}
.staff_image img {
position: relative;
}
.staff_image:hover img {
top: -200px;
}
I'm using CSS instead of jquery for the hover. This is a better approach, since it works better on touchscreen devices.

HTML/CSS: 3 columns, variable sides and fixed centered middle column

My problem is with the header. So I basically have 3 columns of divs. I want the middle one to have a constant width of 980px, and then I want the left of the header to extend to the end of the browser window with a blue background color. As for the right of the header, I want that to extend to the end of right side of the browser with a black background color. It kind off looks like this:
<------------------------------[blue][center header][black]---------------------------->
I've done my research and all I could find so far are two columns with a fixed left column with the right column filling up the rest of the space. I wonder how this can be applied to my problem?
Would it be like:
<div style="width:100%;">
<div style="display:table-cell; background-color:blue;"></div>
<div style="width: 980px;">my header</div>
<div style="display:table-cell; background-color:black;"></div>
</div>
Thank you!
A simple solution - basicaly using your exact stying, but putting another block in the central table-cell element, something like this span here:
<div class="wrapper">
<div class="left"></div>
<div class="center"><span>my header</span></div>
<div class="right"></div>
</div>
I moved all the inline style to a separate CSS block and used class selectors:
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center span {
display:inline-block;
width:900px;
}
here is a jsfiddle
and here I made the center much narrower for a better illustration: jsfiddle
Hope this helps =)
Unfortunately there isn't a super smooth way of doing this that is also has wide cross compatibility support. There is a CSS spec for display called flex or flexbox which would do what you want beautifully and elegantly, but it has very limited support at the moment. Here is some resources on flexbox for your perusal...
http://css-tricks.com/old-flexbox-and-new-flexbox/
In the meantime, you can achieve the layout you want with some basic CSS jiggery-pokery that will get you what you want, but it requires absolute positioning your middle div.
Heres the JSFiddle: http://jsfiddle.net/CW5dW/
Here's the CSS:
.left {
width: 50%;
height: 300px;
float: left;
padding-right: 160px;
box-sizing: border-box;
background: red;
}
.right {
width: 50%;
height: 300px;
float: right;
padding-left: 160px;
box-sizing: border-box;
background: blue;
}
.middle {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
padding: 10px;
margin-left: -150px;
box-sizing: border-box;
background: orange;
}
What is going on here you might ask?
Basically, we are taking the div with class middle and removing it from the flow of the document. This allows us to float our left div left, and our right div right, with widths of 50% in order to fluidly take up ALL space of the browser.
We then tell the middle div to take up 300px of space (in your case 980), and we tell it to go 50% of the total width of your browser from the left. This doesn't center it though, because its calculated from the left edge of your div. So we give it a negative margin space of half it's width, to sort of "move" that left edge to the center of the div.
Then, since we know the middle div has a width of 300px (in your case 980), we can then say that the left div should have some padding on its right edge greater than or equal to half the middle divs width, in my example that's 150px, and I added 10px more so text couldn't come right to the edge of the div, so 160px total. We do the same for the right div but for it's left side. This limits the content of those two divs from falling underneath our middle div.
This answer is not an "answer" as such - it's an extended comment to #Michael's post. I have, however, posted another answer - a jQuery solution.
Regarding #Michael's answer (which is a very tidy solution indeed) there is a tiny issue that if you remove your height declaration (which the OP undoubtedly will) then the backgrounds for the various columns become exposed - this method relies on the backgrounds all levelling out at their bottom edge in order to make the design coherent. If the OP's design doesn't have backgrounds behind the columns then this solution should be fine. If backgrounds are required (which they might be judging by the question wording) then it could be awkward. Two solutions to this...
a simple javascript that scans the page for column length, finds the longest, and matches all shorter ones to the maximum.
The other (and probably better) solution is to drop a background into your with the columns already on it (it only needs to be 1px high I guess) - just make sure the central white band is 980px wide and the side columns extend off a thousand or so pixels to accommodate even the largest of browsers
OK, here's my solution. This will present a "common or garden" three column fixed width layout to all users and then adjust it for users with javascript enabled (which, let's face it, is the vast majority of users). The benefits of this solution are that the layout will behave like any ordinary 3 solumn layout without the quirks you can experience from using more advanced CSS tweaks like absolute positioning and fixed heights.
Fiddle here... http://jsfiddle.net/vuary/
You should be able to see what's going on with the HTML and CSS... it's basic stuff. The jQuery is pretty straight forward too:
$(document).ready(function(){
// find the width of the browser window....
var docuWidth = $(window).width();
// find the width of the central column as set by the CSS...
// (you could hard code this as 980px if desired)
var centerWidth = $('#center').width();
// figure out how many pixels wide each side column should be...
sideColWidth = (docuWidth-centerWidth) / 2;
// then set the width of the side columns...
$('#left,#right').css({
width:sideColWidth+'px'
});
})
EDIT
Converted the jQuery to a function that is called when the document is ready, and again if the viewport is resized... just in case:
http://jsfiddle.net/aKeqf/

Clip images with HTML and CSS

I want to display images in a 144px x 144px div element.
Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.
If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.
The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'> </div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:
.blockOut {
position: relative;
top: -100px;
left: 100px;
background-color: white;
z-index: 2; //this is the important part for putting this div in front of the other one
}
Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}
that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself
to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js