473,238 Members | 1,733 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,238 software developers and data experts.

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 5057
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

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

Similar topics

by: Peter Kennedy | last post by:
Hi, I'm having a spot of bother with floating images. I'm using the DMX2004 trial. Unfortunately, this would not work in NN7 & NN4.7 : The styles : 1, The div :
by: steven | last post by:
Hi, I can float the image left or right so the text will float around it, but only if the top of the image is aligned with the start of the paragraph. I'd like the image be a little below that, so...
by: John at Free Design | last post by:
Thanks in advance for the help and let me know if this should be posted to another MSDN. I am developing a web-based application in VS.NET2003 using VB. When I insert a graphic into a project...
by: RJ | last post by:
Hello! I am trying to lay out a left navigation column with a background image, where the left nav column runs the entire scrolled height/length of the page. The float:left column layout works...
by: Jacob | last post by:
Has anybody else encountered a problem when running your asp.net applications off your localhost and having broken image links? The weird thing is, the links aren't really broken. The reference...
by: cbjewelz | last post by:
hey I've been suffering from several float problems. I want a Title on the left to be aligned vertically with several links on the right. However with my code the Title is lower than the links....
by: DarkSaturn | last post by:
Is there a method of using the CSS float command on images to contain itself within a single paragraph? The problem I'm running into is trying to use float images on a listing page, I have an...
by: GloStix | last post by:
WARNING VIDEO TAKES A WHILE TO LOAD http://screencast.com/t/BWQ6DNtsM I really don't know how to fix this other than putting another div. But I dont' exactly want to do that for every page....
by: Airslash | last post by:
Hello, I'm currently rewriting an entire CMS into Ruby on Rails, but I have an isue with the CSS and generating the dropdown menu in HTML. Perhaps this is not entirely the correct forum as the...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.