Problem with CSS styling after adding HEADER

@newuserphpMar 26.2015

I’ve got a small problem with HTML.

My webpage was working perfectly — the styling, the navigation panel, and the footer.

Then, yesterday, I added a HEADER to the top of the page. And it screwed up my styling.

For some reason, the <ARTICLE> got pushed down ~~[B]~~to the bottom of the page[/B] (below the Navigation Panel) !!

My Navigation Panel is positioned vertically, to the LEFT of the page.

In other words, the ARTICLE is now positioned in “relation” to the Navigation Panel.

And this only happened after I added a Header to the top of the page.

I’ve tried everything I can to fix this, but nothing works

Craziest thing : I know that the solution to this problem is something very minor! I just cant put my finger on it

~~[QUOTE]~~

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” type=”text/css” href=”mystyles.css”>
<title>my webpage</title>

<style type=”text/css”> html, body, article, footer, nav { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,footer,nav { display:block; } nav ul { list-style:none; } </style>

<meta name=”description” content=””> <meta name=”keywords” content=””>

<style type=”text/css”> html { color: black; background-color: white; font-family: sans-serif; } body { width: 1350px; height:685px; margin: 0 auto 0 auto; padding:0px; background-color: white;} nav { top:0; left:0; z-index:auto; height:400px; width: 300px; display: table; background-color: yellow;} article { padding-left:300px; top:0; width: 1050px; display: table; background-color: white;} </style>

</head>

<body>

<nav> <ul style=”list-style: none”> <h3>Main Menu</h3> <li><b>About MY_GAME</b></li> <ul style=”list-style: none”> <dt> <li><a href=”#so_what_is_MY_GAME”>So, what exactly is MY_GAME</a></li> <br> <li><a href=”#what_makes_MY_GAME_different”>What makes MY_GAME any different?</a></li> <br> <li><a href=”/MY_GAME/HTML/about_MY_GAME_3.html#origin_of_MY_GAME”>The origin of MY_GAME : how it all began</a></li> </dt> </ul> <br> <li><a href=”/MY_GAME/HTML/how_to_play_MY_GAME_1.html” target=”_blank”>How to Play MY_GAME</a></li> <br> <li><a href=”/MY_GAME/HTML/FAQ.html” target=”_blank”>FAQ</a></li> <br> </ul> <br> <ul style=”list-style: none”> <li><a href=”/MY_GAME/PHP/login.php”>Already a user? Log in here</a></li> <br> <li><a href=”/MY_GAME/PHP/index.php”>New user? Register here</a></li> </ul> </nav>

<article> <h1 style=”color:blue; text-align:center; font:verdana; font-size:250%”><b><i><u>About MY_GAME</u></i></b></h1> <h3><a name=”so_what_is_MY_GAME”></a>So, what exactly is MY_GAME ?</h3> <dd> <p>Simply put, “MY_GAME” Is an online game, designed designed to be fun..</p>

<p>Simply put, “MY_GAME” Is an online game, designed designed to be fun..</p>
<p>Simply put, “MY_GAME” Is an online game, designed designed to be fun..</p>
<p>Simply put, “MY_GAME” Is an online game, designed designed to be fun..</p>
<p>Simply put, “MY_GAME” Is an online game, designed designed to be fun..</p>
<p>Simply put, “MY_GAME” Is an online game, designed designed to be fun..</p>
<p>Simply put, “MY_GAME” Is an online game, designed designed to be fun..</p>
</dd>
<br>

<br> <p style=”font-style:bold; font-size:180%; text-align:center”><a href=”/MY_GAME/HTML/about_MY_GAME_2.html”>Next</a></p> </article>

<div id=”footer1″>
<footer>
<ul style=”float:right; margin-right:15px; list-style: none”>
<li><b>Follow us on :</b></li>
<li><img src=”/MY_GAME/Images/facebook.jpg”/><b><a href=”https://www.facebook.com/” target=”_blank”><font color=”blue”>Facebook</a></b></li>
<li><img src=”http://localhost/MY_GAME/Images/twitter.jpg”/><b><a href=”https://twitter.com/” target=”_blank”><font color=”blue”>Twitter</a></b></li>
<li><img src=”http://localhost/MY_GAME/Images/linkedin.jpg”/><b><a href=”fi.linkedin.com/pub/en” target=”_blank”><font color=”blue”>LinkedIn</a></b></li>
</ul>
</footer>
</div>

</body>
</html>

[/QUOTE]

to post a comment

CSS

9 Comments(s) _↴

@jedaisoulMar 26.2015 — #You have not listed the style sheet "mystyles.css". And your css is a mess with the style sheet, two <style> sections in the head AND inline styles! It is a wonder anything works.

@newuserphpauthorMar 26.2015 — #You have not listed the style sheet "mystyles.css". And your css is a mess with the style sheet, two <style> sections in the head AND inline styles! It is a wonder anything works.[/QUOTE]

If you had bothered to look [B]CLOSELY[/B], you would have noticed that : the first <style> section is merely a RESET !

@nap0leonMar 26.2015 — #Not sure what you are going for... but to make the "Article" appear at the same height as the Yellow Nav box...

1- remove "padding-left:300"

2- add "margin: auto" and "float: left" to the nav and article.

Your footer seems kinda funky thrown off the edge of the page.

Your mixture of inline styles and <style> tags makes this very confusing to work with...

also, <nav> and <article> are not standard tags... you should use <div> with ids, like <div id="nav"> and <div id="article"> and <div id="footer">

Anywho... here's a page that fixes what you asked about:

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;link rel="stylesheet" type="text/css" href="mystyles.css"&gt;
 &lt;title&gt;my webpage&lt;/title&gt;
 
 &lt;style type="text/css"&gt;
 html, body, article, footer, nav {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
 }
 body { line-height:1; }
 nav ul { list-style:none; }
 &lt;/style&gt;
 
 &lt;meta name="description" content=""&gt;
 &lt;meta name="keywords" content=""&gt;
 
 &lt;style type="text/css"&gt;
 html { color: black; background-color: white; font-family: sans-serif; }
 body { width: 1350px; height:685px; margin: 0 auto 0 auto; padding:0px;background-color: white;}
 nav { top:0; left:0; z-index:auto; height:400px; width: 300px; display: table; background-color: yellow;margin: auto; float:left;}
 article { top:0; width: 1050px; display: table; background-color: white; margin: auto; float:left;}
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="header1"&gt;
 &lt;header&gt;
 &lt;img src="/MY_GAME/Images/logo.gif"/&gt;
 &lt;/header&gt;
 &lt;/div&gt;
 
 &lt;nav&gt;
 &lt;ul style="list-style: none"&gt;
 &lt;h3&gt;Main Menu&lt;/h3&gt;
 &lt;li&gt;&lt;b&gt;About MY_GAME&lt;/b&gt;&lt;/li&gt;
 &lt;ul style="list-style: none"&gt;
 &lt;dt&gt;
 &lt;li&gt;&lt;a href="#so_what_is_MY_GAME"&gt;So, what exactly is MY_GAME&lt;/a&gt;&lt;/li&gt;
 &lt;br&gt;
 &lt;li&gt;&lt;a href="#what_makes_MY_GAME_different"&gt;What makes MY_GAME any different?&lt;/a&gt;&lt;/li&gt;
 &lt;br&gt;
 &lt;li&gt;&lt;a href="/MY_GAME/HTML/about_MY_GAME_3.html#origin_of_MY_GAME"&gt;The origin of MY_GAME : how it all began&lt;/a&gt;&lt;/li&gt;
 &lt;/dt&gt;
 &lt;/ul&gt;
 &lt;br&gt;
 &lt;li&gt;&lt;a href="/MY_GAME/HTML/how_to_play_MY_GAME_1.html" target="_blank"&gt;How to Play MY_GAME&lt;/a&gt;&lt;/li&gt;
 &lt;br&gt;
 &lt;li&gt;&lt;a href="/MY_GAME/HTML/FAQ.html" target="_blank"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
 &lt;br&gt;
 &lt;/ul&gt;
 &lt;br&gt;
 &lt;ul style="list-style: none"&gt;
 &lt;li&gt;&lt;a href="/MY_GAME/PHP/login.php"&gt;Already a user? Log in here&lt;/a&gt;&lt;/li&gt;
 &lt;br&gt;
 &lt;li&gt;&lt;a href="/MY_GAME/PHP/index.php"&gt;New user? Register here&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/nav&gt;
 
 &lt;article&gt;
 &lt;h1 style="color:blue; text-align:center; font:verdana; font-size:250%"&gt;&lt;b&gt;&lt;i&gt;&lt;u&gt;About MY_GAME&lt;/u&gt;&lt;/i&gt;&lt;/b&gt;&lt;/h1&gt;
 &lt;h3&gt;&lt;a name="so_what_is_MY_GAME"&gt;&lt;/a&gt;So, what exactly is MY_GAME ?&lt;/h3&gt;
 &lt;dd&gt;
 &lt;p&gt;Simply put, "MY_GAME" Is an online game, designed designed to be fun..&lt;/p&gt;
 &lt;p&gt;Simply put, "MY_GAME" Is an online game, designed designed to be fun..&lt;/p&gt;
 &lt;p&gt;Simply put, "MY_GAME" Is an online game, designed designed to be fun..&lt;/p&gt;
 &lt;p&gt;Simply put, "MY_GAME" Is an online game, designed designed to be fun..&lt;/p&gt;
 &lt;p&gt;Simply put, "MY_GAME" Is an online game, designed designed to be fun..&lt;/p&gt;
 &lt;p&gt;Simply put, "MY_GAME" Is an online game, designed designed to be fun..&lt;/p&gt;
 &lt;p&gt;Simply put, "MY_GAME" Is an online game, designed designed to be fun..&lt;/p&gt;
 &lt;/dd&gt;
 &lt;br&gt;
 
 &lt;br&gt;
 &lt;p style="font-style:bold; font-size:180%; text-align:center"&gt;&lt;a href="/MY_GAME/HTML/about_MY_GAME_2.html"&gt;Next&lt;/a&gt;&lt;/p&gt;
 &lt;/article&gt;
 
 &lt;div id="footer1"&gt;
 &lt;footer&gt;
 &lt;ul style="float:right; margin-right:15px; list-style: none"&gt;
 &lt;li&gt;&lt;b&gt;Follow us on :&lt;/b&gt;&lt;/li&gt;
 &lt;li&gt;&lt;img src="/MY_GAME/Images/facebook.jpg"/&gt;&lt;b&gt;&lt;a href="https://www.facebook.com/" target="_blank"&gt;&lt;font color="blue"&gt;Facebook&lt;/a&gt;&lt;/b&gt;&lt;/li&gt;
 &lt;li&gt;&lt;img src="http://localhost/MY_GAME/Images/twitter.jpg"/&gt;&lt;b&gt;&lt;a href="https://twitter.com/" target="_blank"&gt;&lt;font color="blue"&gt;Twitter&lt;/a&gt;&lt;/b&gt;&lt;/li&gt;
 &lt;li&gt;&lt;img src="http://localhost/MY_GAME/Images/linkedin.jpg"/&gt;&lt;b&gt;&lt;a href="fi.linkedin.com/pub/en" target="_blank"&gt;&lt;font color="blue"&gt;LinkedIn&lt;/a&gt;&lt;/b&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/footer&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@Kevin2Mar 26.2015 — #If you had bothered to look [B]CLOSELY[/B], you would have noticed that : the first <style> section is merely a RESET ![/QUOTE]

Why are you so defensive? You asked what was wrong with your page/styles and were given good advice! There should really be only one <style> tagset in a <head>. Even though 2 <style> tagsets don't throw a validation error, common and accepted practice is to use one set. Better yet, combine all your styles (in the <head> and inline) and put them in your external stylesheet.

[B]jedaisoul[/B] is one of the most knowledgeable folk on this forum. I guarantee you he bothered to look [B]CLOSELY[/B][/QUOTE] before replying. Follow his advice.

Look, you have 37 errors in your HTML alone. Plug it in your own self at validator.w3c.org, find and fix the errors (or at least most of them) or take the easy way out and use [B]nap0leon[/B]'s code as a starting point.

Just one example that throws a bunch of errors:

[code=html]<li><img src="http://localhost/MY_GAME/Images/linkedin.jpg"/><b><a href="fi.linkedin.com/pub/en" target="_blank"><font color="blue">LinkedIn</a></b></li>[/code]

The <font> tag has been deprecated since about 1999. In other words W3C has said from HTML4-ish forward "DON'T USE IT!!! JUST STOP!" Now, even though you went against that advice you used it [B]incorrectly[/B] and [B]redundantly[/B]:

[INDENT][B]Incorrectly:[/B] you don't close the tag(s) with a corresponding </font> tag.

[B]Redundantly:[/B] Blue is the default color of text links (<a>nchor tags). Why are you telling browsers to override their default text link color with their default text link color? I'll leave you to ponder on that last sentence...[/INDENT]

Another example:

Your <nav> code, especially the child <ul> is an amazing "mess". <h3>, <dt> and <br> are not valid child tags of <ul>. The ONLY valid child is the <li> tagset. Put your <h3> tagset before your <ul>. Need space between the <li>s? Use CSS margins instead of </li> <br> <li>. Why you have a <dt> tagset there is beyond me as the only valid way of using <dt> and <dd> (which you use as a child of <article>) is to have a parent <dl> tagset ([B]D[/B]efinition [B]L[/B]ist). The correct/valid way to use <dt> and <dd>:

&lt;dl&gt;
 &lt;dt&gt;Term to be defined ([B]D[/B]efinition [B]T[/B]erm)&lt;/dt&gt;
 &lt;dd&gt;Definition of the above term&lt;dd&gt;
 &lt;/dl&gt;

Have you fallen into the noobtrap of using HTML tags for their default appearance?

And that's only your HTML. There are myriad other errors in your inline CSS. As [B]jedaisoul[/B] stated, "It is a wonder anything works."

Some sincerely gentle advice: Learn what valid HTML and correct CSS looks like before questioning the help of someone much more knowledgeable than you -- and much more knowledgeable than me for that matter.

@jedaisoulMar 27.2015 — #If you had bothered to look [B]CLOSELY[/B], you would have noticed that : the first <style> section is merely a RESET ![/QUOTE]
What difference does the fact that it is a reset make? Because the external style sheet is linked in BEFORE the reset, [i]the reset will override the settings in the style sheet[/i]. Oops! ?

The reset should be placed:

1. If it is embedded in the head section, it should come before any linked style sheets.

2. If it is in an external style sheet, it should be in the first one linked in, and be linked in BEFORE the embedded style sheet (if any).

Basically, best practice is:

1. Do NOT use inline styling at all.

2. Use embedded style sheets for:

a) Example purposes. E.g. When I give code here as an example, I will generally embed the style sheet in the HTML head section, so I only have to cut and paste one block of code.

