Here's what I'm trying to achieve:
1. A <div>, centered on screen, 600px wide and 100px high, with a
background-image (also 600 x 100).
2. Text (an <h1> element) positioned with precision inside the <div>, on
the image.
3. A similar result in IE and FF...
Here's some of the XHTML:
<body>
<div id="container">
<div id="top">
<h1>Title</h1>
</div>
...
</div>
</body>
Here are selected parts of my CSS:
body {
text-align: center;
...
}
#container {
width: 600px;
...
margin-right: auto;
margin-left: auto;
...
padding: 0px;
}
#top {
width: 600px;
height: 100px;
background-image: url('banner.png');
...
padding: 0px;
}
#top h1 {
...
}
I can't figure out how to position the text in '#top h1'. I want it,
say, 30px from the top of #top and 20px from the left border of #top. So
it seems I need to use absolute positioning, but only inside the #top
<div>. Hope it's possible...
Gustaf 6  2641 
Gustaf Liljegren <gu*****@algonet.se> wrote: Here's what I'm trying to achieve:
1. A <div>, centered on screen, 600px wide and 100px high
Why?
What about window sizes smaller than 600px?
Smells like a splash screen, don't.
, with a background-image (also 600 x 100).
Why?
This will destroy a useful function: a user should be able to disable
image display, the occupied screen space should then be freed up.
2. Text (an <h1> element) positioned with precision inside the <div>, on
the image.
Striving for pixel precision is a flawed pursuit.
Here's some of the XHTML:
Why *X*HTML?
<body>
An URL with an example using real content is preferred.
I can't figure out how to position the text in '#top h1'. I want it,
say, 30px from the top of #top and 20px from the left border of #top. So
it seems I need to use absolute positioning, but only inside the #top
<div>. Hope it's possible...
Look at the margin, padding and line-height property of the h1 element.
So it seems I need to use absolute positioning
Thinking that absolute positioning is the way to achieve a pixel precise
rendering is a classic mistake.
--
Spartanicus
Spartanicus wrote: What about window sizes smaller than 600px?
Frankly, I don't care about those. My site is targeted on people with
desktop or laptop computers.
Smells like a splash screen, don't.
It's the title text. Below #top, the content follows.
Striving for pixel precision is a flawed pursuit.
I used to think so too, but now when IE got its box model right it's
possible to make a more advanced page layout while sticking closely to
the standards. I wasn't asking for true pixel precision (just a "similar
result" in two browers) but there's no reason of course why things would
end up at different places if the browsers just follow CSS.
Besides, every page I make validates (XHTML 1.0 Strict), every page
looks just fine when you turn off the stylesheet, every page sticks to
the web accessibility standards. I'm not using any browser bugs or
workarounds -- it's all nice and tidy markup. Sticking to the standards
doesn't mean we still have to use the layout of 1994. CSS is a powerful
language and there's nothing wrong in using this power.
Why *X*HTML?
Because it's a more tidy markup, and it's recommended by the W3C.
Look at the margin, padding and line-height property of the h1 element.
Thank you. With some padding, this was easier than I imagined, and it's
even possible to achieve some precision.
Gustaf
On Sun, 15 Aug 2004 18:25:55 +0200, Gustaf Liljegren <gu*****@algonet.se>
wrote: Spartanicus wrote:
What about window sizes smaller than 600px?
Frankly, I don't care about those. My site is targeted on people with
desktop or laptop computers.
You're assuming all your target users browse with a maximized browser with
no sidebars or other applications visible. A user with an 800px wide
screen my only have 500px of viewport after factoring in the ICQ bar, the
search bar on the left in IE, etc.
I appreciate where you're coming from, but the fact is you have no way of
knowing the size of the user's viewport, and as such are better off
designing for display at any width. Sadly, IE's piss-poor support of CSS
makes this far more difficult that it could be.
If you can reduce that image to 400px wide, you still might get a few
visitors for whom that is too wide, but you've greatly increased the
usability and look of the site for many more. I generally assume that
users will see a site at 490px wide minimum and 1300px max, and always try
to get it to work on even smaller viewports. Make the design scalable to
any width, and it looks good for all.
On Sun, 15 Aug 2004, Gustaf Liljegren wrote: Spartanicus wrote:
What about window sizes smaller than 600px?
Frankly, I don't care about those. My site is targeted on people
with desktop or laptop computers.
I've got all three. Am I in your target or not?
You really have to make up your mind whether your targets are people
(good) or computers (ungood).
Striving for pixel precision is a flawed pursuit.
I used to think so too, but now when IE got its box model right it's
possible to make a more advanced page layout while sticking closely
to the standards.
You proved my point, it seems. You're still showing lack of
understanding that flexible design is for people - you seem to think
it's only for dealing with buggy browsers.
I've no objection to you making your web page look the way you wanted
it to look, in the narrow range of display situations which you
consider to be the majority. But that doesn't exclude that the page
should be flexible enough to adapt itself when the display situation
is outside of that range.
Besides, every page I make validates
That's important for a different reason, but it's not the issue under
discussion right now
(XHTML 1.0 Strict),
(this isn't the moment to debate that detail)
every page looks just fine when you turn off the stylesheet,
That's sounding better. Maybe you're not all ungood after all ;-)
all the best
Gustaf Liljegren wrote: Spartanicus wrote:
Why *X*HTML?
Because [...] it's recommended by the W3C.
HTML is also recommended by the W3C:
<quote source: http://www.w3.org/TR/html4/ >
HTML 4.01 Specification
W3C *Recommendation* 24 December 1999
</quote>
[emphasis is mine]
--
Brian (remove ".invalid" to email me) http://www.tsmchughs.com/
Alan J. Flavell wrote: Frankly, I don't care about those. My site is targeted on people
with desktop or laptop computers.
You really have to make up your mind whether your targets are people
(good) or computers (ungood).
I'm pretty sure that if someone would watch my site on a screen less
than 640 x 480, they'll have a way better experience than on the average
site out there. If my default style doesn't suit my users, the pages are
completely readable and well structured without it.
You proved my point, it seems. You're still showing lack of
understanding that flexible design is for people - you seem to think
it's only for dealing with buggy browsers.
I hoped mentioning Web Accessibility would prove my concern for this.
I'm just not prepared to go through any lengths only to make the site
accessible to the last 0.5 perecent.
I've no objection to you making your web page look the way you wanted
it to look, in the narrow range of display situations which you
consider to be the majority.
It's not about what I consider, but about the statistics. Have a look: http://www.w3schools.com/browsers/browsers_stats.asp
My guess is that the figures shown here are even more heterogeneous than
average (because it's a technical site, and advanced users are more
likely to use something other than IE5 at 800 x 600). But the lession I
learn from this is that the world is not so diverse at all, and it makes
perfect sense to do what works for the great majority.
Gustaf This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Ian Rastall |
last post by:
This really is a JavaScript question. I have a site that looks fine in
everything but NN4. I'm afraid I don't have a URL, because the site is
very much unfinished.
The site is a header (which is...
|
by: Toby Austin |
last post by:
I'm trying to replace <table>s with <div>s as much as possible.
However, I can't figure out how to do the following…
<table>
<tr>
<td valign="top" width="100%">some data that will...
|
by: Moon |
last post by:
I've designed some hp for a friend's wedding relying completely on
absolute positioning of all elements using CSS. However, the only
browser that displayed it properly was IE 6.0 so I went back to...
|
by: nick |
last post by:
In the web site http://greywolfdesign.com , there is a pop-up menu (when
mouse over 'Portfolio' menu item), it always works well when using IE (6).
However, when using Mozilla 1.6, the popup...
|
by: Marcus Otmarsen |
last post by:
Ok, the situation is as follows:
I defined a <DIV> like:
<div id="myid" style="position: absolute; height: 10; width: 10;"><img src="images/object.gif" height=10 width=10></div>
This pane is...
|
by: nick |
last post by:
In the web site http://greywolfdesign.com , there is a pop-up menu (when
mouse over 'Portfolio' menu item), it always works well when using IE (6).
However, when using Mozilla 1.6, the popup...
|
by: Julia Briggs |
last post by:
How do I construct a <iframe> or equivalent for FireFox/NS browsers,
inside a screen centered <div> tag? Can it be done?
|
by: prino |
last post by:
Hi all,
I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF...
|
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
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
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...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
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,...
|
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: 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...
|
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...
| |
