|
CSS - Css Text And Link Help
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
// =====================
?>
Similar TutorialsPROBLEM: 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.) 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! 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> 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? 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 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? 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~ 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- 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 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. 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, 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! 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(!) |
|||||||