Hi,
I have a horizontal css list and I'd like its last item to be aligned
to the right end
of the space given to the list. I can separate it from the rest with
margin-left: 10em, but that's very error-prone (different resolutions)
and
just doesn't look that good.
Using align: right doesn't work. Using float: right almost works.
The item is then right-aligned, but it's not in the list anymore but
one
line under it.
Anyone with an answer? 7 7830
vulpes wrote:
Hi,
I have a horizontal css list and I'd like its last item to be aligned
to the right end
of the space given to the list. I can separate it from the rest with
margin-left: 10em, but that's very error-prone (different resolutions)
and
just doesn't look that good.
Using align: right doesn't work. Using float: right almost works.
The item is then right-aligned, but it's not in the list anymore but
one
line under it.
Anyone with an answer?
URL to what you are trying....
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
vulpes wrote:
>URL to what you are trying....
... is (or better said a minimal example)
http://www.cis.hut.fi/ntvuok/tmp/index.html
Not perfect, works in gecko and Opera. IE7 needs a tweak for your
border. Fails in IE6 but so does your original. Your attempt at XHTML
isn't helping if you wan IE on board...reasons much discussed here...
#navlist {
background: #eee;
position: relative;
border-top: #ffa500 1px solid;
border-bottom: #ffa500 1px solid;
overflow: hidden; /* <- Add to contain floats */
}
#navlist li {
display: block; /* <- make floats to left */
float: left;
}
#navlist li a {
color: black;
text-decoration: none;
padding: 0 1em 0 1em;
}
#navlist li.current a {
background: #ddd;
}
#navlist li a:hover, #navlist li a:focus {
background: #d1e5fd;
}
#navlist li#rightAlign {
float: right; /* <- make last float to right */
}
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
Wow, many thanks to you!
I'll probably look at IE compatibility later on. The
site'll be non-commercial so as far as I care IE users
can burn, but others in the team might have other
opinions...
In article
<13************ *************** *******@a9g2000 prl.googlegroup s.com>,
vulpes <ni*********@tk k.fiwrote:
I have a horizontal css list and I'd like its last item to be aligned
to the right end
of the space given to the list. I can separate it from the rest with
margin-left: 10em, but that's very error-prone (different resolutions)
and
just doesn't look that good.
Using align: right doesn't work. Using float: right almost works.
The item is then right-aligned, but it's not in the list anymore but
one
line under it.
Anyone with an answer?
Float right inline can be made to work if the rightmost item actually
comes first in the list. It is taken out of the flow. There were some
positioning issues with Firefox.
See experiment http://ericlindsay.com/palmtop/palmnote.htm
-- http://www.ericlindsay.com
In article
<NO************ *************** ********@freene ws.iinet.net.au >,
Eric Lindsay <NO************ *@ericlindsay.c omwrote:
Float right inline can be made to work if the rightmost item actually
comes first in the list. It is taken out of the flow. There were some
positioning issues with Firefox.
See experiment http://ericlindsay.com/palmtop/palmnote.htm
Yes, there is a difference with FF. Mentioned in these ngs from time to
time. Perhaps also see:
<http://netweaver.com.a u/floatHouse/page5.html>
There are links to some appendices on this and, there, find further
links to screenshots for different browsers.
BTW, floats are always "taken out of the flow".
--
dorayme
Actually I now found an even better solution myself. The problem with
Jonathan's solution was that it then eventually prevented any submenus
from showing. The following solutions works around this and should
be quite usable across browsers:
#navlist {
background: #eee;
position: relative;
border-top: #ffa500 1px solid;
border-bottom: #ffa500 1px solid;
}
#navlist li {
display: inline; /* Make list horizontal */
list-style-type: none;
}
#navlist li a {
color: black;
text-decoration: none;
padding: 0 1em 0 1em; /* Make entries 'airy' */
}
#navlist li.current a {
background: #ddd;
}
#navlist li a:hover, #navlist li a:focus {
background: #d1e5fd;
}
#navlist li#rightAlign {
position: absolute;
right: 0; /* Fit the entry right next to the end. */
}
/* Don't show any submenus for pages that don't have submenus. */
#navlist ul {
display: none;
}
/* The current submenu is shown. */
ul#currentSubna v {
display: block;
font-size: 90%;
position: absolute; /* Fit the submenu to the left border */
left: 0;
right: 0; /* Make the submenu span the whole width */
background: #ddd;
border-top: #ffa500 1px solid;
border-bottom: #ffa500 1px solid;
}
ul#currentSubna v li.current a {
background: #bbb;
}
ul#currentSubna v li a:hover, ul#currentSubna v li a:focus {
background: #fde5d1;
} This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: ciwstudy |
last post by:
I'm having problems getting the height to compress for a horizontal
list in IE (styled with CSS). It works fine in other browsers.
Does anyone know a way to fix this?
http://www.uky.edu/Home/Web/newnavbar/
|
by: PC |
last post by:
Hi,
I have used the DLast("!","")function
to find and display the last entry in a table. How would I go about
displaying the last record in a table that is not Null?
Thanks in advance
...pc
|
by: David Messner |
last post by:
Ok I know this is simple but the statement eludes me...
I have a date field where I want the default value on the data entry form's
date field to be the last date entered. I figure I can do this with a query
but don't know what the criteria needs to be.
Any help would be appreciated,
Thanks
|
by: John Veldthuis |
last post by:
My code works perfectly 100% when adding items to my ArrayList and updating the listbox.
Works perfectly when deleting an item in the ArrayList when it is not the last entry but if it is
the last entry and you select another index it goes boom!!!.
Funny thing is the SelectedIndex Changed routine fires off perfectly and then crash after the return
from this code.
Now looking around the news groups it appears to be a bug in the .net...
|
by: Nathan |
last post by:
I am trying to prevent a horizontal list from wrapping. Each list item
is floated with "float: left".
Currently I use an ugly hack. I set the width of the list to a large
number which is guananteed greater than the total width of all items.
Is there a way to accomplish this without my hack? It would be handy
because I would like to read the total width of all items in
javascript. I looked into white-space: nowrap, but it doesn't work...
| |
by: Verona Busch |
last post by:
Hi everybody,
I am very happy to find this group. I am searching for a solution to
make a horizontal list menu with submenu on hover.
I found a lot of examples for horizontal lists which open vertical lists
on :hover i.e. http://phoenity.com/newtedge/horizontal_nav/
But what I am looking for is a horizontal list that opens another
horizontal list and both need to be right-floated.
|
by: irq3 |
last post by:
I want to make a horizontal list elements, whose widths are determined
by their "width" property. "width" doesn't work on inline elements, so
I can't use <spanas I normally would if the width was determined by
content.
I played around with float: left, display: block, position: absolute,
trying to get them to work properly and I've had some level of success,
but I'm looking for some advice from the gurus on how to do this
properly.
|
by: Sakakini |
last post by:
How can I append last entry from one table to another table???
|
by: Wernerh |
last post by:
Hi, I have created a log in a listbox to show users everytime someone has logged on. Is there a form load function that will scroll down the listbox to the last entry each time the form is loaded??
Thanks
|
by: Fuzz13 |
last post by:
I have 2 fields that will be inserted into my database ip address and datetime. Each time they are entered they are assigned a ScanID primary key so the value should increment with each entry. How do I select the last entry, the one with the highest ScanID or the one with the most current datetime?
I thought it would look like this:
var entry = (from s in context.tblIPAddresses
group s by s.ScanID into g
...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |