WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » School Project help needed

View previous topic View next topic Go down  Message [Page 1 of 1]

1School Project help needed Empty School Project help needed Wed May 09, 2012 2:44 am

RSguideMaker

RSguideMaker
Registered Member
Registered Member
Hi Guest,

I have a school project in which I have to make a webpage in HTML and CSS. Now, I know quite a bit about HTML, but I am having some troubles.

My current webpage looks like this:

School Project help needed Website

But I need help making a navigation panel down the side and member log in/register up the top. They don't need to work. All I need is the thing there so that the webpage actually looks nice.

What I want is something like this (navigation):

School Project help needed Navigation

And this (log in/register):

School Project help needed Login

Any help would be much appreciated Very Happy

~RSguideMaker~



Last edited by RSguideMaker on Thu Jun 21, 2012 2:45 am; edited 1 time in total

2School Project help needed Empty Re: School Project help needed Wed May 09, 2012 2:58 am

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
For login panel you can code like this:
Code:
<html>
<title>Talk About</title>
<style type="text/css">
#top_border {
background-color:#262c2d;
width:1368px;
height:30px;
margin-top:-10px;
margin-left:-10px;
text-align:right;
}
</style>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<div id="top_border">
<a href="#" style="color:white">Login</a>
<a href="#" style="color:white">SignUp</a>
</div>
</body>
</html>

Decorate it as you wish its just a quick example because I dont have time to code now.

3School Project help needed Empty Re: School Project help needed Wed May 09, 2012 3:17 am

RSguideMaker

RSguideMaker
Registered Member
Registered Member
Well thanks for the fast reply Mr.Joker. That worked, so that's that bit sorted:

School Project help needed Websitelogin

I still need help on the navigation but I'm in no rush. I have a bit of time to get this webpage sorted. Any help is appreciated, especially if it works! Very Happy

4School Project help needed Empty Re: School Project help needed Wed May 09, 2012 3:37 am

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
Ok for navigation I did this: Its maybe not good, but its basic for you to understand:
Code:
<html>
<title>Talk About</title>
<style type="text/css">
body {
background-color:black;
}
#navigation ul{ width: 150px; }
#navigation ul li {
  list-style: none;
  background-color: transparent;
  border-top: none;
  text-align: left;
  margin: 0;
 }
#navigation ul li a {
  display: block;
  text-decoration: none;
  color:white;
  padding: .25em;
  border-bottom: none;
  border-right: none;
 }
 #navigation ul li:hover {
 background-color:lightblue;
 }
</style>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<div id ="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>



For sword you need javascript. I cant do that now, busy atm, but will do If you really need that much.

5School Project help needed Empty Re: School Project help needed Wed May 09, 2012 4:50 am

Unknown Data

Unknown Data
Registered Member
Registered Member
Can also be done with CSS by using hover pseudo-class, with the following attribute and value:
Code:
background: url("IMAGE_URL") no-repeat right;

http://woops.dk

6School Project help needed Empty Re: School Project help needed Wed May 09, 2012 4:58 am

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
I totaly forgot about it. Lol, this night time took my concentartion. Its 23:50 now Very Happy

7School Project help needed Empty Re: School Project help needed Wed May 09, 2012 1:02 pm

RSguideMaker

RSguideMaker
Registered Member
Registered Member
Mr.Joker wrote:Ok for navigation I did this: Its maybe not good, but its basic for you to understand:
Code:
<html>
<title>Talk About</title>
<style type="text/css">
body {
background-color:black;
}
#navigation ul{ width: 150px; }
#navigation ul li {
  list-style: none;
  background-color: transparent;
  border-top: none;
  text-align: left;
  margin: 0;
 }
#navigation ul li a {
  display: block;
  text-decoration: none;
  color:white;
  padding: .25em;
  border-bottom: none;
  border-right: none;
 }
 #navigation ul li:hover {
 background-color:lightblue;
 }
</style>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<div id ="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>



For sword you need javascript. I cant do that now, busy atm, but will do If you really need that much.

I don't need the sword, but I need it to be able to highlight what page you're on, which I'm guessing is JS. I mainly need it to be a side navigation panel, so I can go advanced HTML if you need to.

8School Project help needed Empty Re: School Project help needed Wed May 09, 2012 1:16 pm

RSguideMaker

RSguideMaker
Registered Member
Registered Member
This is what it looks like so far:

School Project help needed Websitenavigation1

But I need it separated into sections, like this EdzJohnson Website Template:

School Project help needed EdzJohnsonsections

So if you could help me with the sections that would be great!

