I have made a very simple site. You can see the page (code below) here: https://googledrive.com/host/0B2uK7byfkiwySHc5eU5CM25kcmM/index.html
My problem is the content div (with the sample code, right below the navigation bar). I need it to reach until the footer. I need it to reach until the footer no matter how I resize the page, never going under it, nor leaving too much room between it and the footer.
I would be ok with it not reaching the bottom if the content inside it does not require it do so, however, if the content is scrollable, I need it to reach until the footer. Also, I don't want the whole page to scroll, only this content div.
I have tried many solutions (a container div, tables, jquery resizing, etc.) unsuccessfully, and am a loss to how this can be accomplished. So, I uploaded the basic code without my solutions to see if someone could help me out :)
Thanks!
<html>
<head>
<style type="text/css">
body {
background: #e6e6e6;
}
#title{
margin:0 0 0 0;
text-align: center; font-size:40px;
font-family: "League-Gothic", Courier;
color: #707070; font-weight:600;
}
#navbar ul {
margin: 0; padding: 5px;
list-style-type: none;
text-align: left; background-color: #005ab3;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#navbar ul li {
display: inline;
font-family: Arial;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #005ab3;
}
#navbar ul li a:hover {
color: #005ab3;
background-color: #fff;
}
#content {
background-color: #fff; font-family: Arial;
border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
padding: 5px; padding-left: 15px; padding-right: 15px;
height: 70%;
overflow: auto;
}
#footer {
position: fixed;
bottom: 0; left:0; width: 100%;
background: #005ab3;
line-height: 2;
text-align: center; color: #fff;
font-size: 15px; font-family: sans-serif;
}
</style>
</head>
<body>
<div id = "title">Title</div>
<div id = "navBar">
<ul>
<li><a id ="link1" href="#">Link 1</a></li>
<li><a id ="link2" href="#">Link 2</a></li>
<li><a id ="link3" href="#">Link 3</a></li>
</ul>
</div>
<div id = "content">
<h1> Sample content (1984)</h1>
<p>It </p>
<p>The </p>
<p>Inside </p>
<p>Outside, </p>
<p>Behind </p>
<p>Winston </p>
<p>The </p>
<p> WAR IS PEACE </p>
<p> FREEDOM IS SLAVERY </p>
<p> IGNORANCE IS STRENGTH </p>
</div>
<div id = "footer">Footer</div>
</body>
</html>
Take a look at this fiddle: http://jsfiddle.net/c92z2/
I think I understand what you're saying and I got a great answer from here: CSS 100% height with padding/margin
He writes about a great way to stretch a content box.
.stretchedToMargin {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
margin-bottom:20px;
margin-right:80px;
margin-left:80px;
background-color: green;
}
Look at this jsFiddle.
Let me know if this is not what you were looking for.
.title-bar {
position: fixed;
width: 100%;
top: 0;
background-color: #ccc;
}
Related
I am pretty new to this. I am hoping for some help and advise keeping my divs side by side. One is a menu which works fine but now my content is overlapping and I'm not sure what I did. I should make multiple saves. any advice on positioning my divs would be crazy appreciated.
apologies if my formatting of the post is wrong. brain is fried and my website is due for class tomorrow.
body {
background-color: #35455e;
}
h1 {
text-align: center;
font-size: 400%;
color: #ecb3ff;
padding-left: 30px;
}
h2 {
text-align: center;
font-size: 300%;
color: #ecb3ff;
padding-left: 40px;
}
ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}
a {
color: white;
text-decoration: none;
font-size: 125%;
padding-left: 12px;
}
a:hover {
color: #fff666;
}
a:active {
color: #9bc1ff;
}
div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}
div.main{
position: relative;
top: 500px;
right: 500px;
}
li {
width: 30%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Madison Art Portfolio</h1>
<ul>
<li>Home</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div><!--closing of header-->
<div class="main">
<h2>Madison Art Portfolio</h2>
</div><!--CLOSING OF MAIN-->
</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>
As you are using position:fixed; in div.header and position:relative; in div.main you can change the stack of them using z-index value in CSS. if you want your header on the front side and main on the back side then add z-index:2 in div.header and z-index:1 in div.main.
it is overlapping because you have specified the fixed position to the header which is placing the header on the fixed place and anything on the page will overlap with the header. you can try position:absolute
Remove all the code from div.main. It's not required. Also remove position: fixed from the div.header block.
I am trying to get a left menu and a right banner and have them stay fixed in place when the centre panel scrolls text - the banner will have to be on top of the centre panel due to size - the colour scheme is white text on black background except for the menu which is an <ul> with its own colour scheme
I am rather new to css so may have already made a prat of myself - I have tried but currently the top right banner does stay fixed when scrolling but the text overlays it and the top left menu shoots off the screen
JS Fiddle
<head>
<style>
#container {
width:90%;
height 100%;
background-color:Black;
margin: 0 auto;
text- align: left;
}
#banner {
float: right;
background-color:black;
width:40%;
top:1;
right:1;
position:fixed
}
#sidebarmenu {
float: left;
width: 10%;
background-color:Black;
padding: 15px 10px 15px 20px;
top:1;
left:1;
position:fixed
}
#mainContent {
background-color: Black;
color:White;
position: absolute;
left: 120px;
width: 50%;
top:220;
margin: 0 0 0 15%;
}
body {
color: white;
background-color: black;
}
.sidebarmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px;
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li a {
display: block;
overflow: auto;
color: black;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active {
background-color: #c0c0c0;
}
.sidebarmenu ul li a:visited {
color: white;
}
.sidebarmenu ul li a:hover {
background-color: black;
color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="banner" ><img style="float:right" alt="logo text" src="/banner.png" /></div>
<div id="mainContent" >TEXT</div>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>Home</li>
<li>Info</li>
<li>Contact Us</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</div>
</div>
</body>
any help /comments / guidance on what I should be learning /looking at is appreciated
Phew! Where to start? lol Your code needed to be fixed pretty much on every line. I have a reworked demo here but basically, you must pay attention to site architecture when you are positioning elements. Organization is everything is front end development.
See DEMO
First of all, once you start using position: absolute; or position: fixed;, using float and margin becomes irrelevant.
Also, when using top: x;, left: x;, right: x;, or bottom: x; always make sure to add a size unit to your value, i.e. top:1; should be top: 1px;
If I understood correctly from the css you posted, something that'll get you closer to what you want to achieve is this:
html,body{ margin: 0; padding: 0; color: #fff; background: #000; height: 100%; width: 100%; overflow: hidden; }
#container { width:100%; height: 100%; text-align: left; overflow: auto; border: 1px red solid;}
#mainContent { width: 90%; color: #fff; margin: 0 auto; }
#banner { background-color: #000; width:40%; top:1px; right:1px; position:fixed; }
#sidebarmenu { width: 10%; background: #000; padding: 15px 10px 15px 20px;top:1px;left:1px;position:fixed; }
Take a look at this jsfiddle I made to see what this css does: http://jsfiddle.net/beYuC/
NOTE: You might have noticed I made the html and body have a height of 100%. This is because unless you set a height for the html and body, any other element on the page you want to make 100% will simply be flattened out.
NOTE 2: Be sure to check out this website and its CSS for an example of a well done content container and sidebar menu with 100% height: http://www.jlescure.com/
I am trying to position some html elements (particularly h1 and p) under a position: fixed div without having to use the <br> element, because if the top div gets resized (in height), then it will overlap the <h1> and <p> element. Since this type of question usually needs code, here it is:
index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Home | lobuo</title>
<link type="text/css" rel="stylesheet" href="stylesheet-main.css">
</head>
<body>
<div id="menuBack">
<ul id="menuBar">
<li class="menuItem">Home</li>
<li class="menuItem" class="subMenuHolder">
<a>Projects ▾</a>
<ul class="subMenu">
<li>Minecraft projects</li>
<li>Minecraft mods/plugins</li>
<li>Web apps</li>
</ul>
</li>
</ul>
<a href="https://github.com/lobuo">
<img class="socialIcon" src="img/Octocat.png" />
</a>
<a href="https://www.youtube.com/LobuoDev">
<img class="socialIcon" src="img/YouTube-icon-full_color.png" />
</a>
</div>
<br><br><br><br>
<div>
<h1>Welcome to my website!</h1>
<p>This is my website. I know how to code a little HTML and JavaScript. I do not have many projects here yet, but there will be some soon. The website is currently under construction, so don't be too dissapointed if a link doesnt work, or a page doesnt exist.</p>
<p>If you find something wrong with the website, you can report it as a bug <a>here.</a></p>
</div>
</body>
</html>
and here is the stylesheet-main.css file:
body {
margin: 0px;
}
#menuBack {
height: auto;
width: 100%;
background-color: rgba(9, 52, 100, 0.92);
position: fixed;
}
.menuItem {
color: #e5822e;
display: inline-block;
font-size: 25px;
font-family: verdana, sans-serif;
padding-left: 15px;
padding-right: 15px;
}
.menuItem:hover {
color: #ab6122;
background-color: rgba(48, 95, 147, 0.92);
}
.socialIcon {
height: 30px;
display: inline-block;
vertical-align: middle;
float: right;
padding: 20px;
}
a {
text-decoration: none;
color: #f44d4d;
}
h1 {
font-family: sans-serif;
text-align: center;
}
p {
font-family: "andale mono", "courier new", courier, serif;
padding: 10px;
}
/* MenuBar dropdown menu came from here: http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/ */
#menuBar {
float: left;
}
#menuBar > li {
float: left;
}
#menuBar li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menuBar ul {
position: absolute;
list-style: none;
left: 7.1em;
display: none;
}
#menuBar ul li a {
width: auto;
background-color: rgba(9, 52, 100, 0.92);
}
#menuBar ul li a:hover {
background-color: rgba(48, 95, 147, 0.92);
}
#menuBar li:hover ul {
display: block;
}
Thanks in advance :D
Set the margin-top of the div that you need to be pushed down.
So wrap everything that needs to be pushed down in a div with a class name. Like:
<div class="container">
//everything that needs to be pushed down goes here
</div>
Then in your css you can push that whole container down by setting it's margin-top
.container {
margin-top: 100px;
}
Try setting position to sticky instead of fixed and give it a top: 0px;
I tried to make a banner for my website I'm creating, but when I add it to my website, it turns out really bad with the text. I'm wondering if I can add text to my banner using HTML5 and / or CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
display: block;
width: 100%;
}
.banner_h img{
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
I'm trying to center / centre my text on the banner, with a white coloured font (font can be varied). What do I have to do to make this happen? Thanks!
It depends on the kind of text you will be adding to the banner. If you want to add text that will be static (as in, it will never or rarely change) and want to add custom fonts, you should probably edit the image in Photoshop.
On the other hand, if the content in the banner will change constantly, then I would suggest adding the image as a background. Your banner h class would look something like this:
.banner_h{
display: block;
width: *actual pixel size of the banner*;
height: *actual pixel size of the banner*;
background: url('*location of file*') no-repeat;
}
If you leave the width to a percentage what will happen is that the div will not have anything inside of it and thus will not show the banner, so you need to figure out what the actual width and height of the banner is and put it in this CSS declaration so that it shows the banner.
Once you have done this, delete the image from the tag and replace it with the content you wish to add.
So I have some CSS generating this.
The HTML code as follows.
<div class="menu">
<ul>
<li><a href='index.html'>Home</a></li>
<div class="menutab"></div>
<li><a href='about_us.html'>About Us</a></li>
<div class="menutab"></div>
<li><a href='#'>Order Online</a></li>
<div class="menutab"></div>
<li><a href='gallery.html'>Gallery</a></li>
<div class="menutab"></div>
<li><a href='#'>Contact Us</a></li>
<div class="menutab"></div>
</ul>
</div>
And the CSS
.menu {
width: 100%;
height: 220px;
float: left;
margin-left: -20px;
position: relative;
text-align: center;
}
.menu li{
display: block;
list-style: none;
width: 100%;
background: #EBE5D9;
height: 50px;
margin-left: -40px;
margin-top: 5px;
line-height: 50px;
}
.menu li:hover {
background: #AEC32A;
}
.menu li a{
text-decoration: none;
font-size: 20px;
color: #000000;
font-family: fantasy;
}
.menutab {
width: 30px;
position: relative;
margin-top: -3px;
margin-left: -71px;
border-right: 21px solid #EBE5D9;
border-bottom: 21px solid transparent;
}
Basically what I am wanting is for the hover effect to turn the whole thing green, currently .menu li:hover turns the block the colour #AEC32A but I also want it to turn the .menutab border the same colour, anyway of doing this? preferably without using Javascript.
Thanks in advance for your help :-)
Try the adjacent selector.
.menu li:hover+.menutab {
border-right-color: #AEC32A;
}
JS Bin Demo
This is no problem with the adjacent sibling combinator.
Simply add this to your css:
.menu li:hover + .menutab{
border-right-color: #AEC32A;
}
This selects the immediately preceeding element (.menutab) of the first element (.menu li:hover).
see the live demo
Browser-support is 100% if you don't care for old IEs <(=) 8;)