|
CSS - Border Inside Bg Colour
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. Similar TutorialsHi, I am trying to do a rounded corner box with 2 different colour halfs but using little images instead of big images. Here is my code so far: CSS: Code:
#box {
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 3em;
padding: 0;
text-align: left;
width:150px;
background-color: #eeeeee;
}
#content{height:180px;}
#tlc, #trc, #blc, #brc { background-color: transparent; background-repeat: no-repeat; }
#tlc { background-image:url(images/tlc.gif); background-position: 0% 0%; }
#trc { background-image:url(images/trc.gif); background-position: 100% 0%; }
#blc { background-image:url(images/blc.gif); background-position: 0% 100%; }
#brc { background-image:url(images/brc.gif); background-position: 100% 100%; }
#tb, #bb { background-color: transparent; background-repeat: repeat-x; }
#tb { background-image:url(images/tb.gif); background-position: 0% 0%; }
#bb { background-image:url(images/bb.gif); background-position: 50% 100%;}
#rb { background-image:url(images/r.gif); background-position: 100% 0%; background-repeat: repeat-y;}
#lb { background-color: #; background-image:url(images/l.gif); background-position: 0% 100%; background-repeat: repeat-y;}
HTML: Code: <div id="box"> <!--- box border --> <div id="lb"> <div id="rb"> <div id="bb"><div id="blc"><div id="brc"> <div id="tb"><div id="tlc"><div id="trc"> <!-- --> <div id="content"> <p>2 colour box.</p> </div> <!--- end of box border --> </div></div></div></div> </div></div></div></div> <!-- --> </div> The lb "left border image" and rb "right border image" needs to change half way down vertically to a different image. hope some one can help me?!? Thanks Hi All, How can I enable the inside bordder of a TD in html. Thans in advance Can any of you tell me why with the a:link/visited set with border:none (as in the example at the bottom of the e-mail), I get a box around an image inside a link: <a href="communication.php"><img src="resources/president.jpg"></a> Working on a MAC, I noticed that the border only appears in Firefox but not in Safari, Opera and OmniWeb. Can anyone tell me why this border appears around the image, why only in FF, and of course, how one can make it dissappear using the stylesheet? STYLESHEET: a {text-decoration: none;} a:link { color: #000000; border: none;} a:visited { color: #000000; border: none;} a:hover { color: #bbbb00; border: none;} a:active { color: #000000; border: none;} .image{border-width:0px; border: none;} title doesnt really explain it, but i cant really explain it well in 1 line. code I use is at bottom of the post but using the below code. If I take out the border-top declaration in #bodycontainer, it seems to lose the margin-top that is declared in the flashcontainer. when i say lose, the background-color of the bodycontainer no longer exists above the flashcontainer. it seems as the flashcontainer overlays the parent and moves up or whatever, if that makes any sense. this is in Firefox 3.0.3 code validates as transitional (and even strict if i change the doctype) i cannot figure out why either. i've used firebug to see if any CSS was overriding, but it doesnt seem to be any 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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
#bodycontainer {
width: 960px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-color: #000;
border-top: 1px solid yellow; /* remove this line */
}
.flashcontainer {
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
border-top: 1px solid red;
}
-->
</style>
</head>
<body>
<div id="bodycontainer">
<div class="flashcontainer">
<img src="images/home_flash_area.jpg" width="950" height="240" alt="flash container" title="flash container" />
</div>
<h2>Some Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doamet, consectetur adipisicing elit, sed do.</p>
</div>
</body>
</html>
I have a blog and I want to put my text inside a border/wrapper. So I've made the border and sliced it up into 3 parts: top middle and bottom. I want to place the text content within the middle of this graphic and so I figure I need to make the sliced images as a background using css and then type whatever I want over it. So I did this but dont know what Im doing wrong: Code:
<style type="text/css">
top {background: url('/images/t1.gif') ;}
middle {background: url('/images/t2.gif') ;}
bottom {background: url('/images/t3.gif') ;}
</style>
<div class="top" id="top"></div>
<div class="mid" id="mid">
<div class="content" id="content">Content Goes Here</div>
</div>
<div class="bottom" id="bottom"></div>
Any help is appreciated. JH Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... Hi, This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code:
.results {
border: 1px solid #CCCCCC ;
}
Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! I would like to set up a table with a different border than the cells inside it. Here's my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
TD {border: 1px solid #ccc}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different? 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 Is it possible to set the colour of the padding in a table cell? In 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. 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. 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. 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? 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 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! 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! 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 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;}
|
|||||||