473,856 Members | 1,665 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Help with positioning - I'm too stupid

I am trying to re-work an old site by replacing the html with css.

On the main page, I have a logo image which I needed centred on the
initial screen. I found the solution here:
http://www.wpdfd.com/editorial/wpd0103.htm#toptip (the second example)

The problem is, under the image is a large table. But using the above
positioning, now the table starts at the top of the page and runs
underneath the image.

I plan to eliminate the table as soon as I figure out how to replicate
it using css elements, but first I'd like to get it positioned under
the image. I'm sure there is a way, but I am really too stupid to
actually understand absolute and relative and whatever else there is
in positioning.

(I ran the page through the Validator and I have it set to 4.01
Strict. The first point of contention it has is with the table, which
comes after the image, so I'm not too worried about that since, as I
said, I'll be getting rid of the table. I'm assuming, therefore, that
I haven't mucked anything up that is making it display this way.)

I feel like this might have something to do with layers, but if you
thought positioning made my head spin....

Anyway, I'd appreciate a demonstration, but I will gladly check out
any sort of idiot-proof tutorial you can point me to :)
Thanks!
Jul 20 '05 #1
4 2722
Jane Withnolastname wrote:
I am trying to re-work an old site by replacing the html with css.

On the main page, I have a logo image which I needed centred on the
initial screen. I found the solution here:
http://www.wpdfd.com/editorial/wpd0103.htm#toptip (the second example)
An excellent tutorial on CSS positioning (at least IMO):
http://brainjar.com/css/positioning/

The problem is, under the image is a large table. But using the above
positioning, now the table starts at the top of the page and runs
underneath the image.
When you use absolute positioning the block is taken out of the "normal"
flow of positioning from top of the page to bottom that you would
normally see if you didn't use any absolute positioning.

i.e. think of it like this if you had 3 relative positioned blocks A, B
then they would display as:

A
B
C

if you specify absolute positioning for A then you would have something
like this (for example - I'm just abitrarily showing where A has been
absolutely positioned to illustrate the point):

B
C

A

What you need to do is absolute position B and make B the container of C
and all the other blocks in your page like:

A
B
C

i.e. using your example:

<div id="horizon">
<div id="content">
<div class="bodytext ">A</div>
</div>
</div>
<div id="B-aka-container">
<p>C</p>
<p>D</p>
</div>

and include an absolute position rule for B-aka-container.

NOTE: There are some things that don't strike me well about this example
as it uses negative offsets, wraps text with divs instead of p's, and
utilizes fixed point font sizes instead of %; just to mention a few of
the ugly things I can see.

Do yourself a favor - look elsewhere or at the very least if you really
need this and can't find it elsewhere adhere to as little of this
example as possible.

I plan to eliminate the table as soon as I figure out how to replicate
it using css elements, but first I'd like to get it positioned under
the image. I'm sure there is a way, but I am really too stupid to
actually understand absolute and relative and whatever else there is
in positioning.
Your not "stupid". In fact most people that profess that they are smart
are usually idiots IMO ;-)

BTW the learning curve for positioning is somewhat steep as it takes a
while to get the hang of things. Read the tutorial that I mentioned and
then read a couple more. After a while it will all gel ;-)

(I ran the page through the Validator and I have it set to 4.01
Strict. The first point of contention it has is with the table, which
comes after the image, so I'm not too worried about that since, as I
said, I'll be getting rid of the table. I'm assuming, therefore, that
I haven't mucked anything up that is making it display this way.)
Take out the table and put something like this in place:

<p>Trying to move this below center</p>

you want to eliminate as many variables as possible - and then you could
add the table back and try to re-work it into CSS.

I feel like this might have something to do with layers, but if you
thought positioning made my head spin....


Forget layers - that's a Netscape contrived thing that you luckily don't
ever have to worry about... (again).

--Nikolaos

Jul 20 '05 #2
On Thu, 28 Aug 2003 15:51:31 -0400, Nikolaos Giannopoulos
<ni******@solma r.ca> wrote:
Jane Withnolastname wrote:
I am trying to re-work an old site by replacing the html with css.

On the main page, I have a logo image which I needed centred on the
initial screen. I found the solution here:
http://www.wpdfd.com/editorial/wpd0103.htm#toptip (the second example)
An excellent tutorial on CSS positioning (at least IMO):
http://brainjar.com/css/positioning/

The problem is, under the image is a large table. But using the above
positioning, now the table starts at the top of the page and runs
underneath the image.


When you use absolute positioning the block is taken out of the "normal"
flow of positioning from top of the page to bottom that you would
normally see if you didn't use any absolute positioning.

i.e. think of it like this if you had 3 relative positioned blocks A, B
then they would display as:

A
B
C

if you specify absolute positioning for A then you would have something
like this (for example - I'm just abitrarily showing where A has been
absolutely positioned to illustrate the point):

B
C

A

What you need to do is absolute position B and make B the container of C
and all the other blocks in your page like:

A
B
C

i.e. using your example:

<div id="horizon">
<div id="content">
<div class="bodytext ">A</div>
</div>
</div>
<div id="B-aka-container">
<p>C</p>
<p>D</p>
</div>

and include an absolute position rule for B-aka-container.


Thanks for the link. I didn't look at it yet, because your explanation
and tips were perfect for me. I think I sorta get it now. At least,
enough to fix the position of my table. Anyway, I did bookmark that
site for future reference (like tomorrow, when I've forgotten
everything again!)
NOTE: There are some things that don't strike me well about this example
as it uses negative offsets, wraps text with divs instead of p's, and
utilizes fixed point font sizes instead of %; just to mention a few of
the ugly things I can see.

Do yourself a favor - look elsewhere or at the very least if you really
need this and can't find it elsewhere adhere to as little of this
example as possible.
I would love to use something else, because this is all very
complicated, but I looked and looked and this was all I could find.
I am using this to center a combination of an image and text. The text
is three very short lines, separated by breaks. The lines are no
longer than the width of the image (374px), so I don't anticipate the
need for wrapping.
Having said that, I am re-writing my site using "em" instead of "px"
and "pt", etc. and would really like to implement that into this
style, but I am at a loss for how to do that. Since it is a relative
term, I don't think you can just translate pixels into "em" (I don't
even know what that stands for, but I know I'm supposed to use it!)
but if I could approximate it on my screen, I would be confident it
would display appropriately for others. Is there a tool or is this
sort of thing covered in that tutorial?
I plan to eliminate the table as soon as I figure out how to replicate
it using css elements, but first I'd like to get it positioned under
the image. I'm sure there is a way, but I am really too stupid to
actually understand absolute and relative and whatever else there is
in positioning.


....In fact most people that profess that they are smart
are usually idiots IMO ;-)


Well, yes, I've found that too. :p
BTW the learning curve for positioning is somewhat steep as it takes a
while to get the hang of things. Read the tutorial that I mentioned and
then read a couple more. After a while it will all gel ;-)


I will, thank you.
(I ran the page through the Validator and I have it set to 4.01
Strict. The first point of contention it has is with the table, which
comes after the image, so I'm not too worried about that since, as I
said, I'll be getting rid of the table. I'm assuming, therefore, that
I haven't mucked anything up that is making it display this way.)


Take out the table and put something like this in place:

<p>Trying to move this below center</p>

you want to eliminate as many variables as possible - and then you could
add the table back and try to re-work it into CSS.

I feel like this might have something to do with layers, but if you
thought positioning made my head spin....


Forget layers - that's a Netscape contrived thing that you luckily don't
ever have to worry about... (again).


Thank god!!!

I'm gonna go look at that link now, check out their CSS tutorial and
see if I can figure out how to replace a table with css....
Thanks again.
Jul 20 '05 #3
In article <na************ *************** *****@4ax.com> in
comp.infosystem s.www.authoring.stylesheets, Jane Withnolastname
<Ja************ **********@yaho o.com> wrote:
Since it is a relative
term, I don't think you can just translate pixels into "em" (I don't
even know what that stands for, but I know I'm supposed to use it!)


The bookstores have tons of books on CSS. The Web has scads of
tutorials.

As a teacher myself, might I suggest that you would be well advised
to study one of them? This business of cutely boasting of your
ignorance is wearing a bit thin, at least for me -- and it can't be
much fun for you either. When you don't know _anything_, it's not
very productive to focus on details until you first get a general
overview of the territory.

There's no shame in having elementary questions: we all started from
a position of 100% ignorance. But the net, like god, helps those who
help themselves.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #4
Jane Withnolastname wrote:
On Thu, 28 Aug 2003 15:51:31 -0400, Nikolaos Giannopoulos
<ni******@solma r.ca> wrote:

Thanks for the link. I didn't look at it yet, because your explanation
and tips were perfect for me. I think I sorta get it now.
I'm glad it helped however what you got was the workaround for this
specific problem. My help was not intended to replace the tutorial. If
you don't read this (or another) tutorial or a book on CSS-P then you
will most likely not get much further next time around.

Having said that, I am re-writing my site using "em" instead of "px"
and "pt", etc. and would really like to implement that into this
style, but I am at a loss for how to do that.
Unfortunately, I don't think anyone will help you on this one if you
don't at least read the first chapter of any CSS book or the most basic
of articles on CSS.

Since it is a relative
term, I don't think you can just translate pixels into "em" (I don't
even know what that stands for, but I know I'm supposed to use it!)
Calling yourself stupid is something that I don't agree with but
pretending to be ignorant is not something many will tolerate. If you
have no clue about this then you are definitely wasting the time of
others who may be reading this post.

but if I could approximate it on my screen, I would be confident it
would display appropriately for others. Is there a tool or is this
sort of thing covered in that tutorial?
You got to be kidding. Where are you getting this junk from -

BTW the learning curve for positioning is somewhat steep as it takes a
while to get the hang of things. Read the tutorial that I mentioned and
then read a couple more. After a while it will all gel ;-)


