h2 w/ image in parallel boxes?

Hi - I like to do all my h2 sub-headers in a 2-cell table, with image in left cell, and h2 in right cell with colored bg, as seen here:

http://www.greensmoothie.com/test/best.php

Please is there a way to do this without tables and with no floats in
pure css for this page here:

http://www.greensmoothie.com/gs/

I see in another page, I’ve used a table for an image + text next to each other, here:

http://www.greensmoothie.com/test/index.php

scroll to page bottom just above Sprouting Links, pic of wheatgrass with txt box next to it.

I recall Paul giving me wide variety of options to do that image-w-parallel-txt but in the end a table seemed the simplest.

But a problem I foresee with using a table in my new pure-css file at

http://www.greensmoothie.com/gs/

is that the h2 has to be flush against the edge of txtbox (or content? I get confused) - there can’t be any white space between the page bgcolor and the bgcolor of h2 box. I guess I could give the table a negative margin?

Perhaps Gary’s .photo code (for 2 photos next to each other, with caps) can be copied + fixed to make my h2-with-image work?

.photo {
text-align: center;
margin: 20px 0; /sets para before + after/
}
.photo div {display: inline-block; vertical-align: middle}

    • html .photo div {display: inline}
  • html .photo div {display: inline}
    .photo pre { /use spaces at start + end of each line to align cap under pic/
    display: table;
    margin: 5px 20px; /space betw phot-cap + betw photos/
    }

I’m hopelessly unsure where to begin…

thank you! - Val

Hi Val, I’m sure what you need is easily done with CSS, but to be honest I’m totally confused about what you want next to what. I didn’t see H2 elements where you seemed to be saying they’d be.

Could you just clarify what section you are talking about? E.g. give the text you want as an H2, and cite the image you want next to it.

Hi Ralph - yes sure you’ll see on this page

http://www.greensmoothie.com/test/best.php

the h2 “Sprouter Plans” on the right with a leaf image to the left of it. The code looks like this:

<table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=2 WIDTH=“100%” >
<tr>
<td ALIGN=CENTER BGCOLOR=“#FFFFFF”><img SRC=“pg-mid-30.gif” height=25 width=30></td>

<td ALIGN=CENTER WIDTH=“275” HEIGHT=“35” BGCOLOR=“#E5FFBF”>
<h2>
Sprouter Plans</h2>
</td>
</tr>
</table>

Now I need to move that h2-design into this template:

http://www.greensmoothie.com/gs/

hopefully without using <table> or floats. Or if I use table, it’s right-cell bgcolor (the cell that contains the h2 text) must be flush with the page bgcolor - no white space.

thanks! - Val

I just re-did http://www.greensmoothie.com/gs/ so you can see exactly how the h2 box needs to fit in there.

Basically I need http://www.greensmoothie.com/gs/

to look like http://www.greensmoothie.com/test/best.php

best.php is a css/<tables> hybrid, while index.php is pure css.

thanks, Val

Try this, Val:

HTML:


<div class="leaf25">
  <h2>Sprouter Plans</h2>
</div>

CSS:


.leaf25 {
  height: 35px; 
  width: 100%; 
  background: url(gr-pg/leaf25.gif) no-repeat scroll 50% 50%; 
  margin: 20px 0;
}

.leaf25 h2 {
  text-align: center;
  float: right;
  width: 275px;
  font-weight: bold;
  font-size: 18px;
  font-family:Arial,Helvetica,sans-serif;
  color:#F00251;
  background: #e5ffbf;
  margin-right: -40px;
}

This worked for me in testing.

Hi Ralph - thanks million, it’s starting to work. See

http://www.greensmoothie.com/gs/

Few problems:

