Page 1 of 1
How to place 2 image banners next to each other ?
Posted: 30 Jun 2010, 18:58
by GHOSTWRiTAZ
Hey Guys,
Need some of yours expertise advise, hope that someone can help.
What is the right code to have 2 image banners next to eachother ?
This is the code below :
Code: Select all
html, body {
margin: 0;
padding: 0;
text-align: center;
height: 100%;
background: #252525;
font-size: 100%;
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #7C7C7C;
font-size: 10px;
}
#container {
height: 100%;
background: #1C1C1C;
width: 97%;
text-align: left;
border: 0;
padding: 0;
margin: 0 auto;
min-width: 900px;
}
#banner {
background: #090909 url('{T_THEME_PATH}/images/header.png') top center no-repeat;
height: 250px;
text-align: center;
}
#header {
background: url('{T_THEME_PATH}/images/top_bg.jpg') top center repeat;
height: 134px;
text-align: center;
}
What I want is to place 2 banners next to each other so I'll have a header.png and header2.png !
Code: Select all
#banner {
background: #090909 url('{T_THEME_PATH}/images/header.png') top center no-repeat;
height: 250px;
text-align: center;
Using v3.0.7-PL1
Best Regards,
Re: How to place 2 image banners next to each other ?
Posted: 30 Jun 2010, 19:10
by cisco007
if you are talking about in the header take a look at this maybe this might help!
http://www.phpbb.com/kb/article/add-an- ... 5e7843935a
Re: How to place 2 image banners next to each other ?
Posted: 30 Jun 2010, 19:21
by GHOSTWRiTAZ
Hey Cisco, tnx for your quick reply m8, appreciate this.
Guess the knowledge tutorial is talking about something else :
Tried this but without any luck :
Code: Select all
#banner {
background: #090909 url('{T_THEME_PATH}/images/header.png') top left no-repeat;
background: #090909 url('{T_THEME_PATH}/images/header2.png') top center no-repeat;
height: 250px;
text-align: center;
Example at this site banner looks like this :
and I want 2 banner/images next to each other so the result would look like this :
hope you can help me out m8, tnx..
Re: How to place 2 image banners next to each other ?
Posted: 30 Jun 2010, 19:25
by cisco007
that is what that link that i gave you to read does, read the whole thing carefully! Did you read it? did you try it?
what were the results!?
Re: How to place 2 image banners next to each other ?
Posted: 30 Jun 2010, 20:18
by GHOSTWRiTAZ
cisco007 » 30 Jun 2010, 19:25 wrote:that is what that link that i gave you to read does, read the whole thing carefully! Did you read it? did you try it?
what were the results!?
Yes m8, tried it and no results at all
Re: How to place 2 image banners next to each other ?
Posted: 01 Jul 2010, 00:14
by KukY13
Try this:
Code: Select all
#banner{background: url(banner1.png) left no-repeat, url(banner2.png) right no-repeat;}
Re: How to place 2 image banners next to each other ?
Posted: 01 Jul 2010, 11:53
by GHOSTWRiTAZ
Thanks KukY13, but unfortunally without any luck
Re: How to place 2 image banners next to each other ?
Posted: 01 Jul 2010, 14:30
by KukY13
Well, CSS 2 doesn't support multiple background images, and in CSS 3 it
is done that way.
So, curently I see no other way of doing this but by placing another <div> inside the main one:
CSS:
Code: Select all
#banner1{
width:100%;
heigth:200px;
margin: 0px;
padding: 0px;
background: url(banner1.png) left no-repeat;}
#banner2{
width:50%;
heigth:200px;
margin: 0px;
padding: 0px;
background: url(banner2.png) right no-repeat;
float: rigth;}
Code: Select all
<div id="banner1"><div id="banner2"></div></div>
Hmm... I have a feeling I made an incredibly stupid mistake up there and I left something out...
Re: How to place 2 image banners next to each other ?
Posted: 01 Jul 2010, 14:42
by Steve
why not just use a table?
example:
Code: Select all
<table>
<tr>
<td>image1 here</td>
<td>another image here!</td>
<td>and another image ?</td>
</tr>
</table>