Monthly Archives: September 2014

Navigation Bar: Page Tabs

Posted on by

Just as we did with the logo section of the navigation bar, we’ll create a <div> that will hold everything to go on one side of the navigation bar. This time that <div> will cause everything inside of it to move to the right side of the navigation bar. Like with the logo, I did this by giving the <div> a class called “float-right” which simply gives it the css attribute float:right.

To create the different page tabs I started off by making an un-ordered list that I gave an ID. Then, for each tab that I want to have in my navigation I add in an <li> element inside of that un-ordered list, and inside each of those <li> elements I added a link to what I want that tab to link to. For example:

<ul id=”nav”>
<li class=”active”>
<a href=”linktoyoursitehere”>Home</a>
</li>
</ul>

(The active class is so I can later give certain attributes to whichever page the user is currently on)

Now for the slightly harder part; adding css styling to those tabs so it looks nice. My first step was to make it so the whole un-ordered list (using the id of #nav) doesn’t show any dots for each element in the list. I did this using “list-style: none”. I then added some margin and padding to stop that section from hitting the edge of the whole navigation bar.

Next I added some styling to the <li> elements of the un-ordered list. I put “li” after #nav” to affect only the <li> elements inside of the <div> with the id of “nav”. “display: inline” makes it so the elements all appear as horizontal. And the rest is either stuff I’ve used before or should be self explanatory.

#nav li {
display: inline;
position: relative;
padding: 0px 0 16px;
float: left;
min-height: 35px;
border: none;
}

The last css elements I added are to change the link parts of the list (really just changing the text that you see). First, I made the base color of each tab be white “#nav a {color: #fff;}”. Next, I made it so that the current page tab has gold text color, and when I hover over a tab it’s text color changes to gold. “#nav a:hover, #nav .active > a {color: #e5c100;}”. The “hover” part should be self explanatory in that it affects that area when you hover over it. Like with the “li” earlier, “#nav .active” will only affect the parts inside of <div> with the id of “nav” that also has the class “active”.

Lastly I added some css to remove any decoration that making something a link adds in (ex. underline), and some padding to space everything out nicely.

#nav li a {
text-decoration: none;
padding: 0px 15px 28px;
}

After aaallll this I ended up with a nice looking navigation bar:

CodeAdventures3

Next week I’ll go with something easier. Just a simple footer at the bottom of the page.

Navigation Bar: Structure and Logo

Posted on by

The first step in making a header/navigation bar is to divide up the area that you want to use. In my case I set <header> and <nav> tags at the top of the <body> section of the code. The <header> tag sets the area for the entire header, and the <nav> tag sets the smaller area where the main logo and navigation tabs will be. Now to get the header to look like I want I need to add some styling to the tags.

For the header section I added styling to make the width be 100% of the window that it is open in, make the height be a static 87 pixels, make the background color a sort of lighter maroon, and to make it so the header is always at the top of the page no matter how far down you scroll I set the position of the section to fixed.

Next I set the <div> tags for those smaller sections inside the <nav>.

The first <div> I made was to put the main logo on the left side of the nav section. The HTML code that I used to do this looks like this:

<div class=”logo float-left”>
<span class=”gold-text”>Your</span>Logo
<p class=”sub-logo”>Here is where:</p>
<p class=”sub-logo”>You can add some more info</p>
</div>

The logo and sub-logo classes just change the font-size and font-style of the selected area. The gold-text class just changes the color of the text in that area to a gold color. Lastly, the float-left class causes the selected area to float to the left-most area of the section it is in. In the next section I will be using a float-right class that causes the selected area to float to the right.

My CSS code for all of these classes looks like this:

.float-left{
float: left;}

.logo{
font-size: 26px;
color: #fff;}

.sub-logo{
font-family: sans-serif;
font-size: 12px;
color: #e6e6e6;
padding: 0;
margin: 0;}

.gold-text{
color: #e5c100;}

You can change around any of the pieces in those classes to whatever you want for color or font-size, but in my case the page now looks like this.

CodeAdventures2

 

Next time I’ll go into putting in some navigation tabs into the right side of the header.

Divide and Style

Posted on by

My first step in building my website was creating an HTML file with the basic tags in it (<html>, <head>, <title>, <body>). Almost any IDE nowadays will automatically add tags like that in when you start a new HTML project, so I didn’t even have to worry about typing those out. Next I created a CSS (Cascading Style Sheet) file and linked it to the HTML file I just created.

<link rel=”stylesheet” type=”text/css” href=”main.css”>

If you don’t know, a CSS file is one of the types of files that allows you to add styling to tags in an HTML file. By linking the CSS file now I can gradually add styling to the pieces that I add to the html file.

The next thing I did was started splitting up the page into smaller sections using <div> tags. This will allow me to keep certain pieces of content localized to specific spots on the overall page. For example, I put a set of <div> tags inside the <body> tags to contain the general content of the page. And so I can differentiate that set of <div> tags from others I added in an ID to those tags.

<div id=”content-area”>

This makes it so that in a few moments when I want to add some styling to that area I can specifically select that <div>, instead of all <div>’s in the HTML file. Finally, so I wasn’t looking at a blinding white screen all the time, I added background color styling, along with a few other things, to the <body> and the <div> just created. Instead of using the names for colors I have to use their hex value. It can be slightly more annoying, but has a much greater range of color possibilities. A simple Google search brings up a number of good sites for picking hex colors.

body{
background: #260000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#content-area{
height: 1000px;
width: 880px;
margin: 0 auto; //Makes the area auto center itself
padding: 30px 30px;
background: #300000;
}

Finally I ended up with the page looking like this!
The lighter colored area is the content-area <div>.

CodeAdventures1

Next week I’ll go into the slight pain that is making a nice looking header and navigation bar.

Adventure

Posted on by

I enjoy programming. As a Computer Science major in college I think it would make sense that I do. I could have very easily gone into a semi related field like Computer Security. But then I would be searching hard drives and looking for digital evidence of wrongdoers, and wouldn’t have the same level of programming experience as with Computer Science.

Even having that more direct connection to programming, I don’t get to do quite as much as I might like as part of my schoolwork. While there are many different programming languages and uses for them, a university is only really able to go into one or maybe a few of those languages and uses. For example, the programming classes here at Norwich University are almost, if not solely oriented around C++. I also get a bit from clubs that I’m in, but that still doesn’t satiate my yearning. Things like web-programming and game-programming are things that I’d have to explore on my own. And that’s just what I’ll do.

This blog will follow me and my adventures through different personal programming projects, learning how to use different languages like HTML, PHP, Jquery, and more. I’ll do my best to outline the things I add in steps for those who also want to learn, and to see a gradual progression of each project. In my first project I’ll dive into creating a webpage from scratch. I will just fill out all of the pieces of the site with little blurbs explaining what that part does. It may turn out well. It may not. I don’t know just yet. But isn’t that the fun of an adventure?