(1) leaf25.gif needs to be centered horizontally on its side (at 800x600 it’s slap bang against h2 text :slight_smile: and

(2) also centered vertically against h2 text when h2 is long header AND when it’s short header (right now leaf25 is top-aligned)

(3) h2 is ignoring “vertical-align:middle” - is that because it’s a float?

(4) paragraph below must consistently display below h2 when h2 is very long header AND when it’s only short one-word header

(5) in txtbox2 (full-width) I’d like the extra 56px (on right) to be dealt with in a way so that the text of all H2’s in all txtboxes align directly under each other. Right now h2 in txtbox2 is 56px to the right of h2 in txtbox.

I guess I don’t need to clear the h2 float at all because it’s within a containing div?

thank you! - Val

Personally, I’d leave it that way. If you really want it to change, some more complex solution will be required. (Won’t be alble to do it as a background image.)

(2) also centered vertically against h2 text when h2 is long header AND when it’s short header (right now leaf25 is top-aligned)

(3) h2 is ignoring “vertical-align:middle” - is that because it’s a float?

(4) paragraph below must consistently display below h2 when h2 is very long header AND when it’s only short one-word header

Try replacing the css for leafh2.

Change


.leafh2 {
background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 50&#37; 50%;
height:25px;
margin:20px 0;
width:100%;
}

to


.leafh2 {
float: left;
background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 50% 50%;
margin:20px 0;
width:100%;
}

vertical-align:middle only works for inline elements like images. The code above should fix that issue.

(5) in txtbox2 (full-width) I’d like the extra 56px (on right) to be dealt with in a way so that the text of all H2’s in all txtboxes align directly under each other. Right now h2 in txtbox2 is 56px to the right of h2 in txtbox.

You have 56px margins on Content. Do you really want that?

(It certainly did need clearing. I used a float for that. overflow:hidden was not an option, as the h2 extends out of the div via the negative margin.)

Hi Ralph - latest version uploaded to: http://www.greensmoothie.com/gs/

(1) I need gif centered on left - Am interested in the “more complex solution” because if I use a table it’s not a bg image either :slight_smile:

(2) + (4) fixed now with your new leafh2 - thank you!

(3) Still need H2 text (“Long Header” + “Short Header”) centered vertically in middle of box - any way to do this?

(5) >56px margins on Content. Do you really want that?

yes it’s the 53px width of the leafy branch image in .down-rgt + 3px to keep leafy branch slightly away from txtbox.

Any ideas as to how to align text of all H2’s in all txtboxes directly under each other? What I did doesn’t work, viz add the 56px into the width of 300px:

.leafh22 h2 {
float: right;
width: 356px; /content margn/
background: #e5ffbf;
margin-right: -40px;
font: bold 1.2em Helvetica, sans-serif; color: #f00251;
text-align:center; vertical-align:middle;
}

We haven’t cleared the floats? Shall I do this?:

<div class=“leafh2 clearfix”>

thank you! - Val

Argh! Have spent quite a while on this and not found a satisfactory solution. It’s nearly 3am, so better to bed.

Looks like it already is to me. :frowning: What browser are you looking at?

Any ideas as to how to align text of all H2’s in all txtboxes directly under each other?

Yes:


.leafh22 h2 {
	float: right;
	[COLOR="Red"]width: 300px;[/COLOR]
	background: #e5ffbf;
	margin-right: -40px;
	font: bold 1.2em Helvetica, sans-serif; color: #f00251;
	text-align:center; 
        [COLOR="Red"]padding-right: 56px;[/COLOR]
}

We haven’t cleared the floats? Shall I do this?:

We did. We used float on the container, which makes it clear the floated inn h2.

Hopefully someone else can take over. Must to bed!

Where exactly is that…?

(3) Still need H2 text (“Long Header” + “Short Header”) centered vertically in middle of box - any way to do this?

It appaers that it is centered, though that’s only because you use padding to space it out thus it appears centered.

It’s appearing centered for me and Ralph though

(5) >56px margins on Content. Do you really want that?

yes it’s the 53px width of the leafy branch image in .down-rgt + 3px to keep leafy branch slightly away from txtbox.

Any ideas as to how to align text of all H2’s in all txtboxes directly under each other? What I did doesn’t work, viz add the 56px into the width of 300px:

.leafh22 h2 {
float: right;
width: 356px; /content margn/
background: #e5ffbf;
margin-right: -40px;
font: bold 1.2em Helvetica, sans-serif; color: #f00251;
text-align:center; vertical-align:middle;
}

We haven’t cleared the floats? Shall I do this?:

<div class=“leafh2 clearfix”>

thank you! - Val

When you float something, the immediate element after needs to have a clear on it. So in the case here, the <p> would need a clear:both

Don’t just give p{clear:both;} because not EVERY <p> in your page will want a clear:both. Assign a class to those <p> after the floated <h2> and then give that clear:both or clear:right whatever :slight_smile:

Hi - Yes I guess that h2 text is centered vertically :slight_smile:

Ralph - thanks for the paddng-right!

>We used float on the container, which makes it clear the floated inn h2

Sorry I’m not quite following. Are you saying because we used .leafh2 {float: left} that clears the float in .leafh2 h2 {float: right}? So therefore I don’t need <div class=“leafh2 clearfix”>?

Ryan, surely clear:both on the <P> is doing the same as clearfix? I prefer doing it the clearfix way, it’s how Paul taught me to do it.

So my only problem now (besides getting me to understand how the float is being cleared) is (1) to center horizontally the leaf-image to the left of h2 text. Ryan it’s leaf25.gif in .leafh2 - Ralph you were going to mention the more complicated way?

thanks! Val

Yes. A floated container encloses floated content by default. So floating a container is a valid way to clear floated contents. The reason why it works to float the container here is that the block-level content above and below it (that is, the paragraphs) is width 100%.

Ralph you were going to mention the more complicated way?

Yes, but unfortunately I was talking off the top of my head. When I went away and tried it—for a couple of hours!!!—I couldn’t get a satisfactory result that would work cross browser. I almost got there, and I have a solution that would do fine if I knew that the H2 would only ever be one line tall. But if the H2s really are going to get taller, then that’s a problem for my solution. I’m sure Paul and the like could do it.

To be honest, I’m half tempted to say ‘use a table’ in this instance… though I’m ashamed to admit it. :shifty:

Off Topic:

Also, I still don’t feel that the leaf position you want is aesthetically the best idea. To me it looks better in the center of the page.

Both Gary and I gave various solutions for this previously and can be found by searching Vals threads.:slight_smile:

One of the methods proposed was something like this one which is a little complicated which is why a table was suggested.

To be honest, I’m half tempted to say ‘use a table’ in this instance… though I’m ashamed to admit it. :shifty:

If IE6 and 7 need to be supported then a table is still the easiest way. :slight_smile:

I’m glad to hear you say that. Still feel guilty, though. :lol: Thanks for those links, Paul.

Hi Paul - thank you! I mentioned in my post at the top of the page - “I recall Paul giving me wide variety of options to do that image-w-parallel-txt but in the end a table seemed the simplest.”

I still have all your other options saved :slight_smile:

Ralph - thank you for all your hard work! And for pointing out the float works because the para’s above + below are 100% width. Now I understand.

So table it is then - it seems I need to create a special h2 table?

I tried this:

table.h2 {
table-layout: fixed;
width:100%;
background: #e5ffbf;
margin:20px 0 30px 40px; /txtbox padng 40px/
}
table.h2 td {border:none; padding:0}
table.h2.td1 {background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 50% 50%}
table.h2.td2 {width:300px}


<table class=“h2” summary=“h2”>
<tr>
<td class=“td1 wh”><img src=“leaf25.gif” alt=“leaf” width=“30” height=“25” />
</td>
<td><h2 class=“cnt”>Long Header Let’s try long header and see what happens</h2>
</td>
</tr>
</table>

.wh = background:white
.cnt = text-align:center
.txtbox, .txtbox2 {padding: 25px 40px}

You can see it here (the table is the 2nd Long Header):

http://www.greensmoothie.com/gs/

Problems:

(1) table - it will recognize only one margin, either on left or right, but not on both sides

so I can get either the leaf side up against left txtbox edge with:
margin:20px 0 30px -40px; (to negate txtbox padding of 40px)

OR I can get text side up against right txtbox edge with:
margin:20px 0 30px 40px;

But no matter what I define that right-margin to be, it ignores it (so that’s why it’s 0 now).

I need both sides up against txtbox edge on both left and right sides. How do I do that?

(2) leaf on left - it won’t display it as css background in td1. I have to use <img src= in the html.

(3) text on right - it won’t let me define the cell width, ignores width:300px

I actually need that text cell as a percent width, not px, so the relation between leaf + text stays the same at different screen resolutions. But it ignores both width:40% and width:300px!

I hope a table is going to work when I tell wordpress I want an h2. I have no experience in WP :slight_smile:

thank you! - Val

1)The table does recognize left AND right margins but it’s just you don’t notice the right margin probably :). If you are trying to center it just give it margin:0 auto;
You don’t even set a right margin in that code. In margin:0 1px 2px 3px it goes top/right/bottom/left like a clock :slight_smile:

