wrapping a permlink around h2, h4, and h5

reptilerobots · 2006-06-26 20:08:03

Is it possible to create a div “holder” (such as below) that holds a form, the form contains a wrapping permlink, that assigns the articles link to the contents. This “works” fairly well in Safari and also Firefox, but in Explorer the pointing hand is replaced by a text select cursor.

in my css, I just have the generic link assigned to the div
<code>
a:link, a:visited, a:active {
color: #000;
text-decoration: none;
}

a:hover {
color: #ccc;
}
</code>
<code><div class=“article”><txp:permlink><h2><txp:title /></h2><txp:excerpt /><h4><<txp:category1 />></h4></txp:permlink></div></code>

Basically, I guess my question is, is it possible to wrap h2, h4, in a link, and then have it work correctly in IE ? What about making the background of the div change on a rollover?

thanks in advance.

maniqui · 2006-06-26 20:33:45

hi reptilerobot

I think it’s not possible to wrap an hn tag inside a anchor (<a>) tag, because the first is a block element and the second is an inline element. AFAIK, you can’t put block elements inside inline elements.

In your example you are wrapping not just one but two block elements (h2, h4) inside the link…

Why dont you try?
<code>
<div class=“article”><h2><txp:permlink><txp:title /></txp:permlink></h2><txp:permlink><txp:excerpt /></txp:permlink><h4><txp:permlink><<txp:category1 />></txp:permlink></h4></div>
</code>
Also, I think you will need to escape those < and > that are wraping the category tag.

reptilerobots · 2006-06-26 20:43:14

thanks – I have my h2, h4’s set to display “inline”, visually, it works.

I didnt want to make them separate links, because I wanted the whole line (h2, h4) to have the hover effect when you roll over any part of it.

If you go to www.wearetherobots.com/pages youll see what I mean, the article marked NEW (with the dagger glyph) has your changes on it.

Walker · 2006-06-26 21:23:15

Yeah, do this:

<code>
<h2><txp:permlink><txp:title /><txp:excerpt /><span class=“overrideh2”>&lsaquo;<txp:category1 />&rsaquo;</span></txp:permlink></h2>
</code>

This is the only valid way to get that whole link in. you can override the display options from block to inline, but you can’t make the browser always believe it (especially IE).

So then in your styles you do :

<code>
h2 {
font-size: 15px;
font-color: red;
}

.overrideh2 {
font-size: 11px; /* or whatever you really want it to be (ems right?) */
font-color: green;
}
</code>

Last edited by Walker (2006-06-26 21:24:17)

Walker · 2006-06-26 21:25:49

hmm….or you could leave the class off that span and just use it as a selector

<code>
h2 span
{
/* styles here */
}
</code>

This will choose every span that is found within <code>h2/h2</code> but it takes some code out.

reptilerobots · 2006-06-26 23:24:29

seems like I am running into a few problems,
after TXP spits out the form as html, it becomes this
<code>
<div class=“article”><a href=“http://www.wearetherobots.com/pages/vault/drawing-2” title=“Permanent link to this article”><h2>b drawing 2</h2><p>06/06/2006</p><h4><drawing></h4></a></div>
</code>and also this : its a conditional tag…. when the article is new.
<code>
<div class=“article”><h2><txp:permlink><txp:title /></txp:permlink></h2><txp:permlink><txp:excerpt /></txp:permlink><h4><txp:permlink><<txp:category1 />></txp:permlink></h4><h5>&dagger;</h5></div>
</code>
I am using different hn tags for formatting, the text looks all exactly the same, but the width’s are different, and they are floated next to eachother. Maybe I am going about this the wrong way. All I really need is to be able to wrap some content in a div, and I want the complete div to respond like a rollover button, but I need to use the hn tags for spacing and formatting. So far I have a h2, h4, and P inside a link. I could get that down to h2, and a span, and P ( I am using the article excerpt tag to present a “fake” date, because I am manually entering dates, some of the pieces are from 2004, etc. ), but by default TXP wraps a P tag around excerpts.

Last edited by reptilerobots (2006-06-27 00:25:53)

reptilerobots · 2006-06-27 00:38:16

