...

View Full Version : CSS Help! Image repeat.



Rikusaki
04-30-2009, 04:21 PM
I have this code in my stylesheet.css:

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:

http://i42.tinypic.com/1z687cm.jpg

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?

_Aerospace_Eng_
04-30-2009, 04:30 PM
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.

Rikusaki
04-30-2009, 05:52 PM
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? :confused:

_Aerospace_Eng_
04-30-2009, 08:34 PM
First post your current html for the caption.

Rikusaki
05-01-2009, 01:19 AM
First post your current html for the caption.

Here, I think this is it.




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

abduraooft
05-01-2009, 12:10 PM
Here, I think this is it.




{$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 (http://www.hotdesign.com/seybold/)?

Rikusaki
05-01-2009, 04:04 PM
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 (http://www.hotdesign.com/seybold/)?

Oh, okay here:

<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.

_Aerospace_Eng_
05-02-2009, 12:47 AM
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;
}

Rikusaki
05-02-2009, 02:54 AM
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:


/* 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:

http://i41.tinypic.com/30av1q9.png

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

http://rikusaki.com/forums/

_Aerospace_Eng_
05-02-2009, 10:32 AM
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

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

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.

<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>

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;
}

Rikusaki
05-02-2009, 06:54 PM
By the way, I'm using PHPBB to change this, so how would I do the second to last code with this?



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

_Aerospace_Eng_
05-02-2009, 07:10 PM
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.

Rikusaki
05-02-2009, 07:30 PM
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:


<!-- 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? :confused:

_Aerospace_Eng_
05-03-2009, 06:36 AM
Its not hard. Just read the 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>' -->

Rikusaki
05-03-2009, 07:21 PM
Sorry, I'm new at this stuff, lol. :p Did I do something wrong? :confused:

Here is the CSS:

/* 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:
http://i41.tinypic.com/5mfygm.png
The text moved down and all of the captions are on the left side.

_Aerospace_Eng_
05-03-2009, 07:32 PM
Use this for the CSS

div.caption {
height:27px;
}
.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:20px;
}
div.cap-content {
margin:0 20px 0 21px;

}
div.cap-content h4 {
background: url(images/hdr_mid.gif) top repeat-x;
line-height:27px;
height:27px;
}
Then use this for the caption code

<!-- DEFINE $CA_CAP_START = '<div class="caption"><div class="cap-left"></div><div class="cap-right"></div><div class="cap-content">' -->
<!-- DEFINE $CA_CAP_END = '</div></div>' -->

Rikusaki
05-03-2009, 09:01 PM
Thank you so much! :thumbsup: It's perfect now! (http://rikusaki.com/forums/)
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum