I have a footer div that is just a solid colour that I would like to sit at the bottom outside of my container DIV which is called 'mainhome'. I would like it to stretch the entire site. It just keeps sitting on top of my banner - I'm getting lost in the code now so maybe i have just missed something small?
Thank you in advance
MY 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mainhome">
<div class="header">
<div class="menubutton-leftside" style="margin-right:23px"><h2>home</h2></div>
<div class="menubutton-leftside" style="margin-right:20px"><h2>about</h2></div>
<div class="menubutton-leftside" style="margin-right:30px"><h2>portfolio</h2></div>
<div class="menubutton-leftside" style="margin-right:27px"><h2>contact</h2></div>
<div class="logo"><img src="images/es-logo.png" width="170" height="170" /></div>
<div class="menubutton-rightside" style="margin-left:17px"><h2>print</h2></div>
<div class="menubutton-rightside" style="margin-left:25px"><h2>digital</h2></div>
<div class="menubutton-rightside" style="margin-left:38px"><h2>illustration</h2></div>
<div class="menubutton-rightside" style="margin-left:20px"><h2>brand</h2></div>
</div>
<div class="mainimage">
<div id="slider_container">
<div id="slides">
<img src="images/slider/emmasteed.png" alt="Emma Steed Graphic Art and Web Design" />
<img src="images/slider/graphicdesign-desk.png" alt="Emma Steed Graphic Art and Web Design" />
</div>
</div>
<div class="bluebar"></div>
<div class="largemenubutton" style="margin-right:36px"><img src="images/portfolio.png" /></div>
<div class="largemenubutton" style="margin-right:36px"><img src="images/getintouch.png" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" /></div>
</div></div>
<div class="footer"></div>
</body>
</html>
MY CSS
#charset "UTF-8";
/* CSS Document */
body {
background-image:url(images/header-background.png);
background-repeat:repeat-x;
margin:0;
padding:0;
}
.mainhome {
width: 855px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header {
height: 236px;
background-image:url(images/header-background.png);
background-repeat:repeat-x;
clear:left;
}
.mainimage {
width: 855px;
height: 423px;
background-color:#0C9;
position:absolute;
top:220px;
float:left;
z-index:-1;
}
#slider_container {
width:855px;
height:423px;
overflow:hidden;
}
.bluebar {
width: 855px;
height: 16px;
background-color:#334d5c;
clear:left;
float:left;
}
.menubutton-leftside {
width:60px;
height:20px;
float:left;
margin-top:95px;
}
.menubutton-rightside {
width:60px;
height:20px;
float:left;
margin-top:95px;
text-align:right;
}
h2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:normal;
color:#666;
display:inline;
}
.logo {
width:170px;
height:170px;
float:left;
margin-top:30px;
}
.largemenubutton {
width:261px;
height:259px;
float:left;
margin-top:20px;
}
.footer {
width:100%;
height: 61px;
background-color:#334d5c;
clear:left;
}
It doesn't look like .nameimage needs to be absolutely positioned, but it depends on what you want it to do. Rough example: http://codepen.io/anon/pen/oAbJy.
likely the easiest thing to do, if you ALWAYS want that to be at the very bottom is just give it a fixed position. Add the following to your CSS for the footer. (you may also have to set height and width on the body to 100%)
position: Absolute;
bottom: 0px;
Related
I want the navigation bar to be at the bottom of the window when the page loads (but it will stick to the top while scrolling so I can't make its position fixed). The only thing I figured out is making the background div height 100vh minus navigation bar height but it creates that weird white padding instead of bringing the navigation up.
Also, how can I center vertically elements in my .navigation (and in the .tester too)? The logo has to be on the left side while navigation must be on the right.
Here's the code:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:bold;
}
.header-wrapper {
background-image: url("images/backgrounds/typography.jpg");
background-size:cover;
background-position:center;
min-height:calc(100vh - 6em - 100px);
text-align:center;
padding-top:6em;
margin:0 auto;
position:relative;
}
.tester{
position:absolute;
width:100%;
display:flex;
bottom:50px;
margin: auto;
align-items: center;
justify-content: center;
}
.tester a{
margin-left:1em;
margin-right:1em;
opacity: 0.75;
}
.tester a:hover{
opacity:1;
}
.slider-buttons {
position:absolute;
max-width:1170px;
}
.typography {
bottom: 100px;
left:auto;
}
.navigation {
max-width:1170px;
margin:0 auto;
height:94px;
background-color:white;
bottom:0;
}
nav {
float:right;
text-transform:uppercase;
}
nav a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
}
nav #home:hover, #menu2:hover, #menu3:hover, #menu4:hover, #menu5:hover {
color:white;
}
nav #home:hover {
background-color:#dfbb42;
}
nav #menu2:hover {
background-color:#c43434;
}
nav #menu3:hover {
background-color:#508b61;
}
nav #menu4:hover {
background-color:#428d9e;
}
nav #menu5:hover {
background-color:#575fbd;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Lorem ipsum sit dolor amet</h1>
<div class="tester">
<a href="">
<div class="typography">
<img src="images/slider-buttons/typography/typography-icon.jpg">
<img src="images/slider-buttons/typography/typography-text.jpg">
</div>
</a>
<a href="">
<div class="typography">
<img src="images/slider-buttons/typography/typography-icon.jpg">
<img src="images/slider-buttons/typography/typography-text.jpg">
</div>
</a>
</a>
<a href="">
<div class="typography">
<img src="images/slider-buttons/typography/typography-icon.jpg">
<img src="images/slider-buttons/typography/typography-text.jpg">
</div>
</a>
</a>
</div>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="css/images/logo.png" alt="Logo" id="logo">
</div>
</section>
I guess that can only be done with JS, so you can change the nav position based on the window offset.
you can better use jquery to initially hide the nav-bar when the page loads using Jquery and show it as the user scrolls down the page.
here is the example:
$(document).ready(function(){
$(window).scroll(function(){
$('#navbar').fadeIn("slow");
setTimeout(function(){
if($(window).scrollTop()<10){
$('#navbar').fadeOut("slow");
}
},100)
})
})
#navbar{
position:fixed;
top:0px;
width:100%;
height:100px;
background:#eeeeee;
color:white;
text-align:center;
display:none;
}
#content{
height:1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar"><h1>lorem ipsum</h1></div>
<div id="content"></div>
I'm new to HTML / CSS. I want to build a web site but I stumbled across a problem.
My divs inside my "content div" have a blank space at the top from the line div, and I can't seem to figure out what is causing the problem. Can someone please help? I will much apreciate it.
Thank you!
<head>
<meta charset="utf-8">
<title>Vlad Olar</title>
<style type="text/css">
body {
padding:0;
margin:0;
font-family:Lato, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
background-color:#D8DCE1;
}
.clear {
clear:both;
}
.fixedwidth {
width:960px;
margin:0 auto;
padding:0 0;
}
#topbar {
background-color:#4C7585;
height: 40px;
width: 100%;
}
#front {
height: 360px;
width: 100%;
background-color:#D8DCE1;
}
#line {
height:10px;
width:100%;
background-color:#4C4C4C;
}
#foto {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:left;
position:relative;
top:-55px;
margin-left:103px;
}
#gaming {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:right;
position:relative;
top:-55px;
margin-right:103px;
}
#design {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:left;
position:relative;
top:-55px;
margin-left:198px;
}
#content {
margin:0;
padding:0;
}
#fotocontent {
background-color:#A48251;
height:500px;
width:320px;
float:left;
}
#designcontent {
background-color:#D1A366;
height:500px;
width:320px;
float:left;
}
#gamingcontent {
background-color:#A48251;
height:500px;
width:320px;
float:left;
}
#footer {
background-color:#4C7585;
height: 40px;
width: 100%;
}
#container {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
</div>
</div>
<div id="front">
</div>
<div id="line">
<div class="fixedwidth">
<div id="foto">
</div>
<div id="design">
</div>
<div id="gaming">
</div>
</div>
</div>
<div class="clear">
</div>
<div id="content">
<div class="fixedwidth">
<div id="fotocontent">
</div>
<div id="designcontent">
</div>
<div id="gamingcontent">
</div>
</div>
</div>
<div class="clear">
</div>
<div id="footer">
<div class="fixedwidth">
</div>
</div>
</div>
</body>
As #HiddenHobbes wrote you have the problem because of #foto, #design and #gaming are pulling down .clear div (remove top: -55px; and you will see it).
If you do not want to recalculate margins you can wrap those block in some wrapper with position: absolute; to prevent pulling down behaviour on next div.
In your html
<div id="line">
<div class="fixedwidth">
<div class="foowrapper">
<div id="foto"></div>
<div id="design"></div>
<div id="gaming"></div>
</div>
</div>
</div>
And in your css
.foowrapper {
position: absolute;
width: 100%;
}
.fixedwidth {
position: relative;
}
Fiddle demo
I know your new to html and css but you realy need to make your css in a different file, to do this use <link rel="stylecheet" href="style.css">
Also you should start every html file with this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
(content)
</body>
</html>
But to anwser your question:
"My divs inside my "content div" have a blank space at the top from the line div"
This can easly be solved by given the div a margin-top:-(x)px;
I need css code for this kind of site:
And with my code I get this:
This is my code of index page:
<html>
<head>
<link type="text/css" rel="stylesheet" href="index.css"/>
<title>
Home Page
</title>
</head>
<body>
<div id=header>
<h1>THIS IS HEADER</h1>
</div>
<div id=account>
THIS IS ACCOUNT<br>
oasdjasdj<br>
asdkasd<br>
asdpasod<br>
</div>
<div id=navigation>
THIS IS NAVIGATION
</div>
<div id=content>
THIS IS CONTENT
</div>
<div id=right_side>
THIS IS RIGHT SIDE
</div>
<div id=footer>
THIS IS FOOTER
</div>
</body>
This is css file:
h1{
font-family: Verdana;
font-weight: bold;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
color: #acd1b2;
}
#header{
margin : 0px;
position: relative;
width:80%;
background-color: red;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#navigation{
margin : 0px;
width:80%;
background-color:blue;
}
#right_side{
width: 20%;
float: right;
background-color: #green;
}
#footer{
clear: both;
position: relative;
width:80%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: gray;
}
#account{
position: relative;
width: 20%;
float: right;
background-color: #yellow;
}
#content{
width:80%;
float:left;
background-color:#black;
color: white;
}
Please if someone know how to position divs like on my first picture. When I try something I always get strange results. Thanks for help!
Alright, there were a few problems with the way that you wrote your HTML. First, ID tags should always have quotations around the ID name. I would just make a container div, a div for the left, and a div for the right side.
I made a demo that uses floats to control the layout. The divs are contained in a large div that is restricted to 800 pixels.
Here's the demo that I made on JS Bin
HTML:
<body>
<div id="container"> <!-- Make a container to hold everything. Centered in CSS -->
<div id="left-side">
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="content">Content Here</div>
<div id="footer">Footer</div>
</div> <!-- End of the left side div -->
<div id="right-side">
<div id="account">Account</div>
<div id="right_side">Right Side</div>
</div> <!-- End of the right side div -->
</div> <!-- End of the container div -->
</body>
CSS:
*{
font-family:sans-serif;
}
#container{
max-width:800px;
margin: 0 auto;
}
#left-side{
float:left;
width:60%;
}
#right-side{
float:right;
width:37%;
}
#left-side div{
text-align:center;
margin-bottom:10px;
}
#right-side div{
text-align:center;
margin-bottom:10px;
}
#header{
background-color: yellow;
text-align:center;
padding:20px 0px;
}
#navigation{
padding:10px 0px;
border: 1px black solid;
}
#right_side{
background-color: cyan;
padding:50px 0px;
}
#footer{
background-color: gray;
padding:5px 0px;
}
#account{
background-color: green;
padding: 10px 0;
}
#content{
background-color:black;
color: white;
padding:100px 0px;
}
Change HTML as follow because you need container divs:
<head>
<link type="text/css" rel="stylesheet" href="index.css"/>
<title>
Home Page
</title>
</head>
<body>
<div class="left_container">
<div id=header>
<h1>THIS IS HEADER</h1>
</div>
<div id=account>
THIS IS ACCOUNT<br>
oasdjasdj<br>
asdkasd<br>
asdpasod<br>
</div>
<div id=navigation>
THIS IS NAVIGATION
</div>
<div id=content>
THIS IS CONTENT
</div>
<div id=footer>
THIS IS FOOTER
</div>
</div>
<div class="right_container">
<div id=right_side>
THIS IS RIGHT SIDE
</div>
</div>
</body>
in CSS file add also
.left_container{float:left;width:80%;margin:0px}
.right_container{float:left;width:20%;margin:0px}
.clr{clear:both}
Something like this perhaps?, learn about CSS class'es there reusable (incase you might want multiple right side box's and it will shorten the CSS code because you dont need to create a selector for every element.
Copy and paste source - change to suit...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
* {
margin:0;
padding:0;
}
#wrapper {
width:800px;
height:100%;
margin:0 auto;
}
#wrap-left {
width:75%;
height:100%;
float:left;
}
#wrap-right {
width:25%;
height:100%;
float:right;
}
#header,#navigation,#footer,.right-small {
height:45px;
margin:10px;
}
#content,.right-tall {
height:230px;
margin:10px;
}
.round-corners {
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
padding:20px;
}
.bg-yellow {
background:#FEF200;
}
.bg-red {
background:#ED1B24;
}
.bg-blueish {
background:#3F47CC;
}
.bg-green {
background:#23B14D;
}
.bg-grey {
background:#C3C3C3;
}
.border {
border:5px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="wrap-left">
<div id="header" class="bg-red round-corners">
<h1>THIS IS HEADER</h1>
</div>
<div id="navigation" class="bg-blueish round-corners">
THIS IS NAVIGATION
</div>
<div id="content" class="border round-corners">
THIS IS CONTENT
</div>
<div id="footer" class="bg-grey round-corners">
THIS IS FOOTER
</div>
</div>
<div id="wrap-right">
<div class="right-small bg-yellow round-corners">
ACCOUNT
</div>
<div class="right-tall bg-green round-corners">
left side
</div>
</div>
</div>
</body>
</html>
why no use a table
<body>
<table width="100%" cellspacing=5 cellpadding=5 border =0 >
<tr><td bgcolor=red width="80%" height=200px> header </td> <td bgcolor=yellow>account</td> </tr>
<tr><td bgcolor=blue height=100px> navigation </td> <td bgcolor=green rowspan=2>Left side</td> </tr>
<tr><td bgcolor=cyan height=400px> content </td></tr>
<tr><td bgcolor=grey height=100px> footer </td></tr>
</table>
</body>
you don't need css for that..
I have just started putting my site together. I have a scrolling banner DIV and now i want to add a an image underneath 'largemenubutton' DIV but when I place it just sits on top of my banner? I have put in the CSS to clear:left however this does not work.
html
<body>
<div class="mainhome">
<div class="header">
<div class="menubutton-leftside" style="margin-right:23px"><h2>home</h2></div>
<div class="menubutton-leftside" style="margin-right:20px"><h2>about</h2></div>
<div class="menubutton-leftside" style="margin-right:30px"><h2>portfolio</h2></div>
<div class="menubutton-leftside" style="margin-right:27px"><h2>contact</h2></div>
<div class="logo"><img src="images/es-logo.png" width="170" height="170" /></div>
<div class="menubutton-rightside" style="margin-left:17px"><h2>print</h2></div>
<div class="menubutton-rightside" style="margin-left:25px"><h2>digital</h2></div>
<div class="menubutton-rightside" style="margin-left:38px"><h2>illustration</h2></div>
<div class="menubutton-rightside" style="margin-left:20px"><h2>brand</h2></div>
</div>
<div class="mainimage">
<div id="slider_container">
<div id="slides">
<img src="images/slider/emmasteed.png" alt="Emma Steed Graphic Art and Web Design" />
<img src="images/slider/graphicdesign-desk.png" alt="Emma Steed Graphic Art and Web Design" />
</div>
</div>
<div class="bluebar"></div></div>
<div class="largemenubutton"><img src="images/portfolio.png" /></div>
</div>
css
#charset "UTF-8";
/* CSS Document */
body {
background-image:url(images/header-background.png);
background-repeat:repeat-x;
margin:0;
}
.mainhome {
width: 855px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header {
height: 236px;
background-image:url(images/header-background.png);
background-repeat:repeat-x;
clear:left;
}
.mainimage {
width: 855px;
height: 423px;
background-color:#0C9;
position:absolute;
top:220px;
clear:left;
float:left;
z-index:-1;
}
#slider_container {
width:855px;
height:423px;
overflow:hidden;
}
.bluebar {
width: 855px;
height: 16px;
background-color:#334d5c;
clear:left;
float:left;
}
.menubutton-leftside {
width:60px;
height:20px;
float:left;
margin-top:95px;
}
.menubutton-rightside {
width:60px;
height:20px;
float:left;
margin-top:95px;
text-align:right;
}
h2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:normal;
color:#666;
display:inline;
}
.logo {
width:170px;
height:170px;
float:left;
margin-top:30px;
}
.largemenubutton {
width:261px;
height:259px;
float:left;
clear:left;
}
JSFIDDLE here
http://jsfiddle.net/cX8Z9/
The problem is that there is an extra </div> after the bluebar, so the largemenubutton is not inside the same container mainimage, which is positioned absolutely (so the largemenubutton is just sitting where it would sit if the mainimage hadn't been there at all).
<div class="bluebar"></div></div>
<div class="largemenubutton"><img src="images/portfolio.png" /></div>
And you can't "clear" an absolute positioning the way you can a float.
So the solution is to move the offending </div> two lines down, thus putting the largemenubutton inside the mainmenu.
<div class="bluebar"></div>
<div class="largemenubutton"><img src="images/portfolio.png" /></div>
</div>
See jsFiddle.
I have a html page I'm working on. I have a div called "featuredcontent" that I'm going to add an N number of elements with class "item" to. I want the featuredcontent box to scroll horizontally when I exceed the space in the layout. Sort of like iTunes does their songs. My problem is when I try to do this and define the boxes to be a certain width they don't expand properly. Here's my rough draft of the code.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
}
#container {
width:990px;
margin-left:auto;
margin-right:auto;
}
#header {
margin-top:20px;
text-align:left;
overflow: auto;
}
#featured {
width: auto;
float: left;
text-align: left;
}
#navbar {
padding-top:5px;
}
#navbar a {
color:#000;
padding-right:40px;
font-weight:bold;
text-decoration:none;
font-size:20px;
}
#navbar a:hover {
text-decoration:underline;
}
#logo {
width:290px;
height:250px;
float:right;
vertical-align:50%;
background:url(logo.jpg);
}
#main {
margin-top: 30px;
}
#mainfeature {
overflow:auto;
white-space:nowrap;
}
.item {
width:150px;
height:300px;
margin-right:10px;
color:#0FF;
display:inline;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="featured">
<img width="700" height="225" src="#" />
<div id="navbar">LinkLinkLinkLink</div>
</div>
<div id="logo"></div>
</div>
<div id="main">
<div id="mainfeature">
<div class="item"> asdf</div>
<div class="item"> adsf</div>
<div class="item"> adf</div>
<div class="item"> ad f</div>
<div class="item"> adsdfewsgewt</div>
</div>
<div id="secondaryfeature"></div>
<div id="socialbar"></div>
</div>
<div id="footer"></div>
</div>
</body>
I think its navbar that needs to scroll. It also needs a width:
#navbar {
width: 990px;
padding-top:5px;
overflow-x: auto;
}
If you want to have a custom scrollbar, I think you can look to jScrollPane. (http://jscrollpane.kelvinluck.com/)
The CSS property "overflow-x" is a good answer, but I hate the default scrollbars. ;)
Give that a try:
#featured {
overflow-x: scroll;
}