PDA

View Full Version : CSS Positioning


ast3r3x
2004-07-22, 13:59
Problem (http://24.229.74.113:2222/intouch/newthread.php?fid=2)

Basically, I have a table that I have set to be 80% with a minimum width of 600px (the one the form is in.) Well My smiley table, I'd love to stay floating to the right like it should be. Is there a way to set that table to be left 80% or x pixels like you can do for width?

Need any help, be glad to provide you with my code or more information if I wasn't clear enough. Thanks :)


Edit: Normally you have to be logged in to view this page, so that being disabled, stops my login check from changing my CSS styles to bring that form table up to be level with the smilies table.

noleli2
2004-07-22, 17:08
The smiley table does indeed stay floating to the right in Win IE 6. Unfortunatly, if I make the window too small (i.e. smaller than the 600px + width of smilely table), the smileys float over the text box instead of the page getting a horizontal scroll wheel.

But you seem to be having better luck with CSS layout stuff than I've been having....

ast3r3x
2004-07-22, 17:19
The smiley table does indeed stay floating to the right in Win IE 6. Unfortunatly, if I make the window too small (i.e. smaller than the 600px + width of smilely table), the smileys float over the text box instead of the page getting a horizontal scroll wheel.

But you seem to be having better luck with CSS layout stuff than I've been having....

That is what I mean. The display thing with the form in it, stops getting smaller at 600px or whatever, however, the smilies table will go over top :\ I want to stop this from happening, is there a CSS way, or do I have to hack my form table :\

Edit: What seems to be your problem, I might be able to help, but others here will definitely be able to help you...heck they helped me with a majority of my website.

Brad
2004-07-22, 18:25
Blatantly stealing from Toothpaste for Dinner?

For shame!

ast3r3x
2004-07-22, 19:33
Blatantly stealing from Toothpaste for Dinner?

For shame!

:lol:

I forget how I came about them, but I loved them! I should have expected no less then Brad to recognize them ;)

They aren't there for good, I just like to do some different things while I make websites so I don't get bored with the look. Actually those aren't really the same guys, I drew traced them myself! They will be replaced eventually I think...once I'm done.

REAL funny though :lol:

Edit: Speaking of websites though...what font is used for the "edit", and "reply" buttons here?

synotic
2004-07-23, 03:16
Problem (http://24.229.74.113:2222/intouch/newthread.php?fid=2)

Basically, I have a table that I have set to be 80% with a minimum width of 600px (the one the form is in.) Well My smiley table, I'd love to stay floating to the right like it should be. Is there a way to set that table to be left 80% or x pixels like you can do for width?

Need any help, be glad to provide you with my code or more information if I wasn't clear enough. Thanks :)


Edit: Normally you have to be logged in to view this page, so that being disabled, stops my login check from changing my CSS styles to bring that form table up to be level with the smilies table.Ugh, looking at the code makes my head hurt, sorry ;)

Let me get this straight... the form table should be at least 600 pixels but once the window gets larger, it should grow to be 80% of the window? For me on both Firefox and IE:6, the form table seems to maintain a width continually of 600 pixels. FWIW, at least on my screen, the form seems to be quite unnecesarily large. I think the size AppleNova/other bulletin boards use is more reasonable.

Also, I am confused what you mean by "Is there a way to set that table to be left 80% or x pixels like you can do for width?". With the form table taking 80% of the window, you want the smiley table to be 80% from the left of the window, thus starting right after the form table?

If you clarify some of this, I might be able to offer some alternative solutions. If you want some advice however, I personally don't enjoy using percentages because they're way too finicky, what with rounding errors and all that. I wouldn't advise them for a liquid design.

Also, that smiley table... need it be a table? It's not really a two-dimensional list with a smiley in the left column and the descriptor in the right. Rather I view it as a one column listing of smiley and title. Just a list of smilies. Thinking of it that way, it might be cleaner to use an unordered list, something like this:<ul>
<li><div><img src="wink.gif" /></div> ;)</li>
<li><div><img src="mad.gif" /></div> :mad:</li>
</ul>And then some CSS code like:ul { list-style: none }
li { border-bottom: dotted 1px #ccc }
li div { padding: 2px 6px; border-right: dotted 1px #ccc }Note that I haven't tested any of this code and that you'd probably have to remove some padding and margins... But if you adjust a few padding values and whatnot, you can come with some visually identical. And a whole lot cleaner :) Just a suggestion though.

Also, whenever dealing with rendering issues, always, always, always validate your code (just something I noticed right away was your closing of <font> with </fon>). Although here it seems to be an design issue and not a browser quirk, it will save you a lot of pain in the future. W3C Validator (http://validator.w3.org/). Also be sure to add a doctype to the top of your page. Otherwise different browsers will render your page in completely different modes (quirks mode vs. standards mode) which will be even more frustrating as you try and get the page to display correctly in multiple browsers.

Sorry to lecture you so much, but I'm doing it for your own good (how many times have you heard that? :D). Anyways like I mentioned earlier, if you clarify some of your problem, I might be able to provide some ideas into how you can create something you find suitable.

ast3r3x
2004-07-23, 06:18
I checked my index.php and there were 77 things wrong on that page alone :lol:

In my defense...not every page will have 77 things wrong after I fix the first 77, because I use "include()" to save me from having to write a lot of code over. And tons of my errors ar me not having "alt" for my images. I will work this afternoon/this evening on fixing those things.

Hey man, feel free to rip up my website as long as you make sure to give tips on how to NOT make it suck ;)

As for my smilies table...well I'm not sure it will help making it a list like that because the white blob in the background is a table itself (which was pain to make by the way!)

I guess I could just put them both in a table and then just make them both static so they don't move if I have to.

As for reading my code giving you a headache...:lol: I normally don't even look at my final HTML code too often. I out put most stuff (I guess all that stuff blocked together without spaces or line breaks) with PHP. I guess it couldn't hurt to through a \r in there every once in a while huh? It makes it harder for people to steal my intellectual propery ;)

Stroszek
2004-07-23, 09:02
I'm using Mozilla 1.3, and my browser window is the size of my monitor - plenty big to show everything. Your smilies are floating on top of the form at the left side of the screen.

I'm pretty sure that's not what you want.

Floats can be finicky.

Take a look here. These layouts tend to work, and are available for the public to use...

http://www.xs4all.nl/~apple77/columns/

ast3r3x
2004-07-23, 09:13
My site will not be working for a while, so don't go look and judge it. I'll revive this thread in a day or two after I things working again :)

ast3r3x
2004-07-24, 12:03
Ok...html validator told me I had should do the doctype. Well when I do that, it wonderfully places a line along some rows in my tables that no amount of CSS height can undo!

So why, and how do I fix this?

Ex. http://mobocracy.no-ip.com/intouch/test.php

Stroszek
2004-07-24, 13:07
Ex. http://mobocracy.no-ip/intouch/test.php

I tried to take a look at it, but the domain couldn't be found...

Brad
2004-07-24, 13:36
First, you forgot to add <html> at the start of your document.

Second, you're leaving a <tr> out near the bottom.

</tr>
<td>
here is text<br />
stuff

</td>
</tr>needs a <tr> before that <td>.

Aside from that, I'm too lazy to find anything else ATM. ;)

ast3r3x
2004-07-24, 13:46
Is there a limit to the number of times you can curse at yourself for doing a half assed job? Soon to find out ;)

The <html> did it, guess I made that page a bit too fast ;)

As for the messed up table...that somehow didn't effect it. But in my defense I linked the wrong file, and never even checked.

Beats the other weak when I spend like 10 min trying to get something to change, when I realized I was working on the wrong file :no:

Stroszek
2004-07-24, 14:02
the doctype has to go before the <html>

Your code at the beginning should be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

ast3r3x
2004-07-24, 14:45
Well...maybe they should have this in the tutorials at w3schools.com if they want it to be used! Hell I haven't seen an example with this used.

Thanks though.

HTML validator says HTML goes first...but when I do, that space long my rows appears. So I guess I'm going to have to break that to get it to work. As far as the html line you gave me...that makes the validator give me errors, so I think I'll stick with <html>.

