Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#25 2012-11-20 21:50:53
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,315
Re: ack! archive article thumbnail navigation display!
On line 374 of your photos stylesheet, change the padding-right value for a.prev_thumb_link from 6 to 5px, it’s a very tight situation there that’s caused by any misalignment of image edges I don’t see the reason for.
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
Re: ack! archive article thumbnail navigation display!
No its still not working – I’ve left it at 12 thumbnails so you can see the problem in Opera and Firefox
Also the “permanent link to” text roll over is broken
Last edited by jameslomax (2012-11-20 22:30:05)
Offline
#27 2012-11-20 22:46:09
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,315
Re: ack! archive article thumbnail navigation display!
jameslomax wrote:
No its still not working
And the value is still at 6px.
Also the “permanent link to” text roll over is broken
Copy the code from my post again, I fixed the curly quotes it needs.
Last edited by uli (2012-11-20 23:05:48)
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
Re: ack! archive article thumbnail navigation display!
Yes that’s corrected the “permanent link” issue!
No I changed the 6px to 5px….
Offline
#29 2012-11-20 23:19:02
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: ack! archive article thumbnail navigation display!
For the correct horizontal space in all browsers between the a-elements you have to set for this elements display: block; and width and float: left; and clear the wrap div, so as I wrote yesterday.
Last edited by GugUser (2012-11-20 23:19:56)
Offline
Re: ack! archive article thumbnail navigation display!
I can’t judge this. All I can do is trust that people are correct, and try what they tell me to do.
Can you provide me with the copy and paste code for what you’re advising Gug?
And does it mean I will have to change Uli’s advice?
Offline
#31 2012-11-21 02:35:01
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: ack! archive article thumbnail navigation display!
It’s not about uli or me, our instructions in parts are complementary.
The problem is that for inline-elements (<a>) you can’t define precise horizontal spaces. The real horizontal spaces between your images actually are more than 5 or 6 pixels. For this reason, you have to define display: block; and float it.
Actually, the new wrapper-div has no id or class name. Give them an id or class, for example as you proposed id="thumbs".
In the CSS comment out this part:
/*
a.prev_thumb_link {
padding-right:5px;
}
a.prev_thumb_link.num_2 {
padding-right:5px;
}
a.prev_thumb_link.num_4 {
padding-right:0px;
}
a.prev_thumb_link:last-child {
padding-right: 0;
}
a.prev_thumb_link img {
padding: 6px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
a.prev_thumb_link:hover img {
border: 1px solid #999;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
*/And put this:
#thumbs a {
display: block;
width: 160px;
float: left;
line-height: 0;
margin: 0 6px 6px 0;
padding: 6px;
border: 1px solid #ddd;
}
/* total width for four images = 720px */
#thumbs a:hover, #thumbs a:focus, #thumbs a:active {
border-color: #999;
}
#thumbs img {
margin: 0;
padding: 0;
border: 0 none;
}
#thumbs:after {
content: " ";
height: 0;
clear: left;
display: block;
visibility: hidden;
}I hope this works.
You don’t made your CSS? You don’t know how to do this? If that is so, how you made your site? I don’t understand this detail.
Last edited by GugUser (2012-11-21 02:38:07)
Offline
Re: ack! archive article thumbnail navigation display!
Thank you. Other kind people built my site for me. I will respond further when I try your code…..
Last edited by jameslomax (2012-11-21 12:08:23)
Offline
Re: ack! archive article thumbnail navigation display!
Its making four rows of three thumbnails, not three rows of four thumbnails – in Opera, Chrome, and Firefox.
Offline
#34 2012-11-21 12:33:07
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,315
Re: ack! archive article thumbnail navigation display!
jameslomax wrote:
Its making four rows of three thumbnails, not three rows of four thumbnails – in Opera, Chrome, and Firefox.
Give the wrapper div the id “thumbs” and all will slip up!
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
#35 2012-11-21 13:00:36
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: ack! archive article thumbnail navigation display!
The images has padding 12px … I’m looking why.
Offline
#36 2012-11-21 13:04:21
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: ack! archive article thumbnail navigation display!
Ah … please, as uli and I wrote, please give the div an ID!
Last edited by GugUser (2012-11-21 13:05:13)
Offline