I just looked at the page. You set 100% width and then you try adding margins to it. It will recognize the right margin but if you want it to actually be usable you can lower the left margins value and increase the right :slight_smile:

  1. Put it without the <img> because otherwise we can’t see where you would go wrong :slight_smile:

  2. Where? I looked through the source code and was unable to find a 300px width table cell. Please be more descriptive.

I just looked at the CSS and I found a background image of a leaf and the width of 300px. THis may be your problem :slight_smile:

table.h2.td1 {background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 50% 50%}
table.h2.td2 {width:300px}

There is no space between the table.h2 and the .td1(and .td2)

Try adding a sapce there for both rules :slight_smile:

Hi Paul - I forgot to mention, I was hoping we might be able to avoid using table here, because there’s no cap under the image. That’s why I started this thread and gave Ryan so much work!

Hi Ryan - thank you, putting that space before .td1 works! It now displays the image from css.

(1) Am I correct, is this all I need in the html:

<td class=“td1”></td>

when I have:
table.h2 .td1 {background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 50% 50%}

(2) However it doesn’t work putting a space before .td2. It won’t respond to this:

table.h2 .td2 {width:300px}

I can make that 3000px or 30 px, it ignores it. In addition, what I really need is % not px - that text cell to be 60% of table width.

(3) >You set 100% width and then you try adding margins to it.

