Greenguy's Board - Does this CSS page work correctly for everyone?

Greenguy's Board (http://www.greenguysboard.com/board/index.php)

- Programming & Scripting (http://www.greenguysboard.com/board/forumdisplay.php?f=15)

- - Does this CSS page work correctly for everyone? (http://www.greenguysboard.com/board/showthread.php?t=58597)

Cleo	2010-08-14 05:48 PM

Does this CSS page work correctly for everyone?

I did a quick redo in mostly CSS of one of my pages of my LL as a test.
http://cleos-porn-links.com/adult-links/test.shtml

I'm going to use this template to redo all my LL pages but before I go any further I want to try to catch any errors.

It should look something like this screen shot for everyone.

http://cleos-porn-links.com/crap/screenshot.png

pc	2010-08-14 06:30 PM

IE8 and FF3 shows that your logo has red border. OPERA, CHROME and SAFARI shows no border.

Cleo	2010-08-14 06:40 PM

Boarder should be gone now.

pc	2010-08-14 06:45 PM

Yes,there's no more border in FF and IE. The rest looks all the same in all browsers on my XP.

Cleo	2010-08-14 07:33 PM

Quote:

Originally Posted by pc (Post 488416)

Yes,there's no more border in FF and IE. The rest looks all the same in all browsers on my XP.

Great. |thumb

I've heard that there is a way to move the code for the page's content to the top of the source code instead having the side menu always at the top of the page's code. I couldn't figure out how to do that or if it is even really possible.

I'm going to be adding a couple more categories to my LL and I'll use this template on these pages first. Maybe by then I'll find a way to do that too.

pc	2010-08-14 08:41 PM

You just need to change a bit build structure. I'm not an expert but change following css properties to:

Code:

.navboxcont_C88C7E5C {

background-color:#FCF7D7;

height:auto;

width:1000px;

float:right;

}



.navboxleft_C88C7E5C {

background-color:#FCF7D7;

float:left;

height:auto;

width:230px;





}



.navboxauto_C88C7E5C {

background-color:white;

height:auto;

margin-right:0px;

padding-left:10px;

text-align:left;

width:770px;

}

and then move your menu container to the bottom of the template but still inside of the " navboxcont_C88C7E5C" div, or something along those lines.

I just played a bit with firebug on your page and got quite good result but needs a bit of cosmetic fixes here and there.

This way your content is on top of the page and menu is on bottom and still you can keep layout unchanged.

Cleo	2010-08-14 09:21 PM

That gives me the same issue I was having earlier when trying to do this.
http://cleos-porn-links.com/adult-links/test2.shtml

The menu ends up under the content.

pc	2010-08-14 10:03 PM

Change this style css on this page to

Code:

then just play with margins and padding

Cleo	2010-08-14 10:11 PM

That does get it closer. At least the menu is showing on the left now.

I'll play around with it a bit more and see what I can get it to do.

thanks :)

pc	2010-08-14 10:26 PM

You know, since your layout goes from left to right, make menu column float:left and content column float:left, then content column margin-left:230px if menu column width is 230px

flowersgone

2010-08-15 06:26 AM

Quote:

Originally Posted by Cleo (Post 488429)

I've heard that there is a way to move the code for the page's content to the top of the source code instead having the side menu always at the top of the page's code. I couldn't figure out how to do that or if it is even really possible.

I had luck with a relatively simple css change that seemed to work in IE8, FF3, Safari and Chrome and allowed me to move the

.navboxleft_C88C7E5C (and contents of course) beneath

.navboxauto_C88C7E5C inside the content div. To the css rule for

.navboxcont_C88C7E5C - I added

Code:

position: relative

and to the css rule for

.navboxleft_C88C7E5C - I added

Code:

position: absolute; top: 0; left: 0

That worked for me.

HTH,
fg

Simon

2010-08-15 07:14 AM

-

I could tell you it all looks good to me, Cloe, but since we use the same operating systems and browsers it just confirms what you already know. :)

0110101110

Cleo	2010-08-15 08:44 AM

Quote:

Originally Posted by flowersgone (Post 488461)

I had luck with a relatively simple css change that seemed to work in IE8, FF3, Safari and Chrome and allowed me to move the

.navboxleft_C88C7E5C (and contents of course) beneath

.navboxauto_C88C7E5C inside the content div. To the css rule for

.navboxcont_C88C7E5C - I added

Code:

position: relative

and to the css rule for

.navboxleft_C88C7E5C - I added

Code:

position: absolute; top: 0; left: 0

That worked for me.

HTH,
fg

Ding, ding, ding, we seem to have a winner.
http://cleos-porn-links.com/adult-links/test1.shtml
(I renamed the css stuff to make it less confusing)

Cleo	2010-08-15 04:24 PM

I've almost got it.

I used the code on a new category that I made live.
http://cleos-porn-links.com/adult-li...h-femdom.shtml

But the #footer is displaying in the middle of the page instead of at the bottom of the page since there is not enough listing to fill the page.

Basically the menu needs to push it down to the bottom of the page but isn't.

Cleo	2010-08-15 06:30 PM

I found this great page on how to make a footer stick to the bottom of the page.
http://ryanfait.com/resources/footer...ottom-of-page/

But when I add the trick that flowersgone gave me to the page it no longer works.

I think it's time to do what I did with my tube and pay PonyGirl to write the code instead of wasting hours of my time trying to figure this out.

flowersgone

2010-08-15 08:14 PM

Quote:

Originally Posted by Cleo (Post 488506)

Sorry I was away for a bit.

I managed to fix this up with a two relatively small changes. First the DOCTYPE was putting IE in quirks mode and causing trouble so I switched to the XHTML DOCTYPE in http://cleos-porn-links.com/adult-li...h-femdom.shtml. Then I took the rule .maincontaner and added

Code:

min-height: 280em

Again it seemed to work in IE/FF3/Safari/Chrome, although making the footer flush against the bottom of the menu for short content pages may not be easy. I also tested with the page you had working earlier and it didn't seem to break anything.

I am not really a full time css guru either although increasing amounts of my time are spent with css and dynamic html type tech. My background is more from perl/MySQL/JavaScript. Over the longer term paid, specialized, help has been known to get better results :). I will certainly keep an eye on the thread in case there are other questions.

Hope my efforts did something for you,
fg

Cleo	2010-08-15 11:17 PM

Wow, you really know your stuff. |thumb

Switched the doc type and added min-height: 280em to the maincontaner.

It's looking good. :)
http://cleos-porn-links.com/adult-li...h-femdom.shtml

There seems to be some added space under the left menu in Safari and Firefox but it's not a big deal.

I love how simple the pages code has become
http://cleos-porn-links.com/adult-li...ish-femdom.txt

I really need to learn a lot more about using css. Any material that you might suggest?

flowersgone

2010-08-16 08:51 AM

Quote:

Originally Posted by Cleo (Post 488515)

I really need to learn a lot more about using css. Any material that you might suggest?

Good to hear that the problems seem to be working out. I keep a copy of the O'Reilly book, Dynamic HTML, The Definitive Reference, by my desk. I have also added a "Helpful CSS links" section to the bottom of my site's development page which is pointed to by my sig and may also be found here: http://www.toosxxx4.com/development/. Thanks to all for visiting.

Cheers,
fg

Cleo	2010-08-16 08:10 PM

Quote:

Originally Posted by flowersgone (Post 488547)

O'Reilly book, Dynamic HTML, The Definitive Reference,

Ordered the book used from Amazon, thank you. |thumb

Love the easy to understand examples on your page. :)
http://www.toosxxx4.com/development/

I just spent the last 15 hours or so copy and pasting the new template code on all my category pages plus a bunch of other related pages, I'm spent.

Time to unwind... |potleaf|

All times are GMT -4. The time now is 03:14 PM.