By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,880 Members | 1,817 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,880 IT Pros & Developers. It's quick & easy.

How do I adjust html programming for wide screen monitors? - widescreen.JPG (0/1)

P: n/a
I have very basic html skills. My friend who has a wide screen
monitor and is using IE7 sent me a jpg screen shot of my home page.

I have attached this jpg, but I recall a while back that attachments
were discouraged. I am sorry if I have offended anyone by attaching.

Note the left side table tiles or repeats towards the right side of
the screen, but the text does not, so it cannot be seen under the
graphic.

Is there a little bit of programming I can change so that the left
table doesn't repeat?

Please visit www.glennresearch.com and view source to see how basic my
programming skills are.
Feb 8 '07 #1
Share this Question
Share on Google+
6 Replies


P: n/a
On 8 Feb, 21:57, Christopher Glenn <x...@y.zwrote:
I have very basic html skills.
So improve them. C'mon, you're a PhD - How hard can it be? 8-)

It's not a bad site. Could be better, but can't they all. Content
looks OK, and that's where the legwork is. The rest is just
presentation.

I suggest a complete make-over, rather than a quick fix. It's not that
hard, for a few days study you get a new skill and you get a site that
you can build on afterwards. Do it with CSS rather than tables. Good
reading to start with is the O'Reilly "Head First HTML with CSS &
XHTML" , maybe Lie & Bos' "Cascading Style Sheets" too as a reference
to keep around afterwards.

So read the book, get yourself a usable text editor (NOT a WYSIWYG
like Dreamweaver) and a copy of Firefox with the HTML Validator
extension. It'll take you a day to learn what you're doing, and an
hour to fix each page. Web search first for a few ready-built CSS
layouts (bluerobot or glish.com might be handy)

* Start by opening up your page, running the HTML Validator and Tidy's
"Cleanup" on it, then saving it in your new site directory.

* Strip out all the old HTML tags by replacing them with a <ptag.
Change everything inside the <bodyinto a <pexcept for a few: Leave
<i>, </i<band </balone. Leave <aand <imgalone. Replace all
the <font>, <li>, <center>, <brand get every last trace of the
<tablestuff for sure! Leave the <hrfor the minute.

* Lose the presentation attributes from the remaining tags. Everything
from <bodyAnything that says color, align or border. Keep width and
height on <img>

* Add a HTML 4.01 Strict doctype declaration to the top

