|
HTML - Border Around Entire Page
Ok, I've written my entire site in tables and that works lovely. I now want to put a border around everything on my page.
So I tried: <table width="820" cellspacing="0" cellpadding="10" border="1" bordercolor="#c51e21"> <tr> <td> <div align="center"> MY ENTIRE WEBPAGE </div> </td> </tr> </table> However, the border color doesn't change and just fades here and there when I change the hex. I also want to change the border type from a 3dish window frame to a solid line. Can anyone help me please. Similar TutorialsI have this question, I am under the impression(?) that browser settings change with various pc and different browsers, but the most simple question of all cannot be found anywhere and the tech support of my domain hosting cannot assist, as their product for developing webpages is currently in beta testing. IS there a code..any code, that centers the ENTIRE website after it is placed? using <center>mywebsitehere</center> does not work, and tables were not used at all in setting this up, in fact I have no idea how to use tables. When you are working in your files and setting up your page for publishing, there is no area for margins, page indents, size of viewing area, nothing. I have manually recoding the existing files and they all default "left" after saving/publishing. Any ideas or help appreciated. The web url is www.yourock24.com. I view it as alot of black area to the right and cannot correct this by myself. Thanks in advance for assistance! Hi. What is the best way to make something, lets say a table or a div for example, span the entire height of the page? I don't have any example code i'm just asking for future reference. Please ask if you need more detial or don't understand what i'm talking about. Thanks in advance for any replies. Hi, i was wondering if anyone could take a look at my website and tell me why there's a border around each page. My url is www.marksbodyshop.org I will post my html, main.css , defult.css and defult2.css. I tried adding padding:0; and border:0; to the html, body element of the each css but that didn't work. It only happens in ie. Thank you very very much. Main.css: Code: html,body {
height:100%;
margin:0;
background-color:#000;
background-image:url(../images/firstpage.gif);
background-size:100% 100%;
background-repeat:no-repeat;
overflow:hidden;
border:0;
padding:0;
}
#container {
height:73%;
}
#nav {
position:absolute;
padding:0;
margin:0;
list-style-type:none;
height:7%;
width:57%;
top:40%;
left:20%;
z-index:1;
}
#nav li {
width:16%;
margin:1%;
height:100%;
}
#nav a {
display:block;
width:100%;
height:100%;
outline:none;
text-indent:-9999px;
background-size:100% 300%;
}
#about {background-image:url(../images/aboutus.png);}
#about1 {background-image:url(../images/contactus.png);}
#about2 {background-image:url(../images/freelunch.png);}
#about3 {background-image:url(../images/map.png);}
#about4 {background-image:url(../images/meettheteambutton.png);}
#nav a:hover {background-position:0 -100%;}
#nav a:active {background-position:0 -200%;}
Defult2.css: Code: @charset "utf-8";
/* CSS Document */
body {
margin:0; padding:0;
background:#000000;
}
html, body, #bg {
height:100%;
width:100%;
overflow:hidden;
border:0;
padding:0;
}
#bg {
/*position:absolute; */
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
z-index:0;
}
#mainimg {
width:100%;
height:100%;
}
#content {
z-index:1;
/*position:relative;*/
height:100%;
width:100%;
z-index:1;
margin:0 auto;
}
#position{
position:absolute;
top:40%;
left:18%;
width:20%;
z-index:2;
}
/*#position1{
position:absolute;
top:90%;
left:66.38%;
width:30%;
margin: 0 auto;
padding:0px;
z-index: 1;
}*/
#position1 {
left: 66.85%;
padding: 0;
position: absolute;
top: 69%;
width: 20%;
z-index: 1;
height:10%;
}
#nav {
margin:0px;
padding:0px;
height:44px;
}
#nav ul{
margin:0px;
padding:0px;
}
#nav li {
padding:0px;
list-style:none;
margin:5px 0;
/*height:100%;*/
height:100%;
}
#nav a {
display:block;
width:100%;
height:100%;
/*outline:none;
*/
text-indent:-9999px;
background-position:left;
}
#homelink {
left: 0;
padding: 0;
position: absolute;
top: 0;
width: 0;
z-index: 1;
overflow:hidden;
height:100%;
width:100%;
}
#home {width:63.5%;height:43px;background:url(../images/homebutton.png);}
#about {width:49%;height:33px;background:url(../images/aboutus_new.png)}
#about1 {background:url(../images/contactus.png) no-repeat;}
#about2 {background:url(../images/freelunch.png) no-repeat;}
#about3 {background:url(../images/map.png) no-repeat;}
#about4 {background:url(../images/meettheteambutton.png) no-repeat;}
#meettheteam1 {background:url(../images/carlosbutton.png) no-repeat;}
#meettheteam2{background:url(../images/brettbutton.png) no-repeat;}
#meettheteam3 {background:url(../images/marktbutton.png) no-repeat;}
#meettheteam4 {background:url(../images/marksbutton.png) no-repeat;}
#nav a:hover {background-position:0 -0% }
#nav a:active {background-position:0 -0% }
Defult.css: Code: @charset "utf-8";
/* CSS Document */
body {
margin:0; padding:0;
background:#000000;
}
html, body, #bg {
height:100%;
width:100%;
overflow:hidden;
border:0;
padding:0;
}
#bg {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
z-index:0;
}
#bg img {
width:100%;
height:100%;
}
#content {
z-index:1;
/*position:relative;*/
height:100%;
width:100%;
z-index:1;
margin:0 auto;
}
#position{
position:absolute;
top:40%;
left:18%;
width:20%;
z-index:2;
}
/*#position1{
position:absolute;
top:90%;
left:66.38%;
width:30%;
margin: 0 auto;
padding:0px;
z-index: 1;
}*/
#position1 {
left: 66.85%;
padding: 0;
position: absolute;
top: 71%;
width: 20%;
z-index: 1;
height:10%;
}
#nav {
margin:0px;
padding:0px;
height:44px;
}
#nav ul{
margin:0px;
padding:0px;
}
#nav li {
padding:0px;
list-style:none;
margin:5px 0;
/*height:100%;
height:100%;*/
}
#nav a {
display:block;
/*width:100%;
height:100%;
outline:none;
*/
text-indent:-9999px;
background-position:left;
}
#homelink {
left: 0;
padding: 0;
position: absolute;
top: 0;
width: 0;
z-index: 1;
overflow:hidden;
height:100%;
width:100%;
}
#home {background:url(../images/homebutton.png) no-repeat;}
#about {background:url(../images/sm/download.png) no-repeat;}
#about1 {background:url(../images/sm/download.png) no-repeat;}
#about2 {background:url(../images/sm/email.png) no-repeat;}
#about3 {background:url(../images/sm/download.png) no-repeat;}
#about4 {background:url(../images/sm/email.png) no-repeat;}
#meettheteam1 {background:url(../images/carlosbutton.png) no-repeat;}
#meettheteam2{background:url(../images/brettbutton.png) no-repeat;}
#meettheteam3 {background:url(../images/marktbutton.png) no-repeat;}
#meettheteam4 {background:url(../images/marksbutton.png) no-repeat;}
#nav a:hover {background-position:0 -0% }
#nav a:active {background-position:0 -0% }
Hi all, I was wondering if someone could help me. I want a border around the entire page. It works fine in IE at all resolutions, but breaks in FF. I explicitly stated html and body heights to be 100% but that doesn't help. I should be able to spot the error, but its escaping me. Can someone please look at my code and tell me if you see anything? Thanks Rick --- The HTML: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>San Jose Cell Phones</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body style="font-family:verdana,tahoma, sans-serif;">
<div style="margin-left:3%;">
<h1 style="font-size:4pt;color:#ffffff;">San Jose Cell Phones ringtones AT&T Yahoo dsl satellite 408 calling dish network</h1>
<div align ="center">
<img src="images/sanjose.png" alt="san jose" style="width:195px;height:39px; vertical-align:middle;" />
<img src="images/smallcellphone.jpg" alt="san jose cell phones logo" style="width:72px; height:204px; padding:20px; vertical-align:middle;" />
<img src="images/cellphones.png" alt="cell phones" style="width:246px;height:39px; vertical-align:middle;" />
</div>
<h4>Choose Service</h4>
<div class="container">
<ul id="navSquare">
<!-- CSS Tabs -->
<li><a class="active" href="index.html">Cellular</a></li>
<li><a href="ringtones.html">Ringtones</a></li>
<li><a href="phonecards.html">Phonecards</a></li>
<li><a href="dishnetwork.html">Dish Network</a></li>
<li><a href="dsl.html">DSL Service</a></li>
</ul>
</div>
<hr align="center" width="33%" />
<br clear ="all" />
<div style="float:left;color:#006699;width:250px;">
<div style="background-color:#006699;color:#ffffcc;margin-top:30px;height:10px;padding:3px 10px 3px 10px;border:1px solid black;border-bottom:0px;">Hi</div>
<div style="line-height:1.3em;padding:10px;text-align:justify;background-color:#FFFFCC;border:1px solid black;">
<p style="font-size:11pt;font-weight:600;padding-top:10px;">The Original Online Prepaid<br />
Domestic and International<br />
Calling Cards Superstore</p>
<p><strong>Save up to 80% on long distance calls</strong>
<br />
We hand-pick our phone card selection to offer the best of both low cost and reliability. Don't be fooled by other's low teaser rates. We pioneered instant email calling card delivery in 1999, with over 600,000 sold as of September 2006!
<br /><br />
<strong>How to use this web site</strong> Use Get Best Rates to choose your phone card, then receive your virtual phone card purchase by email. For a physical card, print the email containing the card image. Login to your account 24 hours a day to check PIN information or to reorder</p>
</div>
</div>
<div style="color:#ffffcc;float:left;clear:none;margin-left:20px;width:460px;">
<div style="background-color:#006699;margin-top:30px;height:10px;padding:3px 10px 3px 10px;border:1px solid black;border-bottom:0px;">FINDING
THE BEST PHONE CARD</div>
<div style="float:right;clear:none;padding-top:10px;padding-left:3px;padding-right:3px;width:209px;height:158px;">
<script type="text/javascript" language="JavaScript" src="http://www.kqzyfj.com/placeholder-1405157?target=_top&mouseover=N">
</script>
</div>
<div style="padding:10px 5px 30px 5px;text-align:justify;background-color:#7691d4;border:1px solid black">
<p style="font-size:14pt;padding-left:5px;margin-bottom:-5px;">Is your need for</p>
<p style="line-height:1.5em;white-space:nowrap;font-size:.75em;">
<font face="Arial">► </font> International calls from the U.S.?<br />
<font face="Arial">► </font> International calls to the U.S.?<br />
<font face="Arial">► </font> Calling within the U.S.?<br />
<font face="Arial">► </font> Calls while traveling?<br />
<font face="Arial">► </font> Specific recommendations?<br />
<font face="Arial">► </font> Wireless/cell phone refill PINs?
</p>
</div>
</div>
<!--
<div align="center">
<p class="sectionheading"><a name="phonecards" id="phonecards">Phone Cards</a></p>
<a href="http://www.kqzyfj.com/3566vpyvpxCFEKIDFLCEDGDGMLF" target="_blank" onmouseover="window.status='http://www.zaptel.com';return true;" onmouseout="window.status=' ';return true;">
<img src="http://www.lduhtrp.net/o4101r6Az42ORQWUPRXOQPSPSYXR" alt="Buy the best phone cards at San Jose Cell Phones" width="300" height="250" border="0"/></a></div>
<br />
<hr align="center" width="25%" />
<div style="text-align:center;margin:0 auto;margin-top:25px;"><a class="button" href="#top">Top of Page</a></div>
<br />-->
</div>
</body>
</html>
The CSS: Code: html,body
{
height:100%;
}
body
{
background-color:#ffffff;
border: 2px #279DA4 solid;
font-family:'Berlin Sans FB Demi', 'Berlin Sans FB', Verdana,'Trebuchet MS',tahoma, sans-serif;
font-size:10pt;
}
.container
{
width: 500px;
padding: 5px;
margin:0 auto;
border: 1px solid #ccc;
background: #fff;
margin-bottom:10px;
}
Hi, I am using Dreamweaver CS3 to create a site, by default i have learnt that when you use an image as a link to another page, dreamweaver creates a coloured border around your linked image. I have since been able to get rid of this border by adding border="0" into my img tag however this now has caused my rollover not to work before clicking on the image to take you to the linked page. this is my code; any ideas how i can fix this? <td colspan="4"> <a href="About Us.html"><img src="images/About_Off.jpg" border="0" alt="About Us" name="Aboutus" width="120" height="64" id="Aboutus" onMouseOver="MM_swapImage('Image2','','images/About_On.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td> <td colspan="6"> Any help would be greatly appreciated. Ok I am having some issues with my webpage. I first should say I am relatively new to page designs but I think I know the basics of HTML. However when I posted what I thought was my code in another post, I was told umm that it wasn't my code. I am using share point designer. So before I post what I think my code is, can someone tell me ahh, how I get the code to post lol. Anyway my issue is on my 22" monitor the page looks fine and I can see everything. When I look at the same page on my lap top, well that is a different story. #1, I am not able to see the bottom half of my picture or what is in the bottom half of my left frame. The reason I do not post the page is because it is not finished and I dont want anyone to see it yet lol..... Looking for help, thank you Hello, I'm working on my 3d portfoliosite and seem to have a problem with the centering of the entire site. www.gerhardvanderhoek.nl The header image is 1440 px in lenght. The middle of the site always has to be in the middle even if the display size is 1024 X768. So this would mean that some of the green gradients on the left and right and some of the header image wouldn't be seen on screen if it's a relative low resolution. Can someone give me advice? Thanks! I'm trying to center my entire website. Also, I'm trying to make my website XHTML 1.0 strict. Every element I try to use to center it is either deprecated or has had the align attribute deprecated. On w3schools.com they say to use CSS, but I can't find any CSS that could center my entire site. Any ideas? I am putting together a website for a student group and realized a big problem. The site is a 3 column style, and the bottom half of the left column is "Latest News". I just realized that in my current setup everytime I make a change to the "latest news", I will have to make the change on all of the many pages it is on. Is there a way to make a "latest news" text file and just have that content accessed from each page so that I will only have to make changes to the one file and have it show up on all pages? I have tried searching for this for an hour but just can't seem to hit the correct keyword that explains how to do it. Thanks!!! Hi there, well, the title basically says it all. I have a site that consists of like, 8 .php pages... and I need to play this ambient sound at the background. ( I know, but well.. orders from above) So I was wondering if there is a way to manage this, without having to hear the song all over again when you click on a link. Thanks can anyone tell me how this is done? the border can be seen on the football manager site hattrick. thx Hi, is there a way to put a border around only some parts of a table? I've tried using css, but it didn't work: <p style="border-bottom: 1px; border-left: 1px; border-right: 1px; border-top: 1px"> can anyone help? thanks Hey Guys I have a 1px X 5px image and I am trying to wrap a border around it. It looks fine in FF but in internet explorer there is a small gap. See images below: FireFox: IE6: Here is the coding: CSS: HTML Code: #tabUnderline {
border : solid 1px #aaa9a9;
background-image : url(images/buttons/tab_underline.gif);
background-repeat : repeat-x;
height : 3px;
}
HTML: HTML Code: <div id="tb"><div id="tabUnderline"></div></div> Buddy... I looking for the solution about this border. which is always around the swf in IE. Any solution to remove this. I keep in waiting... Thanx... Where in my CSS would I add a border and border color? html,body { height:100%; margin:0; } body { background-color:#000; background-image:url(../images/background.jpg); background-attachment:fixed; background-size:100% 100%; } #container { width:700px; padding:40px; border-right:1px solid #003; border-left:1px solid #003; margin:auto; background-color:rgba(0,0,0,0.5); color:#ccf; box-shadow:#000 0 0 10px; } Hi all, I'm trying to achieve a border around columns, like on this website: http://www.birchandbird.com I like the blue textured border around the columns but I'm completely stuck on how I achieve that. Can anyone please help me? Thank you so much in advance! We use a Joomla platform for our website, and in the CSS code, it automatically adds a border around tables, images etc. I'm trying to go around that with html by specifying table parameters. There is a border in the middle of the table now, and I'm trying to remove the border completely. However, keep in mind I do not want to modify the CSS for all the pages. Thank you, help will be GREATLY appreciated. http://augustinenursery.com/index.ph...&id=6&Itemid=7 Quote: <div class="topPanel"> <div class="pageName">Promotions</div> <div class="pageName" style="text-align: justify;"><span style="color: #000080;"><span style="font-size: 18pt;"><span style="color: #000000;"><a target="_blank" href="images/stories/augustine/aug_mthrsday_dlyfreemn_050311_lowres.jpg">Mother's Day Special, click here!</a></span></span></span></div> <div class="topContent"> <table bordercolor="#ffffff" border="1" cellpadding="0"> <tbody> <tr> <td>Current Spring Specials:</td> <td><img height="7" width="9" src="images/stories/augustine/bullet_sw.gif" style="border-style: none;" /> Arborvitae Emerald Green 6-7' / $69.95<br /><img height="7" width="9" src="images/stories/augustine/bullet_sw.gif" style="border-style: none;" /> Japanese Maples 5 gal. / $99.95<br /><img height="7" width="9" src="images/stories/augustine/bullet_sw.gif" style="border-style: none;" /> Rhododendron PJM 2 gal. / $9.95<br /><img height="7" width="9" src="images/stories/augustine/bullet_sw.gif" style="border-style: none;" /> White Pine 5-6' / $99.95</td> </tr> </tbody> </table> </div> </div> I'm currently working on my first blog and am trying to add a twitter hyperlink but it has a nasty border to it. I tried typing in different types of 'border=0' but it doesnt seem to work. I found the main code for the entire page post img, table.tr-caption-container { padding:4px; border:1px solid $bordercolor; if I put a zero in the border it takes it off the entire page, but I'd like my pictures to have a border and have The twitter hyperlink be without a border. This is the twitter link I want to have with no border. <a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'><img alt='Tweet It!' src='http://i835.photobucket.com/albums/zz275/amberink/social%20networking%20icons/th_twitter_32.png' width='20'/></a> Thanks, Ashton anyway to make this border run to the end of the page what i have ::: border arround the flash menu... http://www.freewebs.com/fallingrain11/zzzzzz.html Code used :: <tr><td align="left" Width="17%" valign="top"> <tr><td width="100%"; colspan="2"> what i would like to have :: border on the left... http://www.freewebs.com/fallingrain11/1.html i tried mixing the 2 codes together and i get the outside border with it and i preferablly just want that border line... |
|||||||