[Solved] D#15 - Ooeerk! I've mucked it up!

I may have got lost in the spam yesterday...or else you're all ignoring me and I can't believe that!

Yes I can go and fix them individually,b ut it seems I've changed just one thing that's done this.

I'm not sure what you're asking. :shrug:

Well let's take it a bit at a time then. I've fixed the dividers, they now centre/center however...

If you look at this page the black para above the loopbar at the top no longer centres.

<p> on #info1 is text-align:left; however I've used the class "centerpic" which has text-align:center; - why won't it?

It's the same with the little logo at the very bottom of the page which is a "top of page" link - it's supposed to be centered.

Thanks for looking

Easily made mistake

The class for that paragraph just needs to be changed from "p class" to "div class", just like you've done for the images. Otherwise it will take on the left alignment from the info1 div.

Actually, there are a couple of repeated instructions for the info1 class

#info1, #info2, #info3, #info4 { position: relative; overflow: auto; padding: 1em 4em 2em 4em; background: #eee url("/images/bgmarble.gif"); font-family: "Trebuchet MS", verdana, arial, sans-serif; font-size: 93%; font-weight: normal; text-align: left; line-height: 1.3em; color: #000000; border-color: #baadc4; border-width: 3px 0 0 3px; border-style: solid; display: inline-block; }

#info1{text-align:center;}
#info1 p {text-align:left;}

You could also change the #info1 p to "text-align: center;". and delete whichever one of the conflicting #info tags you don't want.

Cheers ~
Karla

I'm trying to understand the cascade here - I obviously still don't have it in my head :?

I thought it went...

div (#info1)
any class applied to it (none)
<p>
any class applied to it (centerpic)

I know div will probably work but I try hard to avoid Divitis

In fact I've just put in the <p> tags the top sentence was just sitting in the 'strong' tags and taking centring from the Div until I played with the footnotes.

Why doesn't the bottom logo work anymore?

You're right about the cascade order, but the first instruction to the info1 div (in the list of #infos)is to text-align it left, then next it is to text-align it center, and finally it is to text-align it left if it is in a p.

Confuses me, so it probably confuses browsers too. Browsers always follow the last instruction they are given. So your images are centred by the second #info1 = text-align: right instruction, but your text is being left aligned by the #info 1 p instruction because it is in a p.

If you don't want to use the div again, change the #info p to text-align:center.

Progress not perfection

The bottom logo is working here, not sure what you are asking?

Cheers ~
Karla

Thanks Karla - I appreciate your help, I shall work at getting this straightened out across the site (which is what I fondly thought I was doing last weekend ) At least I wasn't totally off the mark!

cheers!

Hmmmm...still not happy

If you take a look at the home page you will see the photo and the little logo at the bottom are now aligned left. And I have not changed this page for weeks. It has happened since I played with the footnotes last week - can someone see what's happened here please? Thanks.

Don't worry, this is just the butterfly effect (related to chaos theory).

Your logo started being left aligned everywhere by the info1 div in the following code:

#info1, #info2, #info3, #info4 p { font-family: "Trebuchet MS", verdana, arial, sans-serif; font-size: 93%; text-align: left; font-weight: normal; margin: 0; }

this is happening because the class "centerpic" isn't working the way it is currently done (a class="centerpic" href etc.) But, if you put all your logos in a separate div they will work.

eg.







And, the other image on your page will center if the inline instruction is deleted:

#floatbuild { text-align: center; margin: 0; padding: 0; }

I'm not clear on why this works, but it does!

I need to do more homework on how the inline class works.

Cheers
Karla

Hi Karla - thanks very much for delving into this again for me!

LOL! Chaos seems to be my middle name

I had taken the text-align:left out of the #info1 though - perhaps I forgot to load it :? Anyway I followed your suggestions but taking the "floatbuild" div off left aligned it again for me (don't know how yours centred) so I stuck "centrepic" on there and Voila! I also made the image a little bigger to sit more happily in its space.

I have also twigged, I think, why this confusion has arisen. It wasn't me playing with the footnotes but but being "persueded" to take off/out a little js file and various other things to do with centring a couple of weeks ago.

You can read the whole sorry story here in D#13 The "duck" threads are the ongoing saga of my attempts to build this website and get "all my ducks in a row" It also helps me find things again!

Thanks again for your help :thumbsup:

Okay...on to the second problem....

2) I found the little 'offsite' pic to put in the menu next to Glossary (under the Basics tab) - it's there on the Home page but I can't see it in the menu on some of the other pages - for example here

Hugo = :?

It wasn't your instructions Hugo - they all worked, we know that It was my crazy implementation of the stuff in the first place

Could you have a look at the "offsite" thingy for me please?

Since I'm sitting here twiddling my thumbs ...

The pages on which the image doesn't work are all in subfolders (eg. Anne), so the browser is looking for an images folder there. If you give the instruction to jump out of that folder and look in the main folder it will find the offsite thingy.

eg
../images/offsite-thingy.jpg


the number of dots depends on how deep your folders are - use more if necessary. I avoid burying things to deeply for exactly this reason.

Cheers
Karla

Duh! :rolleyes:

Oh dear! Thank you Karla and lucky for me that you had some thumb-twiddling time