473,699 Members | 2,790 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Background image position and <pre>/<code> tag question

I am building a default sheet for my linux-related pages.
Since many linux users still rely on/prefer viewing textmode and
unstyled content I try to stick to the correct html tags to pertain good
readibility on browsers w/o css-support.

For important notes, warnings etc I use the <pre> tag, which shows in a
neat bordered box when viewed with css, and depending on its class a
clarifying background-image is shown.

I would like the background image to 'break out' of the surrounding
border, so it shows as overlapping the bordered text edge.

I tried using a negative background-position but that makes the image
disappear under the border. z-index no help here, as it relates to all
of the <pre> tag.

FIRST QUESTION: Any idea how I can have the images shown overlapping
both the underlying page and the styled content without resorting to
complicating separate tags and/or absolute positioning?

Then I have code samples on my pages, and I would prefer to use the
<code> tags surrounding these. Unfortunately this doesn't keep the
formatting like <pre> does, including spaces, returns etc. So I am
tempted to use pre tags instead with a class 'code' added, but this
isn't correct use of the available tags in html.

SECOND QUESTION: Is there a way of making my code tags adopt the <pre>
qualities wrt formatting ? Or is the only way using <code><pre> ...
</pre></code> combo's? (Aligning properly using &nbsp, tabs and such is
really not a desirable option.)

Thanks for reading, and more so for replying!
Rgds
Sh.

Mar 26 '06 #1
14 3626
Schraalhans Keukenmeester wrote:
I am building a default sheet for my linux-related pages.
Since many linux users still rely on/prefer viewing textmode and
unstyled content I try to stick to the correct html tags to pertain good
readibility on browsers w/o css-support.
Do we? I use linux, and I occasionally check my pages in one of the text
browsers, but I normally use konqueror and sometimes firefox. Do you know
what the stats are for text only usage? I would like to know. Thanks!
For important notes, warnings etc I use the <pre> tag, which shows in a
neat bordered box when viewed with css, and depending on its class a
clarifying background-image is shown.
I would stick to using <pre> for preformatted text, like formulae and
poetry. Keep it to its intended use for clarity.
I would like the background image to 'break out' of the surrounding
border, so it shows as overlapping the bordered text edge.

I tried using a negative background-position but that makes the image
disappear under the border. z-index no help here, as it relates to all
of the <pre> tag.
In text only mode, this is obviously pointless. This would be for the
graphically enabled. :)
FIRST QUESTION: Any idea how I can have the images shown overlapping
both the underlying page and the styled content without resorting to
complicating separate tags and/or absolute positioning?
I don't think so, but I wouldn't ask me if I was trying to do this. There
may indeed be a way with javascript or something similar.
Then I have code samples on my pages, and I would prefer to use the
<code> tags surrounding these. Unfortunately this doesn't keep the
formatting like <pre> does, including spaces, returns etc. So I am
tempted to use pre tags instead with a class 'code' added, but this
isn't correct use of the available tags in html.
I would use the code tag, and specify a monospace font within the style
definition. Courier is an obvious but ugly choice. I might pick another
font as the primary option, and downgrade back to courier for those who
don't have the other fonts.
SECOND QUESTION: Is there a way of making my code tags adopt the <pre>
qualities wrt formatting ? Or is the only way using <code><pre> ...
</pre></code> combo's? (Aligning properly using &nbsp, tabs and such is
really not a desirable option.)
In a style sheet. See above.
Thanks for reading, and more so for replying!


Thanks for asking, I hope this helps.

Carolyn
--
Carolyn Marenger

Mar 26 '06 #2
Carolyn Marenger wrote:
Schraalhans Keukenmeester wrote:

I am building a default sheet for my linux-related pages.
Since many linux users still rely on/prefer viewing textmode and
unstyled content I try to stick to the correct html tags to pertain good
readibility on browsers w/o css-support.

