|
CSS - Background Image Should Not Move When Window Size
My code works well in Internet Explorer and Safari but it does not work the way I want it to in Firefox and Opera.
My items with red borders should always stay close to the blue bar in the background. But in Firefox and Opera the body background moves to the left when the window size is small, and the items with red borders appear to move away from the blue bar. The problem is the way in which these browsers center the background image for the body. Can anyone help me fix this issue? Thanks! 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">
<head>
<title>Demo</title>
<style type="text/css" media="all">
html, body {
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
text-align: center;
}
body {
background: #555 url(http://www.glidestor.co.uk/images/PageBackground.gif) repeat-y scroll 50% 0;
color: #111;
}
#page {
width: 617px;
margin: 0 auto 0 auto;
padding: 0 0 0 160px;
text-align: left;
position: relative;
border: 1px solid #55aa77;
}
#homeFeatures {
margin: 420px 0 0 0;
}
#homeFeatures #f1, #homeFeatures #f2, #homeFeatures #f3 {
padding: 0 40px 0 12px;
font-size: 9pt;
font-weight: 300;
width: 200px;
display: block;
text-decoration: none;
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="page">
<div id="homeFeatures">
<a href="#" title="Item 1" id="f1"><strong>Item 1</strong>J khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Pring Design" id="f2"><strong>Item 2</strong>T khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Item 3" id="f3"><strong>Item 3</strong>B khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
</div>
</div>
</body>
</html>
Similar TutorialsHello! I have the site (w w w . s t e f a n t r e g o . c o m /wordpress) ... and I am trying to place a tv graphic I made under my twitter feed as an aesthetic effect. Currently I have: body { background-image:url('/Images/tregotv.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:983px 400px; display:block; } This looks fine on my computer -- BUT -- when I go to my photo section, travels section, the format of the site changes. Therefore my background image and twitter feed don't align correctly. Is there any CSS way to correctly align the background image to always be positioned under my twitter feed without format issues? Or would I need to get assistance with an alternate code such as Java script, or PHP to position the picture so the twitter feed always fits inside the tv? I appreciate the help!! -Stefan twitter: @stefantrego w w w . stefantrego . c o m / w o r d p r e s s PS. Sorry for the spaced out web addresses -- due to being a new user I cannot post links right away. Hello, not entirely sure how to go about this, but I'm using Dreamweaver CS5 and I'm working on my home page. The way I have it set up is I have a "sidebar" to the left, then a large "main_image" to the right of that which begins my "container" div followed by some "body_copy" below that. Everything looks good when the window is in a max size. The problem arrises whenever I resize my window the main_image moves to below the sidebar and everything just seems to shift down... The main_image is set to relative so the body_copy text can form properly under it. Is there any way to have the image remain stationary despite window size? Thanks for your help!! Hello. How do you stretch a background-image so its height and width are equal to its parent? I've had an issue in the past where the background image creeps, or hangs, when resizing the window. To explain what I mean, check out this page: http://ridersresto.com/ this is the background image: http://ridersresto.com/images/main_bg.gif when you slowly resize the image, you will notice the background image on both sides of the page closing and opening a 1px gap. here is the CSS for the BG image: Code: body {
margin: 0;
padding: 0;
background-color: #131313;
color: white;
background-image: url(http://ridersresto.com/images/main_bg.gif);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: top center;
}
.frame {
margin: 0 auto 0 auto;
padding: 0;
width: 778px;
background-color: #000000;
color: white;
}
Code: <body> <div class="frame"> </div> </body> Is there a more efficient way of accomplishing this effect? Hello; Could anyone tell me how to addjust my result to the top(10% away from the top)? please. I try to use margin-top:10%, but it does not work. Please go to my website http://www.businessfind101.com/ and type the sentence with "MySql YourSql" into search function, you will see the result in the button, i have not idea to move them up. and my code as following; Code:
php
session_start();
$aString=$_REQUEST["SText"];
$_SESSION["aString"]=$aString;
?>
<!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" xml:lang="en" lang="en">
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table.display{margin-top:10%}
</style>
<body>
<?php
$con = mysql_connect("localhost", "#*$!","1#*$!");
if (! $con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("#*$!x", $con);
$result = mysql_query("select * from Customer2");
// was it a success
if (!$result)
die ("Error processing request - check your query");
// process results
$nrecs = mysql_num_rows($result);
/* Use tab and newline as tokenizing characters as well */
$tok = strtok($aString, " ");
while ($tok!== false) {
$len=strlen($tok);
$len=$len/2+1;
$tok=substr($tok,0,$len);
$b="tu";
$myresult=mysql_query("SELECT * FROM Customer2 WHERE MATCH (Topic,Des)
AGAINST ('$tok*' IN BOOLEAN MODE);");
while($row=mysql_fetch_array($myresult)){
echo "<br>";
echo "<br>";
echo " ";
$Cid=$row['Cid'];
echo " ";
$row['Count']=$row['Count']+1;
$Count=$row['Count'];
mysql_query("update Customer2 set Count='$Count' where Cid='$Cid'");
}
$tok = strtok(" ");
}
$result = mysql_query("select * from Customer2");
echo "<table border=0 width=50% class='display' bgcolor='ccffff'>";
//i will display result on the screen
while ($row=mysql_fetch_array($result)){
if($row['Count'] >0){
echo "<tr><td>";
echo $row['Des'];
echo "</td><td>";
echo $row['Count'];
echo "</td> </tr>";
}
}
$f=0;
mysql_query("update Customer2 set Count='$f'");
echo "</table>";
mysql_close($con);
?>
</body>
</html>
i am writing a site for fun to learn how websites work. The site i write right now will be like a school newspaper. I have one problem with the background, at the begining i couldnt make it no repeat but later i did it, now, i got something wrong with my code. PLease help me here is my code: ( i mean that the back ground color does not appear!! Code: <html>
<head>
<title>
blah blah
</title>
</head>
<body bcolor="#004d79">
<center>
<img src="/pics/banner.png">
</center>
<h4>
<b>
<center>
blah blah
</center>
</b>
</h4>
<style type="text/css">
<!--
body {background-image: url(pics/background.png); background-repeat: no-repeat;}set to background-repeat: no-repeat;background-position:center;
</style>
<center>
<b>
(C) blah blah
</b>
</center>
<center>
<div style="position:absolute;top:130px;left:375px">
<h1>
<b>
<p>
Our website is under construction!!<br>Thank you for visiting us!!
</p>
</b>
</center>
</h1>
</div>
<div style="position:absolute;top:250px;left:260px">
<b>
<p>
blah blah
</p>
</b>
</center>
</div>
</html>
Thanks alot, J. Hello. I am trying to center the text in my right column menu found at http://www.invisionshosting.com/v2/terms_of_service.php If you take a look, you will see that the h2 (title bar) as well as each button has the text positioned at the top, and I need the text positioned in the center. I have tried padding-top: 5px; to position the text to the center, but just as I thought it would do, it moves the background down as well, causing a gap to form between each element. I need each button, including the title, to remain with a tight fit as it is now while positioning the text in the center. The CSS I am using is as follows: Code: #menu_right {
width: 200px;
color: #702208;
font-family: Arial, verdana, san-serif;
list-style: none;
padding: 0 0 0 2px;
margin: 0;
font-size: 11px;
}
#menu_right h2 {
color:#ffffff;
background-image: url(../images/right_column_header.png);
background-repeat: no-repeat;
width: 200px;
height: 28px;
text-indent: 10px;
}
#menu_right ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 200px; /* Main Menu Item widths */
}
.button_main_1 { /* For Rest State */
background-image:url(../images/right_column_button_off.jpg);
background-repeat: no-repeat;
width: 200px;
height: 28px;
color: #ffe7b8;
text-indent: 30px;
font-size: 13px;
}
.button_main_1 ul li {
position: relative;
}
.button_main_1 a { /* For Rest State */
width: 200px;
height: 28px;
display: block;
color: #236a9d;
text-decoration: none;
}
.button_main_1 a:hover { /* For Rest State */
background-image:url(../images/right_column_button_over.jpg);
background-repeat: no-repeat;
width: 200px;
height: 28px;
display: block;
color: #ffffff;
text-decoration: none;
}
The HTML is as follows: Code: <div id="menu_right"> <h2 class="menu_left">Title</h2> <ul class="button_main_1"> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> </ul> </div> First of all I apologize if this is a stupid question, I am 1st year student. For the project I had to make an IT store type website. My problem is I have two div's in the container which i have positioned to be fixed at the top left of the page outside the container, this is so the user can see these div's at all times. When I make the window smaller it shrinks to the container and the div's in question appear on top of the content. I have tried styling the body with margins, padding and min-width. All I want is the page to remain the same when I re-size the window. I hope this is enough info for someone to understand my problem, i have included the css from the parent div's any help would be greatly appreciated. * { margin: 0; padding: 0; } * html #container { height: 100%; } html { height:100% !important; background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url(../images/header/Home.jpg); background-origin: padding-box; background-position: center; background-repeat: no-repeat; background-size: cover; } body { height:100% !important; } #outer { width: 100%; height: 100%; } #container { min-height: 100%; width:940px; padding: 8px 10px; background: #000; margin:0 auto; text-align:left; font-size: 100%; overflow: hidden; } * html #container { height: 100%; } When content exceeds the window size, the fixed footer covers it. The center div has a min-width, the right div covers it when the window is resized to smaller than the min. (Also, center div drops in IE). I have googled these issues and searched the archives. I've tried many different techniques for getting these things in order, and this is the closest I've gotten so far. What I want: 1.A footer that sticks to the bottom of the viewport if there is not enough content AND stays below the container when the container is longer than the viewport. 2. The center div to be liquid with a min-fixed width and the right div to move along the edge of the center div and not cover it when viewport is sized smaller than the center div's min width. Here is a simplified version of the HTML (none of the extra divs that are used to make rounded corners) 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Troubleshooting</title> <link rel="stylesheet" href="layout8.css" type="text/css" /> <link rel="stylesheet" href="round.css" type="text/css" /> </head> <body> <div id="header"> <div id="masthead"></div> <div id="topnav"><div class="searchbar">Search</div> <div class="homebar"><span>Home </span></div></div> </div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="content"></div> </div> <div class="clear"> </div> </div> <div id="footer"></div> </body> </html> I think there's too much CSS to post here, but everything can be found at: www. observera. com/troubleshootingpage/index. htm CSS @ layout.css and round.css I appreciate any help you can offer Em Hi, Av been having a lot of problems with my drop down working in IE since I added the flash fade to the images. Can anyone point me to the code that is responsible for keeping the drop down menu at the top of the header image.. How can I change it to make it at the bottom? Thanks This is in the header section Code: <!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie.css" />
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
#outer {
width:1000px; /* Fallback width if javascript is off */
width: expression(
(document.documentElement.clientWidth > 1152)? "1150px" :
(document.documentElement.clientWidth < 702) ? "700px" :
"auto");}
</style>
<![endif]-->
<?php wp_head(); ?>
I.E css Code: #header-image {
float: left;
width: 100%;
height: 383px;
background-repeat: no-repeat;
background-position: left top;
background-color: #FFFFFF;
margin-bottom: 20px;
}
Main stylesheet Code: #nav li {
position:relative; /* establish stacking context for the AP'd dropdown sublist */
float:right;
padding:0;
line-height:1.75em;
}
#nav li a {
float:left;
padding:0 .5em;
border-right: 1px solid #333;
color: #CCCCCC;
text-decoration: none;
}
#nav li a.first {border:none;}
#nav li:hover,
#nav li.sfhover{
background:black;/* background for all links on hover */
visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a,
#nav li.sfhover a {color:#FFF}/*1st level font color on hover*/
/*=== All Sublist Styles ===*/
#nav ul {
position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
width:12em; /*150px*/
margin-left:-999em;/* hide the sublist */
padding:0;
left:0; /* IE6/7 need this to position the sublist correctly on hover*/
top:1.75em;
background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
}
#nav li li {
float: none;/*reset the float from #nav li*/
display:block;
height:auto;
line-height:1.5;
border:none;/*reset borders from #nav li*/
}
#nav li li a {
float: none;/*reset the float from #nav li*/
display:block;
width:11em;/*IE6 needs a width (12em total with padding)*/
padding:0 .5em;
border:0;
}
* html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
*+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/
/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li.sfhover ul {
margin-left:-999em;
}
/*=== Sublist Font Colors ===*/
#nav li:hover li a,
#nav li.sfhover li a {color:#000;} /*2nd level font color*/
#nav li li:hover a,
#nav li li.sfhover a {color:#FFF;} /*2nd level font color on hover*/
/*=== Second Level UL position on hover ===*/
#nav li:hover ul,
#nav li.sfhover ul {
margin-left: 0; /* show the sublist (line up with left border on main list items)*/
}
label.screen-reader-text {
display: none;
}
.avatar {
display:none;
}
thanks Hi I am trying to learn how to design and develop a website that has consistent behavior across browsers, browser window size and screen resolution. What are the industry best practices for designing and developing such websites. Your help is appreciated Thanks Hobby Helper Model Trains The above link is where my problem is... If you look at the middle column running down the page, there are several text links that I have the CSS working nice with the background color changing to orange. There is an arrow image that should follow the mouse as I run over these text links, but can't figure out how to get the darn thing to move. Any help will be GREAT!! THANKS! I have a DIV which I have set the height to 100%. I understand that height: 100% means that it will fit up to 100% of the viewable screen area. How would I define it so that it expands to fit 100% of the content area? Meaning that if the content scrolls more than 100% of the height of the screen, the background will stretch to fit the whole content height. The URL with an example of the site I'm working on is: http://hawaiihomebrew.com/os_comm/index.php?cPath=50_51 The site is not complete so please bare with some of the broken images and all that. When my products extend beyond the height of the screen the white background stops at the point before you have to start scrolling and I want it to extend the whole height of the content. My css is below. The right_col class is the one that contains the content in question. Code:
/* CSS Document */
body {
font-family:Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 80%;
background-color: #ffffff;
margin: 0px 0px 0px 0px;
background-image: url(../images/hw_back.gif);
}
#left_col {
position: absolute;
top: 0px;
left: 0px;
padding: 10px 10px 10px 10px;
height: 100%;
width: 18%;
background-color: #63782B;
background-image:url(../images/hw_back.gif);
}
#right_col {
position: absolute;
top: 0px;
left: 18%;
height: 100%;
width: 82%;
background-color:#FFFFFF;
}
#cart_rt {
position: absolute;
top: 0px;
right: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 35%;
text-align: right;
}
#cart_lt {
position: absolute;
top: 0px;
left: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 35%;
text-align: left;
}
#content {
position: absolute;
top: 20px;
left: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 100%;
}
Hello All. I'm working on an assignment for an introductory level html/css class. The assignment asks me to change the Window Background color to 666666. How do i do this? So far i've only be able to change background colors of element tags, which is not what i need. This was the Example give for this particular step. Edit: i tried to link a picture for a visual. For some reason its blocked to new members. Any help would be appreciated. So this site is having a bit of trouble in WinIE 6.0. If you resize the window after you load the page, the dark brown area behind the content sort of gets stuck on the right. I'm wondering if it might have something to do with the javascript I had to do to get IE to recognize fixed backgrounds. Any ideas? Site: http://dev.sabotagemedia.com/firstclass/ CSS: http://dev.sabotagemedia.com/firstclass/_css/style.css The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. hey all..got a wierd one..well to me anyway ! hope someone can tell me what im doing wrong !! i have code like this Code:
#banner img {
height: 15em;
width: 25em;
margin: 0.5em;
}
to manage the size of an image but i want to add another image to the page and i can't the css can be found here and the page im working on can be found here if anyone has any ideas that wouldbe marvelous... thanks RF |
|||||||