SunQuest
           CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Help needed with css rollovers

Discuss Help needed with css rollovers in the CSS Help forum on Dev Shed.
Help needed with css rollovers Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old April 26th, 2003, 05:18 PM
Clod Clod is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2003
Posts: 37 Clod User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 38 m 17 sec
Reputation Power: 6
Help needed with css rollovers
Quote:
#butt1 {
margin: 0px;
padding: 0px;
width: 27px;
height: 9px;
}

#butt1 {
/* Opera uses this background for the rollover effect. */
background: url(/img/menu/daily.gif) no-repeat 1px;
}

#dbutt {
display: block;
padding: 0;
background: url(/img/menu/daily.gif) no-repeat 1px; /* start hiding from macie\*/
background-image: url(/img/menu/daily.gif);
background-position: 0px; /* stop hiding */
width: 27px;
height: 9px;
voice-family: "\"}\""; /* Need we explain? */
voice-family: inherit;
width: 27px;
height: 9px; /* Actual values to overlap borders */
}

html>body #dbutt {
width: 27px;
height: 9px; /* Be nice to Opera */
}



a#dbutt:hover {
background-image: url(/img/menu/daily_ro.gif);
}


#butt2 {
margin: 0px;
padding: 0px;
width: 42px;
height: 9px;
}

#butt2 {
/* Opera uses this background for the rollover effect. */
background: url(/img/menu/script.gif) no-repeat 1px;
}

#sbutt {
display: block;
padding: 0;
background: url(/img/menu/scripts.gif) no-repeat 1px; /* start hiding from macie\*/
background-image: url(/img/menu/scripts.gif);
background-position: 0px; /* stop hiding */
width: 42px;
height: 9px;
voice-family: "\"}\""; /* Need we explain? */
voice-family: inherit;
width: 42px;
height: 9px; /* Actual values to overlap borders */
}

html>body #sbutt {
width: 42px;
height: 9px; /* Be nice to Opera */
}



a#sbutt:hover {
background-image: url(/img/menu/scripts_ro.gif);
}


#butt3 {
margin: 0px;
padding: 0px;
width: 18px;
height: 9px;
}

#butt3 {
/* Opera uses this background for the rollover effect. */
background: url(/img/menu/bio.gif) no-repeat 1px;
}

#bbutt {
display: block;
padding: 0;
background: url(/img/menu/bio.gif) no-repeat 1px; /* start hiding from macie\*/
background-image: url(/img/menu/bio.gif);
background-position: 0px; /* stop hiding */
width: 18px;
height: 9px;
voice-family: "\"}\""; /* Need we explain? */
voice-family: inherit;
width: 18px;
height: 9px; /* Actual values to overlap borders */
}

html>body #bbutt {
width: 18px;
height: 9px; /* Be nice to Opera */
}



a#bbutt:hover {
background-image: url(/img/menu/bio_ro.gif);
}

#butt4 {
margin: 0px;
padding: 0px;
width: 50px;
height: 9px;
}

#butt4 {
/* Opera uses this background for the rollover effect. */
background: url(/img/menu/portfolio.gif) no-repeat 1px;
}

#pbutt {
display: block;
padding: 0;
background: url(/img/menu/portfolio.gif) no-repeat 1px; /* start hiding from macie\*/
background-image: url(/img/menu/portfolio.gif);
background-position: 0px; /* stop hiding */
width: 50px;
height: 9px;
voice-family: "\"}\""; /* Need we explain? */
voice-family: inherit;
width: 50px;
height: 9px; /* Actual values to overlap borders */
}

html>body #pbutt {
width: 50px;
height: 9px; /* Be nice to Opera */
}



a#pbutt:hover {
background-image: url(/img/menu/portfolio_ro.gif);
}

#butt5 {
margin: 0px;
padding: 0px;
width: 42px;
height: 9px;
}

#butt5 {
/* Opera uses this background for the rollover effect. */
background: url(/img/menu/contact.gif) no-repeat 1px;
}

#cbutt {
display: block;
padding: 0;
background: url(/img/menu/contact.gif) no-repeat 1px; /* start hiding from macie\*/
background-image: url(/img/menu/contact.gif);
background-position: 0px; /* stop hiding */
width: 42px;
height: 9px;
voice-family: "\"}\""; /* Need we explain? */
voice-family: inherit;
width: 42px;
height: 9px; /* Actual values to overlap borders */
}

html>body #cbutt {
width: 50px;
height: 9px; /* Be nice to Opera */
}



a#cbutt:hover {
background-image: url(/img/menu/contact_ro.gif);
}

#butt6 {
margin: 0px;
padding: 0px;
width: 37px;
height: 9px;
}

#butt6 {
/* Opera uses this background for the rollover effect. */
background: url(/img/menu/forum.gif) no-repeat 1px;
}

#fbutt {
display: block;
padding: 0;
background: url(/img/menu/forum.gif) no-repeat 1px; /* start hiding from macie\*/
background-image: url(/img/menu/forum.gif);
background-position: 0px; /* stop hiding */
width: 37px;
height: 9px;
voice-family: "\"}\""; /* Need we explain? */
voice-family: inherit;
width: 37px;
height: 9px; /* Actual values to overlap borders */
}

html>body #fbutt {
width: 37px;
height: 9px; /* Be nice to Opera */
}



a#fbutt:hover {
background-image: url(/img/menu/forum_ro.gif);
}

Above is some CSS and below follows teh relavant HTML:
Quote:
<div id="butt1"><a id="dbutt" href="index.php" title="Daily New Blog"><span class="alt">Daily</span></a></div>
<div id="butt2"><a id="sbutt" href="scripts.php" title="Scripts"><span class="alt">Scripts</span></a></div>
<div id="butt3"><a id="bbutt" href="bio.php" title="All about Me"><span class="alt">Bio</span></a></div>
<div id="butt4"><a id="pbutt" href="portfolio.php" title="Portfolio"><span class="alt">Portfolio</span></a></div>
<div id="butt5"><a id="cbutt" href="contact.php" title="Contact"><span class="alt">Contact</span></a></div>
<div id="butt6"><a id="fbutt" href="forum.php" title="Forum"><span class="alt">Forum</span></a></div>

The URL that the page is at it http://www.vinfinate.co.uk/template.php
How do I get these links to line up on a single line rather than under each other?
Cheers
Clod
__________________
Computers are like Air conditioning, when you start opening windows they stop working!
Reply With Quote
  #2  
Old April 26th, 2003, 07:44 PM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
Add this to the rules for each link (#butt1, #butt2, etc.):

float: left;
margin: 5px; --->adjust to suit
Reply With Quote
  #3  
Old April 26th, 2003, 08:15 PM
Clod Clod is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2003
Posts: 37 Clod User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 38 m 17 sec
Reputation Power: 6
Cool Cheers
Thanks for the help. It works fine now.
Cheers
James
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Help needed with css rollovers

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway.