Jump to content
Killersites Forums

Horizontal Web Page Help


Dynamite
 Share

Recommended Posts

Hey guys i'm trying to make a site but Ive run into a few issues. I cant get my site to look like the one shown on the tutorial page below

http://woork.blogspot.com/2009/02/useful-tips-to-design-horizontal.html

*The demo/downloadable tutorial is dead so the only thing I have to work with is what he posted.

 

Although I've gotten it to look "horizontal" i cant figure out how to make it move as shown in the pictures provided (No boxes are present although I guess the text could be it, and you have to click the bottom scroll bar to navigate, the links used to navigate are placed on top of the page and when clicked do nothing.

 

 

Could it be i misplaced something or not have the proper jqueary file maybe even missed something completely. To put it simply I want to make it look like the picture I've attached. Is it possible with the tutorial link above or do I have to look elsewhere?

 

Thanks for your time

 

 

 

 

 

Below is the code I currently have (Apologize for the wall of text)

<html>
<head>
<style>
<script type="text/javascript" src="thw.js"></script>


</style>
</head>

<style>
#scroll-buttons{position:fixed;}





p{font-family:"Ariel";} 

body {background-color:#b0c4de;} 

#container{
width:3000px;
height:400px;
}

#maincontent{
border:10;
margin:0;
padding:0;
}
#maincontent li{
line-style:none;
width:50px;
height:50px;
padding:100px;
float:left
;
}

body{
background:url(mybg.jpg) no-repeat fixed;
}


</style>



<a href="#p1">Go to the section 1</a> |
<a href="#p2">Go to the section 2</a> |
<a href="#p3">Go to the section 3</a> |
<a href="#p4">Go to the section 4</a>
<a href="#p5">Go to the section 5</a>


<div id="container">
<ul id="maincontent">
<li >
<a name="p1" id="p1"></a>
UPCOMING EVENTS
</li>
<li >
<a name="p2" id="p2"></a>
ABOUT US
</li>

<!-- Add all boxes you want-->
<li>
<a name="p3" id="p3"></a>
FORUMS</li>
<li>
<a name="p5" id="p5"></a>
Media</li>

<li >
<a name="p10" id="p10"></a>
CALENDAR
</li>
</ul>
</div>

</html>

post-63238-046699200 1363052922_thumb.png

Link to comment
Share on other sites

You have several mistakes in your coding.

 

For starters, you need a doctype.

All the style stuff needs to be between <head> and </head> and the actual code belongs inside <body> </body> tags.

 

Then, in your "Go to the section' lines, the numbers aren't all matching up with the links you have. You're trying to go to sections p1 to p5, but in the actual links, you have p1, p2, p3, p5, p10.

 

The list code itself is also incorrect. The text needs to be inside the a tags - so this:

<li >
<a name="p2" id="p2"></a>
ABOUT US
</li>

 

See: aandbwebdesign.com/KSforum/slide.html

 

Let me know if you have any questions.

 

should be

 

<li>
<a name="p2" id="p2">ABOUT US</a>
</li>

 

Also note that in a couple lines, you have a space between the li and the closing bracket -- should be <li> not <li >

 

Then I increased the width of your #maincontent li so it would actually occupy most your entire width.

Link to comment
Share on other sites

Hello, sorry to interrupt. But I have a couple of things for you. If you put your links in a list like <ul><li>link here</li></ul> and make them display inline or block and then you can put a border right on them instead of the pipe on the right. The pipe will give you an error on the page when you learn to valdate your code. Then to get rid of the last pipe on the end for you do not have an extra divider. Do this

 li:last-child 
border-right: none;
}

If you have more then one ul put the id or class before the li:last child, preferably a id. Make sure to leave a space like this #something li:...

Important only one id per page but you can have as many of the same class per page as you want.

 

Although not necessary, but common practice to make your code easier to read. You should use camel case or an underscore to separate names of ids and other things. Camel case is twoWords, does not matter wich one just be consistent.

 

Also formatting your code helps make it readable also. The easiest way I can think of to give you advice on that is to go look at some sites at radome and go and view source.

 

Well that is about it I just wanted to let you know about the pipe thing and just added the other couple of things because.

 

 

Well I will leave you back to Andrea now she is a lot better at fixing code then I anyway.

Edited by grabenair
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...