|
CSS - Backgroud Attachment Wont Stay Fixed.
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; Similar Tutorialshttp://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%}
Hi all, I would like to get the user to be able to change their background/and or text size at the click of a button. I was going to try and use multiple sheets, but am not sure of the most effective way of doing this. For an example of what I mean, search for "Disability Rights Commision" on Google. How can I fix a Div a set distance below another Div without a set height? Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. 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. 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 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>
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? 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, 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>
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 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); } 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! |
|||||||