 Pease help a complete noob with basic css, any help is greatly appreaciated! |
  |
| Chewie316 |
 Mar 29 2015, 05:30 PM
Post
#1
|
|
Group: Members Posts: 1 Joined: 29-March 15 Member No.: 22,434  |
So I wanted to try and learn some html to make a basic page. I started by watching this video and trying to following along.
https://www.youtube.com/watch?v=Ukg_U3CnJWI I have most of it working but I have a couple of questions. First off why is my about me text not aligning with the nav menu I created. I thought in the video he said the float in the css would take care of that. I also wanted to vertically align my page. I know this looks like crap but I am just starting. I have some good ideas and do not need anything complicated. If I could just get this bare bones layout the way I wanted I think I will be ok. Sorry I am not sure how else to post this. html file ... <HTML> <head> <title>My Website - Main Page</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1>Welcome to my Site</h1> </div> <div id="content"> <div id="nav"> <ul> <li>About Me</li> <li> </li> <li>Pics</li> <li> </li> <li>Rates and Services</li> <li> </li> <li>FAQ</li> <li> </li> <li>Contact Me</li> </ul> </div> <div id="main"> <h2>About Me</h2> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p> </div> </div> <div id="footer"> Footer Text Footer Text Footer Text </div> </div> </body> </html> css file @charset "utf-8"; /* CSS Document/ /Define the body element's color*/ body { background: linear-gradient(to right, black,gray,white,white,grey,black); font-family: Arial; } hi { margin: 0; } container { width: 1000px; margin-left: auto; margin-right: auto; } header { text-align: center; } content { padding: 10px; } nav ul { width: 240px; float: left; list-style-type: none; padding: 0; } main { width: 750px; float: right; } footer { clear: both; } |
  |
 
|
| pandy |
Mar 29 2015, 06:34 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(Chewie316 @ Mar 30 2015, 12:30 AM)  First off why is my about me text not aligning with the nav menu I created. That's because of the browsers' styling of lists. They do it a little differently, some put margin here and others padding there, but lists are always indented somehow. You can get rid of all that with the below. If you don't want to do this for all lists on your site, you'd better give this list an id (if it's the only one on a page that should get this treatment) or a class and use that in the selector. CODE ul,li { margin: 0; padding: 0 } That will also get rid of the bullets, or rather without any margin or padding there isn't room for them to display. I like to remove them explicitly, so I'd use this. CODE ul,li {list-style: none; margin: 0; padding: 0 } QUOTE I also wanted to vertically align my page. Vertically align how? You also should use a doctype. There are two reasons for this. You need the doctype to validate your HTML. Validators are like spell checkers for HTML and CSS. They can be a little confusing at first, but you soon get the hang of it. The other reason is that modern browsers use the doctype as a trigger for their rendering modes. You want a doctype that triggers Standards Mode (AKA Strict Mode) because then browsers will do their best to interpret CSS according to standards. In Quirks Mode they emulate the bugs of older versions of themselves and the page can end up looking very different in different browsers. I suggest you start with HTML 4.01. You can use the Strict version since you don't use any old deprecated stuff and that's a good thing. Put this as the very first line, before <html> . CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> You find the w3c HTML validator here http://validator.w3.org/ . I find the validator on this site clearer and more efficient to use, but it doesn't handle HTML5, should you want to use that version. http://htmlhelp.com/tools/validator/ CSS checker is here http://jigsaw.w3.org/css-validator/ . Both your HTML and CSS validates BTW. Congratulations!  And here you can read all about doctypes and how it affects CSS display, rendering modes. It's probably over your head at this point, but it's good to at least know about it and you can save the URL for when you are up to reading those pages. https://hsivonen.fi/doctype/ |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 18th April 2024 - 08:25 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC