Fri, 2003-09-05 05:00
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.
Fri, 2003-09-05 08:20
#1
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 {
}
Fri, 2003-09-05 14:54
#2
Need some help, please
Thanks, I will give it a try.
Understanding the clipping would be cool also
Fri, 2003-09-05 18:50
#3
Need some help, please
Hi Bryan,
(you certainly get around 
)
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
Fri, 2003-09-05 19:21
#4
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.
Fri, 2003-09-05 19:39
#5
Need some help, please
Good ! Glad to see you getting results.
Paul
Fri, 2003-09-05 19:41
#6
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
Fri, 2003-09-05 20:20
#7
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