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

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

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

RSguideMaker

avatar
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:



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):



And this (log in/register):



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

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

Mr.Joker

avatar
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.

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

RSguideMaker

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



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

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

Mr.Joker

avatar
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.

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

Unknown Data

avatar
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

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

Mr.Joker

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

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

RSguideMaker

avatar
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.

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

RSguideMaker

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



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



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

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

Mr.Joker

avatar
Mr. WebArtz
Mr. WebArtz
Ok lets begin. For last problem you need to have 3 divs. You can see that from this picture:

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.

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

Mr.Joker

avatar
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.

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

RSguideMaker

avatar
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.

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

Mr.Joker

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

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

RSguideMaker

avatar
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...

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

Mr.Joker

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

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

RSguideMaker

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

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

Mr.Joker

avatar
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?

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

RockerMan

avatar
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


_________________


No support via. PM, as they will just be deleted
http://www.graphics-post.com/

18 Re: School Project help needed on 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]

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