|
CSS - How Do I Make A Border Around My Page?
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 Similar TutorialsI 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! Anyone knows how to make the standardized border as the attached file ? cheers. 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? 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 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> I can only get my page to display correctly in IE6. Not IE7 or Firefox. If anyone could help, it'd be much appreciated! Basically, the borders on the left/right don't stretch all the way down the page in IE7 and Firefox (like they do in IE6). Here is the website: http://www.stacyandmatt.com/ Here's the simple HTML: Code: <body>
<div id="container">
<div id="maincontent">
<div id="header">
<p> </p>
</div>
<div id="navBar">
<p> </p>
</div>
<div id="mainRight">
<img src="images/mainPic.jpg" />
</div>
<div class="spacer"> </div>
</div>
</div>
</body>
And here is the CSS: Code: html, body {
background: #000;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
color: #F09;
height: 100%;
line-height: 1.5em;
}
#container {
background: #000;
height: 100%;
width: 780px;
margin:auto;
padding: 0;
text-align: justify;
}
#maincontent {
background: #000 url(../images/borderTest.jpg) repeat-y top left;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
border-right: 6px solid #F09;
overflow: visible;
}
#header {
background: url(../images/header.gif) no-repeat top left;
width: 100%;
height: 141px;
margin: 0px;
padding: 0px;
}
#navBar {
width: 155px;
float: left;
padding: 20px 0px 0px 40px;
margin: 0px;
color: #000000;
}
#mainRight {
width: 555px;
float: right;
padding: 20px 5px 0px 5px;
margin: 0px;
}
.spacer {
clear: both;
}
Thanks! Need some help defining a border around my index page. It shows up and works fine in IE but when I switch to FF/Netsxcape the page border is short of the content. Here is my page: [Not an actual business...just a learning project] My Home Page Here is My CSS file: My CSS File Now I ran both my HTML and CSS through the W3C Validators and all comes back perfect. (I know there is some small "clean-up" issues in my code, but I don't think it's relevant to this border issue...Maybe it is?) Anywhooo, when this page is displayed in FF or Netscape the bottom 1/3 of page content runs below my border...but shows up fine in IE. If there is a better way, (than defining the whole <BODY> as a <DIV> element) please enlighten me! Thanks for helping me learn...(in advance) PWD Floats always cause me some consternation. This one sort of works, except for the border and the padding/margin (which may be related to the border issue). I've only checked this on FF on a Mac so far, btw. Right now the divs do float, but the left side of the border is a million miles away. Solving the border issue might take care of the padding/margin between #caravan and #rally (right now each tweak does nothing). Also, is it possible to get the text at the end to flow under the property changes box? Probably not, as I set a width of 65%, but that was the only way I knew to get the two boxes to float up...I guess I'd have to make that last paragraph its own div to get the text to go all the way across? The page I'm trying to figure out is here and the relevant CSS is #caravantop { background-color: #ffefca; margin: 0; padding: 1.2em 2% 0 2%; } #caravan { float: left; width: 63%; background-color: #ffefca; padding: 0; margin: 0 2% 0 2%; } #rally1 { padding-right: .1em; border: 1.2px #775b36 solid; margin-right: .5em; margin-bottom: 1em; } #rally1 h4 { margin-bottom: .6em; } #rally1 p { font-size: .7em; padding-bottom: 0; margin: .6em; } #rally1 ul { list-style-image: url(../images/icons10_webpage.gif); list-style-type: circle; text-decoration: none; font-size: .7em; margin-bottom: 1em; margin-left: 2.5em; } #rally1 li { margin-bottom: .4em; margin-left: 1.7em; } #rally1 li.lastli { margin-bottom: 2.5em; } /*#rally1 ul.nohouse { list-style-image: none; list-style-type: none; text-decoration: none; font-size: .8em; margin-bottom: .3em; margin-left: 0; }*/ #rally2 { padding-right: .1em; border: 1.2px #775b36 solid; margin-right: .5em; margin-bottom: 1em; } #rally2 h4 { margin-bottom: .6em; } #rally2 p { font-size: .7em; padding-bottom: 0; margin: .6em; } #rally2 ul { list-style-image: url(../images/icons10_webpage.gif); list-style-type: circle; text-decoration: none; font-size: .7em; margin-bottom: 1em; margin-left: 2.5em; } #rally2 li { margin-bottom: .4em; margin-left: 1.7em; } #rally2 li.lastli { margin-bottom: 2.5em; } If you take a look here http://www.challengeyourdiet.com/login you may notice that the page does not go all the way down on big screens. I would like my footer to automatically fall to the bottom of the page no matter what screen size someone has. Any ideas? Thanks! I just want a simple way to make all fonts on the page the same. For example, the following does NOT seem to work. Should it? in the style sheet: Code: BODY {font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
}
I also tried putting the font size, color and face in a class and using something like <td class="fontInfo"> But that doesn't seem to work (i get the default browser font--Times.) Any help please thank you. I have ads on the side of my website that when clicked open a div with a larger ad. The problem is that if a user has scrolled the page down and then clicks the ad, the div shows at the top of the page out of view, how can I fix this. I have tried position:fixed, relative and inherit as well as absolute but nothing works. Tim 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>
Ok, I have a website that i'm building with about 25 pages, and I keep on having to change the side navigation bar, and then I have to copy and paste it on each page to update it. IS THERE A WAY FOR ME TO ONLY UPDATE IT ONCE AND IT UPDATES TO ALL THE PAGES? Is the answer css? or i-frames(or whatever it's called) If so, then how would I do this?! PLEASE HELP! I have stripped the whole page down to the bare bones and can not seem to get the center DIV to be the same height as the rest of the page. Is there a simple fix for this or would I need to redo it completely ? The left and right content is not always the same so their height is also variable. I have a min-height in the center DIV, and using height 100% does not seem to work either. Can anyone suggest what I could change to make it the same or suggest how I redo this so it is. Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; }
.bodyContainer { background-color: blue; height: 100%; width: 71.875em; margin: 0em auto; padding: 0em 0em 0em 0em; border: 0em solid #000; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.menu { background: #3F65CC; margin: 0em; text-align: center; font-size: 1.1em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.313em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.clearfloat { clear: both; }
.leftSidePanel { background-color: blue; float: left; width: 8.835em; min-height: 43.75em; padding: 0.313em 0.625em 0em 0.625em; }
.mainContent { background-color: lightblue; margin: 0em auto; text-align: center; border-left: 0.5em solid #ddd; border-top: 0.3em solid #ddd; border-right: 0.5em solid #ddd; float: left; width: 49.4em; min-height: 43.438em; height: 100%; padding: 0.625em 0.625em 0.625em 0.625em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.formWrapper{ margin: 0em auto; min-height: 43.375em; border: 0em dashed #E5E5E5; padding: 0em; text-align: left; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.rightSidePanel { background-color: blue; float: right; width: 8.835em; min-height: 43.75em; padding: 0.313em 0.713em 0em 0.313em; }
.footer { background-color: #ddd; margin: 0 auto; text-align: center; padding: 1em 0em 0em 0em; border: 0em solid #fff; font-size: 0.875em; }
--></style>
</head>
<body>
<!-- bodyContainer start -->
<div class="bodyContainer">
<!-- menu start -->
<div class="menu">
<div class="clearfloat"></div>
</div>
<div class="clearfloat"></div>
<!-- menu end -->
<div class="leftSidePanel">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- mainContent start -->
<div class="mainContent">
<div class="formWrapper">
<br><br><br>
</div>
</div>
<!-- mainContent end -->
<div class="rightSidePanel">
</div>
<!-- Footer start -->
<br class="clearfloat">
<div class="footer">
some text
</div>
</div>
<!-- body container end -->
</body>
</html>
How to make images that are right aligned with the web page window? Anyone helps? Thanks in advance. i have a base page that i use for a multi-page site, but i'd like to be able to insert more and more content, and have the page size accordingly. i think the problem is that the content is technically floating...or something, it's a cold fusion search result in a cart. i don't know, i might be asking for a miracle here- if you have an idea, let me know. i am trying to use CSS to position an embeded .swf rotating cube so that it is always at the bottom of a webpage and is unaffected by scrolling. i've managed to make it start out at the bottom but it always scrolls up with the scroll bar. i realize ie6 has trouble with fixed postioning, so i was wondering if anyone had any ideas on how to get around it without using javascript? here's my page: http://www.myspace.com/marx0i0 and here are some examples of what im trying to do: http://bonrouge.com/test/fixed.htm http://www.howtocreate.co.uk/fixedPosition.html finally, here is my code: <embed allowScriptAccess="never" allowNetworking="internal" SRC="http://www.geocities.com/marx0i0/untitled.swf" HEIGHT=200 WIDTH=200 STYLE= "position: absolute; center:0px; bottom: 0px; overflow: auto;" WMODE= "transparent"> thanks very much for any help! Hello everyone! my apologies if this is a dumb/old question - I did a search but didn't find anything like this... Question is, how can I make a page within an Iframe inherit the parent pages css? Reason is, I have a site with a css switcher (using php - a copy and paste job, still learning!) that uses iframes. Or would I be better ditching the iframes and using hidable DIV's? cheers guys! 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... When I switch between pages with images on them, everything is fine. When I switch between pages without images on them, everything is fine. But when I switch to or from a page with a picture on it to or from a page without a picture on it, the page jumps sideways a bit. Most ppl probably wouldn't even notice this, but I find it really annoying and want a good way to get rid of this. I'm using a centered fixed width css style so I have no idea how this could be happening. I'll just add the css if needed: (Any random advice or advice on how to make buttons without photoshop would be awesome too!) Code: body {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
td {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
a {
text-decoration: underline;
font-family: Verdana;
font-size: 14px;
}
a:link {
color:#2828FF;
}
a:visited {
color:#2828FF;
}
a:hover {
color:#AFAFFF;
}
a:active {
color:#AFAFFF;
}
img {
border: none;
}
#wrapper {
width: 950px;
margin-left: auto;
margin-right: auto;
}
#title {
width: 100%;
font-size: 27px;
font-style: italic;
background-image: url("images/bgwinterowl.gif")
}
#links {
width: 100%;
padding: 15px;
}
#body1 {
border: 4 double;
border-color: red;
background: #FFFFF0;
width: 100%;
text-align: left;
padding: 15px;
}
#body2 {
background: #FFFFF0;
text-align: left;
padding: 15px 15px 15px 100px;
width: 500px;
}
|
|||||||