#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    4
    Rep Power
    0

    Border around page and H1 tag


    Need some help please. New to all this and just trying to make a simple web page. I have found what I needed, I think, but something dowesnt seem right.

    I have a single page. I want a border around that whole page, like a sheet border with an image at the very top inside.

    This is the code I found somewhere to do it.
    Code:
    <html>
    <title>Page Title Here</title>
     <head>
       <style type="text/css"> 
        body 
        h1 {
       width: 874px;
       border-top-color: #a3cd81;
       border-right-color: #a3cd81;
       border-bottom-color:#a3cd81;
       border-left-color: #a3cd81;
       border-width:8px;
       border-style: solid;
     }
        </style>
     </head>
     <body>
       <center><h1><img src="add url for location of header image here">
    Add Your Text Here<BR>
    More text here<br>
    
    </center></h1>
    
     </body>
    </html>
    Now it all does work Great for what I need but here is my question. Is it suppose to be in the h1 tag? I thought that was for text/title so to speak? like h1, h2, h3 so forth. Can I use something else besides h1 in the event I need the h1 tag for something or is there an easier way to do this.

    Sorry if I dont make sense, but understand I have zero idea about this and just trying to achieve one thing.

    Thanks for any help
    Last edited by Kravvitz; December 4th, 2012 at 03:02 AM. Reason: fixed the code tags
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    9
    Is this similar to what you want??

    Code:
    <h1>
    	<img src="phpwp.jpg"><br />
    	Add Your Text Here<BR>
    	More text here<br>
    </h1>
    CSS:
    Code:
    body
    {
    	margin: 0%;
    	border: 8px solid #a3cd81;
    }
    h1 
    {
    	border: 8px solid #a3cd81;
    	width: 30%;
    	margin: 0 auto;
    	text-align: center;
    }
    
    h1 img 
    {
    	width: 100%;
    	height: 200px;
    	margin: auto;
    }
    PS - personally I wouldn't do it like this. I would display the image, then create the <h1> tags and if necessary put a <br /> within it to create the two line effect. Also it depends about the border you wanted but even then, on the image I would put a border around it except for the bottom, and with the <h1> tag I would put the same border around it except for the top. Center them both, take the relevant margins off and declare them the same width. (Not tested it but off the top of my head this is what I would do.).

    Hope it helps,

    PS: just updated the code, I think it looks more like what you wanted now. I've only put a height on because my image was not the correct dimensions (i suspect it's a logo), just take that off though and play around with the values. Your <h1> can be any width, but just remember doing it this way isn't very flexible if you have to change it in the future

    Let us know!

    Regards,

    LC.
    Last edited by Nanomech; December 4th, 2012 at 12:03 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    4
    Rep Power
    0
    Thanks Nanomech, i'll give it a try later and let you know.
    The way I have it is working for what I need, but just unsure if it will cause any problems down the road if I add to the page, as I have no clue about it.

    Will let you know how I make out.

    p.s.
    If I want to add a background color to the area outside the border area(inside the border is where my content is going), how would I go about that? I tried but it put the color over everything.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    9
    Ok dude, to do that what you need to do is declare a background color for the body, and also declare a background color for the <h1> tag. Here is your CSS updated. (I added some height to the body so you can see what the site will look like once you fill it with content) Updates are in RED.

    Here you go:
    Code:
    body
    {
    	margin: 0%;
    	border: 8px solid #a3cd81;
    	background-color: #ff0000;
    	height: 700px;
    }
    h1 
    {
    	width: 30%;
    	border: 8px solid #a3cd81;
    	margin: 0 auto;
    	text-align: center;
    	background: #fff;
    }
    
    h1 img 
    {
    	width: 100%;
    	margin: auto;
    }
    Just change those declarations to suit the colors you want. Remember to take off the height on the body once you start filling the site with content (I put a height on the body/containing element just to help me visually when I'm building).

    Hope this helps.

    Regards,

    NM.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    4
    Rep Power
    0
    Thanks again for the help on something im sure seems easy.
    Anyways, I got a bit lost where to put the code you gave me, tried it a few different ways, but didnt work correctly(i probaly just didnt know where what went).
    So i added parts of what you gave me and what I had and got the excat look of what I want.

    Is the code ok? I mean it works. If not can you paste the full thing if you dont mind.

    Copy this and it will show exactly what I trying(picture is just a temp. filler for now).
    [code]
    <html>
    <title>page title here</title>
    <head>
    <style type="text/css">
    body
    h1 {
    width: 874px;
    border-top-color: #939393;
    border-right-color: #939393;
    border-bottom-color:#939393;
    border-left-color: #939393;
    border-width:8px;
    border-style: solid;
    background: #fff;
    }
    </style>
    </head>
    <body bgcolor="#010101">

    <center><h1><img src="">
    <br>

    Add Your Text Here<BR>
    Use This Area For more text<br>
    <font size="4" color ="red"><b>Use This Area For more text</b></font><br>
    <font size="5">Use This Area For more text</font><br>
    <font size="5" color="red">Use This Area For more text</font><br>
    <br>
    <font size="4" color ="red">Use This Area For more text
    <br>Use This Area For more text

    </font>

    </center>
    </h1>
    </body>
    </html>
    [\code]

    Although the above works and is the appearance I need, just want to be sure it is correct.

    Thanks again VERY much for the help.
    p.s. i cant insert an image in code as im to new to ad link
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    9
    It's not really correct because you are using deprecated html tags like <font> and <center>. These are elements which style our page but we use CSS to style everything now. Also, your CSS is defining the same color for every border, which is why I shortened your CSS by declaring it all on one line instead of using 6 lines.

    Here is the exact same effect, just using the correct HTML and CSS:

    Code:
    <html>
    <title>page title here</title>
    <head>
    <style type="text/css"> 
    body 
    {
    	background: #010101;
    }
    
    h1 
    {
    	width: 874px;
    	margin: auto;
    	text-align: center;
    	border: 8px solid #939393;
    	background: #fff;
    }
    
    .larger_text
    {
    	font-size: 24px;
    }
    
    .red_bold
    {
    	color: #ff0000;
    	font-weight: bold;
    	font-size: 18px;
    }
    
    </style>
    </head>
    <body>
    
    <h1>
    	<img src="test.jpg" alt="your image" />
    	<br />
    <span>
    	Add Your Text Here<br />
    	Use This Area For more text
    </span>
    <br />
    
    <span class="red_bold">Use This Area For more text</span>
    <br />
    
    <span class="larger_text">Use This Area For more text</span>
    <br />
    
    <span class="larger_text">Use This Area For more text</span>
    <br />
    <br />
    <span class="red_bold">
    	Use This Area For more text<br />
    	Use This Area For more text
    </span>
    
    </h1>
    
    </body>
    </html>
    This should re-create exactly what you had. Again, I would definitely not layout the site like this. You noticed the amount of <br /> tags I have had to use? I could have used <p> tags but I don't think it is correct practice to do so. I don't think this is the best practice but that's my opinion.

    I hope this helps you.

    Remember to add a http://www.w3schools.com/tags/tag_doctype.asp to your page also. You should find a fairly simple explanation there, check the 'definition and usage' section. It will give you an idea about it.

    Once you add the doctype, it will pass validation but I'd much prefer to take everything out of the <h1> tag and style it accordingly.

    Regards,

    NM.
    Last edited by Nanomech; December 5th, 2012 at 04:59 AM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    4
    Rep Power
    0
    Thanks again for all the help.
    Works great.
    Thank you
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    9
    No problem, glad to help.

    Check out CSS Basics for a good reference to CSS properties and values.

    Kind regards,

    NM.

IMN logo majestic logo threadwatch logo seochat tools logo