|
CSS - Repeating Image On Top Of Webpage
I have a QA site where I want to have a very translucent image displayed over the entire page to help our testers more visually recognize that the site they are on is not production (or worse thinking they are on QA when they are on production). My initial idea was to create a fixed position div with a repeating background images. While this visually accomplished what I want, it ends up masking the entire site, making it impossible to click on any links that are displayed underneath the QA images.
What is the best way to do this (sans javascript)? Any help is much appreciated. Similar TutorialsHi. I would like to repeat a small slice the entire length of a <div> column, however when I try to do so, the final results show just a white column where the image should be. Does anyone know how to fix this? The image is transparent so that you can still see the background behind it. Ok.. I couldn't find anything on this so figured i'd see if ya knew if either of these were possible using CSS (or any other mean): a) Can you set a background image to repeat a certain number of times? or b) Can you set a background image to repeat only if it will fit the entire image in the space that remains... (for example, I have a small image that I would like to just repeat 4 or 5 times, but dont want it to be cut off if it can only fit like 4 and a half of the images) Thanks. Please take a look at my site: http://unoriginalblog.com I want to fill the space below my navigation sidebar with a repeating image div that would grow with the content. How would I achieve this? At the moment the div works like this: Code: <div id="page"> <div id="header"> header img... </div> <div id="content"> main blog bit. </div> <div id="sidebar"> navigation bar </div> <div id="footer"> footer... </div> </div> and the css: (only the relevent bits...wordpress divides ids/classes by layout/font/etc etc) Code:
#page {
margin: 0px auto 0px;
padding: 0;
width: 760px;
}
#header {
padding: 0;
margin: 0 auto;
height: 200px;
width: 100%;
}
#content{
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 490px;
}
#sidebar{
margin: 5px 10px 10px 10px;
padding: 10px 0 10px 10px;
margin-left: 565px;
width: 170px;
}
#footer {
padding: 0px;
margin: 0 auto 0px;
/* for some reason, it has to be 761px so that the whole page is aligned in ie.. firefox works both ways, 760 or 761 */
width: 761px;
height: 100px;
clear: both;
}
perhaps... i can set the bg of the #page as a repeating bg image and the sidebar bg white?... but then how can I make sure that the repeating image blends nicely? is there another way to make it so that I don't have to use bg images in #page? Thanks for the help Here is what I have as a test my CSS page has Code:
body {
margin: 4px 0px;
padding: 0px;
background-color: #000000;
}
.header {
background-image: url(images/back.gif);
background-repeat: repeat-x;
height:197px
width:100%;
margin-top :0px;
}
and my header page that I want to include in all of my pages looks like this for now Code: <div class="header">
<img src="images/logos.gif" width="750" height="197">
</div>
I want the logos.gif image to sit in the upper left and the back.gif image to repeat behind it so it looks seamless. I thought this would be a super easy task but right now, with the above code all I get is the logos.gif and no back.gif image. My path to image is correct. I even commented out the logos.gif just so I had a blank canvas and nothing. Thanks for any help on this. i have a background image and its all fine untill you have too much information on the page and then it repeats itself. i know the reason it does that is because the image has a certain height and that height has been reached. i was wondering is there a way around that? my background fades in to black and i just want the black to continue. here is an example of my problem. http://www.bleanphotos.co.uk/image.php?id=3 thanks for reading I've got a problem with a site I'm developing. I want to repeat-x a body background pattern, but the problem is that it overlays another version of itself just where my container div starts. Anyone know what's going on here? Code: html, body{
background-color:#AFC4E2;
background-image:url(bgmew.jpg);background-position: top center;
background-repeat:repeat-x;
color:#234;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:100%;
text-align:center;
}
a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
color:#678;
text-decoration:none;
font-weight:bold;
background:inherit;
}
a:hover, a:active{text-decoration:underline;}
p{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
font-weight:normal;
color:#234;
background:inherit;
}
#container{
width:760px;
height:auto;
background-color:#FFFFFF;
color:#234;
border:2px solid #999;
padding:10px;
margin: 50px auto;
text-align:left;
}
ajarnforumDOTnet/erwinsample/ Thanks for any help you can give me. I have a page setup like this.... <table height="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td valign="top" class="lt_bar"><img src="template/blue_234/images/lt_shd.jpg" /></td> <td valign="top"></td> <td valign="top" class="rt_bar"><img src="template/blue_234/images/rt_shd.jpg" /></td> </tr> </table> and: .lt_bar { width: 27px; background-image: url("images/lt_shd.jpg"); background-repeat: repeat-y; float: left } .rt_bar { width: 27px; background-image: url("images/rt_shd.jpg"); background-repeat: repeat-y; float: right; } In IE all is fine, in FireFox the right side shows, the left side does not. any clues... Hi there, I'm trying to position a background image (starting 756 pixels from the left) which is repeating horizontally - but of course am running into problems because as soon as you repeat-x an image repeats the whole screen, not taking into account background positions. Does anyone have any ideas how I can possibly avoid this?! The only thing I can think of is to create a huge image to factor in for all screen solutions, and just not repeat it at all. I'd prefer not to do it this way as firstly it's not very clean, and secondly it will result in a large file size. Here is a link to the background image to show you what I'm talking about: http://joshsphotos.com/images/bg.jpg I've also put in the CSS that would show what I'm trying to achieve. Code:
body {
background-image: url(../images/bg_repeat.jpg);
background-position: 756px 0px;
background-repeat: repeat-x;
}
Any help would be most appreciated. Hello all - I am currently having a problem with a background image not being repeated properly. There are two images that need to be repeated, div#topbg and div#leftbg. Topbg is being repeated-x correctly, but I am having problem with Leftbg being repeated-y. The Leftbg will repeat vertically but stops repeating until it reaches the end of the background image of div#wrapper. Could someone provide a solution to this? I need it to repeat all the way down the page! Here is the code for those that know of a simple solution. For those that need to look a bit more into it I have included a zip file as attachment to show just exactly what is wrong.. Please help! The CSS code: Code:
html, body
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
font : 12px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}
div#topbg
{
width: 100%;
height: 145px;
background : url(../images/top-bg.gif) repeat-x top left;
}
div#leftbg
{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
background : url(../images/left-bg.gif) repeat-y;
}
div#wrapper
{
position: absolute;
top: 0px;
left: 0px;
width: 758px;
height: 100%;
margin: 0px;
padding: 0px;
background: url(../images/bg.jpg) no-repeat top left;
}
div#container
{
padding: 145px 0px 0px 125px;
}
div#content
{
width: 100%;
margin: 0px;
padding: 0px;
float: left;
}
The HTML code: Code: <body> <div id="topbg"></div> <div id="leftbg"></div> <div id="wrapper"> <div id="container"> <div id="text">content</div> </div> </div> I am having trouble with placing an image on my page and having that image repeat itself all the way down the page. Code: <div id=left> ........ content ...</div> <div id="image">this is where i want the image</div> <div id="content">content here</div> Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code Code:
#left {
position: absolute;
left: 0px;
width: 215px;
background-color: #efefef;
border: 1px dotted #ccc;
}
#image1 {
background-image: url("http://mydomain.com/image.jpg")
background-repeat: repeat-y;
width: 15px;
margin-left: 215px;
}
#center {
margin-left: 260px;
margin-right: 0px;
overflow: hidden;
}
The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page Cheers I've got a problem with a site I'm developing. I want to repeat-x a body background pattern, but the problem is that it overlays another version of itself just where my container div starts. Anyone know what's going on here? Code: html, body{
background-color:#AFC4E2;
background-image:url(bgmew.jpg);background-position: top center;
background-repeat:repeat-x;
color:#234;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:100%;
text-align:center;
}
a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
color:#678;
text-decoration:none;
font-weight:bold;
background:inherit;
}
a:hover, a:active{text-decoration:underline;}
p{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
font-weight:normal;
color:#234;
background:inherit;
}
#container{
width:760px;
height:auto;
background-color:#FFFFFF;
color:#234;
border:2px solid #999;
padding:10px;
margin: 50px auto;
text-align:left;
}
(URL address blocked: See forum rules)/erwinsample/ Thanks for any help you can give me. Hi I have created a webpage using CSS image pop-outs. The three different images are hosted on imageshack. However, the three text links I have for the three different images only direct to the first image - the other two will load the incorrect image, a copy of the first. Here's the website: westside dot org/give Here's the code: <img src="(url)"> <img src="(url)"> <style type="text/css"> <!-- .fontz { font-family: Palatino Linotype, Book Antiqua, Palatino, serif; } .a { font-family: Palatino Linotype, Book Antiqua, Palatino, serif; } .a { font-size: 14px; } .a strong { font-size: 16px; } --> </style> <span class="a"><strong><font size="5"><br> <font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">Why We Give</span></a> </font> </font></strong><font size="5"> </font></span><font size="5"> <div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;"> <span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(URL um rules)"> <br> </font> </strong> </span> <div class="a" style="text-align: right;"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></font></strong></div> </div> <span class="a"><strong><br> <br> <font size="5"> <font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">How to Give</span></a> </font> </font></strong><font size="5"> </font></span><font size="5"> <div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;"> <span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(URL rules)"> <br> </font> </strong> </span> <div class="a" style="text-align: right;"><font face="Bookman Old Style, Book Antiqua, Garamond"><strong><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></strong></font></div> </div> <span class="a"><strong><br> <br> <font size="5"> <font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">Other Ways to Give</span></a> </font> </font></strong><font size="5"> </font></span><font size="5"> <div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;"> <span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(m rules)"> <br> </font> </strong> </span> <div class="a" style="text-align: right;"><font face="Bookman Old Style, Book Antiqua, Garamond"><strong><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></strong></font></div> </div> <span class="a"><strong><br> </strong></span><br> </font></font></font></font><p></p></font></font> Thanks! I'm trying to get a background image/color to repeat down the left hand column of a site, he http:// www. lisaannschleipfer .com, but can't seem to get it working in either FF or IE. You'll notice that in the left hand column, the tannish color does not repeat all the way down the column. I'm fairly certain I've narrowed it down to the bit of CSS code he Code: div#wrapper {
margin: auto;
width:800px;
background: #d1c8ab url(../images/wrapper_bg.jpg);
background-repeat: repeat-y;
}
I've tried looking around the forum for some solutions, and have found a few possibilities (height: auto, overflow: auto, etc), but nothing that I have tried to insert into the stylesheet has seemed to work. Does anyone have any suggestions or solutions? I'd appreciate it! Here's the entire stylesheet, for reference: Code: html {
height: 100%;
margin-bottom: 0px;
}
form {
margin: 0;
padding: 0;
}
img,table {
border:none;
}
table td {
vertical-align:top;
}
body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #666666;
background: #0d789c url(../images/bg.jpg) top center repeat-x;
}
a:link, a:visited {
text-decoration: none;
font-weight: normal;
color: #0d789c;
}
a:hover {
text-decoration: underline;
font-weight: normal;
color: #0d789c;
}
input.button {
cursor: pointer;
vertical-align: bottom;
border: 0px;
background:none;
}
p {
margin-top: 0;
margin-bottom: 5px;
text-align:justify;
}
/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#header {
margin:0 auto;
width:940px;
}
.left_bg {
background: transparent url(../images/left_bg.jpg) top right no-repeat;
width:70px;
}
.middle_bg {
background: transparent url(../images/.jpg) top right no-repeat;
width:800px;
}
.right_bg {
background: transparent url(../images/right_bg.jpg) top left no-repeat;
width:70px;
}
.top_bg {
background: transparent url(../images/top_bg.jpg) top center no-repeat;
width:800px;
height:45px;
}
.rightside {
background: transparent url(../images/rightside_bg.jpg) top center no-repeat;
width:185px;
height:173px;
}
.header_bg {
background: transparent url(../images/header_bg.jpg) top center no-repeat;
width:615px;
height:173px;
}
#page_bg {
padding: 0;
margin:0px auto;
}
#top {
width:800px;
margin:0 auto;
padding:0;
}
div.center {
padding:0;
}
div#wrapper {
margin: auto;
width:800px;
background: #d1c8ab url(../images/wrapper_bg.jpg);
background-repeat: repeat-y;
}
#logo {
padding:47px 50px 0 50px;
height:100px;
text-align:left;
margin:0 auto;
}
#logo a, #logo a:link, #logo a:hover {
font-weight: normal;
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 36px;
padding:0px;
margin:0;
line-height:1.4em;
letter-spacing:2px;
color:#fefefe;
text-decoration:none;
}
div.newsflash {
height:150px;
padding:10px;
overflow: hidden;
color:#fff;
text-align:left;
}
div#tabarea {
margin: 0;
width:615px;
height:26px;
text-align:left;
}
#footer {
width:800px;
margin:0 auto;
}
.validation {
float:right;
padding:8px 20px 0 0;
}
#footer .footer {
background: transparent url(../images/footer.jpg) top center no-repeat;
height:28px;
width:800px;
}
#pathway {
padding: 0px 10px 8px;
width: auto;
margin-right: 250px;
text-align: left;
}
#search {
float: right;
width:320px;
margin-top: -20px;
margin-right: 20px;
height: 40px;
overflow: hidden;
text-align:right;
}
#area {
padding: 0;
width:100%;
/* color:#d1c8ab; */
}
#whitebox {
margin: 0;
width: auto;
}
#whitebox div {
text-align: left;
}
#whitebox_br {
height: 13px;
background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}
/* horizontal pill menu */
.pill {
margin:0px 0 0 1px;
text-align:left;
}
td.pill_m {
padding: 0;
margin: 0 10px;
width: auto;
text-align:center;
}
#pillmenu {
white-space: nowrap;
height: 26px;
float: left;
}
#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}
#pillmenu li {
float: left;
margin: 0px 1px 0 0;
padding: 0;
background: transparent;
}
#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 2px 10px 0 10px;
color: #fff;
text-decoration: none;
background: transparent;
}
#pillmenu a:hover {
text-decoration: underline;
}
#pillmenu a#active_menu-nav {
color: #fff;
background: url(../images/active_arrow.gif) top center no-repeat;
}
#pillmenu a#active_menu-nav:hover {
color: #fff;
}
#leftcolumn {
margin: 0;
text-align:left;
width: 221px;
float:left;
background: #d1c8ab url(../images/leftcol_bg.jpg) top left no-repeat;
}
div#maincolumnfull {
padding:2px 10px;
float:left;
width: 760px;
}
div#maincolumn {
padding:20px 10px;
float:left;
width: 559px;
background: #ffffff url(../images/maincol_bg.jpg) top left no-repeat;
}
div.nopad {
padding: 0;
text-align:left;
}
td.middle_pad {
width: 20px;
}
/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/
div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}
span.pathway {
display: block;
margin: 0 20px;
height: 16px;
line-height: 16px;
overflow: hidden;
}
/* headers */
div.componentheading {
padding-left: 0px;
}
h1 {
padding: 0;
font-family:Helvetica ,Arial,sans-serif;
font-size: 1.3em;
font-weight: bold;
vertical-align: bottom;
color: #666;
text-align: left;
width: 100%;
}
h2, .contentheading {
padding: 0;
font-family: Tahoma, Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
vertical-align: bottom;
color: #8cb6cf;
text-align: left;
width: 100%;
}
table.contentpaneopen h3 {
margin-top: 25px;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
h3, .componentheading, table.moduletable th, legend {
margin: 0;
font-weight: bold;
font-family: Tahoma,Helvetica,Arial,sans-serif;
color:#71a7c8;
font-size: 1.4em;
padding-left: 0px;
margin-bottom: 10px;
text-align: left;
}
/* small text */
.small {
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}
.modifydate {
height: 20px;
vertical-align: bottom;
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}
.createdate {
height: 20px;
vertical-align: top;
font-size: .90em;
color: #999;
font-weight: normal;
vertical-align: top;
padding-bottom: 5px;
padding-top: 0px;
}
a.readon {
margin-top: 10px;
display: block;
float: left;
background: url(../images/mw_readon.png) top right no-repeat;
padding-right: 20px;
line-height: 14px;
height: 16px;
}
/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }
/** overlib **/
.ol-foreground {
background-color: #f6f6f6;
}
.ol-background {
background-color: #666;
}
.ol-textfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.ol-captionfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #f6f6f6;
font-weight: bold;
}
.ol-captionfont a {
color: #0B55C4;
text-decoration: none;
font-size: 12px;
}
.ol-closefont {}
/* menu links */
a.mainlevel:link, a.mainlevel:visited {
padding-left: 5px;
}
a.mainlevel:hover {
}
/* spacers */
span.article_separator {
display: block;
height: 20px;
}
.article_column {
padding-right: 5px;
}
.column_separator {
border-left: 1px dashed #e0e0e0;
padding-left: 10px;
}
td.buttonheading {
}
.clr {
clear: both;
}
div#maindivider {
border-top: 1px solid #ddd;
margin-bottom: 10px;
overflow: hidden;
height: 1px;
}
table.blog span.article_separator {
display: block;
height: 20px;
}
/* table of contents */
table.contenttoc {
margin: 5px;
border: 1px solid #ccc;
padding: 5px;
}
table.contenttoc td {
padding: 0 5px;
}
/* content tables */
td.sectiontableheader {
background:transparent url(../images/sectiontableheader_bg.gif) top left repeat-x;
color: #fff;
font-weight: bold;
padding: 4px;
border-right: 1px solid #fff;
}
tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 6px;
}
td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
}
tr.sectiontableentry1 {
background:#f3f3f3;
}
tr.sectiontableentry2 {
background:#fefefe;
}
/* content styles */
table.contentpaneopen, table.contentpane {
margin: 0;
padding: 0;
}
table.contentpaneopen li {
margin-bottom: 5px;
}
table.contentpaneopen fieldset {
border: 0;
border-top: 1px solid #ddd;
}
table.contentpaneopen h3 {
margin-top: 25px;
}
table.contentpaneopen h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
.highlight {
background-color: #fffebb;
}
/* module control elements */
table.user1user2 div.moduletable {
margin-bottom: 0px;
}
div.moduletable {
margin-bottom: 25px;
}
div.module_menu, div.module {
margin: 0 0 0 2px;
padding: 0;
margin-bottom: 15px;
}
div.module_menu div div div div ,div.module div div div div {
background: none;
padding: 0;
}
div.module_menu div, div.module div {
}
div.module_menu div div, div.module div div {
padding:0 0 10px 0;
}
div.module_menu div div div, div.module div div div {
padding: 0px;
width: auto;
}
div.module_menu ul li a:link, div.module_menu ul li a:visited,
div.module ul li a:link, div.module ul li a:visited {
font-weight: normal;
background:transparent url(../images/blue/bullet2.jpg) top left no-repeat;
line-height:24px;
}
#leftcolumn div.module table ,#rightcolumn div.module table {
width: auto;
}
#leftcolumn h3, #rightcolumn h3 {
height:36px;
color:#fff;
font-weight: bold;
font-family: Tahoma, Helvetica,Arial,sans-serif;
font-size: 12px;
line-height:26px;
margin: -2px 0 0 ;
position:absolude;
padding:0px 0 2px 22px;
text-align: left;
width:198px;
background:transparent url(../images/h3_bg.gif) top left no-repeat;
}
#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c {
margin:0 0 20px 0;
padding: 0px;
text-align:left;
}
#leftcolumn ul.menu, #rightcolumn ul.menu {
margin:0;
padding:0px 0 0 10px;
list-style:none;
margin: 0px 0;
width:194px;
}
#leftcolumn ul.menu li, #rightcolumn ul.menu li {
margin:0;
padding:0;
}
#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
display:block;
line-height:20px;
border-bottom:1px dotted #c3b586;
padding:2px 0px 0 12px;
height:20px;
text-decoration:none;
text-align:left;
color:#666666;
}
#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
color:#0d789c;
}
/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link,
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
display:block;
line-height:20px;
border-bottom:1px dotted #0d789c;
padding:2px 0px 0 12px;
text-decoration:none;
color:#0d789c;
}
#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
color:#666666;
}
/* ****** left col sub menu ****** */
#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
margin:0;
padding:0 0 0 0px;
list-style:none;
}
#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link,
#rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link {
background: transparent url(../images/menu_sub_link_bg.gif) left no-repeat;
text-decoration:none;
color:#666666;
padding:2px 25px;
}
#leftcolumn ul.menu li.active ul li#current a, #leftcolumn ul.menu li.active ul li#current a a:link {
background: transparent url(../images/current_link.jpg) left no-repeat;
text-decoration:none;
color:#666666;
padding:2px 25px;
}
#leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover {
s/menu_sub_link_bg.gif) left no-repeat;
color:#666666;
}
/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
margin:6px 0;
padding:0;
list-style:none;
}
#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
margin:0;
padding:0 2px;
}
table.adminform textarea {
width: 540px;
height: 400px;
font-size: 1em;
color: #000099;
}
div.search input {
width: 69px;
vertical-align:bottom;
background-color: #ffffff;
margin: 15px 0 10px 0;
}
form#form-login fieldset {
margin:0px 20px 0 20px;
padding:20px 0 0 0;
border:none;
text-align:left;
}
form#form-login ul {
text-align:left;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
form#form-login ul li{
text-align:left;
margin:0;
padding:0 0 0 20px;
}
#leftcolumn div.module h3 {
top:-500px;
left:-500px;
padding-left:0;
position:absolute;
}
/* thumbnails */
div.mosimage { margin: 5px; }
div.mosimage_caption { font-size: .90em; color: #666; }
div.caption { padding: 0 10px 0 10px; }
div.caption img { border: 1px solid #CCC; }
div.caption p { font-size: .90em; color: #666; text-align: center; }
/* Parameter Table */
table.paramlist {
margin-top: 5px;
}
table.paramlist td.paramlist_key {
width: 128px;
text-align: left;
height: 30px;
}
table.paramlist td.paramlist_value {
}
div.message {
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 14px;
color : #c30;
text-align: center;
width: auto;
background-color: #f9f9f9;
border: solid 1px #d5d5d5;
margin: 3px 0px 10px;
padding: 3px 20px;
}
/* Banners module */
/* Default skyscraper style */
.bannergroup {
}
.banneritem {
}
/* Text advert style */
.banneritem_text {
padding: 4px;
font-size: 11px;
}
.bannerfooter_text {
padding: 4px;
font-size: 11px;
background-color: #F7F7F7;
text-align: right;
}
/* System Messages */
/* see system general.css */
.pagination span { padding: 2px; }
.pagination a { padding: 2px; }
/* Polls */
.pollstableborder td {
text-align: left;
}
/* Frontend Editing*/
fieldset {
border: 1px solid #ccc;
margin-top: 15px;
padding: 0 15px;
}
legend {
margin: 0;
padding: 0 10px;
}
td.key {
border-bottom:1px solid #eee;
color: #666;
}
/* Tooltips */
.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}
.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
}
.tool-text {
font-size: 100%;
margin: 0;
}
/* System Standard Messages */
#system-message dd.message ul { background: #C3D2E5 url(../../images/notice-info.png) 4px center no-repeat;}
/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}
/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}
/* ****************************************************************************** */
/* blue */
input,button {
background:transparent;
vertical-align:bottom;
}
input[type="checkbox"], input[type="radio"]{
background: transparent;
border: none;
}
/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
color : #fff;
font-family: Arial,sans-serif;
text-decoration:none;
}
a.sgfooter:hover {
color: #fff;
font-family: Arial,sans-serif;
text-decoration:none;
}
#sgf {
font-size: 11px;
text-align:left;
color: #fff;
padding:4px 0 0 10px ;
font-family: Arial,sans-serif;
width:500px;
float:left;
}
.sgf {
text-align:right;
font-size: 11px;
font-family: Arial,sans-serif;
color: #666;
text-decoration:none;
}
.sgf1 {
font-size: 11px;
font-family: Arial,sans-serif;
color: #666666;
text-align:left;
}
a.sglink:link, a.sglink:visited {
color : #666666;
font-size : 11px;
font-family: Arial,sans-serif;
text-decoration:none;
}
a.sglink:hover {
color : #666666;
font-family: Arial,sans-serif;
text-decoration:none;
}
Hi guys, Test site at http://www.bartlett-family.net/BBCON/ The vertical BG image on the left is not repeating vertically. I can't for the life of me figure out why not. Anyone, please? CSS is at http://www.bartlett-family.net/BBCON/main.css. TIA! Chris Hello people, Before I start, I know nothing much about CSS, and have a site that has upto for levels of nested tables. Though it looks nice, the site of the html file is massive, and I wanted to try and make a smarter file using css's. I have been looking at this all weekend, and need some help, as I seem to keep repeating the same statements in the css file just to change the colour. Quote: categorylinks1{ list-style-type: none; padding: 0; margin-left:18px; margin-right:auto; margin-top:5px; margin-bottom:10px } .categorylinks1 li{ padding-bottom: 1px; } .categorylinks1 li a{ margin-left: -3px; padding: 0px 1px; font-size: 10px; display: block; color: #2175bc; text-decoration: none; font-weight: bold; border-bottom: 1px solid #ececec; } .categorylinks1 a:visited{color: #449805; } .categorylinks1 a:hover { color: #000000; background: #95C5EC; text-decoration: none; } #leftbar1 .headers{ color: white; font: bold 110% Arial; background-color: #2175bc; padding: 2px; text-align: center; } #leftbar1 .menuitems li a{ text-decoration: none; font-weight: bold; } #leftbar1{ width: 165px; /*background-color: white;*/ } and my html is Quote: <table id="maintable" border="0" width="163" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#111111"> <tr> <td id="leftbar1" valign="top" width="149"> <div class="headers">Malia 2007</div> <ul class="categorylinks1"> <li id="c7"><a href="/" >Welcome to Malia</a></li> <li id="c6"><a href="/">Pictures of Malia</a></li> <li id="c3"><a href="/">Weather</a></li> <li id="c17"><a href="/">Maps</a></li> <li id="c16"><a href="/">Distances</a></li> <li id="c12"><a href="/">Phone Numbers</a></li> <li id="c4"><a href="/">Speak Greek</a></li> <li id="c5"><a href="/">Bank & Post Office</a></li> </ul> <tr> <td id="leftbar2" valign="top" width="149"> <div class="headers">Malia Sights</div> <ul class="categorylinks2"> <li id="c7"><a href="/" >Welcome to Malia</a></li> <li id="c6"><a href="/">Pictures of Malia</a></li> <li id="c3"><a href="/">Weather</a></li> <li id="c17"><a href="/">Maps</a></li> <li id="c16"><a href="/">Distances</a></li> <li id="c12"><a href="/">Phone Numbers</a></li> <li id="c4"><a href="/">Speak Greek</a></li> <li id="c5"><a href="/">Bank & Post Office</a></li> </ul> </td> </tr> </table> Is there anyway I can do this, without using the same CSS code as above, and creating - .leftbar2, categorylinks2 and all the components in the CSS file, just to change the colours. In the CSS file above I have made bold the codes I have to change to make a new version in different colours. The way I am doing it at the moment, it means for me to have 10 sections, I would need to create the CSS above 10 times, meaning it will be a massive CSS file for something that seems fairly straight forward. Any help would be greatly received, I am sure there is another way, but as i said right at the top, all I know about CSS's I have read this weekend. Kind Regards Graham Hi there. I'll try to explain this as clearly as I can: I have a site that needs these requirements - 3 column elastic layout with footer - left and right columns are static - center column is flexible to fill screen problem i am having is that the left and right columns ONLY need to have a repeating background (because of a required drop shadow in the design) on the y axis. Unfortunately I can't seem to get the left and right columns to assume the height of the content area, which also has to be elastic (so there's no fixed height either). Basically, the background images either don't show up, or only go as far down as "content" or based on a specific height (which is useless in this layout) Any suggestions or code samples would greatly appreciated! Thanks in advance , humanv3 Hi there, I would like to get some opinions on what would be the best way, or even a good way, to display a list of lines from a database, such as product descriptions (a link), prices (text) and buy now links. For example: Segate Hard Drive 250gb $150.00 Buy Now Maxtor Hard Drive 300gb $200.00 Buy Now etc I thought it would be best to have a <ul> with each line being an <li>. Further to this, I tried having each line as a <li> element, with each column (price, buy now etc) an <li> element, displayed inline. This actually worked well, but I had trouble doing an alternate background color thing, which I think was due to my funny css code. I gave each <li> a class selector, so that different formatting could be applied, and I had each <li> float:left; and a width, to give a column style display. Would a table be the best way to display the 3 (or more) columns? I've removed tables from the site layout, and can see how they would make sense for this, as it basically is tabular data, repeated over and over again. Or would having each line as a <p> with say each column having its own <label> possibly be best? Or some variation on of the 3, or something else all together? I realise everyone would have their preferred style and there is no 'best', 'right or wrong' way etc. I'm trying to find a way that I can work with, one that could be considered 'the norm', or 'best practise'. I haven't posted any code, but can if people need more of an idea of what I am trying to do. Cheers Scott I have a div #footer at the bottom of a page. All works except in MSIE (v6) where ol' Bill Gates decides to duplicate the #footer: http://www.jobsinkent.com/v5c/home/index.php If I remove the float:left from #footer it displays fine (but out of position!!) ... ideas welcome!! Can be all viewed here -> http://streaming.smad.jmu.edu/smad307/ring/gloo I have three layers starting at the same position on the page. Each layer has a Y-repeat repeating image that tiles seamlessly. There is one for the left spacer, the middle content, and the right spacer. The Nav menu on the left are just images placed in at the top of the left spacer layer. I'm trying to get each of these layers to expand as content fills up the middle Content layer. This doesnt work at all in Firefox - with any excess content just heading off into white space. And it works somewhat with IE - with only the Content layer to expand as content fills it. I know this is a recurring issue with CSS, but is there a simple fix for this? I've seen this done before without any Javascript hacks, but can't remember where. I do remember, it didn't look like the most graceful solution. And in IE, the navigation .gifs on the left have a gap between each of them. I found that odd since they're just <IMG>s within the layer. Any help would be greatly appreciated For some reason repeating backgrounds won't repeat in Firefox unless I specify a height for the div. They show up ok in IE. This will display: Code: #contentcontainer {
background-image: url('images/layout/content_bg.png');
background-repeat: repeat-y;
height: 350px;
width: 785px;
font-size: 0px;
margin: 0px;
padding: 0px;
background-color: #fff;
}
This won't: Code: #contentcontainer {
background-image: url('images/layout/content_bg.png');
background-repeat: repeat-y;
width: 785px;
font-size: 0px;
margin: 0px;
padding: 0px;
background-color: #fff;
}
I need to find a way around this as my pages are varying lengths. Any ideas? Thanks, Beardy |
|||||||