...

View Full Version : Table placed inline with heading



ASVincent
05-16-2011, 02:57 PM
Hey,
I want to be able to place a table inline with a heading

it appears as



HEADING

TABLE

but I want it to appear as



HEADING TABLE

I'm using the table to host navigation links for a tumblr page, I'm still playing with the code otherwise I would put it up.

I know I could use margins and absolute positioning, but wanted something more flexible. Inline display just seems to reduce the line breaks between the elements and not place them one after the other.

Alex

alykins
05-16-2011, 07:57 PM
need more info- can you post code?
guessing though you probably have width issues on your elements.
example:
if you only have 500 px to work with and your "header" is 300px and table is 300 then you can not have them inline... they will stretch to contain what is inside them unless you set width and also set "overflow: attribute;"

ASVincent
05-17-2011, 06:30 AM
I want to say firstly that I'm playing around with developing my own Tumblr style, it's essentially a personal project that let's me play with html and css.
I'm slowly getting the hang of it but I haven't been able to solve this yet.




#mainheading
{
font: 700 6em/0.5em aravil, sans-serif;
display:inline-block;
}
#mainheading a
{
text-decoration:none;
color:#94581A;
}
table
{
display:inline-table;
table-layout:fixed;
border-collapse:collapse;
empty-cells:show;
}
td
{
border: 1px solid #757374;
width:8em;
height:2.5em;
text-align:center;
vertical-align:center;
}
...
<header>
<h3 id="mainheading"><a href="http://clipsnquips.tumblr.com">{Title}</a></h3>
<nav>
<table>
<tbody>
<tr>
<td id="bggreygreen"><a href="http://clipsnquips.tumblr.com/profile">Living Wall</a></td>
<td id="bgyellowgrey"><a href="http://clipsnquips.tumblr.com/events">On Agenda</a></td>
<td id="bgdarkyellowgrey"><a href="http://clipsnquips.tumblr.com/query">Will You Query Me?</a></td>
</tr>
<tr>
<td id="bgyellowgrey"><a href="http://clipsnquips.tumblr.com/links">The Wine List</a></td>
<td id="bgdarkyellowgrey"><a href="http://clipsnquips.tumblr.com/linksImg">~In Images</a></td>
<td id="bggreygreen"><a href="http://clipsnquips.tumblr.com/search">Discovery</a></td>
</tr>
<tr>
<td id="bgdarkyellowgrey"><a href="http://clipsnquips.tumblr.com/media">White Noise</a></td>
<td id="bggreygreen"><a href="http://clipsnquips.tumblr.com/mediaImg">~In Images</a></td>
<td id="bgyellowgrey"><a href="http://clipsnquips.tumblr.com/feedback">Feedback</a></td>
</tr>
</tbody>
</table>
</nav>
<hr />
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
<hr />
</header>

AndrewGSW
05-17-2011, 10:47 AM
You've wrapped all of your content within a <header> tag and also within a <nav> tag. It is intended to be structured like this:


<header>
<!-- Page Header Text -->
</header>
<nav>
<!-- some navigational elements -->
</nav>
<content>

<!-- main content here -->

</content>
<footer>
<!-- Some footer info here -->
</footer>

<header>

</header>
<h3 id="mainheading"><a href="http://clipsnquips.tumblr.com">{Title}</a></h3>
<content>
<table>
<tbody>
<tr>
<td id="bggreygreen"><a href="http://clipsnquips.tumblr.com/profile">Living Wall</a></td>
<td id="bgyellowgrey"><a href="http://clipsnquips.tumblr.com/events">On Agenda</a></td>
<td id="bgdarkyellowgrey"><a href="http://clipsnquips.tumblr.com/query">Will You Query Me?</a></td>
</tr>
<tr>
<td id="bgyellowgrey"><a href="http://clipsnquips.tumblr.com/links">The Wine List</a></td>
<td id="bgdarkyellowgrey"><a href="http://clipsnquips.tumblr.com/linksImg">~In Images</a></td>
<td id="bggreygreen"><a href="http://clipsnquips.tumblr.com/search">Discovery</a></td>
</tr>
<tr>
<td id="bgdarkyellowgrey"><a href="http://clipsnquips.tumblr.com/media">White Noise</a></td>
<td id="bggreygreen"><a href="http://clipsnquips.tumblr.com/mediaImg">~In Images</a></td>
<td id="bgyellowgrey"><a href="http://clipsnquips.tumblr.com/feedback">Feedback</a></td>
</tr>
</tbody>
</table>
<hr />
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
<hr />
</content>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum