I searched for CSS stuff I could understand and the thing that captured me was mobruls Track 42.
This first CSS page is a rewrite but it is original in part and I learned enough to write original pages with graphics. Graphics determe layout. I hope mobrul does not mind.. it is a study page primarily. Any tips or corrections greatly appreciated.
err skyetyger .. how do you make that site without even a single table tag .. CSS eh ... mind to give me a link that has a guide to make a site like yours ??
I had my site posted here .. gonna make some changes to them and thought i could use the coding style you use .. anyway can pictures be included ??? with the codes you are using ??
the two sites, the gish site allwyn mentioned and the html goodies are what I used and a copy of a page someone wrote as a guide to how it actually works..
Reposted it..it is just a study of structure, I am studying span and layers now and memorizing commands...this page is square one I think.. thanks Emp for your post...
I am a little annoyed at the way the middle section 'disappears' when the window is approx. 500px wide...not sure how I would fix it. I know you said this was a study page, and I have every faith in the world you will answer that problem with an apt solution.
As for studying the Track 42 css...go for it. That is why we're all here. To learn, share, study.
Though thanking me is nice, it is unnecessary, and I really don't deserve it. There are many people here who are far more talented in these endeavers than I. Track 42 is a simple minded toy to some of the folks around here.
Keep your eyes and ears open...and keep learnin'. It seems as if you're off to a good start.
The middle disappears because the span is messed up and I am using h1 incorrectly where it doesn't belong.. and ... but there are so many ways to fix that.. I am lost in TOO much stuff...lol.. learning a lot by fixing...just have to decide..span..zindex..( mutters to self as wades through piles of tutorials)
Thanks mobrul.. 'preciate it' and credit is due as the page is a study. Track 42 saved me hours of bewilderment and frustration..
FIXED The page degrades perfectly I think but the top logo was not what I intended.. I still need span
to finish my original idea but the page should be letter perfect for now
no matter what we think of our own stuff, someone somewhere likes it, huh?
track42 gave me pointers to the structure of CSS, as sky said. it's a good prep
for taking on the likes of Doc and twitch^ and very handy.
edit: btw sky, looking over you stylesheet, i caution you to use more descriptive names for your IDs. "C1" is less descriptive than "header1" and I think you will get confused if you continue to use alpha-numeric strings. imho that is...it'll keep you from jumping back and forth between the html and css to see what's happening.
I'll be posting a revision of my site soon. Completely different...
[This message has been edited by Allewyn (edited 12-29-2001).]
From: there...no..there..... Insane since: May 2001
posted 12-31-2001 02:07
Hi Skyetyger!!! I think that it is great that you are doing an all CSS site! Anyway...
I understand that this is a study but I am not sure you know about this stuff or not. I am using IE6 Win98 and 1280x1024 res.
There seems to be some alignment problems with the center stuff not really being in the center and the top right box thingy is a little off. It is a little to the left of the box below it.
<off topic>
I was reading the part on your page that said....
quote:it seems a waste of time to devote much time writing code that is still indecipherable, in whole or part, by all except the newest browsers. CSS is the future, however and fun to write so it is well worth the effort to learn
I think that this is something that we just have to come to terms with. It is better for the web designer but what about the people that still use IE3 and 4?? You know what I say? Screw 'em! Upgrade your stinking browser, it's FREE for crying out loud!
</off topic>
OK, keep up the good work. I think that once you get some more color in there and maybe some graphics, the page will look real good. As soon as I get done with a couple of projects, I am going to post my site which is all CSS as well.
By the way what the hell is Track 42??
Later,
C:\
[This message has been edited by CPrompt (edited 12-31-2001).]
Track 42 is mobrul's page and I am not sure about posting the link.. but a hint..look under allewyns new css page further down the list.. mobrul posted it there.. I hope mobrul doesn't mind .. It is not "obvious" what it is about.. but it is a gem.. I am working on the alignment problems.. I had them fixed once but I change something and then.. this structural form is as fragile as a snowdrop..
From: there...no..there..... Insane since: May 2001
posted 12-31-2001 14:08
Thanks Skyetyger. I actually have seen it before from that link. I just didn't realize what the name of it was. hehe
Good luck on your page(s). CSS can be a headache but I think that the results will be well worth it. Plus after you get the hang of it it is a little more simpler than using a bunch of nested tables. At least it is a little less confusing.
skytyger: It looks like things are coming along well there. I'm currently only able to view it in Op5 and NS6.1 (rolls eyes) but I'm pretty sure it is doing what you want. I would support Allewyn's suggestion to make the styl names more descriptive as you will find this a great help in the future.
One point - in NS6.1 the far right and left columns' elements' borders are touching and this is due to a lack of margins. Try margin-top: 3px; for element A4 (and the corresponding one on the other side - D4?).
There also seem to be an awful lot of DIVs and styles associated with the 'SKYETYGER CSS FIRST PAGE' text and I get the suspicion that it isn't working as it should in browsers other than IE5 (but I'll have to check). I would imagine this could be simplified and it would work just as well (if not better).
Just a quick note addressing the positioning concerns...
...this is the hardest part of CSS tp me. two objects can align perfectly, then ya throw in one more and expect it to as well, and...blam! shit all over the place Keeps it interesting.
one thing i've noticed from examining Guru CSS is the preponderance of "position:absolute". Seems that they prefer that property over "float". course they know how to keep it where they want it, and that's the challenge for the rest of us.
reading top left to right...A is 100% so ( B C D ) align below it
those are basic boxes..
NOW.. here are the divisions:
A has 4 divtisions...A1, A2, A3, A4
A3 has 32(divisions) boxes... A3a A3b
B has 0 divisions
C has two C1, C2 divisions
C1 has 3 divisions - a, b c, (divs)
C2 has 0 divisions.
( OR C is the center box with two boxes.. the upper box in C has 3 divisions)
D has 0 divisions
1) there is a &-nbsp problem in nested divs, the problem is the same as the  .. if I have nested boxes A1, A2, A4 without A3.. and I write in the Space between A2 and A4, then I am writing on A.. this is the- no breaking space problem.-
2) nested divisions .. to write center- center - center-left is not as descriptive. as C2bi.. there are 16 nested boxes or divisions .What is a better way?
3) Emp, I am trying the margin code. The page is made to separate as the browser window is narrowed.. I can fix it for IE but Navigator overlays the top box A over the 3 boxes BCD.. Your fix is the right one I think..just have to write it in and test..
On the div descriptions, you might try left1, left2, left3, (for divs aligning on the left side) center1, center2, center3, (for divs aligning in the center) etc just so you can remember which one you are looking at on the sheet. Nothing fancy, not even required.
See, even your above description is confusing cause I can't relate it internally to the sheet. You understand it, and it look good on the page, just harder for us to analyze
It's been a while since I was last here, but what a great thread to come back too.
Kudos to you Skyetyger for writing a pure css site, it certainly isn't easy as I found out when writing my own site in pure css. More than once, I seriously considered calling it a day and writing the whole thing in tables, but that kinda defeats the object, and so I stuck to it and am glad I did.
We had a recent discussion over at Gurus last week about my use of the <p> tag (or rather lack of it). The web is a platform for experimentation and if that means bucking convention, then go ahead and turn it upside down, it's what makes for an interesting life. In certain instances (when manipulating graphics), the use of the <p> will kill the result you're trying to achieve. This can either leave you changing your layout/design, or looking for alternatives - css offers those alternatives.
Keep at it my friend, it's worth the headaches.
quote:Allewyn
Just a quick note addressing the positioning concerns...
...this is the hardest part of CSS tp me. two objects can align perfectly, then ya throw in one more and expect it to as well, and...blam! shit all over the place Keeps it interesting.
I've been experimenting with image alignment over the last few weeks, maybe these links will help....
Btw, everything on each page is inside a single box.
Whilst you're there, click on either image for Truckers Tales and when the new page loads, click on my ugly mug just below Scandinavia, this will take you to 6 pages. The first page is pretty straightforward, page 2 & 3 will give you a <rowspan> effect on the right, page 4 is fairly straightforward but looks pretty neat, and finally 5&6 are a couple of large images which have been cut up in Photoshop with the first on page 5 put back together as a nested div, with page 6 showing the images stacked back into one.
Let me know if this is the sort of thing you're after.
scansped.. I like that design concept of graphics interspersed with text.. nice job
EMP your margin fix worked!!!! I had some percentages incorrect BUT it needed a margin between the A and D.. it works correctly in Nav and IE now..Hurray and Thanks
skyetyger: All the browsers render the basic HTML elements differently (with different padding and margins) and one of the important things about Opera is that if you have two elements stacked one on top of the other Opera will not add any extra space between them (I assume it is the same for horizontal space but it is the vertical which is most obvious) even if you throw in an empty set of <P>. The use of margin is critical to overriding the browser's interpretations in this case and will give you a more 'standard' layout.
I agree with Allewyn that you should try and make the names more descriptive but sometimes if you are using vast numbers of DIVs (as in you latest design over at the GN) that just may not be practical.
And your page does break rather nastily in NS4.x (mobrul's doesn't/didn't so you may want to have a look through the code).
Phil/Scansped: Nice to see you back and bearing such interesting gifts!!
Allewyn: There are numerous ways to do CSS-only layouts and one of them is using absolute and relative positioning. It depends on what you are trying to do. I tend to feel that float is the way forward esp. in fluid designs so that is the direction I tend to recommend.
posted 12-24-2001 07:33
