470,814 Members | 773 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,814 developers. It's quick & easy.

Broken Float with Links and Text or Image

I arrived here from a websearch that found this thread from your archives:
It helped me to understand that I am on the right track, but I still have one problem surrounding this issue.
I am trying to make a <div> block that contains
a) a link
b) an arrow or an image of an arrow
c) another link
d) another link floated off to the far right
All of this must be on one horizontal line.
The problem occurs with b) because if I use a text arrow like " -> " it breaks the float. I cannot assign the class of float to it that I am able to assign to items a) and c). If I use an image arrow I can assign the float to it, but the image won't properly align vertically. I have tried vertical-align: text-bottom, vertical-align: middle, vertical-align: baseline. No matter what, that image sits up at the top between the links a) and c) and looks ridiculous. The image is only 4px high, and my text size is 10px.
Just now I added whitespace (transparent) to the image and it does give the appearance that I want, but I am still befuddled about the real problem.

I need to learn why I cannot make images display where I tell them, and why it doesn't work when I use a text arrow.

Here are the relevant bits of code:
[PHP]img {
border: none;
vertical-align: text-bottom;

.navbox {
background-color: #FFFFFF;
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
clear: both;
vertical-align: bottom;

.nav {
color: #000000;
font-size: 10px;
font-weight: bold;
vertical-align: bottom;
float: left;
display: inline;

.navr {
color: #000000;
font-size: 10px;
font-weight: bold;
vertical-align: bottom;
float: right;
text-align: right;
display: inline;

[PHP]<div class="navbox">
<a href="{U_INDEX}" class="nav">{L_INDEX}</a><img src="templates/Sampler/images/arrow10.gif" width="24" height="10" class="nav"><a href="{U_VIEW_FORUM}" class="nav">{FORUM_NAME}</a>
<!-- BEGIN switch_user_logged_in -->
<a href="{U_MARK_READ}" class="navr">{L_MARK_TOPICS_READ}</a>
<!-- END switch_user_logged_in -->

I'm doing this for a phpBB message board. If there are unreasonable bits of detail in my css it is because I have tried so many things that had no affect whatsoever, I just left them in there in some cases.

Help. :o
Aug 1 '06 #1
9 4812
1,071 Expert 1GB
you dont really have to use css, to get text on the same line,
heres what i use, a simple table.

try this out
Expand|Select|Wrap|Line Numbers
  1. <table width="100%"><tr width=100%><td valign=left width=50%><TT>{L_INDEX}->{FORUM_NAME}</TT></td><td valign="right" width=50%><TT>{L_MARK_TOPICS_READ} </TT></td></tr></table>
you can take out the <TT> tags, i just thought it would look cooler,
let me know if that works for you.
Aug 1 '06 #2
Yes, I realize that all of this can be accomplished with tables. The objective is no tables. I'm sure I forgot to make that part clear. <sorry>
Aug 1 '06 #3
1,071 Expert 1GB
Heres a way, CSS Absolute Positioning

Absolute Postioning places text, tables, images, whatever, into an exact area on the page, get it?

This is an example, with CSS in the html page:
<style type="text/css">

<h2 class="pos_abs">This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>


if you are using external CSS, take out
Expand|Select|Wrap|Line Numbers
  1. h2.pos_abs
  2. {
  3. position:absolute;
  4. left:100px;
  5. top:150px
  6. }
and put it into your css page.
then just use
Expand|Select|Wrap|Line Numbers
  1. <h2 class="pos_abs">This is a heading with an absolute position</h2>
  2. <p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>
as your body...

let me know if this helps :D
Aug 2 '06 #4
9,065 Expert Mod 8TB
I advise against using absolute positioning except in small controlled doses, it really mucks up the layout of the rest of the page unless you are very careful.

I would use absolute positioning in 2 cases
  1. In side a specific element that is not absolutely positioned with the position: relative; style. This positions the absolutely positioned sub-elements relative to the origin of their relatively positioned parent.
  2. To move an element into a position that you have used css to specifically clear of other elements, for instance use the padding style to create a 200px border of the left hand side of the page, use absolute positioning to place a div in that location.

There are at least 2 problems with absolute positioning that I see
  1. An absolutely positioned element is removed from document flow. This means that any non-absolutely positioned elements that follow it are not automatically flowed round or beneth it. For example If you absolutely position your header at top=50px left=20px but don't absolutely position your content then the content will start at y=0px and overlap the header because the position and size of the header is not consider when the browser decideds to place the content.
  2. Because of the effect stated above many people absolutely position everything, you then end up with a very static site that does not flow as the browser changes size. Of course that depends on if you want your site to have a fluid feel or a static feel.

On the CSS you posted
  • display: inline; is not required with float (and may be causing it to display improperly). A floated item is (by definition) a block displayed item.
  • When using float (left or right) then unless the item being floated is an image (with a calculatable size) you have to specify a width for the floated item.
  • The vertical-align style needs to be applied to the image not the text round the image.

I think if you fix those 3 things then what you have will work with either an image or text arrow.
Aug 2 '06 #5
I went through all of my stylesheet and removed display: inline from every float. No change was made to my layout, so that's great!

I'm confused about the second thing you said about specifying the width of a floated element. I can't do that because the language of these links is generated by php based on the name users (administrators) apply to their forums, and to other relevant data. My intention is to use this "navbox" format in various places and so its content will change across my forum, and in order for it to be a real template it must work for every user.

I did specify the dimensions of the arrow graphic in the content. Every time I've changed the dimensions of the silly thing I've changed it in the content! ;)

I did apply the vertical-align style to the image in the stylesheet.

Here are three screenshots that will demonstrate.
If I use the image, it does not break, but I cannot have spaces or it does. Right now I have the appearance that I want (not shown here) by manipulating the transparent pixels around the edge of the image. If I don't do that, it stays pinned to the top line of the text, no matter what vertical-alignment value I assign.

If I use no arrow at all it does not break, but looks very bad.

If I use the text arrow, it breaks.

Aug 2 '06 #6
I have learned today what you meant by specifying width! Tomorrow I will try putting what I've learned about width-specified floats to the problem area described in this thread, and will post back. :)
Aug 3 '06 #7
9,065 Expert Mod 8TB
OK I realise that I may have misled you about the vertical-align style. It will only work across inline styles that are in the same block element (which is reasonable).

However as I stated in an earlier post the float style causes the elements to have block display so the vertical align wont work.

However I have a lternate suggestion

Rather than float Main Index -> General on the left just put it in the div, it should just work a normal text. The only thing you really need to position is the 'Mark All Topics Read'

<div id="forum_title">
<a style="float:right" href="">Mark all topics read</a>

<a href="">Main Index</a>
<img src="Arrow.gif">
<a href="">General</a>
Aug 3 '06 #8
I finally figured it out. I had not enclosed the left grouping in a span. When I do that, it works beautifully with a text arrow and / or an image arrow (transparent area redefined). I'm so relieved to have finally figured this out! Here is the code I am using:
Expand|Select|Wrap|Line Numbers
  1. .navbox {    
  2.     background-color: #FFFFFF;
  3.     border-style: solid;
  4.     border-color: #000000;
  5.     border-top-width: 1px;
  6.     border-right-width: 1px;
  7.     border-bottom-width: 1px;
  8.     border-left-width: 1px;
  9.     font-family: Verdana, Arial, Helvetica, sans-serif;
  10.     color: #000000;
  11.     font-size: 10px;
  12.     font-weight: bold;
  13.     margin: 0px 0px 0px 0px;
  14.     padding: 0px 0px 0px 0px;
  15.     clear: both;
  16. }
  18. .nav {
  19.     float: left;
  20. }
  22. .navr {    
  23.     float: right;
  24.     text-align: right;
  25. }
Expand|Select|Wrap|Line Numbers
  1. <div class="navbox">
  2.    <span class="nav"><a href="{U_INDEX}">{L_INDEX}</a><img src="templates/Sampler/images/arrow10.gif" width="24" height="10" /><a href="{U_VIEW_FORUM}">{FORUM_NAME}</a></span>
  3.    <!-- BEGIN switch_user_logged_in -->
  4.    <span class="navr"><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></span>
  5.    <!-- END switch_user_logged_in -->   
  6. </div>
Thank you, Banfa, for listening and especially for forcing me to rethink the entire process. I found that I had bad errors in margin, padding, and border, and just the whole premise was wrong.

One tip I can pass along is to set a black 1px border around things. It enables you to see things you never knew were there! :D Then change it to the proper color once things are set -- which is what I am about to do now.
Aug 3 '06 #9
9,065 Expert Mod 8TB
One tip I can pass along is to set a black 1px border around things. It enables you to see things you never knew were there! :D Then change it to the proper color once things are set -- which is what I am about to do now.
Err I meant to tell you about doing this earlier :o

Sorry, I often do this and sometime go further giving different styles different colour borders so that you can see exaclty where each style is positioned.

Anyway I am glad you found a solution :D
Aug 3 '06 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

20 posts views Thread by Peter Kennedy | last post: by
9 posts views Thread by steven | last post: by
18 posts views Thread by John at Free Design | last post: by
7 posts views Thread by Jacob | last post: by
1 post views Thread by Airslash | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.