User not logged in - login - register
Home Calendar Books School Tool Photo Gallery Message Boards Users Statistics Advertise Site Info
go to bottom | |
 Message Boards » » center linked images within table cells Page [1]  
wdprice3
BinaryBuffonary
45912 Posts
user info
edit post

possible with html. i don't care for css... I don't know it and don't have time to learn it, etc, etc, etc. so is this possible with straight html code, that isn't dependent on me inputting a pixel count or anything?

nothing I've tried works.







Picture Title:

Caption



haha, dammit, how can I post html without it reading in as html?


[Edited on November 2, 2010 at 4:21 PM. Reason : .]

11/2/2010 4:00:31 PM

wwwebsurfer
All American
10217 Posts
user info
edit post

wow

Just to clarify - are you trying to center the image within the cell horizontal/vertical/both, and/or center the table/cell on the page? The link code shouldn't matter if you get the img and table codes right.

11/2/2010 4:04:00 PM

wdprice3
BinaryBuffonary
45912 Posts
user info
edit post

center the image horizontally within the cell.

it appears to be centered on here... but that doesn't happen on the site I'm working on. could something else in the framework of the site/page be fucking it up? I didn't do the framework... just updating information on the page

I've tried td align=center and when I view other sites/their code, it works...

I've simply done table, row, column align=center, linked image, image thumbnail (resized via html), end link, end column, end row

[Edited on November 2, 2010 at 4:14 PM. Reason : .]

11/2/2010 4:05:39 PM

Prospero
All American
11662 Posts
user info
edit post

use the code button and put the HTML in there, like this:


<table align="center">
<tr>
<td align="center" valign="center">Picture</td>
<td align="center" valign="center">Text</td>
</tr>
</table>

11/2/2010 4:16:38 PM

wdprice3
BinaryBuffonary
45912 Posts
user info
edit post

^still shows up as html, not code for me. premie shenanigans.

it must be some shit in all of the page coding because if I make a page with just the table shit, it's centered.
so any ideas on what would cause these not to center?

fuck it. i'll just go with style=padding

(widest image px - current image px)/2 should work just fine, right (images are different sizes)?

[Edited on November 2, 2010 at 4:30 PM. Reason : .]

11/2/2010 4:21:37 PM

Prospero
All American
11662 Posts
user info
edit post

if there's CSS it could be modifying it, or attributes given specifically to each element, look for any id=, class=, <span>, or <div> tags

try this:

<table style="margin-left:auto;margin-right:auto;">
<tr>
<td style="text-align:center;vertical-align:middle;"><img src=""></td>
<td style="text-align:center;vertical-align:middle;">Text</td>
</tr>
</table>


^use this instead.... style="display:block;margin-left:auto;margin-right:auto;" on the <img> tag

example: <img src="image.jpg" style="display:block;margin-left:auto;margin-right:auto;">

[Edited on November 2, 2010 at 4:37 PM. Reason : .]

11/2/2010 4:29:32 PM

wdprice3
BinaryBuffonary
45912 Posts
user info
edit post

yeh, it's riddled with those... css, div, id, class...
^not working either

[Edited on November 2, 2010 at 4:34 PM. Reason : .,]

11/2/2010 4:32:28 PM

Prospero
All American
11662 Posts
user info
edit post

Sorry, meant this: style="display:block;margin-left:auto;margin-right:auto;" on the <img> tag

[Edited on November 2, 2010 at 4:37 PM. Reason : forgot a quote]

11/2/2010 4:36:19 PM

lewisje
All American
9196 Posts
user info
edit post

It's much easier to style things with CSS than HTML, no pixel count required

