I'm trying to make some decoration outside the main content div,
that would be getting hidden if the window size is small.
I thought for a while and came up with the following markup, (you can copy paste and see it),
and that's best I could think of right now. The problem however is that because I used percentage margins, the decoration gets unstable and shaky while resizing, and sometimes is even stepping on the content div.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: yellow;
}
div.content {
display: block;
width: 958px;
height: 400px;
background-color: #CCC;
margin: 0px auto;
}
div.wrap {
margin: 0px auto;
min-width: 958px;
max-width: 1058px;
overflow: hidden;
position: relative;
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
div.left, div.right {
background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg);
width: 50px;
display: block;
height: 50px;
bottom: 0px;
position: absolute;
}
div.left {
right: 479px;
margin-right: 50%;
}
div.right {
left: 479px;
margin-left: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="content">
<-- Content
</div>
</div>
</body>
</html>
So, could you recommend guys for some other way around without using percentage margins, to make it more flexible..? Thanks!
EDIT:
This is what happens in Google Chrome on resize:
As the browser has to re-calculate the margins based on the parent's width changes, this is kind of expected behaviour.
If you want to keep content centralized on the screen without playing with max-width, min-width and margins as percentage, and there won't be any element that should be affected by the .wrap position in the document flow, you could do something like this:
div.wrap {
width: 1058px;
overflow: hidden;
position: absolute;
left: 50%;
top: 0;
margin-left: -529px; /* 1058/2 * -1 */
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
This will centralize the content horizontally in every situation.
Hope it helps.
Clear your floats:
<div>
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<style>
.clear{clear:both;}
</style>
Related
I'm trying to get box-shadows playing nicely with different backgrounds. The standard way seems to be using mix-blend-mode, and applying a fake div behind the real one with the effect.
An example of this technique here (click the + icon in the top right).
If I alter this code slightly to wrap the non-background elements into a container with position: fixed it breaks, example here. Note, position: absolute works fine.
I do need a structure like the example, a parent that's position-fixed and blend that can accommodate variable heights or widths and multiple instances of the .box element. I can hazard a rough guess why it doesn't work (fixed breaks it out of the doc flow and therefore there's nothing to blend), I can't see a way round it though.
Another example I made that reduces things a bit more, note how if you comment out position-fixed it works fine:
.blend {
height: 100%;
box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
mix-blend-mode: multiply;
position: absolute;
height: 100%;
width: 100%;
top: 0;
}
.box {
background: grey;
min-height: 10px;
width: 100%;
position: relative;
margin: 0 0 15px;
}
.container {
/* using absolute works */
position: absolute;
/* using fixed does not work */
position: fixed;
height: 50%;
width: 50%;
}
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.column {
position: relative;
width: 50%;
height: 100%;
}
.left {
background: #2D2D2D;
}
.right {
background: #f6f6f6;
}
<div class="column left"></div>
<div class="column right"></div>
<div class="container">
<div class="box">
text
<div class="blend"></div>
</div>
<div class="box">
text<br /><br />more text
<div class="blend"></div>
</div>
</div>
(I saw a previous question, which looks along similar lines but I couldn't get their example to work to check)
You can move the blend element out of the container and make it fixed with the same dimensions as container.
Checkout the snippet:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html{
height:100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.column {
position: relative;
width: 50%;
height: 100%;
}
.left {
background: #2D2D2D;
}
.right {
background: #f6f6f6;
}
.blend {
box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
mix-blend-mode: multiply;
position: fixed;
height: 50%;
width: 50%;
}
.box {
background: grey;
height: 100%;
width: 100%;
position: absolute;
}
.container {
position: fixed;
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<div class="column left"></div>
<div class="column right"></div>
<div class="blend"></div>
<div class="container">
<div class="box">
text
</div>
</div>
</body>
</html>
3.2. Behavior specific to HTML
Everything in CSS that creates a stacking context must be considered an ‘isolated’ group. HTML elements themselves should not create groups. An element that has blending applied, must blend with all the underlying content of the stacking context that that element belongs to.
Eg. position: fixed will create a stacking context (isolated group).
https://drafts.fxtf.org/compositing-1/#csscompositingrules_CSS
Related answer more specific on stacking context: https://stackoverflow.com/a/56545440/7947839
I am very new to web design, so I might be completely over my head here.. but I can not seem to figure out how to work this. I have an image inside my first div, underneath this I want to have to more divs with the background colors in which I will add content. But for some reason my divs are not adjusting with the browser. Everytime I adjust the browser to be smaller, the divs backgrounds are separating and a white space is coming in between them.
Any help would be highly appreciated.. Also any critical feedback on my obvious coding skills, would be highly appreciated.
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class= "header">
<div class="large-logo-wrap">
<img src="Assets/Giadaslogoindexwhitebig.png" draggable="false"></img>
</div>
<div class="middle">
</div>
<div class="end">
</div>
</body>
</html>
CSS
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-size: 100%;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
max-width: 700px;
}
.middle{
position: absolute;
top: 768px;
background-color: rgb(229,225,209);
width: 100%;
height:100%;
background-size: 100%;
overflow-y: auto;
}
.end{
position: absolute;
top: 1500px;
background-color: rgb(29,25,29);
width: 100%;
height:768px;
background-size: 100%;
}
be nice. Cheers!
I suggest you take a closer look at the code and strip out as much as you can to see what is actually necessary to get where you are going. Here is a fiddle with some cleaned up code that does what I think you are going for. Hopefully it helps.
HTML
<header class="container global-header">
<div class="inner-w">
<div class="large-logo-wrap">
<img src="http://placehold.it/400x300" />
</div>
</div>
</header>
<section class="container section01">
<div class="inner-w">
Middle - arbitrary set height - I suggest you let the content decide the height
</div>
</section>
<section class="container section02">
<div class="inner-w">
Other section - arbitrary set height
</div>
</section>
CSS
*, *:before, *:after { /* get your box model so that padding and margins go inside the box instead of outside, and add to the overall size of the box */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.container { /* things the sections have in common */
width: 100%;
float: left;
}
.inner-w {
max-width: 700px;
margin-right: auto;
margin-left: auto;
padding: 1em;
border: 1px solid rgba(0,0,0,.05); /* just so you can see */
/* by using an inner div in your container... you allow yourself to maintain a background-color across the whole page if you wish. If you don't want that, then you just style the inner div for each section with the background color */
}
.global-header {
background-color: lightblue;
text-align: center; /* centers inline, and inline-block elements (logo) */
}
.large-logo-wrap {
display: inline-block;
max-width: 8em; /* set max image size */
}
.large-logo-wrap img { /* responsive image */
display: block;
width: 100%; /* fits whatever you set the wrapper to */
height: auto;
}
.section01 { /* arbitray section */
background-color: rgb(229,225,209);
color: rgb(0,0,0);
min-height: 234px; /* if you absolutly must - choose a height... use min */
}
.section02 { /* arbitray section */
background-color: rgb(29,25,29);
color: rgb(229,225,209);
min-height: 346px; /* if you absolutly must - choose a height... use min */
}
Please change your css with this one:
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
}
.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}
Some of your css styles were wrong, for example you used width and height with %100 which is wrong and effects on all of your css styles.
Also, you used position:absolute for all of div which effects on div to be nonadjustable.
Here's a simple puzzle that's been frustrating me for a while today:
Consider this page markup:
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange; }
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
How can I get div#content centered in the page regardless of viewport width?
I've tried a variety of tricks (including text-align: center; display: inline-block;) and absolute positioning, but with all of them the div#content is left-aligned when the browser window is brought under 750px in width.
I've seen a few high-profile websites do this in the past. For example on Apple.com when they advertised the new retina iPad: the iPad pictured was a very wide image that extended past the main page area (note it was not a CSS background image of the <body> element), but it didn't cause scrolling when the browser window only fit the main page content. Unfortunately I can't seem to find any existing sites that do this so I can't find a reference.
Thanks.
Is this it? Take a look -> http://jsfiddle.net/joplomacedo/CkvuG/
HTML
<div id="page">
<div id="main">
<div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
</div>
</div>
CSS
#page {
overflow: hidden;
min-width: 200px; /*same as #mains width*/
}
#main{
position: relative;
height: 500px;
width: 200px;
margin: 0 auto;
background-color: lightgreen;
}
#extended-out {
height: 200px;
margin: 0 -100px;
background: indianred;
border: 1px solid red;
}
#extended-out img {
width: 100%; height: 100%;
}
http://jsfiddle.net/CNNcV/
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange;
margin:0px auto;
width:100%;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
Is that what you're looking for?
Add margin: auto to this,
#content { width: 750px; height: 100px; background: orange; margin: auto}
I'm trying to create a page that has two sidebars on the left (links in the first sidebar will open more links in the second column, which will in turn open up content pages). I'd like both sidebars to be fixed in position so they don't scroll, but there's a chance that the sidebars could end up being longer than most people's screen size, due to the large amount of links that could be displayed.
How can I make it so that if one of the sidebars is longer than the screen height, it scrolls with the rest of the page, but when the end of the sidebar is reached it stops scrolling even if the rest of the page's content can still scroll?
An example of what I'm trying to achieve is on the Gmail inbox, the sidebar is usually static but it can scroll if the screen is too small.
Below is what I have so far. The two sidebar columns are leftnavbox and rightnavbox.
Many thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
font-size: 100%;
}
#container {
min-height: 100%;
background-color: #DDD;
width: 100%;
margin: 0 auto;
overflow: auto;
}
* html #container {
height: 100%;
}
#contentwrapper{
float: right;
width: 100%;
margin-left: -360px;
}
#content{
margin-left: 360px;
}
#header{
height: 30px;
background: #000;
color: #fff;
}
#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixels*/
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 180px; /*Width of right column in pixels*/
background: #FDE95E;
}
#leftnavbox{
float: left;
width: 180px; /*Width of right column in pixels*/
background: #ffcc00;
position: absolute;
top: 0px;
left: 0px;
position: fixed;
}
#rightnavbox{
float: left;
width: 180px; /*Width of right column in pixels*/
background: #ffcc00;
position: absolute;
top: 0px;
left: 180px;
position: fixed;
}
</style>
</head>
<body>
<div id="container">
<div id="contentwrapper">
<div id="content">
<div id="header">header</div>
content
</div>
</div>
<div id="leftcolumn">
<div id="leftnavbox">
left nav
</div>
</div>
<div id="rightcolumn">
<div id="rightnavbox">
right nav
</div>
</div>
</div>
</body>
</html>
The Gmail example you posted doesn't work like you say it does. It is two seperate scrollbars if the viewport is too small.The window scrollbar controls the menu and an inner one for content. The sidebar is just relatively positioned on the page and the mail contents is set to overflow: scroll; height: 100% so that it doesn't extend the page. This means that only the menubar can extend the page as the content automatically generates it's own scrollbar once it pushes past 100% of the page height.
If you want to achieve this with one scrollbar, it will require javascript.
I am having an issue where the background color is behaving unexpectedly when the viewport is shrunk to a size smaller than that specified for some of my elements. While the scroll bars appear correctly the background is not what I would expect. When the viewport is as large or larger the backgrounds behave as intended. When inspecting the page elements with Firebug it seems that the body element is not stretching even though content inside of it is. What's causing the backgrounds to behave this way?
I've provided what I believe to be the pertinent html and CSS, but if I've omitted something please let me know.
Shrunk Viewport Example
Enlarged Viewport Example
CSS
html
{
background: #A37C45;
}
body
{
background:
#55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
#container
{
width: 100%;
}
#header
{
width: 730px;
margin-left: auto;
margin-right: auto;
padding: 5px;
overflow: hidden;
}
#main
{
width: 730px;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#footer
{
background:
url("../images/backgrounds/grass.png") repeat-x scroll left top;
clear: both;
width: 100%;
overflow: hidden;
padding-top: 30px;
margin-top: 20px;
}
#footercontainer
{
width: 100%;
background-color: #A37C45;
margin-top: -1px;
}
#footercontent
{
width: 730px;
margin-left: auto;
margin-right: auto;
padding-bottom: 25px;
overflow: hidden;
}
HTML
<html>
<body>
<div id="container">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
<div id="footercontainer">
<div id="footercontent">
</div>
</div>
</div>
</body>
</html>
The reason you're seeing this behaviour is because your width: 100% elements are only taking the viewport width as the amount of background they need to render.
You can fix it by adding a min-width declaration to your body element's CSS. Simply set it to the largest nested element's width:
body {
min-width: 730px;
background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
min-width is not supported in IE so use the expression
body {
min-width: 730px;
background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
/* IE Version */
width:expression(document.body.clientWidth < 730 ? "728px" : "auto" );
}