Do we? I use linux, and I occasionally check my pages in one of the text
browsers, but I normally use konqueror and sometimes firefox. Do you know
what the stats are for text only usage? I would like to know. Thanks!

Hmm, I may have exaggerated here. And I have no stats either. I was just
thinking of 'all' those poor people out there working on *nix boxes with
no X support installed. Or projecting my own experience onto an
imaginary crowd. So rephrase: It is possible my page will be viewed
using browsers that don't support css styling, or by people who have
style turned off. And judging from my own experience and prejudice, such
users -if any- are more likely to be found amongst *nix users than MS
slaves. As for the stats, I intend to find out.

Anyways, adhering to (widely accepted) standards/recommendations never
hurt anyone.
For important notes, warnings etc I use the <pre> tag, which shows in a
neat bordered box when viewed with css, and depending on its class a
clarifying background-image is shown.

I would stick to using <pre> for preformatted text, like formulae and
poetry. Keep it to its intended use for clarity.


Precisely my point! I've seen the weirdest and highly unorthodox (ab)use
of tags and constructs. All hidden quite nicely in popular browsers, but
close to unusable in others, at times.
I would like the background image to 'break out' of the surrounding
border, so it shows as overlapping the bordered text edge.

I tried using a negative background-position but that makes the image
disappear under the border. z-index no help here, as it relates to all
of the <pre> tag.

In text only mode, this is obviously pointless. This would be for the
graphically enabled. :)


Correct. The text-only/no-css browsing blahblah above only served as a
motivation/defense for my intent to comply with standards.

FIRST QUESTION: Any idea how I can have the images shown overlapping
both the underlying page and the styled content without resorting to
complicatin g separate tags and/or absolute positioning?

I don't think so, but I wouldn't ask me if I was trying to do this. There
may indeed be a way with javascript or something similar.


I am trying a new construction with a wrapper div and relative placement
of the bg image outside the <pre> tag. Not ideal, but it works okay
sofar (only I am scared to try my handiwork in IE now... I may need
counseling later on).
Then I have code samples on my pages, and I would prefer to use the
<code> tags surrounding these. Unfortunately this doesn't keep the
formatting like <pre> does, including spaces, returns etc. So I am
tempted to use pre tags instead with a class 'code' added, but this
isn't correct use of the available tags in html.

I would use the code tag, and specify a monospace font within the style
definition. Courier is an obvious but ugly choice. I might pick another
font as the primary option, and downgrade back to courier for those who
don't have the other fonts.


Courier is _indeed_ ugly. recognizable though, and immediately
associated by many with coding. Any font in particular you'd go for in
the monospaced department? Most I've ran into have as much as or less
appeal than courier. While we're at it, which regular font strikes your
fancy?
SECOND QUESTION: Is there a way of making my code tags adopt the <pre>
qualities wrt formatting ? Or is the only way using <code><pre> ...
</pre></code> combo's? (Aligning properly using &nbsp, tabs and such is
really not a desirable option.)

In a style sheet. See above.

How does one ensure <code> content looks neatly indented on a non-styled
display? Perhaps nest a <pre> inside it... Hmm, maybe I am too fussy here.
Thanks for reading, and more so for replying!

Thanks for asking, I hope this helps.

Carolyn

