thumbnails

[bite me!]

Hi there,

I'm figuring out how I can work these 2 things out:

# 1: I wanted to change the thumb-style to vertical. That worked. But: right now the rest of my photoblog moved down. How can I change this?

# 2: With these changes, the filter when hovering over the thumbs is lost in the process. I have no clue how to fix this.

Thanx!

http://www.mystic-de-sign.com

[Connie]

yes, I will bite!
1) it is always very good to use the webdeveloper extension of Firefox, because from there you can really easy validate, test CSS etc.

2) take off<!-- start --> from the top of your template
the first line of a html-file has to be DOCTYPE

3) I see my css-element "film-cat" there, so you looked into my photografitti-design, welldone

the stripe with the thumbnails sits beside the topline

both should have fixed position or you use "float:left" for both or "float:right" you must check out

4) <meta http-equiv="imagetoolbar" content="no"> <= missing /
<br> <= <br />

5) the link to the archive: <a href="index.php?x=browse&pagenum=1">
I thought this error is fixed, it should be

<a href="index.php?x=browse&pagenum=1"> & <= &
info & comments <= the same
http://www.htmlhelp.com/tools/validator/problems.html#amp

5) why you use "oncontextmenu" ???
6) <font...> <= do not use this, for that there is CSS!
7) there is absolutely no CSS-element "position" with the attribute "left"!!
position can have the following attributes:
absolute, fixed, relative, static


I am listing these points because with clean code it is so much easier to get the CSS what you want.
If you use wrong CSS + deprecated HTML-fonts, for sure you will get shitty results.. that's why validation is so necessary...


and after this short lesson, look at this screenshot:
http://www.bildgier.de/bilder/biteme.jpg

you see it? I just changed the style for film-cat in the webdeveloper-extension online a little bit:
#film_cat {
position:absolute;
left:15px;
top:10px;
width:107px;
background:transparent;
padding:0;
}

position is everything and that is no mystic design, just following the rules! :idea:

[Connie]

Marijke,

I read that you got this Referrer-spam as well with your blog, so you should be aware, we are going to release PP-secure edition soon, will stop referrers etc..

tui,

Connie

[bite me!]

1) I don't work with Firefox or anything like that.. but a friend of mine does and sait the hovering didn't work. Maybe it's a good thing to throw it out of the templates, doesn't work right now anyway.

2) Done!

3) What do you mean with "the stripe with the thumbnails sits beside the topline"??

4) Done!

5) Not really true. I copied / paste the link from my adress-bar. This is the way pixelpost makes the link. When changing the "&", the link doesn't work anymore.

5) I have no idea!

6) I know, but I wanted that link to have another color. Don't know how to do that in CSS.

7) :oops: Sorry...

But: by changing this all, there's a black border on the main-picture and the links don't hover in another color anymore... :( what happened??

Thanx for helping me out, Connie, I really appreciate it.

About the referers, I'll check it out when it's there! (the name is Hanneke ;-))

Thanx again, I hope everything is ok right now

[Connie]

Hanneke,

sorry I was just getting a phone call when I typed the posting, so I mixed your name... excuse me, not very polite

well, "stripe" <= the row of thumbnails

yes, the hover: that looks to me as Internet Explorer - thingie which does not work in all browsers, that's why I did not see it!

you should install Firefox and check your pages with that browser, because this or Opera are more standard-compliant, after that you can check in internet-explorer as well :wink:

yes, the pixelpost-link is translated when shown in the browser, in the template it should be masked, but never mind, this is fixed in the versions, so you will get it with one of the next updates for sure

the color of links in CSS is made like this:


a:link { font-weight:bold; color:#0000E0; text-decoration:none }
a:visited { font-weight:bold; color:#000080; text-decoration:none }
a:hover { font-weight:bold; color:#E00000; text-decoration:none }
a:active { font-weight:bold; color:#E00000; text-decoration:underline }
a:focus { font-weight:bold; color:#00E000; text-decoration:underline }

there are different definitions for the different stati of the link
you have these link-definitions already:

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: none; cursor: crosshair; }
just add the color to these!

the border around the image:
well CSS means "cascading style sheets", which means that one element can get styles from the parent-element above, so you must look for the border-element of the image or image-info...

a tip: In Firefox there is the tool to move the cursor over parts of the page and in the statusline you will see exactly which definition is active for that element, Ctrl+Shift+S or "CSS/view style information"
that is extremely helpful for identifiying the relevant definitions

but you will find your way, I am sure, CSS is sometimes strange, but very powerful as well!

[bite me!]

This is what I see in my source:

<!--A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: none; color: "656565"; cursor:crosshair;}

And:

#image {
align:center;
padding:5px;
background:#111;
border:2px solid #FFFFFF;
}
#image_info {
padding:10px;
display:block;
font-size:10px;
color:#656565;
}

That means I should see the links hovering and I shouldn't see the black border around the main-pic... Feels like I'm nagging about this, when I do, I'm sorry..

[Connie]

Hanneke,
<!--A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: none; color: "656565"; cursor:crosshair;}
-->

in the css-section you cannot set "normal" html-comments, so you get distortions

CSS-comments are like this: /* lkflfd */, take of these "<!-- " and "-->"

A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: none; color: "656565"; cursor:crosshair;}


if you change A:hover, you will see it:

a:link { text-decoration: none;color:blue; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: underline;color:red; cursor: crosshair; }


links will be blue and the hover will turn to red

do you mean the black small border around the image, inside the white frame?

change the CSS for image:
#image { border: 2px solid rgb(255, 255, 255); padding: 0px; ....
it's the padding of 5 px...

you see? I just pick around in the FireFox CSS-editor window in my browser, see the results...

that's very convenient.

so. but now I will finish with this private lesson, I want to relax, I am a little ill..

tot siens, Connie

[bite me!]

Connie, you are THE BEST! thanx so much!

get well soon...!

[Joe[y]]

i moved this topic to design and front end as it could prove as a useful reference to other users having html troubles...

plus it's not really a PP problem. Glad everything is good now... well done Connie.