| View previous topic :: View next topic |
| Author |
Message |
zappadelta
Joined: 31 Aug 2004
|
 Posted: Sun Apr 30, 2006 8:53 pm Post subject: Making a fluid blog banner - CSS help |
 |
|
Anyone experienced with CSS, please help me.
On my blog site, I want to make a banner that is fluid, so that is changes to the size of the viewer's monitor. I made a banner with photoshop, so I don't need any help. Just need help making it fluid. I think the only way or the best way is using CSS, but never used it before. Anyone know about this or done this before? |
|
| Back to top |
|
 |
SuperHero
Joined: 10 Dec 2003
Location: Superhero Hideout
|
| Posted: Mon May 01, 2006 12:15 am Post subject: |
|
|
it's not possible to make an image fluid, but you can make the container that holds the image fluid. However the smallest size it would be without breaking your site design would be the size of the image.
You might try posting more specific details including the relevant bit of code you are using. Additionaly why not try support forums for your host, your blog software or even better some CSS help sites where you will find the real coding gurus. |
|
| Back to top |
|
|
cubanlord
Joined: 08 Jul 2005
Location: In Japan!
|
| Posted: Mon May 01, 2006 4:37 pm Post subject: Re: Making a fluid blog banner - CSS help |
|
|
double post...sorry.
Last edited by cubanlord on Mon May 01, 2006 4:38 pm; edited 1 time in total |
|
| Back to top |
|
|
cubanlord
Joined: 08 Jul 2005
Location: In Japan!
|
| Posted: Mon May 01, 2006 4:37 pm Post subject: Re: Making a fluid blog banner - CSS help |
|
|
| zappadelta wrote: |
Anyone experienced with CSS, please help me.
On my blog site, I want to make a banner that is fluid, so that is changes to the size of the viewer's monitor. I made a banner with photoshop, so I don't need any help. Just need help making it fluid. I think the only way or the best way is using CSS, but never used it before. Anyone know about this or done this before? |
I recently had this problem with my website. If the table would exceed the given amount, the images I have would not resize. So what I did was:
Go into the html part of your webpage design. Click on the table you want to be fluid. Right click and chose table properties. On the width and height, choose 100% rather than a designated pixel amount. This will automatically adjust the picture or table to whatever resolution the person viewing your site has.
Worked for me |
|
| Back to top |
|
|
zappadelta
Joined: 31 Aug 2004
|
| Posted: Mon May 01, 2006 5:01 pm Post subject: |
|
|
| Quote: |
Go into the html part of your webpage design. Click on the table you want to be fluid. Right click and chose table properties. On the width and height, choose 100% rather than a designated pixel amount. This will automatically adjust the picture or table to whatever resolution the person viewing your site has.
|
I don't think you can right click and do all those operations in the HTML part. |
|
| Back to top |
|
|
The King of Kwangju
Joined: 10 Feb 2003
Location: New York City
|
| Posted: Mon May 01, 2006 5:40 pm Post subject: |
|
|
You don't need css to do it.
The essence of the technique is that the main image is a static size, and the background behnd it is 1 pixel wide, repeated 1000's of times depending on the size of the browser window, giving the banner the appearance of fluidity. |
|
| Back to top |
|
|
cubanlord
Joined: 08 Jul 2005
Location: In Japan!
|
| Posted: Tue May 02, 2006 2:13 am Post subject: |
|
|
| zappadelta wrote: |
| Quote: |
Go into the html part of your webpage design. Click on the table you want to be fluid. Right click and chose table properties. On the width and height, choose 100% rather than a designated pixel amount. This will automatically adjust the picture or table to whatever resolution the person viewing your site has.
|
I don't think you can right click and do all those operations in the HTML part. |
I'm sorry. I should have been more specific. Please do as follows:
Go into the HTML part. Hit ctrl+F to open the find function. Type in the following: Table Width and hit enter. each value needs to be manually changed to read as 100%. NOT TD WIDTH......table width. |
|
| Back to top |
|
|
cubanlord
Joined: 08 Jul 2005
Location: In Japan!
|
| Posted: Tue May 02, 2006 2:14 am Post subject: |
|
|
| as a matter of fact, I am looking for (or will possibly make) another template for my next site. My family site is old (about 2 years to be exact) and needs a make over. |
|
| Back to top |
|
|
zappadelta
Joined: 31 Aug 2004
|
| Posted: Tue May 02, 2006 4:08 am Post subject: |
|
|
| Quote: |
Go into the HTML part. Hit ctrl+F to open the find function. Type in the following: Table Width and hit enter. each value needs to be manually changed to read as 100%. NOT TD WIDTH......table width.
|
Yea, it's not a table I'm dealing with, it's a fixed size JPEG banner. |
|
| Back to top |
|
|
SuperHero
Joined: 10 Dec 2003
Location: Superhero Hideout
|
| Posted: Tue May 02, 2006 4:40 am Post subject: |
|
|
| zappadelta wrote: |
| Yea, it's not a table I'm dealing with, it's a fixed size JPEG banner. |
you're screwed. |
|
| Back to top |
|
|
zappadelta
Joined: 31 Aug 2004
|
| Posted: Tue May 02, 2006 4:50 am Post subject: |
|
|
| SuperHero wrote: |
| zappadelta wrote: |
| Yea, it's not a table I'm dealing with, it's a fixed size JPEG banner. |
you're screwed. |
Yea, so for the time being, I just decided to make my columns a fixed size. When I have more time to research CSS, I will do that. |
|
| Back to top |
|
|
The King of Kwangju
Joined: 10 Feb 2003
Location: New York City
|
| Posted: Tue May 02, 2006 7:34 am Post subject: |
|
|
Ok I took a quick look at the blog in your sig. You don't need to change the html at all. The file you need to edit is this one:
http://hanguklife.typepad.com/live_laugh_love_sleep_lat/styles.css
first you need to make the whole site fluid, so change this:
.layout-three-column #container
{
width: 902px;
}
Then you need to change the banner <div>
#banner
{
border-bottom: 1px solid #666666;
/* no ie mac \*/ height: 1%; /* ie win 5.5, 6 win */
color: #FFFFFF;
background: #FFFF99;
text-align: center;
font-family: 'Trebuchet MS', Verdana, sans-serif;
} |
|
| Back to top |
|
|
zappadelta
Joined: 31 Aug 2004
|
| Posted: Tue May 02, 2006 1:24 pm Post subject: |
|
|
| The King of Kwangju wrote: |
Ok I took a quick look at the blog in your sig. You don't need to change the html at all. The file you need to edit is this one:
http://hanguklife.typepad.com/live_laugh_love_sleep_lat/styles.css
first you need to make the whole site fluid, so change this:
.layout-three-column #container
{
width: 902px;
}
Then you need to change the banner <div>
#banner
{
border-bottom: 1px solid #666666;
/* no ie mac \*/ height: 1%; /* ie win 5.5, 6 win */
color: #FFFFFF;
background: #FFFF99;
text-align: center;
font-family: 'Trebuchet MS', Verdana, sans-serif;
} |
OK, I will try it out later. Thanks |
|
| Back to top |
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