thought I could try this, but with the spans subset within the h2, I cant get the alignments/spacing to work.

<code><div class=“article”><h2><txp:permlink><txp:title /><span><txp:custom_field name=“created” /></span><span><<txp:category1 />></span></txp:permlink></h2><h5>&dagger;</h5></div></code>
I just used a custom field name instead of an excerpt, in order to do away with a P tag.

maniqui · 2006-06-27 01:02:36

( I am using the article excerpt tag to present a “fake” date, because I am manually entering dates, some of the pieces are from 2004, etc. )

You can manually set the date of an article. Look at the right bottom side in the Write tab.

“We are the robots” -> do you like Kraftwerk?: :D

reptilerobots · 2006-06-27 16:36:28

You’re right, I completely overlooked overwriting the publish date.

if an h2 tag wraps around the whole thing, and I use 2 spans next to eachother like:
<br><br>
<code>

<txp:if_custom_field val=“new”>

<div class=“article”><h2><txp:permlink><txp:title /><span><txp:posted /></span><span><<txp:category1 />></span></txp:permlink></h2><h5>&dagger;</h5></div>

<txp:else />

</txp:if_custom_field>

</code>

it works sort of, but you cant make the first span float , lets say 300 pixels from the text of the h2 AND have the next span right next to it, 0 pixels away…since the spans are inside the h2 tag. Unless I used custom classes, which might be the only way to get it to work. But I don’t know if that will break the hover effect on a rollover. Maybe I can use some sort of pointer

reptilerobots · 2006-06-27 18:19:52

Well I am using this now:
<code>
<txp:if_custom_field val=“new”>

<div class=“article”><h2><txp:permlink><span class=“articleTitle”><txp:title /></span><span class=“articleDetails”><txp:posted /></span><span class=“articleDetails”><<txp:category1 />></span><span class=“articleNew”>&dagger;</span></txp:permlink></h2></div>

<txp:else />

Which basically just outputs this
<code>
<div class=“article”><h2><a href=”#”><span class=“articleTitle”>Article Title</span><span class=“articleDetails”>Date</span><span class=“articleDetails”><Article Category></span><span class=“articleNew”>&dagger;</span></a></h2></div>

/* article – div that wraps article form */
.article {
width: 790px;
height: 16px;
margin: 0px 0px 0px 0px;
background-color: #333;
}

.article h2 {
width: 770px;
height: 16px;
margin: 0px 0px 0px 0px;
float: left;
display: inline;
background-color: #000;
}

.articleTitle {
width: 515px;
height: 16px;
float: left;
background-color: #deee00;
}

.articleDetails {
width: 115px;
height: 16px;
float: left;
background-color: #fe33ef;
}

.articleNew {
width: 25px;
font-family: Georgia, Times, “Times New Roman”;
font-size: 12px;
height: 12px;
font-weight: bold;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
color: #ff00ff;

}
</code>

It looks good in both IE and Firefox, but the a hover’s dont work in IE, and the cursor is the text select cursor. It isnt recognizing the A Href behavior in IE

Last edited by reptilerobots (2006-06-27 18:20:42)

Textpattern CMS

Textpattern CMS support forum

#1 2006-06-26 20:08:03

wrapping a permlink around h2, h4, and h5

#2 2006-06-26 20:33:45

Re: wrapping a permlink around h2, h4, and h5

#3 2006-06-26 20:43:14

Re: wrapping a permlink around h2, h4, and h5

#4 2006-06-26 21:23:15

Re: wrapping a permlink around h2, h4, and h5

#5 2006-06-26 21:25:49

Re: wrapping a permlink around h2, h4, and h5

#6 2006-06-26 23:24:29

Re: wrapping a permlink around h2, h4, and h5

#7 2006-06-27 00:38:16

Re: wrapping a permlink around h2, h4, and h5

#8 2006-06-27 01:02:36

Re: wrapping a permlink around h2, h4, and h5

#9 2006-06-27 16:36:28

Re: wrapping a permlink around h2, h4, and h5

#10 2006-06-27 18:19:52

Re: wrapping a permlink around h2, h4, and h5

Board footer