So how about F*** the validator unless one of you can tell me why it does what it does and how to fix it :D

Stroszek
2004-07-24, 14:52
It's cool. Everyone has to start learning somewhere.

I took a look at your CSS file.

Out of curiousity, what is the point of all of the different .body-color rules? If you're trying to do what I think you are, there are better ways to do it. I'm not going to bother writing it all out until I hear what you're trying to do, both because I'm lazy, and because I don't want to confuse you.

ast3r3x
2004-07-24, 16:20
After everything I've been changing around, some of this stuff I'm not using anymore.

Any input you'd be willing to give would be appreciated, as before I started this project, I only knew basic html really;) I also did my fair share of bugging silientlechos and the genius bar asking for help! Not on this project alone though.

http://mobocracy.no-ip.com/intouch/style.css

Stroszek
2004-07-24, 17:16
...before I started this project, I only knew basic html really...[/url]

I'm that case, you're doing pretty well!

These are my thoughts on your CSS. They are based on where I think that you are going with it, based on what is in there already. If I guessed your intentions incorrectly, disregard this comment...

1) You'll be better off in the future if you alter the naming scheme for your CSS styles. Instead of things like class="link-blue", which from what I can tell, is what the navigation table is called, why not something like class="nav" What's the difference? Well, in a few years, or months, or whatever, when you get tired of the old design, and you go to redesign it, if that table has a class of "nav" you can just redefine the "nav" class and you won't have to edit your XHTML files. Of course you could also just edit the "link-blue" class, but if your navigation area ends up being orange on the next design, that would be pretty silly. If that doesn't make sense, let me know, and I'll try to re-explain it. But in general, a good rule is to name classes and ids for the function of the area, not what it looks like.

2) .link-nounderline
{
text-decoration: none;
color: black;
}

From what I see, all of the links with this class are inside of the table class="link-blue". So what you should do is this:
.link-blue a {
text-decoration: none;
color: black;
}

This will apply the text-decoration and color to all of the a elements (links) inside of anything with a class of link-blue. Using this, you can remove the class="link-nounderlink" from all of the links in that table and save a bit of bandwidth.

Of course, of your intention was to just have no underlines on any link in the site, you can always do this:
a {
text-decoration: none;
color: black;
}
This will apply the styles to any a element in the page.

Let me know if any of this doesn't make sense, and I'll try to re explain it.
Oh, and feel free to "bug" me too if you need help, my email address is in my profile...

ast3r3x
2004-07-24, 17:34
As I broke my site into pieces trying to make it compliant :lol: you could not look around or register. (although only people from my graduating class are supposed to register ;))

...but, if you would have, you'd have seen this (http://24.229.74.113:2222/intouch/register.php) page. The reason I have xxx-blue is because I allow the users to pick their pagestyle, in a php variable, I cleverly called $pagestyle ;)

I then, out put classes like this

class="login-<?php echo $pagestyle ?>"

If you know of a more efficient way, please tell me! If it weren't for the find and replace feature, it'd be hell!

I needs all of those, because I have a slight shadow that blends into the blue, or orange, or green. Because PC's (who will mostly be viewing the site) can't use transparency in png's, and gif's can't support transparency past all or nothing, I have been given no choice.

I was hoping, I would be leaving myself open to upgradability by making the classes dynamic, so that whatever your "$pagestyle" is, as long as there are corresponding classes, you're golden.

If you are bored, IM me under ast3r3x. I'd ask you, but I don't think you'll tell ;)

Stroszek
2004-07-24, 22:20
Well, what I would do is to have seperate CSS files, orange.css, blue.css, green.css, etc. That way, the user doesn't have to download the styles for all of the colors even if they aren't going to use them. It saves bandwith and therefore $$ too.

Check out this article:
A List Apart: Working With Alternate Style Sheets (http://www.alistapart.com/articles/alternate/)

ast3r3x
2004-07-24, 22:38
I'm reading that right now. I guess that would be easier to do one variable as the style sheet then 50 later.