Div text box css

WordPress – Simple CSS Text Boxes In Posts

In this article, I outline how to create simple text boxes using both inline and external CSS and how to set up a quicktag button so you can use them with the minimum of effort. You’ll be surprised at how easy it is to do!

I often have information that I want to include in a post, without it being part of the main body of the article. For example, additional information that may be useful to readers, but that disrupts the flow of the post.

The ideal way to include this sort of information is in a text box with formatting that sets it apart.

The information is available, but the formatting separates it from the main body of the post in the reader’s mind.

Books and websites often use this technique, so why not inside posts? It’s possible to use blockquotes for this purpose, but I wanted to keep that for quoting other people, so I decided to create text boxes using CSS.

If you’re interested in text boxes with rounded corners, this is a little more difficult (but so much cooler). I don’t cover that in this article, as it would make it too long, but you can read about it in my Rounded Text Boxes in Posts article.

Using Inline CSS

It is simple to use inline CSS to create a box around a paragraph.

First, use the default WordPress Editor (ie the Visual tab page) to write the entire post, including the text you want displayed in a text box. When you are finished, go to the Code tab page and locate the paragraph to go in the box. Add:

immediately before the text and

immediately after it. Save this and you should get a text box similar to this one:

Note, if you are using the Visual Editor, with the default settings, you cannot use instead of . If you do, WordPress converts it to anyway and may break the code in the process! Unfortunately this means that this method only works for one paragraph – see my rounded text boxes in posts”>Rounded Text Boxes in Posts article for boxes with more than one paragraph.

You can change the style of the text box (ie the colours, font, size, border, etc), simply by changing the CSS in the style=»» section. This requires a basic knowledge of CSS, which is beyond the scope of this article, but an Internet search will reveal many sites with information on CSS.

Note: I now created have a Colour Selector, which can create the appropriate code for you. This works for simple text boxes (inline CSS or external CSS) as outlined in this post or for rounded text boxes.

Using External CSS

If you want your text boxes to have a common style across your site, use external, rather than internal, CSS. You set up the style information once, in your external CSS file and reference it each time you add a text box.

If you want to change the style, you only need to change it in one place (the external CSS file) and it will automatically change in every post using this style. With inline CSS you would have to manually change each post.

The external CSS file for the theme you are using is normally style.css in the wp-content/themes/yourtheme folder. Download this file using an FTP program, make a copy of it in case you make a mistake, then use a text editor to add the following to the end of style.css :

The style information can be changed to suit your needs. When finished, save the file, then ftp it back up to the server, overwriting the original.

To create a text box, simply reference the new class (textbox) in a

tag. Use the Visual Editor to write the entire post, go to the Code tab page, locate the paragraph to go in the box and add:

immediately before the text and

immediately after it.

WORDPRESS.COM Users
Apparently wordpress.com does not allow any inline CSS and charges extra for external CSS. If so, the inline CSS solution above will not work for you. If you have purchased the CSS Editing upgrade, the external CSS solution above should work.
There are other options that don’t use CSS, as outlined by Lorelle VanFossen, but be warned: these techniques are considered out of date by most people, including Lorrelle who is providing them as as workaround to wordpress.com’s CSS policy.

Creating a Quicktag button for your text box style

If you are going to use text boxes often, you can set up a quicktag button for either the internal or external CSS method. This means you don’t even need to type the line calling the text box style. Simply go the Code tab page, select the paragraph you want and click the quicktag. Easy!

I found an excellent tutorial on setting up quicktags by Podz, and a useful article by Lorelle VanFossen. Note Lorelle’s advice on making a copy of your changes so you can add them again if lost when upgrading WordPress.

To set up a quick tag for the text box styles outlined above, you need to change the quicktags.js file in the wp-includes/js folder. Download this file using an ftp program, make a copy of it and open the original with a text editor. Find the following section (at about line 126):

and add this on the line after it (if using the inline CSS method):

[php]edButtons[edButtons.length] =
new edButton(‘ed_textbox’
,’textbox’
,’<p style=»padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid»>’
,’</p>’
,”
);[/php]

If you are using the external CSS method, you need to add this instead:

[php]edButtons[edButtons.length] =
new edButton(‘ed_textbox’
,’textbox’
,’<p/> ,’</p>’
,”
);[/php]

When you are finished, save the file, then ftp it back up to the server, overwriting the original file.

You’re done! You should now have a textbox quicktag in the Code tab page of the editor, which will add the appropriate code when you select the paragraph and click the quicktag.

Next article: Rounded Corners

As you can see, simple square text boxes are easy and effective. However, what I really want are text boxes with rounded corners. I explain how to create these in my Rounded Text Boxes in Posts article.

Note: I now created have a Colour Selector, which can create the appropriate code for you. This works for simple text boxes (inline CSS or external CSS) as outlined in this post or for rounded text boxes.

65 responses on “ WordPress – Simple CSS Text Boxes In Posts ”

Источник

How To Create A Text Inside A Box Using HTML And CSS

Now we are going to put this text (we) inside the rectangular box and the remaining text outside the box.

let’s dive into the article for getting better understanding on creating a text inside a box using HTML and CSS. For this we are going to use the HTML div tag.

Using HTML tag

In an HTML document, the tag designates a division or section. The HTML tag is used to group HTML elements, which are subsequently given a container and given a CSS or JavaScript style. The class or id attribute makes it simple to decorate the tag. The tag is open to any kind of material.

For getting more idea on creating a text inside a box using HTML and CSS, let’s look into the following example.

Example

In the following example, we are running the code for making the text inside the rectangular box.

    div 
Welcome
To Tutorialspoint
  

When the script gets executed, it will generate an output consisting of text that was inside the box and some text outside the box that is displayed on the webpage.

Example

Consider the following example, in which we use CSS and to make the text inside the box.

    .tutorial 
The Best E-Learning.
 
  

On running the above script, the output will pop up, displaying the text inside the box, which was applied with CSS and created a box shadow displayed on the webpage.

Example

Execute the below code and observe how we are placing the text inside the box using CSS.

    .tutorial < display: inline-block; width: 65px; height: 20px; padding: 60px 11px; background-color:#DFFF00; >.tutorial1 
MSD
 
VIRAT
 
  

When the script gets executed, it will generate an output consisting of two boxes applied with CSS along with a text placed inside the box displayed on the webpage.

Источник

Create Text Boxes — Expanding Text Boxes

I n this tutorial, you will learn how to create a text box. A text box is a box around text which contains and separates your website content. The example html text boxes below are made from background images, html code for text box structure, and css which controls the web text box width and height as well as padding and line height for the content of the text boxes.

The html box text is set with a background baseline image and is set to automatically expand with the html text box content which means that you can put 10 words or 1000 words into your text boxes safe in the knowledge that they will keep expanding down the page and most importantly contain your content.

If you want to create a text box like the examples below you will need to know the code for the text box to work. We will get to the html for the text box but first check out these two examples here to make sure you want to create a text box like this:

1. Add the Html Text Boxes mark-up

Believe it or not, to make the text box in html, this is all of the mark-up you need:

The html text box consists of a class div called ‘box’, and at the bottom of the div is placed a background image attached using css. The ‘box’ div is the container div which is wrapped around the title and paragraph tags.

The other image is a background image for the title which is attached using css to the h3 selector.

We then use CSS to style the borders of the html box text and create the illusion that the text is fully contained inside of a web text box.

2. Add the CSS to Create the Text Boxes

It’s now time to copy and paste the CSS for the Web Text Boxes into our CSS File.

The container class div called ‘box’ has the ‘boxBottom.jpg’ image attached to it and is positioned to the bottom of the div and as far left as possible. The width of the image matches the html text boxes’ width.

There are 15 pixels of padding set to the bottom of the ‘box’ div which will push any content away from the image for a nice fit of your html text box and to keep your html box text from seeping out from the bottom.

There is a 10 pixel margin set to the bottom of the ‘box’ div which will push any other web text box away from it too.

/* .box div holds the bottom image */ .box < background: url(../images/boxBottom.jpg); background-repeat: no-repeat background-attachment: scroll left bottom; background-position: left bottom; margin-bottom: 10px; padding: 0 0 15px; width: 250px; >/* this is the title h3 tag and contains the background image for the title */ .box h3 < background: url(../images/box.jpg) repeat scroll 0 0; color: #000; font-size: 17px; height: 35px; line-height: 30px; margin: 0; padding: 0 15px; >/* The paragraph tag contains the side borders mark-up */ .box p

The selector for the h3 title tag has the image called ‘box.jpg’ attached as a background image and is positioned at zero for the X axis and zero for the Y axis. The images now form a box around the text content inside of the text box between the top image and the bottom image.

To complete the code for the text box and to create a text box illusion, borders need to be added to both sides of the text box content. A selector is created for the paragraph tag which applies a one pixel solid border to each side of the paragraph and thus completely encompassing the text boxes.

Summary

By now you should have a fully functioning html text box with background images controlled by css styling. This completes the explanation for how to create a text box.

If you want to know how to create the drop cap effect whereby the first letter inside of the text box is much larger than the rest and pushes the rest of the content away, please follow this link for CSS Drop Caps.

Источник