CSS - Rotated Text Table Headers - Help!

Hi, I am making a website for my friend that lost her myspace acount becuase of here small uncle. So I want to make a website for her that is simmular to myspace. So my question is: How do I add in text up the top in the border that is 15xp?

Thank you.

Hey folks, i'm trying to get the effect of the following image:
http://www.dgemu.com/Images/first_steps.jpg

Basically I got it all set up 'cept for Metroid's image, which is just driving me insane.. I used absolute positioning on the metroid image so I could use relative positioning on that table thingy and use z-index to put it there, but I'm having problems with the text - it goes behind the image ahhhh - what can I do?

I was thinking perhaps adding relative positioning for the text too and make it above the image but what I want is to not touch the image - u know like u do float:right on the image - but I can't use float 'cuz then the z-indexing thing messes up.. hmm.. can anyone help me?

Hello, I am attempting to have two pieces of text within a table cell that also contains an image. I was able to figure out the first piece of text that I wanted vertically aligned to the top and to the left, but the next piece of text, which I want vertically aligned to the bottom of the cell and aligned right I am having issues with. Here is the example code:
Code:

<td style"vertical-align: bottom;"><img src="image1.jpg" border="0" width="195"><font style="position: absolute;left: 2;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">STYLE#</font><font style="position: absolute;right: ;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">As low as $x.xxfont></td>

Is this possible within the same table cell as the image? Or do I have to place a CSS table within this cell to place text over top of the image? I would have placed the image as the cell background image, however, I am dynamically creating these tables, and not all of my images are of same size. I am specifying the width though, just not the height. Thank you in advance.

Hi all.

I have a script that draws a calendar. I would like to be able to position the day number in the upper right of each table cell using CSS.

Note, each cell will also have an embedded table or just text showing events for that day, so I don't mind if the day number overlaps that table.

Ive tried doing something like this: PHP Code:
 td.dayNumJK {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 1px;
    right: 1px;
} 



But it seems to ignore the style. I've tried all the possible position attribute values (static, absolute, relative, fixed) but it doesnt seem to work. Maybe this is not possible with CSS?

Any ideas how I can accomplish this?

I am using a Body{...} style on my page (background set to black #000000) and DIV's inside Tables inside DIV's and when I set up and use a .14 (14px size and white color font syle class) my text stays black! The only thing that works is "inline styles". Not good for site wide-control. There is obviously a conflict here or something is superceding my classes. I prefer to use CSS for font control. I am using div's because of a "jquery slider" and tables because I usually design the look in photoshop and then use slices... not doing that on this site, but it's just what I'm used to. Thanks for any help.

single page site is here "petermarsphotography dot com"

I'm building a table (for tabular data, of course) and need text within cells centered. However, applying "text-align:center;" to the cells in any other way but inline styles doesn't work.

For example, this does not work:
Code:

td.centercell {
  text-align: center;
}

<table>
  <tr>
    <td class="centercell">Hi!</td>
  <tr>
</table>

But this does:
Code:

<table>
  <tr>
    <td style="text-align:center;">Hi!</td>
  <tr>
</table>

I'd rather not have to put inline styles on every single cell I need centered, as this is most of them.

What's going on?

I seem to have messed up while slicing...If my font size is too large, it'll mess up my table positioning...I'd like to know if there's any way to align text to the bottom of a table collumn?

Is there anything I can put in my style sheet to do this? Am I not being clear enough?

Please help.

EDIT : I've got a picture uploaded.


See how on the left there's that white space? And under "Welcome" there's also a lot of space? I figure if I could align the text to the bottom, it'd fix both problems. =/

I am displaying a list of users on my site. Each user has a picture with some text below. I want to display this image+text block" and I want it to wrap like text.

I made inline div and tables with these elements but it seems to wrap arbitrarily around the page.

any suggestions?

Hi,

I am very new to CSS and was wondering if there is a way to angle text in a <TD></TD> cell of a table?

My problem is that along the top of my table I have to list the times e.g. 12:00:00, 12:15:00, to 23:45:00. This makes the width of my table much bigger.

I was wondering if its possible to angle the text so it stands ons its head - so to speak - that way the column width would be much smaller?


Thanks in advance

j

[A view of what I want the final product I made in photoshop is attached.]

When it comes to the technical aspect of design I BS my way through most of it or pick it up as I go along. On top of this, I'm too anal to use anything but Notepad to edit my code, but that's not the problem. This is: The image at the bottom of the page is what I'd like the damn page to look like without the use of Flash (I could do that, but I want to make a seperate site design that uses flash and keep this to HTML, CSS and maybe Javascript). So, I found this: URL and I think it's what I want, but, my first thought was that it was an arhived post. It actually appears to be an unanswered post. I tried it out, and sure enough it doesn't work. Well, I was hoping it would, because I'm more geared towards Graphic Design and no coding. I tend to design em first and fill in the blanks later. Well, this time, my code isn't the only thing that's blank and I'm just this page and another very similer one away from finishing the site, so I need help. Here's how I planned to put the thing together: It's an HTML table centered in the middle of the page. I was planning on planting the CSS in the gaping hole left by removing a section of table, and praying it fit snugly. Am I going about this wrong? And if I'm not and that link is the solution to my problems, how do I implement it into my code? I tried a test version of it, and couldn't get it to work, but I'll tell you now, I only have a theoretical graps of CSS and haven't dove into it as of yet...thus I know nothing really. And on top of this, I want to make those two left side text pieces link to anchors in the scrolling text. And those things on the right side are customized scoll bars. The latter is not nesscary (I know that's java script. I had it on a site I did a while ago, but the site is lost and I didn't code that section), but it would be optimum. So that's it, and, well, if it works, it will look pretty.

Thanks for your help before hand, if this is too rambling, please feel free to tell me to better describe it. I'm in a bit of a rush, and as soon as I hit "Submit" I'm running out the door.
------->Jeff Compton

This is the line in my index.html:
PHP Code:
<PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> 





This is my PRE code in style.css:
PHP Code:
 PRE {
    BORDER-RIGHT: #2f6fab 1px dashed; 
    PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; 
    PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; 
    COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; 
    BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9;
    width: 90%;
}
PRE.yup {
    COLOR: #000000;
    FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
    FONT-SIZE: 12px;
    text-align: left;
    width: 80%;
    margin: 12px auto;
} 





The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas?

Hello,

I am working on a web site with a two column layout, "Content" on the left and "Sidebar" on the right.

Sidebar
1) Sidebar is divided into sections (div). Each section has header.

Content
Content can display the following data (each is a different page):

2) In HomePage.html a list of blog articles is displayed. Each blog article has a title.

3) In ShowArticle.html a specific article is displayed (Title, Body, Tags).

4) In Documents.html a list of documents is displayed but in this case the page
has a title and a subtitle. For example:

Documents
here you can find all the documents you need.

5) In Contact.html a title with subtitle is displayed just as in (4).
After the title and subtitle there is only paragraphs with the contacts.

So basically that's it ... I am trying to figure the correct way to use <h1>, <h2>, etc.

The text font, weight and color is always the same ... what changes is the size.

For example, if in HomePage the Post Header could be <h1> because there is no page title, in Documents there is a page title and a subtitle (should be this a paragraph? it's more like a description phrase then a section separator). So in Documents each Document could have <h3> ...

And if there is a Page Title (h1) then should side bar have <h2>? I suppose it is more correct to be h1.Sidebar.

And in ShowArticle I am displaying one article. Should I use the <h1> in the title? Then it would be the same tag then in Sidebar section ...

I have been looking in a few web sites and blogs and they differ ...

Anyway, I am just trying to make this right ...

Any help is welcome.

Thanks,
Miguel

In the attached gif, you should be able to see exactly what I mean, if I don't explain it well enough.

I have a containing block, #content_main, defined as such:
Code:

#content_main
{
	margin-left: 170px;
	padding: .5cm .25cm 50px;
}

Headers (h1, h2, h3, etc) are used inside #content_main and are defined like this:
Code:

h1, h2, h3, h4, h5, h6
{
	font-family: georgia, serif;
	border-bottom: 1px solid #009;
}

If you look at the attached gif, you'll see the problem. The top one is what happens. It extends the border-bottom to the width of the containing block, even though it places the text correctly. The second one "Something Else" is what I want it to look like. I edited that with Fireworks.

Since it renders the same in Firefox and IE, I figure it's my code that's wrong. Any thoughts?

MPEDrummer

This may not belong here. But it's about a CSS file, so I'll explain:


I have css files in that are not having any effect. Using Firebug, I think I've narrowed the problem down to a server-side issue.

Here are my headers:

Request:
Host: host
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
Accept: text/css,*/*;q=0.1
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: https:/host/page
Cookie: ...........

Response:
Date: Tue, 27 Jul 2010 18:34:59 GMT
Server: Apache/2.2.3 (Red Hat)
X-Powered-By: PHP/5.1.6
Content-Length: 2613
Connection: close
Content-Type: text/html; charset=UTF-8

It looks like the server is delivering the css file as text/html and the browser is not interpreting the css styles.

Other css files work. For example (main.css):
Request:
Host: host
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
Accept: text/css,*/*;q=0.1
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: https://host/page
Cookie: .....

Response:
Date: Tue, 27 Jul 2010 18:34:59 GMT
Server: Apache/2.2.3 (Red Hat)
Last-Modified: Tue, 27 Jul 2010 16:21:07 GMT
Etag: "136d7c-cba-e36a82c0"
Accept-Ranges: bytes
Content-Length: 3258
Connection: close
Content-Type: text/css


My server is Apache 2.2.3.
I've tried adding "AddType text/css .css" to the httpd.conf file. But that had no effect.

Any suggestions?