|
CSS - Make Border Around Entire Webpage?
I would like to make a small 2 pixel border around my entire webpage. The code I'm using now doesn't seem to work. Can someone point me in the right direction?
I've been looking and the code I am using now for the stylesheet is: <style type="text/css"> div.outline { background-color: #333333; border: 2px solid; width: 100%; border: thin solid red; } </style> and the html: <html> <head> <title>Test Page</title> <link rel="stylesheet" type="text/css" href="theme1.css" /> </head> <body> <div class="outline">a</div> </body> </html> Similar TutorialsI know it's probably something simple, but I'm having trouble centering my web page in CSS. I want to center it no matter what resolution a visitor has their monitor set to or the size of their monitor. I've tried the following to no avail: Code: margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; Any suggestions? Well, I have made it work before, and I have even tried to copy the CSS and XHTML from an old site, but it just doesn't work. I have a div named "wrapper" with a 1 pixel black border. I close the wrapper after the footer at the end of the XHTML, yet the border is not even half way around the site. Here's the URL: http://www.caillouette.com/Utilitrek/new/ any ideas? Well, I did some surfing and found that I needed: min-height: 100% But that didn't appear to work. thanks -Sean Please take a look at the following site. website How can I make the white part touch the bottom of the browser? i've seen this done many times with other sites. Anyone knows how to make the standardized border as the attached file ? cheers. I need to create a 2 column layout as in the link below: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm However, I will not always know whether or not the contnet in the left or right will be longest. As it is in the design above they recommend to put the border on the left content if the left side is longer. But I will not always know which is longest, so I can't just change the border in the CSS. Is there anyway to create a layout like the above link that has a border separating the two columns that will resize to the longest column, no matter which side has longer content? Any help is much appreciated! Hello: I am building a ecommerce site, there are featured product on frontpage, I want to make a square border for each product, I have done top border and bottom border, but I don't know how to make the vertical lines on the right and left to make a nice square border with rounded corner the html structure is as followings table-----for the top border table-----to display product image and price, all that table-----for the bottom border I know by putting in css code for the middle table will be able to close this border could anyone tell me how? Hi, I want see what my page will look like with a border around it. I assume that it is done with CSS.Style file? What would be the code? And where do I put it? http://www.learn-how-to-weld.com/mig-welding.html Then how would I make the background a different color out side the border like on this page. http://www.learn-how-to-weld.com Peter I have painted myself into a corner, and it's time to paint myself out...Hopefully with help from someone here! For the images on my website, I have added a two color border around every image (in Photoshop)...A 1-pixel green border (#6e888f) on the outside of the image, and then a 1 pixel white border just inside that. See example he mableyhandler dot com As I add more and more images to the site, it is getting harder to keep up with adding the border in Photoshop every time. Is there a (semi-easy) way to do this in HTML? OR maybe in CSS? The challenge is that it needs to be a double border...And, it needs to be a permanent design element (the image is clickable, but the border colors should not change on rollover). Thanks very much Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... Hi, I'm trying to make a div in my website take up the entire height of the page, or more if the page is longer. However when I've managed to get the div the full height of the page, the contents leave the div when it's longer than the page. I want the div to stretch, but be at least as long as the page. Here is a simplification of my code as an example: Code:
<html>
<head>
<style>
.contentdiv{
height: 100%;
width: 758px;
top: 0px;
position: relative;
border: 1px solid #89a9c7;
padding-top: 0px;
padding-bottom: 0px;
border-spacing: 5px;
bottom: auto;
}
.footerdiv
{
position: absolute;
bottom: 0px;
background-color: blue;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<div class="contentdiv">
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
<div class="footerdiv">a</div>
</div>
</body>
</html>
Hi...new here. I am formatting a small page for mass email and have a div under the header that holds the date. It should be simple but I cannot get it to fill the entire space with color...at least not in Firefox. It looks fine in IE. Go figure. IE is the one that usually gives me trouble. Anyway, I have done just about EVERYTHING I can think of....to no avail. Can anyone give me a fresh perspective and let me know what's wrong? http://www.msbanet.org/emails/moasbo/emails/060627_workshops.htm The css is embedded. Thanks, Jeralyn I dont think you can wrap a <div> inside <a>, but is there any way to make an entire <div> area "linked" ? One idea - Im sure i can hook up an onclick event with javascript, but how would i change the mouse prompt when the user moves thier mouse over it ? For caching purposes and/or maximum performance would it be more beneficial to have the same large css document referenced in every page on my site or to have a much smaller different one referenced for each page in my site. I want to have a DIV stretch to cover the entire screen, regardless of the user's resolution. Can this be done? Hey guys. I have a basic div and want an image to show up on the top of the div only. Here it is. Code:
#container #news {
top:3px;
width:260px;
height:194px;
background-color:#eeeee2;
float:left;
margin-bottom:4px;
background: url(/images/section_top.gif) no-repeat top left;
}
The image spans the width of the div and is only about 20 pixels tall. so it should show up, but the rest of the div should display, obviously. The image does indeed show up at the top. However, the rest of the div gets covered in white for some reason. Anybody know what's up? Thanks in advance. I'm using this html: Code: <div id="titlebox">
<div id="title">
<img src="images/title.png" alt="Garden Pub & Grille" />.
</div>
</div>
with this css: Code: html, body {
font-family: Century Gothic;
text-align: center;
background-color: #DEF9FA;
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
top: 0px;
position: relative;
}
body > #container {
height: auto;
min-height: 100%;
min-width: 100%;
}
#titlebox div {
background-color: black;
position: absolute;
min-width: 100%;
margin-left: 0px;
margin-right: 0px;
left: 0px;
top: 0px;
height: 64px;
z-index: 1000;
}
#title div {
width: 1000px;
background-color: black;
}
Trying to get a black bar across the top with an image centered in it. Problem is, when the page is smaller than the content and there is a horizontal scrollbar, the black bar only goes to the edge of the window, but when you scroll right, it dissapears and is cut off. I have a similar setup on the bottom of the page that works correctly (a table with links is inside that one). Why is this not working? Thanks. URL Image doesn't seem to be showing up, link: http://img15.imageshack.us/img15/5697/29946518.png Hello all. I am working on a sign on page that uses two divs nested in a table. I have a header above them, and a footer below, and I want the divs (which have a nice gradient background) to stretch all the way down to the footer, regardless of the amount of content. In a simplified format, I have: Code:
<table cellpadding="0" cellspacing="0" style="height:100%; padding-top:20px; padding-bottom:20px; width:976px;" border="0">
<tr>
<td class="wrapper1" id="wrapper1" valign="top">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td valign="top" width="100%" style="border:3px dotted black; height:100%;">
<table style="width:100%; height:100%;" border="1">
<tr>
<td valign="top" style="height:100%;">
<xsl:call-template name="bodyContainerTemplate"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
The tables stretch just fine. Where I am running into problems is in my bodyContainerTemplate. That template looks like: Code:
<!--bodyContainerTemplate-->
<div class="bgcolor1" style="width:976px; height:100%; border:2px solid;">
<div class="login_bg" style="height:100%;" id="login_bg">
<table width="100%" height="100%" border="0" style="position:relative;">
<tr>
<td>
My content goes here
</td>
</tr>
</table>
For some reason, once it gets into the template, height:100%; doesn't work anymore, and the divs simply stretch big enough to make room for the content. What styles am I missing for those divs to be 100%? I have messed with: min-height height:auto, relative, etc. margin:0 and a few other things, none of which are seeming to make a difference. Thanks! hi, i m trying to design a page with a logo at the top.just like this site. http://richgirlstore.com/xcart/home.php but i want the logo to be displayed in a way that it covers the entire width of the browser window when a user opens the page.the screen sizes are different depending on the type of monitor used by people.so how can i fix this problem.thanks... Hello, I have a header which extends to 100% the width of the browser. I am trying to get the footer to do the same but it's only about 90% the browser's width. Here's my CSS for the footer: Code: #footer {
width:100%; /* this will create a container 80% of the browser width */
background: #327ec1;
margin: 0 0 0 -38; /* the auto margins (in conjunction with a width) center the page */
border: 0px;
text-align: left; /* this overrides the text-align: center on the body element. */
height:120px;
}
#footer_container {
width:950px; /* this will create a container 80% of the browser width */
background: #327ec1;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0 px;
text-align: left; /* this overrides the text-align: center on the body element. */
height:120px;
}
the site ishere any ideas? thanks |
|||||||