Runboard.com
Слава Україні!



🙂       Use the black navigation bar to log in or create your account.

Jump to Page:  1  2  3  4  5  6  7 

 
Forestelves Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2006
Posts: 52
Karma: 3 (+3/-0)
ReplyQuote
Re: Code Formatting


You brilliant, trollish wench, you! I bet I spent 6 hours or more on that single, foolish bit and couldn't budge that div. I inserted that wee snippet of yours and my parent div & it's children & grandchildren, all but one (#extraDiv1), moved as they should. And once I got rid of the margins as you suggested, everything registered perfectly in the parent div. Now the trick is, how do I get that errant #extraDiv1 into the #container so that it behaves as it should? It's not written in the HTML exactly as the rest of the divs are.

Since I've been done with work today, I've been making more Photoshop brushes for some of the graphics Will and I want to use in the footer and in that area where that strange architectural element is; whether it remains is still a matter for debate. This is way more fun than I ought to be having at my age. Will taught me how to make brushes just the other day having just learned himself. The ginkgo leaves are from my brushes. Photoshop is a magician's tool, too.

One quick question for now; Why a z-index of 100 and not of, say, 2; just in case I start layering a lot of images on that weird architectural thing?

PS - I thought I sent this a couple of hours ago but I just found it in an open browser window. It's like me to be scatter brained sometimes. I keep trying to multi-task but I keep dropping the ball. emoticon

---
All mimsy were the borogoves, and the mome raths outgrabe. ~Lewis Carroll
5/30/2007, 3:34 am Link to this post PM Forestelves
 
Forestelves Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2006
Posts: 52
Karma: 3 (+3/-0)
ReplyQuote
Re: Code Formatting


Thanks for the compliment! That java tool is a handy little thing. I'll be using that again and again; thank you for that. I applied your recommended changes and as you already mentioned, that beam would be better in #supportingText; I don't know how to do that. The changes I did make included adding that bit of code and changing two incidents of absolute to relative positioning.

However, in those two cases, the divs have now dropped considerably and #linkList, way off to the right. Is the #linkList better suited for the #supportingText div, too? It looks like it's top is measured from the bottom of #footer. Neither of them appear to be contained in a div. I'll figure out how to do that tomorrow. Thanks for all the homework!

Dave emoticon

---
All mimsy were the borogoves, and the mome raths outgrabe. ~Lewis Carroll
5/30/2007, 4:34 am Link to this post PM Forestelves
 
Forestelves Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2006
Posts: 52
Karma: 3 (+3/-0)
ReplyQuote
Re: Code Formatting


After trying many configurations of positioning (absolute, relative), with and without positioning, and after searching the web to try to figure out how nested divs are written when a specific container is desired, I haven't gotten very far or learned much, either. I've only succeeded in moving #linkList back in the range of the main screen (it had been way off to the right, requiring one to scroll way over to find it).

Speaking of which, #linkList appears to be nicely moved to the correct left now (not sure how) but it also appears to be in the same parent as #footer; it would like to attach there. I feel like this ought to be simple but I can't figure out how to get these (grandchildren) divs to move into the (parent) divs in which they need to be.

A curiosity, though; since we added the floats and clears, the footer has attached itself to div directly above it in FF, not so bad except that in IE, the original 12px margin exists between them; I prefer browser consistency and prefer the margin in this case, I think. I haven't decided if I'm going to use #footer to contain the image at the bottom of the page or if I'm going to use a second of the extra divs from the bottom of the markup.

How did you know I used FF? I do check IE, Opera, NS

Edit: I just noticed that in IE, #linkList is stretching #container to the size it is in IE; it should. In FF, it doesn't stretch the size of container; I wonder why not. That would matter if I positioned something in #container that I expected to move with individual browser font size prefs and didn't.

Last revised by Forestelves, 5/31/2007, 12:31 am


---
All mimsy were the borogoves, and the mome raths outgrabe. ~Lewis Carroll
5/31/2007, 12:00 am Link to this post PM Forestelves
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Code Formatting


Hi Dave,


You brilliant, trollish wench, you!

Hehe, thanks! emoticon

I didn't notice yesterday that supportingText surrounds the explanation through to the footer, so supportingText also needs floated to the left.

I also didn't notice yesterday that both the quickSummary and preamble are in the intro div along with the pageHeader. This makes it trickier because the pageHeader stretches out the intro div, leaving no room on the right of it to float the linkList. I tried to account for this by relatively positioning and floating the intro div, using absolute positioning on the pageHeader, and putting a top margin on the pageHeader and linkList. Unfortunately, this had mixed results. If their pageHeader was in its own div, and the content sections in their own div, then this layout wouldn't be a problem.

Unfortunately, I've had mixed results trying different things, and I haven't been able to get linkList where it's supposed to be in Firefox. This is actually pretty ironic, because IE is the browser that everyone has to always write the hacks for, lol.

Anyway, when I put the following code after your CSS, everything worked ok in IE.

#container { background: url(http://www.forestelves.com/Zen_Garden/beam.gif) right repeat-y; }

#supportingText { float: left; clear:left; }
#pageHeader { position:absolute; top:0; left:0; background:#fff; }
#intro { float: left; }
#linkList { border-width: 1px 5px; }
#extraDiv1 { display:none; }
#quickSummary, #linkList { margin-top: 275px; }


I'm a bit tired, so maybe I'm overlooking something obvious? Or maybe we should go back to absolutely positioning the linkList, because that's the only thing I tried that worked for both with the code I just posted. emoticon

Notice that my code also makes the beam appear above the linkList. You could try camouflaging that by putting your light green background in that div, and then styling linkList2 with the borders and darker green background.

My brain is too drained to come up with anything else at the moment, but maybe this will give you some ideas. emoticon

I like what you did with the brushes. emoticon TheGIMP (what I use) also has a way to make brushes, but I haven't played around with that function much. Maybe I'll do that after finishing the 2 sites I have yet to do. emoticon

Why a z-index of 100 instead of 2... Well, I like to space things out in case I ever want to add more layers in the future. If you already have a 1 and a 2 (and everything up to 20, let's say), then you would have to change all of those to accommodate the new one in between 1 and 2. But if one is 100 and the another is 200, then you can simply add one in between using 150, without having to change any of the others. Numbering them in 10s should work fine for this purpose as well, but I've seen a lot of people use 100's and just started doing that without giving it much thought.

Re: PS... Last night people were posting in different forums (1 thread in each of the two forums), so I had both forums open in different windows. emoticon With my dialup, I don't want to have to keep going back to the main page, then clicking on the forum, then on the thread. emoticon


That java tool is a handy little thing. I'll be using that again and again; thank you for that.

You're very welcome! emoticon I agree, it does come in handy, and it's how I caught the two nested divs that I didn't notice last night. Just for future reference though, java and javascript are two completely different programming languages. emoticon

...as you already mentioned, that beam would be better in #supportingText...

I was wrong about that, because I hadn't noticed the exact nesting of the divs before.

However, in those two cases, the divs have now dropped considerably and #linkList, way off to the right. Is the #linkList better suited for the #supportingText div, too? It looks like it's top is measured from the bottom of #footer. Neither of them appear to be contained in a div. I'll figure out how to do that tomorrow. Thanks for all the homework!

You're very welcome. emoticon Hopefully my coding changes above will help answer most of this paragraph. Also, with the other divs being floated, I changed my mind about linkList and think absolute positioning for that div would probably work the best. I'm not quite sure what I was thinking last night, but I probably should've tried the code I was suggesting last night before suggesting it.

On that note, I told myself I would go to bed early tonight, so I'd better get going, lol. Have a great night! emoticon

Last revised by Lesigner Girl, 5/31/2007, 1:20 am


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/31/2007, 1:20 am Link to this post PM Lesigner Girl Read Blog
 
Forestelves Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2006
Posts: 52
Karma: 3 (+3/-0)
ReplyQuote
Re: Code Formatting


You've been a great deal of help and I do appreciate it a lot. Thank you.

I'm having a hard time getting anything to work, well, it looks great on a 1280 x 800 monitor with FF. Beyond that, things move in directions I don't want them to. I've gone back to trying to position the right column using the absolute value which is somewhat problematic for IE and less so for other browsers. Straight lines that have to line up with margins that are perfect is tough to match in various browsers & screen resolutions, at least using relative positioning. I've checked over all my code, wrote some new stuff, threw some away, but I can't get anywhere. And I wrote a post late last night that I apparently forgot to post...it's not here.

Those new bits of code kind of threw things haywire. The background in the headers disappeared (it's now integral to the image), #extraDiv1 wasn't visible in FF and something else that's coming to my mind right now.

If I start by assigning a value of absolute to the position of the header, a reasonable place to start, I thought, the contents of the rest of the divs disappear. So, I made a martini and now, I'm looking at things in FF where they look nice and am contemplating the remaining graphic work, trying not to think about the stuff I don't know how to resolve.

Dave emoticon

---
All mimsy were the borogoves, and the mome raths outgrabe. ~Lewis Carroll
5/31/2007, 10:19 pm Link to this post PM Forestelves
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Code Formatting


You're very welcome, Dave. emoticon

I decided to create a style sheet (layout only, plus a column graphic on the right) from scratch. Looking at a printout with the stylesheet disabled and all the divs with ids outlined and labeled, I was able to put it together in little more than the time it took to type it. *kicks self* I guess I should've tried that from the beginning. emoticon

body { margin: 0; font: 12px verdana,arial,sans-serif; }

#container {
position:relative;
margin: 1em auto;
width: 700px;
background: #bea480 url(http://img375.imageshack.us/img375/4649/column9we.jpg) 550px top repeat-y;
}
#intro {
position:relative;
float:left;
width: 450px;
background:green;
}
#pageHeader {
position:absolute;
top:0; left: 0;
width: 700px; height: 150px; background:#eee;
}
#quickSummary {
margin:160px 5px 5px 5px;
background:#eee;
}
#supportingText {
margin-right: 250px;
width: 450px;
background:blue;
padding-bottom:1px; /* makes sure the bottom of container is filled */
}
#footer {
background:#ddd;
}

#preamble, #explanation, #participation,
#benefits, #requirements, #footer {
margin: 5px; background:#ddd;
}
#linkList {
position:absolute;
left: 460px; top: 150px;
background:red;
width: 240px;
}
#linkList2 {
margin-top:10px;
background:#eee;
padding: 1px 5px;
}


Oh, and you don't have to leave the comment in there, although I wrote it that way in case you wanted to leave it in. I just put that in there so you would know why I added the padding to that particular spot. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/31/2007, 11:24 pm Link to this post PM Lesigner Girl Read Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Code Formatting


BTW, it's not the same width as yours, and I didn't move the "download" paragraph, but I didn't want to take away all your fun. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/31/2007, 11:32 pm Link to this post PM Lesigner Girl Read Blog
 
Forestelves Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2006
Posts: 52
Karma: 3 (+3/-0)
ReplyQuote
Re: Code Formatting


Hi Lesa,

My garsh...I hardy know where to start...but thank you again! I got pretty far with the template you wrote. That code is on my server, just add '_b' to the filename immediately before the .css to the other css you've seen for this project. I ran into the same primary issue I was having early with the the other two versions I was working on, that is, the left column moved with the header those 20px between FF and IE but the right column didn't, leaving the columns lined up in one but not the other.

For some reason, I can't find the div that's keeping me from adjusting the width of that right column (looks like 3 divs are there now). Also, I spent part of yesterday rethinking how I was going to handle that area under the right column and while I'm not set on exactly how I'm going to do it, I seem unable with _b.css to keep it from tiling or to position it absolutely; when I try, it disappears. I worked on that code about 6 hours straight last night.

And then, there's this...I'm stuck and would like some help to figure out what to do to get my code to work or, at least, how to approach this so that I can do what I'm trying to but I think the code and it's structure should still be mine. I don't mean this in any way to to backhand you for all your help and I don't want to dissuade it in the future, just maybe to change the nature of it on this project? It felt nice that you're so willing to do so much for me but while I was working on that for all that time last night, I kept wondering how I could turn it in, a little like someone else doing the hard part of my homework for me. I can apply that stylesheet anytime you want to see it with the graphics in place.

What I've got right now in FF when viewed on a 1280 x 800 res. screen is what I want; it just doesn't hold up in other circumstances. Can I get from here (with this code) to completed CSS or is it back to the drawing board? I am working in my mind about a graphical way to resolve that column height difference. The flying column isn't something I can figure yet, though. If you can help me figure out how to keep that thing exactly still in all browsers, we might get this thing licked. Even as it is right now, it shifts 1px horizontally between IE and FF on my monitor.

I hope I don't sound frustrated, I suppose I am a bit but I'm really energized by this. If I'm frustrated, it's because I don't know more and because I can't spend more time on it, not because it won't work yet. Today, being the first of the month, is an accounting day which is a longer work day than most. I don't like accounting; that code is never elegant and can't be made to be.

Dave

