I'm trying to create a square centered page at min. 600px height. The page should expand together with the text. (Ofc.)
The page also have some picture based borders, which should follow the page. (Obviously.)
I've tried a million combinations by now, I think. The problem seems to be that the div-borders cannot auto adjust if the outer div doesn't have a fixed height. And the outer div cannot have a fixed height, due to expanding text.
It seems simple enough. And there're a lot of suggestions. (That doesn't work.) Have I done something fundamentally wrong?
Here's the page: http://bymosegaard-hillerod.dk/info.aspx
(Notice that the borders doesn't reach the bottom.)
For future reference. Here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>...</title>
<link href="..." rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="topborder"></div>
<div id="leftborder"></div>
<div id="page">
<div id="pageheadtext">...</div>
<div style="float: right; margin-top: 30px;"><img src="/media/banner.jpg"></div>
<div id="menubar" style="margin-top: 210px;">
...
</div>
<div id="sideNavigation"></div>
<div id="bodyText" style="margin-top: 20px;">
...
</div>
</div>
<div id="rightborder"></div>
<div id="bottomborder"></div>
<div id="footer">...</div>
</div>
</body>
</html>
And the stylesheet:
BODY
{
background-color: rgb(248, 248, 243);
background-image: url(/media/bodyBg.gif);
background-repeat: repeat-x;
color: rgb(102, 102, 102);
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
height: 95%;
}
H1
{
font-family: Verdana, Arial;
font-size: 14px;
color: #333;
font-weight:normal;
}
#pageheadtext
{
margin-top: 40px;
margin-left: 35px;
font-family: Verdana, Arial;
font-size: 14px;
color: #333;
text-align: left;
}
#container
{
margin: 0 auto 0 auto;
width: 786px;
overflow: hidden;
min-height: 600px;
}
#topborder
{
background-image: url(/media/frameTopBg.png);
background-repeat: no-repeat;
display: block;
height: 8px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
}
#leftborder
{
float: left;
background-image: url(/media/frameLeftMiddleBg.png);
background-repeat: repeat-y;
width: 13px;
min-height: 600px;
height: auto;
}
#page
{
background-color: white;
display: block;
float: left;
height: 100%;
margin-left: 0px;
text-align: left;
width: 760px;
}
#rightborder
{
float: right;
background-image: url(/media/frameRightMiddleBg.png);
background-repeat: repeat-y;
width: 13px;
min-height: 600px;
height: 100%;
}
#bottomborder
{
background-image: url(/media/frameBottomBg.png);
background-repeat: no-repeat;
clear: both;
display: block;
height: 13px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
}
#menubar
{
background-image: url(/media/menubar.jpg);
background-repeat: no-repeat;
display: block;
height: 27px;
width: 760px;
}
#topmenuitem
{
color: rgb(102, 102, 102);
cursor: auto;
line-height: 24px;
outline-color: rgb(102, 102, 102);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
text-decoration: none;
}
#sideNavigation
{
float: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin-left: 35px;
margin-top: 32px;
}
#bodyText
{
float: right;
margin-right: 194px;
width: 400px;
height: 100%;
}
#footer
{
text-align: center;
}
#doctable
{
font-size: 10px;
}
Btw, the page is CMS driven, so I cannot just hack the one offending page. And I would really like to solve this in general.
Your CSS is over complicated, the HTML structure also, not to talk that the design is oldish and the font is hardly readable. And over all that you spiced it using inline styles... This will only lead to to fix a fix of a fix, and not to answer a client call to do just a simple edit / modification.
Hardly maintainable. Keep it simple.
Believe it or not this is all you need:
jsBin demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
</head>
<body>
<div id="container">
<h1>Bymosegård i Hillerød</h1>
<img src="http://bymosegaard-hillerod.dk/media/banner.jpg">
<nav>
<ul>
<li>Forside</li>
<li>Info</li>
<li>Regnskaber</li>
<li>Referater</li>
<li>Kontakt</li>
</ul>
</nav>
<div id="content">
<h2>Foretningsorden, relementer mm.</h2>
<p>Foretningsorden, relementer, vedtægter mm.</p>
<p> </p>
<h3>Vedtægter</h3>
................. etc
</div>
</div>
<div id="footer">Bymosegårds Alle 3-9, 3400 Hillerød</div>
</body>
</html>
CSS:
*{ margin:0; padding:0; } /* Global reset */
body{
background:#EEEDE4;
font: 10px/1.4 Helvetica, Arial, Verdana, sans-serif;
color: #666;
}
h1, h2, h3, p, ul, ol{
margin: 7px 30px;
font-weight:200;
}
h1{
color:#333;
font-size:1.5em;
padding:25px 0
}
ul, ol { padding-left:1.4em; }
nav { background: #E9E9E9; }
nav li { display:inline-block; }
nav li a{ display:inline-block; padding:5px 15px; }
#container > img{ width:100%; }
#container{
position:relative;
margin: 15px auto;
width: 786px;
background: #fff;
padding:10px;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#content{ margin:30px 100px; }
#footer{ text-align:center; }
Related
According to this answer, putting display: block; float: none; position: relative; in a selector should ensure that the margin: 0px auto trick to horizontally center an element works. This is my code for attempting to center the body within the html element:
body {
background-color: lightgray;
float: left;
font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
margin: 0px auto;
/* Adding these last 3 doesn't seem to make a difference */
display: block;
float: none;
position: relative;
}
When I specify the pixels manually like 0px 500px, it works out fine. Does anyone know why auto doesn't seem to be working in this case?
edit: Guys, it doesn't work even when I specify the width for the body. https://jsfiddle.net/ozm2x9zx/
You have to mention width to make it center.
<style>
body {
margin: auto;
width:50%;
}
</style>
And also no need to mention px for 0(Zero) values.
You missed the 4th point in that answer your referred to:
The element must have a width that is not auto
Which was then explained in the notes:
Technically, margin: 0 auto does work with an auto width, but the auto width takes precedence over the auto margins, and the auto margins are zeroed out as a result, making it seem as though they "don't work".
So add a width to your body and you will see it working. Ah, but here is the catch: you are applying it to the body, not any element on the page. It works, but you will not see the effect unless you make the color of the html different from the body. Try this:
html {
background-color: red;
}
body {
background-color: lightgray;
float: left;
font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
margin: 0 auto;
display: block;
float: none;
position: relative;
width: 70%;
}
You need to remove float, off of your body element and your container sits in the middle perfectly.
Also, there is no need to attribute the unit type, (px), on a value of zero.
Consider:
body {
background-color: lightgray;
background-image: url('../images/brushed.png');
background-repeat: repeat;
font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
margin:0;
}
div#container {
background-color: #aaaaaa;
color: white;
width: 960px;
margin: 0 auto;
}
I just remove float:left; from body, and it is centered +
most of the time -> margin:0px auto; will work fine with display:table;
<html>
<head>
<title>My Favorite Films</title>
<link type="text/css" rel="stylesheet" href="css/site.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" />
<style>
body {
background-color: lightgray;
background-image: url('../images/brushed.png');
background-repeat: repeat;
//float: left; //removed
font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
margin: 0px auto;
width: 960px;
}
div.clear-float {
clear: both;
}
div.home-page-images {
float: left;
margin: 0px 0px 0px 25px;
}
div#container {
background-color: #aaaaaa;
color: white;
width: 960px;
}
div#footer {
background-color: gray;
margin-top: 50px;
padding: 5px 0px;
text-align: center;
}
div#header {
padding: 50px 0px;
}
div#nav {
font-family: 'Playfair Display', serif;
float: left;
text-transform: uppercase;
width: 200px;
}
div#nav a:hover, div#nav a:active {
}
div#nav a:link, div#nav a:visited {
color: white;
text-decoration: none;
}
div#nav li {
margin: 0px 0px 20px 0px;
}
div#nav ul {
list-style-type: none;
overflow: hidden;
}
h1 {
text-align: center;
}
h1.home-page-header {
color: #bf0000;
font-size: 60px;
}
img.home-page-image-row1 {
float: left;
width: 300px;
height: 175px;
margin-left: 50px;
margin-top: 50px;
}
img.home-page-image-row2 {
float: left;
width: 250px;
height: 150px;
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1 class="home-page-header">My Favorite Films</h1>
</div>
<div id="content">
<div id="nav">
<ul>
<li>Home</li>
<li>Black Mirror</li>
<li>House of Cards</li>
<li>Inception</li>
<li>Interstellar</li>
<li>Stranger Things</li>
</ul>
</div>
<div class="home-page-images-row1">
<img src="images/black_mirror_cover.jpg" class="home-page-image-row1" />
<img src="images/hoc_cover.jpg" class="home-page-image-row1" />
<div class="clear-float"></div>
</div>
<div class="home-page-images-row2">
<img src="images/inception_cover.jpg" class="home-page-image-row2" />
<img src="images/interstellar_cover.jpg" class="home-page-image-row2" />
<img src="images/st_cover.jpg" class="home-page-image-row2" />
<div class="clear-float"></div>
</div>
</div>
<div class="clear-float"></div>
<div id="footer">
<h3>My Favorite Films</h3>
<h4>By James Ko</h4>
<p>Copyright © 2017 James Ko. All rights reserved.</p>
</div>
</div>
</body>
</html>
I see this question a lot but I can't find the answer with either padding or margin. For some reason I can't center the ul element correctly inside the div and the div needs to be this way.
Can someone explain what I am doing wrong and how to solve it?
https://jsfiddle.net/norbertoalexander/4ea23bbn/2/
/* FUENTES
font-family: 'Lobster', cursive;
font-family: 'Playfair Display', serif;
*/
/*
Fondo = #FEFFA0
Borde = #ACDB86
Fondo Texto = #EEEEEE
Hoover = #547C66
Letras = #3B5B5D
*/
html, body {
height: 100%;
margin: 0;
background-color: #FEFFA0;
}
div.head {
height: 70px;
background-color: #ACDB86;
margin: 0 auto;
}
h1 {
font-family: 'Lobster', cursive;
font-size: 45px;
text-align: center;
}
div.menu {
border-style: solid;
border-color: blue;
margin: 5px;
float: left;
width: 150px;
height: 500px;
list-style: none;
text-align: center;
}
ul {
margin: 0 auto;
list-style: none;
text-align: center;
font-size: 20px;
}
li {
margin: 0 auto;
text-align: center;
}
h2 {
text-align: center;
font-size: 25px;
font-family: 'Lobster', cursive;
}
div.fuent {
border-style: solid;
border-color: blue;
margin: 5px;
float: right;
width: 150px;
height: 500px;
}
div.leng {
border-style: solid;
border-color: yellow;
margin: 5px;
width: 72%;
float: left;
}
div.resu {
border-style: solid;
border-color: blue;
margin: 5px;
width: 72%;
float: left;
}
<!DOCTYPE HTML">
<html>
<head>
<title>Lenguajes</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lobster|Playfair+Display" rel="stylesheet">
<link href="styles/leng.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--titulo-->
<div class="head">
<h1>Lenguajes</h1>
</div>
<div class="menu">
<ul>
<li><h2>Menu</h2></li>
<li>Incio</li>
<li>Algoritmos</li>
<li>Lenguajes</li>
<li>Problemas</li>
<li>Sobre mi</li>
</ul>
</div>
<div class="fuent">
Fuentes
</div>
<div class="resu">
Resumen
</div>
<div class="leng">
Lenguaje
</div>
</body>
</html>
There's a padding on the <ul>, remove it and the menu is centered:
ul {
padding: 0;
}
My slideshow div is paced above my header nav in HTML to create a fullscreen slideshow but all the elements on my page are fading with my slideshow, how do I prevent that?
Thank you
I'm new at this, so I'm not sure if the layout is correct or not.
enter code here
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
"use strict";
var scroll_start = 0;
var startchange = $('#about');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('#header').css('background-color', '#3A3939');
} else {
$('#header').css('background-color', 'transparent');
}
});
});
var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = 'images/pic3.png';
backgrounds[1] = 'images/pic2.png';
backgrounds[2] = 'images/pic1.png';
backgrounds[3] = 'images/pic4.png';
function changeBackground() {
currentBackground++;
if(currentBackground > 3) currentBackground = 0;
$('.slideshow').fadeOut(900,function() {
$('.slideshow').css({
'background-image' : "url('" + backgrounds[currentBackground] + "')"
});
$('.slideshow').fadeIn(1000);
});
setTimeout(changeBackground, 3500);
}
$(document).ready(function() {
setTimeout(changeBackground, 3500);
});
</script>
</head>
<body>
<div id="home">
<div class="slideshow">
<div id="header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="styledimg"></div>
</nav>
</div>
<div id="head-soc">
<div id="linkedin-icon">Linkedin</div>
<div id="youtube-icon">Youtube</div>
<div id="facebook-icon">Facebook</div>
</div>
<div class="content">
<p>Create, Collaborate, Innovate</p>
</div>
</div>
</div>
<div id="about">
<div class="wrapper">
<h4>Titus Jackson</h4>
<p>Film Maker ~ Screen Writer ~ Editor</p>
</div>
<img src="images/Titus-Jackson1.jpg" alt="Titus Jackson" width="425" height="365" border="0" />
<div id="section2">
<p>For over 15 years <span>Cinemuze</span> has had the honor of working with some of the most talented creative collaborators tulsa has to offer. We love working on a variety of projects. As it is our goal to be a well rounded company with our fingers in a lot of pies.</p>
<p>Our paramount value is to approach the material with excellence, and an original point of view to tell a unique and compelling story. It is our belief that life is what you make of it, and the saddest lost is not to explore all your potential in the short time you've been given.</p>
<p>We've had the opportunity to work on multiple feature films and national television shows ranging from christian television to TLC television. We've created multiple award winning music vidoes, short films and even a feature film. Feel free to take a look around the site, and drop us an email, we look forward to hearing from you.</p>
<img src="images/email1.png" alt="email" width="26" height="26" />
</div>
</div>
<div id="projects">
<h5>View our current projects:</h5>
<div class="wrapper1">
<iframe width="265" height="200" src="https://www.youtube.com/embed/8CZJzUk7fFM" frameborder="0" allowfullscreen></iframe>
<p>Eugene Gregory Promo</p>
</div>
<div id="wrapper2">
<iframe width="265" height="200" src="https://www.youtube.com/embed/cLm3Vh4_Ruc" frameborder="0" allowfullscreen></iframe>
<p>Family Cup Promo</p>
</div>
<div class="wrapper3">
<iframe width="265" height="200" src="https://www.youtube.com/embed/2t9-vVNgF7c" frameborder="0" allowfullscreen></iframe>
<p>This Generation</p>
</div>
</div>
<div id="contact">
<section3>
<h3>To connect with Us:</h3>
<p><span>Cinemuze</span> is based in Tulsa, Oklahoma and travels widely for a variety of projects.</p>
<p>If your interested in our work, you can connect with us via email or phone.</p>
</section3>
<div class="section4">
<img src="images/email1.png" alt="email" width="26" height="26" />
<a href="mailto:titusjackson#mac.com">
<p>titusjackson#mac.com</p>
</a><img src="images/phone.png" alt="phone" width="24" height="24" />
<p>+1 (918) 671-3340</p>
</div>
</div>
<footer>
</footer>
</body>
</html>
#charset "UTF-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
#header {
width: 100%;
margin-top: -15px;
position: fixed;
background-color: transparent;
transition-duration: 1s;
}
div#header nav {
width: 1425;
height: 110px;
}
div#header ul {
list-style: none;
margin-left: 100px;
float: left;
}
div#header li {
float: left;
margin-left: 64px;
margin-top: 10px;
}
div#header a {
color: white;
text-decoration: none;
line-height: 45px;
font-size: .9em;
text-transform: capitalize;
}
div#header a:hover {
color: rgba(249,0,3,1.00);
}
div#styledimg {
background-image: url(images/logo.png);
background-repeat: no-repeat; width: 224px;
height: 85px;
float: right;
margin-right: 150px;
margin-top: 10px;
z-index: 1003;
}
/*page-specific header styles*/
#header {
background-color: rgba(60,59,59,1.00);
width: 1425;
height: 110px;
}
/* layout styles*/
/*home page*/
.slideshow {
background-image:url(images/pic3.png);
background-size: cover;
background-repeat: no-repeat;
background-position: 500px 0px 0px;
background-attachment: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 900px;
line-height: 0px;
margin-top: -330px;
padding-top: -15px;
}
#header {
background-color: transparent;
}
#head-soc {
width: 129;
height: 86;
margin: 10px;
padding: 0px;
float: right;
margin-right: 40px;
margin-top: 255px;
right: 25px;
position: fixed;
z-index: 2;
}
#head-soc a {
margin-top: 10px;
margin-right: 20px;
}
#linkedin-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
background-position: 0px 0px;
}
#linkedin-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: 0px -43px;
}
#youtube-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
margin-left: 20px;
background-position: -43px 0px;
}
#youtube-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: -43px -43px;
}
#facebook-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
background-position: -86px -85px;
}
#facebook-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: -86px -128px;
}
.content p {
font-family: BlairMdITC TT-Medium;
font-size: 44px;
line-height: 120%;
width: 550px;
text-align: center;
padding-top: 360px;
margin-top: 330px;
margin-left: 575px;
color: rgba(248,241,241,1.00);
}
/* about page*/
div#about {
background-color:rgba(188,184,184,1.00);
height: 550px;
margin-top: -35px;
padding-top: 100px;
}
.wrapper h4 {
font-famiy: Geneva;
font-size: 25px;
padding-left: 224px;
color: rgba(249,0,3,1.00);
margin-bottom: -20px;
}
.wrapper p {
font-family: Geneva;
font-size: 12px;
margin-left: 226px;
margin-top: 20px;
margin-bottom: 15px;
color: rgba(134,133,133,1.00);
}
h6 {
padding-left: 225px;
margin-top: -20px;
margin-bottom: 10px;
color: rgba(60,59,59,1.00);
}
img {
float: left;
margin-left: 225px;
margin-right: 15px;
}
#section2 {
font-family: Helvetica;
font-size: 16px;
color: rgba(60,59,59,1.00);
width: 1280px;
padding-top: -80px;
height: 300px;
}
#section2 p {
color: rgba(60,59,59,1.00);
}
#section2 img {
margin-left: 2px;
}
span {
color: rgba(249,0,3,1.00);
}
/* projects page */
div#projects {
background-color: #3A3939;
background-position: 25px;
height: 450px;
margin: 0px;
line-height: 0;
padding-top: 25px;
}
.wrapper1 {
float: left;
width: 265;
height: 200px;
margin-left: 200px;
padding-top: 50px;
}
#wrapper2 {
float: right;
width: 265;
height: 200px;
margin-right: 200px;
padding-top: 50px;
}
.wrapper3 {
float: left;
margin-left: 175px;
padding-top: 50px;
width: 265;
height: 200px;
}
.wrapper1 p {
margin-left: 42px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
#wrapper2 p {
margin-left: 65px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
.wrapper3 p {
margin-left: 70px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
div#projects h5 {
margin-left: 650px;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
color:rgba(179,178,178,1.00);
padding-bottom: 45px;
margin-bottom: -15px;
}
p {
font-size: 16px;
margin-left: 195px;
color: rgba(249,247,247,1.00);
}
/* contact page */
div#contact {
background-image:url(images/studio4.png);
background-size: cover;
background-attachment: fixed;
padding-top: 35px;
padding-bottom: 100px;
}
section3 h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: rgba(249,0,3,1.00);
margin-left: 660px;
margin-top: 75px;
}
section3 p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: rgba(255,255,255,1.00);
width: 650px;
padding-left: 85px;
margin-left: 385px;
}
.section4 {
font-family: Helvetica, sans-serif;
font-size: 16px;
color: rgba(255,255,255,1.00);
margin-left: 440px;
margin-top: 50px;
}
.section4 a {
text-decoration: none;
}
.section4 a p:hover {
color: rgba(249,0,3,1.00);
}
/* ~~ The footer ~~ */
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
display: block;
}
You've placed all of your HTML inside of the div with the slideshow class:
<div class="slideshow"> //this is left open
//other divs are closed later on like this one:
<div id="styledimg"></div>
//but all the divs below slideshow are inside of the slideshow div
So whatever animations you're doing to the slideshow div, will affect all of its children.
I'm trying to get my conatiner.png transparent background to apply to my "indexbar" div, but it just simply won't show. It works on my main container, I'm doing it the same way in my style.css but it won't apply.
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Reapers Overpoch Store</title>
</head>
<body>
<center>
<div class="banner"><img src="images/banner.png" width="1000" height="400"></div>
<div class="indexbar"><p style="color: #FFF; font-size: 24px">Loadouts | Crates | Buildings | Vehicles & Insurance | Misc</p></div>
<div class="container">
<div class="content">
<h2 style="color: #FFF">Welcome to the Reapers Overpoch Store!</h2>
<p style="color: #FFF">This is where you will find all the donator perks for the Reapers Midnight Recon DayZ servers! All payments are final and specified items will be charged monthly if not cancelled! All items are always up to date and include full details along with pictures.</p>
<p style="color: #FFF"><strong>How to Donate:</strong> If you would like to purchase an item, then click the <strong><i>Buy Now</i></strong> or <strong><i>Donate</i></strong> button associated with it and continue via PayPal.</p>
<p style="color: #FFF"><strong>Delivery Notice:</strong> We do our best to get your items either applied to your character, or added in-game as soon as possible. If there are any delays, it due to unavailability of an admin or coder.</p>
</div>
</div>
</center>
</body>
</html>
style.css:
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url("images/background.jpg");
background-size: cover;
background-attachment: fixed;
margin: 80;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
font-weight: normal;
}
.container {
width: 1000px;
background-image: url("images/container.png");
margin: 0 auto;
}
.content {
padding: 10px;
font-weight: normal;
margin: 10px;
}
.banner {
height: 400px;
width: 1000px;
margin: 10px;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.container .content p em {
font-size: 50%;
}
.container .content p {
}
.banner {
margin: 10px;
height: 400px;
width: 1000px;
}
.indexbar {
background-image: url(images/container.png);
margin: 10px;
height: 50px;
width: 1000px;
padding: 10px;
}
Thanks in advance.
You are missing the quotes:
.indexbar {
background-image: url(images/container.png);
margin: 10px;
height: 50px;
width: 1000px;
padding: 10px;
}
Should be:
.indexbar {
background-image: url("images/container.png");
margin: 10px;
height: 50px;
width: 1000px;
padding: 10px;
}
The only difference I see is that you dont have quotes in but that not usually a problem for me
background-image: url(images/container.png);
Hi there I've been doing research on the site for some time now and i haven't been able to find an answer that correct my problem. I'm looking to expand my body div to fill 100% while maintaining my footer at the bottom of my page. As you'll see in my code the footer is a bit problematic since I'm using a "Banner" and below the contact info for the site. (See provided image).Anyway I've tried some solutions found on other questions but i haven't been able to apply the solution to my code correctly. If someone could point me in the right direction id deeply appreciate it. Also id like to maintain the code with html and css only if at all possible.
The page should not be scrollable on regular sized displays as i have very little content
to put on the website.Here i have provided a jsfiddle to further illustrate my problem. On it you'll see that what i want is my body(green) to dinamically change height to always fill the screen. taking into account that my footer(blue) should also be displayed on screen as well.
[My JSFiddle]http://jsfiddle.net/yuyocollores/3aJBP/2/
Here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="dcterms.created" content="Fri, 30 May 2014 18:35:33 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Some Title</title>
<link href="gr.css" rel="stylesheet" type="text/css"></link>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
</head>
<body id="htmlbody">
<div id="container">
<div id="header">
<img src="images/bigLOGO.png" />
</div>
<div id="nav">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div id="body">
<img src="images/homeCONTENT.png" id="homecontent">
<p id="hometext">
Some Slogan text
</p>
</div>
</div>
<div id="footerImageBanner">
<img src="images/LogoVersion2Small.png" />
</div>
<div id="footercontainer">
<p id="footertextsmall">
Address:
<span id="footertextsmall">Some address</span>
</p>
<p id="footertextsmall">
Copyright
<span id="footertextsmall">#2014</span>
</p>
<p id="footertextsmall">
Phone:
<span id="footertextsmall">(xxx)xxx-xxxx</span>
</p>
</div>
</body>
</html>
And here is my current CSS
#htmlbody{
margin:0px;
padding:0px;
background-color:#000000;
}
#container
{
width: 100%;
min-width:500px;
height: 100%;
margin: 0px;
padding: 0px;
overflow:hidden;
}
#header
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 100px;
background-image: url('images/headerBG.png');
background-size: auto;
display: block;
}
#header img
{
display: block;
margin-left: auto;
margin-right: auto;
}
#nav
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 54px;
background-image: url('images/navbarBG.png');
background-repeat: repeat-x;
text-align: center;
}
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
#nav li
{
margin: 0px;
padding: 0px;
float: left;
}
#nav a
{
margin: 0px;
padding-right:6px;
padding-left:-3px;
width: 114px;
height: 50px;
background-image: url('images/btn.png');
background-repeat: no-repeat;
text-decoration: none;
text-transform: uppercase;
text-align:center;
color: #ffffff;
display: table-cell;
vertical-align: middle;
text-shadow: 2px 2px 2px #333333;
}
#nav a:hover
{
background-image:url('images/btnHover.png');
}
#body
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height:auto;
min-height:500px;
background-image: url('images/contentBG.png');
background-repeat: repeat;
overflow:auto;
}
#homecontent
{
width: 100%;
min-width:500px;
height: auto;
margin-top: 40px;
margin-bottom:0px;
}
#hometext
{
padding:0px;
margin-top:20px;
margin-bottom:0px;
text-transform: uppercase;
color: #cccccc;
text-shadow: 2px 2px 5px #000000;
font-size: 165%;
font: arial;
text-align: center;
}
#hometextsmall
{
color: #cc9966;
text-align: center;
font-size: x-large;
}
#contactcontent{
width:720px;
height:400px;
min-height:400px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent
{
width:550px;
height:450px;
min-height:450px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent ul {
list-style-type: none;
padding-left:20px;
margin: 0px;
}
#pagecontent ul li {
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
#pagecontenttext{
margin: 0px;
padding: 0px;
color: #131010;
font: arial;
font-size:18px;
}
#contact{
float:left;
display:block;
width:350px;
height:400px;
margin-left:auto;
margin-right:auto;
}
#footercontainer
{
margin:0px;
padding: 0px;
width: 100%;
height:auto;
display: table;
table-layout: fixed;
background-image: url('images/footerBG.png');
background-repeat: repeat;
}
#footercontainer p
{
margin:0px;
padding: 0px;
display: table-cell;
text-align: center;
margin: 0px;
padding: 0px;
vertical-align: top;
}
#footertextsmall
{
margin: 0px;
padding: 0px;
color: #ffffff;
text-align: center;
font-size:small;
}
#footerImageBanner
{
margin: 0px;
padding: 0px;
width: 100%;
height: 80px;
background-image: url('images/footerImgBG.png');
background-size: auto;
display: block;
}
#footerImageBanner img
{
display: block;
margin-left: auto;
margin-right: auto;
}
hey do you mean......
#container div{
background-color:#fff;
margin:10px;
}
http://jsfiddle.net/kisspa/QFN9U/