Text and Link CSS [Archive] - Lissa Explains it All: Web Design Forums

Donnerschlag

07-23-2005, 07:37 AM

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 (http://www.guildsofwarcraft.net)

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

Here is the CSS:

/*
---------------------------------------------------------------------------------------------
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:

<div id="navigation" >
<ul id="nav">
<li class="on"><a href="#">General</a>
<ul>
<li><a href="index.php" title="Home" accesskey="h">Home</a></li>
<li><a href="" title="About Us" accesskey="a">About Us</a></li>
<li><a href="" title="Guilds" accesskey="g">Guilds</a></li>
<li><a href="" title="Downloads" accesskey="d">Downloads</a></li>
<li><a href="" title="Members" accesskey="m">Members</a></li>
<li><a href="" title="Search" accesskey="s">Search</a></li>
<li><a href="" title="FAQs" accesskey="f">FAQs</a></li>
<li><a href="" title="Contact Us" accesskey="c">Contact 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:

<?
/**
* 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
// =====================
?>

if you want to test it plz change in the memberbar.php

require_once "ipbsdk_class.inc.php";

to

require_once "http://www.guildsofwarcraft.net/ipbsdk_class.inc.php";

Thnx in advanced.