SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How would you code this?

    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.

    how.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by skunker View Post
    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.

    how.jpg
    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. #4
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    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. #5
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code:
    <h3>The<br>
    Title Here</h3>
    but it seems more difficult to style.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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. #7
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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).
    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:

    Code:
    <h3>The</h3>
    <h3>Title Here</h3>
    but that doesn't seem semantic.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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:

    Code:
    <h3><span>OUR</span><br> <span>KOBE-STYLE BEEF</span></h3>
    Code:
    .beef h3 {
        color: #FDF4CE;
        line-height: 1.1em;
    }
    .beef h3 span {
        background-color: #633D2E;
        display: inline-block;
        padding: 2px 4px;
    }

  9. #9
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked! NOw I can move on...thanks!

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    You're welcome.

    Cheers.

  11. #11
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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.
    Code:
    .beef {
        min-height:208px;    /* add me */
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •