Does this CSS page work correctly for everyone?

[Cleo]

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.

[pc]

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

[Cleo]

Boarder should be gone now.

[pc]

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

[Cleo]

Originally Posted by pc

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

Great.

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]

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

.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]

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]

Change this style css on this page to

<style type="text/css" media="all"><!--.navboxcont_C88C7E5C {
background-color:#FCF7D7;
height:auto;
width:1100px;
float:right;
}

.navboxleft_C88C7E5C {
background-color:#FCF7D7;
float:left;
height:auto;
width:230px;
top:0


}

.navboxauto_C88C7E5C {
background-color:white;
height:auto;
margin-right:0px;
padding-left:10px;
text-align:left;
width:770px;
float:right
}--></style>

then just play with margins and padding

[Cleo]

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]

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]

Originally Posted by Cleo

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 <div> .navboxleft_C88C7E5C (and contents of course) beneath <div> .navboxauto_C88C7E5C inside the content div. To the css rule for

.navboxcont_C88C7E5C - I added

position: relative

and to the css rule for

.navboxleft_C88C7E5C - I added

position: absolute; top: 0; left: 0

That worked for me.

HTH,
fg

[Simon]

-


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]

Originally Posted by flowersgone

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 <div> .navboxleft_C88C7E5C (and contents of course) beneath <div> .navboxauto_C88C7E5C inside the content div. To the css rule for

.navboxcont_C88C7E5C - I added

position: relative

and to the css rule for

.navboxleft_C88C7E5C - I added

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]

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]

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]

Originally Posted by Cleo

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.

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

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]

Wow, you really know your stuff.

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]

Originally Posted by Cleo

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]

Originally Posted by flowersgone

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

Ordered the book used from Amazon, thank you.

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...