Float image to the side of a H tag

Float image to the side of a H tag Heading keeps dropping below the image

#1 garethsimpsonuk

Forum Newcomer

Group: Members
Posts: 62
Joined: 02-June 08
Reputation: 0
Experience:Nothing
Area of Expertise:Designer

Posted 09 April 2009 - 07:42 PM

It's all in the title I guess.

I'm trying to get an image to float left of a heading so the text wraps around the image. However, when i add the image, the heading just drops below. Float left doesn't work.

I'm guessing it has something to do with H tags being block elements.

Any help would be appreciated.

Thanks

#2 craftedpixelz

Expert

Group: Members
Posts: 644
Joined: 28-June 08
Reputation: 5
Gender:Male
Location:Manchester, UK
Experience:Web Guru
Area of Expertise:Web Designer

Posted 09 April 2009 - 08:35 PM

Have you tried setting the heading to display inline? i.e in your css adding 'display: inline' to the heading property. Or alternatively floating your heading to the right?

#3 garethsimpsonuk

Forum Newcomer

Group: Members
Posts: 62
Joined: 02-June 08
Reputation: 0
Experience:Nothing
Area of Expertise:Designer

Posted 09 April 2009 - 10:24 PM

thanks for the reply.

yes that worked perfectly, thankyou! one problem though, i have this style:

Quote

.main-content-2 h2 {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%;}

I understand that this will apply to all the H2 tags within the main-content-2 div. I now need to create a new style exactly the same as this but with 'display:inline'. My problem is how would i name this rule.

for example

Quote

.main-content-2 h2 headingwrapsimage {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%; display:inline}

I know this isnt correct and would like to know how to create an identical style as some pages will use the original style and some pages will need to have the modified style with the display:inline.

Any help would be appreciated and thankyou to 'clearcutdesignz' for the remedy.

regards

#4 craftedpixelz

Expert

Group: Members
Posts: 644
Joined: 28-June 08
Reputation: 5
Gender:Male
Location:Manchester, UK
Experience:Web Guru
Area of Expertise:Web Designer

Posted 09 April 2009 - 10:44 PM

EDIT: Sorry, read it wrong. Read correct example below:

You can actually add 'display: inline' into your current .main-content-2 h2 class and have it only show on certain pages by giving
your pages a unique body ID. E.g. in the HTML of your homepage, where the body tag is located, if you changed it so it read

Quote

You could then target this page separately in your CSS by adding something like this in your stylesheet:

Quote

#home .main-content-2 h2 headingwrapsimage {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%; display:inline}

As you can see, because we've given the homepage it's own unique body ID, we can add this before the h2 class and therefore have it only show on the homepage. Here's an example of doing the same thing, but having it affect a few specific pages:

Quote

#home, #about, #contact .main-content-2 h2 headingwrapsimage {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%; display:inline}

Just remember you'll need to give each page a body ID for it to work.

#5 ElanMan

In, out, shake it all about...

Group: Members
Posts: 3,298
Joined: 11-March 08
Reputation: 54
Gender:Male
Location:Darlington
Experience:Nothing
Area of Expertise:Nothing

Posted 09 April 2009 - 10:47 PM

You could either place a class on the body of the pages where you want the h2 to display inline example:

body.whatever .main-content-2 h2 {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%; display:inline;}

or on the individual h2 tags

.main-content-2 h2.whatever {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%; display:inline;}

EDIT If the above rules were below the existing rules you would only need to specify the display:inline;

body.whatever .main-content-2 h2 {display:inline;}

.main-content-2 h2.whatever {display:inline;}

#6 garethsimpsonuk

Forum Newcomer

Group: Members
Posts: 62
Joined: 02-June 08
Reputation: 0
Experience:Nothing
Area of Expertise:Designer

Posted 09 April 2009 - 10:53 PM

thanks for the replies.

yes that would work!

i think i was thinking too much into it and creating a simple class to display stuff inline would be best.

thankyou for the advice!