The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help, Sorry for the stupid quesiton
KoDKingVegeta
post May 28 2007, 01:33 PM
Post #1





Group: Members
Posts: 7
Joined: 28-May 07
Member No.: 2,937



Ok So Im building a web site, and its been FOREVER since I used html, but I figured I remembered. So I get to adding links and stuff, and everytime I add one the first one dosnt become click able.


http://twistedmotorsports07.angelfire.com/


Theres my site, and here is my html, tell me what Im doing wrong.


<HTML>
<HEAD>
<TITLE>Twisted Motor Sports</TITLE>
</HEAD>
<BODY>
<CENTER>
<DIV>
<BODY BGCOLOR=99ADD0>
<img src="pic/layout.jpg">



<DIV id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 776px; POSITION: absolute; TOP: 380px;"><A HREF="http://twistedmotorsports07.angelfire.com"><img border="0" src="pic/home.gif"></A></div>



<DIV id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 1016px; POSITION: absolute; TOP: 380px;"><a href="http://twistedmotorsports07.angelfire.com/rides.html"><img border="0" src="pic/rides.gif"></a></div>



<DIV id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 1292px; POSITION: absolute; TOP: 380px;"><a href="http://twistedmotorsports07.angelfire.com/projects.html"><img border="0" src="pic/projects.gif"></a></div>




</DIV>
</center>
</BODY>
</HTML>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 28 2007, 02:30 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE(KoDKingVegeta @ May 28 2007, 11:33 AM) *
So I get to adding links and stuff, and everytime I add one the first one dosnt become click able.


http://twistedmotorsports07.angelfire.com/
Which link isn't clickable? All four seem clickable to me (although the self-link from the home page to itself should not be clickable).

I recommend that you fix the HTML errors reported by our online validator.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
KoDKingVegeta
post May 28 2007, 02:49 PM
Post #3





Group: Members
Posts: 7
Joined: 28-May 07
Member No.: 2,937



The first and second link are not clickable, and when i add the 4th and 5th one (pics and video button) then the first 4 dont become clickable. Also that HTML error fixer isnt any good to me, because Im using angelfire, and thats there stuff. What Im working with is what I showed you.

This post has been edited by KoDKingVegeta: May 28 2007, 02:57 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 28 2007, 03:05 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



Hmm, not sure what's supposed to be a link and what isn't, everything seems to be duplicated. Anyway, everything is also overlapping. Resize your browser window and see how the links move around. That kind of positioning scheme is fragile as an eggshell. Frankly, I'd start with rethinking that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
KoDKingVegeta
post May 28 2007, 04:32 PM
Post #5





Group: Members
Posts: 7
Joined: 28-May 07
Member No.: 2,937



They are only there (the background ones) for me to line them up. Once there lined up, then they will go away. But all the buttons are "Home, Rides, Projects, Pictures, Videos" Those are my links.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 28 2007, 05:24 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



OK. The links work for me too. But they don't line up. They are all over the place.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
iloveu328
post May 28 2007, 09:33 PM
Post #7





Group: Members
Posts: 3
Joined: 28-May 07
Member No.: 2,941



I think it might be cause you did em' in capitals so in sted of doing this:

<HTML>
DO THIS

<html>
</html>

and so on. I may be wrong about it but give it a try.
Much love Jesska
Aussie chick tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 29 2007, 11:14 AM
Post #8


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
I may be wrong about it but give it a try.
You're wrong. See the FAQ entry Should I use lower case or upper case for tags?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
KoDKingVegeta
post May 30 2007, 12:17 AM
Post #9





Group: Members
Posts: 7
Joined: 28-May 07
Member No.: 2,937



Ok Heres my problem once again, I have all my link buttons on my site, but NONE but the last one is clickable. I have the buttons at the top of the page so u can find them. The all needs moved down 380px that will line it up.
http://twistedmotorsports07.angelfire.com/

And once agan, heres my html

<html>
<head>
<title>Twisted Motor Sports</title>
<body>

<center>


<BODY BGCOLOR=99ADD0>
<img src="pic/layout.jpg">



<DIV id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 776px; POSITION: absolute; TOP: 0px;"><a href="URL"><img border="0" src="pic/home.gif"></a></div>


<DIV id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 1012px; POSITION: absolute; TOP: 0px;"><a href="URL"><img border="0" src="pic/rides.gif"></a></div>


<DIV id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 1292px; POSITION: absolute; TOP: 0px;"><a href="URL"><img border="0" src="pic/projects.gif"></a></div>


<DIV id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 1600px; POSITION: absolute; TOP: 0px;"><a href="URL"><img border="0" src="pic/picture.gif"></a></div>


<DIV id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 1886px; POSITION: absolute; TOP: 0px;"><a href="URL"><img border="0" src="pic/video.gif"></a></div>
<center>

<DIV id=Layer4 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 890px; POSITION: absolute; TOP: 440px;">

NEWS AND UPDATE INFORMATION HERE
<br>
HELLO & WELCOME TO TWISTED MOTOR
<br>
SPORTS. YOUR ONE STOP FOR CAR
<br>
MODS. AND UPGRADED INFORMATION.

</div>
</center
</body>
</html>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 30 2007, 04:31 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Despite the fact that you use Angelfire, the HTML validator points out that you have several DIV's with the same ID, which need to be unique.