The problem is if I delete the 100% width, it displays the table as a small width centered in middle of page.

(4) >It will recognize the right margin but if you want it to actually be usable you can lower the left margins value and increase the right

No that doesn’t work, e.g.

instead of this (where td2 the text cell is correctly aligned against right edge of txtbox):

margin:20px 0 30px 40px;

I can do this (to try get td1 the image cell to correctly align against left edge of txtbox):

margin:20px 100px 30px 40px;

It makes no difference, It stays exactly as if it were 0.

The problem is it’s seeing its 100% width as the same width of the paragraphs, namely 40px on each side (defined in txtbox not in p). So when I move the table left or right (e.g. lft-margin 40px moves it to the right by 40px), it keeps that same width.

I can’t get the table to widen its width to reach the edges of the txtbox on both sides. You can see what I mean in “display block size”

(5) New question: In firebug it looks like h2 here is picking up:
h1, h2, h3 {padding:15px 0 10px}

But in display, it looks like this:
table.h2 td {border:none; padding:0}

is over-riding that h1,h2. I want it to over-ride it. Is the padding 0 round that h2 text in td2?

thanks! - Val

Hi Ryan - delete (2) above. It DOES work when I put space before .td2, I’d just forgotten to do this in the html: <td class=“td2”>. The text cell now displays at 40% width or whatever I want it.

My real big problem remains (4) above.

thanks, Val

Hi Ryan - scratch all the above. I discovered

(1) I can get your neat div to work simply by moving the horiz.position of leaf, make it 20% instead of 50%:

.leafh2 {
float: left;
width: 100%;
background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 20% 50%;
margin:20px 0;
}

(2) NOTHING works in IE6. The div does not work, the table does not work, and the right leafy down branch no longer works either!

Does Paul perhaps know a fix for IE6? Ideally for the div?

The div html is so neat:

<div class=“leafh2”>
<h2>Header</h2></div>

whereas the table html is so much junk, esp. for cell phones in Africa and esp. as it has to display multiple times on one page:

<table class=“h2” summary=“h2”>
<tr>
<td class=“td1”></td>
<td class=“td2 bg”><h2>Header</h2>
</td>
</tr>
</table>

here’s our css - can you talk to IE6 somehow? IE7 is happy. And don’t ask me why the leafy branch moves its position in IE6 only!

.leafh2 {
float: left;
width: 100%;
background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 20% 50%;
margin:20px 0;
}
.leafh2 h2 {
float: right;
width: 50%;
background: #e5ffbf;
margin-right: -40px; /txtbox padng/
font: bold 1.2em Helvetica, sans-serif; color: #f00251;
text-align:center; vertical-align:middle;
}

table.h2 {
table-layout:fixed;
width:100%;
background:white;
margin:20px 0 30px 40px; /txtbox padng/
}
table.h2 h2 {text-align:center}
table.h2 h2.lft {text-align:left}
table.h2 td {border:none; padding:0 15px}
table.h2 .td1 {background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 30% 50%}
table.h2 .td2 {width:50%}

I’ve uploaded the latest to:

http://www.greensmoothie.com/gs/

thank you! - Val