lostCoder
-
Posts
8 -
Joined
-
Last visited
lostCoder's Achievements
Newbie (1/7)
0
Reputation
-
Remove the <br /> and increase the top margin on the footer to see the conflict. I apologize but I'm not understanding what you mean about reseting the header and paragraph tags, I thought thats what the '*' wildcard did at the top of the style declaration, or do I need to do it again after that? Thanks for taking the time to review my post and code and thanks alot for your input.
-
Ok, I promise that i am actually making an effort to find the answers myself before I ask here because I'm sure I'm just missing a simple fundamental concept somewhere. I have been learning HTML/CSS and have been trying to make a simple page layout and it has been a challenge! But I have a passing template that technically does what and displays how i want it to, however I'm not happy with the way I had to achieve the goal... What I am experiencing is my <footer> top margin going behind the whole <main> element and doesn't start registering a change until around 250px or so depending on the amount of content/space <main> is using. How I ended up resolving this was using a <br /> and in the CSS set the line-break (br) "clear" property to "both". As I am trying to make the page somewhat "responsive" to resizing i cant use a width property in percentage and a margin property in pixels and have the same uniform gaps/spaces between elements. I've thought about changing the margins to percents but with the little programming experience I have I can foresee there being an issue down the road. Also I'm just assuming that less code = better performance, so I'm trying to have the least amount of CSS rules and ID's/DIV's as possible in hoping that relying on the defaults as much as possible will make the page display the most similar in different environments. With that being said I would rather understand why i need to use the br as it seems more like hacking it together rather than following semantic standards. here is the code: <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Blank Template</title> <link rel="stylesheet" type="text/css" href="style.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> * {margin: 0px;padding: 0px;} body { background-color: gainsboro; } #bodyContainer { background-color: white; max-width: 780px; padding: 7.5px; margin: 15px auto; } header { background-color: black; height: 150px; padding: 0px 10px; color: white; margin: 7.5px; } header h1 { line-height: 50px; text-indent: 15px; padding: 10px 0px 0px 0px; } header p { line-height: 40px; text-indent: 35px; font-style: italic; color: goldenrod; } nav a { line-height: 50px; display: inline-block; padding: 0 7.5px; text-decoration: none; color: goldenrod; } nav a:hover { color: gold; } nav { width: 50%; float: right; text-align: right; } aside { max-width: 25%; display: inline-block; margin: 10px 7.5px; float: left; } aside a { text-decoration: none; color: black; display: block; line-height: 30px; padding: 0px 10px; } aside a:hover { color: goldenrod; } main { max-width: 75%; margin: 7.5px 7.5px; float: right; padding: 10px; } main h1 { padding: 5px 15px 10px; color: goldenrod; } main section { margin: 7.5px; padding: 0px 7.5px; } main section article { text-align: justify; padding: 0px 20px 20px 0px; } article h3 { padding: 7.5px; } article p { text-indent: 2em; } footer { background-color: black; height: 30px; color: white; margin: 7.5px; clear: right; } footer p { text-align: center; line-height: 30px; margin: 0px auto; } footer a { color: goldenrod; text-decoration: none; } footer a:hover { color: gold; } br { clear: both; } </style> </head> <body> <div id="bodyContainer"> <header> <h1>Site Title</h1> <p>Catchy slogan goes here!</p> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav> </header> <aside> <a href="#">Side Menu Link 1</a> <a href="#">Side Menu Link 2</a> </aside> <main> <h1>Page Title</h1> <section> <article> <h3>Article Title</h3> <p> This is my attempt at a simple website template. It has been a bumpy road but I think I've just about got it. The page only uses one ID and not a single class! This is just filler text to see how the page looks with the most basic of content. </p> </article> <article> <h3>Article Title</h3> <p> This is my attempt at a simple website template. It has been a bumpy road but I think I've just about got it. The page only uses one ID and not a single class! This is just filler text to see how the page looks with the most basic of content. </p> </article> </section> <br /> </main> <br /> <footer> <p>© 2016 <a href="https://www.google.com/search?q=define:nullify">Who Cares</a></p> </footer> </div> </body> </html> The part that bothers me is the <br /> between the closing main bracket and the opening footer bracket. Without it the page wont display properly otherwise it works the same in firefox, chrome, and edge but not in internet explorer (ill work on that when i get to it). Can anyone shed some light on this for me please? The most of the quirks started after I started using "float" in the main element. Sorry for the unabridged post but I tried to give as many relevant (and some not) details as possible to help you guys help me
-
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...
-
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.
-
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.
-
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"?
-
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?
-
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.