Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
basic css error and advice
I’ve messed up. This always happens to me, because I don’t know what I’m doing.
Can anyone see the solution at my site to do the following:
1) Correct the next_photo hover/link, so its the same as on the left. It was working – but I broke it.
2) I broke it, when I was trying to add a third hover/link at the top of the photo, to take you to the latest post.
I can’t really see what I’m doing and I’ve been wrestling with it for far too long, so I think its time to stop and ask advice; which would probably take just a minute or so of time of the nice folk here.
I realise (2) will need another transparent image with horizontal dimensions (well, I think it does), and another appropriate hover image – basically, I’ll flip the existing images to horizontal. Its the txp css stuff thats confusing me.
Many thanks!
Offline
#2 2012-02-04 20:05:44
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: basic css error and advice
To 1): Change in the CSS a.next_photo_link left: 0; to right: 0; and put the correct background image number.
Offline
Re: basic css error and advice
OK thanks, I’ve done that. Now though – as you can see – the hover arrow/image is wrongly aligned. I keep looking at the code and just can’t see the problem……
Offline
#4 2012-02-05 16:20:39
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,304
Re: basic css error and advice
In your CSS, on line 356 replace 25% by 75% for a.next_photo_link:hover.
Edit: Some thumbnails are squeezed: 573-575.
Last edited by uli (2012-02-05 16:27:05)
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
Re: basic css error and advice
Thank you! So if I understand this correctly, this problem occurred because I copy and pasted one section of the css into another, not understanding how it had to be modified for the right hand side.
Offline
Re: basic css error and advice
Can anyone advise me on the css to build a url/hover link at the top of the photos, for the latest post?
Here it is for the previous link so presumably, this just needs modifying slightly:
a.prev_photo_link {
position: absolute;
top: 0; left: 0;
width: 200px;
height: 100%;
display:block;
float: left;
background: transparent url(http://www.jameslomax.com/images/2219.png);
}
a.prev_photo_link:hover {
background: transparent url(http://www.jameslomax.com/images/2220.png) no-repeat 25% 50%;
}
Offline
Re: basic css error and advice
I think you need something like this:
a.latest_post {
position: absolute;
top: 0;
left: 210px; /*so it won’t overlap the previous photo link which is 200px wide */
width: 305px; /*to fit it into the space between next and previous links */
height: 50%;
display:block;
}
a.latest_post:hover {
background: transparent url(http://www.jameslomax.com/images/2220.png) 50%50% no-repeat;
}
Offline
Re: basic css error and advice
Ah, thanks.
It doesn’t seem to be working though. It could be my error not yours, but I copied and pasted that code into the css, and then added _link thinking it might need that – still not working.
?
Offline
#9 2012-02-23 21:15:25
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: basic css error and advice
You need a class “latest_post”. I can’t see that in your code. Or which side do you mean?
Offline
Re: basic css error and advice
No its not there.
I think I understand what you mean – now I’ve looked at the code and can see the other “classes”.
What’s the code to do that? – I can’t write css.
And can I insert it anywhere in the “class” section of the css, or does it have to go in a particular place?
Offline
Pages: 1