Cheers, and welcome. It did help, or at least refuel inspiration.
And made me laugh indirectly (I checked out your domain in my browser.
Never before read a whole site's content in under 10 secs.)

Sh.
Mar 26 '06 #3
Schraalhans Keukenmeester wrote:
Courier is _indeed_ ugly. recognizable though, and immediately
associated by many with coding. Any font in particular you'd go for in
the monospaced department?


I like...

font-family: "Bitstream Vera Sans Mono", "Lucida Console",
"Andale Mono", monospace;

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Mar 26 '06 #4
On Sun, 26 Mar 2006, Toby Inkster wrote:
Schraalhans Keukenmeester wrote:
Courier is _indeed_ ugly. recognizable though, and immediately
associated by many with coding. Any font in particular you'd go for in
the monospaced department?


I like...

font-family: "Bitstream Vera Sans Mono", "Lucida Console",
"Andale Mono", monospace;


Just a routine comment here, that the visual appearance isn't the
only relevant feature of a font: its character repertoire is also
important, in general.

And the monospaced fonts supplied as standard with MS OSes are dismal,
in this regard, even in comparison to their supplied proportional
fonts. (Many MS users would also have access to Arial Unicode MS,
which makes the contrast between proportional and monospaced
repertoires even more crass).

There's a Lucida Console font supplied with XP, which, according to
SIL Viewglyph, has the ominous score of Number of Glyphs = 666. One
might compare this with some of the usual proportional fonts such as
Times New Roman which is listed with 1674, or Lucida Sans Unicode with
1776 - or Arial Unicode MS, for those who have it, with 50377.

Do you have information on the repertoires of the other fonts that you
mentioned, at least in the versions that users would be likely to
have? Well, I just downloaded Bitstream Vera Sans Mono version 1.10
from the Gnome project, and it appears to have a mere 269 glyphs. On
a web page, I did find a reference to a version of Andale Mono WGL4
which could be purchased.

(All these glyph counts are based only on the "Number of Glyphs"
reported in the Font Statistics by SIL Viewglyph, but I suppose they
do give a vague idea of the scope of the font's repertoire - even if
one needs to look much more closely to see if the ranges covered are
of any use for one's own requirements.)

Some background to this in my own little page about browsers and
fonts:
http://ppewww.ph.gla.ac.uk/~flavell/...tml#Monospaced

regards
Mar 26 '06 #5
Alan J. Flavell wrote:
Just a routine comment here, that the visual appearance isn't the
only relevant feature of a font: its character repertoire is also
important, in general.


Monospaced fonts are mostly only used for coding examples, which generally
only need ASCII characters anyway. And when a glyph is missing, the
browser *should* substitute in a glyph from another font anyway. (Of
course, not all browsers are smart enough.)

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Mar 26 '06 #6
On Sun, 26 Mar 2006, Toby Inkster wrote:
Monospaced fonts are mostly only used for coding examples, which
generally only need ASCII characters anyway.
That may be your opinion, and often also mine; but I do think other
authors may have a different attitude, and I don't think it's our
place to refuse them. I was asked for help by someone who wanted
their Polytonic Greek to appear correctly as they wanted it in
monospaced, to take one example.
And when a glyph is missing, the browser *should* substitute in a
glyph from another font anyway. (Of course, not all browsers are
smart enough.)


Indeed it should, and some browsers do a decent job of it; but MSIE
evidently has quite some way to go yet (anyone care to comment on any
improvements to this issue IE7? - I've no real plans to beta it
myself).

Be that as it may, it's preferable if all the characters needed for a
particular piece of text can come from the same font.

Mar 26 '06 #7
Alan J. Flavell wrote:
Indeed it should, and some browsers do a decent job of it; but MSIE
evidently has quite some way to go yet (anyone care to comment on any
improvements to this issue IE7? - I've no real plans to beta it
myself).


Having skimmed through a few of your Unicode tables, I can't find any
characters that display in the non-<tt> column, but not the <tt> column,
so I suppose that MSIE is doing font substitution.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Mar 26 '06 #8

Schraalhans Keukenmeester wrote:
Since many linux users still rely on/prefer viewing textmode and
unstyled content I try to stick to the correct html tags to pertain good
readibility on browsers w/o css-support.
A bogus observation, but reasonable enough for the very few who
actually are using text-only browsing.
For important notes, warnings etc I use the <pre> tag,
Stop doing that. You're entirely mis-using <pre> and that's the root of
most of your troubles.
which shows in a
neat bordered box when viewed with css, and depending on its class a
clarifying background-image is shown.


So the reason you're doing bizarre mis-use of HTML is to support
text-only users, but now you're worrying about the handling of images ?

Mar 27 '06 #9
On Sun, 26 Mar 2006, Toby Inkster wrote:
Having skimmed through a few of your Unicode tables,
Which exactly?
I can't find any
characters that display in the non-<tt> column, but not the <tt> column,
Try <http://ppewww.ph.gla.a c.uk/~flavell/unicode/unidata06.html# x0679>
so I suppose that MSIE is doing font substitution.


I can't believe that.

--
All free men, wherever they may live, are citizens of Denmark.
And therefore, as a free man, I take pride in the words "Jeg er dansker!"

Mar 27 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

21
10934
by: Wladimir Borsov | last post by:
Assume I want to publish a longer article on a web page. One of the paragraphs I want to display with an indent. Read: All text lines of this paragraph should be displayed with (let's say 8) blanks from the "normal" left side. How do I do that without coding "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" ? Is there something like <TAB size=8> ..... </TAB> ?
3
12915
by: Michael Shell | last post by:
Greetings, Consider the XHTML document attached at the end of this post. When viewed under Firefox 1.0.5 on Linux, highlighting and pasting (into a text editor) the <pre> tag listing will preserve formatting (white space and line feeds). However, this is not true when doing the same with the <code> tag listing (it will all be pasted on one line with multiple successive spaces treated as a single space) despite the fact that...
5
24108
by: Porthos | last post by:
I'm authoring an XML document and using the <pre> html tag for the portions that are not dynamically generated. The <pre> text is displaying in a smaller font size (and I believe different font) than standard text. I would like all of my text to be formatted this way, though I don't want to use the <pre> tag for all of it. Can anyone tell me what font and size are used by default for the <pre> tag? I don't want to change it's...
18
2261
by: John | last post by:
I'm getting ready to revamp my Magic Squares pages, which currently show the magic squares in this form: +---+---+---+---+---+---+---+---+---+---+---+ | 68| 81| 94|107|120| 1 | 14| 27| 40| 53| 66| +---+---+---+---+---+---+---+---+---+---+---+ | 80| 93|106|119| 11| 13| 26| 39| 52| 65| 67| +---+---+---+---+---+---+---+---+---+---+---+ | 92|105|118| 10| 12| 25| 38| 51| 64| 77| 79| +---+---+---+---+---+---+---+---+---+---+---+
6
2438
by: TomB | last post by:
Hello all, On the page located at http://deimos.curious.be/~dusk/lyrics.php#gotn I have put the lyrics text inside <pre> elements so that the UA renders the linebreaks in the code. Because of this though some of the longer lines will be clipped by the div they're in (or cross its borders if I allow overflow) when viewed with a narrower viewport (or user-increased
9
5541
by: Eric Lindsay | last post by:
I can't figure how to best display little snippets of shell script using <pre>. I just got around to organising to bulk validate some of my web pages, and one of the problems occurs with Bash shell pieces like this: <pre><code> #!/bin/sh ftp -i -n ftp.server.com&lt; &lt;EOF user username password epsv4 cd /
10
6581
by: Xah Lee | last post by:
there's a HTML odditity. That is, line break will be ignored inside <preif the adjacent lines are tags. see the source code and description here: http://xahlee.org/js/linebreak_after_tag.html if anyone know the spec for XML case, please let me know. Thanks. Xah
1
1893
by: Andreas Prilop | last post by:
I've come along a strange behaviour (bug?) in the Mozilla/Firefox browsers. It does not happen in Internet Explorer. When I have *disabled* the option "Allow pages to choose their own fonts" and a page does specify a font-family for TT, CODE, PRE, etc., then Mozilla/Firefox displays such text no longer in my own preferred monospaced typeface but in my preferred proportional typeface. Only when I write <code><code class=...with double...
0
8704
marktang
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...
0
8623
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8894
tracyyun
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...
1
6540
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5879
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();...
0
4390
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3071
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
2
2360
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2015
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.