Edit: Now, I've got to get some work done but I solved that floating header / static right column issue. I think there might be a way to solve the wandering-child div, too, but I don't know how to do it. Can it be positioned to the bottom of #linkList somehow? If not that, could it be positioned on the footer by it's bottom? I can't figure out how to do either. If I could, I'll just carry that long graphic all the way to the bottom rather than try to spit it between the two images, and make the bottom image almost that much narrower.

Last revised by Forestelves, 6/1/2007, 2:53 pm


---
All mimsy were the borogoves, and the mome raths outgrabe. ~Lewis Carroll
6/1/2007, 12:25 pm Link to this post PM Forestelves
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Code Formatting


Hi Dave,

I just sent you some new code. Sorry, but it was (another) complete re-work and I didn't think I'd be able to explain it without giving you the code anyway. Maybe you could look it over to see if you can figure out how it works, then attempt to recreate it without looking at what I gave you?

Moving the download paragraph was a bit more difficult to move than I anticipated. I couldn't get the z-index layers working for some reason, causing the right sidebar to cover it up, so I had to rethink which sections to put the backgrounds in.

I love your footer graphic, btw! emoticon It's a nice touch, and the theme really works with the name of the place. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
6/2/2007, 1:50 am Link to this post PM Lesigner Girl Read Blog
 
Forestelves Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2006
Posts: 52
Karma: 3 (+3/-0)
ReplyQuote
Re: Code Formatting


Hi Lesa,

I chewed the inside of my lip raw before I put that code up to look at it. Drat. Now, what do I do? And my fix for the wandering-header / position:absolute-right-column was so brilliant, too. emoticon

Here's the thing; I learned the code I wrote for this as or before I wrote it. You use a fair bit of code or code shorthand I don't understand yet. I read it and some it is still only recognizable as the language I'm studying. When I go to w3schools, there isn't anything there that tells me about what you wrote.

The approach you took with this is pretty different from the one I took but yours does work in all the browsers I have installed, on all my monitors. I don't think I can borrow bits of your techniques with what I've written to make it work. I think I'm going to set this aside for a little while and think about something else, then come back to it and start again.

I want to thank you again so much for all your help. I'll study that code and try to make sense of the bits I don't understand yet, but don't worry, I won't use that code or even your approach; I want to find my own way still.

Dave emoticon

---
All mimsy were the borogoves, and the mome raths outgrabe. ~Lewis Carroll
6/2/2007, 6:53 am Link to this post PM Forestelves
 


Add to this discussion

Jump to Page:  1  2  3  4  5  6  7 



You are not logged in (login)
Back To Top

This board's time is GMT.