[Edited on November 2, 2010 at 4:57 PM. Reason : Prospero used inline CSS, which is okay for a quick hack, but external stylesheets pwn

11/2/2010 4:57:07 PM

Shaggy
All American
17820 Posts
user info
edit post

lol code tags dont work ;-P

[Edited on November 2, 2010 at 4:57 PM. Reason : a]

11/2/2010 4:57:40 PM

lewisje
All American
9196 Posts
user info
edit post

All they do is put text in a monospace font inside a special box, also I think the center element only does horizontal centering, and you need to use CSS to consistently do vertical centering.

[Edited on November 2, 2010 at 5:01 PM. Reason : dang the pre element is changed into CrazyCode code tags...

11/2/2010 5:00:18 PM

Shaggy
All American
17820 Posts
user info
edit post

use the vertical center tag
^
c
e
n
t
e
r
\/

11/2/2010 5:12:13 PM

Prospero
All American
11662 Posts
user info
edit post

lewisje i used inline to override any external existing CSS that was screwing it up, read the whole thread.... also he was looking specifically for horizontal, again in the OP's post.

[Edited on November 2, 2010 at 5:36 PM. Reason : .]

11/2/2010 5:35:39 PM

wdprice3
BinaryBuffonary
45912 Posts
user info
edit post

still didn't get anything to work just padding for now...

another issue, whoever set this css up did a horrible job of making in-text links stand out... does anything in this stylesheet look like it controls the color/font style of in-text links? the link color is a light green that I can hardly tell apart from the rest of the text


/* Global Styles */

body {
margin:0px;
}

td {
font:11px Arial, Helvetica, sans-serif;
color:#FFFF00;
}

a {
color: #FF080E;
}

a:hover {
color: #FF9900;
}

/* ID Styles */

#navigation td {
border-bottom: 1px solid #FF9900
}

#navigation a {
font:11px Arial, Helvetica, sans-serif;
color: #FF9900;
line-height:16px;
letter-spacing:.1em;
text-decoration: none;
display:block;
padding:8px 6px 8px 22px;
}

#navigation a:hover {
color:#FFFFCC;
font-weight:bold;
background: url("mm_bullet_yellow.gif") 10px 50% no-repeat;
}

#navheader {
font:24px georgia;
color: #1F2669;
letter-spacing:.4em;
padding:10px;
line-height:30px;
}

#logo {
font:14px Arial, Helvetica, sans-serif;
color: #FF9900;
letter-spacing:.5em;
line-height:30px;
}

#tagline {
font:11px Arial, Helvetica, sans-serif;
color: #FF9900;
letter-spacing:.2em;
line-height:14px;
}

#monthformat td {
border-bottom: 1px solid #FFFFCC;
}

#dateformat {
font:11px Arial, Helvetica, sans-serif;
color: #FFFF00;
letter-spacing:.4em;
}

#dateformat a {
font: 11px Arial, Helvetica, sans-serif;
color: #FFFF00;
letter-spacing:.1em;
text-decoration: none;
}

#dateformat a:hover {
color: #FFFFCC;
}

/* Class Styles */

.bodyText {
font:11px Arial, Helvetica, sans-serif;
color:#FFFF00;
line-height:22px;
margin-top:0px;
letter-spacing:.1em;
}

.pageName{
font:18px Arial, Helvetica, sans-serif;
color: #FFFF00;
line-height:24px;
letter-spacing:.3em;
}

.columnHeader {
font: 11px Arial, Helvetica, sans-serif;
color: #FF080E;
line-height:18px;
letter-spacing:.05em;
}

.subHeader {
font:bold 11px Arial, Helvetica, sans-serif;
color: #FF080E;
line-height:18px;
letter-spacing:.1em;
}

.smallText {
font:10px Arial, Helvetica, sans-serif;
color:#333333;
}

.navText {
font:11px Georgia, Times New Roman, Times, serif;
color: #1F2669;
line-height:16px;
letter-spacing:.1em;
text-decoration: none;
}

[Edited on November 2, 2010 at 5:59 PM. Reason : .]

11/2/2010 5:57:09 PM

Ernie
All American
45943 Posts
user info
edit post

a {
color: #FF080E;
}

a:hover {
color: #FF9900;
}

[Edited on November 2, 2010 at 6:18 PM. Reason : those are your anchors]

[Edited on November 2, 2010 at 6:19 PM. Reason : and anything else in there with an 'a' selector]

