|
CSS - Repositioning Link Text Crisis :chomp:
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? Similar TutorialsI have a web page containing 3 layers. There are placed side by side with absolute positions. The middle layer contains a image with a fixed size. Now I have to change the image based on user's selection, so it is no longer fixed sized. I want to let the third (right) layer to re-adjust its position when image is smaller. How to make it work? This is my first time working with layers, please help. Thanks. Matt Sample can be seen at this link I'm using some jQuery Tool tooltip code that will bring up a stylized tooltip when the user hovers over a set of li tags. Right now, I'm just playing with the sample png file that came with the demo . This uses a black box as a background image and then anything I put inside a div class="tooltip" shows up as text inside that image. Nice, but I can't quite get the tooltip box to pop up where I want it. The li tags are nested inside a div, which is nested inside other divs. So, I need some help figuring out how to tweak the CSS to reposition the tooltip. I'd like it to appear just to the right of the selected li tag, and still stay within the maincol div. Actually, I don't even mind if it floats outside that maincol, just as long as I can get it to show up somewhat closer to the li tag's text. and just some of the relevant css Code: #maincol.second {
padding: 8px;
width:700px;
margin-left: 190px;
margin-right:10px;
background-color:#fff;
min-height:730px;
}
/* tooltip styling */
.tooltip {
display:none;
background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);
height:163px;
padding:40px 30px 10px 30px;
width:200px;
font-size:11px;
color:#fff;
}
.switches {width: 400px;}
.switches ul{
font-size: .85em;
margin: 1em 0 .5em 0;
}
.switches li{
list-style-type:none;
color:#800000;
}
PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) 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 guys, I am working on This website . On the left hand navigation menu I would like anywhere in the li to be a link but at the moment only the text is a link. See below html/css Code: <div class="sideMenu">
<ul>
<li><a href="index.html">Welcome</a></li>
<li><a href="home page/about.html">About SEDDA</a></li>
<li><a href="home page/location.html">Locations</a></li>
<li><a href="home page/contact.html">Contact</a></li>
</ul>
</div>
Code:
.sideMenu ul {
margin-left: 0px;
margin-top: 4px;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.sideMenu li {
list-style-type: none;
margin-top: 12px;
margin-bottom: 12px;
margin-left: 0px;
font-size: 14px;
font-weight: normal;
margin-right: 0px;
background-color: #004054;
white-space: normal;
padding-top: 6px;
padding-bottom: 6px;
padding-right: 0px;
padding-left: 0px;
}
.sideMenu li:hover {
background-color: #CCCCCC;
}
.sideMenu a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
font-size: 10px;
margin: 0px;
padding: 0px;
z-index: 10;
white-space: normal;
width: 100%;
}
.sideMenu a:hover {
margin: 0px;
padding: 0px;
color: #FFFFFF;
white-space: normal;
}
Unless I'm mistaken I 've used the same method successfully before without problem. Can anybody tell me what the problem is please. Thanks James 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> 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! 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; } i have this error where the links that i put in a padded border the go out of the border i want them to stay in it i need help making it stay in there i did alot to make it work Code: <html>
<head>
<style type="text/css">
<!--
.margcolo{border:medium double gold; width:100px; height:150px;}
.small{font-size:14;}
.pad{padding:65px 10px 65px 10px;background-color:yellow;}
--></style>
</head>
<body class="margcolo">
<p class="pad"><a
href="file:///C:/Documents%20and%20Settings/COMPUTER/Desktop/Example1.html">Example</a></
p>
<p class="small"><a
href="file:///C:/Documents%20and%20Settings/Comp directory/Desktop/Fcrsdhomework.html">Fcrsd
site</a></p>
</body>
</html>
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? Issue resolved using forum search. Thanks for having such great resources - I just had to search for a while. 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 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 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 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- 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 |
|||||||