I will, thank you.


Right, BUT not today. Maybe tomorrow and most likely never. Stan was
right this attitude is tiresome....

I'm gonna go look at that link now, check out their CSS tutorial and
see if I can figure out how to replace a table with css....


Do yourself (and everyone else here) a favor - before jumping into CSS-P
read a couple tutorials and maybe even a book on CSS.

--Nikolaos

Jul 20 '05 #5

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

Similar topics

1
1494
by: Question | last post by:
I am making a custom small menu which is most basic. Problem is that I can't make the first step work for some reason. I have an image to the left of where would be the layer positioned. This layer must be 15 pixels to the left of that image. Since my main page is centered in the browser's window, the pixels to the left of my image are different for each browser and also depends on how wide the browser window is.
2
2310
by: Dariusz | last post by:
I am trying out a fully CSS-P layout (first time with floats) and am having problems with getting certain DIV's from displaying properly - or rather - they are being completely ignored. Below is a copy of the code I have written. It is arranged as follows: Header Left Middle Right Footer The "Left" and "Right" DIV's are fixed width and the "Middle" DIV takes the
14
4121
by: Michael Satterwhite | last post by:
On my page, I'm positioning text on top of a graphic. I'm using the following code on my page: <img src="images/plainTop.gif" border="0" alt="" /> <div style="position: absolute; top:98px; font-size: small"> <div style="position: absolute; left: 190px"><a href="aboutus.html">About Us</a></div> <div style="position: absolute; left: 321px"><a href="faq.html">FAQ</a></div> <div style="position: absolute; left: 415px"><a
13
1598
by: Lloyd Sheen | last post by:
I have now spent 5 hours on google/msdn looking for something useful in the creation of user controls for asp.net. The VS 2003 has very limited support for things such as absolute positioning of the control etc.
4
2067
by: DraguVaso | last post by:
Hi, I have files I need to read, which contains records with a variable lenght. What I need to do is Copy a Part of such a File to a new File, based on the a Begin- and End-record. I used this functions: Dim intMyFile As Integer = FreeFile() FileOpen(intMyFile, MakePathFile(strDirS, strFileS), OpenMode.Input, OpenAccess.Read, OpenShare.Shared, -1)
0
900
by: NW Technicals | last post by:
HELLO, I created my site with absolute positioning of controls. Upon suggestions from a good friend of mine I am trying to move my site to Relative positioning, but having problems All my problems are related to control positioning only 1) All my controls would not fit in the contentpane I have in the main pane??
1
1133
by: NW Technicals | last post by:
HELLO, I created my site with absolute positioning of controls. Upon suggestions from a good friend of mine I am trying to move my site to Relative positioning, but having problems All my problems are related to control positioning only 1) All my controls would not fit in the contentpane I have in the main pane??
2
2481
by: Slick50 | last post by:
I am about ready to finally give up on CSS and fall back to tables. Positioning is becoming too frustrating for the novice with CSS alone... I have a simple form. Conceptually I divide up each input of user information into rows. On one particular row I want a label to be displayed on the left, a <textareainput in the middle, and some text on the right - all on the same line. This all seems to work fine until the text on the right...
1
1476
by: Froggluver | last post by:
I have some experience with CSS. Just enough to be dangerous in fact. :) I had a general question about positioning. Is it possible create a box that is absolutely positioned on a page, and then place boxes inside of that that are relatively positioned, so that they flow with the page? I am aware absolute is just that - absolute, and I know that relative divs move in relation to the parent div. What pitfalls could arise? Would it be better...
0
9920
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
11063
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10699
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10390
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...
0
9535
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 launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7932
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
5762
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...
0
5960
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
3203
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.