|
CSS - Setting Bg Colour And Positioning
A background image is being applied to an image, but I cant find anywhere in the CSS where this color is being applied. Ive also been fiddling with the position of the arrows using margins and padding, but these dont seem to have an effect either.
Here is a link to my page: http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14 Here are the two images in question: http://www.zombiemod.com/rm/nina2/t...ntrols-left.png http://www.zombiemod.com/rm/nina2/t...trols-right.png You can see there is a background color to the images of #f0f0f0 and the positioning isnt correct, im trying to remove the background colour and find out how to reposition the horizontal position of these images. Here is my HTML: Code: <div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controls">
<ul id="control-buttons">
<li><button id="controls-left">
<img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
</button></li>
<li><button id="controls-play">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
</button></li>
<li><button id="controls-right">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
</button></li>
</ul>
</div>
Here is my CSS: Code: #slideshow-controlsx {
position: relative;
height: 14px;
margin: 0px 0 -58px;
overflow: hidden;
z-index: 100;
text-align: left;
top:200px;
}
#main-image-container > #slideshow-controlsx {
margin-bottom: -50px;
margin:0 auto;
}
#slideshow-controlsx ul {
position: relative;
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none inside;
width:690px;
/* background-color: #000;*/
/* opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=40); Lower opacity for IE since the controls don't hide */
}
#slideshow-controlsx ul li {
float: left;
margin: 0;
padding: 0;
}
#slideshow-controlsx button {
width: 8px;
height: 14px;
/*margin: 0;
padding: 0;*/
/* background-color: #000;*/
padding:0px;
border: none;
text-align: center;
cursor: pointer;
}
Can anyone please tell me where the background colour #f0f0f0 is being applied, and how I should be modifying the code to move the images closer in towards the centre of the image. James Similar TutorialsIn CSS, is it possible to define certain colours for a certain piece of text? For example, in the site I'm doing at the moment, the paragraph font-colour is black, but when the text ''CrudeSep'' comes up, I would like The 'sep' piece of the text to be in orange. This would save me having to make an image to do this! Any help appreciated. Is it possible to set the colour of the padding in a table cell? I'm having trouble with my list on a site im working on. When you hover over the link, I want it to display a background colour the full width of the box, not just the length of the text. You can see the menu, on the left hand side - HERE. Here's the CSS of the list. Code: div #leftcontent {
padding-left: 0px;
padding-top: 0px;
display: block;
font-size:90%;
font-family:Arial, Helvetica, sans-serif;
}
#leftcontent a {
text-decoration:none;
padding:0px;
color:#000066;
}
#leftcontent a:hover {
text-decoration:none;
background-color:#66CCFF;
background-color-width:30px;
}
#leftcontent ul{
margin: -10px 10px 2px 5px;
padding: 0;
list-style: none;
}
#leftcontent li a{
margin: 0 0 .5em 0;
padding: 2px 5px 5px 0px;
line-height: 1.4em;
font-size:100%;
color:#FFFFFF;
}
Any help is appreciated. Cheers. __________________ ULTRASUK Hi. Is there any way to: a) Change background color of the title box that appears when you hover over an image AND b) Reduce the delay it takes to appear? Thanks. Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so <span style="background-color:#336699; width:100px"></span> Now why wouldnt that work and is there a better way to do what im trying to achieve? Hi all, the page i am talking about is... http://sydneynightowl.com.au/home.php The problem is the the div 3column seems to start too early in the work flow and also the background colour on the header bleeds. The div and header should be starting after the first 3 divs (which are set to float) I hope i have explain this correctly, any help is apriciated. The css code is Code: @charset "utf-8";
/* CSS Document */
body {background-color:#000000;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-position:center top;
color:#FFFFFF;
font-family:"Lucida Sans Unicode", sans-serif;
font-weight:100;
font-size:12px;}
#container {
position:absolute;
width: 700px;
left:50%;
margin-left:-358px;
}
#header {
margin-top:0px;
height: 115px;}
#toolbar {height: 30px;
line-height:10px;
padding: 0px 10px;
font-variant:small-caps;
}
#cornerlogo {
position:fixed;
top:5px;
left:5px;
}
#topnavigation {height: 35px;
line-height:35px;
text-align:center;}
#content { border-bottom:1px;}
.3column {width:695px;
padding-right:5px;
padding-left:5px;
margin-top:5px;}
#leftcolumngl {float:left;
width:223px;
height:370px;
padding-right:5px;
padding-left:5px;
padding-top:5px;
margin-top:15px;
margin-right:5px;
border:#FFFF00 solid thin;}
#middlecolumngl {float:left;
height:370px;
width:225px;}
#rightcolumngl {float:left;
height:370px;
width:230px;
padding-left:5px;}
#leftcolumn { float:left;
width:230px;
padding-right:5px;}
#middlecolumn {float:left;
width:230px;}
#rightcolumn {float:left;
width:230px;
padding-left:5px;}
#imagecolumn {float:left;
width:340px;
padding-left:5px;}
#infocolumn {float:left;
width:340px;
padding-left:5px;}
#footer {height: 30px;
border:thin solid #FFFFFF;
clear:both;
text-align:center;
margin-bottom:30px;
margin-top: 30px;
line-height:25px;}
#bgfirst {
position:absolute;
top:190px;
left:0px;
width:90%;
height:200px;
margin-bottom:20px;
background-color:#00CC00;
}
#bgsecond {position:absolute;
top: 400px;
right:0px;
width:90%;
height:200px;
background-color:#660066;
}
a:link {color: #fffc00; font-weight: normal;}
a:active {color: #fffc00; font-weight: normal;}
a:visited {color: #fffc00; font-weight: normal;}
a:hover {color: #fffc00; font-weight: bold;}
a.event:link {color: #fffc00; font-weight: normal;}
a.event:active {color: #fffc00; font-weight: normal;}
a.event:visited {color: #fffc00; font-weight: normal;}
a.event:hover {color: #fffc00; font-weight: bold;}
a.club:link {color: #fffc00; font-weight: normal;}
a.club:active {color: #fffc00; font-weight: normal;}
a.club:visited {color: #fffc00; font-weight: normal;}
a.club:hover {color: #fffc00; font-weight: bold;}
h1 { text-align:center;
color:#000000;
background-color:#fffc00;
margin-left:3px;
margin-right:3px;
font-variant:small-caps;
font-size:22px;}
h2 {text-align:center;
color:#fffc00;
background-color:#333333;
margin-left:3px;
margin-right:3px;
font-variant:small-caps;
font-size:18px;}
.ourprice {
display:inline;
color:#FF0000;
line-height:20px;
font-variant:small-caps;
font-size:14px;}
img {
border-color:#fffc00;
border-style:solid;
border-width:thin;
}
img.noborder { border:none;}
img.venues {float:left;
margin:10px;}
.mainnavimages {
border-color:#979700;
border-style:solid;
border-width:thin;
}
p {line-height:15px;}
strong { color:#fffc00;}
hey, i want to change a certain link to a different colour. but i want all the other links to be the 'original' i have tried appling a class but the 'original' link seems to be taking over i want to change the "Top" link to red site is located at: http://studentwork.qantm.com.au/pking/website/seminars.cfm the css is located at: http://studentwork.qantm.com.au/pking/website/ptwm.css any help would be great thanks Is there a way to get it so that if images dont load, then it shows a background colour I tired using both colour an image, but it didn't work Code: background: url(images/background.png); background:#000000; The reason i'm asking is when i'm at college, i have images disabled, and because i used white text, i have to highlight the text in order to read it Is there a way to do this At http://jordanmeeter.com/contact/form you'll see that I have a form. After you submit the form, it will display "Success! Your Email has been sent." in green text. Now why is it displaying green when in the HTML, I have <strong style="color:rgb(84, 172, 219);">Success! Your Email has been sent.</strong> (That RGB equals a blueish colour) But if you highlight the text, and use Firefox's "View selection source" it will appear as style="color:green;" . What the heck is overriding my CSS? Hi, I have some text which has a line through it, i.e. .sale_originalprice { color:#666666 ; font-family: Verdana, Arial ; font-size:10pt ; font-weight:normal; text-decoration: line-through; } What I want to do is change the line-through colour to red. But the text should remain grey (i.e. #666666) Is this possible? I tried text-line-through-colour: red; already but that didnt work Thanks! Is it possible to include (in this instance) a white border, INSIDE an orange background colour on a h1. The background colour of the page is white and the background colour of the h1 is orange, so I need the border inside rather than around the h1 bg colour for it to work otherwise you wouldn't see it for the white page background. Can this be done? If so can anyone help.. Thanks. Hi all, newbie here. I have an image I want to use as a background. I want this image to slowly fade to black at the bottom (or blue, or green, or whatever, to be decided later). Can I do this in pure CSS? To be more specific, the image is a relatively small one in the middle of the page, and will fade to black which will continue down the page. Do I need to use javascript/jQuery to do this? Because I'd rather not, I'm not familiar with them and it will probably be too much effort. I have tried making the image transparent and having a background gradient white to black behind it, but that doesn't look right (obviously, since I need 0% transparency of the image at the top and 100% at the bottom). Thanks for any and all help! i currently have the following code for links.. Code:
a {
color:#666666;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family: arial, helvetica, sans-serif;
}
a:link {color:#666666;}
a:visited {color:#333333;}
a:hover {background-color:#eee;}
is there a way of having another set so that some have the colour settings as above and another set have the colour settings that are blue or something??? any suggestions would be great.... thanks RF I'd like to be able to have different hover colours for different table rows. I have a general hover colour for the whole page and I'd like to have a different hover colour for the table rows. In the head I have a:hover { color: green } a.white:hover { color: white } So by hand I can insert the class="white" to each individual cell as part of the link but what if I wanted a whole row to hover white? How would I code this or is there still no way to do it? Hi, I gave in, and would like to change my colour scheme. However I do not know from where to start to select good coloures for my website I want my website to still leave an imprint in peoples mind, but at the same time it is relaxing to see and browse in. I tought of black orange and brown .. however black does not look like a relaxing colour to me ... I could use different shades of brown as well .. Anyways .. anyone having any sugestions are more then welcome. dd112g Hi. I think this is probably a simple question for you guys. I have a web page with lots of input text boxes. What I would like is when the cursor is in the text box, the background changes to yellow from white. And as an added bounus. Some are originaly grey to indicate required input and maybe even a difrent active colour. Lots of websites do this so must be simple. TIA Desmond. Hey Guys, I have validated both my html and css. The only errors that come back for my css is that I have the same colour background and whatnot. BUT that's what I want. So there aren't really errors. Here is my page: jacenta.com/whichsbc What I have been attempting to achieve and been utterly failing is: If you goto the menu on the side and hover over you will see a light grey background show up. Basically I want that to extend to ethier ends of the box. Is there anyway for this to be done??? I've tried everything and I just can't seem to figure this one out. A good example of what I am looking for is in my drop down menu at the top when you select a heading and a dropdown comes down, hover over an item and a light blue background will show up. It's probally something simple... I know. But ahh. It's just so frusterating! If someone could help me out I would apperciate it so much! You all are such a great help. - Jacenta Hi, I have found this code in a php thing of mine and I would like to change it, and this bit off css is what makes it "happen". As it stands, when you mouse over a row nothing happens. What I would like it to do is change colour of the whole row (rows 1-4) (Like in phpMyAdmin browse section). This is the code I think I should change: Code: /* Common elements */
.row1 { background-color: #F5F9FD }
.row2 { background-color: #DFE6EF }
.row3 { background-color: #EEF2F7 }
.row4 { background-color: #E4EAF2 }
I also have this bit of CSS that can change ONE row's colour, but not all of them at the same time. If it helps, this is the code. I have edited the code into the main php file I have, in all the rows, but it only changes one "cell" when you hover over it, and not the whole row. Code:
<td class="row4" onmouseover='window.status="{$info['name']}";
this.style.backgroundColor=iOver;' onmouseout='window.status="Done";
this.style.backgroundColor=iOut;' onclick="javascript:window.location.href='{$ibforums->base_url}showforum={$info['id']}';">;
</td>
</span></td>
Thanks, Prism128 PS: The iOver and iOut (in the second code) are colour references in a php file Hi, How do i change the colour of the background hover colour of a drop down menu? I can only seem to change the background of the normal state. Any ideas? Hello. On my website 2uk2 there is a domain search in the header. I want to make that litle arrow on the domain extension box purple. Using normal CSS i cant seem to acomplish it, i have tried assigning a "class" to the box, but it has no affect on it, it only sets the background colour. I have the scrollbar colour defined aswell, but again, no affect.. If anyone knew how i could fix that I'd really appreciate it! Regards Steven Billings |
|||||||