473,847 Members | 1,802 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS q, laying out some images in a table/<td> relative to upper corner of cell.

Trying to line up a tic-tac-toe board type grid of images using style=
tags to <img inside a table TD
but it's not working, I get more like a set of steps, can I get an
explanation of what's wrong with this and how to do it correctly?:

<table border="1">
<tr>

<td valign="top" align="left">

<!-- following should line up as a grid, look like a staircase -->
<img src=here.gif style="{positio n:relative;top: 6px;left:36px;} ">
<img src=here.gif style="{positio n:relative;top: 6px;left:139px; }">
<img src=here.gif style="{positio n:relative;top: 6px;left:242px; }">
<img src=here.gif style="{positio n:relative;top: 87px;left:36px; }">
<img src=here.gif style="{positio n:relative;top: 87px;left:139px ;}">
<img src=here.gif style="{positio n:relative;top: 87px;left:242px ;}">
<img src=here.gif style="{positio n:relative;top: 168px;left:36px ;}">
<img src=here.gif style="{positio n:relative;top: 168px;left:139p x;}">
<img src=here.gif style="{positio n:relative;top: 168px;left:242p x;}">

</td>
</tr>
</table>
For this example it's a grid but I have 7 other patterns I have to lay
up with this not all of them can be expressed with a grid pattern.

any help is appreciated.

Jul 19 '06 #1
4 4074
Els
dr**********@gm ail.com wrote:
<!-- following should line up as a grid, look like a staircase -->
<img src=here.gif style="{positio n:relative;top: 6px;left:36px;} ">
<img src=here.gif style="{positio n:relative;top: 6px;left:139px; }">
[snip]

a) Take out the {} from the style attribute.
b) Add " around the value of the src attribute.
c) Add alt="" to every img tag, or fill in an appropriate alternative
text, like alt="picture of the moon".
d) You don't want to use position:relati ve for this.
Perhaps position:absolu te? Depends on what you want. If you don't give
any style at all, they may already line up like you want.
For this example it's a grid but I have 7 other patterns I have to lay
up with this not all of them can be expressed with a grid pattern.
Depending on the patterns, you may need position:absolu te for that.
To position them relative to the border of the td, give the td
position:relati ve, and each image position:absolu te.
any help is appreciated.
You're welcome.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: The Clash - Louie Louie
Jul 19 '06 #2
Els wrote:

....
For this example it's a grid but I have 7 other patterns I have to lay
up with this not all of them can be expressed with a grid pattern.

Depending on the patterns, you may need position:absolu te for that.
To position them relative to the border of the td, give the td
position:relati ve, and each image position:absolu te.
interestingly (kidding) this works with IE and not Mozilla, Opera, etc
if I made the <td style="position :absolute;"it seems ok but only if I
have 1 <td>

if I try to put 2 <td>s like this in one <tr(or 2 <tr>s with 1 <tb>
in each) like this they are totally stacked on top of one another.

I can not use :absolute on it's own (outside tables) as when the window
is resized the items are no longer in the table. entire page is in
<centertags now this all worked before when it was just left-weighted
(no <center>)

I might have to completely scrap this and start from scratch

thanks
Now playing: The Clash - Louie Louie
I didn't realize the Clash did a version of Louie Louie

Jul 20 '06 #3
Els
dr**********@gm ail.com wrote:
Els wrote:

...
>>For this example it's a grid but I have 7 other patterns I have to lay
up with this not all of them can be expressed with a grid pattern.

Depending on the patterns, you may need position:absolu te for that.
To position them relative to the border of the td, give the td
position:relat ive, and each image position:absolu te.

interestingly (kidding) this works with IE and not Mozilla, Opera, etc
if I made the <td style="position :absolute;"it seems ok but only if I
have 1 <td>

if I try to put 2 <td>s like this in one <tr(or 2 <tr>s with 1 <tb>
in each) like this they are totally stacked on top of one another.
No, if you give both <td>s position:relati ve (not absolute!), then the
contents of each should stay inside of it.
I can not use :absolute on it's own (outside tables) as when the window
is resized the items are no longer in the table. entire page is in
<centertags now this all worked before when it was just left-weighted
(no <center>)
It would work if you gave the container that's around the lot (the
most outer element that gets centered), position:relati ve.

If none of the elements has position, the viewport is what all the
absolute positioned elements are getting their position from. Which is
why the page can move to the right (when making the window wider),
while the elements that you gave position:absolu te, stay put.
I might have to completely scrap this and start from scratch
You might wanna show a url so we can more clearly point out what could
be the solution :-)
>Now playing: The Clash - Louie Louie

