[SOLVED] <a> links on same line with 'floating' (not   ) space between ?

akm · 02-20-2012 11:12 AM

Trying to put a couple text/object links on page at opposite sides of the page and on the same line (per code below).

  sort-of works, but wraps text/objects prematurely when page window is made smaller.

Code:

<div>  
<style="float: left; text-align: left;">
<a href="{$mybb->settings['bburl']}/search.php">
<img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="">
{$lang->toplinks_search}
</a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<style="float: right; text-align: left;">
<a href="http://www.forum.info/index.htm"> 
<font size="4;" color="#0066CC"> Go to Location (click here)</font>
</a>
</div>

Tried looking at places like http://www.w3schools.com/tags/ etc, but seems like there is not a good spacer tag that does what need.

Suggestions on place/s to look ?

Also, any other comments on way trying (ie code crudeness) to do it would be appreciated.

Ps: Sorry for all the beginner mod questions. If not wanted, please let know better place to post.

Sama34 · 02-20-2012 11:38 AM

Why not using the white-space property or the margin one?

leefish · 02-20-2012 12:17 PM

You could try this :

HTML Code

<div style="width:100%;">
<div><a href="http://www.leefish.nl/mybb/portal.php">HALLO</a></div>
<div style="float:right;margin-top:-25px;"><a href="http://www.forum.info/index.htm">goodbye</a></div>
</div>

akm · 02-20-2012 12:36 PM

(02-20-2012 11:38 AM)Sama34 Wrote: Why not using the white-space property or the margin one?

Thanks much !
Added to code (hope did right) below (part of template: header) and works like advertised.

Code:

<head>
<style type="text/css">
p
{
white-space:nowrap;
}
</style>
</head>
<div>  
<p>
<a href="{$mybb->settings['bburl']}/search.php">
<img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="">
{$lang->toplinks_search}
</a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="http://www.forum.info/index.htm"> 
<font size="4;" color="#0066CC"> Go to Location (click here)</font>
</a>
</div>

Also looking at if possible to make so <a> text links on each side be able to wrap on each other without crossing the 'space' in between ?

akm · 02-20-2012 07:29 PM

(02-20-2012 12:17 PM)leefish Wrote: You could try this :
HTML Code
<div style="width:100%;">
<div><a href="http://www.leefish.nl/mybb/portal.php">HALLO</a></div>
<div style="float:right;margin-top:-25px;"><a href="http://www.forum.info/index.htm">goodbye</a></div>
</div>

Thank you for the suggestion !
Tried and got scrnshot attached.

Think did it per suggestion, but may have missed something ?...

Code:

<div style="width:100%;">
<div>
<a href="{$mybb->settings['bburl']}/search.php">
<img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="">
{$lang->toplinks_search}
</a>
</div>
<div style="float:right;margin-top:-25px;">
<a href="http://www.homepage.info/index.htm"> 
Return to homepage (click here)
</a>
</div>
</div>

leefish · 02-22-2012 03:40 AM

Hmm. It looks like the default font size and also that the div is inheriting from something higher up on the page. I just ran that through FF on a page with no CSS using default browser and it behaved as expected. Are you trying for a tableless theme?

If you don't mind using tables then the default template forum display threadlist pretty much does what you are looking for - look at the default on threadlist - title on the left and subscribe to thread on the right.

akm · 03-28-2012 06:20 AM

(02-22-2012 03:40 AM)leefish Wrote: Hmm. It looks like the default font size and also that the div is inheriting from something higher up on the page. I just ran that through FF on a page with no CSS using default browser and it behaved as expected. Are you trying for a tableless theme?
If you don't mind using tables then the default template forum display threadlist pretty much does what you are looking for - look at the default on threadlist - title on the left and subscribe to thread on the right.

Thanks much !
Tables worked fine.
Just took me a while to get back to the question and learn a bit about tables.

Threaded Mode \| Linear Mode Standard Tools
Forum Jump: View a Printable Version Send this Thread to a Friend Subscribe to this thread