?
Solved

Basic CSS issues

Posted on 2016-10-04
24
Medium Priority
?
44 Views
Last Modified: 2016-10-05
Hello,

I'm new to CSS and getting stuck.

The URL I'm working on is https://dev.goebase.com/cssframestest.asp

I'm trying to have a fixed header, content, and footer areas. I want the primary middle area to centered in the browser with a grey background on the left and right of the primary area.

However, my tests have not worked. It's left-aligned, the footer isn't showing.

Any pointers would be greatly appreciated!

Steve
0
Comment
Question by:skbohler
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 12
24 Comments
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41828373
Can't see the page - there is a login screen.
0
 

Author Comment

by:skbohler
ID: 41828374
Sorry about that, should be open now.
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41828406
Here is a very basic template for a sticky footer with full height centered page
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body, html {
   height: 100%;
   background: gray;
}
.wrapper {
   padding-bottom: 100px;
   height: 100%;
   width: 1024px;
   background: #fff;
   margin: 0 auto;
}
.content {
  padding: 15px;
}
header {
  line-height: 50px;
  background: blue;
}
footer {
  height: 100px;
  background: blue;
  width: 1024px;
  margin: -100px auto 0 auto;
  padding: 15px;
  color: #fff;
}
nav ul {
  link-style: none;
}
nav ul li {
   display: inline-block;
}
nav ul li a {
   text-decoration: none;
   color: #fff;
   margin: 0 15px;
}
</style>
</head>
<body>
<div class="wrapper">
  <header>
    <nav>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>
  </header>
   <div class="content">
    <div class="container">
    <h1>Main Page</h1>
    <p>This is the main content</p>
    </div>
   </div>
</div>
<footer>
  footer content goes here
</footer>
</body>

Open in new window

Working sample here
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:skbohler
ID: 41828444
Julian,

Thanks for your post.

I should have mentioned that the header and footer need to be fixed, like frames.

I implemented your code, and it sort of destroyed the existing formatting if you go to:

https://dev.goebase.com/cssframestest.asp

Is there an easy fix for that as well?
0
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41828463
You want the header and footer to be fixed and the content to scroll between them?
Do you mean something like this
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body, html {
   height: 100%;
   background: gray;
}
.wrapper {
   padding-bottom: 100px;
   height: 100%;
   width: 1024px;
   background: #fff;
   margin: 0 auto;
}
header {
  position: fixed;
  line-height: 50px;
  background: blue;
  width: 1025px;
}
.content {
  padding: 15px;
  padding-top: 50px;
  background: white;
}
footer {
  height: 100px;
  background: blue;
  padding: 15px;
  color: #fff;
  position: fixed;
  bottom: 0;
  width: 1024px;
}
nav ul {
  link-style: none;
}
nav ul li {
   display: inline-block;
}
nav ul li a {
   text-decoration: none;
   color: #fff;
   margin: 0 15px;
}
</style>
</head>
<body>
<div class="wrapper">
  <header>
    <nav>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>
  </header>
   <div class="content">
    <div class="container">
    <h1>Main Page</h1>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    <p>This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph. This is the main content. Random text to fill out the paragraph</p>
    </div>
   </div>
  <footer>
    footer content goes here
  </footer>
</div>
</body>

Open in new window

Working sample here
0
 

Author Comment

by:skbohler
ID: 41828477
Yes, that's it.

Thank you.

I implemented it here: https://dev.goebase.com/cssframestest.asp

However, there's no scrollbar and the footer isn't where it should be.

Are there other styles overuling your styles? Or mismatched "div" tags?
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41828497
You have put the entire site in the header - you need to separate your content out and close the header off.
You don't need scroll bars - if you have made the header and footer fixed the content will create a browser scroll bar.

I see you are using tables for layout - you should reconsider that - we don't use tables for layout anymore - only for showing data.
0
 

Author Comment

by:skbohler
ID: 41828504
Well, the header section includes another file, which has some javascript and it's own styles, so maybe it just looks like the whole site is in the header tag if you view source. But, it shouldn't be.

