How would you code this?

HTML & CSS
1

HI all,
How would you code this?

Note: The image of the beef is a background image since it’s decorative in nature. The brown block behind the heading text is a graphic. Also, the final site will be responsive. Here’s a preview of my bootstrap template that I plan to work with.

2

It’s better for you to have a go at this and then ask for help if you get stuck. What have you tried so far? What are you thoughts on how to code it?

3

The brown a div with overflow hidden and some padding. Float the image left. Give the heading a negative margin to drag it left. The text is in a p. Done.

4

I did a bit of work on this and now need some assistance with getting the h3 tag to display like the graphical mockup I previewed in the above posts.

Here’s what I’ve done so far.

Here’s my code:


.beef {
	background-image: url(../img/beef.jpg);
	background-position:left;
	background-repeat:no-repeat;	
}

.beef p {
	color: #b1a17e;
	padding-left: 9em;
	line-height: 120%;	
}

.beef h3 {
	color: #fdf4ce;
	background-image:url(../img/board.png);
	background-position: right;
	background-repeat: repeat-x;
	margin-left: 3.2em;
}

Two things I need assistance with:

1.) How to close the gap between the 2 <h3> tags
2.) How to get the <h3> background image to stop at the end of the H3 text and not all the way to the right. How to apply background color until we need to apply image to the right.

5

I made an update and now just need to figure out how to get the <h3> tag to display like the preview graphic above.

Is it ok to do something like this?



<h3>The<br>
Title Here</h3>

but it seems more difficult to style.

6

The issue appears to involve

h3 {display:inline}

Delete {display:inline} and the <h3> will render more like your image. Container space is an issue at less than wide screen widths, though.

Good luck.

PS: your page centers 10px to the left of center (if that matters).

7

Yes, I tried removing display:inline before posting this thread and it ends up setting the <h3> tag as a block, so the background color is then extended all the way to the edge of the container. I need to figure out how to extend the background color only about 5px to the right of the last character of the <h3> tag like the graphic I had previously uploaded. The easy way out would be to style each line as:


<h3>The</h3>
<h3>Title Here</h3>

but that doesn’t seem semantic.

8

Sorry, I didn’t notice the difference in the distribution of the background color. Oh, well.

You could put span tags around the lines, something like this:


<h3><span>OUR</span><br> <span>KOBE-STYLE BEEF</span></h3>



.beef h3 {
    color: #FDF4CE;
    line-height: 1.1em;
}
.beef h3 span {
    background-color: #633D2E;
    display: inline-block;
    padding: 2px 4px;
}
9

That worked! NOw I can move on…thanks!

10

You’re welcome.

Cheers.

11

Ron (or anyone reading),
Here’s my latest: http://ogmda.com/test/

Notice how the photo for the ABOUT THE STEAKHOUSE section is chopped off on the bottom and top. How do I get it so the entire photo shows? I tried looking up the CSS height property but I am still confused. Can you help point me in the right direction?

12

Under what conditions is the image being chopped? In what browser, etc?

It looks fine to me until the width of the viewport is reduced to ~750px and the layout changes from columns to rows.

If that is the problem you are referring to, then the image image is behaving like any ordinary background image should. It is being clipped as the height of its container becomes shorter than the height of the image. You can give the container a minimum height that matches the height of the image if you wish.


.beef {
    [color=blue]min-height:208px;[/color]    /* add me */
}