• Locked
2 replies [Last post]
Mon, 2014-08-11 19:24
JonaiLive
JonaiLive's picture
Offline
newbie
Last seen: 8 years 43 weeks ago
Timezone: GMT-4
Joined: 2014-08-11
Posts: 2
Points: 3

Hello everyone, I'm really new to html/css but I'm really trying to learn it. I started teaching it to myself 5 days ago and so far I love it. I've decided to do a little "project" so I can learn by failure and so far it has been a lot of failure but I'm sticking to it. What I am trying to do is a little blog, static at first where I just update post through HTML until I can learn to make it more responsive and add better functionalities. Basically building a blog from the ground up with just HTML and CSS, eventually adding JavaScript and other languages as I am able to learn them.

With that said I am having a little problem and I've searched the web endlessly. Maybe I don't know how to phrase the question so I decided to look for help and learn at the same time, plus this seems like a very nice community where I can ask, learn, and help (once I have learned myself).

My problem is the following. I want to have a navigation bar at the top, which I figured how to do just the way I want to (somehow). The links in them are my problem. I want to have the "About me", "My Projects", and "Contact" moved all the way to the right and leave "Jonai" somewhere on the left. This is the page for reference jonailive.x10.mx. So far I have been unsuccessful. Sometimes I try something and nothing happens other times the links go all over the place and at times they just disappear. I know my code is probably all wrong and the ways that I managed to get to this point might be completely wrong. So not only do I want some help with my problem, I also want to know if I am doing it right in terms of coding habits. I also would like some pointers on how to do things better.

Heres the HTML CODE:

<!DOCTYPE html>
 
<meta charset="utf-8">
<html_"en">
 
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
 
<title>A blog about everything... or nothing.</title>
 
<metaname="description" content="A blog about programming/coding and everything in between.">
 
<metaname="author" content="Jonai Soto"
 
</head>
<div class="left_box"></div>
<nav>
<div id="nav">
	<ul>
		<li id="jonai">Jonai</li>
		<li id="about">About</li>
		<li id="projects">My Projects</li>
		<li id="contact">Contact</li>
	</ul>
</div>
</nav>
 
 
 
<body>
</body>
 
</html>

Here's the CSS code:

body {
	background-color: #A9A9A9;
	position: fixed;
	margin: 0;
	}
 
 
.left_box {
	background: black;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 270px;
	}
 
div#nav {
	background: #FFFF33;
	position: fixed;
	height: 30px;
	width: 100%;
	margin-left: 100px;
	margin-top: -2px;
	-moz-box-shadow:    3px 1px 5px 3px #6F6F6F;
  	-webkit-box-shadow: 3px 1px 5px 3px #6F6F6F;
  	box-shadow:         3px 1px 5px 3px #6F6F6F;
	text-align: right;
	}
 
div#nav ul li {
	list-style-type: none;
	color: black;
	font-family: Helvetica;
	font-weight: 900;
	font-size: 14px;
	font-style: oblique;
	display: inline;
	float: left;
	text-indent: 10px;
	}
 
#jonai {
	list-style-type: none;
	color: black;
	font-family: Helvetica;
	font-weight: 900;
	font-size: 14px;
	font-style: oblique;
	display: inline;
	float: right;
	margin-bottom: 30px;
	text-indent: 10px;
	}
 
 

Thank you in advance for your help. I won't quit!

Also if this is in the wrong section please let me know and I will move it to where it has to go.

Top
Tags:
Mon, 2014-08-11 21:25
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 14 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Get simple first

Don't start tricking things up before you have good markup. Since none of the browsers (as far as I know) properly support the outline function, the nav element is redundant. Further, there is no good reason to wrap a ul in a div if there are not other elements within that structural context.

I have simulated a two column page, and that is still the simplest, most robust method to start with. See faux columns.

I have also fixed a few errors in your html. Always validate your markup and css before trying to debug.

From this start, we can add additional structure.

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test document</title>
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    background: url(blackbg.gif) left top repeat-y #A9A9A9;
    color: black;
    margin: 0;
    }
 
  #main {
    margin-left: 270px;
    position: relative;
    }
 
  ul#nav {
    background: #FFFF33;
    color: black;
    font: 900 .87em oblique Helvetica, sans-serif;
    line-height: 30px;
    list-style-type: none;
    margin-left: 100px;
    overflow: hidden;
    padding: 0;
    -moz-box-shadow:    3px 1px 5px 3px #6F6F6F;
    -webkit-box-shadow: 3px 1px 5px 3px #6F6F6F;
    box-shadow:         3px 1px 5px 3px #6F6F6F;
    text-align: right;
    }
 
ul#nav li:first-child {
    float: left;
    }
 
  ul#nav li {
    display: inline-block;
    padding: 0 .5em;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <ul id="nav">
    <li>Jonai</li>
 
    <li>About</li>
 
    <li>My Projects</li>
 
    <li>Contact</li>
  </ul>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Tue, 2014-08-12 16:50
#2
JonaiLive
JonaiLive's picture
Offline
newbie
Last seen: 8 years 43 weeks ago
Timezone: GMT-4
Joined: 2014-08-11
Posts: 2
Points: 3

Thank you so much for your

Thank you so much for your help Gary.

Top
  • Locked