I've removed some of the stuff in the header include file so it looks less like the whole page is in the header tag. Look better now?

Yeah, the whole site needs to be gradually migrated to CSS. This is just the beginning of creating a new template.
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41828510
But, it shouldn't be
Except it is - view the source and you will see. (see image below)
ss72.jpg
0
 

Author Comment

by:skbohler
ID: 41828572
Wow, I can see that now if I inspect the code. But, I can't see why that would be. The div's in the included file appear to match. Hmmm...
0
 

Author Comment

by:skbohler
ID: 41828580
Julian,

I inserted the include file in the header tag. Same issue. I'm not good enough to know why the main content is being included in the header tag. Are you able to see?:

https://dev.goebase.com/cssframestest.asp

Thanks!

STeve
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41828759
Looks better.

The footer just needs a background
footer {
  ...
  background: #fff;
}

The header is a bit more complicated because the <header> element contains two div's that are positioned absolutely. This means they are not going to expand the height of the <header> to the height of the contained elements. You can fudge it by doing the following
CSS
#headerbg {
  position: absolute;
  z-index: 100;
}
#header1 {
  position: absolute;
  z-index: 2;
  background: white;
}

Open in new window

Not ideal but it should work
0
 

Author Comment

by:skbohler
ID: 41828788
Hi,

I made those edits. But, it still looks the same. The header is transparent and the footer is north of the bottom.

I'm looking at it in Chrome.

Any thoughts?

Thanks again, so much, for your help!

Steve
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41828797
I am not seeing the edits. No background colour in the footer
ss73a.jpgNo background colour in #header1
ss73b.jpg
0
 

Author Comment

by:skbohler
ID: 41828816
OK, I had background as "fff", not "#fff". Thanks. Now the footer is fixed in it's place.
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41828842
Now the footer is fixed in it's place
It always was - just did not have a background to hide the page behind.
Still no background for #header1
0
 

Author Comment

by:skbohler
ID: 41828862
Ah, I was missing the semicolon before the background specification. That's fixed now.

One last thing. If I scroll to the bottom, some of the main content is cut off (not showing or hidden by the footer).

Which specification should I tweak to fix that, please?

Thanks!

Steve
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41828928
Add padding to .content equal to at least the footer height
.content {
  background: white none repeat scroll 0 0;
  padding: 100px 15px 70px;
}

Open in new window

0
 

Author Comment

by:skbohler
ID: 41828932
Perfect. Thank you!
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41829291
You are welcome.
0
 

Author Comment

by:skbohler
ID: 41829887
Julian,

I have another related question. If I should create a new question here, let me know.

But, I took all of the CSS declarations and put them into style.css and linked it.

Now, the header and footer and some other styles are not being applied.

You can see at https://dev.goebase.com/landingpages/tooltest.asp

Are there things that change when you go from linking to a .css file instead of just having them in the file?
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41829955
Hint: to save you hours of frustration - put some time into formatting your code. Neat code is always easier to debug because mistakes jump out at you.

There are several things wrong
1. You have two <head> sections - in fact the whole area between <html> and <body> should be revisited
2. Your stylesheet  on line 38 has a style .largetext without a closing '}' (the root cause of the problem)
3. Your reset.css link is right in the middle of your javascript - do page source and look at line 358

Seriously, if you are going to be doing development and not take the time to structure your code you are going to have many more problems like this.

Not critical but out of interest
1. Tags that are self closing should be marked up as such. Example (note the \>)
<link rel="stylesheet" href="style.css" />

Open in new window

Instead of
<link rel="stylesheet" href="style.css" >

Open in new window

2. We don't need to specify a language for <script> tags any more you can just do
<script>
...
</script>

Open in new window

Fix that closing '}' in the style sheet and you should be set but take some time to structure your code and css files.
0
 

Author Comment

by:skbohler
ID: 41829987
Ah, thanks. I guess I removed the bracket when pasting in the new css.

Yeah, I'm inheriting some real spaghetti-code.

Just curious, are you available for css-work for hire if we go that route?

Steve
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41830019
Yes -  you can use the Hire Me button on my profile.
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question