Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Baby Steps


  • Please log in to reply
6 replies to this topic

#1 troublesh00ter

troublesh00ter

  • Members
  • 561 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Deep South
  • Local time:03:07 PM

Posted 03 November 2010 - 12:48 PM

Hey guys and gals,

I'm desperately trying to learn XHTML and CSS and it's not easy!

I've been playing around with a pointless web page in an effort to learn all the tips and tricks of web dev. Hopefully, once I've gotten a handle on these two skill sets I can move up to JavaScript.

I'm currently working on what I'm calling Project Page Awesome. Right now I'm trying to create a vertical navigation bar that fits to the left side of the page and I want to juxtapose the background image to the right of the table so that the table isn't covering any part of the image. I'm having a really hard time doing this. I spend a lot of time on W3schools trying to figure this stuff out but it's takin me for a ride.

If someone would please take a few moments to review my code and offer some suggestions as to how I can create the above design, I would really appreciate it.

Here is the html file...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Project Page: Awesome</title>

<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="project_page_awesome.css" />
</head>
<body>
<div>
<table id="table_left">
<tr>
<th>Navigation</rh>
</tr>
<tr>
<td cellpadding="6">list</td>
</tr>
</table>
</div>
<div>
<h1>Project Page: Awesome</h1>
<h2>Bringin' teh awesomeness!</h2>
</div>
<div id="specialhr"><hr /></div>
<p>
This document is an indefinite test of my web page design skills. I hope to learn the new XHTML web development standard and utilize CSS to format my XHTML web pages.
</p>
<p>
I'm learning how to do most of this from <a href="http://w3schools.com/">W3Schools!</a> </br>They have a lot of great XHTML & CSS tutorials!
</p>

</body>
</html>

And here is the CSS file...

body
{
background-image:url('D:/DEV/WEB/img/bkgrd_02_mod1.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left;
background-color:#faf3f3;
margin-top:-8px;
margin-left:200px;
margin-right:200px;
font-family:"Calibri";
color:black;
text-align:center;
}
h1
{
text-align:center;
font-family:Arial;
}
h2
{
text-align:center;
font-family:Arial;
}
#specialhr
{
margin-left:0px;
margin-right:0px;
}
p
{
font-size:20px;
}
#table_left
{
float:left;
border="1";
}
for3ver,
goose90proof

BC AdBot (Login to Remove)

 


#2 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:07:07 AM

Posted 24 November 2010 - 12:38 AM

Ummmm... What are you trying to do?? Have a nav bar on the left hand side of the page? Floating down the page? I'm not really sure what you are after here. Could you please clarify it a bit more?

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.


#3 troublesh00ter

troublesh00ter
  • Topic Starter

  • Members
  • 561 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Deep South
  • Local time:03:07 PM

Posted 24 November 2010 - 11:24 AM

You got it. I want a navigation bar that floats along the left the side of the page.

I'm just trying to practice xhtml and css for fun. Any advice and tips would be great.
for3ver,
goose90proof

#4 King1987

King1987

  • Members
  • 25 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cincinnati
  • Local time:04:07 PM

Posted 30 November 2010 - 09:21 PM

One of the best Web sites to go to for learning basics of different programming languages is http://www.w3schools.com. The best way to learn is to do it and mess with it as it produces results. Experiment with it and as you get the hang of it move onto new things. It takes some time, but once you get the hang of it you really can learn it with ease.

#5 troublesh00ter

troublesh00ter
  • Topic Starter

  • Members
  • 561 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Deep South
  • Local time:03:07 PM

Posted 03 December 2010 - 04:27 PM

>.> That's what I've been using.
for3ver,
goose90proof

#6 Jeeper23

Jeeper23

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Toronto
  • Local time:03:07 PM

Posted 07 December 2010 - 03:52 PM

I recently went through the same process of updating my skills as well and had a hard time changing my outlook on html/css. Originally tables were used to align elements on a page however now its not really needed as css allows you to specify where each item is placed. Therefore fist thing remove the table from your code its not really needed. Second lay out your menu items in a unordered list. ( please see http://www.w3schools.com/css/css_navbar.asp) The unordered list is key when it comes to menu design. Once your items have been placed in the unordered list use css to format it. The formatting should be fairly straight forward unless you want to add some visual ascetics.

In order to get an object to go to the left hand side of the screen while allowing other objects to go on the right you need to use the css float option. It works almost the same as floating images like on w3 schools. ( http://www.w3schools.com/css/css_positioning.asp ) Take a look at the two links as well as there are some good examples of horizontal css navigation bars. I am no design pro however if you are still having trouble I would be happy to help.


Andrew

#7 troublesh00ter

troublesh00ter
  • Topic Starter

  • Members
  • 561 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Deep South
  • Local time:03:07 PM

Posted 13 December 2010 - 04:02 PM

Thanks for the GREAT advice. ReallY!
for3ver,
goose90proof




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users