|
CSS - Css Text Link Over Image Help
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> Similar TutorialsI 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? Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) 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? 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 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 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- 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 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.) Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> 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 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; } 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! Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? 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>
Issue resolved using forum search. Thanks for having such great resources - I just had to search for a while. 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? 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 |
|||||||