h1 styling with an image

1,024 Posts

Frank Reply #1, 17 years, 7 months ago

Hi,

can someone tell me if the following is possible:

I would like to have an h1 in the content, that has an image in front of that h1 every time the user uses an h1.

so:

[wrap][image][<h1> text</h1>}[wrap]

Below is what I have got sofar (a chunck?). But the source of the output does not wrap the "some text" inside an h1.
What is my mistake?


the css:

.hboxwrapper{
	width: 95%;
	min-width: 240px;
	min-height:30px;
	border: solid 0px black;
    color: #ffffff;
    background-color: #FF8A7D;
    text-align: left;
    font-size: 1.2em;
}

.hboxwrapper_header {
    padding: 5px 0 5px 0;
	width: 19%;
	height:100%;
	min-height:30px;
    display:block;
    border: solid 1px white;
	float: left;
	position:relative;
	text-align:right;
}
.content h1 {
    padding: 15px 0 5px 0;
	width: 75%;
	min-height:10px;
    display:block;
    border: solid 1px white;
	float:right;
	position:relative;
}
the chunk:

<div class="hboxwrapper">
					<div class="hboxwrapper_header">image</div>
					<div class="content h1">some text</div>							  
				</div>

572 Posts

9thwave Reply #2, 17 years, 7 months ago

hi,

if you mean you want to use the same image everytime an H1 tag is generated you’re best off using a background iimage...so your css would look something like this:

h1 {
background: url(images/my-image.jpg) no-repeat 0px 0px;
padding: 0px 0px 0px 20px;
}

You would have to mess around with the padding and background positioning (the 0px 0px) to get the image where you want it but that’s basically it. You could add other specifications of course but the above will essentially give you your image with an h1 tag....you don’t need any div classes if that’s all you want to do.

www.9thwave.co.uk
WEB | DESIGN | PRINT

1,024 Posts

Frank Reply #3, 17 years, 7 months ago

Hi,

I wanted that image to come from a TV. So the enduser could insert an image. Anyway I droppped the idea and did is as you desribed.
Thanks.

833 Posts

treigh Reply #4, 17 years, 7 months ago

it is also possible to use a TV as you wanted and this solution is a combination of what you wanted and what Janice171 just suggested.

By using inline CSS, your XHTML code would look like this:

<h1 style=" background: url(images/[*my-image.jpg*]) no-repeat 0px 0px; padding: 0px 0px 0px 20px;">Your headline here</h1>

The user will have to provide the image name with the extension in the TV input box. Alternatively, if you will be using the same extension on all pages i.e: .jpg, you can add .jpg after the TV placeholder in your inline CSS.

This solution would work best if you’re using only one H1tag per page, just like you should.

Good luck

A MODx Fanatic

1,024 Posts

Frank Reply #5, 17 years, 7 months ago

Hi,

thanks, nice and short solution. I give the " user" the option to use h1 to h6 each with an image choice.
Just style them all the same. Do you think it would be possible to create a dropdown TV that would make them choose from a few pre created images. So I can set size etc?

833 Posts

treigh Reply #6, 17 years, 7 months ago

Quote from: Frank at Mar 18, 2009, 02:47 PM

Hi,

thanks, nice and short solution. I give the " user" the option to use h1 to h6 each with an image choice.
Just style them all the same. Do you think it would be possible to create a dropdown TV that would make them choose from a few pre created images. So I can set size etc?

I’m sure it is possible. But I predict there will be some scripting involved. You have to establish a mechanism that will assign the image path to each option of the select box. I’ve never ventured in there before, but it seems possible.

Maybe our javascript or PHP gurus will be better placed to help you out on this.

A MODx Fanatic