How do you get CSS to scale down two absolute positioned images, side-by-side, within their own div but inside a parent wrapper?
I have looked at many stackoverflow questions, but could not find an answer for how to deal with two or more images. I have tried multiple CSS examples but to no avail.
I put together a mock example that simulates what I’m trying to do. See http://www.netplayhockey.com/test.php. Please note that there is a reason the images are different widths and in their own div (has to do with some absolute text positioning that I removed for this demo).
The page width is 1024px (image1 598px, image2 426px). If you reduce the width of the browser, I would like both images to scale down. But, instead, the images do not change size. In fact, image2 overlaps image1.
It’s doing what I want when browser width is less than 600px (I picked 600px as an example, I really want this to occur for mobile but not iPad), I want image2 to move under image1. And the images to be centered.
Note: If I use relative positioning and float, I don't get the desired centering results (the images stack when screen is less than 1024px, and they don't center).
Attached is the HTML and CSS:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="footer-wrapper">
<div class="footer">
<div class="footer-left"><img src="image1.png" /></div>
<div class="footer-right"><img src="image2.png" /></div>
</div>
</div>
</div>
</body>
</html>
body {
position:relative;
background:#999;
margin:0;
padding:0;
}
.container {
position:relative;
max-width:1024px;
margin:0 auto;
}
.footer-wrapper {
position:relative;
}
.footer {
position:relative;
}
.footer-left {
position:absolute;
left:0;
}
.footer-right {
position:absolute;
right:0;
}
.footer img {
max-width:100%;
text-align:center;
height:auto;
}
#media all and (max-width:600px) {
.footer-left {
position:relative;
text-align:center;
}
.footer-right {
position:relative;
text-align:center;
}
}
Yes. Thank you! I slightly modified the CSS (removed some stuff that wasn't needed for it to work like I want it). - I had to re-edit, to show CSS code. after I posted my thank you
.footer {
position:relative;
}
.footer-left {
position:relative;
float:left;
width:58.4%;
}
.footer-right {
position:relative;
float:left;
width:41.6%;
}
.footer img {
max-width:100%;
height:auto;
}
#media all and (max-width:600px) {
.footer-left, .footer-right {
position:relative;
float:none;
width:100%;
height:auto;
text-align:center;
}
}
will this work for you ?
http://jsfiddle.net/PR4DE/btzj5dtu/
for future reference:
<div class="grid">
<div class="col-1"><img src="http://www.netplayhockey.com/image1.png"></div>
<div class="col-2"><img src="http://www.netplayhockey.com/image2.png"></div>
</div>
/*style*/
.grid {position:relative;max-width:960px;margin:0 auto;}
.col-1 {position:relative;width:58.4%;float:left;}
.col-2 {position:relative;width:41.6%;float:left;}
#media (max-width:960px) {
.col-1 {width:100%;float:none;height:auto;}
.col-2 {width:100%;float:none;height:auto;}
img {width:100%;height:auto;}
}
Related
I am new to the world of HTML5 and I am trying to build a layout to give me a better understanding on how i can move on from HTML4. I have currently built a layout but wanted to check:
If my code is written correctly (any tips or advice would be really appreciated, as first time I am writing in HTML5 so want to make sure im doing things right)
trying to fix the footer to sit at the bottom of the page, overlapping the sidebar and section2 slightly but at present it is showing across the middle of the page.
I have noticed when viewing the site in Firefox and using Firebug the site does not show up in the exact size that I have defined in the CSS, so would like to understand why this is.
The following is my code:
<!DOCTYPE html>
<html>
<head>
<title>BrightBees Layout</title>
<link href="styles2.css" rel="stylesheet" />
</head>
<body>
<div id ="container">
<header>
<h1>This my Header</h1>
<nav><h2>My Navigation Bar<h2></nav>
</header>
<div id="banners"><h2>My Banners<h2></div>
<aside id="sidebar"><h2>My SideBar<h2></aside>
<section id="content"><h2>This is my section1</h2></section>
<section id="list"><h2>This is my section2</h2></section>
</div>
<footer>
<h3>This is my footer</h3>
</footer>
</body>
</html>
My CSS:
body {
background:#FFF;
}
#container {
margin: 0px auto 0px auto;
width:960px;
border:1px solid #CCC;
}
header {
margin:0;
padding:0px;
text-align:center;
height:166px;
}
nav {
height:65px;
text-align:center;
background:#CCC;
}
#banners {
margin:0;
height:253px;
background:#01AEF0;
text-align:center;
}
#sidebar {
height:600px;
width:310px;
background:#ec8400;
float:left;
text-align:center;
}
#content {
height:300px;
width:650px;
background:#CCC;
float:right;
text-align:center;
}
#list {
height:300px;
width:650px;
background:#01AEEF;
float:right;
text-align:center;
}
footer {
margin:0;
padding:0;
text-align:center;
font-weight:bold;
height:167px;
background:#efefef;
z-index:-1px;
text-align:center;
}
Thanks in advance for looking at this, any advice would be greatly appreciated.
give height to the 'container' in css file should be in 'px'...
example
#container {
margin: 0px auto 0px auto;
width:960px;
border:1px solid #CCC;
height: 600px
}
it should work fine
some steps to to at first:
Remove default browser margin and padding.
* {
margin: 0px;
padding: 0px;
}
Remove margin:0 and padding:0 from .header, .footer and #banner.
use meta viewport tag to make it more responsive:
<head>
<title>BrightBees Layout</title>
<link href="styles2.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Use classes instead of ID's, they're too specific. Leave ID's for JS.
See here for the difference between ID's and classes:
https://css-tricks.com/the-difference-between-id-and-class/
I have added the following to my footer tag in the css file and this overlaps behind the sidebar/section that i required.
margin-top: -80px;
Thanks guys for looking at this for me, really appreciate it.
I have this kind of structure coming from the following code. And I cannot achieve to do the following despite my efforts and reading.
In pure CSS, how may I force X to stick the right border of the container, being under Y2/Y1 divs ?
The container and C do not have a fixed width (I put a fixed width in the code for convenience). All the other ones have fixed width.
.
I
<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
BODY {
font-family:Arial;
}
DIV.container {
width:200px;
height:20px;
line-height:20px;
font-size:9px;
background-color:yellow;
}
DIV.BlocA {
width:20px;
background-color:#AAAAAA;
float:left;
}
DIV.BlocB {
width:20px;
background-color:#999999;
float:left;
}
DIV.BlocC {
width:20px;
background-color:#666666;
float:left;
}
DIV.BlocX {
padding-right:9px;
width:50px;
background-color:#00E9E9;
text-align:center;
float:right;
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70);
}
DIV.BlocY1, DIV.BlocY2 {
width:20px;
float:right;
}
</style>
</HEAD>
<DIV class="container">
<DIV class="BlocA">A</DIV>
<DIV class="BlocB">B</DIV>
<DIV class="BlocC">C</DIV>
<DIV class="BlocY1" style="background-color:red;">Y1</DIV>
<DIV class="BlocY2" style="background-color:green;">Y2</DIV>
<DIV class="BlocX">X</DIV>
</DIV>
</BODY>
</HTML>
I am not sure if this is what your desired result was.
CHECK DEMO
I used clear:both; and float:left; on the elements you wanted to the left. I also wrapped the 'Y' divs so that I could float them side to side.
I share with you the link that changed my life and how I deal with CSS positioning
http://www.barelyfitz.com/screencast/html-training/css/positioning/
To control which div is on top you may give them each a z-index.
I would either float them all in a certain order or I would use position relative/absolute
I have a page where footer have:
postion: absolute;
bottom: 0;
it work fine when height of the window is larger then the content, but when it's smaller then the content the footer show above the text. I try to put
body {
min-height: 550px;
}
but this don't fix the issue, I can scroll but the footer is align to the bottom of the viewport, (on android the footer is chaning to the bottom of the window when I scroll).
Is it possible to align footer to the bottom of the page when there are scrollbars?
Here is my page.
Add position:relative to <body> to make footer position itself according to <body>, not <html> or viewport:
body {
position:relative;
}
See this jsfiddle and use the "toggle" button to toggle <body> between relatively positioned and statically positioned and observe the different.
This is because position:absolute element position itself base on the deepest parent that "knows" its position. From MDN:
A positioned element is an element whose computed position property is relative, absolute, or fixed.
if i understand correct
<!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>CSS Layout Example</title>
<style type="text/css">
html, body {
margin:0; padding:0;
height:100%;
font-size:12px; font-family:Verdana, Geneva, sans-serif;
}
.container { width:900px; position:relative; margin:0 auto; }
.body { min-height:100%; position:relative; }
/**
* padding-bottom -> the "computed" height of the footer (height + padding).
* In this example 20 + 10 + 10 = 40 (height + padding-top + padding-bottom)
*/
.main { padding-bottom:40px; }
.header { background-color:#006600; color:#FFFFFF; margin-bottom:10px; padding:10px; }
.page { background-color:#CCCCCC; padding:10px; }
.footer { position:absolute; bottom:0; display:block; width:100%; z-index:1000; }
.footer .container {
background-color:#000000; color:#FFFFFF;
padding:10px; height:20px;
}
</style>
</head>
<body><div class="body">
<div class="main container">
<div class="header"><strong>Header</strong></div>
<div class="page">Page content</div>
</div>
<div class="footer">
<div class="container"><strong>Footer</strong> <em>always at bottom ;) </em></div>
</div>
</div></body>
</html>
see jsfiddle and post
I am working on my portfolio page for class. I am trying to get the web page to adjust with the browser when the browser gets resized. Mainly the navigation links I have in header. Also when screen is in full my navigation links are in the top right corner. But when I restore down the window it is center in middle. What do I do? Any help will be appreciated. Here is my code. If that helps any.
#header,
#main,
#footer{
display:block;
position:relative;
float:left;
}
#header,
#footer{
width:1100px;
height:80px;
}
#header{
margin-bottom:2px;
}
#footer{
margin-top:2px;
text-align:right;
border:2px;
}
#main{
width:650px;
height:200px;
margin-left:200px;
margin-right:200px;
margin-top:200px;
}
#leftcol{
float:left;
}
#nav{
border:2px solid #F00;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
<html>
<head>
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style1 {
text-align: left;
}
</style>
</head>
<body>
<div class="auto-style1">
<div id="header">Header
<h1>Creative Minds Inc.</h1>
</div>
<div id="nav">Navigation
<ul>
<li>Homepage
</li>
<li>Tips and Trick
</li>
</li>About me
</li>
<li>Get in Touch
</li>
</ul>
</div>
<div id="main">Main
<h2>A passion for design and a creative mind.</h2>
<h3>Design, Develop, Dream</h3>
</div>
<div id="sidebar">Navigation</div>
<div id="footer">Footer
<h3>Creative Minds Inc. Jonathan Mourning</h3>
</div>
</div>
</body>
</html>
You can use the standard resize DOM event. Then at
window.onresize = function(event) {
...
}
you can adjust the elmenets positions and size accordingly.
However In general, you could avoid fixed sizes and provide percentage values for your DOM elements, in order for them to resize automatically under all screen sizes and ratios. For example, if your page has a vertical orientation, change width to 100% and have your #main element always align the center of the screen:
#main{
width:650px; /*or 70% */
height:200px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:200px;
}
Here is an example with the code :http://jsfiddle.net/TZGXf/4/
Here is a full screen: http://jsfiddle.net/TZGXf/4/embedded/result/
Instead of using set widths like width: 1000px; use percentage values like width: 100%;. But be careful as this can cause unforeseen problems.
I have a wrapper with inside a header, a left column and the main content.
Outside the wrapper i got the footer.
My problem is that main content, if there's not enough text, doesn't stretch till the bottom of the page. If i insert lorem ipsum etc, being many rows it's all ok, but if i try with only few rows, the main div stops before the very end of the wrapper (or better, the end of the page, before the footer).
Here's my html code
<?php session_start();
unset($_SESSION['message']);
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/stili.css" type="text/css" />
<script type="text/javascript" src="../script/scripts.js"></script>
<meta charset="utf-8"/>
<title></title>
<style>
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
include('../php/header.php');
?>
</div>
<div id="leftcolumn">
<?php
include('../php/leftcolumn.php');
?>
</div>
<div id="main" >Welcome to our site
...Some text, but not enough to stretch to the end of page...
</div>
<div style="clear: both"></div>
</div>
<div id="footer">Copyright 2013</div>
</body>
</html>
And here's the CSS
html,
body {
padding:0;
margin:0;
height:100%;
}
#wrapper {
min-height:100%;
height:auto;
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;
}
#main {
float:right;
width:680px;
padding:10px;
background:#E0CD90;
text-align:justify;
overflow: auto;
}
#main a{
font-size:40px;
}
#footer{
border-top: 2px solid #CCCCCC;
width:950px;
margin:auto ;
height:30px;
background:#ee5;
clear: both;
}
Thanks in advice to everyone that will help finding the problem!
Splitting a page into multiple columns stretching automatically the height of the viewport is an ongoing topic. Just google for that, there are several CSS based solutions around there.
The problem is, that the height of the surrounding boxes are undefined (html, body, wrapper in your case). You may only add some "style" if theres a size on the parent as well.
One weired solution is, to set the style of the html object:
<html style="overflow:hidden;clip:
rect(auto);height:100%;;margin:0px;padding:0px;
background-color:white;">
(yes, it's not forbidden, you CAN do that and it's even IE 6 and 7 proven...)
and
#wrapper {
min-height:100%;
height:100%';
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;
overflow: hidden; /* not sure if you want that */
}
Here are the keys to your problem you should look at and implement however you want:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#wrapper, #leftcolumn, #main {
height: 100%;
}
You dont need to add height in wrapper it will get the height based on the content inside a wrapper :)
Is this how you want it to be like? If not, then please let me know and I'll revise my answer.
UPDATE:-
#main {
height:100%
}
#wrapper {
height:100%
}
#leftcolumn {
padding:10px;
height:100%;
}
This should work.
UPDATE 2:-
#main {
height:100%;
}
#wrapper {
height:100%;
overflow:hidden;
min-height:500px; (you can change this to your liking)
}
#footer {
position:relative;
}
This should give you the results you expect. No need to add my previous styling, just use this one now.