I'm making a 2 column webpage layout. I wanna make a border that takes 100% of the page height. I have tried a few different things but I alwys get the same result, it only adds border whenever there's content. Anyone has some advice in this?
HTML
<body>
<div id="top">
<nav>
<a class="navitem" href="#">Stream</a>
<a class="navitem" href="/discover">Discover</a>
</nav>
<form action="#" class="form-wrapper cf">
<input type="text" placeholder="Search..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search...'" required>
<button type="submit">Search</button>
</form>
</div>
<div id="wrapper">
<div id="content">
<h1> Content</h1>
</div>
<div id="divider"></div>
<aside>
<h1>right bar</h1>
<footer>
<nav>
<a class="navitem_footer" href="/contact">Contact</a>
<a class="navitem_footer" href="/about">About us</a>
<a class="navitem_footer" href="/premium">Premium</a>
</nav>
</footer>
</aside>
</div>
</body>
CSS
#wrapper {
width: 990px;
margin-right: auto;
margin-left: auto;
}
#content {
width: 600px;
float: left;
}
#divider {
position: absolute;
overflow: hidden;
left: 900px;
right: 0;
top: 0;
bottom: 0;
border-left: 1px solid rgba(192,192,192,0.6);
}
aside {
float:right;
width: 390px;
}
footer {
height: 50px;
clear: both;
position:fixed;
bottom:0;
}
Thank you in advance.
I got the border working now, but its covering my header & i tried overflow hidden but that didn't work.
Screenshot : http://i62.tinypic.com/2czbp6s.png
For this you can use tag by which you can easily divide main page into 2 columns
and link will be your HTML pages
CODE:
<!DOCTYPE html>
<html>
<frameset cols="50%,50%" border="10" BORDERCOLOR=#ff0000>
<frame src="first_page.html" frameborder="1">
<frame src="second_page.html" frameborder="1">
</frameset>
</html>
And for 100% border you can use this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
position: absolute;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 5px solid red;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper {
width: expression((m=document.documentElement.clientWidth-10)+'px');
height: expression((m=document.documentElement.clientHeight-10)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
</div>
</body>
</html>
Related
I need help with my css code. I don't want my web site to scroll up and down, I want to make it full screen and responsive. I tried css height:100vh, height: 100% and height:1920px but it was still scrolling up and down. This problem is treated in a lot of place, but I could not find a solution that fit my need.
* {
margin: 0px;
padding: 0px;
font-family:sans-serif ;
}
body{
height: 100%;
width: 100%;
}
#sidebar{
margin: 90px 0px;
position: absolute;
width: 300px;
height: 100%;
background:#22356C ;
left: -240px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:white;
list-style: none;
text-align: center;
padding: 15px 10px;
}
#sidebar .toggle-btn{
position: absolute;
left: 310px;
top: 5px;
}
#sidebar .toggle-btn span{
display: block;
width: 30px;
height: 5px;
background:#22356C ;
margin: 5px 0px ;
}
#menu{
position: absolute;
margin: 40px 220px;
height: 128px;
width: 100%;
}
#menu1{
position: absolute;
margin:0px 100px;
color:white;
list-style: block;
}
#bolock{
height: 100%;
width: 100%;
}
#page{
position: absolute;
margin: 90px 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/stylesheet.css" integrity="" crossorigin="anonymous">
<link rel="stylesheet" href="css/mycss.css" integrity="" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Title</title>
<div id="sidebar">
<ul>
<li></li>
<li></li>
<li>
Admin <img src="icones/admin.png" height="35" width="35" align="right">
</li>
<li>Frigo <img src="icones/frigo.png"height="35" width="35"align="right"></li>
<li><img src="icones/arow%20(1).png" height="10" width="10" onclick="myFunction()"> Paramétrage<img src="icones/Composant%209%20–%201.png"height="35" width="35"align="right"> <ul id="Paramétrage">
<div id="menu1"style="display:none;">
<li>Alerts</li>
<li>Produit</li>
<li>contrainte espace</li>
<li>compte</li>
</div>
</ul>
</li>
</ul>
</div>
<nav class="navbar navbar-light bg-light">
<img src="icones/logo%20bws.png" class="d-inline-block align-top" alt="">
</a>
<div id="menu">
<img src="icones/balise.png"onclick="togglesidebar()">
</div>
<div class="row" id="logs">
<p>
<img src="icones/Groupe%20102.png"height="40" width="40">
</p><p>
<img src="icones/Groupe%20104.png"height="40" width="40">
</p>
</div>
</nav>
</head>
<body>
<div class="page">
<iframe name="bolock" frameborder="0" id="bolock"></iframe>
</div>
<script>
function togglesidebar() {
document.getElementById("sidebar").classList.toggle('active');
}
</script>
<script>
function myFunction() {
var x = document.getElementById("menu1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script src="css/popper.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/slim.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/bootstrap.min.js.js" integrity="" crossorigin="anonymous"></script>
</body>
</html>
responsive sidebar
you should add the property
overflow: hidden
to the body tag
What I understood from your question is that you want that there must be no scrolling at all in the web page, then add overflow: hidden;to the body and the your page will never scroll at all until there is no internal link in it. (learn more about overflow)
Now, the next thing, if you want the body to scroll but don't wants the sidebar to scroll along with it as if it is fixed. Then, try the position: fixed; property of CSS to the element which needs to be fixed at its place and should not be scrolling (learn more about positions).
I'm making a multipage website and I'm including a navbar and a footer on each page, the navbar is in place and works just fine but my footer is all over the place. In some pages it's exactly where it should be, others it's in the middle of the page but it was like that before I even added page content.
I've tried a few things I found online but nothing's worked so far.
HTML:
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/navFooter.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="navbar"></div>
<div class="col-md-12">
<table class="table">
<td style="border: none;"><p>Choose the type of comparison you'd like to make.</p></td>
<td>
<b>Quick Comparison</b><br>
Compare all counties<br>
<b>Custom Comparison</b><br>
Compare selected counties and/or jurisdictions only
</td>
</table>
</div>
<div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$("#navbar").load("navbar.html");
});
$(function(){
$("#footer").load("footer.html");
});
</script>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
}
body {
padding-top: 90px;
position: relative;
overflow: scroll;
}
.footer {
position: absolute;
margin: 0;
width: 100%;
background-color: #19D8FF;
padding: 25px;
border-top: 4px solid #3399CC;
min-height: 150px;
max-height: 250px;
}
Footer HTML:
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-3 pull-left">
<img src="img/Wordmark.png" alt="Logo">
</div>
<div class="col-md-5">
Links |
Contact |
A-Z Index |
Site Map |
Disclaimer</li>
</div>
<div class="col-md-4">
<p class="muted pull-right">© 2017 All rights reserved</p>
</div>
</div>
</div>
</footer>
This code should put you in the right direction. I added bottom: 0 and changed the position to fixed. I also removed an uneeded tag you had. This will put it at the absolute bottom of the view and always be fixed at the bottom.
html, body {
height: 100%;
width: 100%;
}
body {
padding-top: 90px;
position: relative;
overflow: scroll;
}
.footer {
position: fixed;
bottom: 0;
margin: 0;
width: 100%;
background-color: #19D8FF;
padding: 25px;
border-top: 4px solid #3399CC;
min-height: 150px;
max-height: 250px;
}
Is there a different way of going about my CSS?
I've got some html code along with some CSS styling trying to generate a PDF where my sample text container/div is floating right. If I load the html site up itself, the CSS is all correct and looks fine. But when I convert from the code to PDF file, it outputs wrong. Can anyone suggest a way which would work?
My code:
<html>
<head>
<style>
#page {
margin: 0px 0px 0px 0px;
}
body {
height: 100%;
margin: 0px 0px 0px 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: orange;
}
#bottom {
bottom: 0;
background-color: green;
}
div.mainLayout{position: relative;float:right;width:50%;height:100%;}
.textstuff {
background-color:aqua;
left:0;
height: 100%;
width:100%;
}
</style>
</head>
<body>
<div id="top">
<div class="mainLayout">
<div class="textstuff">
<center>
<font size="5" style="padding-bottom:5px">Sample Text 1</font><br />
<font size="4" style="padding-bottom:5px">Sample Text 2</font><br />
<font size="5" style="padding-bottom:25px">Sample Text 3</font><br />
<font size="4">Sample Text 4</font>
</center>
</div>
</div>
</div>
<div id="bottom">
<div class="mainLayout">
<div class="textstuff">
<center>
<font size="5" style="padding-bottom:5px">Sample Text 1</font><br />
<font size="4" style="padding-bottom:5px">Sample Text 2</font><br />
<font size="5" style="padding-bottom:25px">Sample Text 3</font><br />
<font size="4">Sample Text 4</font>
</center>
</div>
</div>
</div>
</body>
</html>
What is being rendered as HTML file (correct):
What is being rendered as PDF file (output is incorrect, should be like what's above):
I modified the CSS to work on the PDF:
<style>
#page {
margin: 0px 0px 0px 0px;
}
body {
height: 100%;
margin: 0px 0px 0px 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#top, #bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
}
#bottom {
bottom: 0;
}
div.mainLayout{height:100%;}
.communitylogotop {
bottom: 41px;
}
.text {
margin-right:50px;
margin-top:65px;
width:44%;
float:right;
}
</style>
And my body now looks like this:
<div id="top">
<div class="mainLayout">
<div class="text">
HERE's..
</div>
</div>
</div>
<div id="bottom">
<div class="mainLayout">
<div class="text">
...STUFF
</div>
</div>
</div>
I want the footer to stay at the bottom of the page. Right now, it's at the top... I've posted my html and all my css so you can see. I figured it might be easier to do it that way? I've tried to add containers that stretch the body to the bottom, but it messes with my other containers on the page and makes them fall off way into the top. I need a quick answer because this is due in a week!
* {
margin:0;
padding:0;
}
body {
font-family:Arial;
background:#fff url(images/bg1.png) repeat;
background-size: 700px;
height: 100%;
min-height: 100%;
}
.title {
width:548px;
height:119px;
position:absolute;
background:transparent url(title.png) no-repeat top left;
}
#content {
margin:0 auto;
}
#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block;
}
#stuff {
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #fff;
opacity: 0.6;
margin-left: -500px;
position: absolute;
top: -125px;
left: 50%;
width: 1000px;
height: 250px;
visibility: visible;
overflow: scroll;
padding: 10px;
border: 5px dotted #F3DECD;
text-align: center;
}
footer {
}
<body>
<div id="content">
<div class="title"></div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<h2>Home</h2>
<ul>
<li>About the Shop</li>
<li>About the Artist</li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>How-To's</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<h2>Portfolio</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
<li>Digital</li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<h2>Contact</h2>
<ul>
<li>Questions</li>
<li>Suggestions</li>
</ul>
</div>
</div>
</div>
<div id="horizon">
<div id="stuff">
<h2> Welcome! </h2><br>
<p>This is a page that I have created for all my jewelry. This will be updated with new information periodically.</p>
</div>
</div>
<footer>
<a href="">
<img height="32" width="32" alt="'s Deviantart" src="deviantart.png">
</a>
<a href="">
<img height="32" width="32" alt="'s Think Jewelry Page" src="facebook.png">
</a>
</footer>
you could simply set a div with a position of absolute. It would look something like this:
html:
<div id='footer'></div>
css:
#footer{
height:45px;
width:100%;
background-color:grey;
position:absolute;
bottom:0;
}
You can use a fixed footer:
HTML
<footer>
...
</footer>
CSS
footer {
position: fixed;
left: 0px;
bottom: 0px;
height: 150px;
width: 100%;
}
The footer will always be visible in the viewport at the bottom of your page, check out this codepen.
If you are looking for a sticky footer approach check this.
For a sticky footer that is always present at the end of main content, I’ve always found using a wrapper containing a negative push div (set as the same size as the required footer) is a simple, yet the most solid approach.
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
min-height: 100%;
margin: 0 auto -150px;
}
.push {
height: 150px;
}
footer {
height: 150px;
background-color: #900; /*red */
}
HTML
<html>
<head>
<!-- -->
</head>
<body>
<div class="wrapper">
<p>Main Content</p>
<!-- -->
<div class="push"></div>
</div>
<footer>
<p>Footer Content</p>
<!-- -->
</footer>
</body>
</html>
See codepen example here:
http://codepen.io/anon/pen/EaPRQb
Simply change the push div and footer heights to be the desired height (in my example 150px) and the wrapper's bottom margin to be a negative of that height (ie. -150px in my example)
You can try like this,
footer
{
position:fixed;
}
I have a outer div which is working correctly in chrome, firefox but not in IE.. I have some contents inside outer div.. to make it center aligned or middle of page i gave this width:970px; height:630px; to outer div... so that i got the contents at the center in chrome and Mozilla... but in the case of IE 7.. in IE its left aligned..
here is my css....
<style type="text/css">
body, html
{
font-family:helvetica,arial,sans-serif;
font-size:90%;
}
div.outer
{
display: block;
margin-left: auto;
margin-right: auto;
width:970px;
height:630px;
position:relative;
}
</style>
here is my full code:
<head><title>home</title>
</head><body class='claro'><div class='outer' style="border:1px solid black;">
<div id="dottedBorderhome">
</div>
<div id="dragIconhome">
</div>
<div class="claro" id="menuDiv2" onclick="setWidgetproperty(this.id,'x','navMenu2');" onmousedown="setMenuBarProperty('navMenu2');" onmouseup="setDocStyle(this.id)" style="border: 1px dotted white; left: auto; position: absolute; top: 17px;">
<!-- here one menu bar will come -->
</div>
<div class="claro" id="divlabel43" onclick="setWidgetproperty(this.id,null,'divlabel43')" onmouseup="setDocStyle(this.id)" style="left: 50px; position: absolute; top: 92px; text-align: right; font-family: Times; font-size: 15pt; font-weight: bold;" >
<label id="label43" onclick="setLblProperty(this.id)" onmouseover="editName('divlabel43',this.id,'label')">
Worklist Manager
</label>
</div>
<div class="claro" id="htmlTableDiv9" onmouseup="setDocStyle(this.id)" style="left: auto; position: absolute; top: 130px; height:70px; width:150px;">
<!-- here its contains table -->
</div>
<div class="claro" id="divImage2" onclick="setWidgetproperty(this.id,'xy','image2')" onmouseup="setDocStyle(this.id)" style="left: auto; position: absolute; top: 70px;">
<img class="images" id="image2" name="Search-icon2.png" onclick="setImgProperty(this.id)" src="images/uploads/Search-icon2.png" style="height: 50px; width: 58px;">
</div>
<div class="claro" id="menuDiv1" onclick="setWidgetproperty(this.id,'x','navMenu1');" onmousedown="setMenuBarProperty('navMenu1');" onmouseup="setDocStyle(this.id)" style="border:1px dotted white; left: auto; position: absolute; top: 640px;">
<!-- here another menu bar -->
</div>
<div id="CWPWORKLIST__1" onclick="setWidgetproperty(this.id,'xy','inner__CWPWORKLIST__1')" ondblclick="editDataGridResponseMapping(this.id)" onmouseup="setDocStyle(this.id)" style="left:auto; position:absolute; top:340px; height: 296px; width: 921px;">
<!-- here another table-->
</div>
</div></body>
As Sven suggested, https://stackoverflow.com/questions/4742877/center-align-div-in-internet-explorer likely holds your answer. Either you've got non-valid HTML that is putting IE7 in quirks mode, or you're missing the doctype.
Try this
<style type="text/css">
body, html
{
font-family:helvetica,arial,sans-serif;
font-size:90%;
}
div.outer
{
display: block;
margin:0 auto;
width:970px;
height:630px;
position:relative;
}
</style>
Use code with proper doc type.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">