www.webdeveloper.com
Results 1 to 5 of 5

Thread: [HTML & CSS tutorial] Text between border

  1. #1
    Join Date
    Oct 2013
    Posts
    7

    Thumbs up [HTML & CSS tutorial] Text between border

    How to make border appear on the left and right sides of text?

    Let's say we have a div 200px x 100px with red border and ID of "container"

    Code:
    <style type="text/css">
    	*{padding:0; margin:0;}
    	#container{
    		width:200px;
    		height:100px;
    		border:2px solid red;
    	}
    </style>
    <div id="container">
    	<p>Happy Potter</p>
    	He was an awesome wizard!
    </div>
    Now we want to put the paragraph "Happy Potter" on the top of the div box between the red border.
    We do that by defining negative margin which will push up the paragraph like this:

    Code:
    #container p{
    		margin-top:-15px;
    	}
    Now our paragraph is in between the border, almost how we want it to be.

    Example 1

    Next we want to push it in the middle. So we use margin-left:

    Code:
    #container p{
    		margin-top:-15px;
                    margin-left:50px;
    	}
    I'd suggest adjusting the left margin i.e. the pushing to the center thing with the developer tools of your browser ( right click on top of the element and Firebug ( for FF ) or Google Chrome Developer tools will pop up )

    Example 2

    Next we want to remove the border that is overlapping the text. We do that by defining width of the text and giving it a background color that is the same as the div container and the outside area of it like this:


    Code:
    #container p{
    		margin-top:-15px;
    		margin-left: 50px;
    		width: 83px;
    		background: pink;
    	}
    In my case the background color of both the container div and the area outside of it was pink so I gave the same color to the paragraph after defining its width. We have the final result:

    Example 3

    And now we and Harry Potter are happy

    Final code:

    Code:
    <style type="text/css">
    	*{padding:0; margin:0;}
    	#container{
    		width:200px;
    		height:100px;
    		border:2px solid red;
    	}
    
    	#container p{
    		margin-top:-15px;
    		margin-left: 50px;
    		width: 100px;
    		background: pink;
    	}
    </style>
    <div id="container">
    	<p>Happy Potter</p>
    	He was an awesome wizard!
    </div>

  2. #2
    Join Date
    Feb 2013
    Posts
    96
    Code:
    <title>Untitled Document</title>
    <style type="text/css">
    	*{padding:0; margin:0;}
    	body {
    		width: 800px;
    		
    	}
    	fieldset {
    		border: 2px  solid red;
    		width: 200px;
    		height: 100px;
    		margin: 20px auto;
    	}
    	legend {
    		text-align: center;
    		background-color: pink;
    		color: #fff;
    		padding: 0 5px;
    	}
    	h1 {
    		font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    		font-size: 0.8rem;
    		line-height: 1.5;
    		padding: 10px;
    	}
    </style>
    </head>
    
    <body>
    <fieldset>
    <legend>Harry Potter</legend>
    <h1>He was an awesome wizard!</h1>
    </fieldset>
    </body>
    </html>
    This document was successfully checked as HTML5!
    Last edited by Strider64; 03-03-2014 at 09:34 AM.

  3. #3
    Join Date
    Oct 2013
    Posts
    7
    Quote Originally Posted by Strider64 View Post
    Code:
    <title>Untitled Document</title>
    <style type="text/css">
    	*{padding:0; margin:0;}
    	body {
    		width: 800px;
    		
    	}
    	fieldset {
    		border: 2px  solid red;
    		width: 200px;
    		height: 100px;
    		margin: 20px auto;
    	}
    	legend {
    		text-align: center;
    		background-color: pink;
    		color: #fff;
    		padding: 0 5px;
    	}
    	h1 {
    		font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    		font-size: 0.8rem;
    		line-height: 1.5;
    		padding: 10px;
    	}
    </style>
    </head>
    
    <body>
    <fieldset>
    <legend>Harry Potter</legend>
    <h1>He was an awesome wizard!</h1>
    </fieldset>
    </body>
    </html>
    This document was successfully checked as HTML5!

    Fieldset and legend are for FORMs only. It's not semantic to put 'em anywhere other than inside a form. **** abusive comment deleted ****


    P.S. HTML 5 is crap...
    Last edited by jedaisoul; 03-03-2014 at 02:47 PM.

  4. #4
    Join Date
    Feb 2013
    Posts
    96
    Well, it's not the first time I heard heard html5 is crap, but html5 is here to stay. An this validates to html5 standards: http://validator.w3.org/, so it is "semantic". Why is it lame to do that if it validates? Hmmm???? Besides I could do it your way just as easily and have look even nicer (which wouldn't be hard to do), but I was just goofing around. Besides, I'm sure there are other ways of doing this, scratch that, I know there are other ways of doing this It is just not worth the time or effort to do it, like I said I was just goofing around. I'm sure 5 to 10 years down the road that you might start to like html5, of course by by then html7 will probably be out. Talk about being lame.

  5. #5
    Join Date
    Feb 2013
    Posts
    96
    Quote Originally Posted by Azumi93 View Post
    *** comment deleted ***. Congratz.
    Whatever....I could careless for I was just goofing around with code that I would never use anyways..
    Last edited by jedaisoul; 03-03-2014 at 04:41 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles