I'm playing with flexout. I wanted to create the typical layout of a header content area and footer
Now when I set the body, and the main divs to 100% height the footer is truncated. Is this a content area,
See this plnkr
<html style="height: 100%">
<body style="height: 100%">
<div style="height:100%;display:flex;background-color: lightblue;flex-direction:column">
<div style="width: 600">Header</div>
<div style="width: 500;display: flex;height: 100%">
<div style="width:300">Nav</div>
<div>Content</div>
</div>
<div style="height:50px">footer</div>
</div>
</body>
</html>
[
what am I missing?
Just add this css:
body {
margin: 0;
}
The body have by default a margin of 8px.
Most browsers will display the element with the following default values:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
Copied from W3C - HTML body Tag.
Here's a godd starting point for you:
It offers a completely responsive flex design with header and footer.
body,html{
margin:0;padding:0;
height:100%;
}
.Flx{
display:-webkit-flex;
display:-ms-flex;
display:flex;
}
.Wrap{
margin:0 auto;
height:100%;
max-width:600px;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
}
.Header{
-webkit-flex:0 50px;
-ms-flex:1;flex:0 50px;
background:#ccc;
}
.Content{
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
nav{
-webkit-flex:0 1 300px;
-ms-flex:0 1 300px;
flex:0 1 300px;
background:#eee;
}
.Footer{
-webkit-flex:0 50px;
-ms-flex:1;flex:0 50px;
background:#ccc;
}
<div class="Flx Wrap">
<div class="Flx Header">Header</div>
<div class="Flx Content">
<nav class="Flx">Nav</nav>
<div>Content</div>
</div>
<div class="Flx Footer">footer</div>
</div>
You want to remove the margin on your body tag.
To be sure you make it look in every browser the same you can do a so called css reset.
Browsers can have different default styles. This short css file will reset all default styles to be the same.
Solution
body {
margin: 0;
}
<html style="height: 100%">
<body style="height: 100%">
<div style="height:100%;display:flex;background-color: lightblue;flex-direction:column">
<div style="width: 600">Header</div>
<div style="width: 500;display: flex;height: 100%">
<div style="width:300">Nav</div>
<div>Content</div>
</div>
<div style="height:50px">footer</div>
</div>
</body>
</html>
Related
I am trying to create a round profile pic on a background image. I want the profile pic to be responsive and change size or maintain at an ideal position when switching from different screens.
Currently, I am using margin with fixed values to offset the position, but I don't think it is the right way. Please look at the following output. Even at code snippet all the alignment is off. I am not sure how do I actually code the width and height so that it will maintain at an ideal position on all screens. How to really set the margins or padding? I have tried col-sm and col-md with different parameters but it only takes col-md.
My ideal output is as follow:
iPhone X (The positioning of the profile pic and wordings are ok with the current code)
iPad (The positioning is OFF)
iPhone5/SE The position is OFF again
I have included JSFiddle, please help.
<style>
#sfitness{
position:relative;
}
* {
box-sizing: border-box;
font-family:Arial;
font-size:12px;
}
img {
width: 100%;
}
.prof{
width:90%;
position:absolute;
top:150px;
left:4%;
}
.user{
border-radius:75%; width:80px; height:80px;
}
.name, .pic{
float:left;
}
.name{
margin-left:-25px;
margin-top:20px;
}
.name span{
display:block;
text-transform:none;
font-size:8px;
}
.name p{
text-transform:uppercase;
font-size:10px;
line-height:10px;
}
.credit{
float:right;
margin-top:48px
}
.credit-pic{
width:10px;
height:10px;
}
</style>
</head>
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="prof">
<div class="col-4 pic">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-4 name">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
<div class="col-4 credit">
<img class="credit-pic" src="https://image.ibb.co/e7UQRU/Asset_19_4x_8.png" /><span style="font-size:8px"> 0 credit</span>
</div>
</div>
</div>
</div>
</body>
This might help you.. In order to make it more responsive use media queries..
To round an image use border-radius:50%; and also specify the width and height of the image.
.user{border-radius:75%; width:100px; height:100px;}
.name, .pic{float:left;}
.prof{width:300px; position:absolute; bottom:-35px; left:4%;}
.name{padding:25px 10px;}
#sfitness{position:relative;}
.name span{display:block; text-transform:none; font-size:16px;}
.name p{text-transform:uppercase; font-size:18px;}
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="prof">
<div class="col-4 pic">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-8 name">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
</div></div>
</body>
Here is the updated code as you said it will be responsive I think you are also using bootstrap I updated the class and rewrite some CSS
you can check .user,.information, .information p class information is a new calss
* {
box-sizing: border-box;
font-family: Arial;
font-size: 12px;
}
img {
width: 100%;
}
.profile-name {
text-align: left;
font-size: 12px;
font-weight: bold;
margin-top: 5%
}
.user {
display: inline-block;
width: 80px;
height: 80px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
object-fit: cover;
float: right;
}
p {
display: flex;
flex-direction: column;
}
.information {
line-height: 16px;
margin-top: 20px;
}
.information p {
font-size: 152%;
font-weight: bold;
line-height: 19px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row" style="margin-top:-60px">
<div class="col-xs-4 col-sm-6 col-lg-1">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-xs-6 col-sm-8 col-lg-10 information">
<div class="row">
<p>Jane Worng<span>How are you</span></p>
</div>
</div>
</div>
</body>
Take use of Media Queries for the repsonsive aspect. Its way easier than doing it in javaScript:
body{
background-color: white;
}
#media only screen and (max-width: 750px) {
body {
background-color: black;
}
}
In this example the background-color of the body is white as long as the screen width is 750px or more.
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}
Specifially, this code:
<html>
<body style="margin: 0px; padding: 0px">
<div style="width:100%; background-color:#FFDDDD">head</div>
<div style="height:100%; background-color:#DDFFDD">body</div>
</body>
</html>
Is rendered bigger than the window, creating a permanent scrollbar:
What is a proper way to fix this issue?
The problem is that you are making this div 100% height:
<div style="height:100%; background-color:#DDFFDD">body</div>
the height property in % will make the div take up that percentage of its container, which in this case is the HTML <body>, so changing the header div to be height: 10% and the body div to be height: 90% should fix the problem.
You can simply do it this way:
HTML
<div class="header"> Header</div>
<div class="main">Main content area</div>
CSS
body {
background: yellow;
}
.header {
height: 30px;
background: red;
}
Check it out: http://jsfiddle.net/EDWTM/
Move the background color to the body, and lose the height.
<html>
<body style="margin: 0px; padding: 0px; background-color:#DDFFDD">
<div style="width:100%; background-color:#FFDDDD">head</div>
<div>body</div>
</body>
</html>
http://jsfiddle.net/4XVrW/
Alternatively, you could use margins and absolute positioning to place the header above the body:
<html>
<body style="margin: 30px 0 0 0; padding: 0px">
<div style="height: 30px; width:100%; background-color:#FFDDDD; position: absolute; top:0; left: 0;">head</div>
<div style="height:100%; background-color:#DDFFDD;">body</div>
</body>
</html>
so guys, if u test the code below, u can see that everything is alright, except if u size down the window, so the flash menu ( red div ) is going out of the page to the right.
well if the window is smaller then 900px, there is a HORIZONTAL scrollpane, so far so good, but it just scrolls the content of the page!
I want the upper part also to scroll, but only horizontal, cuz I want them to be fixed (stay on top of the site always)...
any suggestions? I've tried so many things from google, but no one of them was the right one 4 me...
thx & g.r. ace
html:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="div_page" align="center">
// page content goes here
</div>
<div id="div_menu">
<img src="img/logo.png" alt="<Logo>" style="position:absolute; top:0px; left:20px; width:225px; height:150px;">
<div id="div_flash"></div>
</div>
</body>
</html>
css:
#charset "utf-8";
body {
padding:0px;
margin:0px;
}
#div_menu {
position:fixed;
top:0px; right:0px; left:0px;
width:100%; height:40px;
min-width:800px;
overflow:visible;
background-image:url(img/menu.png);
background-position:top left;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 40px;
background-color:#333;
}
#div_flash {
position:absolute;
top:0px; left:250px;
width:500px; height:150px;
background-color:#F00;
}
#div_page {
position:absolute;
top:40px; right:0px;left:0px;
min-width:800px; min-height:500px;
}
As it seems to me, pure CSS can't solve this issue.
But adding a few lines of JQuery may help:
<script type="text/javascript">
$(window).scroll(function() {
$('#div_menu').css('top', $(this).scrollTop() + "px");
});
</script>
CSS position of #div_menu should be changed to absolute.
UPD:
In pure JS it would be:
<script type="text/javascript">
var div_menu = document.getElementById('div_menu');
window.onscroll = function (e) {
if (div_menu)
div_menu.style.top = window.pageYOffset + 'px';
}
</script>
There is a CSS-only solution possible with position:sticky , top:0
See this Fiddle : Link
$headerDiv = $('.header-wrapper');
$rowDiv = $('.row-wrapper');
$rowDiv.scroll(function(e) {
$headerDiv.css({
left: -$rowDiv[0].scrollLeft + 'px'
});
});
It will be helpful.
Hie, that is because you have made the widht of the content boxes/divs fixed; If you want to make them adjust as per the window size, then use percentages for width like: width: 60%; This is infact a responsive design. But still if you want your page header only to be scrolled, then make sure that you bound the content required in a div tag, whose width should be determined by page's width and apply overflow property for that tag; if you want only in horizontal direction, then use overflow-x:scroll and overflow-y hidden(since if one direction is specfied, other will be visible but with disabled mode), which is as shown:
<div style="width:60%;overflow-x:scroll; overflow-y:hidden;">
//your conetnt//including divs
</div>
The thing here is, whenever the width of the content in a div/any tag is more than the width of its outer div, then overflow happens; in this case, you can use overflow property, where you can set properties like : hidden, show, scroll, auto etc..
But try to avoid this, because responsive design is the next-generation markup language technique, where the widths(size) should be dependent on the browser size... :)
Happy coding.. :)
$("#body").scroll(function() {
scrolled = $("#body").scrollLeft();
$("#header").scrollLeft(scrolled);
});
.header {
background-color: red;
position: absolute;
top: 10px;
left: 8px;
width: 120px;
overflow: hidden;
}
.body {
overflow: scroll;
margin-top: 51px;
height: 100px;
width: 120px;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell1 {
border-top: 1px solid red;
border-right: 1px solid red;
background: #DDD;
height: 40px;
min-height: 40px;
width: 50px;
min-width: 50px;
}
.cellh {
border-top: 1px solid red;
border-right: 1px solid red;
background: yellow;
height: 40px;
width: 50px;
min-width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here a very simple solution
Uses Flex for the table formatting -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="header" class="row header">
<div class="cellh">1</div>
<div class="cellh">2</div>
<div class="cellh">3</div>
<div class="cellh ">4</div>
<div class="cellh">5</div>
</div>
<div id="body" class="col body">
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to create a footer-type block that will sit at the bottom of a block, but which will collide with elements at the top of the block when resized.
With a table, this would be easy:
<table style="height: 100%;" border="1">
<!-- border so you can see how it resizes -->
<tr id="TOP" style="height: 3em;"><td>TOP</td></tr>
<tr id="GAP"><td>GAP</td></tr>
<!-- content only so you can see what's going on;
I want this to render as empty space -->
<tr id="BOTTOM" style="height: 3em;"><td>BOTTOM</td></tr>
</table>
but I'd like to do this without using tables.
http://www.cssstickyfooter.com seems to have an answer:
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
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;
}