Forum Moderators: not2easy
What I want to do is have the arrow 80ish% in the table, and 20% out of it. You know, like overlaying the table.
The tricky part is that I need the shadow (on the arrow and the border of the table) to align.
I have no idea how to go about this. I am basically a beginner with this sort of stuff (I do know CSS commands and html, I just don't know which ones to use here).
Any help would be appreciated.
[edited by: SuzyUK at 7:01 am (utc) on June 16, 2009]
[edit reason] no URIs per Charter [WebmasterWorld.com] [/edit]
sorry, no URI's allowed, image examples can and do disappear or change so later readers won't know what we're chatting about - your description of the problem is fine :)
1st things first are you actually using an HTML table and if so how/where are the background borders set?
The thing is, you can't position an image outside/overlaying a table, which is why table layouts usually land up being on over complex grid to accommodate sliced graphics :(
if you give us a small sample of your actual skeleton code (& describe any fixed dimensions) we can see more clearly and can possibly help suggest a more efficient way
thanks
Ok so yeah I have a complex set of tables lol (needed to work better with drupal as a theme).
All styles are in css with the tables linked via ID tags.
I'll try explain my architecture:
- Table (5 rows: Logo, Content, Primary Links, Secondary Links, Footer)
- This is all happening inside the Content row:
- Table (3 columns: Shadow bordered image. 4 rows: Menu, Header, Content Upper, Content Lower)
- Then I want the arrow to (/appear) be over the Header row. More specifically, look like it is connected to the shadow border in column 1, but extending into column 2
This is my code for it. Might make more sense lol.
<table id="archTable" cellspacing="0">
<tr>
<td id="logo">
<a href="index.php" title="Home"><img src="logo.png" alt="Home" id="logo"/></a>
<div id="login"></div>
</td>
</tr>
<tr>
<!-- This cell contains the main content window -->
<td id="mainTd">
<!-- This table is the skeleton for the content window; contains top border, navigation, subnav, main content, secondary content and the bottom border -->
<table cellspacing="0" id="mainTable">
<tr>
<td id="mT_topleft"><!-- Top left corner for rounded, shadow edging --></td>
<td id="mT_top"><!-- Top border, shadow edging --></td>
<td id="mT_topright"><!-- Top right corner for rounded, shadow edging --></td>
</tr>
<tr>
<!-- Menu -->
<td id="menu_left"><!-- Left border of the menu --></td>
<td id="menu_td"></td>
<td id="menu_right"><!-- Right border of the menu --></td>
</tr>
<tr>
<td id="header_left"></div></td>
<td id="header_td"></td>
<td id="header_right"></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
HEADER_LEFT and HEADER_TD are the cells I want the arrow at.
Now I thought about using a div tag inside the cell and it works. But I don't know how to position it....
<div id="header_tag"></div>How do I position a div element so that on all browsers and through resizing it stays in the same place?
[edited by: GenericBox at 9:35 am (utc) on June 16, 2009]
td#header_right {
height: 96px;
height: 16px;
background-image:url(images/header_right.png);
background-position: left top;
background-repeat: no-repeat;
}
td#header_td {
height: 96px;
background-image:url(images/header_bg.png);
background-position: top;
background-repeat: repeat-x;
}
td#header_left {
height: 96px;
width: 15px;
background-image:url(images/header_left.png);
background-position: right top;
background-repeat: no-repeat;
}
div#header_tag {
height: 47px;
width: 80px;
background-image:url(images/header_tag.png);
background-position: left;
background-repeat: no-repeat;
overflow: visible;
position: relative;
float: inherit;
}
#HEADER_TAG is the Arrow div.
[edited by: GenericBox at 9:35 am (utc) on June 16, 2009]
