7 replies [Last post]
jag5311
Offline
Regular
Last seen: 15 years 46 weeks ago
Joined: 2003-08-28
Posts: 12
Points: 0

I have redone my website, www.btkdesigns.com, to a new css only website.

it can be seen here
http://www.btkdesigns.com/btkdesigns/btkdesigns.htm

Well, I will get straight to the point. There are two things seriously wrong.

1st

I am trying to include the horizontal scroller from projectseven.com, and you can view my example at this link
http://www.btkdesigns.com/btkdesigns/scroller.htm

It doesn't work, but its the clipping that has got me stumped.

Do you have to have a position: absolute for clipping to be effective. As you can tell from my css, http://www.btkdesigns.com/btkdesigns/btk-designs.css

I have included clipping, but it doesn't cover anything.

Is my setup of divs, in regards to adding this container and content (for the scroller) wrong?

2nd problem.

I would think that if I wanted one set of links to behave one way, and another set to do something else, it would be as simple as creating a set of class's.

Such as, i currently have a default a:link, a:visited, a:hover for my main menu which you can see in the 2nd link i provided. Then I wanted to create another set, refered to as

a.control:link
a.control:visited
a.control:hover

Then apply it like such, <a href="#" class="control">Link1</a>

DO you think that would work, HELL NO. It treats that link the same as teh default ones.

So, like I said, I am stumped.

Thanks in advance for any help.

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 16 years 10 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

Need some help, please

RE: No.2

Style your links depending on their context rather than styling all links.

Currently, you have:

a:link {
}
a:visited {
}
a:hover {
}
etc...

Try defining your menu link styles like this:

#menu div a:link {
}
#menu div a:visited  {
}
#menu div a:hover{
}
etc...

...then only your menu links will take these styles.

So for your control classes, I assume the links will be in a div with id="controls"?

In which case you can use:

#controls div a {
}
#controls div a:visited {
}
#controls div a:hover {
}

A Pedant Writes...
Into the mountain,
I will fall.

jag5311
Offline
Regular
Last seen: 15 years 46 weeks ago
Joined: 2003-08-28
Posts: 12
Points: 0

Need some help, please

Thanks, I will give it a try.

Understanding the clipping would be cool also

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Need some help, please

Hi Bryan,

(you certainly get around Wink)

Quote:

a.control:link
a.control:visited
a.control:hover

Then apply it like such, <a href="#" class="control">Link1</a>

DO you think that would work, *beep* NO. It treats that link the same as teh default ones

That does work! See the example below.

<style type="text/css">
<!--
a:link {
	color: #FF0000;
	text-decoration: none;
	background-color: #FFFFCC;
}
a.control:link {
	color: #00FF00;
	text-decoration: none;
	background-color: #99FFFF;
}
-->
</style>
</head>

<body>
<p><a href="#">Hello Normal Link</a></p>
<p><a href="#" class="control">Hello Control Link</a></p>
</body>

Although if you have a lot of links that need the class applied then Insin's method is the better way to do it as you can apply the class to the whole group.
e.g.

<style type="text/css">
<!--
a:link {
	color: #FF0000;
	text-decoration: none;
	background-color: #FFFFCC;
}
.control a:link {
	color: #00FF00;
	text-decoration: none;
	background-color: #99FFFF;
}
-->
</style>
</head>

<body>
<div class="control">
<p><a href="#" >Hello Control Link</a></p>
<p><a href="#" >Hello Control Link</a></p>
<p><a href="#" >Hello Control Link</a></p>
<p><a href="#" >Hello Control Link</a></p>
</div>

Paul

jag5311
Offline
Regular
Last seen: 15 years 46 weeks ago
Joined: 2003-08-28
Posts: 12
Points: 0

Need some help, please

Well hey paul, what do you know:)

I am just trying to get a larger audience to view my problems so more voices can chime in.

Well, i figured the link thing out, i went with the first method recommended. Hasn't given me a problem yet.

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Need some help, please

Good ! Glad to see you getting results.

Paul

jag5311
Offline
Regular
Last seen: 15 years 46 weeks ago
Joined: 2003-08-28
Posts: 12
Points: 0

Need some help, please

SLowly, but surely.

I am 22, but I feel like i am already bald from pulling my hair out.

It is a pain in the ass getting this to appear correct in all browsers.

For example, Firebird takes that menu of mine and throws it to the top.

Why, i don't know

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Need some help, please

It might have something to do with that display-inline you used for your header.

It means that the header isn't finishe and is probably pulling the menu towards it.

Change your header to margin-bottom:0px instead. That should sort out a couple of problems.

Paul