CSS - Borderd Text Link Box(not Cooperating)

Hey guys,

Me again =(

Im having trouble with my CSS links.

For my navigation I want the regular text and the links to be the same, but dont know how. When I enter text with a link next to it, it moves the link down.

Here take a look: Link

Hover over forums. You will see "Help Here" above "Please Login".

Here is the CSS:
Code:
Code:

/*
---------------------------------------------------------------------------------------------
Guilds of WarCraft CSS TEMPLATE
Designed By: Donnerschlag
Version: 1.0  (7/20/05)
Description: Global CSS Styles for Guilds of WarCraft
URL: http://www.guildsofwarcraft.net
---------------------------------------------------------------------------------------------
*/




/****** Global CSS ********/

body {
    background-image: url(images/background.png);
    font: 10px Trebuchet MS, verdana, tahoma, arial;
    color: #000;
	margin:5px 0px; padding:0px;
	text-align:center;
}

a:link,
a:visited,
a:active,
a:hover {
    text-decoration: none;
    color: #000;
}

.banner { 
  background-image: url(images/header-bground.png);
  background-repeat: repeat-x; 
	width: 100%;
}

#container {
	width:617px;
	margin:0px auto;
	text-align: left;
	vertical-align: top;
	padding:9px;
}



/****** Navigation ********/



#navigation {
    position: relative;
    margin: 15px 235px 22px 0;
    padding: 0 0 0px 0;
    height: 2.4em
}

#nav ul { width: 598px; }

#nav li {
    margin: 0;
    float: left;
    display: block;
    padding-right: 10px;
}

#nav li.off ul, #nav li.on ul {
    display: none;
}

#nav li a {
    background: #CFC9A9;
    display: block;
    line-height: 6px;
    width: 8em;
    border: 1px solid #8C867A;
    padding: 5px;
    font-size: 10px;
    font-weight: bold;
    color: #66737B;
}

#nav li.off ul, #nav li.on ul {
    display: none;
    position: absolute;
    top: 1.5em;
    line-height: 5px;
    left: 0;
    padding-top: 5px;
}

#nav li.on a {
    background: #8C867A;
    border: 0;
    color: #FFF;
}

#nav li.on ul a, #nav li.off ul a {
    border: 0;
}

#nav li.on ul {
    display: block;
}

#nav li.on ul a, #nav li.off ul a {
    float: left;
    border: 0;
    color: #FFF;
    width: auto;
    margin-right: 5px;
}

#nav li.on ul {
    background: #8C867A;
    display: block;
}

#nav li.on:hover ul {
    background: #8C867A;
}

#nav li.on:hover a {
    background: #8C867A;
    color: #FFF;
}

#nav li.off:hover ul, #nav li.sfhover ul {
    background: #8C867A;
    display: block;
    z-index: 6000;
}

#nav li.off:hover a, #nav li.sfhover a {
    background: #8C867A;
    color: #FFF;
}

#nav li.off ul a:hover, #nav li.on ul a:hover {
    background: #8C867A;
    color: #E2E6E7;
}


/****** Main Body ********/



#mainbody {
	padding: 9px 9px 9px 9px;
    border-style:solid;
	border-color:black;
	border-width:1px;
	border-color: #000000;
    background-color: #F8F4EB;        
	}
#news {
	padding: 5px 5px 5px 5px;
	background-color: #CFC9A9;
	width: 579px;
	}


/****** Copyright ********/


.copyright {color: #FFFFFF}

/****** Notice ******/
#notice {
	padding:2px;
	border-style:dashed;
	border-color:black;
	border-width:1px;
	border-color: #000000;
	background-color: #F1F6A3;
	min-height: 32px;
}

and this is the nav PHP:
Code:

PHP Code:
<div id="navigation" >
    <ul id="nav">
      <li class="on"><a href="#">General</a>
          <ul>
            <li><a href="index.php" title="Home" accesskey="h"><span class="access-key">H</span>ome</a></li>
            <li><a href="" title="About Us" accesskey="a"><span class="access-key">A</span>bout Us</a></li>
            <li><a href="" title="Guilds" accesskey="g"><span class="access-key">G</span>uilds</a></li>
            <li><a href="" title="Downloads" accesskey="d"><span class="access-key">D</span>ownloads</a></li>
            <li><a href="" title="Members" accesskey="m"><span class="access-key">M</span>embers</a></li>
            <li><a href="" title="Search" accesskey="s"><span class="access-key">S</span>earch</a></li>
            <li><a href="" title="FAQs" accesskey="f"><span class="access-key">F</span>AQs</a></li>
            <li><a href="" title="Contact Us" accesskey="c"><span class="access-key">C</span>ontact Us</a></li>
          </ul>
      </li>
      <li class="off"><a href="#">Forum</a>
          <ul class="navtext">
          <?php include("memberbar.php"); ?>
          </ul>
      </li>
      <li class="off"><a href="#">Guild Masters</a>
          <ul>
            <li><a href="" title="Login">Login</a></li>
            <li><a href="" title="Register">Register New Guild</a></li>
          </ul>
      </li>      
    </ul>
</div>

Memberbar.php:

PHP Code:
Code:

<?
/**
* IPB SDK Code Snippet - Member Bar
* Copyright (C) 2003 Global Centre Scripting
* Designed for IPB SDK 1.0
*
* This Code Snippet displays a member bar.
*
* @author Cow <khlo@global-centre.com>
* @date   23/11/03
*/

// Load and Start IPB SDK
require_once "ipbsdk_class.inc.php";
$SDK =& new IPBSDK();

// =====================
// START MEMBERBAR
// =====================

if ($SDK->is_loggedin()) {
    // We're logged in. Retrieve member info
    $info = $SDK->get_info();

    // Generate Bar Content
    $member_name = $info['name'];
    $extralinks = "";
    if ($SDK->is_admin()) {
        $extralinks .= '<li><a href="'.$SDK->board_url.'/admin.php">Admin CP</a></li>';
    }
    if ($SDK->is_supermod()) {
        $extralinks .= '<li><a href="'.$SDK->board_url.'/index.php?act=modcp">Mod CP</a></li>';
    }

    // Display Member Bar
    echo '<li>Logged in as '.$member_name.'</li>
          '.$extralinks.'
          <li><a href="'.$SDK->board_url.'/index.php?act=Login&CODE=  03">Log Out</a></li>';
}
else {
    // Display the Guest Bar
    echo '<li> Help Here<a href="'.$SDK->board_url.'/index.php?act=Login&CODE=  00">Please Login</a><a href="'.$SDK->board_url.'/index.php?act=Reg&CODE=00  ">or Register</a></li>';
}

// =====================
// END OF MEMBERBAR
// =====================
?>

Hi there,

Is it possible to have the same name for a link style to a text style?

For example:

a.small:link{....

and

.small{...

Many thanks!

Hello,
i am new to css and i am trying to create text links on an image file using css and html
my problem is i can create one text link using the css and html code i am about to post. but i need to have 4 or 5 text links on this picture
example would be

Text Link
Text Link
Text Link
Text Link
Text Link

here is the css i am using

Code:

.imagecontainer {
    position:relative;
    float:right;
}
.imagecontainer a {
    position:absolute;
    top:200px;
    left:235px;
    color:#FFFFFF;
    font-weight: bold;
}

here is the html code

Code:

<div class="imagecontainer">
 <img alt="" src="http://durin78.squarespace.com/storage/BLUE_TILE_ROUNDED_CORNERS-2.png" />
 <a href="http://durin78.squarespace.com/blogs/category/ranting-and-raving/">Your Saint For Suicide</a>
</div>

How do I get rid of the blue text and underline ??

Here is my style sheet

#page_content {
margin-left: 200px;
}

#container {
position: relative;
width: 100%;
}
#background
{
width: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background-color: #000000;
}
#testbox{
width: 100%;
height:100%;
position: relative;
}


#menu li{
display: inline;
text-transform: uppercase;
font-size: 1.1em;
line-height: 1.0em;
font-weight: bold;
padding: 0 10px 0 10px;
color: #FFFFFF;
text-decoration: none;

}
#data{
width: 190px;
height: 200px;
margin: 20px;
position: absolute;
bottom: 150px;
color: #FFFFFF;
font-size:1.3em;
}

Im looking to make it so when someone rolls over a img i have linked it makes the text (which is also a link) next to it act like it has been rolled over as well.

Basically its a list set up like this.


Code:

<dt><a href="#"><img src="blah"/></a></dt>
<dd><a href="#">Text link here</a></dd>

I've seen it done a few ways, but none of them work really for my setup. The ones I've seen set up the IMG as a background positioned.

Anyone have an answer?

Going to the far below link and clicking on the top link "projects" of that page brings up a menu with three links. Clicking on one of those links, 'Built' for example, brings up another submenu and at the same time it highlights "Built" as orange. Clicking on "Unbuilt" or "In Progress" has the same effect.

What I'm now needing to happen is if say you click on "Block" under the "Built" menu and it goes to the "Block" page I have "projects" and "Block" highlighted as orange but I'm not sure how to have "Built" continually highlighted as orange but when either "Unbuilt" or "In Progress" is clicked on the link "Built" goes to grey and the menu item clicked on turns to orange - as I currently have it.

Seems what I need is an CSS class/ID OnLoad for just "Built" (per this example) to where when going to the "Block" page the link "Built" is orange in the beginning but when the other links are clicked on it turns to grey.

Would anyone have advice on how to achieve this? This doesn't work in Safari btw:

http://www.royseeagleton.com/new/

Thanks!,
Wesley

Let say you have this:

<a href="#">
<img src="some.gif" alt="">
Some text
</a>

I want to have underline for the text on hover, but not for image.

How do I do that for the above A IMG text?

I want both the IMG and text within the A tag.

Would appreciate a solution that worked in at least:
IE, FF, OP, NE, Safari

For me it is working in IE and OP but not in the gecko browsers.... FF, NE

Regards

http://shsc.bdigia.com/index1.html
http://shsc.bdigia.com/cau1.css

As you can see, the link text needs to be repositioned. Margin nor padding work well because it creates unwanted spaces between the background images.

Can anyone help me?

Issue resolved using forum search.

Thanks for having such great resources - I just had to search for a while.

I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>???

Here is a link

http://casadelmar.tmhdesign.com

Thanks.

Hi everyone,

I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not.

I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located.

To get a visual you can check the website (just remove the *)
*onholdmusicsource*.com

In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button.

Comments would be fine
Ideas would be great
Solutions would be fantastic

Many Thanks-

On my sitehttp://northshorewebdesign.net/testsite/ I have a horizontal menu with text and one image link. The menu is under the slideshow. There are 4 text links and an image link. I am trying to line up the text and image horizontally. Can anyone see what I am doing wrong? Here's the code:
Code:

.homepage-sub-menu {float: left; width: 960px; height: 70px;overflow: hidden; position: relative; margin: 10px 0px;}

.homepage-sub-menu ul{list-style-type: none; margin: 0; padding: 0; overflow:hidden;}

.homepage-sub-menu ul li {float: left; vertical-align:middle; width: 180px;}

.homepage-sub-menu ul li a:link,a:visited {display: block; width: 180px; font-family: Calibri,Arial, Helvetica, sans-serif; padding: 10px 4px; font-size: 20px;color: #ffffff; text-decoration:none; vertical-align:middle;display:table-cell;line-height: 70px;}

.homepage-sub-menu ul li a:hover,a:active{text-decoration: underline; vertical-align:middle;}

Thank you

Everyone,

I'm having an issue with the first DIV intensive site I am doing:

IE will not recognize links or allow me to highlight text, or fill in forms in the left side of DIVs that I have on a site I am developing:

httP://www.ephire.com/mack

If you try and click the "more" link up top, or goto the "contact" link, no joy in IE, but Firefox works just fine:

Here is the code I think is the culprit:

Code:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale);

And here is the whole page. I'm seriously stumped...I tried going through and deleting things line by line and jacking with settings, and the only thing that allowed anything to work was messing with the section of code above.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<title>MACK Insurance</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style>

* html #wrapper {
    background: url(images/body_t.gif) 24px 0px no-repeat;
    backgro\und: none;
}

* html #ie {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_t.png');
    height: 39px;
    width: 434px;
    position: absolute;
    margin-left: 24px;
}

* html #body {
    background: url(images/body_bg.gif);
    backgro\und: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale);
}

.footerie {
    display: block;
    disp\lay: none;
}

.footer {
    display: none;
    disp\lay: block;
}

</style>
<![endif]-->

</head>

<body>
<center><table><tr><td>  <div id="ie"></div>
  <div id="wrapper">
      <h1><a href="/"><img src="images/logo.jpg" width="200" height="30" alt="logo" /></a></h1>
      <div id="body">
          <div class="inner">
              <div id="content"><div>
                <font face="Arial" size="2"><b>Health, Life, Disability</b></font>
		<br>Designed Benefits Associates is dedicated to finding the best health care program to suit the needs of a family or individual. <br><br>Our specialty is paired programs that protect not one, or two, but multiple areas of life. <a href="index_01.html"><img src="images/btn_more.gif" width="52" height="6" alt="more" /></a>
		</div></div><!-- end content -->
              <div id="page_title">
                  <img src="images/title_main_page.gif" width="47" height="200" alt="main page" />
              </div><!-- end page_title -->
              <div id="news"><div><div>
                  <font face="Arial" size="1"><b>Things to Consider</b></font>
                  <img src="images/picture_3.jpg" width="96" height="56" alt="picture 3" />
                  <p>04-20-2006</p>
                  <p>As your insurance broker, we daily search for the best priced health plans with the optimum benefits, so you can spend time doing what's important.<br><br><br></p>
                  </div></div></div><!-- end news -->
              <div class="clear"></div>
          </div><!-- end .inner -->
          <div id="footer">
		<img src="images/footer.gif" width="435" height="196" alt="footer" class="footer" />
          </div><!-- end footer -->
      </div><!-- end body -->
      <div id="paper">
          <div class="inner">
              
              <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Health</b></a></font>
              <a href="http://www.ephire.com"><img src="images/picture_1.jpg" width="130" height="74" alt="picture 1" /></a>
              <br><br>
              <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Life</b></a></font>
              <a href="http://www.ephire.com"><img src="images/picture_2.jpg" width="130" height="74" alt="picture 2" /></a>
              <br><br>
              <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Disability</b></a></font> 
	      <a href="http://www.ephire.com"><img src="images/picture_4.jpg" width="130" height="74" alt="picture 4" /></a>
              <p>A single plan can add peace of mind, all three together can insure stability.</p>
              <center><font face="Arial" size="1"><a href="contact.html"><b>Contact</b></a> - <a href="index.html"><b>Home</b></a> - <a href="testimony.html"><b>Testimony</a></font></center>
              
          </div><!-- end .inner -->
      </div><!-- end paper -->
	
  </div><!-- end wrapper -->
  <div style="clear:both;position:relative;display:block;margin-top:530px;" >

</div></td></tr></table></center>
<center><br><table><tr><td>  <br><br><br><center>Powered by <a href="http://www.ephire.com">ephire</a></center></td></tr></table>
</body>
</html>

Any help is appreciated~

Hello,

I'm trying to create an list menu like the one in attached image and I have 2 problems.

1. In IE 6,IE 7 the list is ordered verticaly and not horizontaly (in Opera and FF it is ok)

2. I need to align the text on the bottom of the list like inattached image.

Here is what I manage to do till now : http://www.sibiul.net/test/list-align.php

Anyone knows what I must do ?

10x

Hi,

I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the index page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour. I also want the whole title to be on one line.

I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other!



My page code:

<div id="garden-designer-title"><a href="(*website address*)" title="home">Joe Blogs</a><h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1>
</div>



My stylesheet code:

#garden-designer-title {
position:relative;
left:0px;
top:0px;
padding: 0;
margin: 0;
width:526px;
height:51px;
z-index:7;
}

#garden-designer-title a {
position:relative;
font-size: 46px;
font-family: verdana, arial, helvetica, sans-serif;
color: #009999;
font-weight: normal;
text-decoration: none;
}

#garden-designer-title h1 a {
display: inline;
font-size: 29px;
font-family: verdana, arial, helvetica, sans-serif;
color: #9482A4;
font-weight: normal;
text-decoration: none;
}

Does anyone know what I'm doing wrong?!

Many thanks!