|
CSS - Mouseover Vs. Hover ... And Then It Should Stay That Way
hi folks,
i guess i have a fairly simple question for you guys & gals - but i am just not getting to the solution. i have this code: Code: <p><a class="text_menu_gray" href="products.html" onmouseover="this.className='text_menu_brown';return true;" onmouseout="this.className='text_menu_gray'">products </a></p> ... which makes the grey-colored word 'products' appear brown when the mouse is over it. thats all good - but how can i make it stay like that, when the word is clicked on? and will it change back to grey, when another word is clicked on? any advice would be greatly appreciated Similar TutorialsHi, I have made a simple table in html, with mouseover on the rows to change the background colour. I also have onclick to take the user to the next page. What I really need to do is there a way of making a popup text, like the ones on this site's topic view. I have looked at the source code, and tried copying one <tr> row into a test html file, but no popup. Basically, my question is this: How can I make the table have a popup, for each <tr>, that shows non-dynamic text. Thanks in advance, Prism128 Hi, I have a link and an image next to each other. I want to make the link hovered when I do mouseover on image. How do I do that ? Here is the code I have now. <a href="javascript:undefined" id="imageLinkId">GMNA</a> <script language="javascript"> if( ... ) { document.write('<img src="/graphics/channel/plus.png" id="div18Img" alt="Maximize this section" onMouseOver= >'); } else { document.write('<img src="/graphics/channel/minus.png" id="div18Img" alt="Minimize this section" onMouseOver= >'); } </script> Thanks I need to put tables in my website that I am designing but thought about using css instead. The tables I wanted were similar in design to these ones :http://www.visionman.com in the middle of the page (about 300px down) but I wanted them to change color when the mouse pointer goes over them also. I would appreciate someone showing me how to do this please. I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! Basically on this page here -> http://www.prxa.info/area51/profile.php?info=1 The copyright molds into the right column and i wish it to stay below both the left and right, how would i go about doing that? hi folks, i am redesigning my homepage and i have one little problem in IE. The footer i have will not stay down at the bottom of the screen in IE. Firefox works just fine like usual. Here is the original site Here is the new design I changed the design, so that it is easier to read and scroll - some people reviewed my page and i think that makes sence. if someone could help me with that problem, that would be great .... i think IE puts the footer right underneath the navigationbox to the left, thats why it is up there .... i tried to set the position of the footer 'fixed', but it didn't look right in FF nor IE (when scrolling it somehw moved with the overall picture) the footer in the CSS is called #verify ..... Thank you Like when I make a field.. <fieldset> <fieldset> How can I then make something like, when typing in <text> it'll stay in a locked field. And when clicking "Save" it will send the text to my email? Please help. Would be really cool with a code below. Issue is I've got text that I want in a certain place on the page. I've run into this situation time and time again, thankfully I've always worked out a creative solution, however I've just been avoiding the problem. It's not something I can use center, or bottom or anything like that on. I've got an image that's in sort of an odd position on the page. I want to have a link directly centered under that image but I can't seem to get the text where I want it. Any suggestions? I've been trying to implement a footer on the site I'm working on, and I want it to stay at the bottom of the page. If there's content that pushes down, I want the footer at the bottom of the content. I've been trying to implement the method described by these two sites: http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3 http://www.themaninblue.com/writing/perspective/2005/08/29/ but I'm having a hard time with the longer content page. Here's two examples on the site I'm working on that I have up and nearly ready. Short page: http://windrivers-gsp.com/WRK/index.php Long page: http://windrivers-gsp.com/WRK/hclub.php or http://windrivers-gsp.com/WRK/dams.php As you can see, the footer won't go to the bottom of the longer content on the long page, and I can't figure out why. I believe I've cleared everything, even implementing the PIE/Aslett clearfix on the container div. I think I'm just to the point where I need some more experienced eyes to take a glance and point out where I must have missed something. Any help is greatly appreciated! Oh, BTW, here's the addy for my CSS: http://windrivers-gsp.com/WRK/wrkCSS.css And yes, I know there's a nasty hack in place currently for the navigation menu. I'm working on that after I get the footer problem fixed. Hi. I have two DIVs. One below another. When the top one expands, i want it to push down the bottom one. When the bottom one expands, i want it to be just below the top one (open or closed) and always expand to the bottom of the containing DIV. Problem is that when i expand the bottom one, it goes to the end of the body tag, not the bottom of the containing DIV. Help? Thanks. Code:
<div style="width: 14em; border: solid 1px green; height:515px;">
<div id="nav_round" style="width: inherit;">
<div id="nav_ctl" style="width: 13em; background-color: #C3D9FF; padding:5px;">
<span style="float: left;">
<img id="nav_arrows" src="http://www.trezoro.com/icons/btn_down.gif" onclick="expCollapse('nav_wrapper', 'nav_arrows');"
style="padding-left: 5px; cursor: pointer;" /></span><center>
<span><b>Quick Calendar</b></span></center>
</div>
<div id="nav_wrapper" style="width: 13em; background-color: #C3D9FF; padding:5px 5px 5px 11px;">
</div>
</div>
<div style="border: solid 1px red; width: auto;
margin-top: 10px; margin-right: 15px;" id="video_round">
<div id="video_ctl" style="width: inherit; background-color: #C3D9FF;">
<span style="float: left;">
<img id="video_arrows" src="http://www.trezoro.com/icons/btn_down.gif" onclick="expCollapse('video_wrapper', 'video_arrows');" style="padding-left: 5px; cursor: pointer;" />
</span>
<center>
<span><b>Videos</b></span></center>
</div>
<div id="video_wrapper" style="width: inherit; height:100%; padding: 0px 3px 3px 3px; background-color: #C3D9FF;">
<div style="background-color: White; width: 100%; overflow-y:scroll; overflow-x:hidden;">
<div style="width: 100%; padding: 5px;">
<div id="reel1">
<img src="../images/default.jpg" style="cursor: pointer; border: solid 1px brown;" /></div>
<div style="padding-left: 10px; vertical-align: top;">
<span style="float: left; width: 100%;">test</span> <span style="float: left; width: 100%;">
test</span> <span style="float: left; width: 100%;">test</span> <span style="float: left;
width: 100%;">test</span> <span style="float: left; width: 100%;">test</span>
<span style="float: left; width: 100%;">test</span>
</div>
<script type="text/javascript" language="javascript">
new Draggable('reel1',{clone:true, revert:true});
Droppables.add('day_grid', {
accept: 'products',
onDrop: function(element)
{ $('shopping_cart_text').innerHTML =
'Dropped the 'element.alt + ' on me.'; }});
</script>
</div>
<div id="hrule" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div1" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div2" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div3" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px #eaeaea;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div4" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div5" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div6" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div7" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div8" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div9" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
</div>
</div>
</div>
</div>
So I have 5 image rollovers onmouseover() all in a row with the following css and javascript. Currently, the left-most image rollsover just fine, but when I try to rollover the others, the image that comes to replace the rolledover one gets put in the left-most spot instead of right on top of the image that was rolledover. I can't use absolute positioning because the whole webpage is centered according to window size. Help is greatly appreciated. Here's the link: create.byu.edu/newsite CSS: Code: div.info
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.team
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.work
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.sites
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.news
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
javascript: Code: var image1 = new Image();
image1.src = "images/info.jpg";
var image2 = new Image();
image2.src = "images/infoblue.jpg";
var image3 = new Image();
image3.src = "images/team.jpg";
var image4 = new Image();
image4.src = "images/teamblue.jpg";
var image5 = new Image();
image5.src = "images/work.jpg";
var image6 = new Image();
image6.src = "images/workblue.jpg";
var image7 = new Image();
image7.src = "images/sites.jpg";
var image8 = new Image();
image8.src = "images/sitesblue.jpg";
var image9 = new Image();
image9.src = "images/news.jpg";
var image0 = new Image();
image0.src = "images/newsblue.jpg";
function roll(img_name, img_src) {
document[img_name].src = img_src;
}
HTML: Code: <div class="info">
<a href="info.php" onmouseover="roll('info', 'images/infoblue.jpg')" onmouseout="roll('info', 'images/info.jpg')">
<img src="images/info.jpg" border="0" alt="infogray" name="info">
</a>
</div><!--info-->
<div class="team">
<a href="team.php" onmouseover="roll('info', 'images/teamblue.jpg')" onmouseout="roll('info', 'images/team.jpg')">
<img src="images/team.jpg" border="0" alt="teamgray" name="team">
</a>
</div><!--team-->
<div class="work">
<a href="work.php" onmouseover="roll('info', 'images/workblue.jpg')" onmouseout="roll('info', 'images/work.jpg')">
<img src="images/work.jpg" border="0" alt="workgray" name="work">
</a>
</div><!--work-->
<div class="sites">
<a href="sites.php" onmouseover="roll('info', 'images/sitesblue.jpg')" onmouseout="roll('info', 'images/sites.jpg')">
<img src="images/sites.jpg" border="0" alt="sitesgray" name="sites">
</a>
</div><!--sites-->
<div class="news">
<a href="news.php" onmouseover="roll('info', 'images/newsblue.jpg')" onmouseout="roll('info', 'images/news.jpg')">
<img src="images/news.jpg" border="0" alt="newsgray" name="news">
</a>
</div><!--news-->
hi, is there any way to keep the text inside of a box, when narrowing a browser window - OTHER than to specify a minimum width? ideally i would like to have a window expand to the bottom - i have a feeling that it doesn't work though. i mean, a box can expand sideways, why not vertically as well? this is the test page i am talking about. i would love to keep the text (and the images) inside the box at all times, without specifying a min-width. it would make the whole design eligible for any screen resolution. thanx for reading Hi, I'm racking my brain here and I can't figure out what I'm doing wrong. First of all, I have a "sidebar" div that is being pushed outside of the page, even though there is plenty of room for it in the content. http://65.175.116.253/design/demo.html I have included the CSS below, followed by the HTML and you can get the rar file for the entire layout at the following link http://65.175.116.253/design/design.rar I've been racking my head! All I want is the side bar, the two boxes way off to the right, to be floated to the right hand side of the screen, contained within the page. I can't figure out what I'm doing wrong. Can somebody look at this and tell me what I am doing wrong? I will paypal $5 to who ever figures it out.. Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
width: 100%;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: left;
width: 17em;
margin: 0 0 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
------------------------------------------------------- Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>www.company.com/</title>
<link href="css.css" type="text/css" rel="stylesheet" media="screen">
<!--[if IE]>
<style type="text/css">
#today{
text-align: right;
margin-top: 0;
margin-bottom: 0;
padding: 0 2em 0 0;
position: relative;
top: -1.66em;
color: #fff;
font-weight: bold;
line-height: 1;
}
</style>
<![endif]-->
</head>
<body>
<!-- mockup, adding borders | markup, using float for layout (or the appropriate section) -->
<div id="header">
<img src="logo.jpg" alt="a link to the home page" width="231" height="52">
<ul id="navbar">
<li class="first">
<a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li class="last"><a href="http://www.company.com">nav link</a></li>
</ul>
<p id="today">date here</p>
</div> <!-- end div id header -->
<div id="content">
<h1><b>home:</b> search</h1>
<img src="flash.jpg"><br>
<h2>quick search</h2>
<table class="mainsearch">
<tr>
<td>
<FORM action="http://company.com/" method="post">
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
</td>
<td width="285" valign="top">
<br>
<span class="smallboldtext">Keywords - </span><input type="Text" name="keywords" size="25">
<br>
<span class="smallboldtext">Within - </span><select name="distance">
<option value="50"
>
50
</option>
<option value="Any"
>
Any
</option>
<option value="1"
>
1
</option>
<option value="5"
>
5
</option>
</select>
<select name="distance_measure">
<option value="Miles"
>
Miles
</option>
<option value="kilometers"
>
Kilometers
</option>
</select> <span class="smallboldtext">of</span>
<br>
<span class="smallboldtext">City & State or Zip - </span> <input type="Text" name="zip" size="15">
<br>
<center>
<input type="submit" name="search" value="search">
</center>
</FORM>
</td>
</tr>
</table>
</div> <!-- end div id content -->
<div id="sidebar">
<div id="whatiscompany">
<h3>what is company.com?</h3>
<h4>www.company.com</h4>
<p> This is simply example text that goes here. Sample example text is in this place. You can read the sample text here it is.
<br>
</p>
</div> <!-- end div id whatistea -->
<div id="loginsidebar">
<h3>login</h3>
<br>
<form action="http://company.com" method="post" name="login">
<p>
Username - <INPUT type="Text" name="member_user_name" size="12">
<br>
Password - <INPUT type="password" name="member_password_a" size="12">
<INPUT type="submit" name="submit" value="login" >
</FORM>
<br>
<a href="http://company.com">Forget Your Password?</a>
<br>
<br>
</p>
</div> <!-- end div id loginsidebar -->
</div> <!-- end div id sidebar -->
<div id="footer">
<p>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
-
</p>
</div> <!-- end div id footer -->
</body>
</html>
In short, my problem is the image used for the navigation bar wont stay put. It works fine in IE8 but the image alignment isn't fixed (page to page) in Firefox. I used Microsoft expression web 3 to create, and i admit i have no clue what i messed up. Thanks in advance for any responses. website is: tigertandem.com body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; background-attachment:fixed; background-color: #000000; background-image: url("../images/background.gif"); background-position: top left; background-repeat: repeat-x; } #container { width: 100%; margin-top: 57px; border-bottom: 2px solid #363636; background-color: #fff; } #masthead { width: 670px; position: fixed; margin-right: auto; margin-left: auto; overflow: hidden; padding-top: 15px; padding-bottom: 15px; } #navigation { width: 670px; margin-right: auto; margin-left: auto; clear: both; overflow: hidden; http://www.students.niu.edu/~z162609/asme.html That is my website. As you can see on the left the link box changes with the actual text in the main box. The text goes down as the text on the main content box gets bigger. I am very new to CSS and really do not know anything. I am fairly sure this is a one line fix. However, I really need this and would appreciate any help. Code:
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
div#header{background-color:#F3F2ED;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#F6F0E0;}
div#navigation ul{margin:15px 0; padding:0; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#extra{background:#CCC8B3;}
div#footer{background:#BFBD93;}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#extra{float:left;width:150px;margin-left:-700px}
div#footer{clear:left;width:100%}
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! Ok here is the problem I have... I have 3 DIVS.... DIV 1 is a container the centers the contents DIV 2 I want to wrap tight around an image DIV 3 I want floating over the image say 100px from the top of DIV2 and 80px left. Currently DIV 2 is as wide as it's container (DIV1). and therefore DIV 3 isn't positioned over the correct part of the image. If I made DIV 2's position absolute then DIV 2 wraps the image tightly and correctly, but it now is shown on the far left of DIV 1, and I want it in the center. here is the HTML i have... <div id="div1" align="center"> <div id="div2"> <img alt="fddsffsd" src="image.jpg"/> <div class='div3'></div> </div> and here is my CSS... #div2 {position: relative} .div3 { position:absolute; width: 80px; height: 80px; top: 100px; left:20px; background-image: url(transparent.png); } |
|||||||