* Link in your CSS stylesheet (which you downloaded from the "2
column" example site). Put the stylesheet in a separate directory off
root, something like "styles" or "assets"

* Move all the image assets that are common to the whole site (page
background images, graphics) into this directory too. Throw away all
the images that are just decorated text.

* Now take a look at it. You should have a perfectly valid and
rather ugly page. Use Tidy to check and clean it until it's perfect
(turn anything you don't understand into a <p>)

After each step now, check that it's still valid and keep it this way!

* Replace the lists of <alinks for the menu with a proper list as
<ul... <li<a ... ... </a</li... </ul>

* Do the same for the bottom menu. Lose the "|" separator characters

* Lose the <imgfrom the menu items and replace them with plain text.

* Lose the <imgfrom the section headings and replace them with plain
text inside <h2... </h2>

* Replace all repeated <p><pwith a single <p(even stripping
whitespace between them)

* Replace href="http://www.glennresearch.com/gradstud.html" with just
href="gradstud.html"

* Replace href="mailto:cg****@glennresearch.com" with
href="mailto:cglenn@glennresearch.com"
(this reduces some spam-scraping of addresses, although a proper
mailto form handler is better)

* You'll probably have a couple of <divelements to add, according to
how the 2 column stylesheet worked - maybe a big one called <div
class="content" or something wrapping up most of the page apart from
the menu. Add some class attributes. Also put meaningful class names
on the <ulmenu lists.

* Now start working on the semantics of your markup. If there's a
block that makes sense as a conceptual unit, mark it up as such. The
copyright statement in the footer is one, as are the nav menus. Use a
<div(if they haven't already got a suitable element like <ul>
wrapping them). Make sure that these also have suitable class
attributes to identitfy them.

* Adjust the CSS until it looks right. Do the two-column thing first,
based on your example stylesheet (this should be easy, just make sure
you've used the right class names etc.)

* Adjust the CSS for the menus. Make the top menu a vertical list,
with each link in its own bordered box. You don't need those block
images any more.

* Do the CSS for the bottom menu. Use display:inline; etc. to get it
into an inline list (search, you'll find plenty of examples)

* Use your newly learned L33T CSS sk1llz to present the copyright
footer how you want it.

* Style the background by changing the CSS applied to <body>. Now tone
it down a few notches, because it looks a bit 1997 stars-and-stripes
homepage and it really _doesn't_ look like a modern professional
services site.

Do all these CSS changes in the stylesheet, not the page. Keep
validating, and validate that CSS too!
Note the left side table tiles or repeats towards the right side of
the screen, but the text does not, so it cannot be seen under the
graphic.
* Oh, that stuff. Your two column example ought to cope with that, but
if not, then look into the CSS property for background-repeat. Try
this:

body {
background: white url("chris2_bg.jpg");
background-repeat: repeat-y;
background-position: center;
}

* Adjust the CSS for cosmetic effect.

* Read Joe Clark's site on web accessibility and pay attention to it.
You're almost there by now anyway.

* Come back and tell us how it's going.

Feb 8 '07 #2

P: n/a
Andy Dingley wrote:

[long, friendly, helpful advice snipped]
>
* Come back and tell us how it's going.
Whattsa matter Andy? Nothing on television tonight? ;-)

--
John
Feb 9 '07 #3

P: n/a
On 9 Feb, 01:19, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
Whattsa matter Andy? Nothing on television tonight? ;-)
I've never owned one of the things.

No, I'm trying to teach some HTML refactoring (and write a Python
refactor-bot). This just seemed like a handy guinea pig to demonstrate
on. I've got about 250 pages of very similar HTML to try and bring out
of the Drak Ages, so I'm trying to automate it.

Feb 9 '07 #4

P: n/a
On 8 Feb 2007 15:03:53 -0800, "Andy Dingley" <di*****@codesmiths.com>
wrote:
>On 8 Feb, 21:57, Christopher Glenn <x...@y.zwrote:
>I have very basic html skills.

So improve them. C'mon, you're a PhD - How hard can it be? 8-)
<SNIP>

Are you saying there is no quick fix within my extant skills that
could work? Is this because the problem is inherent with the use of
<tables syntax?

Thanks Andy for the 'guinea pig' tutorial. When I have a couple of
years (er, days), I'll try again. What I didn't say, because it was
not pertinent, is that I have tried twice to teach myself more
advanced html skills, but I seem to have some sort of block. I have
blocks in other related areas, and several learning disabilities still
impacting me from childhood, and I think they are related.
Feb 11 '07 #5

P: n/a
On 11 Feb, 18:14, Christopher Glenn <x...@y.zwrote:
Are you saying there is no quick fix within my extant skills that
could work?
Maybe. Your problem (as I understand it, not as how you described it)
is nothing to do with tables and is actually to do with the repeating
of the background image attached to the body element. If you do this
with HTML 3.2 and <body background="chris2_bg.jpg" ... then you
always get repetition in two axes. If you do it with CSS instead,
then you control it to just repeat on one axis.

<body style="background: white url('chris2_bg.jpg') repeat-y;" ...
>
An alternative even-quicker-fix would be to open the background image
in a bitmap editor and just change it to be about 5000pixels wide,
which will last for a year or two longer.

Feb 12 '07 #6

P: n/a
On 12 Feb 2007 03:13:44 -0800, "Andy Dingley" <di*****@codesmiths.com>
wrote:
>On 11 Feb, 18:14, Christopher Glenn <x...@y.zwrote:
>Are you saying there is no quick fix within my extant skills that
could work?
Thanks, Andy!
Feb 12 '07 #7

This discussion thread is closed

Replies have been disabled for this discussion.