Css not cooperating/displaying as instructed?!

lostCoder · February 7, 2016

Hello all. I have been using the site to learn HTML(5) and CSS(3). I tried to give a serch around the forums before asking this, however i wasnt sure what to query (there for search didnt know what to result). So here i am, i apologise beforehand because im sure that this has been asked numerous times.

I am trying to use the knowledge I have learned while following the tutorials to create a simple page layout. However, i cant get passed the header! I thought i was understanding how it works but i must have missed something.

here are my issues:

header margin not being rendered.
navigation links not displaying right with margins or padding.
when padding is applied to containBody element (self-created) it doubles the top padding.
Basically most of my issues are with top and bottom margins/padding/spacing showing properly.
Height attribute has no effect on <li> element.

Here is my code (all HTML5 and CSS3):

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>Blank template</title>
		<style>
			body {
			background-color:skyblue;
			}
			contentBody {
			display:block;
			width:90%;
			background-color:white;
			margin-left:auto;
			margin-right:auto;
			}
			header {
			background-color:dodgerblue;
			margin:15px;
			height:50px;
			}
			nav ul li {
			display:inline;
			list-style-type:none;
			margin:10px;
			width:35px;
			}
		</style>
		
		<!-- <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> -->
	</head>
	<body>
		<contentBody>
			<header>
				<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contacts</a></li>
				</ul>
				</nav>
			</header>
		</contentBody>
		
	</body>
</html>

This example only shows the lack of top and bottom margins of the header. I would like to solve this one before i move on in hopes that whatever is my hinderance here will resolve the other issues as wel once this is resolved.

Is there any sort of semantic rules for html/css that i should be aware of that arent explained in the tutorials?

By the way im using the latest version of firefox only as my browser.

Thanks for reading, I Hope someone can shed some light on this for me.

dsonesuk · February 7, 2016

You cannot create your own custom html elements, there no such <contentBody> element, therefore the browser does not recognize it, so use element such as div instead.

The issue with margins might also be due to collapsing margins, where the margin of child element seeps through the parent element edge to apply margin to parent instead. This is usually fixed by using overflow: hidden; or 1px padding on the parent element.

Ingolme · February 7, 2016

You cannot create custom HTML elements. If you want to give style to a particular element you can give it a class or id attribute.

The <li> elements won't have any height, vertical padding or vertical margins because inline elements do not have any of those. You need to display them as a block to do that. I don't see a particular reason why the header wouldn't have margin, but 15px is not too big, maybe you didn't notice it, or maybe the contentBody element is messing with it, since it's not standard.

lostCoder · February 7, 2016

Thank you both for your replies. dsonesuk, i was just reading along in the html5 tutorial, on the browser support page (http://www.w3schools.com/html/html5_browsers.asp) there is a section called: "Adding new elements to HTML" and it shows an example (simple and similar to my code above) about how to create a custom element, i understand there wasnt an actual need for creating whole new element however i did it just to try the example and it does work except it only shows the left and right margins, yes the top and bottom margins are definitely not there as small of a spacing as 15px is i can still see it on the sides. Again i have only tested in firefox but load it up and you'll see what im talking about.

Ingolme, thanks for that info about <li>!!! That explains why it doesnt give me any effect when adding those instructions.

I appreciate the replies, I will try changing it to <div id="contentBody"> and see if it gives any changes. The reason i have it in the first place is to replace the <div id="container"> in the CSS tutorials.

EDIT: I changed the element to a div and got the same results. When I added a padding:1px; to the div then it gave me a margin all the way around it. However When i removed the margin from the header and increased the padding of the div to 15px the top spacing is twice the amount of the other 3 sides!? Is there some other rule im missing?

Edited February 7, 2016 by lostCoder

Ingolme · February 7, 2016

I'm not sure why W3Schools is telling people about creating new elements in the tutorial, but it's not a good idea.

The only good reason people created "new" elements in that fashion was to trick browsers that didn't support HTML 5 into accepting HTML 5 semantic elements. Elements like <section> and <article> weren't properly supported by browsers a few years ago, but by adding them to the page and using CSS to style them people could use them. Internet Explorer 8 and under didn't support adding custom elements to the page except if you used Javascript to call document.createElement(), so that hack was in place to make Internet Explorer 8 use HTML 5 elements.

lostCoder · February 8, 2016

Yeah i was reading about the browser trick too but i figured hopefully by the time i actually create a website (at this rate....) the browsers will all be handling new elements! Actually i assumed that HTML was trying to get rid of "div" altogether with the new elements and creating new elemnets I figured there was a grand plan involved .

Even with the "<div id=containerbody>" it acts exactly the same way! This seems like pretty simple code that should just work without any advanced knowledge of CSS hacks and DOM references! Dont get me wrong I do understand that there is no such thing as a perfect language but I must really be missing something here! I have used simple CSS before to change text colors and what-not with XML (used in conjunction with Java programming language) and didnt have a problem, however as i stated it was bareminimum basics nothing fancy.

So I guess what Im asking is; is there any html/css layout semantics I need to pick up on or is it always going to be "tweak this and cross your fingers"?

lostCoder · February 8, 2016

Alright, i finally got the navigation/header/container looking how i want (and more of how it is supposed to without any surprises). I removed the list out of the nav element and changed the display property to "inline-block". All of this seemed to remove the double top padding. The elements did not seem to acknowledge the margin property so i added a top and left padding of 15px and voila! here is all the code i ended up with:

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>Blank template</title>
		<style>
			body {
			background-color:skyblue;
			}
			#contentBody {
			display:block;
			width:90%;
			background-color:white;
			margin-left:auto;
			margin-right:auto;
			padding:10px;
			}
			header {
			background-color:dodgerblue;
			height:50px;
			}
			nav a {
			display:inline-block;
			padding:15px 0px 0px 15px;
			}
                </style>
	</head>
	<body>
		<div id="contentBody">
			<header>
				<nav>
				<a href="#">Home</a>
				<a href="#">About</a>
				<a href="#">Contacts</a>
				</nav>
			</header>
		</div>
		
	</body>
