I'm having a HUGE problem, geting my masterpage layout to stretch to 100% browser window height. There is no problem for width. I tried many different solutions, but none worked.
This is what I have so far. I managed to expand html and body to height:100%, but div#container is giving me problems...it wont expand to height:100%. For testing purposes I put borders arround html, body and container, to see which one isn't working. Any help appritiated. I'm designing my web app in VS2010 and using Chrome (also tested in IE and Mozilla with no success).
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="headercontent">
HEADER
</div>
<div id="leftcontent">
<p>LEFT CONTENT</p>
<p>MENU</p>
<p>MENU</p>
<p>MENU</p>
</div>
<div id="rightcontent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footercontent">
FOOTER
</div>
</div>
</form>
</body>
</html>
And my stylesheet.css
body{
font-family: "Lucida Grande" , "Lucida Sans Unicode" , Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
background: yellow;
}
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 2px solid red;
}
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 2px solid blue;
}
#container{
width: 100%;
height: 100%;
margin: 0px;
border: 2px solid black;
line-height:150%;
}
#headercontent{
height: 70px;
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
#leftcontent{
float: left;
width: 160px;
margin: 0;
padding: 1em;
border-right: 1px solid gray;
}
#rightcontent{
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
}
#footercontent{
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
Your body element IS 100% height as you set it but you've not set the contents to anything to position anywhere so they follow the normal flow, like a stack of boxes, as they should. You also don't have enough content to fill the screen. If you want the footer to stick to the bottom, search here on SO or Google for "sticky footer".
If you want some of the content to stretch further, you'll have to add some height to those.
Just do the following:
Set html and body to height: 100%;:
html,
body {
height: 100%;
}
Next step: wrap your form with a container and gibt it a minimum height of 100%:
#wrapper {
min-height: 100%;
}
This won't work in IE6. Therefor add a little hack:
* html #wrapper {
height: 100%;
}
Your #container element is nested inside your <form> tag, so even though you've set the height of #container to 100%, this will set it's height to 100% of it's parent element i.e. the <form> tag.
Try moving your #container <div> tag so it sits outside the <form> tag like this: http://jsfiddle.net/ianoxley/E4zAm/
If you can live with having div#container using position: absolute, you can use this little trick:
#container{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0px;
border: 2px solid black;
line-height:150%;
}
Setting all four layout attributes (top/right/bottom/left) to the values you want will cause the element to stretch to accomodate those values.
Related
/*
Project Name: Monthly Resolutions
Client: One Month
Author: Christopher Castig | #castig
*/
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
font-family: 'Lato', sans-serif;
}
html {
margin: 0px 0px 0px 0px;
}
.clear {
clear: both;
}
h1 {
padding: 0px 0px 0px 0px;
font-size: 60px;
margin-bottom: 0%;
letter-spacing: -4px;
margin-left: 100px;
line-height: 1;
margin-top: 100px;
}
h6 {
font-size: 17.5px;
margin-top: 0%;
margin-left: 100px;
}
body {
background: url(/Users/harshfernandes/Desktop/Coding/fourth-code-resources/images/notebook.png); /* add a fallback color of #d6d6d6 */
color: #000000;
font-family: 'Lato', sans-serif;
font-size: 100%;
width: 1200px;
}
#rheading {
font-size: 40px;
margin-top: 30px ;
margin-bottom: 2px;
}
#container {
width: 1200px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#caption {
color: rgb(88, 88, 88);
font-size: 15px;
margin-bottom: 70px;
}
#content {
background: white;
float: left;
width: 680px;
padding-left: 30px;
padding-right: 30px;
margin-left: 100px;
}
#sidebar {
float: left;
background: white;
width: 310px;
border: 3px;
border-style: solid;
border-top: none;
border-right: none;
border-color:rgb(192, 192, 192);
margin-left: 10px;
padding: 15px 15px 15px 15px;
margin-right: 100px;
}
#footer {
margin-top: 30px;
margin-bottom: 20px;
margin-left: 100px;
}
a {
color: orange;
text-decoration: none;
}
.image {
border-radius: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
blockquote {
font-style: italic;
border-left: 4px solid gray;
padding-left: 20px;
margin-left: 0px;
}
<!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">
<meta name="description" content="">
<meta name="author" content="Chris Castiglione, and the One Month team">
<title>Monthly Resolutions by Harsh Fernandes</title>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fourth-code-resources/css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Monthly Resolutions</h1>
<h6>Dreaming Aloud. 30 days at a time.</h6>
</div>
<!--header-->
<div id="content">
<p id="rheading"> Learn to Surf </p>
<img src="fourth-code-resources/images/surfing.jpg" alt="surf image" class="aligncenter" width="620px">
<p> This april I will travel to the Carribean and take surfing lessons.</p>
<hr>
<p id="caption">My April Resolution by Harsh Fernandes</p>
<p id="rheading">Read Everyday</p>
<img src="fourth-code-resources/images/book.jpg" alt="book" class="aligncenter" width="620px">
<p>This Month I will read at least 50 pages everyday, including weekends.</p>
<hr>
<p id="caption">My March Resolution by Harsh Fernandes</p>
<p id="rheading">Meditate</p>
<img src="fourth-code-resources/images/meditate-girl.jpg" alt="Meditate" class="aligncenter" width="620px">
<p>I will take a meditation class and practice meditating at least 20 minutes everyday for the month. Hopefully I won't fall asleep every time I meditate.</p>
<hr>
<p id="caption">My February Resolution by Harsh Fernandes</p>
</div>
<!--content-->
<div id="sidebar">
<img class="image" src="fourth-code-resources/images/chris-castiglione.jpg" alt="Chris">
<p>This blog was made by Harsh Fernades (I don't look like that)</p>
<h3>Follow Me</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
<li>Facebook</li>
</ul>
<h3>Quote of the Day</h3>
<blockquote>
<p>"We are what we repeatedly do. Excellence, then, is not an act, but a habit."</p>- Aristotle</blockquote>
</div>
<!--sidebar-->
<div class="clear"></div>
<div id="footer">
Made with the help of One Month HTML by Chris Castglione
</div>
<!--footer-->
</div>
<!--container-->
</body>
</html>
strong text
I am learning to code through this website and for my first proper project, we had to build a static website which has to look as similar to the screenshot. I got everything right except for the margin on the right. I even tried using inspect element and it appears to be coming from my body but even after setting my body's margin to 0, nothing changed. Since this is for beginners, it shouldnt be that difficult but I am REALLY struggling with this for hours. Please help me.
This is what it is supposed to look like
This is what it looks like at 100% zoom
It does look pretty close but here are the main issues:
Margin: 0 is All around the body element and the .container class, and in terms of default that means everything is pushed to the left, there is not default centering.
With a static 100px margin and a float: left on your #content it does give a close approximation of what the image is, but again this is based on your screen size. If your screen were widened it would look incorrect from left to right.
SOLUTION: The simplest solution for things like content and containers, or simply body elements, is
{ margin-left: auto; margin-right: auto; }
As you did with the images.
If you want to do it in shorthand you can declare multiple margin attributes in one line, such as Top & bottom being 0 margin and left and right being auto would be
{ margin: 0 auto;}
Source for shorthand
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
This will help you, change your style (body & #container) like this :
body {
background: url(/Users/harshfernandes/Desktop/Coding/fourth-code-resources/images/notebook.png); /* add a fallback color of #d6d6d6 */
color: #000000;
font-family: 'Lato', sans-serif;
font-size: 100%;
width: 100%;
overflow-x: hidden;
}
#container {
display: table;
margin: 0 auto;
}
The header covers my websites and half of my opening welcome is covered, what css properties can I use or changed can I make to fix this?
I was experimenting my stuff and now it looks weird. You can see it at http://algninja.000webhostapp.com/
body {
background: purple;
}
div.a {
margin:25px 10px 25px 10px;
text-align: center;
background: gold;
color: purple;
border-radius: 10px;
padding: 5px 25px;
}
#header {
position:fixed;
left:0;
top:0;
width:100%;
background-color:#13AFF2;
z-index:2;
}
button.projectsbutton {
color: purple;
border:none;
background: gold;
padding:15px 32px;
font-size: 20px;
}
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id = "header">
<button onclick = "window.location.href = 'https://google.com';"class = "projectsbutton"><b>projects</b></button>
</div>
<div class = "a">
<h1>Welcome to my website</h1>
<h3>Look around, and see what u can find</h3>
</div>
</body>
</html>
You can add the following to div.a
position: relative;
top: 100px; /* or whatever value you like */
or you can increase to top margin value from div.a if you change the margin line from
margin: 25px 10px 25px 10px;
to
margin: 100px 10px 25px 10px;
So I just got done making my first JQuery project which is a simple full width slider. (Getting back to HTML & CSS & im currently working in C#)
Here is the issue; I dont want to be able to scroll on the page I want it to be autofit to the webpage.
Lets say I open the webpage right now, I want resize it how ever I want its responsive & its working like a charm. but you can still scroll down.
(Feel free to try it yourself with my code)
I remember this being really simple to fix but for some reason I cant remember how I did it back in the day. I'm pretty sure I will have to change something with the height; it in the CSS file or inside the body of the HTML source.
Here is the fiddle
My CSS file is completly empty.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
</style>
</head>
<body>
<div class="container">
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>
try this code.
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{height:100%;width:100%;overflow: hidden;}
.cycle-slideshow {
height: 100%;
where
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
and if you want to change the size, just change .container
I've looked at several topics on stackoverflow and other sites, but none of the proposed solutions seem to work for me.
The problem is that no matter what I've tried, I still have a scrollbar added to the page that is the same height as the padding on the top of the container (wrapper) div. I can only make it work by fiddling with the min-height on the container div, which obviously wouldn't always work, and besides, is a really sloppy way to handle it. Here's the code.
HTML:
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</body>
(I've tried the footer inside and outside, with the same results.)
Here's the relevant CSS:
html, body {
height: 100%;
}
body > #container {
height: auto;
min-height: 100%;
}
#content {
height: 100%;
position: relative;
}
body {
margin: 0;
padding: 0;
color: #FFF;
background: /*image here*/;
background-size: cover;
overflow: auto;
}
#container {
width: 100%;
padding-top: 50px;
position: relative;
}
#header {
background: /*image here*/;
height: 130px;
box-shadow: 4px 2px 5px #000;
border-top: 2px solid #F8F8F8;
border-bottom: 2px solid #F8F8F8;
overflow: hidden;
}
#footer {
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: #FFF;
clear: both;
}
There may be some odd overflows in there, but they've been thrown it at different points trying to fix the problem. I use a background image that covers the entire background of the site, and a background image for the the header.
Any fiddling with the overflows, heights, margin/padding, or relative/absolute/fixed positioning have either yielded worse results, or the same results.
I'm trying to do this without JS, but if all else fails, I'm willing to resort to that. If that's the case, would anyone mind pointing me to a related JS stackoverflow question and/or a tutorial?
Thanks in advance for any advice.
You didn't provide what browser you are trying to do this in, but assuming it is a modern browser, I have found that the cleanstickyfooter technique works the best. (All credit to Trevor Sheridan for this technique.) I have created an example here on JSFiddle so you can see the implementation. You can adjust the widths, etc, as you need to. The first link provides a lot of good detail.
Per SO requirements, here is the HTML:
<body>
<div id="wrapper">
<div id="content_wrapper">
<div id="content_inner_wrapper">
<div>Site content will be contained here.</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer_inner_wrapper">
<div>The footer's content</div>
</div>
</div>
</body>
and CSS:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
}
div#wrapper {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 0px -41px 0px;
}
div#footer_wrapper {
width: 100%;
height: 41px;
background-color: red;
}
div#content_wrapper {
width: 100%;
padding: 0px 0px 41px 0px;
}
div#footer_wrapper, div#content_wrapper {
min-width: 500px;
}
div#footer_inner_wrapper, div#content_inner_wrapper {
width: 500px;
}
I am trying to show a message on the top - center of my web page. I create a very basic example :
http://jsbin.com/eniwax/3/edit
Here the problem is with message container with. I want to set the container width equals to the message text width means ( auto, width vary according to the size of message ).
Do it like this DEMO
Explanation: Use a nested div and make the container div width as 100% and give text-align: center; to the container div
CSS
.test {
top: 0;
text-align: center;
position: relative;
width:auto;
z-index: 100;
border: 1px solid #F0C36D;
background-color: #F9EDBE;
font-size: 12px;
font-weight: bolder;
padding : 4px;
display: inline-block;
}
.container {
width: 100%;
text-align: center;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="test">I am a sample text</div>
</div>
</body>
</html>
Use a <span /> inside your div rather than a <div /> on it's own.
Divs are block level elements which means they fill all the available width that they have. Spans are inline which means they are only as wide as their contents.
Give display: inline-block; and text-align: center; to the parent.
body {text-align: center;}
.test
{
top: 0;
text-align: center;
position: relative;
width:auto;
display: inline-block;
z-index: 100;
border: 1px solid #F0C36D;
background-color: #F9EDBE;
font-size: 12px;
font-weight: bolder;
padding : 4px;
}
Demo: http://jsbin.com/eniwax/15