so in a previous post I asked how to remove a gap so that the body takes up the entire height of the browser window. This was solved using:
margin: 0;
However, I need (or the only way I know to) style my text using margins. As soon as I apply something like
margin-top: 50px;
the body doesn't fit the 100% height of the browser. I know all of the contents of the div have to use margin 0 in order for it work, but how am I supposed to style things using a margin.
Are there any other ways I can make the body 100% of the browser height?
https://jsfiddle.net/fveb8wsu/
body{
margin:0;
padding:0;
}
Did the trick for me, the body has some default paddings. So since the content of the mid was 100vh + padding this would be greater than 100vh
Is that what you need ? DEMO
#content-mid {
background-color: #000000;
opacity: 0.9;
height: 100vh;
width: 750px;
margin-left: 200px;
}
#basics {
display: table;
margin: 0 auto;
height: 400px;
width: 725px;
}
/* Content Text */
#sv_title {
font-family: BebasNeue;
font-size: 60px;
color: #FFFFFF;
text-align: center;
margin-top: 50px;
}
#sv_sub {
font-family: 'Quicksand', sans-serif;
font-size: 25px;
color: #FFFFFF;
text-align: center;
margin: 0;
margin-top: -20px;
}
<div id="content-mid">
<div id="basics">
<div id="sv_title">Community Name</div>
<div id="sv_sub">Your sub title here!</div>
</div>
</div>
i agree with everyone, instead of margin use padding, take a look:
#content-mid {
background-color: #000000;
opacity: 0.9;
height:100vh;
width: 100%;
padding-left: 200px;
}
#basics {
display: table;
margin: 0 auto;
height: 400px;
width:100%;
padding-top: 50px;}
https://jsfiddle.net/keinchy/5up22vom/1/
-cheers
What you have here is collapsing margins between parent and child element because parent has no margin-top and child has margin-top: 50px Demo
So now parent element has height: 100vh and margin-top: 50px and that is why body doesn't fit the 100% height of the browser.
There are couple options how you could prevent collapsing margins
Use display: inline-block Demo
Use display: flex Demo
Use float: left Demo
Or if you want to keep margin on parent but you don't want height to be more then window height you could use calc(100vh - marginofchildren) like this Demo
Related
I am trying to understand how to make a web page which will go in full height and width in asp.net. I know to use width: 100% for the background but I am not understanding how to change the width and height of other buttons, , and other stuff..
I search on google and youtube for that but I am not getting a good tutorial to explain how I should make it.
Should I use jquery or javascript? I'm trying to stay far from those at the moment.
Can any one please give me a simple explanation about this?
Best way to control ui styles, should be CSS.
For example, setting a element to full width and height
.full_width {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
}
.element_inside {
width: 100px;
border: 1px solid red;
}
.button_inside {
width: 125px;
height: 60px;
line-height: 60px;
}
<div class="full_width">
I am full width element
<div class="element_inside">
Low width
</div>
<button class="button_inside">
Button
</button>
<button style="width: 100%;">
Button full width
</button>
</div>
But it uses absolute position.
You could use something like this too.
html {
display: table;
width: 100%;
min-height: 100%;
}
body {
display: table-row;
}
.full_width {
width: 250px;
display: table-cell;
vertical-align: top;
min-height: 100%;
}
.full_width {
border: 1px solid #f00;
}
<div class="full_width">
full width container
</div>
For responsive layout, and different screen different size, you can use following codes:
#media (min-width: 768px) {
.container {
width: 740px;
}
}
#media (min-width: 992px) {
.container {
width: 960px;
}
}
#media (min-width: 1200px) {
.container {
width: 1160px;
}
}
#media (min-width: SCREEN_WIDTH_IN_PIXELS) {
.container { // my element width for this screen
width: 1160px;
}
}
Use different css container class for buttons. For ex;
.body{
width: 100%
}
button {
color: #666;
border-color: #EBEBEB;
background-color: #EBEBEB;
text-align: center;
height:200px;
width:200px;
}
And then use for button,
<button class="button">Button</button>
I'm a (Dutch) first year student studying ICT&Media Design and we are working with HTML/CSS/JavaScript.
While creating a page for myself to work with javascript, html and css I stumbled upon some problems.
I can't scroll down to see my footer on the page's.
I'm pretty sure im doing something wrong with the fixed position but i can't seem to find out what exactly.
Hope you guys can help me, there's probably more wrong positioning wise.
Thank you in advance.
http://athena.fhict.nl/users/i299291/WP21/index.html
(School's Server)
your footer is not appearing because you are using unnecessary using position. Remove all of your position:fixed and position:absolute from your CSS and then page will scrollable and you can see your footer.
Here is the updated CSS; you can see all position are commented, no need to use them.
#header {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: relative; /* remove this line*/
width: 100%;
}
#menubar {
background-color: #2C2C2D;
border: 1px solid #FFFFFF;
height: 51px;
line-height: 20px;
margin: 261px auto 0; /* remove this line*/
position: absolute; /* remove this line*/
text-align: center;
vertical-align: middle;
width: 1280px;
}
#containerIndex {
background-color: #FFFFFF;
height: 530px;
margin-top: 330px;
opacity: 0.5;
position: fixed; /* remove this line*/
width: 1280px;
}
#footer {
background-color: #C6C7C0;
border: 1px solid #FFFFFF;
height: 48px;
line-height: 50px;
margin: 880px auto 10px;/* remove this line*/
position: fixed;/* remove this line*/
text-align: center;
vertical-align: middle;
width: 1280px;
}
Your footer has a fixed position. It is displaying behind your content. Get rid of that, and you should be able to scroll down to your footer.
I'm trying to create a website with only one page, that is responsive.
The idea is to scroll down with anchors.
However, I have no idea how can I get all the divs fill the whole screen as intended.
body {
width: 100%;
height: auto;
font-family: Source Sans Pro, Century Gothic;
background: url('images/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
margin: 0;
}
ul {
list-style: none;
}
#intro1 {
font-family:'Press Start 2P', cursive;
font-size: 80px;
display: block;
text-align: center;
margin-bottom: auto;
margin-top: auto;
top: 50%;
height: 100%;
width: 100%;
position: absolute;
}
#intro2 { //This doesn't work. I've also tried to set top with pixels.
top:100%;
height:600px;
width: 100%;
position: absolute;
font-size: 80px;
display: block;
text-align: center;
margin-bottom: auto;
margin-top: auto;
top: 50%;
font-family: Source Sans Pro;
height: 100%;
width: 100%;
}
#products { //This works fine for some reason.
top: 800px;
width: 100%;
position: relative;
background: url('images/circuit.jpg');
font-family: Source Sans Pro;
font-size: 16px;
margin: 0;
text-align: center;
}
How could I have each div to fill the whole screen?
I don't want to use any jQuery plugins, I've browsed
almost every one of the free ones.
You can use VH unit of css. this is actually unit of total viewport height.
So, 100vh = 100% height of the viewport.
Here is an example:
HTML:
<div id="content1" class="content">
content1 |
content2 |
content3
</div>
<div id="content2" class="content">
content1 |
content2 |
content3
</div>
<div id="content3" class="content">
content1 |
content2 |
content3
</div>
CSS:
.content{height:100vh}
#content1{background:#EEE}
#content2{background:#CCC}
#content3{background:#AAA}
JSfiddle: http://jsfiddle.net/Vj3dZ/
Reference: http://snook.ca/archives/html_and_css/vm-vh-units
Note: Before using, must check the browser compatibility : http://caniuse.com/viewport-units
I think you should set HTML { height: 100%;}
Check this question first
They work if you have set body to 100% and the other main divs too!
Set body height: 100; instead of auto
Then for #intro1 and #intro1:
Remove all types of positioning like margin,top etc. and then this would work....
basic demo (resize browser and then RUN it to see the div taking whole view-port area)
I'm using JQuery UI so that I can slide down a div using the blind function, however, it's not working properly.
Here's the JSFiddle I started: http://jsfiddle.net/CBe3w/192/
For some reason, the sides don't register until the sliding animation is done, at which point they pop out. How can I make it so that the sides are registered from start to finish (they should always be the width of the box class)?
HTML:
<div class="box">
Click Me!
<div class="footer">
Why does it do this?
</div>
</div>
CSS:
.box {
background: #f5f5f5;
width: 250px;
padding: 25px;
}
.footer {
background: red;
padding: 15px 25px;
margin-top: 25px;
margin-left: -25px;
margin-right: -25px;
display: none;
}
JS:
$('.box').click(function() {
$('.footer').toggle("blind");
});
I think the issue is with the order in which jQuery changes the attributes of the element when it toggles it, and the fact that you have negative margins set on the footer.
You could potentially take off the left and right padding of .box, and then put your .box content in a separate div inside, which has margins. Kind of a "hacky" way to do it potentially, though.
Here's a potential solution
The jQuery stays the same, only the CSS/HTML have changed.
See the jsfiddle
HTML
<div class="box">
<div class="content">Click Me!</div>
<div class="footer">
The sides don't pop out anymore!
</div>
</div>
CSS
.box {
background: #f5f5f5;
width: 250px;
/* took off the left and right padding */
padding: 25px 0;
}
.content {
/* "simulates" the padding of .box that you had before */
margin: 0 25px;
}
.footer {
background: red;
padding: 15px 25px;
/* took off the negative margins */
margin-top: 25px;
display: none;
}
You don't need jQuery UI at all: LIVE DEMO
$('.box').click(function() {
$('.footer').slideToggle();
});
<div class="box">
<h3>Click Me!</h3>
<div class="footer">
See how the sides popped Greatly?
</div>
</div>
.box {
background: #f5f5f5;
width: 300px;
padding-bottom: 15px;
}
.box h3{
padding:25px 25px 10px;
}
.footer {
background: red;
padding: 15px 25px;
display: none;
}
The explanation : Jquery UI blind effect will set margin:0 while it's animating on the height of your element.
You will have to redesign your html to split your .box in order to remove it's padding, otherwise, patch jquery-ui javascript to remove that 'margin:0' from the effect er,
you'll be able to fix this issue by positionning your inner container 'relative', so no html remake involved.
.footer {
background: none repeat scroll 0 0 #FF0000;
display: none;
left: -20px;
margin-top: 25px;
padding: 15px 25px;
position: relative;
right: 0;
width: 100%;
}
jsFiddled here
I'm trying to achieve a fixed width centred layout with headings that 'stretch' to the edge of the users browser. Like this...
Any ideas how I can achieve this?
This works splendidly. It could use some refinements, but the idea is quite solid.
Live Demo (edit)
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden
}
body {
background: #eee
}
#container {
width: 80%;
margin: 0 auto;
background: #bbb;
}
#menu {
overflow: auto
}
#menu li {
float: left;
width: 40px;
margin: 5px;
height: 24px;
background: #fff
}
h1, h1 span, h2, h2 span {
padding: 3px 0;
height: 25px;
}
h1, h2 {
position: relative;
margin: 9px 0
}
h1 span, h2.left span {
display: block;
position: absolute;
width: 100%;
left: -100%;
top: 0
}
h2.right span {
display: block;
position: absolute;
width: 102%;
left: 100%;
top: 0
}
h1 {
background: red;
width: 80%
}
h1 span {
background: blue /* blue for demonstration purposes */
}
h2.left {
background: red;
width: 30%;
float: left
}
h2.left span {
background: blue /* blue for demonstration purposes */
}
h2.right {
background: red;
width: 30%;
float: right
}
h2.right span {
background: blue /* blue for demonstration purposes */
}
#content {
clear: both
}
HTML:
<div id="container">
<h1><span></span>Heading</h1>
<h2 class="left"><span></span>Sub-heading</h2>
<h2 class="right">Sub-heading<span></span></h2>
<div id="content">
Hi!
</div>
</div>
Maybe you could use an illusion to accomplish this? You can try having a blue bar with width = 100% sit behind all of your page content, such that it is only exposed to the right of the blue "sub-heading" section, but always reaches the right edge. You just have to make sure you eclipse the rest of it (anything to the left of the blue "sub-heading" element).
if you want be fixed in the window you can use position:fixed otherwise position:absolute. Then with left:0 and right:0 you position them in the left or right side. Using top you can set the offset from top.
Demo: http://jsbin.com/awoke3
Perhaps this would work?
<h1 id="mainHeader">Heading</h1>
#mainHeader {
float:left;
clear:both;
width:800px;
background-color:#ff0000;
color:#fff;
}
Here is my attempt using JavaScript, maintaining a fixed width center: Demo
Otherwise, I don't think what you want is possible using pure CSS, but I could be mistaken.