</html>

Thanks for the replies and advice, sorry if my frustration made me sound a little cynical in the last post (it happens ). I still am going to work on understanding web design a little more so expect more harassment from me in future posts

Thanks again.

dsonesuk · February 8, 2016

ALL elements have predefined default margins, padding, which are different between browsers. That is why you should zero margins/padding and reset these to your needs, a typical reset for body is

body {margin:0; padding:0;}

for ul and child li used for menu usually

nav ul, nav li {margin:0; padding:0; list-style-type: none; text-indent:0;}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>Blank template</title>
        <style>
            body {margin:0; padding:0;}/*added by dsonesuk */

            nav ul, nav li {margin:0; padding:0; list-style-type: none; text-indent:0;}/*added by dsonesuk */

            nav li{  display:inline-block;   } /*added by dsonesuk */


            body {
                background-color:skyblue;
            }
            #contentBody {
                /*display:block; already a block element*/
                width:90%;
                background-color:white;

                margin: 10px auto; /*amended by dsonesuk */
                /*   margin-left:auto;
                   margin-right:auto; removed by dsonesuk*/
                padding:10px;
            }
            header {
                background-color:dodgerblue;
                height:50px;
                padding: 0 7.5px; /*added by dsonesuk */

            }

            nav a {
                /* padding:15px 0px 0px 15px; removed by dsonesuk if you change font-size you have to adjust padding also but! using line-height does not require changing*/
                padding:0 7.5px;/*added by dsonesuk */
                line-height: 50px; /* make same height as header to centre vertically*/
                /*display:inline-block; removed by dsonesuk added to li element instead*/
            }


        </style>
    </head>
    <body>
        <div id="contentBody">
            <header>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contacts</a></li>
                    </ul>
                </nav>
            </header>
        </div>

    </body>
</html>

lostCoder · February 8, 2016

Thanks alot dsonesuk! Those browser resets should probably be in the beginning of the CSS for every new template/site. Is there a reference that you know of that i could see all of the default values for each html element?

I loaded the page that you edited and it works almost exactly the same! I will have to look it over in more detail and play with it a little to make sure i understand it. Also thanks for the line-height tip, there is still alot I have to learn! Any and all useful opensource/free tools or resources that you think would be help for me to learn and become more productive at web design will very much be appreciated!

Thanks again.

dsonesuk · February 8, 2016

There are so many elements and as i said they will differ between different browsers,you can however use a already popular reset stylesheet listed here http://cssreset.com/

lostCoder · February 9, 2016

Thanks alot for opening my eyes to the browser reset idea, looking around the web i stumbled upon a little gem that pretty much solved what i was thinking about, and also taught me something very valuable, the "*" wildcard!!!

* {margin: 0px;padding: 0px;}

I have used the wildcard before in a few other languages, however it never occured to me that it would work in CSS. I have underestimated how useful it really is and just how complex it can become. I have a lot to learn yet. I'm sure it wont be long before I get stumped about something else just trying to rush through the tutorials like I have been and need help again...

Css not cooperating/displaying as instructed?!

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in