I have a 3 column fluid layout, each column % widths.
Left and right column content is just images, which scale up/down as desired when browser size is changed.
In the centre column, I have a header area with a background image, with the logo image and text image on top of the background image.
The background image, logo, and text image all scale with browser resize, however not in proportion to each other.
That is, when the browser size is reduced, the logo becomes smaller quicker than the background image, so is no longer proportionate to the background image.
As a result the logo image becomes tiny on the background image.
You can see it working here:
http://jsfiddle.net/james2014/KSq5j/embedded/result/
If you slowly resize your browser, you can see all images start to scale down, but the logo (green thing with "whatever" in it) becomes too small for the blue background, as does the text.
And the code, in JSFiddle:
http://jsfiddle.net/james2014/KSq5j/
The blue gradient background image is large (2000+px) to allow it to scale up for potentially large screens, filling the centre area's % width, but I think it's this which perhaps ruins the scaling proportions.
I've tried for days with different CSS, background size, different widths and image sizes.
Can anyone suggest what might be needed in the CSS?
I'd consider a new approach, without the background image being huge, if there's a solution with this too.
Here's the code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>3 column responsive</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<!-- MASTER LEFT COLUMN -->
<div id="master-column-left">
<img src="http://s27.postimg.org/umuoxsb6b/site_left_image.png">
</div>
<!-- MASTER CENTRE COLUMN -->
<div id="master-column-centre">
<!-- Header -->
<div id="header-centre">
<!-- Logo -->
<div id="main-top-logo">
<img src="http://s27.postimg.org/40i88t6z3/logo.png">
</div>
<!-- Some Text -->
<div id="some-text">
<img src="http://s27.postimg.org/a05zcgrrj/some_text.png">
</div>
<div style="clear-both"></div>
</div>
<!-- end Header -->
</div>
<!-- end MASTER LEFT COLUMN -->
<!-- MASTER COLUMN RIGHT -->
<div id="master-column-right">
<img src="http://s27.postimg.org/68weq5e37/site_right_image.png">
</div>
<div class="clear-both"></div>
</body>
</html>
CSS
body
{
margin: 0; padding: 0;
}
img { max-width: 100%; height: auto; }
/** COLUMN WRAPS **/
#master-column-left
{
width: 20%;
float: left;
}
#master-column-centre
{
width: 59.5%;
float: left;
}
#master-column-right
{
width: 20%;
float: left;
}
/** HEADER **/
#header-centre
{
float: left;
width: 100%;
padding: 0 0 1.3em 0;
background-image: url('http://s27.postimg.org/guga25ker/content_header_image.png');
background-repeat: no-repeat;
background-size: cover;
border-top: 1px solid #4c6623;
}
/** LOGO **/
#main-top-logo
{
float: left;
width: 10%;
margin: 1.3em 0 0 2em;
}
/** TEXT **/
#some-text
{
float: left;
margin: 2.3em 0 0 9em;
width: 28%;
}
I've used jQuery to keep the heights all the same in this updated FIDDLE.
But I'm not sure it's really optimal.
I wonder if you could put all three of the top items in a single div, and then put three columns below them. That's the only way I can think of in CSS.
edit: If you made the center header an image, it could be treated the same way as the other two images.
I'm sure others will chime in with some better ideas.
JS
var bikeheight = 0;
bikeheight = $('#master-column-left img').height();
$('#header-centre').css('height', bikeheight-22);
$(window).resize(function(){
bikeheight = $('#master-column-left img').height();
$('.putmehere').html(bikeheight);
$('#header-centre').css('height', bikeheight-22);
});
Edit 2: We may have a solution based on this excellent page:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Here is the FIDDLE.
For anyone else ending up here with a similar issue.
TimSPQR's answer was very helpful, gives food for thought and certainly might resolve others' issues.
However I've found the issue I was having with my code was specifically the padding on both the header background image and logo containers were not scaling in proportion with the scaled sizes of the images.
Even though the padding was em, and should ideally scale as desired, it wasn't.
Changing the padding to percentage (%), and of course the values, resolved my headaches.
Related
I have the following: jsfiddle.net
What I'm trying to do is have the image float left of the text such that it fills the parent (.box). Note that the .box can vary in height depending on the number of lines of text.
The end result should look like this:
How would this be done?
.box {
position: relative;
display: block;
width: 600px;
padding: 24px;
margin-bottom: 24px;
border: 2px solid red;
}
.img {
float: left;
}
.text {
font-size: 14px;
}
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box is one line.</div>
</div>
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</div>
</div>
You can use display: table on the parent element and display: table-cell on the children.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
width: 100%;
}
figure {
display: table;
width: 600px;
height: auto;
margin-bottom: 24px;
border: 2px solid red;
}
img {
float: left;
display: table-cell;
min-height: 100%;
margin-right: 20px;
}
figcaption {
font-size: 14px;
height: 100%;
}
</style>
</head>
<body>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box is one line.</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</figcaption>
</figure>
</body>
</html>
As far as I know there is no HTML/CSS only solution to make this work - correct me if I'm wrong. The OP wants to have an image with unknown size dynamically scaled to the parent's container's height. This container on the other hand depends dynamically on the text length and has no fixed height. The image size can vary, the text size can vary.
Here a proof of concept solution using jQuery and <img> instead of background-image with the following result:
HTML:
<div class="box">
<img class="img" data-src='https://placehold.it/500x500'>
<div class="text">This box is one line.</div>
</div>
JavaScript / jQuery
var $boxes = $('.box');
var $imgs = $boxes.find('.img');
for (var i = 0; i < $boxes.length; i++) {
var heightParent = $boxes.eq(i).outerHeight() - 4;
// -4 because of border 2px top + 2px bottom
$imgs.eq(i).attr('src', $imgs.eq(i).attr('data-src'));
$imgs.eq(i).height(heightParent);
}
CSS (only changed part):
.img {
float:left;
margin-left: -24px;
margin-top: -24px;
margin-right: 10px;
}
It's not such a trivial thing to achieve what you want as you don't want to set height. Not on the image and not on the parent container.
Problems using background-image:
With the background-image approach it would easy be possible to position the image correctly scaled to the left with position:absolute, but the margin to the right (to the text) would not work, as the width can be different.
Problems using img:
On the other side with the use of <img> you have the problem, that the parent <div> will always be in the original height of the image, as long as no parent has a fixed height - which is the case in your example.
JavaScript for partly making it work:
To avoid this you can avoid the creation of the image on page load by setting the url to a data attribute, I called it data-src. Now when the page is load, you can look for the parent's <div> natural height. Next you pass the URL from the data-src attribute to the src attribute so that the image is rendered.
As we know the former parent's height we can set it as the image height.
The CSS negative margins are there to undo your setting of padding: 24px on the parent's container so that the image is correctly positioned. If you ask yourself why I subtract 4 from the height - this is because you want your image to be within the border, so we need to subtract the 2px to the top + the 2px to the bottom of your border.
Note: Of course this solution would not work responsive without further scripting, but your parent <div> seems not to be responsive anyway.
Fiddle: https://jsfiddle.net/av9pk5kv/
Problems with the layout wish and the above example:
You could argue that the wished layout is not worth aspiring to in the first place, it will not work with more amount of text if you don't change something else. At some point there is so much text, so that it's just impossible to place the image filling the parent:
To avoid it partly you would have to remove the fixed width of the parent.
But the same (or similar) result will happen if the dynamically including of the image via JavaScript leads to more text lines as there were before (the text is squeezed).
How would I solve these problems: I'd use another layout.
I have some HTML/CSS that I came up with, I have centered the page and attempted to get an image either side (or behind it) of the centered page but I'm not sure how.
Sorry for the bad explanation, here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/images/background.png")
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
</body>
</html>
I want to be able to get the background.png to the left, and the right of the page.
P.S: Sorry of I have done anything incorrect here, I am new.
Any help would be great!
Thanks,
—ItzJavaCraft
Here is a way to get one image the fullwidth and height of the screen in the background.
body {
background: url("http://placehold.it/400x300/ff66cc/ffffff&text=icon1") no-repeat center center fixed;
background-size: cover;
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
There's one simple error causing the background to not display: the relative URL should not start with "/" (unless, of course, you want to use an absolute path and are using a system where / refers to your root directory). Additionally, you'll need to use the background-size or background-repeat property to make the image fill up the entire page.
If you want your "wrap" element to remain white, you can just add a background-color to that element (adjusting the size of the element as necessary to get the coverage you're looking for).
The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Tip: Always set a background-color to be used if the image is
unavailable..If you want to provide a position in a background image,
you can use some properties like:
Property:
background-position
Also, you can use a shorthand for that like jack blank code, but if this is hard to use for you, you can make it for separate like:
Full background image to your page:
background-position: cover;
Or if you want to change the position, you can use center, left, right, and top
For example:
background-position: center top;
or
background-position: left center;
or
background-position: top center;
etc.
You can learn about this property with more examples here:
http://www.w3schools.com/cssref/pr_background-image.asp
I know a lot of HTML but it's all been self-taught and I keep running into these unkowns when trying to make sites that look how I actually want them to.
I want to make my site a minimum of 940 px wide- if the browser is less than this in width, users will have to scroll horizontally.
If the browser is more than 940 px wide however- I want images to appear to "connect" with my header image(show as a full width header) and nav image(show as a full width nav).
Check out the attachment to see what I mean.
Sean
http://i45.tinypic.com/2n862ys.png
In CSS:
header{ min-width: 940px; width: 100%; overflow: hidden; }
.headerImage { display: block; margin: 0 auto; }
Then in HTML:
<header>
<img class="headerImage" src="./Images/HeaderImage.png" alt="" />
</header>
If you have a image larger than the 940px that you would like as your width then you could just set the background position of your image to be centered so if it increases or decreases the image wont move just the amount that is shown.
Another method could be is to repeat the background image so it wont end... but that depends on what sort of image you are using...
Try this
<style type="text/css">
img {
min-width:940px;
width:100%;
height:auto;
}
</style>
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.
How may I display two images on a website with elastic layout, side by side which will autoscale to 50% of parent containter?
I was playing with it last night but didnt went too far.
When I went with divs, they overlaped each other or second image was displayed underneath first.
When I went with table, table become wider than screen resulting in vertical scroll bar.
I dont know in advance what size image is, nor what resolution user is having, idealy I would set this up purely by css, without using javascript.
I had luck on other page with single image autoscaling to fit in container by setting max-width:90% but I can't apply this trick here. Funny thing is, it this scenario max-width is set according to window (parent element), while in examples above max-width is set according to width of image itself.
Sorry for my english, if something is not clear, please ask.
Thanks
I see what you're saying. I had a problem with them being just a little bit too wide, so I took a little off of the margin, since it wouldn't take a fraction in the percent sign. See if this will do the trick:
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
}
div img {
width: 50%;
padding: 0;
margin: 0 -0.2em 0 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' />
<img src='b.jpg' />
</div>
</body>
</html>
Edit: Or even better, if all you have are the images in the box, don't let it wrap at all:
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
white-space: nowrap;
overflow: visible;
}
div img {
width: 50%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' /><img src='b.jpg' />
<!-- Don't put a space between the images. -->
</div>
</body>
</html>