Could use some positioning help, please.

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

Background

OK...today I created the background for this page in Adobe Illustrator:
http://atnopro.com/test/site1/home.html

Mostly, I was just playing around since it's the first time I used Illustrator, but, oddly...I sorta liked it and I thought I might run with it for my site. (I'm still working out the overall concept but at least it's a start.)

The Problem
The backgound image is a 28 kb .png file (roughly), and loads quick enough...I'm OK with that. (I know the flash file is a little large, but that will go away as soon as I'm done)...it appears OK in every browser I tested, but I'm trying to use absolute positioning in the style sheet to get everything centered and placed where I want it.

I've checked it in MSIE 5, 6 and NS 4.78, 7.1, Opera 5 and everything seems to come up OK (except NS 4.78 which I already know won't parse the background center correctly) , but the bottom copyright....I just can't seem to get centered no matter how I do it. (Taking into consideration I want it the same in all resolutions)

The style sheet is very simple:
Code: [ Select ]
body {
    background-color : White;
    background-image: url(images/bg.png);
    background-repeat: no-repeat;
    background-position: center;
}

.copy {
    position : absolute;
    left : 37%;
    top : 850px;
    font-family : Arial, Helvetica, sans-serif;
    font-size : 12px;
    color : Blue;
}

.construction {
    position : absolute;
    left : 28%;
    top : 150px;
    
}
  1. body {
  2.     background-color : White;
  3.     background-image: url(images/bg.png);
  4.     background-repeat: no-repeat;
  5.     background-position: center;
  6. }
  7. .copy {
  8.     position : absolute;
  9.     left : 37%;
  10.     top : 850px;
  11.     font-family : Arial, Helvetica, sans-serif;
  12.     font-size : 12px;
  13.     color : Blue;
  14. }
  15. .construction {
  16.     position : absolute;
  17.     left : 28%;
  18.     top : 150px;
  19.     
  20. }


As you can see from "view-source" I didn't even use the construction class for positioning and it works out perfectly for the little "under Construction" flashlet. This is critcal for me if I do it this way, because positioning will be essential. I should be able to figure this out...but I'm missing something, somewhere.

My ultimate goal is to position the Copyright stuff (and or future links) into the black box at the bottom of the backgound graphic.

But I can't even get it centered here at any resolution. I'm close...but no cigar.

Any thoughts?
  • tierra
  • Student
  • Student
  • User avatar
  • Posts: 91

Post 3+ Months Ago

try:

text-align: center;
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

well the problem is (I think!):

You didn't use a class for the construction flashlet, rather you div centered it.

Now the bottom info you div centered, but allso have it position 38% to the left.

So change:
Code: [ Select ]
.copy {
  position : absolute;
  left : 37%;
  top : 850px;
  font-family : Arial, Helvetica, sans-serif;
  font-size : 12px;
  color : Blue;
}
  1. .copy {
  2.   position : absolute;
  3.   left : 37%;
  4.   top : 850px;
  5.   font-family : Arial, Helvetica, sans-serif;
  6.   font-size : 12px;
  7.   color : Blue;
  8. }

to
Code: [ Select ]
.copy {
  top : 850px;
  font-family : Arial, Helvetica, sans-serif;
  font-size : 12px;
  color : Blue;
}
  1. .copy {
  2.   top : 850px;
  3.   font-family : Arial, Helvetica, sans-serif;
  4.   font-size : 12px;
  5.   color : Blue;
  6. }

and try again! (probably wont even work but its worth a troubleshot in the dark!)
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

Been there done that. For both b_heyer's and tierra's possible solutions. That's what's frustrating me on this one. I need the style class for the vertical positioning...(that works for the most part.--- but I also need the horizontal positioning to work right) As you can see from view source, I also had to add several lines of line breaks to get the flashlet into position and that was not what I was after. I wanted to do that by style as well...but can't seem to figure out what I did right there, but wrong on the copyright. If I could figure that out I'd get the rest of the page done in two shakes of a lamb's tail.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

have you tried appling the style directly to that tag, without the css?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

Truthfully no. But what's the point?...style is style Doesn't matter if it's external or internal (that's just a matter of priority)...I'll try it though...Thanks.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

its worth a try, then you could eliminate the span tag.

I played with your code, and taking out the span tag centers it, so why not make a div class for it with the information needed? (less the left: part)
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

*lol...I did that once too and put the class in the Div tag

Don't worry about it, though...it was just a question. I'm hitting the sack shortly and will sleep on it. I usually do better with fixing these sorta things after a good nights sleep anyway.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

Hmmm...just reread your post...OK...I'll take a shot at that in the AM
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

ATNO/TW wrote:
*lol...I did that once too and put the class in the Div tag

Don't worry about it, though...it was just a question. I'm hitting the sack shortly and will sleep on it. I usually do better with fixing these sorta things after a good nights sleep anyway.


hehe I do good thinking right before a good nights sleep :-P
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

*lol...that's because I'm older and you're a youngster. I used to be that way too!. You'll get that way too later on, so be prepared...Goodnight.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

Resolved that part of it... Thanks to my helpers last night and some playing around with odds and ends today. Seems that after I used the style inline and added it to tables it worked more-or-less like I wanted it to. The only issues I'm aware of are NS 4.x browsers won't center the background (I don't care about that); Opera 5.2 won't center the copyright (but I'm not too concerned about that browser anyway. I would be curious if it displays OK in a more current version); at all resolutions the text displays in the black box where it should be except for 1280x1024 (where it appears slightly higher. I at least understand that one to a degree); I also can't seem to get the Flash plugin to run in Mozilla's Firebird, but I'm guessing that's because they don't support the embed tag.

Well, now...let's see how much fun I can have creating and positioning a navbar! *lol (In case you haven't figured it out -- this is one of my first experiments for positioning) I probably wouldn't have even tried this if it wasn't for the fact that I sorta liked the background graphic I did in Illustrator yesterday...It's not perfect -- I can see a couple allignment problems with it, and 28k is a little larger than I'd like for a background graphic, but the .png file looks sharp and I can't get it any smaller without messing it up -- but I'll take it for the first thing I ever created with Illustrator! hehe! (No lectures -- I know Illustrator is more for print than web...I was just playing!)

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 49 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.