I didn't realize the Clash did a version of Louie Louie
You learn something new everyday ;-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Jul 20 '06 #4

Els wrote:

[sniiiiip]
You might wanna show a url so we can more clearly point out what could
be the solution :-)
I would have if I could but the page in question was for a site that
isn't public yet and only available on an internal network. I couldn't
duplicate it outside the network as I only have apache servers and this
was an IIS/ASP page and even if I could, I am forbidden to.

HOWEVER I got this working, eventually, a completely different way*, so
all worked out in the end.

Thank you for your help.

* using walter zorn's drag drop js and hacking in a few lines.

>
Now playing: The Clash - Louie Louie
I didn't realize the Clash did a version of Louie Louie

You learn something new everyday ;-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Jul 22 '06 #5

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

Similar topics

4
3585
by: A Web Master | last post by:
As a mean of not having to use Framesets/Frames with all the bad side effects/workarounds that come with them, I want to know if it is possible to code a scrolling veritcal bar into a table <TD> ? If so, how ? I am coding my client's WEB site in ASP.
1
8372
by: christian9997 | last post by:
Hi I was trying to create a page where a SubMenu would appear when the user moved the mouse over an item of a Menu (= Table Cell <TD>). Unfortunately there seems to be a problem; the onMouseOver event is fired as soon as the mouse enters the cell but then the onMouseOut event is fired when it is moved over the writing inside the cell. The browsers seem to consider that the writing is not part of the cell. After a lot of waisted time I...
5
2859
by: MyndPhlyp | last post by:
I've been busting my head trying to figure this out for quite some time. With IE6 and NS7, no problems. I can simply code the HTML <img height="100%"> and be done with it. But NS4 and NS6 (and probably a couple of other IE and NS versions I can't get to right now) don't want to play nice unless I hard code the image height. (Yes, I'm one of those who insists on still coding for NS4.)
14
21941
by: Zenobia | last post by:
Hello folks, Is it possible to position an item within a <td> element? For instance see below. The table has multiple rows, one for each database record. Each row has 3 hrefs associated with it (for edit, delete and update). I want to position these 3 href items in the same columns, which would be posible if the span could be positioned - for instance on the extreme right of the td in which it is contained.
2
6188
by: Pete Kipe | last post by:
I'm not a JavaScript programmer...but I'm trying to put together a simple menu system for a new website and need a little help. I have the following script: <SCRIPT language=javascript> <!-- Hide JavaScript from Java-Impaired Browsers function NavRollOver(oTd) {if (!oTd.contains(event.fromElement)) {oTd.bgColor="#CC0000";}} function NavRollOut(oTd) {if (!oTd.contains(event.toElement))
1
2249
by: prefersgolfing | last post by:
I'm not using Master Pages, yet I'd like to display the contents of an HTML page within a <table><tr><td> on a .aspx. I have a lengthy guide already paginated in html. I'd like to embed the pages "as is" in the new 2.0 app without using Master Pages or creating new ..aspx's. I'm looking for the quickest way to the finish line. Any suggestions would be welcomed. Thanks.
4
17630
by: Jason | last post by:
Is that possible? How? <td > <asp:Label ID="StartDateLabel" runat="server" Text="Start Date:"> <asp:imagebutton ID="Imagebutton1" width=18 Height=18 CommandName=SetDate imageUrl="../cal.jpg" runat=server /> </asp:Label> </td> <td >
7
2803
by: Xiaoyan | last post by:
Hi,everyone: I have a problem now. I can't get the information between the <tr><td> and </td></tr>. for example: I use this regular expression can't get it, I don't know why. $test=~/<tr><td>(.*)<\/td><\/td>(.*)<\/td><\/tr>/ms; <tr><td>station</td> <td>station number/identification, see chart above: <br> B = GoMoos buoy B location<br> S = New Scantum at the southern edge Jefferys Ledge</td></tr>.
2
3044
by: markszlazak | last post by:
I'm a relatively slow response of table cells changing their background color with mouseover/our in IE6 (Win 2K) but the response is fine (fast) in Firefox. Why? The code is below. Sorry about the length. <html> <head> <title>Rapid Blocking Interface</title> <style> .calendar {
0
9886
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
9730
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10983
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
10647
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...
1
10706
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 most users, this new feature is actually very convenient. If you want to control the update process,...
0
7056
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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5911
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4528
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
3
3164
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.