Design Your Pages

Make a Box using inline style code <div style="width:220px;padding:10px;border:5px solid gray; margin:0px;"> The line above is 250px wide.<b...

by Mohann Krish
Mohann Krish Advanced  
Make a Box using inline style code


The line above is 250px wide.
The total width of this element is also 250px.
Jul 5th 2011 00:15

Sponsor Ads


Comments

Philippe Moisan Magnate II   Tutorial videos, sci-fi writer
I will try it ASAP, but not tonight ( this morning? 1h17am here )
Jul 5th 2011 00:17   
Mohann Krish Advanced   
Use TryItYourSelfEditor on W3Schools Com. Just remove all other items except html, head and body tags (both opening and closing) in any example given there and try these for practice.
Jul 5th 2011 00:21   
Mohann Krish Advanced   
Coming to the topic: starting from the inner-most of the box-
1. Content: where text and/or images appear
2. Padding: space around the content
3. Border: goes around the padding and content
4. Margin: space around the border
Jul 5th 2011 08:00   
Philippe Moisan Magnate II   Tutorial videos, sci-fi writer
good idea to come back to the topic, Mohann, I think I will delete my comments, they are a distraction from your info
Jul 5th 2011 10:56   
Mohann Krish Advanced   
This simple one line code helps in designing navbar, text ad, box showing important tip for attention and above all, you can make a banner!
Jul 5th 2011 11:21   
Philippe Moisan Magnate II   Tutorial videos, sci-fi writer
man, this info deserves to be seen by as many people as possible, I will post it on my blog, saying where and from who it comes from, I will also launch a campaign for the group
Jul 5th 2011 11:29   
Neville Dinning Professional   Independent Consultant
I found it! The snippet has been used on my blog. Thanks again Mohann.
Jul 5th 2011 17:30   
Neville Dinning Professional   Independent Consultant
Hey I just discovered that this comment box takes Inline code. Tried to post button code. Here's the result. :)
<div style="width:220px;padding:10px;border:5px solid gray;
margin:0px;background:yellow;" align="center">
<a href="http://dotrim.com">CSS Posts at Dotrim</a></div>
Jul 6th 2011 09:31   
Neville Dinning Professional   Independent Consultant
I wonder how long before that feature is sidelined?
Jul 6th 2011 09:33   
Philippe Moisan Magnate II   Tutorial videos, sci-fi writer
It all depends how members will use it. If it's abused and make dicsussions look ugly... But besides you, me and Mohann, nobody will use it LOL

btw, check the photo!loving group, Jasna put beautiful pictures of flowers in a discussion, and I think she posted it after new changes were in place
Jul 6th 2011 10:31   
Neville Dinning Professional   Independent Consultant
<div style="width:320px;padding:10px;border:5px solid blue;
margin:0px;background:#FFFFF0">
While it still works I might as well use it<br />
I checked the photo!loving group. Those photos are in the discussion starter, but Mohann's code snippet didn't activate in this discussion. Strange!</div>
Jul 6th 2011 18:17   
Philippe Moisan Magnate II   Tutorial videos, sci-fi writer
Maybe we could send a PM to Jasna or WIncer to ask how it was done ?
Jul 6th 2011 20:43   
Mohann Krish Advanced   
<p style="background-color:#00ffff;width:462px;height:54px;padding:2px;border:1px solid blue;font:bold 16px arial;text-align:center;color:red;">Grow Your Idea<br/><i>Turn Your Idea into a Product</i><br/>Let the Product talk about Your Business! <br/></p>
Jul 6th 2011 20:49   
Philippe Moisan Magnate II   Tutorial videos, sci-fi writer
Is this a 468x60 banner? the size looks right, Mohann. Tell us how many people you recruit with it :)
Jul 6th 2011 20:54   
Mohann Krish Advanced   
@Nev: I saw that in photo!loving group. Remove span tags and close the img tag properly. @Ohil: This is an example for a CSS banner 468 X 60. Next I will give a banner with photot :
<p style="background:#00ffff url('http://www.apsense.com/m_photo/profile/20110706/1309963453803972.jpg') no-repeat left top;width:462px;height:54px;padding:2px;border:1px solid blue;font:bold 16px arial;text-align:center;color:red;">Grow Your Idea<br/><i>Turn Your Idea into a Product</i><br/>Let the Product talk about Your Business!<br/></p>
Jul 6th 2011 21:02   
Mohann Krish Advanced   
Small photo in a banner:

<p style="background-size:60px 60px;background:#00ffff url('http://www.apsense.com/m_photo/profile/20110706/1309963453803972.jpg') no-repeat left top;width:462px;height:54px;padding:2px;border:1px solid blue;font:bold 16px arial;text-align:center;color:red;">Grow Your Idea<br/><i>Turn Your Idea into a Product</i><br/>Let the Product talk about Your Business!<br/></p>
Jul 6th 2011 21:17   
Mohann Krish Advanced   
Clickable Banner with in-line CSS:

<a href="http://www.apsense.com/user/kemengr" title="Social Business Network"><p style="margin:0px;background:#00ffff url('http://www.apsense.com/m_photo/profile/20100911/1284194957557666.jpg') no-repeat left top;width:462px;height:54px;padding:2px;border:1px solid blue;font:bold 16px arial;text-align:center;color:red;background-size:60px 60px;">Grow Your Idea<br/><i>Turn Your Idea into a Product</i><br/>Let the Product talk about Your Business!<br/></p></a>
Jul 6th 2011 21:19   
Neville Dinning Professional   Independent Consultant
Thanks Mohann, That explains a couple of things.
Jul 6th 2011 21:29   
Mohann Krish Advanced   
I tried the foto word concept here:
<div style="width:250px;height:250px;padding:4px;border:1px solid #000000;background-image:url('http://farm7.static.flickr.com/6045/5911303101_37cc603d41_m.jpg');background-size:240px 240px;"></div>
Jul 7th 2011 04:41   
Mohann Krish Advanced   
Of course, Selya's work is far superior!
Jul 7th 2011 07:04   
You are not yet a member of this group.