|
CSS - Need To Push A Flash Behind A Menu.
I have a drop down menu that drops behind my flash element.
is there a way to push the flash behind the menu in CSS? Similar TutorialsI have a site with a menu that works perfectly in every single browser except IE6. Instead of the menu going over top of the flash, it enlarges the menu bar and just displays within that. I've tried SWFObject, as well as wmode=transparent and opaque for the flash movie, and they work great for all browsers other than IE6. Does anyone know a fix for this? NEVER MIND So, I'm workin on a site that has a drop down menu in CSS. It worked fine when I had a banner (gif). Dropped down over the image perfectly. But now I changed the .gif to an animation and made it an .swf file. Now the drop down menu drops down behind the flash banner. How do I make the drop down appear over the swf? Thanks. Hi all, I have a problem with a site I am developing. I am using CSS and all was well until I placed a Flash Movie on the homepage. The general layout is as follows: Code: <div id="wrapper"> <div id="banner"></div> <div id="nav">links etc</div> <div id="content">Content text etc</div> <div id="flashMovie">Flash movie here</div> <div id="footer"></div> </div> The 'nav' div uses a ProjectSeven popmenu which works fine. It's Z-index is something like 2000. The dropdown menu hides behind the 'flashMovie' layer every time, but appears in front of the content layer??? I have tried messing with the z-index of the 'flashMovie' div but to no avail. I have tried absolute positioning, floats, everything I can think of but with no success. Any advice on what the problem could be would be greatly appreciated. I apologise for not having the actual site online, but Its under development on my other machine. Thanks in advance, Duncan Hi, folks. I'm running into a pretty serious problem to which I'm really, really hoping someone will know a solution. We use a menu system on our site which is made up of layers. It provides for flyout-hierarchical menus, and up until now has caused me no grief. However, now that I've embedded a flash movie onto a particular page the layers that comprise the flyout menu items are hidden beneath the Flash movie. I've tried putting the object tag inside a div and setting the z-index of the div to 1 (and also to -1) but that didn't work. Can anyone take a look and let me know if they have any ideas? http://www.unbc.ca/test.html Cheers and TIA, Pablo My problem: There's a banner at the top, but it won't push to the very top or left of the page. There's a padding on the entire page somehow, and I have no idea how to get rid of it. In addition, my nav bar will not come in direct contact with my #main div. I have no idea why, I can't figure it out. I've tried margin:0; on a lot of them, and I have nothing. No idea how this isn't working. Thanks guys! HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <link rel="stylesheet" type="text/css" href="layout.css"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <img src="placeholder.jpg"> </head> <body> <div id="wrapper"> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Cart</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!--Close #nav--> <div id="main"> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> </div> <!--Close #main--> </div> <!--Close #wrapper--> </body> </html> CSS: Code:
@charset "utf-8";
/* CSS Document */
body {
background-color:#000;
font-family: arial, helvetica, sans-serif;
margin: 1em;
}
#wrapper {
margin: 0em auto;
}
#main {
/* margin-left: 6em;*/
background-color:#333;
color:#FFF;
}
/*
NAV PORTION
*/
#nav {
margin-right: 5em;
text-shadow:#000 0.2em 0.2em 0.2em;
}
#nav ul {
list-style-type:none;
display:inline;
}
#nav ul li {
display:inline;
}
#nav a {
display: inline;
color: green;
background-color: navy;
/* width: 5em;*/
padding: .2em .5em;
text-decoration: none;
font-size: 1.25em;
border: .1em solid #F0F;
margin:0;
}
#nav a:hover {
background-color: blue;
color: dark green;
}
Hi! I wanted to add image to the right of the entry form. I managed to do it, but now all stuff is pushed down. Is there ant way to put form and image about 200px up? Yiou may see page he degis.lt/index.php?option=com_contact&view=contact&id=1&Itemid=3 Okay so i have this: http://www.prxa.info/area51/ A left and right float, is there a way to push them together? I can't seem to figure out the reason that they are so far apart? Hi, This is my first post, and I am grateful for any help. I am new to CSS and I have read and absorbed Simon Collison's very good book "CSS Web Development." My question is quite simple. I have a background-image associated with an ID (shown below) which successfully lays down the image but it does not push text. #mainmenu{ background-image: url(images/mainmenubg.jpg); background-repeat: no-repeat; background-position: top center; text-align:left; } ie, my html or php file might read: <div id="mainmenu> <p>Some text blah blah </div> and the text goes right over the image. Is there a "best way" to ensure that the text appears below the image? I can apply a height variable to the id, and then place the text below the /div, which works, but it is not flexible, ie, if I change the size of the image, I need to adjust the height value, and I am trying to avoid this. Any help would be greatly appreciated. Thanks, Pradhan Suppose I have: 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>
<script type="text/javascript">
//**********************************************************
// This function adds another field to the form based on
// what field name is passed in.
//**********************************************************
function add_item(field) {
if(!document.getElementById) return; //Prevent older browsers from getting any further.
var field_area = document.getElementById(field + '_field');
var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
// Find the count of the last element of the list. It will be in the format '<field><number>'. If the
// field given in the argument is 'friend_' the last id will be 'friend_4'.
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;
if(document.createElement) { //W3C Dom method.
var li = document.createElement("li");
var input = document.createElement("input");
input.id = field+count;
input.name = field+count;
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
field_area.appendChild(li);
} // end if(document.createElement)
else { //Older Method
field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
} // end else
} // end function add_item(field)
//**********************************************************
</script>
</head>
<body>
<form>
<table>
<tr>
<td><label for="images">Images (for banner and sidebar)</label></td>
<td>
<ul id="images_field">
<li><input type="text" id="images_0" name="images_0" /></li>
</ul>
</td>
<td><input type="button" id="button" value="Add another image" onclick="add_item('images');" /></td>
</tr>
<tr>
<td colspan="3">
<label for="misc">Misc. (anything that falls outside of the above categories)</label><br />
<textarea rows="3" cols="3" id="misc" name="misc"></textarea>
</td>
</tr>
<tr>
<td colspan="3"><input type="submit" id="submit" value="Submit project" /></td>
</tr>
</table>
</form>
</body>
</html>
When I click the add another image button, it will create a new form field for another image. But it keeps stacking them on top of the elements below it. I would like for everything below it to be shifted down when a new element is inserted. I tried the clearfix method but couldn't get it to work. Thoughts? Edited to say that this behavior only appears in FireFox. Please look at this page http://www.tmhdesign3.com and this one http://www.tmhdesign3.com/real-estate-broker.asp The first one used a flash file, the second does not. On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success... Hello, I've had an issue for a while where when the text on the page gets to a certain point it just overlaps the Copyright Information which I want to stay at the bottom of the page. --- (I did look at older forum posts, but with no resolve) --- In the CSS code, I have the copyright (a.k.a. .footerlinks) set with an "Absolute" Position which I know is probably "part of" or "the" problem, but if I change the Positioning the footer ends up on the top of the page or somewhere I don't want it. (** Unfortunately due to New Members not being able to post hyperlinks I am unable to give a link to the webpage or CSS page for viewing. **) But, I have included the code snippet I use for the Footer itself and the "container" and "body" code whether its needed..... body{ margin:0; text-align:center; background-color: #FFFFFF; } .container{ position: relative; width:965px; margin:0 auto 0; height: 100%; } .footerlinks{ position: absolute; top: 1140px; left: 237px; width: 551px; font-size: 75%; font-family: verdana; text-align: center; } CSS is quite new to me so be as specific as possible as to what I should be looking at changing in my code.... Your assistance is much appreciated! Thanks! Dan - I'm attempting to get it so when the main content div exceeds my min-height specifications, that it expands the div, which in turn expands the container with an absolutely positioned footer at bottom:0;. Works fine in all newer browsers with the exception of IE7. What do I need to do to get it to expand in that version? Here is the link to the page: http://www.chcs-ut.com/chcs-new.php And the stylesheet: http://www.chcs-ut.com/css/style.css Also, I would really rather not have to specify a min-height for my main content div. I'd rather just have it automatically fill to 100% of the main container that is set to 100% height and min-height, so that the footer automatically appears at the bottom of the screen if the content is not large enough to push it down there by itself. Can't seem to get it to work, though (in ANY browser) without specifying a min-height for the main content div. Problem with that is different resolutions/browsers would require a different value, so hard-coding it isn't a desireable solution. Any thoughts? EDIT: Both problems were fixed by adding "height:auto !important" to my main content container, instead of specifying a "min-height". Works across the board! Is there a way I can have a div on my page that does not expand the window area (creating scrollbars) when the browser window is too small? I ask because I have a three-column layout, but the left and right columns are merely aesthetic-- they hold no content. The center column is 1000px, which is my limit. So if a user has a screen resolution of 1024 pixels wide, I don't want the left and right columns to cause there to be scrollbars. If my far-left and far-right column divs weren't a set width, that would solve my problem-- but then I need multiple background-images, which is only compatible with Safari. I could also make the <body> have "overflow:hidden", getting rid of scrollbars altogether... but then the valuable content on the middle column would be hidden if the browser window is too small-- plus you wouldn't be able to scroll down! Any ideas? Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: 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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page I've been looking around for hours now, and I can't find a way to get rid of a slight gap to the left of my flash nav bar (which is inserted in a nested div). Everything is centered and verticaly fluid. code for flash div= #flash { vertical-align: top; margin: 0; padding: 0; height: 111px; width: 875px; } code for centercol div= #centerCol { margin: 0 auto; padding: 0px; width: 875px; background-color: #ffffff; height: 100%; background:url(top_04.jpg) repeat; } html for embeding= <div id="centerCol"> <div id="flash"><OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="100%" HEIGHT="100%" id="top_bar" ALIGN="center"> <PARAM NAME=movie VALUE="top_bar.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=exactfit> <PARAM NAME=wmode VALUE=opaque> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="top_bar.swf" quality=high scale=exactfit wmode=opaque bgcolor=#FFFFFF WIDTH="100%" HEIGHT="100%" NAME="top_bar" ALIGN="center" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT></div> some content </div> Thanks. Hi, Is it possible to place a div on top of a flash animation? When i place it on top of the flash, it dissapears, but shows up on the rest of the page. this is the code i am using: Code: <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:100; left: 114px; top: 359px; visibility: visible; overflow: visible;"><img src="flap.gif" width="146" height="18"></div> I am using a basic css layout but i am having a problem when it comes to adding the flash. I need it to stay in the wrapper.here is the code im using :- Code: body {
background-image: url(bg2.jpg); font: 76% verdana,arial,tahoma,helvetica,"sans serif";
}
* {
padding: 0px;
margin: 0px;
}
HTML {
MARGIN-BOTTOM: 1px; HEIGHT: 100%;
}
#wrapper {
MARGIN-LEFT: auto; WIDTH: 700px; MARGIN-RIGHT: auto; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left;
}
ul {
margin-top: 1.1em; margin-bottom: 1.1em; line-height: 130%;
}
ul li {
padding-left: 13px; list-style-type: none; margin: 0px 0px 0.15em 1.5em; color: #327EBE;
}
a {
color: #4f9cef; text-decoration: none;
}
a:visited {
COLOR: #FF9523; TEXT-DECORATION: none;
}
a:hover {
COLOR: #FF9523; TEXT-DECORATION: none; border-bottom: 1px dotted #7CD300;
}
a:active {
COLOR: #333333;
}
#img {
padding-bottom: 0px;
}
#nav {
background-image: url(gradientbg.gif); height: 34px;
padding: 0px 0px 0px 0px;
}
#navlist li {
display: block;
list-style-type: none;
padding: 0px 0px 0px 0px;
font-weight: bolder;
float: left;
}
#navlist a {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 15px;
padding: 10px 10px 10px 10px;
font-weight: bolder;
}
#navlist li a:hover {
background-color:#FFFFFF; padding: 12px 10px 12px 10px;
font-weight: bolder;
}
#navlist a:hover {
color: #AF9981;
background-color: #FFFFFF;
font-weight: bolder;
}
#col1 {
float: left; WIDTH: 700px;
}
#col1content P {
FONT-SIZE: 10pt; Font-family:tahoma, sans-serif; MARGIN-BOTTOM: 10px; MARGIN-LEFT: 10px; COLOR: #666666; LINE-HEIGHT: 140%; MARGIN-RIGHT: 10px; TEXT-ALIGN: justify;
}
#col1content {
PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 12px; PADDING-BOTTOM: 15px; COLOR: #333333; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS", Tahoma;
}
#footer {
CLEAR: both; background-color:#333333; WIDTH: 700px; HEIGHT: 65px; text-align: center; padding-top: 15px; padding-bottom: 0px; BORDER-TOP: #a4d0ed 2px solid;
}
H1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #003333; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
H2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-SIZE: 20px; PADDING-BOTTOM: 0px; COLOR: #b4aa9e; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
H3 {
FONT-SIZE: 20px; PADDING-BOTTOM: 25px; COLOR: #b4aa9e; PADDING-TOP: 25px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; padding-left: 13px;
}
#footer P {
PADDING-LEFT: 15px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 10px; COLOR: #71AB6B; PADDING-TOP: 10px; text-align: center;
}
#footer a {
COLOR: #00cc00; text-align: center; padding-top: 10px; padding-bottom: 0px;
}
#copyright {
font-size: 0.9em; color: #FFFFFF; padding-top: 15px; padding-bottom: 7px;
}
#contentterms {
font-size: 0.8em; color: #FFFFFF;
}
It is when i add the css that it doesnt work the way it should. How would I put the flash into column one without it messing up? The size of the flash is the same width as the column and wrapper. If anyone can point me in the right direction it would be very appreciated. Thanks in advance. |
|||||||