I'm trying to get an image to be scaled to the size of a table (unfortunately I need to keep the table) where the table is the same size as the div. Looking at the link below, the picture on the way right is what I expect. However, in the bottom picture, the image is not staying in its 100% sized table. Why doesn't the height get shrunk?
http://dl.getdropbox.com/u/139980/image%20size%20experiment/index.html
Thanks.
Apply height and width directly since you know the tables size.
<img src="imageName.png" width="20" height="20">
try overflow hidden to div
overflow:hidden
Well, I have to say I never noticed this behavior before. I have figured out a solution to your problem using Javascript. The only way I was able to do it with CSS is if I specified the same Height and Width to the image as the DIV.
Therefore, the javascript sets the same Height and Width as the parenting DIV of the image element. Hopefully this will be a viable solution for you:
<html>
<head>
<script>
function autoSize(i)
{
i.style.height = i.parentNode.parentNode.parentNode.parentNode.parentNode.style.height;
i.style.width = i.parentNode.parentNode.parentNode.parentNode.parentNode.style.width;
};
</script>
</head>
<body>
<div style="position: absolute; width: 400; height: 100;top: 200; left: 10;background-color: #CCCCCC">
<table width=100% height=100%><tr><td align=center valign=middle>
<img src="ImagePlaceholder.png" onload="autoSize(this)">
</td></tr></table>
</div>
</body>
</html>
There is probably a better way of getting the parentNode, but I'll let you figure it out :)
Related
I'm creating an iPhone app using PhoneGap and jQuery mobile. I'm using a simple image tag and set the width to 100% and height to auto, but the image is not scaling properly and gets cut off. I have also tried using max-width with the same outcome. Any idea how I can solve this?
<div data-role="page">
<img class="banner" src="..." style="width: 100%; height: auto;">
</div>
I have even tried this:
$('img.banner').each(function(){
$(this).width($(window).width());
});
Previously i have gone through same problem. I tried min-height. And why both maximum-scale=1, minimum-scale=1? Try minimum-scale=1. Just give a try
I'm assuming that your image is actually nested in a div with a data-role="content" and your problem is that class ui-content by default has a 15px padding.
The simplest way to correct that would be to simply override the CSS for that page to get rid of that padding, if you need it for other elements then just wrap them in a div and add padding to those divs.
For example
CSS
.imgContPage { padding:0px; }
Markup
<div data-role="page">
<div data-role="content" class="imgContPage">
<img class="banner" src="http://dummyimage.com/600x400/000/fff.png&text=PlaceHolder" style="width: 100%; height: auto;">
</div>
</div>
Link to JSBin
Alternatively you can set a negative margin on your img to compensate for the padding, but then you will need to calculate the width so that it fills up to the right side.
Ok, I feel very stupid right now. I was getting that image from a JSON response that was coming from a Wordpress website. When I was parsing my JSON to get to the image, I was using the thumbnail version of the image (which in my surprise, it's not really a scaled thumbnail, it's just a cropped 150x150 square of the main image).
So I changed my reference from:
json.page.thumbnail
to
json.page.attachments[0].images.full.url
And now the image scales just fine (width: 100%, height: auto).
Thanks everyone for your helps
I have a #info div element which shows some text strings like below:
<body>
...
<div id="info">
ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
</div>
</body>
I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:
#info{
width:100px;
margin:0px auto;
}
With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).
I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?
-------------------- UPDATE ------------------
I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?
My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<section>
<div id="info1">
asdgfawregawregawregawregawregawregaweg
</div>
<div id="info2">
asdgfawregawregawregawregawregawregaweg
</div>
</section>
</body>
</html>
css file:
#info1 {
color: red;
}
#info2 {
width:100px;
margin:0px auto;
}
So... all displayed.
Maybe you give not enough information...
I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.
Ok here is the site:
http://danberinger.com/
If you view the source for the HTML and CSS you can see that I have set the height of the div in the middle to 100% and given it an overflow property value of hidden, it is called "main_content". I realized that the height value is having no effect on what is displayed, the overflow value of hidden is allowing the background color of the main_content div to extend down to the footer. I guess I am wondering what the best way for me to achieve a variable div height on each page or "main_content" while maintaining the background color. Am I doing this the right way or am I using some kind of css hack that is not the proper way to do it. All insight is welcome. Make sure to take a look at the source HTML and CSS before giving me an answer.
The easiest solution would be to assign the background color to your body element. Something like this:
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color:#cccccc;
}
This will also eliminate the few pixel white border around the edges, if you want to maintain that, take out the margin and padding declarations.
I might have misunderstood what you want, but try this:
Replace div#intro_container with:
div#intro_container {
width:830px;
margin:auto;
overflow: hidden;
background-color:#333333;
}
And remove the height property from div#messagebox.
I prefer to do in this way:
In the content of div 'main-content', add
In your case it was
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
</div>
It cam be rewritten as
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
<div style="clear:both"></div>
</div>
AFAIK This is a standard way to achieve what are you doing.
I have the following code that I am using to display a search tool with a scrolling results section. In IE the code works fine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html style="background:black;height:100%;width:100%;">
<head>
<title>Report</title>
</head>
<body style="background:black;">
<table HEIGHT="100%" WIDTH="100%" style="background:red;">
<tr>
<td>
Search Area
</td>
</tr>
<tr>
<td HEIGHT="100%" WIDTH="100%" style="background:orange;">
<div style="overflow-y:scroll;height:100%;">
<table style="width:100px;height:1000px;">
<tr>
<td style="background:white;">
Results Area
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
But when I set the meta tag to use IE8 formatting by adding:
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
The bottom DIV tag expands beyond the page. I have tried a number of options though and can't find a way around it without actually specifying a height for the values. Which will not work as I want the page to take up 100% of the screen no matter the size of the browser window.
Any help would be much appreciated.
This metatag enables correct CSS rendering, and in CSS – by design – height:100% basically doesn't work.
You need to give specific height to every single ancestor of the element, including <body>, <table>, <tr> and even <tbody> element that's automatically inserted by the parser.
Anyway, this layout can be achieved in easier way:
.topBanner {
position:absolute; position:fixed;
height:2em;
top:0; left:0; width:100%;
}
body {padding-top: 2em}
this will degrade nicely in IE6, and unlike overflow, will work properly in Mobile Safari.
Edit:
Removing the DOCTYPE declaration will make height="100%" work but it puts the browser in quirks mode though, which is not desirable.
Generally speaking using tables for layout is discouraged, you should use CSS instead.
For example: http://jsfiddle.net/rf649/7/
HTML
<div id="search">Search Area</div>
<div id="results">Results Area</div>
CSS:
#search {
background-color: red;
position: fixed;
height: 150px;
width: 100%;
}
#results{
background-color: orange;
position: fixed;
top: 150px;
width: 100%;
bottom: 0;
overflow: auto;
}
You should set all margins and paddings for the parent elements to zero in order to get what you want.
Update: Sorry, didn't understand the problem at once. Ben's hint should be the better one I assume. :)
Update 2: Oops, since Ben has deleted his answer my first update doesn't make any sense. Try setting the body's height to 100%, that should solve the problem.
My understanding about cross browser CSS is not that big so it might not be the best solution, but it's a solution.
As far as I've seen, you always have to set the height/width of the container that you want to overflow, so you need to set them.
To deal with the resolution I would suggest you to add a jQuery script at the onReady event that dynamically would fix the height and width making the overflow work.
I had the similar problem like you and finally the solution was to modificate a CSS line entry that had an !important modificator for a fixed height declaration. In the HTML code the class (defined in CSS) had the height assigned to 100%, but the CSS applied the !important during the style loading.