How do I create a rounded corners text box using CSS?
Question
How can I create a rounded corners text box relative to the position of the text? As of now, the box I've created is located on the top left corner of the page while the text has a specific setting with 300px padding on the left and the right. I want the box to contain the text and to be in the same position of the text.
Currently learning web development.
<p id="rcorners">
<h2>Education</h2>
<ul>
<li><b>New York University</b></li>
<li> Bachelor of Science in Journalism, Minor in English, expected graduation 2018</li>
<li>GPA: 3.76</li>
</ul>
</p>
#rcorners {
border-radius: 25px;
border: 2px solid #000;
padding-left: 300px;
padding-right: 300px;
width: 200px;
height: 150px;
}
3 answers
solution1
0 2016-01-25 18:11:47
I think this will help to your. put your all into div
<html>
<head>
<title>Welcome !</title>
<style type="text/css">
#txbox{
border: 1px solid black;
box-shadow: 1px 2px 2px black;
width: 50%;
height: auto;
padding-left: 5%;
position: absolute;
border-radius: 25px;
}
</style>
<body>
<div id="txbox">
<h2>Education</h2>
<ul>
<li><b>New York University</b></li>
<li> Bachelor of Science in Journalism, Minor in English, expected graduation 2018</li>
<li>GPA: 3.76</li>
</ul>
</div>
</body>
</html>
solution2
0 2016-01-25 18:12:21
Your syntax structure is wrong,
<p> tags are by default BLOCK level elements and should not contain other block level elements, such as <h2> .
replace your <p> with <div> which is the general purpose BLOCK level container element you want to use in the HTML syntax.
<div id="rcorners">
<h2>Education</h2>
<ul>
<li><strong>New York University</strong></li>
<li> Bachelor of Science in Journalism, Minor in English, expected graduation 2018</li>
<li>GPA: 3.76</li>
</ul>
</div>
#rcorners {
border-radius: 25px;
border: 2px solid #000;
padding-left: 300px;
padding-right: 300px;
width: 200px;
height: 150px;
}
What browsers are most likely to do with your code is to add a element closing tag before the next non-child level element is encountered. Such as:
<p id="rcorners">
</p>
<h2>Education</h2>
<ul>
...
</ul>
</p> <!-- This tag is now surplus to requirements -->
Web browsers are used to dealing with lots of changing code due to (among various other reasons) issues such as the utter amateurishness of many (and especially early) website developers as well as the [formerly] often changing settings for HTML versions and other factors, so even if your site looks like it's working OK on your web browser this is no guarantee that the page HTML is actually coded correctly; it can just be coded well enough for the browser to make a best guess for what you're trying to achieve.
To help resolve these epic HTML inconsistencies it is highly advised to run pages through the W3C Markup Validator which will give you constructive feedback on your web page layout and structure.
See http://www.w3schools.com/html/html_blocks.asp
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements
http://www.impressivewebs.com/difference-block-inline-css/
https://stackoverflow.com/a/8696078/3536236 <== This one is useful.
solution3
-1 2016-01-25 18:07:36
put a div around your
eg
<div id="rcorners">
<p>
<h2>Education</h2>
<ul>
<li><b>New York University</b></li>
<li> Bachelor of Science in Journalism, Minor in English, expected graduation 2018</li>
<li>GPA: 3.76</li>
</ul>
</p>
</div>
since you're new to web dev, don't forget to put <style> around your css
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.