When I try to view my page on a mobile device specifically Chrome browser (not Firefox) I get white space under the container. Below is the code. It seems to happen when I have wide content in the main element.
http://demo.microcad.ca/web/test/test.html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html { height: 100%; }
body { min-height: 100%; margin: 0;}
.container {
display: grid;
grid-template-rows: 50px;
grid-template-columns: 250px;
grid-template-areas:
"aside header"
"aside main";
height: 100vh;
}
aside {
grid-area: aside;
background: #2f313a;
}
header {
grid-area: header;
background: #fff;
}
main {
grid-area: main;
background: #ebedf3;
}
</style>
<head>
<body>
<div class="container">
<aside>aside</aside>
<header>header</header>
<main>main
<table>
<tr>
<th>Age</th><th>Height</th><th>Registration</th><th>Logged In</th>
</tr>
<tr>
<td>t, consectetur adipiscing elit. Morbi neque orci, auct</td><td>t, consectetur adipiscing elit. Morbi neque orci, auct</td><td>t, consectetur adipiscing elit. Morbi neque orci, auct</td><td>t, consectetur adipiscing elit. Morbi neque orci, auct</td>
</tr>
</table>
</main>
</div>
</body>
</html>
It's a table related issue, table being a table it has to stay in view and keep it's aspect ratio, so a simple solution is to make it's container scroll.
main {
grid-area: main;
background: #ebedf3;
overflow-x: auto;
}
Or you can remove this line so the viewport isn't calculated based on the screen size.
<meta name="viewport" content="width=device-width, initial-scale=1">
Not recommended.
Related
I have a div with positons fixed inside a fixed width parent, yet it's content overflows.
How can I contain the content to the fixed div?
<div style="width: 400px;">
<div style="position: fixed;">
<p>Some long p text which is currently overflowing....</p>
</div>
</div>
You won't see a good result setting the position to fixed. Because the div that is inside the parent is position fixed, and it's not true. It's not like position relative and absolute.
You can fix it like this:
You must set a fixed width, e.g. the parent is 200px and so you have to set the width to 200px on the second div. Remember that if you set it to 100%, it will cover the whole page, which is a mistake.
<div style="width: 200px; height: 200px; border: 1px solid red">
<div style="position: fixed; width: 200px;">
<p>Some long p text which is currently overflowing....</p>
</div>
</div>
Here are some overflow properties this will help you
div{
overflow: scroll;
}
div{
overflow: hidden;
}
div{
overflow: auto;
}
div{
overflow: visible;
}
Maybe this code will help you check
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
</style>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</body>
</html>
Verifiy my answer if this help you.
Why is the background image in showCase[after header] not appearing. As, the image is in the same directory as I mentioned in the css url(''). I've done each and everything I can do. But, I think there is something wrong in my css code before showCase class.
How I can show background image in showCase class[after header].
/* Global Things */
body{
padding:0;
margin:0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5em;
}
.container{
width : 80%;
margin : auto;
overflow:hidden;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
/* Header */
header{
background-color: darkorange;
padding : 5px;
margin : 0px;
}
header .logoDesign{
font-size:20px;
float:left;
}
header ul li {
float: left;
display:inline-block;
margin: 0 20px 0 20px;
}
header ul a {
text-decoration: none;
font-size:16px;
color:white;
display: inline-block;
}
header ul a:hover {
text-decoration:underline;
font-size:18px;
font-weight: bold;
color:red;
padding:5px;
transition: .5s;
}
header nav{
float:right;
padding-top: 30px;
}
header .logoDesign .lighter{
color: #FFDF00;
}
/* ShowCase Design*/
.showCase{
text-align: center;
padding-top: 50px;
padding-right: 170px;
padding-bottom:30px;
padding-left:170px;
background: url('./images/showcase.jpg') no-repeat;
min-height:150px;
line-height: 1.5em;
}
.showCase h1{
line-height:1em;
text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Welcome | Faizan Corporation </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- For Logo and links.-->
<header>
<div class = "container">
<div class = "logoDesign" >
<h1> <span class = "lighter">Faizan</span> Industries </h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<!-- Let's Try to design Showcase. -->
<section class = "showCase" >
<h1>Affordable Professional Websites</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque est vel vulputate interdum. Nulla vel ante sit amet tortor dignissim fermentum a vel nunc.</p>
</section>
<!-- Now Newsletter Section. -->
<div class = "container">
<div class = "subButton">
<form action="nothing.php">
<p>Subscribe to our Newsletter</p>
<input type="email" placeholder="Enter You Email">
<button action = "submit" > Submit </button>
</form>
</div>
</div>
<!--small Section.-->
<div class = "container">
<section class = "portfolio" >
<ul>
<li> <img src="images/logo_brush.png" alt="Graphic Design">
<h2>Graphics Designing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</li>
<li> <img src="images/logo_html.png" alt="Graphic Design">
<h2>HTML 5 Markup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</li>
<li> <img src="images/logo_css.png" alt="Graphic Design">
<h2>CSS and CSS 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</li>
</ul>
</section>
<footer>
<p>Faizan Industries, Copyright © 2019 </p>
</footer>
</div>
</body>
</html>
I've tried this in jsFiddle
Background is applied. The issue likely is that your image url is incorrect.
Open Network tab in chrome, then load the page. You will likely see that url failing to load.
If you replace it with a placeholder.com url, such as https://via.placeholder.com/150 you can see the placeholder image being loaded.
I have a weird issue with some of my divs. Right now my divs are set up to take up the whole screen then have a background color then a background image over it. However, while everything displays properly, if I try to add any content specifically everything disappears except for my background color. I've never had this problem before and I believe it has something to do with how my images and my div are set up. But I can't find a solution so I was wondering if any of you guys could help! I've included the html and css down below!
Here is the jsfiddle that might help: http://jsfiddle.net/e7C87/1/ the red section is the section where I'm trying to place a nav bar and where the background image dissapears
Html (the area with the is the div that's giving me issues all the other divs displays correctly):
<div id="induoIntro" class="divide">
<div class="graphic" style="background-color:#ff837b">
<p id="introGraphic"></p>
<nav>
Designers
Developers
Directors
</nav>
</div>
<div class="textBody">
<p>A rag-tag group of desginers, directors and developers hoping to collaborate with you in an effort to satisfy your endeavours, beautify the web, and enginneer a functional interaction; we'll even guaraantee affordability.</p>
</div>
</div>
<div id="designers" class="divide">
<div class="graphic" style="background-color:#FFB37B">
<p id="designGraphic"></p>
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
<div id="developers" class="divide">
<div class="graphic" style="background-color:#CEE28F">
<p id="devGraphic"></p>
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
<div id="directors" class="divide">
<div class="graphic" style="background-color:#C195DA">
<p id="directGraphic">
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
CSS:
.divide {
height:200%;
}
.graphic {
display:table;
height:50%;
width:100%;
}
.graphic p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#introGraphic {
background-image: url(../images/WAInduo-02.svg);
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;
}
#designGraphic {
background-image: url(../images/WAdesign-03.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: center;
}
#devGraphic {
background-image: url(../images/WAdevelop-04.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: bottom center;
}
#directGraphic {
background-image:url(../images/WAdirect-05.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: center;
}
.textBody {
display:table;
height:50%;
width:75%;
margin:auto;
}
.textBody p {
display: table-cell;
vertical-align: middle;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size:45px;
margin:auto;
}
Okay, you have a lot of irrelevant code there. Here is a JSFiddle and the code that is relevant to your problem (it can be difficult to determine, but if possible, it really helps to provide only the requisite code that we need to solve your problem): JSFiddle
HTML:
<div id="header">
</div>
<div id="induoIntro" class="divide">
<div class="graphic">
<p>Graphic Test</p>
<nav>Test</nav>
</div>
</div>
CSS:
html, body {
height: 100%;
}
#header {
position: absolute;
height: 70px;
top: 0;
width: 100%;
background-color: #fff;
}
.divide {
height: 200%;
}
.graphic {
display: table;
height: 50%;
width: 100%;
background: #ff837b;
}
.graphic p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
As you can see from the JSFiddle, the <p> contents of "Graphic Test" are appearing properly, but the <nav> content is not. Well, if you look at the CSS, you see that any <p> element that is a child of an element with the .graphic class has special instructions, namely display: table-cell, vertical-align: middle;, and text-align: center;.
The <nav> class, however, has no such special instructions. If you remove those instructions from your .graphic p selector, you'll see that "Graphic Test" disappears as well. Where is it going? You can find it using your browser's built-in code inspector, but I'll just tell you: it's moving up to the top of the document.
But wait, isn't that where your header is? Exactly. You have an absolutely positioned header, which means it is removed from the normal document flow and placed on top of the document. So, in effect your <nav> element is being hidden by your header. To illustrate this, we'll give some opacity to your header and see the element sitting behind it:
JSFiddle
Now, if we go back to your original provided JSFiddle and do the same thing to the header there, this is what you'll see: JSFiddle
So to solve this, you should take the CSS properties you have for .graphic p and copy them to a new selector, .graphic nav, or something similar. Hope this helps! :-)
So I have two divs next to each other which have the class .category and they are supposed to be responsive.
<div class="content">
<div class="category">
<img src="images/category1.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor.
</p>
</div
<div class="category">
<img src="images/category2.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
</p>
</div>
</div>
This is my CSS:
.content {
width: 100%;
background: red;
}
.category {
max-width: 470px;
background: #ffffff;
display: inline-block;
vertical-align: top;
position: relative;
}
When I start resizing the window, the second .category block moves underneath the first .category block. However, I want both the .category blocks to reduce in width and stay next to each other.
Anybody got any suggestions?
First, you have some typographic errors in your HTML Markup (you are missing the > sign on the closing div tag of the first category div).
Second, you should be using percentage widths for responsive elements like this :
FIDDLE
CSS :
.content {
width: 100%;
background: red;
}
.category {
max-width:470px;
width: 50%;
background: #ffffff;
float:left;
vertical-align: top;
position: relative;
}
add float:left; to .category in css and use either % or a css media query
#media(min-width:something;){
.category {
width: something;
}
}
to set the width of the elements.
______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
I would like to make this UI, and each is a div. The header height is 30px. And the footer is 30px. But I don't know the content height. I need to use the user frame to calculate.
The total height should be 100%.
Can I do it in pure CSS?
Using flexbox, this is easy to achieve.
Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.
Example markup:
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
And CSS to accompany it:
.wrapper {
height: 100vh;
display: flex;
/* Direction of the items, can be row or column */
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left
You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/
Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
--[Old answer below]--
Here you go: http://jsfiddle.net/pKvxN/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header {
height: 30px;
background: green;
}
footer {
height: 30px;
background: red;
}
</style>
</head>
<body>
<header>
<h1>I am a header</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
</p>
</article>
<footer>
<h4>I am a footer</h4>
</footer>
</body>
</html>
That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)
Here is how to to that:
The header and footer are 30px height.
The footer is stuck to the bottom of the page.
HTML:
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSS:
#header {
height: 30px;
}
#footer {
height: 30px;
position: absolute;
bottom: 0;
}
body {
height: 100%;
margin-bottom: 30px;
}
Try it on jsfiddle: http://jsfiddle.net/Usbuw/
Try This
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header and Footer</title>
<style type="text/css">
/* Reset body padding and margins */
body {
margin:0;
padding:0;
}
/* Make Header Sticky */
#header_container {
background:#eee;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
}
#header {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0 auto;
overflow:auto;
padding:80px 0;
width:940px;
}
#content {
}
/* Make Footer Sticky */
#footer_container {
background:#eee;
border:1px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
content
<br /><br />
blah blah blah..
...
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
After fiddling around a while I found a solution that works in >IE7, Chrome, Firefox:
http://jsfiddle.net/xfXaw/
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#wrap {
min-height:100%;
}
#header {
background: red;
}
#content {
padding-bottom: 50px;
}
#footer {
height:50px;
margin-top:-50px;
background: green;
}
HTML:
<div id="wrap">
<div id="header">header</div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div>
</div>
<div id="footer">footer</div>
with Grid
<div class='container'>
<header>header</header>
<div>content</div>
<footer>footer</footer>
</div>
.container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
Below is the sample code and you can run a snippet to see the result.
html,body {
display: flex;
flex-direction: column;
height: 100%;
}
sidenav{
border:1px solid black;
flex: .3;
}
container{
border:1px solid black;
flex: 1;
}
header{
border:1px solid black;
flex:.1;
}
content{
display:flex;
flex:1;
border:1px solid black;
}
footer{
border:1px solid black;
flex:.1;
}
<body>
<header >header</header>
<content>
<sidenav>sidenav</sidenav>
<container>container</container>
</content>
<footer>footer</footer>
</body>
Try this
CSS
.header{
height:30px;
}
.Content{
height: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 40px;
}
.Footer{
position: relative;
margin-top: -30px; /* negative value of footer height */
height: 30px;
clear:both;
}
HTML
<body>
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</body>