11/2/2010 6:18:22 PM

Kris
All American
36908 Posts
user info
edit post

fucking css how do they work?

seriously dude, just learn it, styling with html is like 1992 old

11/2/2010 7:06:45 PM

lewisje
All American
9196 Posts
user info
edit post

to be fair it was still well within the realm of "legacy compatibility" by 1997, until Netscape 4 was well and truly out of contention.

11/3/2010 10:39:07 PM

wdprice3
BinaryBuffonary
45912 Posts
user info
edit post

why would I learn css to update a website for another month? sure, I'd love to learn CSS, and HTML, java, C++, VB, etc etc etc. Time and money, though....

11/4/2010 7:32:46 AM

EuroTitToss
All American
4790 Posts
user info
edit post

Quote :
"sure, I'd love to learn CSS, and HTML, java, C++, VB, etc etc etc. Time and money, though...."


This is like saying "sure I'd love to learn proper English, and Spanish, Hindi, Mandarin, Swahili, etc etc etc. Time and money, though...."

11/4/2010 10:22:51 AM

Noen
All American
31346 Posts
user info
edit post

Quit wasting our fucking time unless you are going to pay us our money

Etc etc. We aren't your solution to your own ineptitude

11/4/2010 12:21:51 PM

Prospero
All American
11662 Posts
user info
edit post

Since when is spending any time on TWW NOT wasting time?

11/4/2010 12:29:53 PM

wdprice3
BinaryBuffonary
45912 Posts
user info
edit post

^^^not even close
^^so no more free advice in TT? hmm... I'm about to start another thread that I need help on too..
^Hush your mouth

thanks for the help, for those of you who provided it.

[Edited on November 4, 2010 at 12:43 PM. Reason : .]

11/4/2010 12:39:49 PM

lewisje
All American
9196 Posts
user info
edit post

You really need to learn HTML and CSS; CSS-based layouts are much more powerful and easy to maintain than old-school HTML.

If your site will be interactive, you should learn Javascript (formally known as ECMAScript), and with the advances in HTML5, CSS3, and ECMAScript 5, you will soon be able to do most of the things that Flash and Java used to be needed for, at the cost of legacy compatibility.


You probably don't want to deal with developing content for Flash, Java, or Silverlight, but if you want to use other people's content it's not hard to Google how to embed plugin content in a cross-platform manner.

Actually, stay away from Java unless there's no way around it (an example of this is how ClipNabber and KeepVid had to re-jigger their operations, and another is an applet I once saw that detected whether you had a certain program installed and if not, proceeded to install it); it works wonders in enterprise computing and on the server side, and it holds its own as a platform for desktop applications, but it's terribly slow and limited in the Web browser.
Also VB.NET is used to develop Silverlight applications (as are C# and F#), but you probably want to stay away from that too; C++ can be used to develop CGI programs on the server side (Perl is more common for this because it is more flexible and does not need to be compiled) but has no purpose in client-side web development, just in the development of the browsers themselves and also of plugins like Flash, Java, and Silverlight.

11/4/2010 11:19:22 PM

kiljadn
All American
44690 Posts
user info
edit post

Tables are meant for data.


Tables are not meant for lazy positioning.


Stop using tables.

11/5/2010 12:07:56 AM

wdprice3
BinaryBuffonary
45912 Posts
user info
edit post

thanks guys, but all I have to do is update this information one time and the website is done/my html/etc needs are over with. there will be no more updating it.

Like I said, sure I'd love to learn this; I know enough basic html to get by (which is why using tables for image layouts is my go to method since it's relatively easy except for this centering issue). But I don't have the time nor the resources to learn CSS and HTML well enough in the next 2 weeks to do this website the "correct" way; there is no outsourcing it; etc.

^^haha

11/5/2010 7:16:30 AM

lewisje
All American
9196 Posts
user info
edit post

It doesn't take that goddam long to learn enough CSS to position this

and you're fooling yourself if you think the site will never need to be updated again

11/5/2010 8:50:39 AM

