...

View Full Version : adding THICK borders to page



wizman90
12-12-2006, 09:52 PM
how would i go about puting edges like on most pages on an average page with the least bit of codeing as possible. is there a simple command to add about an inch and a half of blach onto each side of the page?

whizard
12-12-2006, 10:28 PM
Could you just put everything on your page in a div and make the div 100% wide and 100% high and give it a black border?

Dan

whizard
12-12-2006, 10:37 PM
Or you could add this to your stylesheet:


body{border: 20px solid #000000;}


Dan

rmedek
12-12-2006, 10:38 PM
<style type="text/css">
body {
border: solid 10px #000;
}
</style>

D'oh… too slow!

wizman90
12-12-2006, 10:40 PM
im doing it in html so would this work: <body border: 20px solid #000000;>
?

rmedek
12-12-2006, 10:42 PM
<body style="border: 20px solid #000;">

wizman90
12-12-2006, 10:59 PM
ok yah, i tried that, it gave me a border around all 4 sides, i want a border like on this site: http://www.aol.com/
it has that open space on the left and right of the content. im wondering how to do that, not all the way around.

rmedek
12-12-2006, 11:06 PM
You ask how to put a border on each side of the page, we deliver.

More border info here: http://w3schools.com/css/css_border.asp

wizman90
12-12-2006, 11:22 PM
sryi guess i wasnt spesific enough, it was still helpfull thenks

whizard
12-12-2006, 11:28 PM
if you just want a border on some sides, try this:

<body style="border-left:20px solid #000000;">

substitute top, bottom, or right if you want the border on another side.

if you want the border on more than one side:

<body style="border-left:20px solid #000000;border-right:20px solid #000000;">

Dan

wizman90
12-12-2006, 11:29 PM
Tyvm!

whizard
12-12-2006, 11:37 PM
Np!

Dan

wizman90
12-13-2006, 12:00 AM
ok ive got that problem solved, now how do i get the scroll bar all the way to the right instead of inside the border?

whizard
12-13-2006, 12:05 AM
EDIT
[
Sorry, I screwed this post up by accidentally deleting what I said.

What I said was for him to take the border off the page element, and wrap his page ina giant, black-bordered div, which worked apparently...
]
Dan

wizman90
12-13-2006, 12:07 AM
ok, TYVM!!! again!!! to all of u

wizman90
12-13-2006, 12:13 AM
ok, i got that in, but theres slight borders around that, and that only covers whats typed in. is there a way to put it at the total edge of the page, and have it stretch the whole length of the screen?

whizard
12-13-2006, 12:20 AM
put this in your body tag:

style="margin:0px;"

and this in the div, inside the style attribute

width:100%;

wizman90
12-13-2006, 12:27 AM
ok, thx : ) that fixed the little border problem, its just still stuck where it doesnt go any farther than the bottom of my content

whizard
12-13-2006, 12:35 AM
um..

try adding height:100%; after width:100% in the div tag

wizman90
12-13-2006, 12:47 AM
IT LIVES IT LIVES!!! thank you guys soo much!!! your all a big help!!!

whizard
12-13-2006, 12:51 AM
No Problem, Congrats, and Happy Coding!

Dan

wizman90
12-13-2006, 01:00 AM
thankyou

wizman90
12-13-2006, 01:57 AM
ok, new thing i need help with, how do i get the border around the text (just solid)like in the CSS tutorial, but with HTML, would i just do like <
text style="border-left:30px;border-right:30px;border-down:5px;border-up:5px;">

whizard
12-13-2006, 02:31 AM
Yes.

But, use border-top and border-bottom, not border up and border-down.

Also, I assume you knew this, but just to make sure, there's no <text> tag...

Dan

wizman90
12-13-2006, 03:52 AM
ok, so i did that, but when i change the window size, it screws that up, is there a way to make it so its like 100% across i tried turning left and right properties to 100% and that didnt work so i tried combining the two and using width at 100% and i cant see a bordwer anywhere on the left or right, is there a way to get that to work?

wizman90
12-13-2006, 08:55 PM
please help? anyone?

rmedek
12-13-2006, 09:03 PM
Help us help you. Post a link to your site. Or your current code in [ code ] tags. Or a screenshot of what you want. Something. Anything!

wizman90
12-13-2006, 09:10 PM
ok, sory, ill post my homepage, its a home project to take up time and to learn some HTML, heres the link:

