Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-16-2011, 02:57 PM   PM User | #1
ASVincent
New to the CF scene

 
Join Date: May 2011
Location: Australia
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
ASVincent is an unknown quantity at this point
Table placed inline with heading

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

Last edited by ASVincent; 05-16-2011 at 02:58 PM.. Reason: poor wording
ASVincent is offline   Reply With Quote
Old 05-16-2011, 07:57 PM   PM User | #2
alykins
Senior Coder

 
alykins's Avatar
 
Join Date: Apr 2011
Posts: 1,608
Thanks: 37
Thanked 183 Times in 182 Posts
alykins will become famous soon enough
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;"
__________________

I code C hash-tag .Net
Reference: W3C W3CWiki .Net Lib
Validate: html CSS
Debug: Chrome FireFox IE
alykins is offline   Reply With Quote
Old 05-17-2011, 06:30 AM   PM User | #3
ASVincent
New to the CF scene

 
Join Date: May 2011
Location: Australia
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
ASVincent is an unknown quantity at this point
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.

Code:
#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>
ASVincent is offline   Reply With Quote
Old 05-17-2011, 10:47 AM   PM User | #4
AndrewGSW
Senior Coder

 
Join Date: Apr 2011
Location: London, England
Posts: 2,120
Thanks: 15
Thanked 354 Times in 353 Posts
AndrewGSW will become famous soon enough
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:
Code:
<header>
<!-- Page Header Text -->
</header>
<nav>
<!-- some navigational elements -->
</nav>
<content>

<!-- main content here -->

</content>
<footer>
<!-- Some footer info here -->
</footer>
Code:
<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>
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
AndrewGSW is offline   Reply With Quote
Reply

Bookmarks

Tags
css, inline, table

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:52 AM.


Advertisement
Log in to turn off these ads.