|
CSS - Css Image Popout Repeating The Same Image
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! Similar TutorialsPlease 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 Hi. 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. 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 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. 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. 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;
}
(URL address blocked: See forum rules)/erwinsample/ Thanks for any help you can give me. 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'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. 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'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, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... Trying to delete my post but no option to delete so just removing content. Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text |
|||||||