|
CSS - Div Cell-like Navigation
Howdy all, and thanks for reading.
I have a mainly CSS-based design, and I'm trying to continue that and stay away from tables, but the DIVs just don't want to cooperate on one area. Please visit the Virtual Tour section of this web site, click on any of the areas, and you will see the navigation at the bottom of the window that pops up. The stylesheet is local. It's especially bad in IE. I thought that maybe margins would help it, but the top and bottom seem to do nothing. I know that I could just put another DIV for the second row since I'm already defining the window width, but I'm using a database query for this, and the number of results could change often. I'd rather not resort to tables, but I may have to. Any help would be appreciated. -colin Similar TutorialsI have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well. Here is a setup of my table Code: <div id="Content">
<p class='instructions'>Click a column header to sort the table.</p>
<div spry:region="jdmba">
<div spry:state="loading" class="loading">Please wait while alumni data loads…</div>
<table class="spry" cellspacing="0" cellpadding="0">
<tr>
<th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
<th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
<th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
<th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
<th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
<th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
</tr>
</table>
<div class="Overload">
<table class="spry" cellspacing="0" cellpadding="0">
<tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
<td width="108px">{last}</td>
<td width="106px">{first}</td>
<td width="269px">{account}</td>
<td width="66px">{state}</td>
<td width="82px">{hls_year}</td>
<td width="82px">{hbs_year}</td>
</tr>
</table>
</div>
</div>
Here is my CSS file Code:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#News a:link {
color: #00F;
}
#News a:hover {
color: #00F;
text-decoration: underline;
}
body {
background: #000 repeat;
}
#wrap {
background: #000;
width: 900px;
border: thick solid #9C0029;
float: left;
height: auto;
padding: 0px 0px 1em;
margin-top: 2%;
margin-left: 10%;
}
#footer {
font: bold small/50px Arial, Helvetica, sans-serif;
color: #FFF;
background: #9C0029;
text-align: center;
height: 50px;
width: 850px;
margin-left: 25px;
}
#Header {
background: #8F001C url(../images/banner.jpg) no-repeat center center;
width: 850px;
height: 150px;
margin-top: 20px;
margin-right: 20px;
margin-left: 25px;
}
h1 {
font: normal 18px Arial, Helvetica, sans-serif;
color: #000;
text-align: left;
}
h2 {
font: small Georgia, "Times New Roman", Times, serif;
color: #333;
text-align: justify;
}
h3 {
font: normal medium "Times New Roman", Times, serif;
color: #FFF;
}
h4 {
font-size: small;
color: #333;
text-align: left;
}
.banners {
background: #FFF0B2;
width: auto;
height: auto;
font: 18px Arial, Helvetica, sans-serif;
padding-top: .5em;
padding-bottom: .5em;
text-indent: 10px;
}
.Content {
font: 14px/normal Georgia, "Times New Roman", Times, serif;
text-align: justify;
display: block;
padding: 2em 3em 3em;
}
.Content a:link {
color: #00F;
}
.Content a:hover {
color: #00F;
text-decoration: underline;
}
.Content a:visited {
color: #00F;
}
#inner_body {
background: #FFF;
height: auto;
width: 800px;
margin-top: 0px;
margin-left: 50px;
padding-top: 0.5em;
padding-bottom: .5em;
}
#inner_border {
margin: 0em auto auto;
border: thin solid #8E887C;
width: 775px;
padding: 1em 0em 0em;
}
#nav_bar {
height: 3em;
width: 100%;
margin-left: 0%;
text-align: center;
}
#Content {
height: auto;
width: 95%;
padding: 0em 0% 5em;
margin: 2.5% 2.55% 2%;
text-align: left;
font-family: Verdana;
}
#nav {
height: auto;
width: 20em;
}
#News {
margin-left: 2px;
height: 30%;
background: #FFF0B2;
padding: 3%;
}
#News a:visited {
color: #00F;
}
.Overload
{
height: 208px;
overflow: auto;
}
.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
font-family: Verdana;
font-size: 12px;
line-height:20px;
cursor: pointer;
}
.instructions {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-bottom:8px;
}
.loading {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-top:0px;
margin-bottom:8px;
color:#900;
}
table.spry th {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry td {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px; }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }
I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black. Any ideas? Thanks! currently i have links defined as a certain color and changes to a certain color when i hover over them.. i have a table which has these links inside the cells and when i hover over the cell, the background of the cell changes color but the link wont change color until i hover over the link.. is there anyway so that when i hover over the cell i can make the link change color too? the problem is i have some padding for the cells, so once i go inside the cell but dont hover exactly over the link, the background will change but the link won't until i hover over it thanks I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong. Correct look Incorrect look I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any. Here is my main CSS: Code:
body { background-color: #FFFFFF; }
a { text-decoration: none; font-weight: bold; }
a:link { color: #003366; background-color: transparent; }
a:visited { color: #003300; background-color: transparent; }
a:active { color: #339933; background-color: transparent; }
a:hover { text-decoration: underline; }
table { border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
td, th { border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
tr.one { background-color: #FFFFFF; }
tr.two { background-color: #DDDDDD; }
table.squares { border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
td.square { border: 1px solid grey; padding: 4px; }
td.nopadding { padding: 0px; }
.default { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
.h1 { font-size: 200%; font-weight: bold; text-align: center;}
.h2 { font-size: 120%; font-weight: bold; }
.h3 { font-weight: bold; }
.step { font-size: 150%; font-weight: bold; color: #999999; }
Here is one of the sets of squares: Code: <table class="squares">
<tr>
<td class="square" style="background-color: #CCCC66"></td>
<td class="square" style="background-color: #CC9966"></td>
<td class="square" style="background-color: #990000; border: black"><td>
<td class="square" style="background-color: #669966"></td>
<td class="square" style="background-color: #669999"></td>
</tr>
</table>
And finally, here is one of my progress bars: Code: <table style="color: white; width: 100px">
<tr>
<td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
<td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
</tr>
</table>
And in case that code is not enough, here is a link to the full HTML. According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers? My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work? Hi there! This might seem really basic but I don't seem to be able to remove the default border from a cell I created. The code looks like this: "<p> </p> <table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;"> <tbody> <tr> <td> <div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;"> <p align="center"> <img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" /> </p> <p align="center"> </p> <p> </p> </div> </td> </tr> </tbody> </table> <p> </p> How shall I do to hide the border? Thanks in advance! /Kristoffer Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! I have a table in which I use divs to put content, here's my simple table; Code: <table border='1' width='500'> <tr> <td colspan='2'><div id='navHeader'>Header</div></td> </tr> <tr> <td><div id='navContent'>content</div></td> <td class='fullheight' bgcolor='yellow'><div id='navSidebar'>nav bar</div></td> </tr> </table> and here's the CSS code Code:
#navHeader
{
margin: 10px;
border: 1px solid #000000;
}
#navContent
{
margin: 10px;
border: 1px solid #000000;
height: 500px;
padding: 10px;
}
#navSidebar
{
margin: 10px;
border: 1px solid #000000;
padding: 10px;
}
.fullheight
{
height: 100%;
}
you can see the result here : http://www.net-cube.ca/fullheight/ as you can see, the 'nav bar' isn't taking 100% in height. In the CSS, I defined a 100% height rule (fullheight) and I'm calling it in it's appropriate td cell, it's parent, to make it 100% full height, I painted it yellow. What I want, is that #id navSidebar div to take 100% of the cell height, like the 100% width. I know I should not be using tables, but I'm starting to get used to CSS, I was doing tables layout for years ... and years, so much clear for me now, I' m making the transition. My problem is that the 'navContent' div will be much longer in height than the navSidebar div, but I want them equals, how can I achieve that?? I could define '500px' in the navSidebar too, but I don't want to, I don't want to specify any length at all, this line will disappear when content will take place. Thanks Hello, I need to place an image in the bottom right-hand corner of a table cell. How would I do this using CSS, keeping in mind that text and other goodies are already present in the cell? I'd appreciate any advice. Thanks. I use Quote: <tr><td style="background-color: rgb(255, 255, 255); height: 100px;" colspan=9> </td></tr> and it creates the proper cell height but the color is not black. If I use PHP Code: <tr><td style="background-color: rgb(255, 255, 255); height: 1px;" colspan=9> </td></tr> the cell height does not collapse to 1px and the color is not black either. Any suggestions? Hi, Really new to this css stuff and i'm sure i'll get a beratting for asking such a simple question but here goes... What i need is a cell with a linked word in it. Initial state is white background with blue text. On rollover i would like the whole cell to turn blue with white text. I'm sure this is simple but just need a point in the right direction. Thanks for any help Tom How do i apply visible and formated border to a certain cells without afecting the entire column or row? Im using the border properties like: border-buttom-style border-top-style border-left-style border-right-style border-width border-color etc, etc, but when apply the style the colum or the row is affected entirely, this makes my top sliced image (header) with the separators visible. Im new to css and need some help in doing this. Thx Hi. I've got a question regarding placing an image within a table cell and using CSS to achieve a certain result. The table cell's width is determined at 530px, but the height is dependent on the actual length of the copy. What I'm looking to accomplish is have an image ghosted in the background of the text. It is supposed to appear in the lower right hand corner of the cell. I've already created the image with a transparent background, but it's not implementing correctly. Can I use a Z-Index style to achieve the item being placed under the text? Also, how do I make sure that the image is positioned in the lower right hand corner of the cell regardless of the height of the cell? Thanks! Simon315 I don't *think* there's a way to do this, but I figured I should ask. I'm looking ot generate an HTML table where each cell's background displays... say... a green circle. I'd prefer to avoid creating an image to do this, as some browsers retrieve the image over and over again for each occurence on page load, if there are mutliple occurences of an image on a page. Doesn't anyone know if there's a way to do this with CSS/HTML? Some other relatively easy & efficent way? I'm open to any suggestions. Thx! Steny Hey there. im working on a website project and want to remove the cellspacings.... Im working with mm dreamweaver and got this code from the reference which is buildin: "cell-spacing" but its not working... any ideas? Hi, Does anyone have any ideas or fixes to get an image to be 100% height of a table cell in IE. (XHTML Transitional) Here is an example http://www.degs.co.uk/test/css/height.htm Works fine in Mozilla/Firefox & Opera Code: html {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
height: 96%;
}
table {
padding: 0px;
height: 100%;
width: 700px;
border: 1px solid #000000;
}
.vdivider {
width: 5px;
height: 100%;
}
Cheers, Degs Hello folks, I have this page Code: (chep-net.com/main_nav) and on the left side of the table cell it always renders a small space. I tried cellpadding 0. Did I miss something? hi, is it possible to have a bg in a cell only to go half way accross the cell? Here's something strange. I'm seeing a problem in IE on Windows. I've built a progress bar using vbscript and css, but the table doesn't quite display the way I want it to. Here's demo code: Code: <html> <body bgcolor="dddddd"> <center> <table border="1" cellpadding="0" cellspacing="0" style="border: 1px solid #000; border-collapse: collapse; background-color: #000" width="100"> <tr><td id="pct_complete" width="50" bgcolor="black"> </td><td id="pct_remain" width="*" bgcolor="blue"> </td></tr> </table> </center> </body> </html> Now I've set the border to collapse, but if you load it up, you'll notice a white line between the two. I think it may be the way ie adds a 3d appearance to the table, but I can't figure out how to overcome it. Any ideas? Thanks! Hello, I have a table and I am styling its cells: table.Grid td {background-color: red;} Inside this table I will have some other tables but I don't want their cells to have the styles changed. I see two options: give a class to Grid table cells: table.Grid td.Grid {background-color: red;} Reset the changes in child tables: table.Child1 td, table.Child2 td, table.Child3 td {background-color: white;} But can I apply the following style: table.Grid td {background-color: red;} And make it only for the cells inside that table but not inside the child tables in this code line? ... without needing to reset the styles on child table cells or give main cells a class ... Thanks, Miguel Hello, I'm working on my first website, and so I've been doing a lot of research, but I've reached a problem I can't seem to solve on my own. I have a table and in one of the cells, I am trying to place a centered text with two stacked buttons to the right. I know I could create another table in just this cell, with the text having a row-span of 2, but that seems unnecessarily complicated. Is there an easier and/or more graceful solution using css? Here's what I want it to look like: http://img682. imageshack.us/img682/9208/goaln.png Here's what it currently looks like: http://img706. imageshack.us/img706/4108/currenty.png (Apparently, I am not allowed to post links as a new user. However, while I do not wish to break any forum rules, I feel that these images will help clarify what I am trying to accomplish.) Here's the code I have right now. html4strict Code: Original - html4strict Code <td> <div class="ounum">45</div> <div class="oubut"> <img id="ovr001" class="ou" alt="o" src="graphics/overRg.png" /> <img id="und001" class="ou" alt="u" src="graphics/undrRg.png" /> </div> </td> <td> css Code: Original - css Code div.ounum { float:left; vertical-align:middle; } div.oubut { float:left; display:inline; padding-left:2px; } img.ou { cursor:pointer; }
div.ounum {
hi all... i have a table cell "td" with 3 divs in it. what i need is to get it to align the top div to the top, middle div to the middle and 3'ed div to the bottom... this is all fine but i cant get to do that, and the auto increase height on the middle one dont work ? btw: this is for the IE style sheet, mozilla(firefox) works great.... frank/ |
|||||||