Adding some CSS with Navigation Bar!

So I have been working here and there on the site and have thrown a few things onto the page.  I first threw on a very primitive navigation bar.  I threw some CSS straight into the head tag:

<style>
ul
{list-style-type:none; margin:0; padding:0;}
li{float: left;} a:link,a:visited
{display:table; width:300px; color:#FFFFFF; background-color:#CC0000; padding:20px; border: solid #000000; text-decoration:none; text-align:center;}
a:hover,a:active
{background-color:#B00000;}
</style>

I created a list and put it in a box, taking the bullets out.  I hard-coded(specified, manually) the width and where it should be on the page.  Like I said earlier this is bad programming and bad practice.  The only reason I did this was to decide on what I wanted it to look like.  I also made the buttons change color when hovering over them, to look neat.  Here is what the bar looked like after adding the names of each list item and taking the bullets away:

Image

You might think, “Josh that looks like a preschooler made that.”  Well I agree with you but keep in mind I was just playing around and testing looks out!  Finally after seeing my grand, red masterpiece, I decided to create a separate CSS file and start the code over.  I wanted the code to be a lot prettier and not be all jumbled anymore.  I set the new HTML file up properly and added all the HTML5 tags and schematics (these can be found here).  After everything was nice and neat, I created a proper banner.  I set the position, gave it a size, even added a shadow box around it.  It is currently Grey and white and pretty bland but this will all change.  Below is a picture of what the new banner looks like along with the HTML code:

Image

<a href=“#”>Home</a>  This is just a simple link in HTML.  Home is the name of the button while “#” is the link to where it will take you after it is pressed.  For this example I would replace the # sign with the link to my homepage.

Next I just need to give the page some personality! Should be fun.  More updates to follow!

2012
11/07
CATEGORY
Uncategorized
Leave a comment

More Detail

I am going to give more detail on what was completed last night.  It was brought to my attention that most people want more detail and not just to read ramblings of a web developer.  I started out by opening up Komodo Edit, my favorite HTML editor (it also does like almost every other language), and began writing some test code.  At first I wrote out the HTML tags(<html>) and the body tags(<body>).  I then wrote out a header(<h1>) and a paragraph(<p>), just for testing.  I messed around with the “style” attribute and added background color and centered it. The code looked like this:

<h1 align=“center” style=“background-color: lightblue; font-family: monospace”>Test Heading</h1>

The words in green are the words that appear on the website page, as the header, the rest is code.  The words in red are attributes, I am calling them to change some stuff about the text.  I have centered the text, first.  Then I set the background color to light blue.  Finally I set the font of the header to monospace and wrote it out.  I then added a line between the header and the paragraph(<hr>) and created a link to Facebook, to test linking. The link code looks like this:

<a href=“http://www.facebook.com&#8221;> Facebook</a>

Again this was just for link testing and to see where I wanted to put them.  I then threw on an author area for my name and email address.  This will come in handy later once the site is up.  Then I Wrote out some CSS code and put all the areas into “divs” (groups) and places them, and sized them accordingly.  Again, the size is hard-coded, which means I plugged in the number of the pixels each space should be (height= 200px; width= 300px).  This will not work later on because the sizes of people’s screens are different.  It will throw all the spaces in random areas and it will look horrible.  I will have to write some code to have the spaces always in the same place.  I will get more into CSS later.  Then I wrote out the <title>(which shows up at the top of the browser) and I wrote in some metaData; stuff like author, discription, tags, keywords, etc.(which search engines use).  Like I said, more will be done tonight.  It will slowly start to look a lot better.  Below is the site in all it’s glory right now, along with the code.

2012
10/30
CATEGORY
Uncategorized
2 comments

Site layout has been started.

So tonight I started writing up some HTML code.  I started with the page layout.  I want the content on the left side of page, a navigator or list on the right side of page, and the header at the top.  I first wrote out HTML code for the text of the areas.  I then wrote some basic CSS code to pile the areas into three separate places.  I then gave them color and sized them correctly.  I hard-coded and manually sized the areas by pixel.  This will, of course, need to change in the future so that different sized screens will show the same template.  I suppose I can use JavaScript there.  Anyway, this is very exciting.  The basic layout of the page is complete.  Next thing that needs to be worked on is the theme and colors.  Then we need to work on the basic navigation of the site: where articles will be located and what-not.  However, that is all for tonight.  I will write some more code tomorrow.

2012
10/30
CATEGORY
Uncategorized
Leave a comment

New Ideas in the Works

Well I am going to build a website with my buddy.  Should be fun.  We don’t know what the site will be yet but it will probably be a daily updated content kind of site.  I started this blog in the hopes that someone out there will find it useful someday or can follow along with how a website is built.  I will try to update at least daily.  Should be fun!

2012
10/23
CATEGORY
Uncategorized
1 comment
Follow

Get every new post delivered to your Inbox.