On my current project, all I want is to use CSS/HTML only to get my image, within a , to resize with the page. I had this working on a previous site and now...it just isn't. When the browser window is resized, it just cuts off the image, from the right side; no resizing whatsoever.
#charset "utf-8";
/* CSS Document */
div.divBannerScale {
width: 100%;
height: auto;
}
img.bannerScale {
max-width: 100%;
min-width: 40%;
height: auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>
<link href="/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bannerDIVcontainer" class="divBannerScale">
<img src="Images/bannerFull-01.png" width="2561" height="445" class="bannerScale" />
</div>
</body>
</html>
I've tried adding margin: 0 auto, display: block, padding, etc on each the div class and the image class but ultimately removed them since it didn't seem to make a difference. (And wasn't needed in the past.)
I really don't understand why it's not working now when it was on the other, much messier-coded site. I'm not an expert, clearly, but usually I can figure these things out.
Any help would be much appreciated.
Perhaps your image is already 40% of its original size? In my testing, the code seemed to work fine.
Trimming out all redundant the CSS just leaves (if the min width was indeed too big):
img.bannerScale {
max-width: 100%;
min-width: 1%;
height: auto;
}
You can see a live example here.
Note that that you don't need to do anything to the div size as it will just be as big as whatever you put in it (assuming you're not doing anything funky such as absolute positioning)
Related
There is a small gap between webpages and the browser window. It can be seen by increasing the zoom and looking at a colored on the right of the screen.
It appears on my website project here:
It also shows up blender.org, getbootstrap.com and even here on StackOverflow
I did not expect to see this here.
Is this a bug or just a quirk of web browsers?
Additional
To help better describe the issue:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>
CSS
*{
background-color: red;
padding: 0;
margin: 0;
}
div{
background-color: blue;
height: 200 px;
width: 100%;
)
By zooming in to 500% and moving all the way to the right, the red background of the body can be seen.
It maybe because of the default margin of body tag which is 8px by default.
You can Solve this by setting body's margin to 0px in css.
Also if you want, you can set padding also to 0px for more control on sizing.
I am trying to make a horizontally scrolling website, the difficulty i am facing is to fix my page's height to the device's. Furthermore, if i fix the height's value in the css then it becomes hard coded for that particular screen size, so whenever i open the page on a differently sized monitor the hard coded value creates trouble. I have used a very basic css till now, here it is :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style media="screen">
#body {
width: 4000px;
height: auto;
max-height:100vh;
}
</style>
<title></title>
</head>
<body id=body>
--\\CONTENT GOES HERE \\--
</body>
</html>
This should give you what you are looking for. You can add an overflow-yproperty as well just to be sure y scrolling is disabled. Just make sure the rest of your content is responsive so that it can resize with the view height.
#body {
width: 4000px;
height: auto;
max-height: 100vh;
overflow-y: hidden;
}
I want to have a <div> in my <body> that is 95% of the page's width and height. I want this <div> to be centered on all sides, such that a 2.5% margin exists on all sides of the <div>. The attached code almost works, but the top has no margin, such that the <div> extends all the way to the top of the page. I am using a reset. Can anyone offer some insight as to why this isn't working as intended?
The most important thing for me here is that I have no interest in working with non-relative measurements. I am coming from a background in Android development and believe that anything I make should scale to (almost) any screen size.
I would also like to say that I am just starting with HTML/CSS/JS and at this moment have no intention of supporting browsers that do not comply with the W3C standard (IE). Furthermore i would like to avoid anything that seems like a hack or a workaround.
The CSS Reset in case your interested: http://79.170.44.85/rasmussenprojects.com/reset.css
A hard copy since I can only post 1 link and it seems best to link to the reset:
<!doctype html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
html, body{
background-color:rgb(25,25,25);
height:100%;
width:100%;
}
.content-panel{
background-color:rgb(50,50,50);
width:95%;
height:95%;
margin:auto;
}
</style>
</head>
<body>
<div class="content-panel">
</div>
</body>
</html>
div{
background: lightgray;
bottom: 0;
height: 95%;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 95%;
}
<div>
content
</div>
My take would be that you just give the body a padding: 2.5% (and don't forget position:relative).
The div then should just fill up all available space with position:absolute;top:0;right:0;bottom:0;left:0;
In general I also would work with box-sizing:border-box
I have web page with centered content.When browser window is resized - it is possible to have window width small than page content. In this case page content is not centered - it is left aligned. Is there a way to right align it if no space to show it centered?
UPDATE:
Main goal is to keep right part of page visible when don't have enought width of window.
Something like: scrolled to right, but without code. Code make some nasty jumps when resize.
I'd set a min-width on the container, and use a media query to kick in when the window gets smaller...
#my_div { margin: 0 auto; text-align: center; min-width: 900px; background: #999; }
#media all and (max-width: 899px){
#my_div { text-align: right; background: red; min-width: auto; }
#my_div #tableWrapper { overflow: auto; }
}
You shouldn't need the text-align on the body tag with this code. If you don't want the content to resize when the window gats smaller, remove min-width: auto from the #my_div rules inside the media query.
Example: http://jsfiddle.net/NXdYk/2/
EDIT:
You can wrap a table in another div, and set overflow: auto to allow scrolling if the window gets too narrow:
http://jsfiddle.net/NXdYk/6/
But if the table is your primary layout, and it has widths set explicitly (i.e. inline CSS) then this is a sub-optimal solution. Bottom line: you can't control how people will interact with your site, all you can do is try and plan accordingly.
Quick example if this is what you're looking for, js script makes it work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).resize(function() {
if($(window).width() < $('#content').width()) {
$('#content').addClass('fr');
} else {
$('#content').removeClass('fr');
}
});
</script>
<style type="text/css">
#content{
text-align: center;
min-width: 500px ;
margin: auto;
border: 1px solid #000;
}
.fl{
float: right;
}
</style>
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
</head>
<body>
<div id="content">something</div>
</body>
</html>
I'm making a page that uses a WYSIWYG editor. Like most editors, it puts everything in "<p>" tags.
This gives a formatting problem when an image has 100% height and width.
The following html shows the issue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No doc type</title>
<style type="text/css">
/* css reset */
* {
vertical-align: baseline;
font-family: inherit;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
html{
font-size:100%;
height: 100%;
}
body{
height: 100%;
font-size:62.5%; /* Reduce to 10px base */
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body style="margin:0;">
<div>
<div style="width: 500px; height: 200px;">
<div>
<div style="border:1px solid #000; padding: 0; width: 498px; height: 198px;">
<p>
<img style="height: 100%; width: 100%;" src="http://www.google.com/logos/newyears10.gif"/>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
In firefox, the p tag actually overflows the div. This makes the image at 100% height be more than 100% of the div.
If I remove the doctype the problem is fixed. I don't really understand doctypes, but I think the one I used was a good one (I googled it). I think it's bad not to use one.
Anyone know how to get this to display correctly with a doctype?
Thanks
I'm not sure what else you may be doing with the page, but adjusting the paragraph height will correct the output.
div p{ height: 100%; }
As Zurahn wrote, setting the height of p will solve the problem.
To understand this (and arrive at other variations that might better serve you):
1. The image is natively 311 x 137
2. Because the p has no height, the image can figure out the width, but not the height, of the bounding element (the p).
3. The image therefore becomes as large as the width, and scales the image - creating a height of 219px
4. The p in turn then stretches to fit the image.
5. Giving a height to the p allows the image to know the height it should be getting 100% of. It can then scale the image accordingly.
ouch, that was not written so well:
But now the q is - why doesn't it get the height from its ancestor - the same way that it got the width from the ancestor?
And the answer to that has to do with the way height is mangled by the browser, which in turn has to do with the allowances given by the browser for things overflowing to the height before allowing an overflow to the width.
I think I have the same problem as you. The doctype html adds a spacing at the bottom of the page. Here is a few solutions. You can add one of the attributes to the image.
style="display:block"
add align attribute like align="absmiddle"
add float like style="float:left"