I have a div with word-wrapped text inside. I would like the text to be scaled up to the maximum size that still fits the div without overflowing. How can I achieve that?
<html>
<head>
<style>
div#hugetext {width: 250px; height: 500px; border: 1px solid blue; overflow-wrap: break-word;}
</style>
</head>
<body>
<div id="hugetext">This text shall be so huge that it fills the entire div</div>
</body>
</html>
On the left is how it looks like, on the right how I would like it to look like:
I would prefer a pure HTML+CSS solution but if this requires JavaScript then I will accept it.
Related
earlier it was good but now when I put width and height 100% it doesn't really displays 100% instead a 10 px margin come on all four sides
here's what I tried
<html>
<head>
<style>
.cont img {
display: inline-block;
width :100%;
height : 100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
</html>
what can I do to make it 100% with in any browser?
have a look at this code, set margin:0px on body tag
<html>
<body style="margin:0px; ">
<div style="background-color:red; width:100%;">
hello
</div>
</body>
</html>
Question is not 100% clear, but are you looking for a solution like this?
.container {
height:100%;
width: 100%;
border: 1px red solid;
margin:0;
padding:0;
line-height: 0;
}
.container .imgmy{
height:100%;
width: 100%;
margin:0;
padding:0;
}
Are you sure it was good earlier?
The margins around the image have nothing to do with the image itself.
Browsers define default styles in a so called User Agent Stylesheet. In this case, the white border is the 8px margin (that is in Chrome) on the body.
Luckily you can easily override these user agent stylesheets, and you should in this case.
You can add margin:0 to the body, as mentioned above by Shreya.
But to avoid similar 'errors' it is a good idea to include a reset.css or normalize.css. These files "make browsers render all elements consistently and in line with modern standards" (http://cdnjs.com/libraries/normalize). You don't have to write one yourself, others have done this for you, like Nicolas Gallagher: http://necolas.github.io/normalize.css/
Read more about User Agent Stylesheets here: What is user agent stylesheet
Assuming HTML
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
CSS
.cont img {
max-width: 100%;
max-height: 100%;
}
Well I am working on <iframe src> tag in which i am trying to add hover effect. What really this code does is that when i put my mouse over the yellow box it changes to cyan and red colour with 50 % height each divided vertically. But then I think what about adding an image so I just putted one image url and I noticed that it is not coming fit on that particular area. I tried changing the size or making position absolute ... but nothing worked in this.
My image file is this : 'http://upload.wikimedia.org/wikipedia/commons/1/11/Amanita_muscaria_After_Rain.jpg
Which is not fitting on that particular area.So is there any solution by which on hover I can get full size of that image on that particular area.
WHAT I HAVE TRIED
I have tried using background-size: 100% 100%; but then also its showing image like this.
THIS IS WHAT I WANT I have just edited to show you what I want
My code is divided into three parts
framehover.html
<html>
<body>
<p style="height: 50px;">Move the mouse pointer into the yellow box, then directly into
the green box,
then out of both boxes. No red or cyan should remain, only yellow and green.</p>
<iframe src="my.html" frameborder="0" height="300" scrolling="no" width="200"></iframe>
<iframe src="my2.html" frameborder="0" height="300" scrolling="no" width="200"></iframe>
</body>
</html>
my2.html - both my.html and my2.html is same so I am putting this one only. just difference is that in my.html background-color: red; for .outer
<html>
<head>
<style>
body { margin: 0px; }
.outer {
margin: -100px;
width: 400px;
height: 500px;
background-color: green;
}
.outer:hover {
background-color: red;
}
.inner {
visibility: hidden;
width: 100%;
height: 50%;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/1/11/Amanita_muscaria_After_Rain.jpg');
}
</style>
</head>
<body>
<div class="outer"
onmouseover="firstChild.style.visibility='visible'"
onmouseout="firstChild.style.visibility='hidden'"><div class="inner"></div></div>
</body>
the iframe is independent of your website, you can not change the style of iframe, for that you must change it in the original Web. If you are in the same domain with js you can try, but you can have crossdomain error.
<html>
<head>
<style>
html{ overflow:hidden;}
body{ overflow:hidden; height:100%; background-color:blue; margin:0px;}
div{ height:3000px; background-color:red; margin:30px;}
</style>
</head>
<body>
<div>dasdasd</div>
</body>
</html>
Here is the html code. When it running on a standard browser, the div tag keep showing in the window.
But it run in ie, when you select the words "dasdasd" and drag down, the body tag will scroll and the words "dasdasd" will hide unless you disable the select function.
Could someone give me other solution?
Like Spudley's answer,the DOCTYPE cause the problem,but when in the standard mode,the body tag still scroll, anyone can solve the problem?
The problem is that you're missing the <!DOCTYPE> declaration.
When IE sees HTML code without a DOCTYPE, it goes into quirks mode.
In quirks mode, the browser is effectively rendering the page to be backward compatible with IE5. It changes the way it renders the basic box layout, and removes support for a lot of standard CSS.
Add the following doctype to the top of your page (above the <html> tag), and you should see things come right:
<!DOCTYPE html>
Try this:
body {
background-color: blue;
height: 100%;
margin: 0 auto;
overflow: auto;
}
div {
background-color: red;
margin: 30px;
overflow: auto;
}
Hope it works...Best Luck.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to align a <div> to the middle of the page
This is a simple question with what should be a simple answer but I don't know how to do it.
Well, use this code:
<html>
<head>
<style type="text/css">
body{
min-width: 710px;
}
#backdrop{
min-width: 710px;
max-width: 710px;
}
</style
</head><body>
<div id="backdrop">
</div>
</body></html>
How do you get #backdrop to center on page load and stay centered on the page when you resize? (until you resize to less than 710px wide, then the horizontal scroll bar would appear)
Knowing this information would improve the layout quality of my page immensly and I could probably do it if I had a more adept knowledge of javascript and jQuery... but I don't yet.
If all you need is to have the #backdrop div centered horizontally, there is no need for javascript. The whole thing can be achieved through CSS.
#backdrop{
display:block;
width: 710px; //just specify the width. no need for min-width or max-width if this is not meant to change.
margin: 0 auto; //this will center the div in its container
}
You don't need javascript to do this, just try:
<html>
<head>
<style type="text/css">
body{
min-width: 710px;
}
#backdrop{
width:710px;
margin:0 auto;
}
</style
</head><body>
<div id="backdrop">
</div>
</body></html>
[EDIT] This was already answered on stackoverflow: How to align a <div> to the middle (horizontally/width) of the page
I'm not really sure about what you want, but:
#backdrop{
width:710px;
margin: 0 auto;
}
I'm working on a layout where the main content div will have a with of 970px. Behind this div, I want a div with dimensions 1200x600px (it will contain a flash object) positioned like so:
width:1200px;
height:600px;
position:absolute;
left:50%;
margin-left:-600px;
The problem is when the browser is sized to a width smaller than 1200px it get the horizontal scroll bar. I can fix that by:
body {overflow-x:hidden;}
But I DO want it to have the horizontal scroll bar when it get sized to less than 970px in width.
Basically, I am trying to get the 1200px div to behave more like a css background image. Any ideas?
This works without JavaScript:
<body style="margin:0">
<div style="position:absolute;width:100%;height:600px;overflow:hidden;min-width:970px;z-index:0;">
<div style="position:absolute;width:1200px;height:600px;left:50%;margin-left:-600px;">
--flash object--
</div>
</div>
<div style="position:absolute;width:100%;z-index:100;">
--main content--
</div>
</body>
UPDATE:Had to make changes to accommodate your absolute div positioning (the parent div has to be absolutely positioned as well)
A solution is possible entirely with CSS. The key pieces are position: fixed and z-index: -1. The two DIVs in this example are siblings, but there are other possibilities. This solution works with the latest versions of Chrome, FireFox, Safari, Opera and MSIE.
This does not work with MSIE6, which doesn’t correctly implement the z-index style, but there is an MSIE6-compatible solution (which shows the scrollbar at 1200px) if you’re able to rearrange things and add a DIV wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html title="html">
<head>
<style type="text/css">
#content
{
background: #ffffe8;
height: 500px;
margin: 0 auto;
width: 970px;
}
#background
{
background: #ffe8e8;
height: 600px;
left: 50%;
margin-left: -600px;
position: fixed;
top: 0;
width: 1200px;
z-index: -1;
}
</style>
</head>
<body title="body">
<div id="content" title="#content">
<p>content</p>
</div>
<div id="background" title="#background">
<p>background</p>
</div>
</body>
</html>
you could use the onresize event and when its less than 970px, change overflow-x to auto or scroll.
if you are using jQuery, look up the .resize() method
I would use a CSS3 media query.
body{overflow:hidden;}
#media only screen and (max-width: 970px) {
body{overflow:visible;}
}
First set the overflow on the body to be hidden so that it does not scroll. Then when the screen is less than 970px, set it back to visible so that it will scroll.