|
CSS - Border On Table Except The Outer Edges
Hi,
I'm trying to make a table that will hold a bunch of thumbnail images - three columns and however many rows are necessary. I would like this table to have a border on of the cells EXCEPT for any border on the outside of the table, so it should look like this: Code:
| |
----------------------
| |
----------------------
| |
Is there some nice little CSS code that will do this for me? I know that I can set the top right box's left and top border to 0, top right box's right and top border to 0 etc but I will be generating the table dynamically so it makes it harder to do the bottom three cells (still possible though, so I'll do it if I have to). Thanks Similar TutorialsI am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm Code:
.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
Code: <div class="container"> <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b> CONTENTS GOES HERE <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b> </div> the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close? thanks in advance for your help 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, 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? Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. i have my CSS and it wont fit to the very edges of the page - i have tried using Position:absolution, but that screws my alignment - any ideas? http://wakefieldfhs.co.uk/stu/ - The location of the page CSS Location I'm testing this page in FF 3.6, so at the moment, I don't really care what doesn't work in IE. As you can see in the code below, my page consists of a couple wrapper divs around a menu and info area. I did solid color backgrounds in the code below rather than the images I've been using to make this simpler to look at. Essentially, the outer wrappers allow part of the background image of the inner wrapper to disappear when the window is too small. In addition to that functionality, I also want the info area to shrink when the window gets even smaller than that. As it is currently, that almost works--the two wrappers shrink when I get below their max-width, but the info area does not shrink until the window is well within its max-width. Here's the code: Code: <html>
<head>
<style type="text/css">
body{
text-align: center;
}
#container {
background-color: red;
max-width:990px;
min-width:760px;
position: relative;
margin: 0 auto;
}
#content{
background-color: lightblue;
max-width:990px;
min-width:760px;
margin: 0 auto;
margin-left: -200px;
padding-left: 200px; /**allows 200px of background to disappear when window too small**/
text-align: left;
}
#menu{
background-color: #ffffcc;
width: 200px;
position: absolute;
left: -20px; /**allows hangover into disappearing background--no padding necessary since will be using img links**/
}
#info{
border: #000 1px solid;
max-width: 790px;
min-width:560px;
/**doesn't shrink when window below the max, even though container and content do**/
position: relative;
left: 180px; /**width of menu plus menu left **/
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="menu">
<img height="50" width="200" alt="link" /><br />
<img height="50" width="200" alt="link" /><br />
</div>
<div id="info">
<img height="500" width="400" alt="picture" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
Edit: I've found that if I make the menu relative positioned and position info absolute (and add top: 0px;) that I can get info to shrink properly. However, then the background from content is only as tall as the menu--which may or may not be shorter than the content in info. If I make the height of content 100% it looks ok, but not the way I'd like it to look. I can live with the extra background under the words in the case where there isn't enough to fill the whole height of the window, but if the window isn't tall enough for all the stuff in info, the background doesn't extend down far enough. Thanks for any ideas! I'm making a menu with buttons that have curved edges. I can make the edges and everything fine, but how can I make it so if I hover over the whole <li>, it changes the background of the 3 <span> tags underneath it? You'll understand when you see the demo. The menu I'm talking about is the orange bar. It won't work in IE, check it in Firefox, Safari, Opera, or Chrome. Try hovering over the menu items that aren't highlighted, and they don't light up. itsjareds.leadhoster.com/spogg/phoenix.html Sorry about the non-clickable link, user restrictions.. Post if you need any clarification (I know it's not clear). Is there anyway on CSS or javascript to do "smooth edges on screen fonts" for every user to view my web? styles.css Code:
.allRoundedCorners {
border-radius-topleft: 18px; -moz-border-radius-topleft: 18px; -webkit-border-top-left-radius: 18px;
border-radius-topright: 18px; -moz-border-radius-topright: 18px; -webkit-border-top-right-radius: 18px;
border-radius-bottomleft: 18px; -moz-border-radius-bottomleft: 18px; -webkit-border-bottom-left-radius: 18px;
border-radius-bottomright: 18px; -moz-border-radius-bottomright: 18px; -webkit-border-bottom-right-radius: 18px;
}
index.php Code: <div class="allRoundedCorners"> my text </div> This works ok in Firefox, Google Chrome and Safari. But fails to work in IE 9, Avant Browser 2012 build 8 and Opera 11.60 Can anyone suggest a possible fix or know how I can code it so the rounded edges of the DIV's have the rounded edge and not a boxed area. HI, Not only is this my first time posting, its my first site ever built using CSS (trying to learn as I go). The page displays fine in IE7 but my content boxes are outside of the wrapping container in Firefox, tried to figure it out myself, but don't really know enough yet. (URL address blocked: See forum rules) The CSS is embedded in the head of the page. Any help is much appreciated, Regards Fiona Hi, My CSS has a simple declaration for "A" href tags: Code:
a {
color:#8D603B ;
text-decoration: underline;
font-weight:bold;
}
a:visited {
color:#8D603B ;
font-weight:bold;
}
a:hover {
color:#A97043 ;
font-weight:bold;
}
So, this is used throughout the site. However, I want to specify a different style for the "A" tag if it is within a certain DIV. For example, Code: <div class="whitebox">This <a href='mypage.php'>link</a> displays fine because it is inside a white box.</div> <div class="blackbox">I want this <a href='mypage2.php'>link</a> to be white, since it is inside a black box.</div> The problem is - I can't simply add a "class" to the link tag - i.e. <a href='mypage2.php' class='whitelink'>link</a> - because all this will be remote authored via a CMS. Rather than adding complexity to my CMS - is there a simple CSS declaration to specify that all links within the "blackbox" DIV must be a different style (including the 'hover' effect)? Thanks very much! I have an HTML table that contains a lot of data, so I want to separate the rows and columns with a grid. Nothing out of the ordinary. Basically make it look like an excel spreadsheet. A grid. The basic HTML border=1 property works, but I want to make the border thinner, just 1px, using CSS. I'm very new to CSS though so I don't know how. I tried style="border: 1px solid" but that just makes a border around the outside of the table. I want every cell to be isolated. Any ideas? Thanks. Hello: I am building a ecommerce site, there are featured product on frontpage, I want to make a square border for each product, I have done top border and bottom border, but I don't know how to make the vertical lines on the right and left to make a nice square border with rounded corner the html structure is as followings table-----for the top border table-----to display product image and price, all that table-----for the bottom border I know by putting in css code for the middle table will be able to close this border could anyone tell me how? just getting into the css world for real, and im using it for the borders of a table: border:1px solid #000000; except this only does the outside border of the table, and not the borders for the rows/columns do i need to have another .cell in my css to get each one to work? Hi, I am having problem with the following table. It displays red border (#ff0000) around table in Internet explorer. In Firefox red border does not show at all. It is just #ccc. What can I do to have red border displayed in Firefox too? Code:
<table class="maintable">
<tr>
<th scope="col" nowrap>City</th>
<th scope="col">State</th>
<th scope="col">Zipcode</th>
</tr>
<tr><td align="center">London</td>
<td>England</td>
<td>12345</td>
</tr>
<tr><td align="center">Berlin</td>
<td>Germany</td>
<td>6789</td>
</tr>
</table>
.maintable {
line-height: 2.5em;
border: 1px solid #ff0000;
border-collapse: collapse;
}
.maintable th, .maintable td { padding: 0 5px; }
.maintable th {
border: 1px solid #ccc;
}
.maintable td {
border: 1px solid #ccc;
}
Thank you with border: 1px solid #FFFFFF; in css i got border only around the table I want the border to surround every cell of the table as it is with <table border="1" bordercolor="#FFFFFF" > how? I am having two problems with my tables right now: Within the style sheet, I have the following: table { border: thin #0000CC; } If I am not mistaken, this should make all tables that have a border of 1 or greater to automatically be thin and blue. This is not working... Why not? D Hi, I am making a website for my friend that lost her myspace acount becuase of here small uncle. So I want to make a website for her that is simmular to myspace. So my question is: How do I add in text up the top in the border that is 15xp? Thank you. Hi I'm sure this is an easy one, but I can't figure out how to create a table style sheet that does exactly what the following html does Code: <table width="100" border="0" cellspacing="0" cellpadding="0" bgcolor="blue"> <tr> <td bgcolor="yellow"></td> </tr> </table> I tried many different variations using the table-specific keys documented here but am unable to achieve the above effect. What's happening is that the yellow background of the "td.outlineCollapsed" style (below) has a 1 pixel inset on all sides from the edges of the "table.outlineBase" style box. With the html, by contrast, the yellow background of the <td> exactly overlaps the blue background of the containing table. The exact overlap is what I'm trying to acheive. Could someone take a look and tell me what I'm doing wrong? Thanks Ken Here's the css: Code:
table.outlineBase {
background-color: #888888;
width: 100%;
height: 20px;
/*
tried all of the following in many
different combinations. Nothing worked.
border-style: hidden;
border-collapse: collapse;
border-spacing: 0px;
border: outset 0px;
border-spacing: 0px;
border: inset 0px;
*/
}
table.outlineBase:hover {
cursor: pointer;
}
td.outlineCollapsed {
background-color: yellow;
width: 25px;
height: 20px;
}
|
|||||||