|
CSS - Setting A Border Around Entire Site
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 Similar TutorialsI 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> 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. Hi guys, For a pure CSS site, is it depreciated to have a border="0" tag in <img elements? (My reasoning is that if one browser doesn't support CSS, it will show the user images with ugly borders... that's anyway the default behavior in IE and FF). Thank you 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... 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 ? 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 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? 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, 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... 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. 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! 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. 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 example is at http://bluewebpages.com/arch.php I am fairly proficient at coding css and think it's about time to clean(organize) it all up, even though it does validate. Anyway I was wondering if someone could please help me with the overlap problem for the right (smaller) column. I want the entire main content of the page, the part before the footer, to extend down when there is more content to side, not just the left/main content side. EDIT: Fixed .. thanks! The `clear:both;` was what it needed When the page loads initially, the bottom portion of the div/ul is cut-off. However, once I start sliding through the different sections, the entire element is visible. Odd thing is, it works just fine 10% of the time...all browsers (ie, ff, chrome) seem to be impacted similarly. Webpage: hxxp://jennifer.e-carleton.com I am using loopedSlider for my base slider code (hxxp://nathansearles.com/loopedslider/) Not sure if this is a JS or CSS issue, but my gut says CSS...thanks for your help, JC Hi, Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance. Here is the CSS code and Html code for your reference: CSS: Code:
<style type="text/css">
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}
.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}
.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}
HTML Code: Code: <table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;"> <tr> <td background="menubg.jpg" align="center"> <div class="horizontalcssmenu" align="center"> <ul> <li><a href="default.htm">Home</a></li> <li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> <li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> <li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> <li style="border-left:1px solid black"><a href="default.htm">Service</a></li> <li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> <li style="border-left:1px solid black"><a href="default.htm">References</a></li> <li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> <li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li> </ul> </div> </td> </tr> </table> Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated. I would like to set up a table with a different border than the cells inside it. Here's my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
TD {border: 1px solid #ccc}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different? |
|||||||