Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Am I closer to being on the right track here?

Reply
Thread Tools

Am I closer to being on the right track here?

 
 
DaKitty
Guest
Posts: n/a
 
      11-22-2004
With css and some other details?
http://www.socalolympians.org/about_us-c.asp

Should I make a new class for the text inside the white?

Is it possible to make centered, so that it moves as the page width gets
resized?... You know, like a table with so many pixels?


 
Reply With Quote
 
 
 
 
DaKitty
Guest
Posts: n/a
 
      11-22-2004

"DaKitty" <(E-Mail Removed)> wrote in message
newsDcod.340077$a85.54357@fed1read04...
> With css and some other details?
> http://www.socalolympians.org/about_us-c.asp
>
> Should I make a new class for the text inside the white?
>
> Is it possible to make centered, so that it moves as the page width gets
> resized?... You know, like a table with so many pixels?


Okay, I'm thinking out loud here... I spent couple of hours reading about
css on WW3
And trying to redo that page in CSS only...

I noticed that when I define a style, especially a box, dreamweaver shows it
as a layer!

Then I created a layer... and I see a DIV tag, but after a div tag in the
code is the inline style definition...
like this:
<div id="Layer1" style="position:absolute; left:265px; top:135px;
width:503px; height:446px; z-index:3"></div>
Now I can take the pixel readouts from graphic positioning, and use them in
a new CSS style.
Still don't know how to center justify it so it floats as you resize the
browser....

And they both look right, in IE6 and in Firefox!

Maybe it's silly, but I'm getting kinda excited about this!


 
Reply With Quote
 
 
 
 
Nik Coughin
Guest
Posts: n/a
 
      11-22-2004
DaKitty wrote:
<snip enthusiastic comments about CSS>
>
> Maybe it's silly, but I'm getting kinda excited about this!
>


It's good isn't it?

Centering... in general...

If the element that you want to center is an inline element, like a span,
you can center it by giving its parent the following style:

text-align: center;

If the element that you want to center is a block element, like a div, you
can center it with this:

margin: auto;


 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      11-22-2004
DaKitty wrote:

> http://www.socalolympians.org/about_us-c.asp


<grin>
You are still stuck in that dreamweaver fireworks rut.
</grin>

These products *assume* you have exactly 800 by 600 (or whatever) to play
with. They *assume* you want a fixed layout, not a fluid one. Indeed they
almost force you to have a fixed layout, when used the way you have.

The images you are using and the names of them belie this. Your logo is made
up of two images, l2_r01_c2.gif and l2_r01_c4.gif. You also have lots of
others images, the pretty fade in the content box and loads of "shim" gifs.
These are the direct result of using fireworks to cut up an image that was
probably produced using fireworks "paint" utilities. That is, you paint onto
the firefox canvas, fixed size. You then cut up the image, ship it down to
the viewer and re-assemble it in a table. Fixed size. No chance of making it
liquid.

The web does not work like that. Or, rather, it *should* not

Stand back and look at what you have: A nice logo image up the top, a left
hand navigation bar and a content box.

Lets rebuild the page...

That logo and the way you have arranged the other stuff around. Hmmm. Place
the logo in the background.

Now, the navigation. An ordered list floated left. Text links. If you want
to dress them up then use some CSS to change the background of the <a>
element to make them "look" like images. I had to wrap the list inside a div
so I could position it down a little bit. Probably not the best thing to do
but it's quick and dirty and it works.

This navigation bar is *not* fixed width. Its width is determined by the
font size the viewer has chosen. (note I do not mention font size anywhere
in the CSS).

The content. Another div That nice fading stuff? A background for this div.
The background image is a whopping 1600x1000 pixels but gif compress nicely.
It's only 8K. You could probably make it smaller by changing it to a jpeg or
something.

That's it. No messy javascript. No confusing tables. Just two main elements
and a bit of css to style them.

http://users.bigpond.net.au/rf/sco/about.html

While looking at this be sure to change your font size all the way from
smallest to largest and pick up a corner of your browser window and drag it
around to see what happens with different viewport sizes.

This is what I was looking toward yesterday when I suggested re-creating the
page

We can play a little more afterwards and perhaps put those nice stars back
in the background.

--
Cheers
Richard.


 
Reply With Quote
 
DaKitty
Guest
Posts: n/a
 
      11-22-2004

"Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote in message
newsseod.8752$(E-Mail Removed)...
> DaKitty wrote:
> <snip enthusiastic comments about CSS>
> >
> > Maybe it's silly, but I'm getting kinda excited about this!
> >

>
> It's good isn't it?
>
> Centering... in general...
>
> If the element that you want to center is an inline element, like a span,
> you can center it by giving its parent the following style:
>
> text-align: center;
>
> If the element that you want to center is a block element, like a div, you
> can center it with this:
>
> margin: auto;
>


Yea, I think I like it much better than tables.
I used layers before for layouts, and liked them much better than tables. I
never knew that they're so closely related to CSS.
By default dreamweaver doesn't even give them a layer tag, it gives them a
DIV tag and names it a 'layer'... and you can change it to span or a layer
or

well, here's what I don't like all that much... perhaps you know a way out
of it...
on the page.. http://www.socalolympians.org/about_us-c.asp
my shot at redoing it in CSS...
Right now the position of the whole thing is absolute... some 100 pixels off
the left side of the page...
Well, that's okay for people with resolutions over 800 or 900 (horizontal)
(I forget what it adds up to all the way across)
But if you resize the browser, the content/layers/ CSS blocks don't move
with the resize...
I started looking at how to do it, couldn't figure it out right away, so I
went with absolute positioning, just to go on and try few other things in
CSS and not get hung up on that detail.

here's my CSS definitions: http://www.socalolympians.org/sco.css
For example, BOX1
I'm not sure what to change, which value, for BOX1 so that it moves as the
browser is resized.
I don't want the box to stretch left and right, just to move left and right
so it stays in the middle of the page.

I guess then the next question would be, how do I make the box2 (blue bar
with the navbar in it) move with it, and staying to the left of it...
Can the styles be inside one another, nested... so my box2 position is
relative to the top left corner of box1 ?
(I hope that makes sense)

Do I make up a span and then nest the paragraphs inside of it? Would then a
paragraph CSS defined position (if relative) be relative to the parent span?
Then if a span moves, the paragraphs nested inside of it would move too?

What is the difference between Margins and Padding? I'm still little unclear
on that one.
I know the difference between cell spacing and cell padding in tables...
Does this relate in any way?





 
Reply With Quote
 
DaKitty
Guest
Posts: n/a
 
      11-22-2004

"rf" <rf@.invalid> wrote in message
news:nWeod.44535$(E-Mail Removed)...
> DaKitty wrote:
>
> > http://www.socalolympians.org/about_us-c.asp

>
> <grin>
> You are still stuck in that dreamweaver fireworks rut.
> </grin>
>
> These products *assume* you have exactly 800 by 600 (or whatever) to play
> with. They *assume* you want a fixed layout, not a fluid one. Indeed they
> almost force you to have a fixed layout, when used the way you have.


Actually, it's not them... it's me setting the box locations to absolute,
because I couldn't figure out how to make a relative.

> The images you are using and the names of them belie this. Your logo is

made
> up of two images, l2_r01_c2.gif and l2_r01_c4.gif. You also have lots of
> others images, the pretty fade in the content box and loads of "shim"

gifs.
> These are the direct result of using fireworks to cut up an image that was
> probably produced using fireworks "paint" utilities. That is, you paint

onto
> the firefox canvas, fixed size. You then cut up the image, ship it down to
> the viewer and re-assemble it in a table. Fixed size. No chance of making

it
> liquid.


yea, I know fireworks does that...
I used the images that it sliced for this exercise, instead of taking time
to make new ones.
Just for this exercise purposes, I was more interested in figuring out CSS
than taking the time to reassemble the images.
Once I get a hang of how CSS works and comestogether, then I can sit back
and figure out how to re-slice the images so they're little more logical.

> The web does not work like that. Or, rather, it *should* not
>
> Stand back and look at what you have: A nice logo image up the top, a left
> hand navigation bar and a content box.
>
> Lets rebuild the page...


I just redid the whole thing in CSS. Not a single shim or a table in there!
Hey, you didn't even take a peak at the code of my new page (revision C) !!!
*sniffle* *sniffle* *sniffle*
It looks very similar to yours!
http://www.socalolympians.org/about_us-c.asp

I's hoping you'd be proud of me!!!
I did it all in my own, honest... I read about CSS stuff last nioght, and
played with it today.
Jusat couldn't figure out how to make it resizeable.


> That logo and the way you have arranged the other stuff around. Hmmm.

