Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    CSS Help! Image repeat.

    I have this code in my stylesheet.css:
    Code:
    caption {
       background: url(images/hdr_mid.gif) top repeat-x;
    
       white-space: nowrap;
       height: 27px;
       text-align: center;
    }
    .cap-left {
       background: url(images/hdr_left.gif) top left no-repeat;
    height: 27px;
    
    }
    .cap-right {
       background: url(images/hdr_right.gif) top right no-repeat;
       padding-top: 8px;
       height: 27px;
    }
    The left and right caps have a curved edge with a transparent background.

    The problem is that the hdr_mid.gif continues all the way to the end of both sides so it looks like this:



    It continues BEHIND the left and right caps and you can see it through them!
    (Circled in red)

    Is there a way to restrict the image repeat?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You will need to have a middle part to your caption that has a left and right margin equal to the width of those transparent images. Don't set a background on caption, instead set that background on the middle part of your caption.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    You will need to have a middle part to your caption that has a left and right margin equal to the width of those transparent images. Don't set a background on caption, instead set that background on the middle part of your caption.
    Sorry, I don't quite understand what I should do here.

    How would I write the CSS for that?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    First post your current html for the caption.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    First post your current html for the caption.
    Here, I think this is it.

    Code:
    {$CA_BLOCK_START}
    <table class="tablebg" width="100%" cellspacing="{$CA_SPACING}">
    {$CA_CAP_START}{content goes here}{$CA_CAP_END}

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by Rikusaki View Post
    Here, I think this is it.

    Code:
    {$CA_BLOCK_START}
    <table class="tablebg" width="100%" cellspacing="{$CA_SPACING}">
    {$CA_CAP_START}{content goes here}{$CA_CAP_END}
    That's not pure html and we can't parse that code to generate it's equivalent code. Use your browser's "view source" option to see the generated html and paste it here.

    btw, do you know why table for layout is very bad?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Rikusaki (05-02-2009)

  • #7
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    That's not pure html and we can't parse that code to generate it's equivalent code. Use your browser's "view source" option to see the generated html and paste it here.

    btw, do you know why table for layout is very bad?
    Oh, okay here:
    Code:
     <caption><div class="cap-left"><div class="cap-right">&nbsp;<h4><a href="./viewforum.php?f=1">General Discussion</a></h4>&nbsp;</div></div></caption>
    I didn't know that about tables. The only page that uses a lot of them is my home page that I made with Dreamweaver.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    caption {
    
       white-space: nowrap;
       height: 27px;
       text-align: center;
    }
    caption h4 {
       background: url(images/hdr_mid.gif) top repeat-x;
       margin-left: #px; /* equal to the width of your left image */
    margin-right:#px; /* equal to the width of your right image */
    }
    .cap-left {
       background: url(images/hdr_left.gif) top left no-repeat;
    height: 27px;
    
    }
    .cap-right {
       background: url(images/hdr_right.gif) top right no-repeat;
       padding-top: 8px;
       height: 27px;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Rikusaki (05-02-2009)

  • #9
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks, but it didn't really work out.

    Probably my fault for not showing you the entire CSS code, lol.

    Here is the code with the ones you just gave me:

    Code:
    /* Table header */
    caption {
    
       white-space: nowrap;
       height: 27px;
       text-align: center;
    }
    caption h4 {
       background: url(images/hdr_mid.gif) top repeat-x;
       margin-left: 21px; /* equal to the width of your left image */
    margin-right:21px; /* equal to the width of your right image */
    }
    .cap-left {
       background: url(images/hdr_left.gif) top left no-repeat;
    height: 27px;
    
    }
    .cap-right {
       background: url(images/hdr_right.gif) top right no-repeat;
       padding-top: 8px;
       height: 27px;
    }
    caption, caption h1, caption h2, caption h4, caption h3, caption span {
       font-size: 10px;
            margin-left: 2px;
            text-align: left;
       font-weight: bold;
       color: #000000;
    }
    caption h1, caption h2, caption h3, caption h4, caption span {
       display: inline;
    }
    caption a, caption a:visited {
       color: #000000;
       text-decoration: underline;
    }
    caption a:hover {
       color: #000000;
       text-decoration: underline;
    }
    And this was the result:



    The middle section isn't showing up anymore and it looks like it only gave the background to the text!

    http://rikusaki.com/forums/
    Last edited by Rikusaki; 05-02-2009 at 01:55 AM. Reason: Add site link.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Thanks, but it didn't really work out.

    Probably my fault for not showing you the entire CSS code, lol.
    Yep it was your fault.

    Change this
    Code:
    caption, caption h1, caption h2, caption h4, caption h3, caption span {
    color:#000000;
    font-size:10px;
    font-weight:bold;
    margin-left:2px;
    text-align:left;
    }
    to this
    Code:
    caption h1, caption h2, caption h3, caption span {
       display: inline;
    }
    caption h4 {
    height:27px;
    margin:0 21px;
    padding:0;
    }
    Also get rid of the &nbsp; stuff. Also why do you put your caption within your table? It should start just before your table. Also your code is invalid. A caption can't contain block level elements. Something like this might be better.
    Code:
    <h4 class="caption"><div class="cap-left"><div class="cap-right"></div><div class="cap-content"><a href="./viewforum.php?f=1">General Discussion</a></div></h4>
    Code:
    h4.caption {
       display:block;
    }
    .cap-left {
       background: url(images/hdr_left.gif) top left no-repeat;
    height: 27px;
    float:left;
    width:21px;
    }
    .cap-right {
       background: url(images/hdr_right.gif) top right no-repeat;
       padding-top: 8px;
       height: 27px;
    float:right;
    width:21px;
    }
    .cap-content {
    margin:0 21px;
    }
    Last edited by _Aerospace_Eng_; 05-02-2009 at 09:38 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Rikusaki (05-02-2009)

  • #11
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    By the way, I'm using PHPBB to change this, so how would I do the second to last code with this?

    Code:
    {$CA_BLOCK_START}
    <table class="tablebg" width="100%" cellspacing="{$CA_SPACING}">
    {$CA_CAP_START}content goes here{$CA_CAP_END}

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You would have to find where those templates were defined. Do a search for $CA_BLOCK_START in all of your files or $CA_CAP_START and you should find those templates.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Rikusaki (05-02-2009)

  • #13
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    You would have to find where those templates were defined. Do a search for $CA_BLOCK_START in all of your files or $CA_CAP_START and you should find those templates.
    Alright. I found it:

    Code:
    <!-- IF $CA_COMMENTS -->
    $CA_SPACING - cellspacing for all tables
    $CA_WIDTH - page width. examples: '100%', '800'
    <!-- ENDIF -->
    
    <!-- DEFINE $CA_WIDTH = '800' -->
    <!-- DEFINE $CA_SPACING = '0' -->
    
    <!-- DEFINE $CA_CAP_START = '<caption><div class="cap-left"><div class="cap-right">&nbsp;' -->
    <!-- DEFINE $CA_CAP_END = '&nbsp;</div></div></caption>' -->
    <!-- DEFINE $CA_BLOCK_START = '' -->
    <!-- DEFINE $CA_BLOCK_END = '' -->
    Where would I put your code?

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its not hard. Just read the code.
    Code:
    <!-- DEFINE $CA_CAP_START = '<h4 class="caption"><div class="cap-left"><div class="cap-right"></div><div class="cap-content">' -->
    <!-- DEFINE $CA_CAP_END = '</div></h4>' -->
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Rikusaki (05-03-2009)

  • #15
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Sorry, I'm new at this stuff, lol. Did I do something wrong?

    Here is the CSS:
    Code:
    /* Table header */
    caption {
    
       white-space: nowrap;
       height: 27px;
       text-align: center;
    }
    
    
    h4.caption {
       display:block;
    }
    .cap-left {
       background: url(images/hdr_left.gif) top left no-repeat;
    height: 27px;
    float:left;
    width:21px;
    }
    .cap-right {
       background: url(images/hdr_right.gif) top right no-repeat;
       padding-top: 8px;
       height: 27px;
    float:right;
    width:21px;
    }
    .cap-content {
    margin:0 21px;
    }
    
    
    caption h1, caption h2, caption h3, caption span {
       display: inline;
    }
    caption h4 {
    height:27px;
    margin:0 21px;
    padding:0;
    }
    
    
    caption h1, caption h2, caption h3, caption h4, caption span {
       display: inline;
    }
    caption a, caption a:visited {
       color: #000000;
       text-decoration: underline;
    }
    caption a:hover {
       color: #000000;
       text-decoration: underline;
    }
    This was the result:

    The text moved down and all of the captions are on the left side.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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