|
CSS - Link Backgrounds Only Covering Certain Amounts?
I made my site buttons so that there's some transparent areas so when you hover, only the transparent areas are colored by using the css's link background color properties, yet the background only reaches half way so the link background doesn't cover the whole image... this is the first time it has happened to me. Any suggestions on an alternate way to do this?
Similar TutorialsCurrently I am using the following code for links: Code:
a:link{color: red; text-decoration: none}
a:active{color: red}
a:visited{color: red; text-decoration: none}
a:hover{background-color: gray}
I was wondering how to make the gray background have rounded corners when the user hovers over them. The page: http://new.midnighttempest.com/ As you can see, the content div is covering the footer, it sits just below the menu, whereas i want it to sit just below the content the php file: PHP Code: <?php define('IN_PHPBB', true); $phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './'; $phpEx = substr(strrchr(__FILE__, '.'), 1); include($phpbb_root_path . 'common.' . $phpEx); include($phpbb_root_path . 'includes/functions_display.' . $phpEx); include($phpbb_root_path . 'includes/bbcode.' . $phpEx); // Start session management $user->session_begin(); $auth->acl($user->data); $user->setup(); page_header('Homepage'); $template->set_filenames( array( 'body' => 'main.html', ) ); $forumid = 14; $sql_array = array( 'SELECT' => '*', 'FROM' => array(TOPICS_TABLE => 't'), 'LEFT_JOIN' => array( array( 'FROM' => array(POSTS_TABLE => 'p'), 'ON' => 't.topic_first_post_id = p.post_id' ) ), 'WHERE' => 't.forum_id = ' . $forumid . ' AND MONTH(FROM_UNIXTIME(post_time)) = MONTH(CURDATE())', 'GROUP_BY' => 't.topic_id', 'ORDER_BY' => 'post_time DESC' ); $sql = $db->sql_build_query('SELECT', $sql_array); $result = $db->sql_query($sql); while($row = $db->sql_fetchrow($result)) { $url = "<a href='".$phpbb_root_path."viewtopic.php?f=".$forumid."&t=".$row['topic_id']."'>".$row['post_subject']."</a>"; $poster = "<a href='".$phpbb_root_path."memberlist.php?mode=viewprofile&u=".$row['topic_poster']."'>".$row['topic_first_poster_name']."</a>"; $date = $user->format_date($row['post_time'], false, false) . "</strong>"; $text = generate_text_for_display(smiley_text($row['post_text']), $row['bbcode_uid'], $row['bbcode_bitfield'], $row['enable_bbcode'] = $row['enable_smilies'] = $row['enable_magic_url'] = true); $avatar = '<img src="http://new.midnighttempest.com/download/file.php?avatar=2_1260394092.png" />';; $updates[] = '<table width="100%" border="0"> <tr> <td colspan="2"><strong>Title</strong>:'.$url.'</td> </tr> <tr> <td width="10%">'.$avatar.'</td> <td width="90%">'.$text.'</td> </tr> <tr> <td colspan="2"><strong>Posted On:</strong> '.$date.' <strong>by</strong> '.$poster.'</td> </tr> <tr> <td colspan="2"><hr/></td> </tr> </table>'; } $db->sql_freeresult($result); $template->assign_vars( array( 'UPDATES' => implode('', $updates), 'FORUMID' => $forumid ) ); page_footer(); ?> main.html Code: <!-- INCLUDE overall_header.html -->
<div class="forabg" id="main">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<span style="font-size: small">Updates</span>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
<p> </p>
{UPDATES}
<p><a href="/viewforum.php?f={FORUMID}">View all previous updates</a> </p>
</li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<div class="forabg" id="menu">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<span style="font-size: small">Menu</span>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
<!-- INCLUDE mt_menu.html -->
</li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<!-- INCLUDE overall_footer.html -->
mt_menu Code: <p><strong>Info</strong>
<br />
<a href="/">Home</a><br />
About / Rules
<br />
Join Form </p>
<p><strong>Members</strong>
<br />
Memberlist
<br />
Card List
<br />
Games
<br />
Forum
<br />
Donate
<br />
Login </p>
<p><strong>Other</strong>
<br />
Affiliates
<br />
Link to us
<br />
Randomizer
<br />
Staff Pay
<br />
Credits
<br />
Contact Us</p>
css Code: /* Midnight Tempest Layout */
#main {
position:absolute;
width:70%;
overflow:visible;
z-index:1;
}
#menu {
float:right;
width:20%;
overflow:visible;
z-index:2;
}
Dear all, I am willing to develop a div tag, which will cover the entire body tag. The code I am using is the following: Code: <div id="warningLayer" style="position:absolute; width:100%; height:100%; margin:0; padding:0; background-color:#000000; opacity: 0.5; z-index:999999999; display:block; overflow:visible;"> </div> Unfortunately, the HTML page covers more that the browser window, hence when the visitor scrolls down the page, the body remains uncovered. How could I fix this issue? Thank you in advance. IE is not very friendly when it comes to iframes. I wanted to know if there is a workaround for iframes on internet explorer. I've been searching high and low, and tried every idea I can think of to fix this. It's really hard to explain what it is I'm looking for, but I'm going to try to be as clear as possible. I've been working on my blog: http://tkthebadomen.blogspot.com/ And I almost got it to the point I want, except I've hit a brick wall with this one. I have the background fixed, and a layer of buildings that scrolls with the page. The problem is filling the area below the scrollable buildings with black. I'm not going to go into detail about all the things I've tried. But if I make a section black, it only fills the screen once, so if I scroll, the next page shows through; and then when I look at just a single post, it makes the bottom of the page go down past the footer. So my question is: Is there a way to fill the background with a color, from a certain point on the page to the end of the content? Here's the css I currently have for the front scrolling sections: Code: div.front {
background-image:url(http://www.tksheppard.com/blog/front.png);
background-repeat: no-repeat;
background-attachment: scroll;
position:absolute;
width:1284px;
height:100%;
top: 500px;
left: 0px;
bottom: 0px;
}
div.middle {
background-color:#000000;
color:#000000;
position:absolute;
overflow:hidden;
width:1284px;
height:100%;
top: 150%;
left:0px;
bottom:0px;
}
If you need anymore code posted, let me know. Hi all, Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS. Thanks for any help Hey guys. I have a basic div and want an image to show up on the top of the div only. Here it is. Code:
#container #news {
top:3px;
width:260px;
height:194px;
background-color:#eeeee2;
float:left;
margin-bottom:4px;
background: url(/images/section_top.gif) no-repeat top left;
}
The image spans the width of the div and is only about 20 pixels tall. so it should show up, but the rest of the div should display, obviously. The image does indeed show up at the top. However, the rest of the div gets covered in white for some reason. Anybody know what's up? Thanks in advance. hi, i have created a simple css layout and its displaying correctly in google chrome, firefox, IE 6 and IE 7. However, IE 8 is covering the 1px border on the left of the containing div section with the image contained within the logo. I tried adding a 1px padding and margin which only served to push the image over the right hand side border in IE 8. Does anyone know whats causing this issue? Here is my code below. Thanks in advance. First, the HTML code:- 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'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<meta http-equiv='Content-Language' content='en-us' />
<link rel='stylesheet' type='text/css' href='css/default.css' />
</head>
<body>
<div id='page'>
<div id='logo'>
<img src='gfx/siteLogo.jpg' alt='Our Website Logo' />
</div>
</div>
</body>
</html>
Now the css file:- Code:
/* page structure definitions */
html
{
font-size: 100%;
}
body
{
margin: 0;
padding: 0;
/* 20px */
padding-top: 1.25em;
padding-bottom: 1.25em;
text-align: center;
font-family: Verdana, sans-serif;
background-color: white;
/* 16px */
font-size: 1em;
}
#page
{
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
/* 900px */
width: 56.25em;
/* 1px */
border: solid black 0.0625em;
background-color: #ABBAD9;
}
#logo
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
#logo img
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
The image in the logo is 900px * 150px. Hi all, a few quick q's: 1. What is best way to set-up a style-sheet for NN4 CSS? I am using @import, and I want to serve-up a NN4 CSS with link a "link rel"... 2. Can I reley upon Dreamweaver's CSS syntax checking to create my alternative/NN4 CSS? (i.e. DW will tell you if a particular attribute or style is or is-not supported by a certain browser.) 3. What is the best/fastest/your technique for building alternative style sheets (by alternative, I mean a style-sheet to feed to browsers like NN4)? 4. Should I be using the TAN hack for height also? Example: Code:
* html div { /* This is the Tan hack */
height: 130px;
hei\ght: 100px; }
/* the backslash cannot appear before the letters a to f, and A to F, and numerals 0 to 9 since doing so will turn those letters or numerals into hexadecimal numbers. */
5. (Last q) I am using an image replacement technique for my navigation (using one background sprite to create off/over/active states: INKNOISE)... It works great, except this: In Mozilla FF on PC when page loads, the background images do not ussually load... Anyone got a fix for that? Because I can't seem to find a fix, my best answer would be to create a PHP sniffer and force a page refresh. Thanks in advance! Cheers! Micky Hi, Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance. Here is the CSS code and Html code for your reference: CSS: Code:
<style type="text/css">
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}
.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}
.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}
HTML Code: Code: <table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;"> <tr> <td background="menubg.jpg" align="center"> <div class="horizontalcssmenu" align="center"> <ul> <li><a href="default.htm">Home</a></li> <li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> <li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> <li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> <li style="border-left:1px solid black"><a href="default.htm">Service</a></li> <li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> <li style="border-left:1px solid black"><a href="default.htm">References</a></li> <li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> <li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li> </ul> </div> </td> </tr> </table> Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated. i am trying to create a website and i know you can create backgrounds by going to photoshop and doing like a gradient with the image width of 1px and then place that into the css and it will repeat. i was wondering how can i make like an image as my background like 'http://fortysevenmedia.com/about/' i dont want it to be a background you create in photoshop and use background image and then it looks really weird repeating. i guess im wondering what other ways are there of making backgrounds for websites? This might be simple, and might not be. Ok, I'm a sort of CSS noob, so bear with me if this is simple I have 3 images that I created, and I plan to make a fluid layout with them. As you would expect, one is the top, one is the filler that expands, and one is the footer image. Now this would be raher simple to do, but there is one hard point: At the end of the whole layout, there is a gradient. This makes it look really cool in like login boxes(the image sizes are optimized for those), but that means that there is a large chunk of the footer where I want text to overlap from the content area. Is this possible? I will attach images if someone doesn't get my rambling I'm currently customizing a theme for a Drupal site and am having a bit of an issue with background images on some content. I have 1 class and an HTML element that I'm trying to apply the style to. I have a non-repeating background applied to the title class which is positioned to the left of the area. The second is a background I'm attempting to tile across the x-axis of the h2 element. This second background does not show while the first one is showing. Is there a way around this? I'm assuming that because it's the same element, I won't be able to get away with this and will have to find another solution. Here is my HTML Code: <h2 class="title"><a href="/drupal/node/1">Welcome to the Caustic Guild!</a></h2> CSS Code:
#mcol .title {
background: url(/drupal/themes/caustic/images/icon_post.gif) no-repeat 0px 2px;
}
#mcol h2{
background: url(/drupal/themes/caustic/images/mcol_head.jpg) repeat-x;
margin: 0px 0px 0px 0px;
padding: 2px 0px 6px 35px;
font-size: 180%;
letter-spacing: -1px;
text-align: left;
border: 3px solid #78788a;
}
Hi, I am trying to alternate 2 images for posts at a forum(in phpbb2) and i've applied the classes but it doesn't seem to take effect Here's the CSS : Code: /*
The original RockstarVO Theme for phpBB version 2+
Created by TK Creationz
*/
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #EDE4DB;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
/* General font families for common tags */
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif; }
a:link,a:active,a:visited { color : #0099FF; }
a:hover { text-decoration: underline; color : #DD6900; }
hr { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}
/* This is the border line & background colour round the entire page */
.bodyline { background-color: #EDE5DB; border: 1px #98AAB1 solid; }
/* This is the outline round the main forum tables */
.forumline { background-color: #F2EFE9; /* border: 2px #006699 solid; */ }
/* Main table cell colours and backgrounds */
td.row1 { background-color: #E8E8E8; }
td.row2 { background-color: #D8D8D8; }
td.row3 { background-color: #E0E0E0; /*#D1D7DC;*/ }
/*
This is for the table cell above the Topics, Post & Last posts on the index.php page
By default this is the fading out gradiated silver background.
However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
background-color: #0099FF;
background-image: url(images/Top_middle.jpg);
background-repeat: repeat-x;
}
/* Header cells - the blue gradient backgrounds */
th {
color: #000000; font-size: 11pt; font-weight : bold;
background-color: #D0D0D0; height: 25px;
/* background-image: url(images/Top_middle.jpg); */
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(images/Top_middle.jpg);
background-color: #0099FF;
background-repeat: repeat-x;
}
td.catBorder {
border-top: solid #0099FF 10px;
background: transparent;
}
td.catBMiddle {
background-image: url(images/Bottom_middle.jpg);
background-color: #0099FF;
background-repeat: repeat-x;
}
/*
Setting additional nice inner borders for the main table cells.
The names indicate which sides the border will be on.
Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; background-color: #D0D0D0; height: 28px; }
/* the last 3 rows */
td.row3Right,td.spaceRow {
background-color: #D1D7DC; border: #FFFFFF; border-style: solid; }
th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }
/* Post borders and corners */
td.postVerLCorners {
background-image: url("images/Post_left.gif");
background-repeat: repeat-y;
background-position: right;
padding: 0;
}
td.postVerRCorners {
background-image: url("images/Post_right.gif");
background-repeat: repeat-y;
background-position: left;
padding: 0;
}
td.postHorTCorners {
background-image: url("images/Post_top.gif");
background-repeat: repeat-x;
background-position: bottom;
padding: 0;
}
td.postHorBCorners {
background-image: url("images/Post_bottom.gif");
background-repeat: repeat-x;
background-position: top;
padding: 0;
}
/* Post table fill color */
td.posttdColor {
background-color: #F3EDE5;
}
th.postthColor {
background-color: #F3EDE5;
}
.postColor {
background-color: #F2EFE9;
}
td.postColorRow1 {
background-color: #F2EFE9;
background-image: url("images/03.png");
background-position: bottom right;
background-repeat: no-repeat;
}
td.postColorRow2 {
background-color: #F2EFE9;
background-image: url("images/09.png");
background-position: bottom right;
background-repeat: no-repeat;
}
/* The largest text used in the index page title and toptic title etc. */
.maintitle,h1,h2 {
font-weight: bold; font-size: 20px; font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; line-height : 120%; color : #000000;
}
/* General text */
.gen { font-size : 12pt; }
.genmed { font-size : 10pt; }
.gensmall { font-size : 10pt; }
.gen,.genmed,.gensmall { color : #585858; }
a.gen,a.genmed,a.gensmall { color: #0099FF; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #00CCFF; text-decoration: underline; }
/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #006699; }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }
/* Forum category titles */
.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.cattitle { text-decoration: none; color : #FFFFFF; }
a.cattitle:hover{ text-decoration: underline; color: #FF6600; }
/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: 10pt; color : #0099FF; }
a.forumlink { text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #43C6DB; }
/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: 11px; color : #000000;}
a.nav { text-decoration: none; color : #006699; }
a.nav:hover { text-decoration: underline; }
/* titles for the topics: could specify viewed link colour too */
.topictitle { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover { text-decoration: underline; color : #DD6900; }
/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 11px; color : #000000;}
/* Location, number of posts, post date etc */
.postdetails { font-size : 10px; color : #000000; }
/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link { text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}
/* Quote & Code blocks */
.code {
font-family: Arial, Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
/* Copyright and bottom info */
.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
a.copyright { color: #444444; text-decoration: none;}
a.copyright:hover { color: #000000; text-decoration: underline;}
/* Form elements */
input,textarea, select {
color : #000000;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
border-color : #000000;
}
/* The text input fields background colour */
input.post, textarea.post, select {
background-color : #FFFFFF;
}
input { text-indent : 2px; }
/* The buttons used for bbCode styling in message post */
input.button {
background-color : #EFEFEF;
color : #000000;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The main submit button option */
input.mainoption {
background-color : #FAFAFA;
font-weight : bold;
}
/* None-bold submit button */
input.liteoption {
background-color : #FAFAFA;
font-weight : normal;
}
/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
*/
.helpline { background-color: #DEE3E7; border-style: none; }
/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");
Here's the view_topic_body.tpl code : PHP Code: <link href="Rockstar02.css" rel="stylesheet" type="text/css" /> <table width="100%" cellspacing="2" cellpadding="2" border="0"> <tr> <td align="left" valign="bottom" colspan="2"><a class="maintitle" href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a><br /> <span class="gensmall"><b>{PAGINATION}</b><br /> </span></td> </tr> </table> <table width="100%" cellspacing="2" cellpadding="2" border="0"> <tr> <td align="left" valign="middle" width="43%"><span class="nav"> <a href="{U_INDEX}" class="nav">{L_INDEX}</a> -> <a href="{U_VIEW_FORUM}" class="nav">{FORUM_NAME}</a></span></td> <td width="8%" align="right" valign="middle" nowrap="nowrap"><span class="nav"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" align="middle" /></a> <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" border="0" alt="{L_POST_REPLY_TOPIC}" align="middle" /></a></span></td> </tr> <tr> <td align="right" valign="middle" width="100%" colspan="2"><span class="nav"><a href="{U_VIEW_OLDER_TOPIC}" class="nav">{L_VIEW_PREVIOUS_TOPIC}</a> :: <a href="{U_VIEW_NEWER_TOPIC}" class="nav">{L_VIEW_NEXT_TOPIC}</a> </span></td> </tr> </table> <table width="145%" cellspacing="0" cellpadding="0" border="0"> <tr align="right"> <td class="catHead" width="20" align="left" valign="top"><img src="templates/myfs_trupti2/images/Top_blueLeft.jpg" width="11" height="44" /></td> <td height="44" colspan="2" align="left" valign="middle" class="catHead"> <a class="cattitle" href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a></td> <td class="catHead" height="44" align="left" valign="top"><img src="templates/myfs_trupti2/images/Top_blueRight.jpg" width="20" height="44" align="right" valign="top" /></td> </tr> <tr align="right"> <td height="20" colspan="4" align="left" valign="top" style="background: transparent;"> </td> </tr> {POLL_DISPLAY} <!-- BEGIN postrow --> <tr> <td class="postVerLCorners" nowrap="nowrap" width="20" align="right" valign="bottom"><img src="templates/myfs_trupti2/images/Post_TopLeftCorner.jpg" width="20" height="20" align="right" valign="bottom" /></td> <td class="postHorTCorners" nowrap="nowrap" height="20" width="150" align="right" valign="bottom"></td> <td height="20" colspan="1" nowrap="nowrap" class="postHorTCorners"> </td> <td nowrap="nowrap" width="20" height="20" align="left" valign="bottom"><img src="templates/myfs_trupti2/images/Post_TopRightCorner.jpg" width="20" height="20" align="left" valign="bottom" /> </td> </td> </tr> <tr> <td width="20" class="postVerLCorners"> </td> <td class="posttdColor" width="150" height="200" align="left" valign="top"><span class="name"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></span><br /><span class="postdetails">{postrow.POSTER_RANK}<br />{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}<br /><br />{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />{postrow.POSTER_FROM}</span><br /></td> <td class="{postrow.ROW_CLASS}" width="100%" height="28" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="posttdColor" width="100%"><a href="{postrow.U_MINI_POST}"><img src="{postrow.MINI_POST_IMG}" width="12" height="9" alt="{postrow.L_MINI_POST_ALT}" title="{postrow.L_MINI_POST_ALT}" border="0" /></a><span class="postdetails">{L_POSTED}: {postrow.POST_DATE}<span class="gen"> </span> {L_POST_SUBJECT}: {postrow.POST_SUBJECT}</span></td> <td class="posttdColor" valign="top" nowrap="nowrap">{postrow.QUOTE_IMG} {postrow.EDIT_IMG} {postrow.DELETE_IMG} {postrow.IP_IMG}</td> </tr> <tr> <td class="posttdColor" colspan="2"><hr /></td> </tr> <tr> <td class="{postrow.ROW_CLASS}" height="200" align="left" valign="top" colspan="2"><span class="postbody">{postrow.MESSAGE}{postrow.SIGNATURE}</span><span class="gensmall">{postrow.EDITED_MESSAGE}</span></td> </tr> </table></td> <td class="postVerRCorners" width="20"> </td> </tr> <tr> <td class="postVerLCorners" width="20"> </td> <td class="posttdColor" width="150" align="left" valign="middle"><span class="nav"><a href="#top" class="nav">{L_BACK_TO_TOP}</a></span></td> <td class="posttdColor" width="100%" height="28" valign="bottom" nowrap="nowrap"><table cellspacing="0" cellpadding="0" border="0" height="18" width="18"> <tr> <td class="posttdColor" valign="middle" nowrap="nowrap">{postrow.PROFILE_IMG} {postrow.PM_IMG} {postrow.EMAIL_IMG} {postrow.WWW_IMG} {postrow.AIM_IMG} {postrow.YIM_IMG} {postrow.MSN_IMG}<script language="JavaScript" type="text/javascript"><!-- if ( navigator.userAgent.toLowerCase().indexOf('mozilla') != -1 && navigator.userAgent.indexOf('5.') == -1 && navigator.userAgent.indexOf('6.') == -1 ) document.write(' {postrow.ICQ_IMG}'); else document.write('</td><td class="posttdColor"> </td><td class="posttdColor" valign="top" nowrap="nowrap"><div style="position:relative"><div style="position:absolute">{postrow.ICQ_IMG}</div><div style="position:absolute;left:3px;top:-1px">{postrow.ICQ_STATUS_IMG}</div></div>'); //--></script><noscript>{postrow.ICQ_IMG}</noscript></td> </tr> </table></td> <td class="postVerRCorners" nowrap="nowrap" width="20"> </td> </tr> <tr> <td class="postVerLCorners" width="20" height="20" align="right" valign="top"><img src="templates/myfs_trupti2/images/Post_BottomLeftCorner.jpg" width="20" height="20" align="right" valign="top" /></td> <td class="postHorBCorners" align="left" valign="middle"> </td> <td class="postHorBCorners" height="20" valign="bottom" nowrap="nowrap"> </td> <td class="postVerRCorners" nowrap="nowrap"><img src="templates/myfs_trupti2/images/Post_BottomRightCorner.jpg" width="20" height="20" align="left" valign="top" /></td> </tr> <tr> <td colspan="4" height="10" border="10"> </td> </tr> <!-- END postrow --> <tr align="center"> <td class="catBottom" colspan="4" height="28"><table cellspacing="0" cellpadding="0" border="0"> <tr><form method="post" action="{S_POST_DAYS_ACTION}"> <td align="center"><span class="gensmall">{L_DISPLAY_POSTS}: {S_SELECT_POST_DAYS} {S_SELECT_POST_ORDER} <input type="submit" value="{L_GO}" class="liteoption" name="submit" /></span></td> </form></tr> </table></td> </tr> </table> <table width="100%" cellspacing="2" cellpadding="2" border="0" align="center"> <tr> <td align="left" valign="middle" nowrap="nowrap"><span class="nav"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" align="middle" /></a> <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" border="0" alt="{L_POST_REPLY_TOPIC}" align="middle" /></a></span></td> <td align="left" valign="middle" width="100%"><span class="nav"> <a href="{U_INDEX}" class="nav">{L_INDEX}</a> -> <a href="{U_VIEW_FORUM}" class="nav">{FORUM_NAME}</a></span></td> <td align="right" valign="top" nowrap="nowrap"><span class="gensmall">{S_TIMEZONE}</span><br /><span class="nav">{PAGINATION}</span> </td> </tr> <tr> <td align="left" colspan="3"><span class="nav">{PAGE_NUMBER}</span></td> </tr> </table> <table width="100%" cellspacing="2" border="0" align="center"> <tr> <td width="40%" valign="top" nowrap="nowrap" align="left"><span class="gensmall">{S_WATCH_TOPIC}</span><br /> <br /> {S_TOPIC_ADMIN}</td> <td align="right" valign="top" nowrap="nowrap">{JUMPBOX}<span class="gensmall">{S_AUTH_LIST}</span></td> </tr> </table> Here's the link to my forum : My Forum P.S: when i refresh the topic page on the site and 'View Source' it does show that the classes(postColorRow1 & postColorRow2) set for the background image change are alternating, but CSS does not take effect. Please help. I would like to do the following on a web page but not sure how. Tried a few things but it didnt display what I was hoping for... I want essentially a 3 layered background image. The main background is one image that is tiled in all directions The second image is tiled in x but attached to the top of the screen The third image is the same as the second image but attached to the bottom of the screen. Over the top of this I want to use html tables and have the background displayed through the empty table cells. Is this possible? Any help appreciated Hi - I'm playing with the Css Zen Garden example. I'm basically trying to do a real simple layout - semi-transparent boxes, that switch from a background image to a solid color when the mouse hovers. On firefox, its working pretty much the way I want. IE pretty much completely chokes though, and I can't figure out why - it doesn't want to apply background images or colors to the <div>'s. My example is he http://kc9ddi.poromenos.org/zen and the style sheet is at http://kc9ddi.poromenos.org/zen/sample.css I can't figure out what IE's doing with the background colors and images. I'd appreciate any help anyone would offer. Here's an example of css for a div Code:
#preamble {
border-style: groove;
border-width: 0.2ex;
border-color: blue;
padding: 0px 1ex;
background: url(grad1.png) #ADD8E6;
opacity: .50;
filter: alpha(opacity=50);
zoom: 1;
}
#preamble:hover {
background: #ADD8E6;
}
Hello all, Wondering if those of you who love netscape more than I do can help me, This is a little css script to get a bg image to show in the top right hand corner of a table the table Its called from <td class="rightnav"> Is there something that I i have done that makes netscape not display the image? I'm resonably new to Css, but I have a pretty good handle on it, just not with what netscape supports. Does it have to be called in a <p> tag? I have tried this and a <Div> tag but it wont display, but in Explorer it is fine ... I'd apreciate any suggestions its really frustrating .rightnav { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; background-image: url(images/continued.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: top right; height: 100%; white-space: normal; display: block; overflow: hidden; } any help apreciated =) - Shell. I am creating my layout using div's but they are not showing up in my browser. Can you see anything in my code that looks wrong? Thanks for your help! HERE'S MY HTML FILE...... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/strict.dtd"> <HTML> <HEAD> <title>PDV TV</title> <LINK REL="stylesheet" TYPE="text/css" HREF="styles/style.css"> </HEAD> <BODY> <!-- TOP --> <DIV CLASS="layout_top"> </DIV> <!-- MAIN --> <DIV CLASS="layout_main"> </DIV> <!-- BOTTOM --> <DIV CLASS="layout_bottom"> </DIV> <!-- FOOTER --> <DIV CLASS="layout_footer"> </DIV> </BODY> </HTML> HERE'S MY CSS FILE...... Code:
/* GENERAL
-----------------------------------*/
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
font-family: Arial;
font-size: 14px;
color: #000000;
}
img {
border: 0px;
}
p {
padding: 0px;
margin: 0px;
}
a {
color: #2f2613;
text-decoration: none;
}
a:hover {
color: #2f2613;
text-decoration: underline;
}
.eventDate {
padding-bottom: 10px;
}
.textElement ul {
list-style-type: disc;
}
.textElement li {
padding-bottom: 5px;
margin: 0px;
list-style: normal;
}
.eventsList .eventDate {
display: normal;
}
h1, h2, h3, h4, h5, h6 {
padding: 0px;
margin: 0px;
font-size: 16px;
}
.iframe {
background: transparent;
}
.clear {
clear: both;
}
.tab .element {
margin-bottom: 15px;
}
.fieldSelected {
border: 0px solid #111111 !important;
background-color: #d1cdb1 !important;
}
.textElement {
margin-bottom: 20px;
}
.title {
margin-bottom: 5px;
}
/* LAYOUT
-----------------------------------*/
.layout_top {
width: 100%;
height: 41px;
margin: 0px auto;
background-image: url(images/top_bg.jpg);
background-position: top;
background-repeat: repeat-x;
}
layout_main {
width: 100%;
height: 500px;
margin: 0px auto;
background-image: url(images/main_bg.jpg);
background-position: top;
background-repeat: repeat-x;
}
layout_bottom {
width: 100%;
height: 264px;
margin: 0px auto;
background-image: url(images/bottom_bg.jpg);
background-position: top;
background-repeat: repeat-x;
}
layout_footer {
width: 100%;
height: 30px;
margin: 0px auto;
background-image: url(images/footer_bg.jpg);
background-position: top;
background-repeat: repeat-x;
}
At the moment, my BODY tag contains the following CSS: Code:
BODY {
background: url(images/gradients/bg_top.jpg);
background-repeat: repeat-x;
}
The bg_top.jpg file is an image 200px high, and 3px wide. This displays nicely at the top of my page. It is a gradient from dark grey which fades out to a pattern of simple squares. I would then like these squares to be repeated across the whole of my background. What I wanted to do was to set a second background image that would display underneath the gradient, but this didn't appear to work. Looking around Google, it appears that you can only set the one background for the body tag. Is this the case? If so, is it possible to set it up so that the square pattern repeats itself across the whole page, but underneath the gradient at the top? Many thanks. |
|||||||