|
CSS - Help With Css: Backgrounds, Overflow Etc
Hi,
I'm trying to do a design with: http://xlibrisclients.co.uk/flybynite/new/V1.htm in mind. I want the content to have a scrollbar if content goes off the page... basically want to achieve the look and feel of a frame base site such as: http://www.flybynite.co.uk/website/ but only using CSS and tables. Please help! Janusz Similar TutorialsMy CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } 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 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;
}
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. 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;
}
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've just installed a HTML Doctype declaration after having issues making my webpage work on Firefox and IE. After installing the declaration, the colour of my top nav-bar refuses to change... it stays white, and the text, unreadable. This happens on IE and Opera, but works fine with Firefox. I've also been recieving complaints that my page is non-functioning with the font appearing "way too small". If anyone can give me any ideas, and also point out a simple explanation of the difference between the box model and the W3 layout model, I'd be grateful... Thanks for the advice people gave me last time; I at least managed to get the page working with Firefox... Link to page I'm working on my personal website and needed something quick so I found a free template I liked and started changing things as needed. The way the header works is it uses a background img for the nav so it displays off both sides of the browser. This image scrolls up as the page does. To make it look more interesting I wanted to add a simple background image to visually box in the content... but I need this one to be fixed. Every solution I've tried doesn't seem to work. I'm posting separate test links with a description why its not working. (I'm a new user so you'll have to copy/paste links. Figured it'd be easier for you to see it than post 8 different code tags). First thing's first: Images I'm moving around a bg_boarder.jpg and bg_general.jpg bradyoo.com/test.html Both bg imgs in body {} - boarder img scrolls. bradyoo.com/test02.html Boarder img fixed in wrapper {} - boarder img displays on top of bg_general by YO logo. bradyoo.com/tes03t.html Boarder img fixed in body {}, general img in header{} - General image doesn't display beyond wrapper. I even tried fixing everything (not the optimal result, but I will use it if this is the only solution) bradyoo.com/test04.html Both bg fixed in body {}, position: fixed in header {} - I added the fixed position in the header to keep the nav from scrolling but the embeded content displays on top of the header when scrolling. 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 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;
}
I am having quite a time finding out if it's possible to use the AlphaImageLoader hacks on a png to make it a background image. I need this for drop shadows on a gradient page background. I have found a site that does have working png transparent backgrounds he http://thedesignspace.net/css/transparentPNG.htm For some reason, even though my code is basically the same with the image location changed, it fails to work for me, while that page does. My code can be seen at http://codymays.net/~private_ftp/theed. If you look at the source you'll see the IE specific css file. Works fine in opera/ff. Any help would be greatly appreciated. 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. Hey all I'm a web programmer and a moderately skilled web designer, and I've got a bit of a problem. I assist in running a forum at midnafanforum.com and I was asked quite a while ago to set it up so a border ran down either side - this down the left side and this down the right. The images should repeat for as long as the page goes on for (it has a varying height, depending on the main content). The temporary solution we've used is this -one image containing both sides of the background, and whilst on one fairly uncommon resolution of 1400x3200 this looks fine, obviously on all others it looks stupid. Any help would be much appreciated - considering I'm not very experienced in CSS it'd be helpful if the code itself could be given, or I could at least be walked through fixing this. Thanks in advance Cheeseweasel EDIT: How annoying, URLs are blocked. midna fan forum dot com is the address. I swear I'm not spamming for more traffic, honestly. Drumroll, almost. Scrolling image, image swap, and css image backgrounds. This one is working almost exactly as I would like for it to in IE and FF. http://www.mtn.ncahec.org/web/grace/bagwell/test5.asp But, if you scroll down, why are the backgrounds not going all the way to the bottom in FF? Starts acting weird around item 29...... Works fine in IE6. Thank you, thank you, please, please? Janet Hi, I have a design that uses "rounded tabs", however each tab is a different size, so I cannot just use a standard-sized tab background image. Is there a way I can use a left rounded image and right rounded image with the middle a solid colour as a background instead of inline images? Thanks! I am trying to use divs to create multiple backgrounds for my site. One on top of the other. Specifically, I want 3, but I will settle for 2. The problem is that when I try to create container divs and add backgrounds, nothing happens. I think this is because there is no content so the div remains collapsed. However, if I add a width or height, it does not stretch out for all resolutions. If I use 100% for the width, it does nothing. I really need some help! Thanks! Code: body {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
background-color:#DADADA;
background-image: url(images/metal9.jpg);
background-repeat: repeat;
}
img {
margin:0px;
padding:0px;
border:0px;
display:block;
}
a {
color:#3366CC;
}
a:link {
color:#3366CC;
}
a:visited {
color:#Browser Default;
}
a:hover {
color:#Browser Default;
}
.bigbox {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
margin:0px;
padding:0px;
background-image: url(images/fade.png);
background-repeat: repeat-x;
}
.outerbox {
position:absolute;
top:0px;
left:0px;
width:100%;
background-image: url(images/topbanner.gif);
background-repeat: repeat-x;
}
.mainbox {
position: absolute;
top:70px;
left:390px;
width:650px;
border:1px solid #000000;
background-color:#FFFFFF;
padding-left:50px;
padding-right:50px;
padding-top:25px;
padding-bottom:5px;
}
.headtext {
overflow:hidden;
font-size: 24px;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
text-align: center;
}
CSS Code: Original - CSS Code #leftSide { position: absolute; height: 100%; width: 155px; top: 0px; left: 0px; background-image: url("../Images/SideImages/left.gif"); background-repeat: repeat-y; z-index: 0; } #rightSide { position: absolute; height: 100%; width: 115px; top: 0px; right: 0px; background-image: url("../Images/SideImages/right.gif"); background-repeat: repeat-y; z-index: 0; }
In EVERY OTHER BROSWER, that code makes a background repeat. No how in the world do I make IE repeat my background. Is the background-repeat: repeat-y; making the difference? I hate IE. Hi all! I've got a slight problem with my div layout, and seem to be stuck, maybe one here has had similar troubles, and found a solution *g* I've got a Layout, that needs the following things: *) repeat-y background image for a parchment background *) header and footer images for the beginning and end of the parchment *) text that flows over the parchment, header and footer images Normally I'd just put the parchment in a parent div, put the header and footer in another div (contained in the parent div) and put the text in another div with biggest z-index (also contained in parent div). Unfortunately, as the text needs to stretch the parent div so that the parchment background is behind the whole text, I can not set the text div as position absolute, 'cause absolute divs don't expand their parents. I also can not position the header and footer divs without position absolute. But position absolute divs are always above non absolute divs, even is z-index is set higher in the non absolute divs. Is there anything i miss? Is it simply not possible? Thanks in advance! Roman Hello Everyone, First post here. I tried to research my issue within the forums first but there is just too much going on and I didn't find my exact scenario. I actually had this problem with another project and I tried to simplify everything for posting purposes. I came pretty close. however, with my initial problem IE was displaying the desired result and FF wasn't. In this situation neither are showing the desired result. The Prob: I have four divs and a body tag that I have used in CSS. My problem is that my content and sidebar boxes are showing up, but the container and menu divs, which the content and sidebar are nested within, aren't showing up. I have tried many different options with the positioning. Currently I am assigning absolute to the content and sidebar and relative to the container. I thought I had the correct understanding of relative and absolute positioning, but I am not getting the results I was hoping for. I want to see all four divs: menu, container, content, sidebar. They are all represented by a different color. Menu should fill the whole screen, container should be centered 974 px wide and the content and sidebar showing within the container. The code: Code: @charset "utf-8";
/* CSS Document */
#menu {
background-color: #693;
height: 100%;
width: 100%;
margin: 0px;
}
body {
margin: 0px;
}
#container {
width: 974px;
margin-right: auto;
margin-left: auto;
background-color: #C00;
position: relative;
}
#content {
background-color: #FF6;
width: 770px;
padding-right: 5px;
padding-left: 5px;
position: absolute;
left: 2px;
top: 2px;
}
#sidebar {
background-color: #009;
width: 180px;
padding-right: 5px;
padding-left: 5px;
position: absolute;
top: 2px;
right: 2px;
}
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=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<div id="container">
<div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis.</p>
</div><!--content-->
<div id="sidebar"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis.</p>
</div><!--sidebar-->
</div><!--container-->
</div><!--menu-->
</body>
</html>
my site is www . becomeacheapskate . com / test Any and all help would be greatly appreciated. Thanks Ripeffect |
|||||||