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>
Related
My website wrapper will not fill in the entire height of the page. I have tried adjusting the min-height to 100%, tried just height 100% as well. I have tried auto height. I am sure it is something simple I am missing but I can't seem to find the solution to this problem. I have also tried just adding the CSS to the HTML page using the tag but that does not work either.
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
min-height: 100%;
margin: 0;
}
html {
min-height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100%;
overflow: hidden;
}
nav {
float: left;
width: 150px;
padding-top: 50px;
}
#rightcol {
margin-left: 155px;
background-color: #ffffff;
color: #000000;
}
header {
background-color: #869dc7;
color: #00005D;
font-size: 100%;
padding-left: 30px;
padding-bottom: 3px;
padding-top: 3px;
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
}
main {
display: flex;
padding: 20px 20px 20px;
}
#floatright {
margin: 10px;
float: right;
}
nav a {
margin: 30px;
}
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img src="Images/GCSCU_Color.png" alt="Logo" style="float:left;width:120px;height:70px; padding-right:10px" />
<h1>CRIF Access</h1>
</header>
<main>
<h2>This is just a test sentence for the main section of the page.</h2>
</main>
</div>
</div>
try it:
html,
body {
height: 100%;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005d;
min-height: 100%;
margin: 0;
}
html {
min-height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
height: 100%;
overflow: hidden;
}
nav {
float: left;
width: 150px;
padding-top: 50px;
}
#rightcol {
margin-left: 155px;
height: 100%;
background-color: #ffffff;
color: #000000;
}
header {
background-color: #869dc7;
color: #00005d;
font-size: 100%;
padding-left: 30px;
padding-bottom: 3px;
padding-top: 3px;
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
}
main {
display: flex;
padding: 20px 20px 20px;
}
#floatright {
margin: 10px;
float: right;
}
nav a {
margin: 30px;
}
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img
src="Images/GCSCU_Color.png"
alt="Logo"
style="float:left;width:120px;height:70px; padding-right:10px"
/>
<h1>CRIF Access</h1>
</header>
<main>
<h2>
This is just a test sentence for the main section of the
page.
</h2>
</main>
</div>
</div>
Please give height: 100%; and margin: 0; for html and body.
Your css will have below changes:
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
height: 100%;
margin: 0;
}
html {
height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100%;
overflow: hidden;
}
See working jsfiddle - here
Instead of percentage use Viewport units, in this case vh for height:
html, body {
min-height:100vh;
margin:0;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100vh;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="CSS/StyleSheet1.css" rel="stylesheet" />
<title>CRIF Access Homepage</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img src="Images/GCSCU_Color.png" alt="Logo" style="float:left;width:120px;height:70px; padding-right:10px"/>
<h1>CRIF Access</h1>
</header>
<main>
<h2>This is just a test sentence for the main section of the page.</h2>
</main>
</div>
</div>
</body>
</html>
I'm wondering why do you want (or need) the wrapper, you can do the job only with body.
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
I used a border to figure out that my wrapper is only wrapping my Header and I'm stumped as to why...I want to wrap the Header, all the way down to the footer... Anyone have any pointers?
I've seen a lot of articles say to specify a width and the height is set to auto if not stated, too, right?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Personal Transportation/Errands Services</title>
</head>
<body>
<header>
<div id="headleft">
<img src="images/new logo flattened.jpg" />
</div>
<div id="headright">
(717)***-****
<br />
********#yahoo.com
</div>
</header>
<nav>
Home
Contact
</nav>
<article>
Test
</article>
<aside>
<img src="images/car 1.png" id="car" />
</aside>
<footer>
Ftest
</footer>
</body>
</html>
/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}
/* Tell the browser to render HTML 5 elements as block */
footer, header, aside, nav, article {
display: block;
}
body{
width:940px;
height: 100%;
margin:0 auto;
border-style: solid;
border-width: 3px;
}
header {
background-color: #1a8cff;
}
nav {
width: 100%;
float: left;
text-align: right;
background-color: #ff7f00;
font-family: bold 'Oswald', sans-serif;
color: #ffffff;
letter-spacing: 1px;
}
a {
text-decoration: none;
}
/* unvisited link */
a:link {
color: #FFFFFF;
}
/* visited link */
a:visited {
color: #FFFFFF;
}
/* mouse over link */
a:hover {
color: #FFFF00;
}
/* selected link */
a:active {
color: #FFFF00;
}
#headleft {
display:inline;
background-color: #1a8cff;
width: 100%;
}
#headright {
height: 87px;
padding-top: 37.5px;
vertical-align: middle;
display: inline;
float: right;
background-color: #1a8cff;
border-style: solid;
border-width: 3px;
}
body {
margin: 0 auto;
width: 1000px;
font: 13px/22px Helvetica, Arial, sans-serif;
background-color: white;
background-size: 100%;
}
article{
float: left;
}
aside{
float: right;
}
footer{
float:left;
background-color: #1a8cff;
width: 100%;
}
you need to clear your floated elements, you can use a clearfix or an empty div set to clear:both.
FIDDLE
You could also use a wrapper inside the body that wraps every element on the page and set that to overflow: hidden
ALT FIDDLE
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; }
I am EXTREMELY new to CSS and HTML (beginners course at uni) so I'm not sure if this is a super basic issue or not.
I'm using CODA 2 on a mac.
I have 5 HTML pages and a separate stylesheet.css.
In Coda preview the CSS works on the HTML pages. If I manually save the .css the HTML pages don't display any CSS. If I slightly edit anything on the .CSS the HTML pages refresh in preview and display the CSS again.
If I open my HTML pages in the browser (chrome/firefox) they are displayed without any css.
The correct links to the .CSS page are on all my HTML pages (under the title).
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="ms.css" />
Any help would be MUCH appreciated as time is ticking away and I am completely lost.
Cheers
EDIT*
All the files are located within the same folder.
CSS code
`#charset "utf-8";
/* CSS Document */
header {
a:link color:white;
a:visited {color:white;
font-family: sans-serif;
background-color: #004292;
width: 640px;
}
header nav a {
color: white;
text-decoration: none;
font-family: sans-serif;
}
header > h1 > a {
color: white;
text-decoration: none;
font-family: fantasy;
font-size: large;
}
header nav a:hover {
background-color:white;
color: #004292;
border: 1px solid white;
}
body {
width: 1080px;
background-color: #004292;
padding-left: 0px;
border-bottom-left-radius: 0px;
}
nav > ul {
width 1080px;
}
nav > ul > li {
display: inline;
float: right;
}
nav > ul > li > a {
float: right;
padding: 0 15px;
transition: background-color 0.5s, border-color 1s;
}
.onion {
background-color: #004292;
font-family: sans-serif;
color: white;
float: left;
width: 640px;
margin-left: auto;
margin-right: right;
padding-top: 100px;
}
section {
background-color: #004292;
font-family: Arial, sans-serif;
color: white;
float: left;
width: 640px;
}
.lcol {
width: 100px;
float: left;
}
.lcol img {
width 200px;
}
.rcol {
width: 100px;
float: right;
}
.rcol img {
width 200px;
}
#wrap {
width: 640px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-family: Arial, sans-serif;
color: white;
float: left;
}
#beef img{
width: 512px;
height: 306px;
background-image: url(kingswood_text.jpg);
background-position: 0 0;
}
#beef img:hover {
background-position: 0 100%;
opacity: 0.1;
}
#wrap img:hover {
opacity: 0.1;
background-position: 0 0;
}
#wrap img {
margin: 10px;
border:2px solid white;
width: 512px;
height: 306px;
background-image: url(kingswood_text.jpg) bottom;
}
#yelp {
background-color: white;
color: white;
width: 1080px;
margin-top: 100px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
border-bottom-left-radius: 0px;
float: left
}
#yelp img {
margin-left: auto;
margin-right: auto;
}
footer {
width: 640px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
color: white;
background-color: #004292;
font-family: Arial, sans-serif;
clear: both;
display: block;
padding-top: 100px;
padding-left: 50px;
}
HTML for the index.html page.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>GTM Canberra</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="ms.css" />
</head>
<body>
<!-- Header -->
<header>
<div id="corn"
<h1>GTM </h1>
<nav>
<!-- nav links -->
<ul>
<li>About</li>
<li>FAQ</li>
<li>Event Info</li>
<li>Getting There</li>
<li>Lineup</li>
</ul>
</nav>
</div>
</header>
<!-- Logo/Image/PageID -->
<div id="yelp"
<section>
<img src="images/logo.jpg" alt="logo" width="647" height="358">
</section>
</div>
<!-- Content -->
<div id="wrap"
<section>
<div class="rcol">
<a id="beef">
<a href="lineup.html"><img src="images/steptones.jpg" alt="steptones" >
</a>
<a href="lineup.html"><img src="images/stone.jpg" alt="stone" >
</div>
<div class="lcol">
<a href="lineup.html"><img src="images/north.jpg" alt="north" >
<a href="lineup.html"><img src="images/kingswood.jpg" alt="kingswood" >
</div>
</section>
</div>
<!--Footer -->
<footer>
<p> Presented by Cattleyard Promotions and supported by triple j and Channel V </p>
</footer>
</body>
</html>
You have to close your opening div tags, from this
<div id="corn"
to this
<div id="corn">
Same with <div id="yelp"and <div id="wrap"
Also in your css you forgot to put colons in some parts, like
.lcol img {
width 200px;
}
instead of
.lcol img {
width: 200px;
}
In new projects, it's better to start with as little code as you can in both the HTML and CSS files (and js files too) just to see that all files are linked together.
Edit:
a:visited {color:white
In the CSS file, can you please remove the first line or at least remove the accent before #charset "utf-8";
`#charset "utf-8";