FroshKiller
All American
51913 Posts
user info
edit post

seriously

if it never needs to be updated again

just put it in a pdf or a fucking screenshot

why work hard

11/5/2010 8:53:21 AM

lewisje
All American
9196 Posts
user info
edit post

it may need working links

and the ability to be seen on mobile devices

why bog down people's browsers with a huge image or a PDF

11/5/2010 8:57:05 AM

FroshKiller
All American
51913 Posts
user info
edit post

pdf supports hyperlinks

and it's called an image map

don't be gay

11/5/2010 8:58:10 AM

lewisje
All American
9196 Posts
user info
edit post

~

11/5/2010 9:12:29 AM

wdprice3
BinaryBuffonary
45912 Posts
user info
edit post

I'm tired of this debate.

No, mobile browsing won't be needed.
No, it's not going to be a high traffic site; or anything close to that.
It will probably have 100 hits (other than mine) during its lifetime.
No, it will not need to be updated any further.
After a 1-3 years the site probably won't even be useful/visited anymore.
It's a temporary thing to provide information to a few interested parties who could care less about the finer points of webdesign, etc.
All I am doing is updating the data/pictures/graphs, all of which is complete except for a few images that aren't centered... so again, I don't think wasting anymore time on it is worthwhile.

[Edited on November 5, 2010 at 12:35 PM. Reason : .]

11/5/2010 12:34:58 PM

EuroTitToss
All American
4790 Posts
user info
edit post

Quote :
"Tables are meant for data.


Tables are not meant for lazy positioning.


Stop using tables."


I don't give a gotdamn. Yes, this dude should be learning CSS. But tables are useful as hell for laying out things like forms.

11/5/2010 3:55:13 PM

lewisje
All American
9196 Posts
user info
edit post

I realize that this thread seems to be about using tables for lazy layout, which it is not. Hear me out, maybe I can offer some insight.

Tables actually are useful for tabular data, like a table of images with descriptions near them, so really it wasn't such a good idea to bring out the justified rage against table-based layouts.

Instead the real problem was with the recommendation to use the center element for layout within the cell, when a little <style>td img{margin:auto;}</style> in the head would do the trick, in one go, for all images, without needing to deal with adding center elements or halign and valign attributes each and every single time you put in another image.

11/5/2010 8:19:11 PM

wdprice3
BinaryBuffonary
45912 Posts
user info
edit post

^cool, thanks. so does that just look for the < td > < img tags or something? ...so it wouldn't mess with other images on the page (not in tables)

[Edited on November 5, 2010 at 9:03 PM. Reason : /]

11/5/2010 9:03:01 PM

GenghisJohn
bonafide
10252 Posts
user info
edit post

Sure, tables can be useful for whatever the fuck crazy shit you want to imagine

but they are meant for data. there is a reason standards exist. But feel free to do whatever you want on your own personal projects.

11/5/2010 9:08:33 PM

lewisje
All American
9196 Posts
user info
edit post

^He is making a table with stuff in it; it's not like he's using the table elements to make sure the navbar looks just so and the two columns of some news site line up just right...you know, like not an actual table.

^^the style element encloses CSS, the "td img" part selects all img elements that lie inside (or "are children") of td elements, and the stuff in the braces consists of the style rules applied to all such elements, namely setting all margins to be automatic, which effectively makes them all the same, so the img elements are centered

yes CSS is that easy

11/5/2010 9:18:21 PM

wdprice3
BinaryBuffonary
45912 Posts
user info
edit post

thanks! hopefully the person that set this up didn't do the same thing i'm doing now

but I'm pretty sure all of the framework/styling originally done was accomplished via CSS.

11/5/2010 9:26:55 PM

 Message Boards » Tech Talk » center linked images within table cells Page [1]  
go to top | |
Admin Options : move topic | lock topic

© 2024 by The Wolf Web - All Rights Reserved.
The material located at this site is not endorsed, sponsored or provided by or on behalf of North Carolina State University.
Powered by CrazyWeb v2.39 - our disclaimer.