Place
> the logo in the background.
>
> Now, the navigation. An ordered list floated left. Text links.


The client on this project gave a firm NO to plain text links, so I'm not
going to fight and argue with them.
I showed them examples of text only, they still said no.
You should see the sites that they gave me as examples of what they like...
lot of examples of what not to do. I had a hard enough time getting them to
go for this toned down version. Initially I suggested something clean and
more 'dignified' but nooo, they loved this!!!
They wanted to music too! [eyeroll] I got out of that by telling them that
i don't have any royalty free or non-copyright infringement sound bytes.
They wanted a flash intro as well... You can have a peak in
alt.design.graphics to see how I slyly got out of doing that...
I mean I love tinkering in flash, but not so much as a torture device for
unsuspecting people looking at websites. It' like watching a same bad
commercial over and over and over again... Isn't that a bit of a cruel and
unusual punishment?
The navbar stays though... Can't win them all, I guess.
I did talk them out of using the 'cute miniature medal images' as navigation
buttons.

>If you want
> to dress them up then use some CSS to change the background of the <a>
> element to make them "look" like images. I had to wrap the list inside a

div
> so I could position it down a little bit. Probably not the best thing to

do
> but it's quick and dirty and it works.
>
> This navigation bar is *not* fixed width. Its width is determined by the
> font size the viewer has chosen. (note I do not mention font size anywhere
> in the CSS).
>
> The content. Another div That nice fading stuff? A background for this

div.
> The background image is a whopping 1600x1000 pixels but gif compress

nicely.
> It's only 8K. You could probably make it smaller by changing it to a jpeg

or
> something.


My background image is a 8KB 251x224 pixels jpg named STAR2.gif, always has
been. http://www.socalolympians.org/Images/STAR2.gif
Not one of the firefox slices.
100% jpg is bigger than the gif... 14K
http://www.socalolympians.org/Images/STAR2a.jpg
90% jpg is around 8K, but a lot worse looking.
http://www.socalolympians.org/Images/STAR2b.jpg
80% jpg is only 2K, bit so fuzzy it's unacceptable
http://www.socalolympians.org/Images/STAR2c.jpg

I know... it's a trick, my very strong side is graphics... sorry I didn't
mention that.
After trying out the few versions of the image, I decided to go with the
gif. I was actually surprised that in this case gif gave me best
size/quality. I fully expected it to be a jpg - it usually is. I could
probably cut the color pallete on the gif some more, and push down the
size... using only 2 or 5 color gave me some unexpected results. I've
ditched those since. The original star was made in photoshop.

> That's it. No messy javascript. No confusing tables. Just two main

elements
> and a bit of css to style them.
>
> http://users.bigpond.net.au/rf/sco/about.html
>
> While looking at this be sure to change your font size all the way from
> smallest to largest and pick up a corner of your browser window and drag

it
> around to see what happens with different viewport sizes.
>
> This is what I was looking toward yesterday when I suggested re-creating

the
> page
>
> We can play a little more afterwards and perhaps put those nice stars back
> in the background.


Thanks a bunch for that sample... I copied over the css you made, and need
to take a peak at how you made the boxes resizeable. THat's the part I
couldn't figure out on the first try. I'm running out of time to do that
tonight, and have to be somewhere all day tomorrow I'm dying to figure
it out though!!!
Is it possible for a navbar to still be a SSI, inside a CSS. I don't want to
have 15 different navbars that need to be updated.

Thanks!


 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      11-22-2004
DaKitty wrote

> I just redid the whole thing in CSS. Not a single shim or a table in

there!
> Hey, you didn't even take a peak at the code of my new page (revision C)

!!!
> *sniffle* *sniffle* *sniffle*
> It looks very similar to yours!
> http://www.socalolympians.org/about_us-c.asp


I have not seen that one yet.

<looks/>

Yep. Looks good. Now get rid of all the dreamweaver javascript . That can
be done with CSS quite easily and a lot more effectively.

> Thanks a bunch for that sample... I copied over the css you made, and need
> to take a peak at how you made the boxes resizeable.


The boxes *are* resizable. You have to do something, like specify their
width, to make them *not* resizable.

> Is it possible for a navbar to still be a SSI, inside a CSS. I don't want

to
> have 15 different navbars that need to be updated.


Yes, Totally feasable. However you would be better off using PHP or
something and tailoring the menu to each page. For instance at the moment
each page has a link to itself. This is sometimes confusing.