9School Project help needed Empty Re: School Project help needed Wed May 09, 2012 4:24 pm

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
Ok lets begin. For last problem you need to have 3 divs. You can see that from this picture:
School Project help needed Test
Tip you need to understand:
-Div2 and Div3 is inside Div1. For div2 you have to set float:left and for fiv3 float:right.
And for first question that you need to stay active link where user is atm you may do it like this:
Code:
<html>
<title>Testing</title>
<style type="text/css">
body {
background-color:black;
}
#navigation ul{ width: 150px; }
#navigation ul li {
  list-style: none;
  background-color: transparent;
  border-top: none;
  text-align: left;
  margin: 0;
 }
#navigation ul li a {
  display: block;
  text-decoration: none;
  color:white;
  padding: .25em;
  border-bottom: none;
  border-right: none;
 }
 #navigation ul li:hover {
 background-color:lightblue;
 }
</style>
<head>
<script type="text/javascript">
var url = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname;
function change_background_color() {
if (url=="www.google.com") {
 this.style.backgroundColor = 'lightgreen';
}
}
var div = document.getElementById( 'navigation ul li' );
div.onLoad = change_background_color();
</script>
</head>
<body >
<div id ="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>


It can happend I made mestace while coding, tell me if I am to edit. I am not at home so can test does it work.

10School Project help needed Empty Re: School Project help needed Wed May 09, 2012 5:15 pm

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
Or this may work:
Code:
<html>
<title>Testing</title>
<style type="text/css">
body {
background-color:black;
}
  .menu{width: 300px; height: 25; font-size: 18px;}
  .menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
  .menu li:hover, .menu li.active {
        background-color: #f90;
    }
</style>
<head>
<script type="text/javascript">
var make_button_active = function()
{
  //Get item siblings
  var siblings =$(this).siblings()

  //Remove active class on all buttons
  siblings.each(function (index));
    {
      $(this).removeClass('active');
    }
  )


  //Add the clicked button class
  $(this).addClass('active');
}

//Attach events to menu
$(document).ready(
  function()
  {
    $(".menu li").click(make_button_active);
  } 
)
</script>
</head>
<body >
<div class="menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">FAQ</a></li>
<li ><a href="#">Gallery</a></li>
<li > <a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>
Just change it to vertical list.

11School Project help needed Empty Re: School Project help needed Wed May 09, 2012 10:43 pm

RSguideMaker

RSguideMaker
Registered Member
Registered Member
Didn't work. Do you want my HTML page and the CSS stylesheet to do it yourself? Because I tried both of your codes and neither of them worked.

12School Project help needed Empty Re: School Project help needed Thu May 10, 2012 1:33 am

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
Hmm, ok give me a index.html

13School Project help needed Empty Re: School Project help needed Thu May 10, 2012 3:44 am

RSguideMaker

RSguideMaker
Registered Member
Registered Member
I use an images folder and an external stylesheet, so you'll need the stylesheet if you need to do anything in CSS...

14School Project help needed Empty Re: School Project help needed Thu May 10, 2012 7:22 pm

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
You change list to vertical and thats it:
http://jsfiddle.net/GNmfp/

15School Project help needed Empty Re: School Project help needed Mon May 14, 2012 4:01 am

RSguideMaker

RSguideMaker
Registered Member
Registered Member
Sorry. Still stuck. That website is confusing the hell out of me. Rolling Eyes

16School Project help needed Empty Re: School Project help needed Mon May 14, 2012 4:16 am

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
How can you be stucked? I gived you code that you wanted. List item will stay active as long as another is clicked. What is confusing there?

17School Project help needed Empty Re: School Project help needed Wed May 23, 2012 6:06 am

RockerMan

RockerMan
Technician
Technician
The easiest way to create a vertical nav is to use a unordered-list element. Just as Joker showed you Smile

The HTML is simple, they you just have to style it with CSS and that isn't hard neither Wink

http://www.graphics-post.com/

18School Project help needed Empty Re: School Project help needed Thu May 24, 2012 1:38 pm

samkallis


Banned Member
Banned Member
Let's take a closer look at each consideration in detail, and explore how to identify and qualify the right design firm.

Price

Like many products and services we purchase, both personally and professionally, deciding on a web design firm can often come down to price. But

the value of the services rendered is really what's important. A $200 web site usually turns out to look, feel and perform like a $200 web site.

The price of your site's development will depend on three factors: the features of the site, the amount of content, and the service options

included with the design package, such as hosting.

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » School Project help needed

Permissions in this forum:
You cannot reply to topics in this forum