473,388 Members | 1,298 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,388 software developers and data experts.

Layout headaches...

OK, I'm trying to make a simple web page. I know that one shouldn't expect too
much of browsers in terms of layout, but this is a simple task and I don't even
know where to start.

Point your browser to: http://www.stoptrick.com/new/ and find a directory
listing. Look at layout_start.png in that directory, which is what my colleagues
think the web site should look like.

Pretty much the only important thing is that the contents of the left and right
columns should be flush at the top AND at the bottom (with no exaggerated
expectation of bottom flushedness ).

So I've done this simple page, start.html, and it already looks pretty good in
opera, but in Firefox it sucks dicks (see screenshot pngs in that directory). I
haven't even got started on IE and other crap browsers.

The people who did the original layout are sort of print people. I'm sure all of
you know the conflicts stemming from that combination. When I tell them that
HTML isn't print and you can't tell how web pages are rendered on different
browsers, they tell me they know but it couln't be possibly THIS fucked up. And
I think they're right. There's got to be a better approximation of the target
layout using HTML and CSS than what I've managed so far.

Thanks,
robert
Jul 24 '05 #1
1 1495
Robert Latest wrote:
Pretty much the only important thing is that the contents of the left and right
columns should be flush at the top .....................
There is a white border around the logo image. That is throwing the top
off to the viewer, because it is invisible on a white page. Instead of
trying to compensate for that by trying to adjust the text, crop the top
white border off the image. Since text _should_ be allowed to have its
size changed by the visitor, you will never get anywhere by trying to
adjust it's start point down with line-height, etc..
If both text and image are too close to the top, adjust them both with CSS.
..........AND at the bottom (with no exaggerated
expectation of bottom flushedness ).
Forget it. You're creating horizontal scroll bars on any but the
largest browser window -- awkward to use, you can't read the text
without scrolling to the right. Allow the text in the right column to
reformat itself. Kill the "width:367px". Do not set the font size and
the line height. The whole left column doesn't need so much
space. Make it narrower.

The <td><div>.......</div></td> markup is legal but it is also overkill.
Having both a style sheet and a lot of inline styles is unnecessary
here. Push all the style stuff into the style sheet.

Look at the page with http://validator.w3.org.
Alt tag is missing for image, end tag for <head> is unfinished, there is
no doc type declaration, and some character data is not allowed on line
62 where you have it.
The people who did the original layout are sort of print people. I'm sure all of
you know the conflicts stemming from that combination. When I tell them that
HTML isn't print and you can't tell how web pages are rendered on different
browsers, they tell me they know but it couln't be possibly THIS fucked up.


Explain to them that even people with very large viewscreens usually
don't surf with the browser window maximized. They need to give it up
or get used to irritating visitors with horizontal scrollbars.
--
mbstevens
http://www.mbstevens.com/

Jul 24 '05 #2

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

Similar topics

82
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
47
by: Neal | last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
20
by: Tammy | last post by:
What would be a good alternative to using frames? I need something that will section my webpage into two halves and can change both frames on a single click. Thanks in Advance, Tammy
10
by: Volker Lenhardt | last post by:
For a QApplication (PyQt) on the small screen of my Zaurus 5500 PDA I try to layout my data output in a QScrollView as the central widget. I'd prefer to use QGridLayout, but cannot add it to the...
10
by: Luke | last post by:
Hi. I am trying to make correct layout, here is an example of (dynamically generated content via jsp): http://localhost/www/layout.htm Most outer div is positioned absolute (if not then it...
3
by: Samuel Shulman | last post by:
I am looking for good guidance for positioning controls on the form.document, it is absolute nightmare and I don't know where to begin Thank you, Samuel Shulman
5
by: Ed Sproull [MSFT] | last post by:
First I'm pretty new to ASP.NET and I'm having a simple problem. I have small website with a header, sidebar and the the content. I want my content to appear beside my sidebar which seems to be a...
53
by: brave1979 | last post by:
Please check out my javascript library that allows you to create any layout for your web page, nested as deep as you like, adjusting to width and height of a browser window. You just describe it in...
5
TheServant
by: TheServant | last post by:
Hey guys, I am trying to generate a table automatically, but I am having headaches using foreach loops: $raw_user_rankings = mysql_query("SELECT user_id, user_name, user_clan_id, user_pop,...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
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...
0
jinu1996
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...
0
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...

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.