I'm trying to understand why, when I use scale, it chops off the top third of the photo, if centered, or if left justified, the top and left edges. I gather it has something to do with the scaling occurring from the mid-point of the img. The code I am using seems trivial having no other content other than the button. What causes this and how does one do it correctly so the entire photo displays within the div?
The intended result is that when you press the "+" button, the scaled photo would remain in the original sized div allowing the user to scroll through enlarged photo.
<head>
<title>Zoom photo</title>
<style>
.largeimage img { transform:scale(2); }
</style>
<script>
function explody() {
document.getElementById("photocontainer").classList.add('largeimage');
}
</script>
</head>
<body >
<div style="overflow:auto;transform-origin: top left;text-align:center;" id="photocontainer" >
<img src="Desktop/graphic/Oliver1950/IMG_0435.jpg">
</div>
<input type="button" onClick="explody();" value="+">
</body>
</html>
That is because the origin of the scale happens from the center (horizontal and vertical center) of the image. If it is located in a <div> close to the top of the page, it will be cut off. If it is located in a <div> that is set to hide overflow, it will also be cut off.
The trick is to either make space around the wrapping <div> to accommodate expanded dimensions of the image, or simply alter the transform-origin property.
div {
text-align: center;
}
div:hover {
transform: scale(2);
transform-origin: top center;
}
<div>
<img src="http://via.placeholder.com/350x150">
</div>
Related
Hopefully I can explain this well, as I haven't in the past.
I am looking to achieve something like this...Divide a wepage into three and put a title in the center.
|TitleLeft|Title|TitleRight|
So assume title is width:500px. Title left and right will change dependant on window size. Simple enough by setting it to 500px and then margin: 0 auto;. This is how I have the content of a page, but the title should stretch left while still being centered on the page (or left aligned within that 500px boundary). So assume title has a background of orange. TitleLeft should also have a background of orange.
Maybe this will help (it uses tables and is badly aligned...I want to avoid tables if possible!) as it shows roughly what my aim is.
http://jsfiddle.net/CmWRu/
If I understand your question correctly, you're looking for:
Middle column is a fixed with, centered on the screen
Left and right columns will always expand leftward and rightward, respectively, to fill out remaining available space, even if the screen re-sizes
Headings will always be centered in their respective divs.
OK, first some HTML (I'm using presentational markup to make this easier to follow...you'll want to decide what markup is semantically relevant for your project:
<div id="wrapper">
<div id="left">
<h2>Title Left</h2>
</div>
<div id="center">
<h2>Title Center</h2>
</div>
<div id="right">
<h2>Title Right</h2>
</div>
</div><!-- wrapper -->
A little CSS:
#wrapper {
width: 100%;
overflow: hidden;
}
#left, #right {
background: #FF8C00;
}
h2 {
text-align: center;
}
#center {
width: 500px;
float: left;
background: #e0e0e0;
}
And some jQuery:
//document ready function
$(document).ready(function(){
//on page load, call the resizeColumns function
resizeColumns();
//and also call it whenever the window resizes
$(window).resize( resizeColumns );
//we define the function
function resizeColumns(){
//grab the width of the wrapper and save it to a variable
var windowSize = $('#wrapper').width(),
//same thing for the width of the div with id of "center"
centerSize = $('#center').width(),
//windowSize - centerSize = the remaining width of the screen.
//Divide that by 2, and that's how wide each remaining column should be.
//We save that value to a variable
fluidSize = (windowSize-centerSize)/2;
//Now just set the width of the left and right columns equal to fluidSize
//and float them to the left.
$('#left, #right').width(fluidSize).css('float','left');
}
});
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
I have a site that has a fairly complicated footer, see http://www.roadsafetyforchildren.co.uk/, not really sure how to attempt to build it:
I've split the image up into two parts, the first part below needs to be horizontally centered but sit below the content:
The second part needs to repeat horizontally but stay in line with the image above.
Therefore the two images needs to look like the first image at the top of the question.
I can match the two images up IF the content div above it has a fixed height. The problem is the content div NEEDS to be flexible to grow/shrink with the content. Therefore the image at the bottom of the content div moves up and down the page depending on the size of it.
How can I keep the two images lined up with a flexible content div above it?
P.s There's a lot of answers but don't think a few of them have understood the question.
Seems straight forward to me, you will need two divs:
<div id="content">
<div id="inner_content">
<!-- Append image to very bottom -->
<img src="city" width="" height="" alt="" />
</div>
<!-- Background image of hills goes here -->
</div>
CSS is straight forward..
#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }
try this:
html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}
Whatever <div> the content is in should be height:auto and have a background image of five or so pixels high by whatever width and should repeat-y in the css, and the <div class="footer"> should be float:left. That way the footer will always be below the content, and whatever height the content is will have a repeating background.
No need to mess with PS, except to create the bg image for the content.
This would be the bg image for content div, and repeat-y so it repeats from the top down:
And the footer image:
And if you make the 'background repeat' image a png, you could make the drop shadow opaque to accommodate the change in the body bg image.
You can position a background inside an element:
div#footer {
background: url('roadpic.jpg') bottom center no-repeat;
}
<div id="content">your content goes here</div>
<div id="footer">...</div>
which will keep the footer div below the content at all times.
You will need a common anchor point for both the backgrounds. Between a horizontally-resizable window and a content area that is less than 100% of the window width, the only point that can remain constant between the two containers is the horizontal centre of the body.
So your hills background will need to be centred on the body or some other container that has 100% of window width. The road image can either be fixed-position inside a fixed-width centred container (shown in the example below), or centred inside a centred variable-width container.
The resulting CSS will be something like this:
div#wrapper {
width: 100%;
background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
width: 800px;
margin: 0 auto;
/* background can be offset to the left or right if the width is fixed
if not it must be centred */
background: url(road.png) right bottom no-repeat;
}
And the HTML:
<body>
<div id="wrapper">
<div id="content">
<p>Some content here</p>
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
The backgrounds of both the containers will have same anchor point and they'll move together as the window is resized!
Because #content is a child of #wrapper, they'll remain aligned vertically because #wrapper will get taller as #content gets taller (unless #content is a float, in which case you'll have to use the :after clearing trick; or if #content is position:absolute, you'll need to align them manually or with javascript).
I know this is a common question but I just can't seem to get it right. I have tried everything except the one thing that will make this work, including various placements and combinations of clear and overflow settings. Here's my code (stripped down for posting)
<style>
#message { border:thin red dashed; overflow:hidden; }
#message p { border:thin red solid; }
#line1 { border:thin blue solid; }
#text { text-align:center; background-color:#FCF; vertical-align:middle;}
#photo { float:left; width:160px; border:thick black solid;}
</style>
</head>
<body>
<div id="Main">
<div id="line1">
<div id="message" >
<div id="photo" > <!-- floated pic box -->
Pretend a picture is here. Pretend a picture is here.
Pretend a picture is here. Pretend a picture is here.
</div> <!-- photo -->
<div id="text"> Click here to see all Key West Tours, Attractions and Packages<br />
Buy Online and Save!
</div> <!-- text -->
</div> <!-- message -->
</div> <!-- line1 -->
</div> <!-- Main -->
I want the text to be aligned middle and realize it's because the actual text div (pink box) can align middle all day long and as long as it stays that height it won't change.
Question: How do I get my text div to grow to the height of the faux picture box so I can align it to the middle of that section?
There isn't really a good way of going about what you are trying to do. Since you have your image in its own div floated to the left it is hard to get your text div to align with it.
I would just give the text div some top margin so that it atleast starts somewhere near the middle of the image, but obviously that is not a specific solution, its more of another option.
If you absolutely need to have it centered one of these links could help,
phrogz.net/CSS/vertical-align/index.html
or
webtoolkit.info/css-vertical-align.html
Alternatively you could try putting the image and the text together in a single div tag and give the image vertical align: middle, as long as there are no line breaks that would align the text to the middle of the image.
I have a logo image across the entire top of my website page. The logo itself only takes up about one third of the left hand side. The right two thirds of this bar is plain and dark blue in color. I have several links and the user name displayed on the right side and would like to float those over the image.
Originally, I had the image taking up the left two thirds of the bar (div) and a separate div with my links on the right. The problem is that that method leaves a noticeable boundary line between the two divs even though they are the same color.
Is transparency going to help? How do I set this up?
_________________________________________________________________
| LOGO HERE User: David Troy |
| LOGO HERE Home | FAQ | Contact Us |
|_______________________________________________________________|
Concerning the "hairline space": if you are using Internet Explorer, you will have to omit spaces between the divs as follows:
<div class="left">Logo</div><div class="right">Links</div>
This is due to Quirks mode, I believe; it displays as expected in XHTML Strict mode.
Then, the CSS looks like this:
div.left {
float : left;
}
div.left, div.right {
margin : 0px;
padding : 0px;
}
try :
div.left, div.right {
margin : 0px;
padding : 0px;
}
Assuming your left div has a class="left" and the right one has a class="right"
That will remove the spacing between the divs.
I'm somewhat confused as to what you're trying to accomplish.
If you're using float, then make sure that you're specifying a width to each div.
If you just want the text to be on top of the image, two simple div blocks should work.
<div>
Your links here
</div>
<div>
<img src="yourimg.gif" />
</div>
If you want them to be side by side, this should work:
<div style="float: left; width: 400px">
<img src="yourimg.gif" />
</div>
<div style="float: left; width: 400px">
Link 1
Username
</div>