annoying confusing css form issue maybe

kvnmcwebn · 2007-12-15 14:35:18

this isnt a big deal but i just thought id post it cause its annoying me.

this style rule:
h3, h3 a:link{ border:1px solid black;
color:#29AAE2; font-variant:small-caps; text-decoration:none; background-image:url(../images/arrowsh3.jpg); background-repeat: no-repeat; background-position:right;
}

or both these rules:

h3{ border:1px solid black;
color:#29AAE2; font-variant:small-caps; text-decoration:none; background-image:url(../images/arrowsh3.jpg); background-repeat: no-repeat; background-position:right;
}

h3 a:link{ border:1px solid black;
color:#29AAE2; font-variant:small-caps; text-decoration:none; background-image:url(../images/arrowsh3.jpg); background-repeat: no-repeat; background-position:right;
}

plus and article with this form:

<txp:excerpt />

equals: an article permalink with two headers, stacked on top of each other.
One has the article title one does not but both have all the other properties of the css rule.
So with the above rules im seeing to borders and two instances of the background image.

oh heres the article tag: <txp:article_custom excerpted=“1” form=“default” id=“2” pgonly=“0” section=“pensions” />

jstubbs · 2007-12-15 14:41:13

What do you expect to happen instead of what you get?

Gocom · 2007-12-15 15:42:42

As jstubb said, what do you expect to see? And actually, what you’re asking? If you want the second background off, just use something similiar:

h3{
	border: 1px solid black;
	color:#29AAE2;
	font-variant: small-caps;
	background: url(../images/arrowsh3.jpg) no-repeat 100% 0;
	}

h3 a {
	color:#29AAE2;
	}

Link with out granted to block element (display: block;) can’t be defaultly same sized as h3, because a is inline element, and h3 is block element. It just doesn’t act same way. And also using same styling for two elements that are inside each other — is quite, er, useless.

So, Another way is use something like following, where a is granted as block-element:

h3{
	color:#29AAE2; /* Actually we don't even need you */
	font-size: 1.0em;
	}

h3 a {
	color:#29AAE2;
	border: 1px solid black;
	font-variant: small-caps;
	background: url(../images/arrowsh3.jpg) no-repeat 100% 0;
	display: block;
	}

Cheers!

Last edited by Gocom (2007-12-15 15:47:17)

kvnmcwebn · 2007-12-15 19:47:13

ok what i was trying was slightly daft but this dosnt happen in a regular html page.
Gocom thanks for clarifying about the block level element i didnt know that and thanks for the example.

Gocom · 2007-12-15 20:26:39

ok what i was trying was slightly daft but this dosnt happen in a regular html page.

How it could be different with Textpattern and with out Textpattern? Magic? Chuck norris did round house kick with out shoes? Mickey Mouse lost his panties?

Point is that Textpattern doen’t change the styling in way or another. The issue is in the styling, things you did nor didn’t do. Everyting is shown as you did it to shown. It would be crazy if Textpattern changes the styling, and it doesn’t. To clarify you, if you’re loosing your mind and hairs, because of this issue :)

Cheers!

kvnmcwebn · 2007-12-15 22:26:17

sorry i must be losing the plot mate.

jm · 2007-12-16 01:30:37

Based on your post, it seems like you’re getting duplicate headers. What is output in the rendered HTML source? Are there two h3 elements?

kvnmcwebn · 2007-12-16 23:48:18

hi jm,
>>Are there two h3 elements?

nope just one..

gocom this is unrelated to the original post but maybe you can help me

regarding positioning the background image which is a button:
is there a way to make the image position move when the text is scaled? if not i will have to put an image in the form after the h3 but id rather put it in the css. what do you think?

Gocom · 2007-12-17 00:21:22

regarding positioning the background image which is a button:
is there a way to make the image position move when the text is scaled? if not i will have to put an image in the form after the h3 but id rather put it in the css. what do you think?

What do you mean? Which background or is it plain image. Which of these:

<img src="" alt="" />
<button type="image" label="Hello" />
some-element {background: url(../image/hello.gif);}

I don’t get what you mean with “text is scaled”. As hovered? Anlarged? Scrolled? Warps? Highlighted? Selected?

But I’m quessing that you mean:

background: url(../images/img.jpg) no-repeat 100% 100%;

Then it will always be at bottom. If you mean “when text is hovered”, then:

#element {
	background: url(../images/img.jpg) no-repeat 5px 0;
	}

#element:hover {
	background: url(../images/img.jpg) no-repeat 10px 0;
	}

But if you mean that the image should be before or after text, you could use padding and:

h3{
	background: url(../images/arrowsh3.jpg) no-repeat 100% 50%;
	padding: 0 50px 0 0;
	}

Now the background image will always at right side and at middle – and text won’t interface with it (come on it).

Cheers!

kvnmcwebn · 2007-12-17 01:24:19

hi again gocom,
yes i wanted to use the background image on the links for a hover state, like this h3 a:link{background image one} h3 a:hover{background image two}

The problem is that the headline text widths will varying and right now the h3 element spans the hole width of the div.
That means that there is no way to get the background image buttons the same width at the end of the headline without the danger of interfering with enlarged text right. sorry this is hard to explain…

The solution is how can i make the h3 element scale to exactly the size of the headlines plus 50px of padding??
If i do
H3{width:auto;}

the h3 scales to size of the containing column…

Last edited by kvnmcwebn (2007-12-17 01:24:47)

jm · 2007-12-17 02:47:33

kvnmcwebn wrote:

hi jm,
>>Are there two h3 elements?

nope just one..

Duh! Just re-read your post. Looks like you’ve got that problem solved then. Regarding scaling, try using relative sizes, if that’s what you’re after.

kvnmcwebn · 2007-12-17 02:57:12

hi,
>>Duh! Just re-read your post.
ha no prob its a confusing one!

>>Regarding scaling, try using relative sizes, if that’s what you’re after.
Do you mean for the h3 element or positioning the background image??
I need a way to scale the h3 element exactly to the size of the headline + padding. any thoughts?

thanks

edited for spelling

Last edited by kvnmcwebn (2007-12-17 02:59:47)

Textpattern CMS

Textpattern CMS support forum

#1 2007-12-15 14:35:18

annoying confusing css form issue maybe

#2 2007-12-15 14:41:13

Re: annoying confusing css form issue maybe

#3 2007-12-15 15:42:42

Re: annoying confusing css form issue maybe

#4 2007-12-15 19:47:13

Re: annoying confusing css form issue maybe

#5 2007-12-15 20:26:39

Re: annoying confusing css form issue maybe

#6 2007-12-15 22:26:17

Re: annoying confusing css form issue maybe

#7 2007-12-16 01:30:37

Re: annoying confusing css form issue maybe

#8 2007-12-16 23:48:18

Re: annoying confusing css form issue maybe

#9 2007-12-17 00:21:22

Re: annoying confusing css form issue maybe

#10 2007-12-17 01:24:19

Re: annoying confusing css form issue maybe

#11 2007-12-17 02:47:33

Re: annoying confusing css form issue maybe

#12 2007-12-17 02:57:12

Re: annoying confusing css form issue maybe

Board footer