3 replies [Last post]
Phrozt
Phrozt's picture
Offline
Regular
Last seen: 17 years 29 weeks ago
Joined: 2004-07-08
Posts: 39
Points: 0

I'm trying to completely redo a site, and I'm having some problems.

This is the site I'm workign on:
http://www.rabbitstop.com/indexcss.htm
CSS file: http://www.rabbitstop.com/indexcss.css

The first is kind of small I'm guesing... You'll notice on the sidebar that at the bottom, there is a little bit more background showing that ends up appearing below the bottom gif. I'm guessing I have something messed up with the margin or padding??

Finally, the large problem. I was trying to do something similar to: http://www.medicaltextbooks.co.uk/, where there is a text box that appears when you mouse over the links. I would want the text to appear in the information box that is right under the menu bar. I tried to copy the code exactly into my css file and it didn't work, and no amount of tweaking on my own could get it to work... does anyone konw what it won't display?? (The only text I've done that with so far is the text for the "more" button).

It should do something like this: http://www.ferretdepot.com

If you look at the code for that page though, you can see why I'm trying to redo evertyhign in css. :/

Thanks for your help

jump
Offline
newbie
Melbourne. Australia
Last seen: 17 years 30 weeks ago
Melbourne. Australia
Timezone: GMT+10
Joined: 2004-06-30
Posts: 5
Points: 0

Having a few problems... trying to hide and uncover text

I know what you are trying to do here. It took me a while to get this one myself.

The text appearing on the wrong position of the page should be between <span> tags.

I got lost in all your code on the web page but I did notice that they were not included in your external stylesheet.

Here is the code from one of my external stylesheets.

div.links
{
position: absolute;
top: 145px;
left: 5px;
width: 100px;
height: 300px;

z-index:+2;
background-color:#23238e;
}

div.links a
{

display: block;
font-weight:bold;
font-style:normal;
font-family:arial;
font-size:11pt;
padding: 5px 10px;
margin: 0 0 1px;
border-width: 0;
font-decoration: none;
color:#ffff00;
background-color:transparent;
}
div.links a:hover
{
color:#23238e;
background-color:#ffff00;
}
div.links a span
{
display: none;}
div.links a:hover span {display: block;
position: absolute;
top:-5px;
left:95px;
width:550px;
padding: 5px;
margin: 10px;
z-index:+3;
color:#23238e;
background-color:#ffff00;
font-size: 12px;
font-weight:bold;
font-family:arial, sans-serif;
text-align:left;
height:70px;
}

and here is the web page code for my links

<div class="links">
<a href="#">Home<span>Whoops! I'm already here.</span></a>

<a href="intro.html">About CSPS<span>Read the "About our School" by clicking where your pointer is placed now.</span></a>

<a href="sp.html">School Profile<span>Read the "School Profile" by clicking where your pointer is placed now.</span></a>

<a href="pm.html">Principals Message<span>Read the "Principals Message" by clicking where your pointer is placed now.</span></a>

<a href="c.html">Curriculum<span>Read the "School Curriculum" by clicking where your pointer is placed now.</span></a>

<a href="se.html">Special Events<span>View our "Special Events Calendar" by clicking where your pointer is placed now.</span></a>

<a href="sc.html">School Charter<span>Read the "School Charter" by clicking where your pointer is placed now.</span></a>

<a href="tour.html">Take a Tour<span>Take a "tour of the school" by clicking where your pointer is placed now.</span></a>

<a href="pics/show.html">Slideshow<span>View the "Slideshow" by clicking where your pointer is placed now.</span></a>

<a href="focus.html">The Focus<span>Read our latest "school magazine" by clicking where your pointer is placed now.</span></a>

<a href="sf.html">School Forms<span>Print "School Forms" by clicking where your pointer is placed now.</span></a>

<a href="v.html">Vacancies<span>View the "Job Vacancies" by clicking where your pointer is placed now.</span></a>

</div>

To change where the text box pops up you need to change the top and left position in the "div.links a span" section of the code.

Play around with it. Good luck

jump
Offline
newbie
Melbourne. Australia
Last seen: 17 years 30 weeks ago
Melbourne. Australia
Timezone: GMT+10
Joined: 2004-06-30
Posts: 5
Points: 0

Having a few problems... trying to hide and uncover text

jump wrote:
I know what you are trying to do here. It took me a while to get this one myself.

The text appearing on the wrong position of the page should be between <span> tags.

I got lost in all your code on the web page but I did notice that they were not included in your external stylesheet.

Oh before you get into it.
Here is a link to one of my pages. Check the mouseover on the links and see if this is what you want it to do.

http://www.eionline.com.au/html_tutor/html_tutor.html

Good luck. Have fun

Phrozt
Phrozt's picture
Offline
Regular
Last seen: 17 years 29 weeks ago
Joined: 2004-07-08
Posts: 39
Points: 0

Having a few problems... trying to hide and uncover text

Thanks for your reply Smile.

Yep.. that was pretty much what I needed.. but I ended up figureing it out anyway Smile. Check it out: http://www.ferretdepot.com