http://www.linkyourfiles.com/files/4417/INDEX.HTML

you guys are gona get a kick out of the paragraph there. what im trying to do is get that part that sais:
home | links | mods | so on and so on
to have a 5 px border on the top and bottom and have the left an right extend all the way to the black area no mater what the explorer size is.

EDIT: also, is there a way to senter something at the middle of the page AND when you click on a link, it pops up a new window?

wizman90
12-14-2006, 08:48 PM
lol this died

whizard
12-14-2006, 09:32 PM
Dear wizman:

I took a look at your site. I looks like you have a good feel for how colors work together, and how to come up with a nice un-cluttered design. It's important to get the basics down before you worry about design wizardry.

It's great to see you are interested (if your website is to be believed) in web design.

My suggestion to you is to find some good tutorials online, maybe check some books out of the library, and get a good basic knowledge of HTML and CSS design principles. There are lots of resources available. (I'll list some good online resources below)

Once you have a good grasp of the options and features HTML has, and how to use them, you'll be able to do a lot more a lot faster than when you simply ask how to do something and then implement the answers. It is as important to understand how and why something works/doesn't work as actually getting it to work, especially if your goal is to progress in web design.

Don't get me wrong - here at codingforums, we're happy to answer people's questions - if we weren't, we wouldn't bother!

However, if you are serious about web design and stick with it, there will be a hundred thousand challenges, problems, and questions you will have. In fact, that's part of the fun of web design! But it will be hard to find someone to go out of their way each time to give answers to your problems, if you never show any attempt at learning the HTML and CSS languages thoroughly yourself.

Also, lots of people (including me) run searches on this forum to find answers to their problems. Including five, ten, fifteen totally different problems in each thread does not facilitate finding answers this way. It's best to start a new thread for each individual problem. (just a pointer)

Sorry, I don't want to sound sharp. I am happy that you are interested in web design and I hope you come away inspired by my little lecture to really dive in headfirst and immerse yourself in coding!

So, find some good tutorials, practice, play around with stuff, learn, have fun, and if you get stuck, we're always here at codingforums to help you out!

Also, another tip: You'll find it is much easier to get your site to look the same in all browsers if you code to standards! Be sure to include a DOCTYPE in the beginning of your HTML file and check it with the validator (http://validator.w3.org/)!

----
Resources:

http://www.htmlhelp.com/
http://www.w3schools.com/html
http://www.htmlgoodies.com/
http://www.htmltutorials.ca/

Good Luck!
Dan

wizman90
12-14-2006, 11:28 PM
thankyou, i didnt take it very sharp at all. Back at another forum, they didnt want you making topics for each prob, i guess that this is diferent : ) i actualy did ask my father if we could go get a book or 2 on codeing. yes, the website is true, i like learing it.

whizard
12-14-2006, 11:30 PM
Great- I hope you stick with it and enjoy it!
:thumbsup:
Dan

PS-no big deal on the thing about putting different topics in the same thread, I was just giving you a heads up :D

wizman90
12-14-2006, 11:33 PM
ok : )

_Aerospace_Eng_
12-15-2006, 02:25 AM
Just so you know all of that style stuff you've been told to put into your document IS CSS. Its best to avoid inline styles if possible.

wizman90
12-15-2006, 04:22 AM
i dont get it?

_Aerospace_Eng_
12-15-2006, 05:10 AM
The stuff in bold is inline CSS

<div style="font-size:14px;border:2px solid #F00;"></div>
The same thing can be accomplished by doing something like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div {
font-size:14px;
border:2px solid #F00;
}
</style>
</head>

<body>
<div>This div has a red border with font-size of 14px.</div>
</body>
</html>

Notice the style tags. Now that you have the style tags you no longer need the inline styles.

wizman90
12-15-2006, 12:49 PM
oh! i get it now lol

whizard
12-15-2006, 04:21 PM
You can also place them in an external file, like this:

main.css


div {
font-size:14px;
border:2px solid #F00;
}


and then in the head section of your HTML file, you call it like this:



<link href="pathtocssfolder/main.css" type="text/css" rel="stylesheet" />


or like this (once again in your head section):



<style type="text/css" media="screen">
<!--@import url("pathtocssfolder/main.css") screen;-->
</style>


Dan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum