position in CSS background
Karsten Wade
kwade at redhat.com
Sun Jun 24 02:06:53 UTC 2007
- Previous message (by thread): web/html/docs/documentation-guide ch-getting-files-build-system-targets.php, NONE, 1.1 ch-getting-files-fdp.php, NONE, 1.1 ch-getting-files-filenames.php, NONE, 1.1 ch-how-modules-work.php, NONE, 1.1 ch-writing-guidelines.php, NONE, 1.1 ln-legalnotice-opl.php, NONE, 1.1 rv-revhistory.php, NONE, 1.1 sn-build-system.php, NONE, 1.1 sn-emacs-additional-resources.php, NONE, 1.1 sn-emacs-basic-commands.php, NONE, 1.1 sn-emacs-colors.php, NONE, 1.1 sn-emacs-examples.php, NONE, 1.1 sn-emacs-file.php, NONE, 1.1 sn-screenshots.php, NONE, 1.1 sn-tutorial-metadata.php, NONE, 1.1 sn-vim-additional-resources.php, NONE, 1.1 sn-vim-keymapping.php, NONE, 1.1 sn-xml-admon.php, NONE, 1.1 sn-xml-guidelines-header.php, NONE, 1.1 sn-xml-tag-sulink.php, NONE, 1.1 sn-xml-tags-application.php, NONE, 1.1 sn-xml-tags-chapter.php, NONE, 1.1 sn-xml-tags-citetitle.php, NONE, 1.1 sn-xml-tags-command.php, NONE, 1.1 sn-xml-tags-compoutput.php, NONE, 1.1 sn-xml-tags-emphasis.php, NONE, 1.1 sn-xml-tags-example.php, NONE, 1.1 sn-xml-tags-figure.php, NONE, ! 1.1 sn-xml-tags-filename.php, NONE, 1.1 sn-xml-tags-firstterm.php, NONE, 1.1 sn-xml-tags-footnote.php, NONE, 1.1 sn-xml-tags-gui.php, NONE, 1.1 sn-xml-tags-indexing.php, NONE, 1.1 sn-xml-tags-keycap.php, NONE, 1.1 sn-xml-tags-lists.php, NONE, 1.1 sn-xml-tags-option.php, NONE, 1.1 sn-xml-tags-para.php, NONE, 1.1 sn-xml-tags-part.php, NONE, 1.1 sn-xml-tags-prompt.php, NONE, 1.1 sn-xml-tags-replaceable.php, NONE, 1.1 sn-xml-tags-screen.php, NONE, 1.1 sn-xml-tags-sections.php, NONE, 1.1 sn-xml-tags-table.php, NONE, 1.1 sn-xml-tags-trademark.php, NONE, 1.1 sn-xml-tags-userinput.php, NONE, 1.1 sn-xml-tags-wordasword.php, NONE, 1.1 sn-xml-tags-xref.php, NONE, 1.1
- Next message (by thread): position in CSS background
- Messages sorted by:
[ date ]
[ thread ]
[ subject ]
[ author ]
This is in reference to the CSS at:
http://fedoraproject.org/style.css
(cvs.fp.o:/cvs/fedora/web/static/F-7/style.css)
We're using a background image to get the arrow bullet for lists:
#nav li
{
background: url(images/arrow.png) 5px 50% no-repeat;
...
Note the 50% -- this setting breaks the layout when doing nested lists
using this (typical) structure:
<ul>
<li>foo</li>
<li>bar
<ul>
<li>baz</li>
</ul>
</li>
</ul>
Here is what happens:
http://people.redhat.com/kwade/fedora/websites/broken-bullet.png
This is because the position on the background image is set to 50%
(half-way down the space it is backgrounding.)
XHTML doesn't even require a closing </li>, and if I remove them
entirely, the same behavior occurs. If I put the nested list outside of
the <li></li>, the list does not display as nested but rather in serial.
My fix is to use 0% for the position:
#nav li
{
- background: url(images/arrow.png) 5px 50% no-repeat;
+ background: url(images/arrow.png) 5px 0% no-repeat;
This has the effect of making the arrow sit at the top of the bounding
box for the element, which is not as pretty:
http://people.redhat.com/kwade/fedora/websites/bullet-top-bounding.png
Since getting a bullet this way (with a background image) is a bit of a
CSS hack, I think the best answer is to leave my changes to the CSS and
add a few pixels of transparency at the top of the arrow.png.
This is not crucial; I'm going to check in legal pages to a new
canonical location and am using some nested lists; if it looks funky for
a few days, that's OK. :)
- Karsten
--
Karsten Wade, 108 Editor ^ Fedora Documentation Project
Sr. Developer Relations Mgr. | fedoraproject.org/wiki/DocsProject
quaid.108.redhat.com | gpg key: AD0E0C41
////////////////////////////////// \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 189 bytes
Desc: This is a digitally signed message part
URL: <http://listman.redhat.com/archives/fedora-websites-list/attachments/20070623/ec0d5c97/attachment.sig>
- Previous message (by thread): web/html/docs/documentation-guide ch-getting-files-build-system-targets.php, NONE, 1.1 ch-getting-files-fdp.php, NONE, 1.1 ch-getting-files-filenames.php, NONE, 1.1 ch-how-modules-work.php, NONE, 1.1 ch-writing-guidelines.php, NONE, 1.1 ln-legalnotice-opl.php, NONE, 1.1 rv-revhistory.php, NONE, 1.1 sn-build-system.php, NONE, 1.1 sn-emacs-additional-resources.php, NONE, 1.1 sn-emacs-basic-commands.php, NONE, 1.1 sn-emacs-colors.php, NONE, 1.1 sn-emacs-examples.php, NONE, 1.1 sn-emacs-file.php, NONE, 1.1 sn-screenshots.php, NONE, 1.1 sn-tutorial-metadata.php, NONE, 1.1 sn-vim-additional-resources.php, NONE, 1.1 sn-vim-keymapping.php, NONE, 1.1 sn-xml-admon.php, NONE, 1.1 sn-xml-guidelines-header.php, NONE, 1.1 sn-xml-tag-sulink.php, NONE, 1.1 sn-xml-tags-application.php, NONE, 1.1 sn-xml-tags-chapter.php, NONE, 1.1 sn-xml-tags-citetitle.php, NONE, 1.1 sn-xml-tags-command.php, NONE, 1.1 sn-xml-tags-compoutput.php, NONE, 1.1 sn-xml-tags-emphasis.php, NONE, 1.1 sn-xml-tags-example.php, NONE, 1.1 sn-xml-tags-figure.php, NONE, ! 1.1 sn-xml-tags-filename.php, NONE, 1.1 sn-xml-tags-firstterm.php, NONE, 1.1 sn-xml-tags-footnote.php, NONE, 1.1 sn-xml-tags-gui.php, NONE, 1.1 sn-xml-tags-indexing.php, NONE, 1.1 sn-xml-tags-keycap.php, NONE, 1.1 sn-xml-tags-lists.php, NONE, 1.1 sn-xml-tags-option.php, NONE, 1.1 sn-xml-tags-para.php, NONE, 1.1 sn-xml-tags-part.php, NONE, 1.1 sn-xml-tags-prompt.php, NONE, 1.1 sn-xml-tags-replaceable.php, NONE, 1.1 sn-xml-tags-screen.php, NONE, 1.1 sn-xml-tags-sections.php, NONE, 1.1 sn-xml-tags-table.php, NONE, 1.1 sn-xml-tags-trademark.php, NONE, 1.1 sn-xml-tags-userinput.php, NONE, 1.1 sn-xml-tags-wordasword.php, NONE, 1.1 sn-xml-tags-xref.php, NONE, 1.1
- Next message (by thread): position in CSS background
- Messages sorted by:
[ date ]
[ thread ]
[ subject ]
[ author ]
More information about the Fedora-websites-list
mailing list