b) A general reset. E.g. It may be prudent to embed the general reset if there are multiple external style sheets used, of which none can be relied on to always be used in any given page.

Note: When a general reset is embedded in the HTML <head> section the <style> </style> MUST come before any <link>s for external style sheets.

3. External style sheets should be preferred for all LIVE sites. This is because modern browsers cache the external style sheets. So using them also helps page load time (after the first page has loaded).

4. A single generic style sheets should generally be preferred over multiple style sheets. This helps to minimize the load time. However, it may be appropriate to have more than one style sheet if:

a) A given page has numerous style settings that are not required elsewhere in the site. E.g. A contact page may have many style settings that are specific to that page. Excluding such settings from the generic style sheet can help minimize the load time of the landing page.

b) Where sites are built using a modular framework, a modular approach to the style sheets may be more appropriate. That has to be balanced against the effect on the load time of the landing page.

@newuserphpauthorMar 27.2015 — #Not sure what you are going for... but to make the "Article" appear at the same height as the Yellow Nav box...
[/quote]

Thanks, Napoleon!

It worked beautifully ?

Only problem now is (just as you said) : my "footer" was thrown off the edge. In fact, it went right to the top of the page (directly below the header).........although the TEXT itself (facebook, linkedin, etc) remained at the bottom.

Here is my footer "ID" :

#footer1 { position: relative; bottom:0; width:100%; height:180px; background:#82C2C9; }[/QUOTE]

@newuserphpauthorMar 27.2015 — #No worries, Napoleon.

Got it fixed! ?

@nap0leonMar 27.2015 — #I don't know what your end goal is, but, whatever it is, it will be less effort to simply start over.

Create properly nested DIVs to organize content.

Style these DIVs with only <style> ids and classes.

It took me about 5 minutes to draw up a starting point for you.

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;style&gt;
 html,body {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
 }
 #page-content {
 margin:auto;
 width:80%;
 }
 #header1 {
 width:100%;
 background-color:yellow;
 }
 #content {
 }
 #nav {
 width:20%;
 float:left;
 background-color:green;
 }
 #article {
 width:80%;
 float:left;
 background-color:orange;
 }
 #footer1 {
 width:100%;
 float:left;
 background-color:purple;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="page-content"&gt;
 &lt;div id="header1"&gt;
 header image goes here, or as background of "#header1"
 &lt;/div&gt;
 &lt;div id="content"&gt;
 &lt;div id="nav"&gt;
 Nav goes here
 &lt;/div&gt;
 &lt;div id="article"&gt;
 Article goes here
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div id="footer1"&gt;
 Footer goes here
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@newuserphpauthorMar 27.2015 — #I don't know what your end goal is, but, whatever it is, it will be less effort to simply start over.

Create properly nested DIVs to organize content.

Style these DIVs with only <style> ids and classes.

It took me about 5 minutes to draw up a starting point for you.
[/QUOTE]

Thanks again, Napoleon ))))

Also in #CSS _↴

[RESOLVED] Style for space between header & list bullets css grid positioning help At my wits end..."I'm never using rounded corners again

Success!

Help @newuserphp spread the word by sharing this article on Twitter...

Tweet This

Problem with CSS styling after adding HEADER

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Problem with CSS styling after adding HEADER

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