How to Code Text in a Box

  • Resolved Tunto

    (@duke7891)


    15 years, 4 months ago

    Hi,
    I was just browsing some blog sites and there i found some interesting thing.Please See the image Below.
    http://funky.freakingkid.com/images/post.png
    I want to know how to code a text in a blue box. I have a blog called freakingkid.com and i want to integrate this useful thing.
    Please Help me to provide a guide how to get this light blue bar.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Josh Leuze

    (@jleuze)

    15 years, 4 months ago

    Hi, you just need some kind of container around your text. Could be a blockquote, paragraph with a class, or a div. Here is an example with a div:

    <div class="feature-box">

	Some text inside the box.

</div>

    Now you just need to add a bit of CSS to your theme’s stylesheet to style that markup:

    .feature-box {
	background-color: #e3f0f2;
	border: solid 1px #66cccc;
	padding: 10px;
}
    Thread Starter Tunto

    (@duke7891)

    15 years, 4 months ago

    Thanks for the reply but i can’t find the div class you mentioned in your reply.

    I totally understood your CSS part in which i have to add this code.

    .feature-box {
	background-color: #e3f0f2;
	border: solid 1px #66cccc;
	padding: 10px;
}

    Josh Leuze

    (@jleuze)

    15 years, 4 months ago

    You need to write that div code wherever you want the box to appear.

    Thread Starter Tunto

    (@duke7891)

    15 years, 4 months ago

    Thanks so much JLeuze I have applied the given code by you and it worked like a charm.Here’s the Image Below.
    http://funky.freakingkid.com/images/block1.png

    One more thing wanna ask is how to make a rounded corner and you can see the text inside the box is not well aligned and the text showing is only italic.I want a standard text.See the Gap on the upper and the bottom, I want to put the text on the center of the blockquote.
    Please see the refer image.
    http://funky.freakingkid.com/images/post.png

    David Sader

    (@dsader)

    15 years, 4 months ago

    http://www.w3schools.com/css3/css3_borders.asp

    in your style.css add the following to your blockquote element

    border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;

    in your screen.css remove font-style: italic; from the blockquote element

    Thread Starter Tunto

    (@duke7891)

    15 years, 4 months ago

    Thanks David for a support I have added/modify your code in Style.css and screen.css but all i get is a font style which is now standard(Solved).Border and Text align still the same even i hard refreshed it. See the Image Below.
    http://funky.freakingkid.com/images/untitlrfr.png

    Here is the full code:

    blockquote {
	background-color: #e3f0f2;
	border: solid 1px #66cccc;
	padding: 10px;
	border-bottom-left-radius: 25px 25px;
    border-bottom-right-radius: 25px 25px;
    border-top-left-radius: 25px 25px;
    border-top-right-radius: 25px 25px;
	}

    Josh Leuze

    (@jleuze)

    15 years, 4 months ago

    Different browsers need different rules for rounded corners and some old browsers don’t support them at all.

    Thread Starter Tunto

    (@duke7891)

    15 years, 4 months ago

    Please Help me I don’t know which code i have to apply for a rounded corner.

    David Provided me the below code for a rounded corner,which didn’t work.

    border-bottom-left-radius: 25px 25px;
    border-bottom-right-radius: 25px 25px;
    border-top-left-radius: 25px 25px;
    border-top-right-radius: 25px 25px;

    Thread Starter Tunto

    (@duke7891)

    15 years, 4 months ago

    The problem is now Solved.

    Thanks for the support.

    Josh Leuze

    (@jleuze)

    15 years, 4 months ago

    No problem, good to hear you got it fixed.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘How to Code Text in a Box’ is closed to new replies.