|
CSS - Div Border Made From Different Coloures.
Hello,
I am trying to do a div box with a border made out of 4 blue pixels, and 2 black pixels. I tryied doing it at follows (which works), however I was wondering if there was a more simple solution... my current implementation for this required me of having to put two inner div's. I called one div outer, and the other one inner. The outer div has a border of 4 pixels solid blue, and the inner div has a border of 2 pixels solid black. the html code is as follows: Code:
<div class="mydiv">
<div class="outer">
<div class="inner">
Hello, World!
</div>
</div>
</div>
My question is whether there is any way to do this using one single div? regards, sim085 Similar TutorialsThe first ever fully integrated CSS expanding/collapsing menu is here, get them while they are hot!! Ok, ok, maybe that was a bit over the top but, hey what can one do? Heh! I have finally finished it, if the actual coding can be improved and such, please feel free to critique. Code: <HTML><HEAD><BASE taget="menu"><STYLE TYPE="text/css"><!--
table {display: block; border-color: #B0C4DE; border-style: inset; border-width: 10px; position: absolute; top: 75px; left: 20px;}
a:link {}
a:visited {}
a:hover {}
a:active {}
a {display: block; font-family: arial; font-size: 12px; color: #FFFF00; text-align: center; cursor: pointer; text-decoration: none; border-color: #B0C4DE; border-style: outset; border-width: 4px; padding: 2px 15px 2px 15px;}
.main:hover {color: F5F5F5; background-color: #B0C4DE; border-style: inset; border-width: 1px;}
.show:hover a.sub1, .show:hover a.sub2, .show:hover a.sub3, .show:hover a.sub4, {display: block;}
a.sub1:hover, a.sub2:hover, a.sub3:hover, a.sub4:hover {color: #F5F5F5; background-color: #B0C4DE;}
a.sub1, a.sub2, a.sub3, a.sub4 {display: none;}
//--></STYLE></HEAD><BODY bgcolor="#778899"><TABLE><a href="#" return false;><tr><td>
<DIV CLASS="show"><DIV CLASS="main"><a href="#" return false;><B>Main 1</B></a></DIV>
<a CLASS="sub1" href="Doc1.html" target="docView">S1</a>
<a CLASS="sub1" href="" target="docView">S2</a>
<a CLASS="sub1" href="" target="docView">S3</a>
<a CLASS="sub1" href="" target="docView">S4</a>
<a CLASS="sub1" href="" target="docView">S5</a></DIV>
<DIV CLASS="show"><DIV CLASS="main"><a href="#" return false;><B>Main 2</B></a></DIV>
<a CLASS="sub2" href="" target="docView">S1</a>
<a CLASS="sub2" href="" target="docView">S2</a>
<a CLASS="sub2" href="" target="docView">S3</a>
<a CLASS="sub2" href="" target="docView">S4</a>
<a CLASS="sub2" href="" target="docView">S5</a></DIV>
<DIV CLASS="show"><DIV CLASS="main"><a href="#" return false;><B>Main 3</B></a></DIV>
<a CLASS="sub3" href=""urn false;>S1</a>
<a CLASS="sub3" href="" target="docView">S2</a>
<a CLASS="sub3" href="" target="docView">S3</a>
<a CLASS="sub3" href="" target="docView">S4</a>
<a CLASS="sub3" href="">S5</a></SPAN></SPAN></DIV>
<DIV CLASS="show"><DIV CLASS="main"><a href="#" return false;><B>Main 4</B></a></DIV>
<a CLASS="sub4" href="#" return false;>S1</a>
<a CLASS="sub4" href="" target="docView">S2</a>
<a CLASS="sub4" href="" target="docView">S3</a>
<a CLASS="sub4" href="" target="docView">S4</a>
<a CLASS="sub4" href="" target="docView">S5</a></DIV></td></tr></a></TABLE></BODY></HTML>
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>
check this out, philistines LOL: Wiggles the Wonderworm not my design, but I think you'll agree how excellent it is. 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... Is it possible to overlay a colour onto a grayscale image to make it that colour with css? Such as using the alpha channel? Image in question would be a transparent background gif file. 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? 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! How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space. This is the coder I have so far. Nothing big: Code:
.solid {
border: solid 1px #000000;
}
Thanks. Hi guys, First, please see this page: http://www.estyles.com.au/fotest/index.html To do the menu, I found a tutorial on the net and modified that. It works fine in firefox, however does not work in IE; there is a border between the menu and the main container. How do I fix that? Also, I have another problem. With the menu, I made the menu item that is selected have a larger border on the bottom; I did this so that the border would go over the top of the white border around the main content area, so the white border would be invisible under the selected button. Make sense? Well, I'm trying to do the same thing with the "Test Block" area. I want the bit where it says "Test Block" to have a border on the left, top and right. I want the bit where it says "Testing" twice to have a border on the left, bottom and right, and also on the top but not where the "Test Block" bit joins this. I tried doing the same as the menu, ie giving the "Test Block" a larger border, but this time it actually makes the div bigger rather than overlapping the second one. Any idea how to fix that? So here's my css code Code:
#top-div {
border-top : 10px solid #FF8F00;
width:100%;
position:relative;
top:-8px;
}
The intention is suppose to make an orange strip across the top of the page. The problem is that the left and right border of the div is not orange - specifically the top-right, top-left borders are not orange. So basically the strip is not stretch 100% from the otter most left to the otter most right side. Any advice? OK, so I have a grid from a table. I have it so each td has a boarder on the top and left side - the td to the right/down of that is supposed to make up the boarder of the bottom and right hand side of the first td. However... there is a 1 pixel gap where they don't connect... obviously because this space is reserved for a boarder that originally would be there. Is there any way to get rid of this gap? Thank you. OK, I'm doing the ALA trick where you construct a menu from an unordered list and its list items. Very watered down example here but suppose my menu consists of a horizontal row of text links, with each link separated by a vertical line. In my CSS I am giving the <li> container a right border that is 1px thick and black. This creates the vertical line for each link. The problem here is that the last link in the menu should not have a vertical line following it. I thought this would be an easy fix - I created a style that rendered no borders and called it via the class attribute of the <li>. Unfortunately, this dis not make the border disappear for the last menu item. All other properties defined in that style are rendered properly but the border property set in the <li> will not be overridden. Here's some code: Code: #bdrtest ul {
margin: 0;
padding: 0;
list-style: none;
}
#bdrtest li {
float: left;
padding: 0;
margin: 0;
border-right: 1px solid #000;
}
#bdrtest li a {
padding: 2px 10px;
}
.noborder {
border: 0;
}
and Code: <div id="bdrtest"> <ul> <li><a href="#">hello</a></li> <li class="noborder"><a href="#">world</a></li> </ul> </div> Now, if I use an inline style to remove the border, it displays as expected: Code: <li style="border: 0;"><a href="#">world</a></li> It also displays as expected if I redefine the scope of my style: Code: #bdrtest li.noborder {
border: 0;
}
I'd like to be able to use my .noborder style globally. Any idea as to what I'm doing wrong? how to create the free products heading over the border... with the border cut for tht part of the box ??? Hi, I'm trying to apply a background/border to a page. The site is at forsythproducedirect.com, and i'm trying to apply a similar background to pauleys.co.uk, minus the top green 'bar', so it'll just be running up the sides with the space behind the content still white. Does anyone have any idea how i'd go about it? I'd really appreciate any help! Cheers, Graeme Hi all currently trying to move away from a table based layout into a cleaner looking css layout with a problem. http://www.prxa.info/area51/viewtopic.php?tid=1 The top section is the css version, where as the bit below it is using tables. I am trying to get the "container" class to encompass the whole top bit which i am doing, but the border of it refuses to appear? This is the css bits html: Code:
<div class="container">
<div class="topicoptions">
<div style="float: left; width: 17%">
<a href="viewtopic.php?tid={$post['topic_id']}" class="topicoptions">#{$this->post_count}</a>
</div>
<div style="float: right; width: 83%; text-align: right;">
{$this->mod_options} {$topic_options}
</div>
</div>
<div style="float: left; width: 17%">
<div class="contentbox">
<div align="center">
{$avatar}
{$lang['postedby']} {$profile_link} <br />
{$post_count}<br />
{$lang['postedon']}: {$date_time}
</div><br />
</div>
</div>
<div style="float: right; width: 83%; text-align: left;;">
<div class="contentbox1">
{$post['text']}
<br />
<br />
{$signature_finish}
{$edited}
</div>
</div>
</div>
As you can see "container" covers all of it, and the css is simply a 1px border, i cannot see where i am going wrong. Thanks for taking the time to read my question. I want to get rid of the right border on the last link but keep the borders on the rest of the <li>'s. I'm totally stuck. Thanks, Brad CSS: Code: #navcontainer ul
{
padding-left: 40px;
margin-left: 0;
background-color: #000000;
color: #000000;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #000000;
color: #ffffff;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}
li.LastOne a.ALastOne {
color: red;
}
HTML: Code: <div id="navcontainer"> <ul id="navlist"> <!--<li id="active"><a href="#" id="current">Item one</a></li>--> <li><a href="#">Seminars</a></li> <li><a href="#">Stand-Up</a></li> <li><a href="#">Intro Psych</a></li> <li><a href="#">Selected Transcripts</a></li> <li><a href="#">Broadcast Archives</a></li> <li><a href="#">Pricing & Inquiries</a></li> <li class="LastOne"><a class="ALastOne" href="#">Links</a></li> </ul> </div> I'm having trouble with image borders showing up in browsers- From my style sheet: img { border: #FFFF91; border-width: 5px; } It's weird- it works on my header image for each page, but not the rest of my images... I tried to post the link, but I just registered today and this is my first post, so I can't... Much, much thanks for any help! claytablet Hey everyone! So I'm trying to make a site. I'm not using any tables, and I want to have a border for each side of the page. I can't use a background because the page changes width based on the users browser width. My CSS and HTML are verified. Anyways, for the right and left borders, this is the code I have: HTML: Code: <!-- Border --> <div id="left_border"></div> <div id="right_border"></div> <div id="left_border_top"></div> <div id="right_border_top"></div> <!-- End Border --> and for the CSS I have this: Code:
/*Site Border Full*/
#right_border{
background-image: url(img/layout/site_right_border.jpg);
background-repeat: repeat-y;
width: 3px;
height: 100%;
float: right;
position: absolute;
right: -3px;
}
#left_border{
background-color: #94aec5;
width: 1px;
height: 100%;
float: left;
position: absolute;
left: -1px;
}
#right_border_top{
background-image: url(img/layout/header_right_border.jpg);
background-repeat: repeat-y;
width: 3px;
height: 74px;
float: right;
position: absolute;
right: -3px;
z-index: 1000;
}
#left_border_top{
background-color: #496986;
width: 1px;
height: 74px;
float: left;
position: absolute;
left: -1px;
z-index: 1000;
}
/*End Site Border Full*/
Here's the results I'm getting in Firefox: As you can see the border displays until you get to the content area (with the text below). It seems to be because for the content area, I set the height to 100%. When I change that to a definite number (ie. 300px) the border displays. And here's how it displays in Internet Explorer 7: There's no border at all on this one! Here's my entire code for the site: HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site Beta</title>
<style type="text/css">
<!--
@import url("layout.css");
-->
</style>
</head>
<body>
<div id="container">
<!-- Site Head -->
<div id="header">
<div id="banner"></div>
<div id="header_user">
<div id="head_user_container">
<div id="head_avatar"><img src="img/layout/avatar_test.jpg" alt="User Avatar" /></div>
<div id="head_user_info">Welcome <a href="">Mike Jensen The Awesome Man </a>(<a href="">Sign Out</a>)<br /><a href="">Edit Profile</a><br /><a href="">Message Center</a></div>
<div id="head_user_end"></div>
</div>
</div>
</div>
<!-- End Site Head -->
<!-- Border -->
<div id="left_border"></div>
<div id="right_border"></div>
<div id="left_border_top"></div>
<div id="right_border_top"></div>
<!-- End Border -->
<!-- Menu -->
<div id="menu">
</div>
<!-- End Menu -->
<!-- Start Top Ad Banner -->
<div id="top_ad">
</div>
<!-- End Top Ad Banner -->
<!-- Main Content Container -->
<div id="main_content_container">
<div id="main_content">woo hoo</div>
<div id="right_content">right poop</div>
</div>
<!-- End Main Content Container -->
</div>
</body>
</html>
and CSS: Code:
/*Basic Elements*/
body {
font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
font-size: 13px;
color: #303030;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0 20px;
background-color: #d8d8d8;
}
p {
margin-top: 10px;
text-align: justify;
font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
font-size: 13pt;
line-height: 10pt;
}
a:link {
text-decoration: underline;
color: #417cb3;
}
a:visited {
text-decoration: underline;
color: #417cb3;
}
a:hover, a:active {
text-decoration: underline;
color: #5e9cd5;
}
acronym {
font-weight: bold;
border-bottom: 1px dotted #417cb3;
}
/*Specific DIVs*/
#container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
max-width: 1200px;
min-width: 950px;
text-align: left;
position: relative;
background-color: #d8d8d8;
}
/*- Banner -*/
#header{
background-color: #417cb3;
height: 74px;
width: 100%;
clear: both;
float: left;
}
#banner{
background-image: url(img/layout/banner.jpg);
background-repeat: no-repeat;
float: left;
width: 284px;
height: 74px;
}
#header_user{
height: 66px;
float:right;
position: relative;
margin-top: 4px;
margin-right: 7px;
}
#header_right_border{
width: 3px;
height: 74px;
background-image: url(img/layout/header_right_border.jpg);
background-repeat: repeat-y;
float: right;
position: absolute;
right: 0px;
}
/*End Banner*/
/*Head User Info*/
#head_user_container{
clear: both;
height: 66px;
position: relative;
}
#head_avatar{
background-image: url(img/layout/ban_avatar_bg.jpg);
height: 66px;
width: 64px;
float: left;
background-repeat: no-repeat;
padding-top: 1px;
padding-left: 1px;
}
#head_user_info {
background-image: url(img/layout/logged_info_bg.jpg);
background-repeat: repeat-x;
min-width: 225px;
max-width: 500px;
float: left;
height: 66px;
margin-left: -1px;
font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
padding-top: 4px;
padding-right: 3px;
padding-bottom: 0px;
padding-left: 5px;
}
#head_user_info a:link {
text-decoration: none;
color: #5dbdfa;
}
#head_user_info a:visited {
text-decoration: none;
color: #5dbdfa;
}
#head_user_info a:hover, a:active {
text-decoration: none;
color: #7fc9f8;
}
#head_user_end {
float: left;
background-image: url(img/layout/logged_info_end.jpg);
background-repeat: no-repeat;
height: 66px;
width: 3px;
}
/*End Head User Info*/
/*Site Border Full*/
#right_border{
background-image: url(img/layout/site_right_border.jpg);
background-repeat: repeat-y;
width: 3px;
height: 100%;
float: right;
position: absolute;
right: -3px;
}
#left_border{
background-color: #94aec5;
width: 1px;
height: 100%;
float: left;
position: absolute;
left: -1px;
}
#right_border_top{
background-image: url(img/layout/header_right_border.jpg);
background-repeat: repeat-y;
width: 3px;
height: 74px;
float: right;
position: absolute;
right: -3px;
z-index: 1000;
}
#left_border_top{
background-color: #496986;
width: 1px;
height: 74px;
float: left;
position: absolute;
left: -1px;
z-index: 1000;
}
/*End Site Border Full*/
/*Menu*/
#menu{
background-color: #417cb3;
background-image: url(img/layout/menu_bg.jpg);
background-repeat: repeat-x;
height: 34px;
width: 100%;
clear: both;
}
/*End Menu*/
/* Top Ad Banner*/
#top_ad{
background-color: #ededed;
height: 109px;
width: 100%;
clear: both;
max-width: 1204px;
clear: both;
}
/*End Top Ad Banner*/
/* Main Content */
#main_content_container{
background-color: #ffffff;
background-repeat: repeat-x;
height: 100%;
width: 100%;
clear: both;
}
#main_content{
background-color: #cbe5ea;
float: left;
width: 77%;
height: 100%;
clear: both;
}
#right_content{
background-color: #b6c984;
float: right;
width: 23%;
height: 100%;
clear: right;
}
/* End Main Content */
/* Border Pull */
#border_pull{
height: 1px;
width: 100%;
clear: both;
max-width: 1204px;
clear: both;
}
/* End Border Pull */
So, is there any way for me to border the entire site with a 1 px border on the left side, and a y-repeating 3px image "border" on the right side? Any ideas would be GREATLY appreciated! If you need any more info than I've given you, please ask! Thanks guys! Mike I'm making a dashed border, and I was wondering how can I change the pixel size and color of the border? It's been awhile for me since I've used CSS or HTML but here's what I have(I know this isn't the proper formatting, but it's for a xanga site so the way it's entered doesn't really matter =\) <style="text/css"> #box { border-style:dashed; width:700px; position:absolute; } </style> <div id="box"> <div id="da"><p>Da..daa...da da Da</p> </div> <div id="muh"><p>muh numa nah</p> </div> </div> Hey on my website: http://www.chamillionairechat.com I want there to be a border around the mainmenu and to look something like this: And this is the css i'm using for the mainmenu: Code: .mainmenu { background-color:#FFFFFF; padding-bottom:5px; border:1px border-color:#21511F; }
So does anyone know what i'm doing wrong Thanks |
|||||||