Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Location
    Australia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,740
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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

  • #3
    New to the CF scene
    Join Date
    May 2011
    Location
    Australia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •