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.
Related
I know there are a LOT of examples of this, and I have tried all of them to no avail. I am trying to create a carousel component that resizes images according to its boundary. I am using it in a myriad of places, in a myriad of different ways, so it MUST be responsive. I also need the images to be clickable as normal images for a11y and customers (managing expectations).
Here is my fiddle so far: https://codepen.io/skamansam/pen/NWvroeY?editors=1100
I can get all of the elements to resize accordingly (using max-width/height). when I use an image that is wider than taller, all works well. When I use an image that is taller than wider and exceeds the height of the box, the image overflows instead of respecting the max-width/height properties.
The most common answer involves wrapping the image in an html element and setting the width/height there, which I have done, but it doesn't solve the problem. Another common answer involves using combinations of position values, which didn't give any better results than I already have. Using the inspector, you can clearly see that all the elements EXCEPT the image are correctly sized, and the image overflows the container.
Is there any other way to get the img tag to respect height: 100% in the same way it respects width: 100%?
you are using image with a very high resolution (500x800) , you have use little lower resolution otherwise you have to use overflow:hidden; on your wrapping div.Using max-width:100%; the image is already resizing itself but cannot resize further more, inspect the element to get a better understanding.
I made three changes:
Your slide needs width: auto; and height: 100%;
Your image needs width: 100%; and height: 100%;
Your image needs object-fit: contain; (not cover)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.jumbotron {
display: block;
width: 100%;
margin: 0;
padding: 0;
background-color: #aaa;
/* overflow: hidden; */
height: 150px;
}
.jumbotron .container {
width: 100%;
height: 100%;
}
.my-carousel {
background-color: #77f;
max-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
// overflow: hidden;
}
.my-carousel .previous-btn, .my-carousel .next-btn {
font-size: 200%;
padding: 0px 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.my-carousel .content {
max-height: 100%;
max-width: 100%;
align-self: center;
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.my-carousel .content .slide {
height: 100%;
//max-width: 100%;
display: none;
position: relative;
// width: 100%;
vertical-align: middle;
padding: 0px;
margin: 0px;
overflow: visible;
}
.my-carousel .content .slide.active {
display: block;
}
.my-carousel .content .slide img {
//position: relative;
// margin: 0px auto;
// box-sizing: border-box;
// vertical-align: middle;
height: 100%;
width: 100%;
// max-width: 100%;
// max-height: 100%;
object-fit: contain;
object-position: center;
overflow: hidden;
}
.my-carousel .content .slide .caption {
position: absolute;
background-color: rgba(0,0,0,.4);
text-shadow: 2px 2px 4px #fff, -2px -2px 4px #fff;
stroke: 2px #fff;
padding: 10px;
bottom: 0px;
width: 100%;
font-size: 150%;
// color: #000;
// -webkit-text-stroke-width: 1px;
// -webkit-text-stroke-color: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.3.95/css/materialdesignicons.min.css" rel="stylesheet"/>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<div class="my-carousel">
<div class="previous-btn">
<span class="mdi mdi-transfer-left"></span>
</div>
<div class="content">
<div class="slide active">
<img src="https://picsum.photos/500/800?random=1" />
<div class="caption">This is only a WIP to figure out how to style this carousel properly.</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1000/400?random=1" />
</div>
</div>
<div class="next-btn">
<span class="mdi mdi-transfer-right" />
</div>
</div>
</div>
</section>
</main>
luckily, the answer is inside "picksum" itself, it allows you to choose the resolution of the image you want, you chose (500x800) that is way too large, you can use the following reduced resolutions >(50x80), (100x160), (180x288), (190x304), (200x320). I am sure you will get your desired result by using (180x288) or (190x304)
for example:<img src="https://picsum.photos/190/304?random=1" />
Use max-width and max-height
Like this
.slide {
width: 100px;
height: 100px;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.slide .img {
max-width: 100%;
max-height: 100%;
}
I am new to web development and so to Stackoverflow.
I am stuck at changing width to make it responsive.
Below, I have got this example that's meant to be explaining the property background-blend-mode. After I finished with it I wanted to use it as a refresher to previous lessons. I wanted to style it to make it responsive in terms of changing the max and min width properties.
div {
width: 280px;
height: 140px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
}
.multiply {
background-blend-mode: multiply;
}
<html>
<div>
</div>
<div class="multiply">
</div>
</html>
What happens is when the viewport's width (at Chrome) changes to less than 740px the divs display as block element. When I got to use thebox-sizingproperty to set its value to border-boxit changed the break point to 620px instead of 740px which means that any width under 620px makes the divs still display as block elements.
What I am stuck at is set a responsive viewport for these divs so they are always displayed as inline elements, no matter what viewport's width is.
Thank you
Check this one
div {
width: 280px;
height: 140px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
}
.multiply {
background-blend-mode: multiply;
}
#media only screen and (max-width: 767px) {
body {
text-align: center;
}
div {
width: 48%;
height: auto;
margin: 15px 0;
padding: 13% 0;
}
}
<div></div>
<div class="multiply"></div>
What kind of responsive do you want? Responsive really just means responds to -- the screen size. So the behavior is really up to you. From exactly what I'm seeing you have two options.
Responsive in just the width. This means that as you scale down to smaller than the two block size they'll scale down width wise only. To achieve this you set you max-width to 280px then because you have two objects you want to set the width to 50%. The problem with this is at some point you'll end up with very narrow blocks.
div {
max-width: 280px;
height: 140px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
width: 50%;
}
.multiply {
background-blend-mode: multiply;
}
https://jsfiddle.net/6fjcoxmt/4/
Responsive in aspect radio. The other option is keeping the aspect ratio where you need to use a technique with an pseudo element that holds the parent's aspect ratio. You still need to use the technique from 1. but it gets a bit more complicated. Your element's wrapper will need to control the aspect ratio.
<div>
<div class="inner"></div>
</div>
<div class="multiply">
<div class="inner"></div>
</div>
Notice now .inner was your previous element's visual and the parent div will focus on controlling the height to width ratio:
div {
display: inline-block;
margin: 10px;
max-width: 280px;
position: relative;
width: 50%;
}
div:after {
content: "";
display: block;
padding-bottom: 58.8%;
}
.multiply .inner {
background-blend-mode: multiply;
}
.inner {
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center center;
background-size: contain;
bottom: 0px;
height: 100%;
margin: 0;
position: absolute;
top: 0px;
width: 100%;
}
https://jsfiddle.net/6fjcoxmt/16/
Try it. I have added some css and media query for responsive.
* {
padding:0;
margin:0;
list-style:none;
}
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.common {
width: 340px;
height: 200px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
}
.multiply {
background-blend-mode: multiply;
}
#media screen and (max-width:767px){
.common{
width:45%;
height:auto;
margin: 10px auto 10px;
padding: 14%;
}
.wrap{
text-align:center;
}
}
<html>
<div class="wrap">
<div class="common"></div>
<div class="common multiply"></div>
</div>
</html>
I have a web page with one big container for the entire page. Inside that <div> I have another <div> with float:left. Then, floating to the right of that child <div> I have a second container that will contain other <div>s. The secondary container is collapsing. I have searched and tried other solutions, but they didn't solve anything. BTW this is an html5 page <!DOCTYPE html>. Any ideas?
CSS:
body {
border: 0px;
padding: 0px;
margin: 0px;
background: white;
overflow: hidden;
height: 100%;
font-family: Hanuman;
}
#container {
margin: 0 auto;
background: red;
height: 100%;
width: 100%;
overflow: hidden;
}
#bibletree {
padding: 0;
margin: 0;
height: 100%;
width: 15%;
float: left;
background: blue;
overflow: auto;
white-space:nowrap;
}
#container2 {
margin: 0 auto;
height: 100%;
width: 85%;
background: gray;
float: right;
overflow: auto;
}
html:
<div id="container">
<div id="bibletree">
stuff here
</div>
<div id="container2">
there will be two other divs here as well. This one is collapsing.
</div>
</div>
Hi now give to body and html height 100%
As like this
body, html{
height:100%;
}
Demo
Does This solve the problem?
(adding overflow:hidden to #container2's rules?)
I'm trying to get my page to occupy 100% of the screen, with a footer, which needs to always be on the bottom of the page.
The div's should expand when the page resizes, with the right background color.
The bugs I have at the moment are :
- Footer stays at bottom of the screen not of the page.
- div (menu) is bigger than the div (content)
- the div doesn't resize properly
Here's my code:
Div stucture
<div id="container"><br />
<div id="header">CMS</div>
<div id="menu"><?php include ('includes/menu.php');?></div>
<div id="content">
<?php include $include_page?>
</div>
<div id="footer">CMS</div>
</div>
CSS
body {
height: 100%;
color: #0b0b0b;
background-color: #696060;
margin: 0px;
padding: 0px;
font-family: Tahoma, sans-serif;
font-size: 12.5px;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
background-color: #f1f1f1;
border-left: 1px solid #8f8f8f;
border-right: 1px solid #8f8f8f;
height: 100%;
}
#header {
height: 100px;
width: 100%;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
}
#menu {
width: 210px;
background-color: #e0e0e0;
float: left;
padding: 10px 10px 10px 10px;
height: 100%;
}
#content {
width: 750px;
height: 100%;
float: left;
padding: 10px 10px 10px 10px;
}
#footer {
position: absolute;
bottom: 0;
width: 1000px;
height: 20px;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
font-size: 11px;
}
You might be thinking about a sticky footer. A sticky footer sticks to the bottom of the page when there isn't enough content to push it down, but when the content starts overflowing the page, it goes along with it.
To make one, you basically want to wrap everything which is not the footer within a <div> tag, like so:
<div id="wrap">
<div id="header">
...
</div>
<div id="main">
<!-- All you page content goes here -->
</div>
</div>
<div id="footer">
I am a footer.
</div>
Now, for the magic CSS:
html, body
{
height: 100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow: auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear: both;
}
/* Opera Fix */
body:before
{
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;/
}
And on your HTML page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others):
<head>
...
<!--[if !IE 7]>
<style type="text/css">
#wrap
{
display: table;
height: 100%;
}
</style>
<![endif]-->
...
</head>
I'd try putting the content div inside the menu div. That way the menu is always the height of it's content, while content div can push the menu - and it's content down where applicable. Remove the height 100%.
Why pos:abs on the footer? Have you tried relative?
You may want to read this for aligning your footer at the bottom of the screen, regardless of content above; http://www.zymic.com/tutorials/html/effective-footers/
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" );
}