Your problem lies precisely in the fact that you use another DIV for each link. By the positioning of each DIV, they overlap each other; as they all start at left: 0px and have different widths. By putting a border around the div's (eg. border: solid 1px red;), you'll understand better what's happening.

That's not the way to go. Put your links in just the one DIV, position that and give some left/right padding to the images. You're code could look like this:

CODE
<div id="navigation" style="position: absolute; top: 195px; left: 140px; width: 800px;">
<a href="URL"><img class="nav" src="pic/home.gif"></a>
<a href="URL"><img class="nav" src="pic/rides.gif"></a>
<a href="URL"><img class="nav" src="pic/projects.gif"></a>
<a href="URL"><img class="nav" src="pic/picture.gif"></a>
<a href="URL"><img class="nav" src="pic/video.gif"></a>
</div>
(Adjust the TOP position to take Angelfire's added code in account.)

with this in the HEAD section of the page:
CODE
<style type="text/css">
.nav {
    border: none;
    padding: 0 40px; /* top/bottom 0, left/right 40px (adapt to your linking) */
    height: 18px;
}
</style>


Or go see at Listutorial.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
KoDKingVegeta
post May 30 2007, 09:09 PM
Post #11





Group: Members
Posts: 7
Joined: 28-May 07
Member No.: 2,937



THANK YOU!!!! So much, thats what Iv been needing.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 31 2007, 03:18 AM
Post #12


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You're welcome.

But now, your absolute positioning of everything pushes your content too much to the right. And you have structural errors, such as two BODY tags, multiple style declarations in the HEAD (which can be wrapped in only one), lack of the # sign before color or quotes around attribute values.

Also, group all CSS styling between the <hed></head> tags at the top of the page, including those you used as inline styling.

I suggest you read the following:

HTML:
HTML Document structure

CSS:
Embedding a Style Sheet
CSS Structure and Rules

and this FAQ:
Where can I learn about CSS?

and find many articles and tutorials on CSS at:
Web Design References: CSS.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
KoDKingVegeta
post May 31 2007, 08:55 PM
Post #13





Group: Members
Posts: 7
Joined: 28-May 07
Member No.: 2,937



Ok, one more thing, I forget the code all together for repeat background.

http://twistedmotorsports07.angelfire.com/rides.html


See what I mean, at the bottom the lines stop. I forget the code to make it repeat as long as there's stuff.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 31 2007, 10:58 PM
Post #14


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Please see the FAQ entry How do I have a non-tiling (non-repeating) background image?

Then just reverse the advice.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
KoDKingVegeta
post Jun 1 2007, 05:11 AM
Post #15





Group: Members
Posts: 7
Joined: 28-May 07
Member No.: 2,937



it sounds so easy to do, but everytime i enter this html

BODY { background: white url(candybar.gif);
background-repeat: repeat-x }

it dosnt do anything, not a thing, all it does is show up on my page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 1 2007, 07:14 AM
Post #16


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



I don't see you have entered that anywhere in your page. Nor does that image exist on the server.

And maybe, because you already show the background shorthand, use that for the repeat too:

body {
background: white url(candybar.gif) top left repeat-x;
}

See http://www.w3.org/TR/CSS21/colors.html#propdef-background (or start at the top of that page).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 1 2007, 10:31 AM
Post #17


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE(KoDKingVegeta @ Jun 1 2007, 03:11 AM) *
it sounds so easy to do, but everytime i enter this html

BODY { background: white url(candybar.gif);
background-repeat: repeat-x }

it dosnt do anything, not a thing, all it does is show up on my page.
That isn't HTML. It's CSS.

Please see the FAQ entry Where can I learn about CSS?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 2 2007, 04:39 AM
Post #18


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Have you read the links to which I pointed you, about the structure of an HTML document and how to embed a CSS stylesheet?
Add to that an appropriate DOCTYPE. Get rid of one of the BODY tags and close the HEAD correctly (see a complete HTML 4 document).

Use just ONE stylesheet declaration in the <head></head> pairs and put all your CSS in that stylesheet (see embedding a style sheet.
So, also your CSS declaration for the body, for your background image, should be moved to the CSS in the HEAD.

QUOTE
the black bar, is a temp for my repeat background, I need it to follow down the page with the pics, and end when the pictures end. also when I move my page around, the black bar stays in the center, I need it to follow the background image also, so ppl with smaller/bigger screens will be able to look at it right.

I don't quite understand what you want.
As you have coded it now, it's positioned at the bottom of the viewport (the part of the page you see) and stays at the bottom when you scroll the page. It's the "fixed" declaration that does that (though it's not supported by all browsers, AFAIK). And it doesn't repeat.

Using the shorthand your declaration could look like this:
body {
background: #99ADD0 url("pic/bg.jpg") 50% 100% fixed no-repeat;
}

(added the BGCOLOR you have in the BODY tag, which you should delete)

You don't have a liquid layout, your content stays fixed to the right of the window, as I said before. If you resize the window, the background image (bg.jpg) does move to keep its place, but the content doesn't. At the link to Web Design References: CSS, which I gave you before, you'll find articles and tutorials on liquid design. Or pick your choice at Layoutgala.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th April 2024 - 05:22 AM