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);
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 want to set a margin of 100px between the header and .content-container. Every time I set the margin, either on the header or .content-container, the background image is pushed as well. Maybe it's connected to the position attributes for the .content-wrap and header selectors, but I'm not sure. I'm still new to frontend dev, so I'm not sure where the problem could be.
html, body, header, h1, h2, h3, div, figure, figcaption, img, p, a {
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
}
h1, h2, h3, p {
font-family: sans-serif;
}
.sticky-footer-wrapper {
min-height: 100%;
/*Equal to height of footer*/
margin-bottom: -200px;
}
.content-wrap {
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: -10;
}
.content-wrap::after {
content: "";
background: #5F5449 url(http://margraonline.com/wp-content/uploads/2015/08/pretty-coffee-beans.jpeg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
header {
position: relative;
height: 100px;
background: #291711;
}
header img {
display: block;
padding-top: 20px;
padding-right: 10px;
padding-left: 20px;
float: left;
}
header h1 {
color: #EEF0F2;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
padding-left: 20px;
}
header nav {
float: right;
padding-bottom: 0;
}
header nav a {
text-decoration: none;
color: #D1BEB0;
padding-right: 15px;
font-size: 20px;
}
a:nth-child(5) {
padding-right: 55px;
}
a:hover {
color: #938BA1;
}
#active-link {
color: #938BA1;
text-decoration: underline;
}
.content-container {
margin-top: 100px;
margin-bottom: 300px;
width: 60%;
background-color: #D9C9BE;
border: 2px solid #291711;
}
.content-container h2 {
font-size: 36px;
color: #4E453C;
text-decoration: underline;
text-align: center;
padding: 15px 0;
}
.content-container h3 {
font-size: 26px;
color: #3C2C26;
text-align: center;
padding: 20px 0 10px 0;
}
figure {
display: block;
border: 1px solid #3C2C26;
background-color: #FFFCF3;
height: 300px;
width: 400px;
margin: 0 auto;
}
figure img {
width: 100%;
text-align: center;
}
figcaption, p {
text-align: center;
padding-bottom: 10px;
}
blockquote {
position: relative;
font-size: 18px;
}
footer, push {
height: 200px;
}
footer {
width: 100%;
background-color: #291711;
text-align: center;
}
footer nav a {
float: inherit;
text-decoration: none;
color: #D1BEB0;
font-size: 28px;
font-family: Arial, serif;
font-weight: lighter;
padding-right: 15px;
}
#top-row {
padding-top: 25px;
padding-bottom: 15px;
}
#bottom-row {
padding-bottom: 25px;
}
footer p {
color: #D1BEB0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bloc Frontend Formations Part 1</title>
</head>
<body>
<div class="sticky-footer-wrapper">
<header>
<img src="https://i.imgur.com/v6FOpf0.png" title="source: imgur.com" />
<h1>Specialty Coffee Company</h1>
<nav>
Home
About SCC
<a id="active-link" href="#">Rare Coffees</a>
Store
Contact us
</nav>
</header>
<!-- Content Wrap -->
<div class="content-wrap">
<!-- Content Container -->
<section class="content-container">
<h2>Rare Coffees</h2>
<h3>Kopi Luwak</h3>
<figure>
<img src="https://www.indoneo.com/wp-content/uploads/2017/03/luwak_coffee_for_sale.jpg" alt="Kopi Luwak Coffee">
<figcaption><i>Kopi luwak for sale in Indonesia.</i></figcaption>
</figure>
<blockquote>"It’s the world’s most expensive coffee, and it’s made from poop. Or rather, it’s made from coffee beans that are partially digested and then pooped out by the civet, a catlike creature. A cup of kopi luwak, as it’s known, can sell for as much as $80 in the United States."</blockquote>
<p><cite>The Disturbing Secret Behind the World’s Most Expensive Coffee</cite> by Rachael Bale. National Geographic. <time>April 29, 2016</time></p>
<!-- End Content Container -->
</section>
<!-- End Content Wrap -->
</div>
<!-- Push for Sticky Footer -->
<div class="push"></div>
<!-- End Sticky Footer Wrapper -->
</div>
<footer>
<nav id="top-row">
Locations
Press
Blog
Jobs
FAQ
</nav>
<nav id="bottom-row">
Sustainability
Contact
</nav>
<p>Speciality Coffee Company, Torokvész út 95-97, Budapest</p>
</footer>
</body>
</html>
You need padding-top instead of margin-top of 100px.
Reason: Margin increase the space between elements, it doesn't actually increase the elements dimensions, whereas padding increases the space between the element edge and the content, which is what is needed in the current scenario!
html, body, header, h1, h2, h3, div, figure, figcaption, img, p, a {
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
}
h1, h2, h3, p {
font-family: sans-serif;
}
.sticky-footer-wrapper {
min-height: 100%;
/*Equal to height of footer*/
margin-bottom: -200px;
}
.content-wrap {
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: -10;
}
.content-wrap::after {
content: "";
background: #5F5449 url(http://margraonline.com/wp-content/uploads/2015/08/pretty-coffee-beans.jpeg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
header {
position: relative;
height: 100px;
background: #291711;
}
header img {
display: block;
padding-top: 20px;
padding-right: 10px;
padding-left: 20px;
float: left;
}
header h1 {
color: #EEF0F2;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
padding-left: 20px;
}
header nav {
float: right;
padding-bottom: 0;
}
header nav a {
text-decoration: none;
color: #D1BEB0;
padding-right: 15px;
font-size: 20px;
}
a:nth-child(5) {
padding-right: 55px;
}
a:hover {
color: #938BA1;
}
#active-link {
color: #938BA1;
text-decoration: underline;
}
.content-container {
padding-top: 100px;
margin-bottom: 300px;
width: 60%;
background-color: #D9C9BE;
border: 2px solid #291711;
}
.content-container h2 {
font-size: 36px;
color: #4E453C;
text-decoration: underline;
text-align: center;
padding: 15px 0;
}
.content-container h3 {
font-size: 26px;
color: #3C2C26;
text-align: center;
padding: 20px 0 10px 0;
}
figure {
display: block;
border: 1px solid #3C2C26;
background-color: #FFFCF3;
height: 300px;
width: 400px;
margin: 0 auto;
}
figure img {
width: 100%;
text-align: center;
}
figcaption, p {
text-align: center;
padding-bottom: 10px;
}
blockquote {
position: relative;
font-size: 18px;
}
footer, push {
height: 200px;
}
footer {
width: 100%;
background-color: #291711;
text-align: center;
}
footer nav a {
float: inherit;
text-decoration: none;
color: #D1BEB0;
font-size: 28px;
font-family: Arial, serif;
font-weight: lighter;
padding-right: 15px;
}
#top-row {
padding-top: 25px;
padding-bottom: 15px;
}
#bottom-row {
padding-bottom: 25px;
}
footer p {
color: #D1BEB0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bloc Frontend Formations Part 1</title>
</head>
<body>
<div class="sticky-footer-wrapper">
<header>
<img src="https://i.imgur.com/v6FOpf0.png" title="source: imgur.com" />
<h1>Specialty Coffee Company</h1>
<nav>
Home
About SCC
<a id="active-link" href="#">Rare Coffees</a>
Store
Contact us
</nav>
</header>
<!-- Content Wrap -->
<div class="content-wrap">
<!-- Content Container -->
<section class="content-container">
<h2>Rare Coffees</h2>
<h3>Kopi Luwak</h3>
<figure>
<img src="https://www.indoneo.com/wp-content/uploads/2017/03/luwak_coffee_for_sale.jpg" alt="Kopi Luwak Coffee">
<figcaption><i>Kopi luwak for sale in Indonesia.</i></figcaption>
</figure>
<blockquote>"It’s the world’s most expensive coffee, and it’s made from poop. Or rather, it’s made from coffee beans that are partially digested and then pooped out by the civet, a catlike creature. A cup of kopi luwak, as it’s known, can sell for as much as $80 in the United States."</blockquote>
<p><cite>The Disturbing Secret Behind the World’s Most Expensive Coffee</cite> by Rachael Bale. National Geographic. <time>April 29, 2016</time></p>
<!-- End Content Container -->
</section>
<!-- End Content Wrap -->
</div>
<!-- Push for Sticky Footer -->
<div class="push"></div>
<!-- End Sticky Footer Wrapper -->
</div>
<footer>
<nav id="top-row">
Locations
Press
Blog
Jobs
FAQ
</nav>
<nav id="bottom-row">
Sustainability
Contact
</nav>
<p>Speciality Coffee Company, Torokvész út 95-97, Budapest</p>
</footer>
</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;
}
So I'm trying to create a landing page exactly like this (FYI, to work on my HTML/CSS skills, I have decided to exactly imitate this landing page just for practice!)
http://oi67.tinypic.com/b8qp8i.jpg
However, as you can see from what I did, the full background picture (sailing boat + ocean) does not show up in the first column: http://oi66.tinypic.com/o7ktgl.jpg
Another issue is that on the left side of the background image on the third column, I keep seeing on a small "broken page" icon (I don't know why it's there but it's really been annoying) ... is it an image problem or something wrong with the image file?
Help would be much appreciated, thank you!
Here is my full HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Relaxr</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="mainColumn">
<header>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
</header>
<span>
<button id="getButton">Get it Now</button>
</span>
</div>
<div id="secondColumn">
<header>
<h1>Benefits</h1>
<p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
<ul class="benefitss">
<li>Schedule meetings for you</li>
<li>Excel automation to complete your <br>work for you</li>
<li>Responds to e-mails on your behalf</li>
<li>Does all yor work for you with our<br>revolutionary technology</li>
</ul>
</header>
</div>
<div id="thirdColumn">
<img src="../images/testimonial_bg.jpg">
<p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
<p>- Amanda, Intuit</p>
</div>
<div id="fourthColumn">
<button id="signupButton">Sign Up Now!</button>
</div>
<div id="fifthColumn">
<p>Relaxr</p>
<div id="footer">
<p>Copyright 2015. Relaxr.</p>
</div>
</div>
</body>
</html>
CSS:
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Open Sans;
background: url(../images/header_bg.jpg) no-repeat center top;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/*MAIN COLUMN*/
#mainColumn {
width: 100%;
height: 450px;
text-align: center;
}
#mainColumn h1 {
color: white;
padding-right: 80%
}
#mainColumn h2 {
color: white;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 50px;
text-align: center;
}
header {
height: 40%;
}
/*GET IT NOW BUTTON*/
#getButton {
background-color: yellow;
border-radius: 3px;
border-style: none;
font-size: 14px;
font-weight: 700;
height: 30px;
width: 130px;
}
/*SECOND COLUMN*/
#secondColumn {
width: 100%;
margin: auto;
height: 360px;
background-color: white;
}
#secondColumn h1 {
padding-left: 65px;
padding-top: 60px;
color: navy;
font-size: 20px;
font-weight: 700;
}
#secondColumn p {
font-size: 13px;
padding-left: 70px;
}
.benefitss {
margin-left: 80px;
padding-top: 20px;
font-size: 13px;
}
.benefitss li{
padding-top: 2px;
}
/*THIRD COLUMN*/
#thirdColumn {
width: 100%;
height: 250px;
}
#thirdColumn p:nth-child(2) {
color: #ffffff;
font-style: italic;
font-size: 15px;
text-align: center;
}
#thirdColumn p:nth-child(3) {
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
}
/*FOURTH COLUMN*/
#fourthColumn {
background-color: yellow;
width: 100%;
height: 75px;
}
/*SIGN UP BUTTON*/
#signupButton {
background-color: #000040;
color: white;
border-radius: 3px;
border-style: none;
font-size: 12px;
font-weight: 800;
height: 30px;
width: 150px;
margin-left: 42.9%;
margin-top: 25px;
}
#fifthColumn {
background-color: #000000;
width: 100%;
height: 225px;
position: absolute;
}
#fifthColumn p {
color: yellow;
text-align: center;
font-size: 24px;
font-weight: 800;
}
#footer p {
font-size: 9px;
color: #ffffff;
text-align: center;
padding-top: 11%;
}
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; }