|
HTML - Lost Text & Documents After Adding Fixed Background Image
Hi All
This is my first post so i hope I provide all the info you need, to be able to help. I am working inside Macromedia UltraDev as this is waht I was taught with over a decade ago. Problem started when I set a fixed background image to the page . . . dropdown menu still displays, but everything else (text & pics) in table seem to be hiddden behind the background image. here is the code HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
</style>
<link rel="stylesheet" type="text/css" href="dropdown/dropdown.css" />
<script src="dropdown/btp.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-au">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Barcaldine Tourist Park</title>
</head>
<body>
<div align="center"> <center>
<table width="1000" border="0" cellpadding="0" height="100%">
<tr>
<td height="54" colspan="2">
<div align="center">
<h1><font face="Georgia, Times New Roman, Times, serif" size="+7">Barcaldine
Tourist Park</font></h1>
</div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="146" colspan="2"> <span class="preload1"></span> <span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" class="top_link"><span>Park Features</span></a></li>
<li class="top"><a href="#nogo22" class="top_link"><span>Accommodation</span></a></li>
<li class="top"><a href="#nogo27" class="top_link"><span>Our Tarrifs</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Special Offers
</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Local Photos</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Contact Us</span></a></li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Local
Attractions</span></a>
<ul class="sub">
<li><a href="#nogo54">Australian Workers Heritage Centre</a></li>
<li><a href="#nogo55">Tree of Knowledge</a></li>
<li><a href="#nogo56">Artesian Country Tours</a></li>
</ul>
</li>
</ul>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td rowspan="2" width="99"> </td>
</tr>
<tr>
<td rowspan="5" width="895" bgcolor="#FFFFFF">
<div align="center"></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99" height="23"> </td>
</tr>
</table>
</center></div>
<div id="page-background"><img src="images/bg.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
</div>
</body>
</html>
Similar TutorialsThis one has been giving me a headache for days now. I wish to place an image in the background so my text can scroll while the image remains still: <div id ="scroll" style="padding:0px; font-size:0px; overflow:hidden; background-image:url(files/images/b2l.jpg); float:left; height: 480px; width: 360px; color: #FFFFFF; font-family:Arial, Helvetica, sans- serif;"> http://www.muskmagazine.com/wintertrendstest.html This works fine on Safari and Firefox but when viewed on IE6 the image moves along with the text. I have been playing with position:fixed; with no luck. Soon as I get it working on IE6 the image is miss- aligned in Safari/ Firefox. Please someone have mercy! Justin Hi, I'm a complete newb and html-challenged, so please forgive my stupid questions. This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right? So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks! ~Serena P.S. is it possible to do mouseovers for certain coordinates on an image map? My Headfirst book on page 404 says to add the background-image property to a paragraph so I add the code for that and a few other changes highlighted in bold in last paragraph but it doesn't show the image on the browser and the css validator does not show it as an error, also what I don't understand is why there are THREE classes with the same name [.guarantee] in this stylesheet? The url is: file:///C:/Headfirst/HFHTML_ch10/lounge/lounge.html body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 background-image: url (images/background.gif) ; } I'm fairly new to HTML and need help with adding text below the images I have. I am running a white backround with a gray box that has six images side by side. I want to add text below each image in the background. Can anyone hel me? This is what I have without text so far <td><table width="100%" border="0" cellspacing="10" cellpadding="25"> <P> <strong>Padholdr tablet styles</strong><td class="greybox"<td align="middle"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images4med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images4med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images3med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images2med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/xoom5med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/x1med.jpg" width="144" height="108"></td></caption> </tr> </table></td> Hi All, This is probably a basic question to ask but for some reason i cant seem to figure it out, Basically what you can see below is a table width="850" and then another table inside that table with a width="425" as you can see i have set 4 back ground images which look perfect my problem is im trying to put wording over them images....i can get wording on the images but they wont go in the relevant position, i.e align="top" they align at the bottom! iv tried everything i can possibly think off.... HTML Code: <table border="0" cellpadding="0" cellspacing="0" width="850">
<tr>
<td>
<table width="425" border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td height="163" style="background-image: url(/images/box1.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
<td height="163" style="background-image: url(/images/box3.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
</tr>
<tr>
<td height="163" style="background-image: url(/images/box2.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
<td height="163" style="background-image: url(/images/box4.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 15px">
</tr>
</table>
If some one can tell me how to do it this i would highly appreciate it, iv tried adding this HTML Code: <tr>
<td height="163" style="background-image: url(/images/box1.png); background-position: left;
background-repeat: no-repeat" class="WhiteSmall" valign="top"><b>Apply Now></b>
</td>
</tr>
So it aligns it at the top but still i need it in the top middle..... if there a way of saying Valign="top middle" ??? as im aware you can use background-position: left top maybe you can do the same for valign? Hope some one can help me thanks for reading and look forward to hearing from you http://tbsnyder.com/site/ I have a simple nav background image setup and I tried lining the text up which works perfectly on my Mac browsers (safari and firefox), but when I opened the site up on my Windows machine, I got this: http://tbsnyder.com/site/difference.png Two differences: the text has more weight on the Mac browsers and it doesn't line up correctly in the PC browsers. Anyone understand why this is? I'm just using a standard font family (arial, helvetica, sans-serif) - why would they appear different between Macs/PCs? Am I setting this up incorrectly in css? CSS: Code: .homeBtn {
padding: 0px 12px 0px 0px;
}
.theSystemBtn {
padding: 0px 12px 0px 0px;
}
.workoutsBtn {
padding: 0px 11px 0px 0px;
}
The html is just an unordered list as you can see from the source. I like the look of the heavier weighted text if I can keep it like that. I would really appreciate any kind of knowledge or assistance in the issue of correctly matching text to background images in a nav bar. Okay I am very new to website design, I currently am in the progress of a php site and it is definitely looking better fast the more I learn. My question is simply that I created a css style that just uses a background image hosted on my website. thats all...and I attached the CSS style to bodies of text in my web page, the problem being, that they are long lines across the whole screen of JUST that line. What I am asking for help with is creating a large BOX of my image (of any height/width) and throw text in it. Take a look at my site for the moment so you know exactly what I mean. Konnection Films Again, I want to take those short brown lines and make them the length of the text, and mesh them together vertically so line breaks don't break the image. If you don't know what I mean just let me know! Thanks so much in advance! P.S. For some reason my "Ctrl" key is not working in Dreamweaver but everywhere else, is this some stupid setting or my computer just bugged? Hi, I want to fade/dissolved text that is on top of an image. The problem with many dhtml and javascript is that they simply change the color of the text to make it look like the text has disappeared. This works if we are using a single background colour. However, with images, this will not work. Is there a way I can make the text disappear from an image using dhtml/javascript? Hi, I would like to know if I can make the background image (over which I will write the content of the page) to fit the space I'm using. For example, I don`t how to explain it , but I see sites with the navigation bar image or the content image to adapt its size according to the amount of text on them. And then it seems like they are infinite, again, it adapts to the isze of the page. But my background image stays the same size all the time and I can see the end of it. I know I didn`t explain it very well but I don`t know exactly what I need to do this so, if someone could help me, thanks a lot. Hey.. I want to add Images that stay fixed on my page (all pages on my forum). I want them both on the left of my pages & the right (in the spaces between the forum body & the sides of the screen) I want it because i want the images to link to game, console & accesory reviews that have been done on my forum. I googled it and got the following code to add.. Code: <a target='_blank' href='http://yourlink.com' text='About your link'><img src='yourimagepath.jpg' alt='About your image' style='position: fixed; bottom: 25px; right: 10px;'></a> If it was a normal webpage i would add this to it, but as its a forum & a forum has 1000s of pages.. What files do i edit this into for for it to show on all my forum pages? The page i got it from is.. - http://jensocial.com/group/ningnetwo...s-and-links-on Also.. I will want 3 or 4 images on each side, so would i just add the code how ever many times, changing the part thats say "right" to "left" (for left side images) & the part that says "bottom" to "top" (for top ones)? My Forum Softwa phpBB My Forum Link: http://www.xboxlivefan.org/ Anybody help with some info on this please? Thanks! hi guys im after a simple code so that the background on my forum is fixed and only the foreground moves up and down, someone must know iv looked all over the place and cant find how anywhere,someone help please Cheers Jacob Hello. I need some assistance in figure out how to make a fixed/linkable/image. I used this code here
HTML Code: <body style="background-attachment: fixed; background-repeat: no-repeat;" background="XXX.jpg"> which worked great in keeping its place. Then I added HTML Code: <a href="http://www.davesite.com/"> before and after but no luck. Im trying to get that link to work for the background too, but its not working out at all. "Sadly no HTML skills whatsoever" I have a site with text scrolling over a fixed background - mbccc.net - and I want the background to be an imagemap so's I can link from different parts of it. But I can't make it work. I can make an imagemap work alright. But not on a fixed background image. Is it possible or does making the image a 'background' image and 'fixing' it in position mean that it can't be referenced as an imagemap any more? regards, ab I used this code here but it doesnt seem to work for GoogleChrome browser well, as it did for the others. Is there a code that will work for all the browsers? HTML Code: <html>
<head>
<script language="javascript">
function randomBackground()
{
var myImages = Array();
myImages[0] = 'xxx.jpg';
myImages[1] = 'xxx.jpg';
myRandomNumber = Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'URL('+myImages[myRandomNumber]+')';
}
</script>
<style type="text/css">
body
{
background-attachment: fixed;
background-repeat: no-repeat;
}
</style>
</head>
<body onload="randomBackground();"></body>
can someone outline the steps to making a page with a fixed background and a scrolling foreground such as can be found here? http://www.paul-wallas.co.uk/ i've looked at the code and what information i've found on the web but i don't see how it is done. tia, Hi, I'm doing a website and for my link i would like drop-down menus at the top but i want it to stay at the top when you scroll. Can anybody point me to these. I have no idea how to do drop-down menus that look good. Take a look at http://www.runehq.com/ and look at the menus at the top. I would like some like that. Help would be great. Thanks. ToshNeox Hey everyone, I feel like this is a noob question, but I'm going to ask anyway. How do write my site so that my body stays in the same place and doesn't smash together when I manually resize my page? Any help is greatly appreciated. Thanks Hi Folks, I am new to create static website and HTML. I have created two applications using Asp.net/Visual Studio. I am wondering how i can make static website. I found built in templates on web hosting site is easy to change, I can also try to use Ms Expression Web/Ms Front Page but unable to measure which one is better for maintaing pointing of view. How i can easily create graphics logo. I heard Corel Draw is good one. Do i have to buy licence to upload site built by Ms Expression Web/Ms Front Page. Could any body share his/her experience about creating static website. You help is greatly appreciated. Chao RS Hi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> |
|||||||