|
HTML - Centering Div Layer
Here's the CSS code:
HTML Code: <style type="text/css">
<!--
body {
scrollbar-arrow-color: #425B5E;
scrollbar-base-color: #98A5A6;
scrollbar-face-color: #98A5A6;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #425B5E;
scrollbar-3dlight-color: #DEE7E8;
scrollbar-track-color: #DEE7E8;
scrollbar-darkshadow-color: #DEE7E8;
}
div#content {
width: 600px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.header {font-family: trebuchet MS; size: 11px; color: white; font-weight: none;
BORDER-RIGHT: none 1px solid;
BORDER-TOP: none 1px solid;
BORDER-bottom: white 1px solid;
BORDER-LEFT: none 1px solid; background-color: #660000;}
.head2 { font-family: verdana; font-size: 11px; color: #4A4A5B; background-color: #FFFFFF; border: #4A4A5B; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 1px; border-bottom-width: 1px; text-align:center; background-repeat: no-repeat; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;}
.head { font-family: verdana; font-size: 14px; color: #64657E; background-color: none; border: #75AAB0; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; text-align:center; background-image: url(head.gif); background-repeat: no-repeat; font-weight: bold; height: 26px; padding-top: 4px;}
b { color: #6D82A1; font-size: 11px; font-weight: bold; }
A:link
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:visited
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:active
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:hover
{color:#5b1435;text-decoration:underline; cursor:default; font-weight: bold; border-bottom: 1px #000000 solid;}
body
{background-color: gray;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: left;
font-family: arial;
color: black;
margin: 0px;
letter-spacing: 0px;
font-weight: normal;
font-size: 12px;
cursor: default;}
td { font-family: trebuchet ms; font-size: 11px; color: black; font-weight: normal; }
-->
</style>
And here's the text itself; HTML Code: <html>
<head>
<link rel="stylesheet" media="all" type="text/css" href="simple/simple.css" />
<script src="simple/click_menu.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Ironman Football Academy | Don Bosco Prep</title>
</head>
<body onload="clickMenu('menu')">
<center><img src="mainimage.png">
<ul id="menu">
<li class="sub"><a href="#nogo1">Home</a>
<ul>
</ul>
</li>
<li class="sub"><a href="#nogo1">Information</a>
<ul>
</ul>
</li>
<li class="sub"><a href="#nogo1">Registration</a>
<ul>
</ul>
</li>
<li class="sub"><a href="#nogo1">Don Bosco Prep</a>
<ul>
</ul>
</li>
</ul>
</center>
</div>
<div id="content" style="position: absolute; z-index: 2; margin-left:auto; margin-right:auto;
top: 303px; width: 600px; height: 0px; overflow: visible">
<div class="header"> Welcome</div>
We plan to change C-5 plane in such a way that the limitations and hazards involved with them might disappear or be
lessened, advancing the study of aeronautics and its applications in technology. As the group researches the flaws
associated with the structural mechanics, equipment, materials, and technology, we will develop a plan to inspire a
more efficient plane. <a href="http://donboscoprep.org/istf/skystar/component2/task1.php"">Task 1</a>
</div>
</html>
Why isn't the text (with the header welcome) not centered? Similar Tutorialsdidn't get a reply in the css forum, here is the site.. http://www.pomatrock.brevard.k12.fl.us/goodnews.html the css file is attached as a word doc. if you go to any of the years..(2k5,2k6 etc) there is a div on the left side, used to cover up the dark brown with a light brown. Problem is, in Firefox it shows up way too long and adds a long extension of brown from the bottom of the page, but in IE it looks just fine. Some help would be greatly appreciated. :-D thanks. hi all, is there a way to have a div layer 100% in height and 100% in width? thanks I created the css below. It is a list that contains my navigation buttons on the left hand side of the page. The buttons work good. Now, I want to add some pictures to the left of the buttons. When I do this a space becomes apparent between the buttons. (top & bottom). I tried adding a layer but like I said it creates a space between buttons. Any help is appreciated. Thanks,. .Blockhead #navcontainer { width: 200px; } #navcontainer ul { margin-left: 0; padding-left: 0; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a { display: block; padding: 3px; width: 160px; background-color: #669966; border-bottom: 1px solid #eee; ; background-image: none } #navcontainer a:link { color: #FFFF00; text-decoration: none; } #navcontainer a:hover { color: #33FF99; ; background-image: none ; background-color: #669999 } #navlist a:visited { color: #CCCCCC; text-decoration: none; Hello all, I'm having some trouble getting html to display in my <layer> tags, for example if I use the code: HTML Code: <layer src = "myfile.html"> The file that I'm trying to display does not show, even though it is in the same local directory. Has anyone else ever tried this successfully? Thanks! This is kind of hard to explain so I hope you stay with me. I have a site and everytime you navigate to a page everything is loaded. The same images the same background everything. So I firgured to help save the load time of pages I would make a frameset. Since the Only thing the on my site that changes is one layer with new text. Unfortunately, the frameset won't work. I use hidden layers as a drop down navigation for a few buttons when you hover over them. So if I were to use a framset the layer would then drop down but the mainframe would cover up the drop down navigation (which is a layer). I tried figuring out to get a layer to show up over all frames but I had no luck. I also messed around with z index but that still didnt work. So my question is... is it possible to get a layer to change but not the entire page? Here is the site, www.griffithband.com If you look you will see that layer17 is the only layer that changes. Is there a way to get that to be the only thing to change when going to a new page rather then the entire page? Layers 31, 30, and 29 are the drop down navigation, and the reason why I cannot use the frameset as they will not show becuase they go underneath the mainframe. I'm in no way very fluent with any coding. I only work on this site and thats it. Thanks in advance. Hello, Please point me in the direction of button-layers. In other words: How do I make a whole layer act as a link so that when a user clicks anywhere within a layer (and not ONLY on the link in the center of it), the whole layer acts as a button? Thank you for your expertise! this issue has been solved I'm trying to centre and image with in a layer, both vertically and horizontally but I'm having no joy. I've tried normal HTML but would I be better off creating a second CSS? Any help on the coding with either would be a great help! Ian i know.. stupid question.. i should know how to do this.. but i dont.. how do i make a layer appear when i link is clicked? i want to have [?] next to something, and when clicked, a layer becomes visible that shows some text, then when an X on the layer is clicked, the layer becomes invisible again i know it has to do with visible=true/false.. but idk what to do.. help please Hi All... I'm building a website in Dreamweaver 8. I have one layer in the site that contains a form field for collecting email addresses. The layer is placed on top of an image. When I horizontally resize my browser window the layer moves. When I resize the browser vertically it stays in place. I've tried switching the layer properties from relative to absolute and back again but it doesn't make a difference. Could someone please have a look at the page and see if they have any suggestions? The link is http://www.sweetdivinemusic.com/storycollective This is the last piece I need to fix before taking the site live. Thanks a ton folks! Robert I want the border to fit the entire way around the text and the image. Currently the border only fits around text and image horizontally and it cuts some of the image vertically. How can I resolve this? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.holder{
border: solid 1px black;
width: 800px;
margin: 20px;
padding: 5px;
}
.holder img{
float: right;
}
</style>
</head>
<body>
<div class="holder">
<img alt="google image" src="http://nathan-sanders.com/wp-content/themes/portfolio/images/portfolio/nsold-thumb.jpg">
<p>text text text text text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
</p>
</div>
</body>
</html>
Thanks in advance Calypso I know IE7 sucks but i need my website to be viewable in it. First look at my site in Firefox, then IE7 if you have it. The menu shows up properly in firefox, but not in IF7. Any ideas how to make IE7 show the menu properly? Thanks link: http://www.dynamitedave.com/redesign/index_1.html I wanted my page appear in such a way that when an index page is loaded the login screen appear and the background is freeze till the login is accepted then the login screen dissapear. How can i achieve this ? I tried looking for similar example but i doesnt seems to be able to find any. i am looking for something similar to this http://www.pageflakes.com/default.aspx Hi, I'm working on a project and I want layers stacked to be visible and invisible through a button. Anyone here that buys books on Amazon knows what I'm talking about. Some books in Amazon have a "look inside" that when you click it opens like a layer where you can see some content of the book. This layer or whatever it is has an X button to close it. This is what I want to do, but I don't have an idea of how this can be accomplished. Any help will be appreciated. Thanks H guys, I have a page that has a div layer which contains a table of 2 columns and numorous rows. I have managed to get the scrolling to work but i am having trouble keeping it in one place in all browsers. whenever i publish it through diferent browsers - i.e for examples shifts the entire div to the right and up. How do i fix the position of this div? Please help... Hi guys, I have a problem with the layers, i'm trying to make a button that have a behavior which make visible an invisible layer, perfect, it works, but i need that this happen over a video qt, but te video doesn't allow that. I mean, if under tha layer are an image or text, the layer is over that items, right, but when under the layer are a video qt or a flash movie, the layer apear under them, i tried inclusively with the "z-index" but it didn't work either; if you know how to do that, i would appreciate any help about it. Thanks... hi all, i am having some issues with the show/hide div commands, i was hoping someone could help me out. below is the code i am using such that depending on what image you click on, a different div is shown. this works fine, but i would also like to change more than one div located in a different table cell - not sure if this is clearly explained, hopefully the code will be more concise - javascript - Code: <script type="text/javascript">
<!--
function layerchange(szDivID, iState)
{
if(document.layers)
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById)
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all)
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}
</script>
body html HTML Code: <div id="text">
<table width="775" height="215" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="258" valign="top">
<div class="layer_change">
<input type="image" src="images/text/sml/small_1.gif" onclick= "layerchange('div_one',1);layerchange('div_two',0);layerchange('div_three',0); return false;" value="Hamper 1" />
<input type="image" src="images/text/sml/medium_1.gif" onclick="layerchange('div_one',0);layerchange('div_two',1);layerchange('div_three',0); return false;" value="Hamper 2" />
<input type="image" src="images/text/sml/large_1.gif" onclick="layerchange('div_one',0);layerchange('div_two',0);layerchange('div_three',1); return false;" value="Hamper 3" />
</div>
<div id="div_one" class="one">
Small Hamper Contents
</div>
<div id="div_two" class="two">
Medium Hamper Contents
</div>
<div id="div_three" class="three">
Large Hamper Contents
</div>
</td>
<td width="516"><table width="516" height="215" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="258" height="190" style="vertical-align:top">
<div id="div_one" class="one">
Small Hamper Contents
</div>
<div id="div_two" class="two">
Medium Hamper Contents
</div>
<div id="div_three" class="three">
Large Hamper Contents
</div>
</td>
<td width="258" height="190" style="vertical-align:top">
<div id="div_one" class="one">
Small Hamper Contents
</div>
<div id="div_two" class="two">
Medium Hamper Contents
</div>
<div id="div_three" class="three">
Large Hamper Contents
</div>
</td>
</tr>
<tr>
<td><div align="center"><a href="images/structure/nifty_hampers_logo.gif" rel="lightbox" title="Birthday Hamper">Click here to enlarge</a></div></td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</div>
any ideas....? my hyperlink on the flashbutton is not working in FF (the button is placed in a div layer) Can someone help me?? Thank you Greets Denise |
|||||||