--
Cheers
Richard.


 
Reply With Quote
 
DaKitty
Guest
Posts: n/a
 
      11-22-2004

"rf" <rf@.invalid> wrote in message
newsrgod.44605$(E-Mail Removed)...
> DaKitty wrote
>
> > I just redid the whole thing in CSS. Not a single shim or a table in

> there!
> > Hey, you didn't even take a peak at the code of my new page (revision C)

> !!!
> > *sniffle* *sniffle* *sniffle*
> > It looks very similar to yours!
> > http://www.socalolympians.org/about_us-c.asp

>
> I have not seen that one yet.
>
> <looks/>
>
> Yep. Looks good.


Thanks Still things to tweak... May I say I'm kind of proud of my first
try!

> Now get rid of all the dreamweaver javascript . That can
> be done with CSS quite easily and a lot more effectively.


Yea.. that's the SSI and the navbar. I haven't done anything with that yet.

> > Thanks a bunch for that sample... I copied over the css you made, and

need
> > to take a peak at how you made the boxes resizeable.

>
> The boxes *are* resizable. You have to do something, like specify their
> width, to make them *not* resizable.


I'll have to explore that some more... I'm missing something

> > Is it possible for a navbar to still be a SSI, inside a CSS. I don't

want
> to
> > have 15 different navbars that need to be updated.

>
> Yes, Totally feasable. However you would be better off using PHP or


Need to learn php... that one is next, I think...

> something and tailoring the menu to each page. For instance at the moment
> each page has a link to itself. This is sometimes confusing.


yea... I'm still undecided about how to handle that.
I worked on pages before where I had separate navbar for each page, and I
can tell you one thing, I really really suck when it comes to making sure
all pages are updated correctly. I always get in a hurry and forget
something on one or two pages.
Another website I maintain at the moment is some 50 odd pages... Someone put
it together before me, and did it in frames... I;m gearing up to revamp this
one, and having individual navigation for each would be a bookkeeping
nightmare, especially since there are relatively frequent changes.



 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      11-22-2004
DaKitty wrote:
> "rf" <rf@.invalid> wrote in message


> Thanks Still things to tweak... May I say I'm kind of proud of my

first
> try!


As you should be. <grin> except for the DW stuff </grin>

> Need to learn php... that one is next, I think...


Hmmm. Quick question. You don't know PHP yet your pages end in .asp?

> > something and tailoring the menu to each page. For instance at the

moment
> > each page has a link to itself. This is sometimes confusing.

>
> yea... I'm still undecided about how to handle that.
> I worked on pages before where I had separate navbar for each page, and I
> can tell you one thing, I really really suck when it comes to making sure
> all pages are updated correctly. I always get in a hurry and forget
> something on one or two pages.


Hang around for a day. I am currently rebuilding a PHP navbar include to do
exactly what you want. When I finish it I will publish the relevant PHP
code.

> Another website I maintain at the moment is some 50 odd pages... Someone

put
> it together before me, and did it in frames...


Oh my

> I;m gearing up to revamp this


No frames?

> one, and having individual navigation for each would be a bookkeeping
> nightmare, especially since there are relatively frequent changes.


See above

--
Cheers
Richard.


 
Reply With Quote
 
Nik Coughin
Guest
Posts: n/a
 
      11-22-2004
DaKitty wrote:
>
> My background image is a 8KB 251x224 pixels jpg named STAR2.gif,
> always has been. http://www.socalolympians.org/Images/STAR2.gif
> Not one of the firefox slices.
> 100% jpg is bigger than the gif... 14K
> http://www.socalolympians.org/Images/STAR2a.jpg
> 90% jpg is around 8K, but a lot worse looking.
> http://www.socalolympians.org/Images/STAR2b.jpg
> 80% jpg is only 2K, bit so fuzzy it's unacceptable
> http://www.socalolympians.org/Images/STAR2c.jpg
>


3k
http://www.nrkn.com/temp/star2.png



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
insert track reference in mp3 track D@Z Computer Support 1 05-02-2008 03:32 PM
Question on being on the right track for MCSA GlennS MCSA 17 02-22-2008 07:04 AM
Old certification track vs new certification track. Barkley Hughes MCAD 5 11-12-2006 02:41 PM
closer...closer....RAM-based system steve NZ Computing 7 09-15-2006 05:10 AM
getting closer on the timer fnord Perl 1 09-12-2003 03:20 AM



Advertisments