PDA

View Full Version : Please help me, width on text only


fabian9931
11-02-2009, 06:14 AM
I have a background png file that is 650 pixles wide but 100 pixles on the left and right (200 total) are totally transparent, center has that brown green color. I have that png background file as my background for my table. My table is 650 width. But when I type text It obviously goes to the ends of the table making my text not visable at the edge (the 100 pixles). How can I set the text to stay 450 wide in a 650 wide table? go here to see my html please. www.avamariestudios.com/homegoodonetest.html (http://www.avamariestudios.com/homegoodonetest.html)

The reason I want to do this is because Im trying to achieve this look www.webdots.in (http://www.webdots.in) text centered with background but images go over and wider then background.

Here is my table html
<table width="650" background="backgroundcontentdark.png" align="center">
<tr> <td align="center"><font color="#FFFFFF"><Welcome to Ava Marie Studios.<br /> Photography is an art of memories, that touches the hearts and minds of many. An art that captures the most precious moments to last for a long long time. Ava Marie Studios will capture those memories which visually are missed within a split second. I seek to achieve creative vision to meet the needs of the clients. Thank you for visiting my Web Site.<br />

Photographer/Owner: Fabian Malovini</font>
<img src="self.jpg" /><br /><br /><br /><br />More text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Mote Text<br /><br /><br /><br /><br /><br /><br /><br /><br />More Text
</td></tr></table>

Corrosive
11-02-2009, 07:14 AM
Why aren't you using divs and then adjusting the padding so the text stays within the box? You seem to be over complicating a very simple design.

fabian9931
11-02-2009, 01:09 PM
sorry im not familiar with div padding, I am currently googling it to see if i can get a better idea.

fabian9931
11-02-2009, 01:58 PM
Why aren't you using divs and then adjusting the padding so the text stays within the box? You seem to be over complicating a very simple design.

Hey Corrosive,

Are you saying to add for ex. this
<div style="padding:0px 200px 0px 200px">PUT TEXT IN HERE</div>

this way it gives me 200 px spacing on left and right? its right next to the text in the html

<table width="650" background="backgroundcontentdark.png" align="center">
<tr> <td align="center"><font color="#FFFFFF">]<div style="padding:0px 200px 0px 200px">Welcome to Ava Marie Studios.<br /> Photography is an art of memories, that touches the hearts and minds of many. An art that captures the most precious moments to last for a long long time. Ava Marie Studios will capture those memories which visually are missed within a split second. I seek to achieve creative vision to meet the needs of the clients. Thank you for visiting my Web Site.<br />

Photographer/Owner: Fabian Malovini</div></font>
<img src="self.jpg" /><br /><br /><br /><br />More text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Mote Text<br /><br /><br /><br /><br /><br /><br /><br /><br />More Text
</td></tr></table>

domedia
11-02-2009, 04:19 PM
What Corrosive is saying is that if you used a regular web dev approach with web standards, you wouldn't have to deal with all that messy code.

Here's an example of how you're code can be written with web standard, albeit using inline styles so you can see all the code in one place.

<div style="width: 650px; background: url(backgroundcontentdark.png)">
<div style="margin: 0 200px;">
<p>Welcome to Ava Marie Studios.<br /> Photography is an art of memories, that touches the hearts and minds of many. An art that captures the most precious moments to last for a long long time. Ava Marie Studios will capture those memories which visually are missed within a split second. I seek to achieve creative vision to meet the needs of the clients. Thank you for visiting my Web Site.</p>
<p>Photographer/Owner: Fabian Malovini</p>
<img src="self.jpg">
<p>More Text</p>
</div>
</div>

It would take some training on your part to get up to speed on web design coding, but once you're there you can do anything 8)

fabian9931
11-02-2009, 04:45 PM
What Corrosive is saying iis that if you used a regular web dev approach witrh web standards, you wouldn't have to deal with all that messy code.

Here's an example of how you're code can be written with web standard, albeit using inline styles so you can see all the code in one place.

<div style="width: 650px; background: url(backgroundcontentdark.png)">
<div style="margin: 0 200px;">
<p>Welcome to Ava Marie Studios.<br /> Photography is an art of memories, that touches the hearts and minds of many. An art that captures the most precious moments to last for a long long time. Ava Marie Studios will capture those memories which visually are missed within a split second. I seek to achieve creative vision to meet the needs of the clients. Thank you for visiting my Web Site.</p>
<p>Photographer/Owner: Fabian Malovini</p>
<img src="self.jpg">
<p>More Text</p>
</div>
</div>

It would take some training on your part to get up to speed on web design coding, but once you're there you can do anything 8)

Nice man, thanks for the reply, I will play with it when i get home. At my day job that isnt going to last long cause of this economy but anyway!

So explain this if you can. You made a div with a width of 650 thats centered right? I don't see the code to center it. Then added the background png file which was 650 wide made in photoshop and the 100 pixels on the left and right are transparent (200 total). Then the div style was made for margins, 0 is verticle? and the 200 is width? Then the P code is to give the text the paragraph look right? close div close div. Just trying to understand it more. Thanks again for the post

Corrosive
11-02-2009, 05:34 PM
I like a challenge...

http://corrosiveonline.co.uk/_projects/fabian.htm

Your design in six divs :)

fabian9931
11-02-2009, 05:43 PM
I like a challenge...

http://corrosiveonline.co.uk/_projects/fabian.htm

Your design in six divs :)

nice corrosive, what language is that? also after the picture at the bottom with the white background pic. that one, after that i see the background underneath it. That brown green background is supposed to be smooth continously. Know what I mean?

Corrosive
11-02-2009, 05:55 PM
nice corrosive, what language is that? also after the picture at the bottom with the white background pic. that one, after that i see the background underneath it. That brown green background is supposed to be smooth continously. Know what I mean?

It is HTML and CSS. The CSS styles are in the head of the document and I'd recommend moving these to a separate style sheet.

Gap is an IE issue (6 & 7 as far as I can see). Check in a compliant browser and it is fine. You can fix this as part of learning about CSS ;)

domedia
11-02-2009, 05:56 PM
So explain this if you can. You made a div with a width of 650 thats centered right? I don't see the code to center it. Then added the background png file which was 650 wide made in photoshop and the 100 pixels on the left and right are transparent (200 total). Then the div style was made for margins, 0 is verticle? and the 200 is width? Then the P code is to give the text the paragraph look right? close div close div. Just trying to understand it more. Thanks again for the post
It's just too much to explain I think. You really need to sit down and study CSS a little and get a good grip on it.

Corrosive
11-02-2009, 06:02 PM
You really need to sit down and study CSS a little and get a good grip on it.

And take the bit that says you offer website design off your site for the time being ;)

fabian9931
11-02-2009, 06:22 PM
Doesnt the majority of the internet users use IE? or no?

Corrosive
11-02-2009, 06:28 PM
Doesnt the majority of the internet users use IE? or no?

Yes, I think you are correct but it doesn't make it a web standards compliant browser.

Those PNGs you have used won't work in IE6 anyway. It won't handle the transparency. Check your original design in IE6 and you'll see what I mean.

fabian9931
11-02-2009, 06:36 PM
Yes, I think you are correct but it doesn't make it a web standards compliant browser.

Those PNGs you have used won't work in IE6 anyway. It won't handle the transparency. Check your original design in IE6 and you'll see what I mean.

Thanks for letting me know about that, So what would be the alternate route instead of png?

Corrosive
11-02-2009, 06:47 PM
Well, there are some IE6 png fixes available on the web, you can Google those. Otherwise compromise, use gifs or rethink the design a bit.