473,573 Members | 5,083 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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
6 8117
On 8 Feb, 21:57, Christopher Glenn <x...@y.zwrot e:
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.glennresear ch.com/gradstud.html" with just
href="gradstud. html"

* Replace href="mailto:cg ****@glennresea rch.com" with
href="mailto:cg lenn@glennresea rch.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
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
On 9 Feb, 01:19, John Hosking <J...@DELETE.Ho sking.name.INVA LID>
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
On 8 Feb 2007 15:03:53 -0800, "Andy Dingley" <di*****@codesm iths.com>
wrote:
>On 8 Feb, 21:57, Christopher Glenn <x...@y.zwrot e:
>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
On 11 Feb, 18:14, Christopher Glenn <x...@y.zwrot e:
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="chr is2_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="backgrou nd: 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
On 12 Feb 2007 03:13:44 -0800, "Andy Dingley" <di*****@codesm iths.com>
wrote:
>On 11 Feb, 18:14, Christopher Glenn <x...@y.zwrot e:
>Are you saying there is no quick fix within my extant skills that
could work?
Thanks, Andy!
Feb 12 '07 #7

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

Similar topics

71
6422
by: tomy_baseo | last post by:
I'm new to HTML and want to learn the basics by learning to code by hand (with the assistance of an HTML editor to eliminate repetitive tasks). Can anyone recommend a good, basic HTML editor that's a step beyond Notepad (not a WYSIWYG tool). Thanks.
72
5347
by: Mel | last post by:
Are we going backwards ? (please excuse my spelling...) In my opinion an absolute YES ! Take a look at what we are doing ! we create TAGS, things like <H1> etc. and although there are tools (dreamweaver and the like), they are all at the lowest level of programming (something like assembly as oposed to C++ etc.). These tools create...
8
2256
by: kchayka | last post by:
<URL:http://www.w3.org/QA/Tips/font-size> In the "recommneded practices", I don't agree with their second bullet point, but the last 2 bullets sound like really bad advice, at least in a WWW context. How can they, in good conscience, advocate using font-size-adjust when it is virtually unsupported, besides probably being dropped from the...
0
1145
by: SV | last post by:
Hi I work in a team which has both wide screen and normal screen monitors. We inherit user controls and forms developed in .NET, across the team. One of the problem I have noticed lately on normal screen is, the shrinking form when it inherits from a form developed on a wide screen machine. Can anybody tell me why this is happening and...
7
2314
by: lauren quantrell | last post by:
A while back I got a requirement for the client to be able to adjust the relative heights of two subforms by click-dragging the mouse and I came up with a kludge solution using a border control between the two subforms. But I put my mind to this again recently and came up with a solution (code below) that works well with multiple subforms to...
2
1342
by: kevininstructor | last post by:
My group is in the process of replacing desktop computers with laptops for several developers for primarily .NET development. What we thought about this morning was the possibility of using an external 19" wide screen monitor. My question: Anyone have experience using a 19" wide screen? Do you like it or would you have preferred a regular...
7
1367
by: Peter Oliphant | last post by:
In today's market, what's a good screen resolution that I can pretty much count on as being the minimum? This is kind of a 'fuzzy' question in that I'm interested in the biggest screen resolution that I can be pretty sure most people who buy a computer today (within the last year or two) will have a graphic card that supports it. For...
23
2081
by: andrew | last post by:
Hi, I have been taken to task about the length of lines in the source html of: http://www.slrn.sourceforge.org which, as I commonly do, has no line breaks at all in the source html. My editor wraps the code for me when I view it or work with it.
10
44069
by: =?Utf-8?B?UmljaA==?= | last post by:
A lot of users at my workplace use different screen resolutions, and I build apps to use 1680 x 1050 pixels res by default. But some users are using 800 x 600, and the apps are too large for their screen. I used to write code in Java a few years ago (2005), and you could stretch a form with the mouse and all the controls and fonts would...
0
7789
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...
1
7800
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
8086
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...
0
6432
agi2029
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...
1
5605
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...
0
3737
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...
1
2227
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
1
1325
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1048
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...

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.