|
HTML - Problem With Backround
When ever you view the page when it's not maximized or lower res the images and text get thrown off from the background.
http://www.scevolution.com/Deadhead/clan_exo.html How can I fix it? Should I post my code? Similar TutorialsAlright, before you post a reply, make sure that a 2 year old could understand it, as i'm only adequate at html. A friend of mine supplied me with the site template, i'm only editing it. Heres my problem. Link to my webpage If you'll take note of the navigation menus on the left, under "latest matches" "latest threads" etc. Lets take the first box, latest matches. Here is the code for that. Code: <TABLE cellSpacing=0 cellPadding=0 width=221 border=0>
<TBODY>
<TR>
<TD><IMG height=28 src="http://atsquad.com/images/latestmatches_06.gif" width=221></TD></TR>
<TR>
<TD width=221 bgColor=#000000>
<TABLE cellSpacing=0 cellPadding=0 width=221 border=0>
<TBODY>
<TR>
<TD width=2> </TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif>
<DIV align=center><IMG height=15 alt="" src="http://atsquad.com/images/bullet_10.gif" width=13 border=0></DIV></TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif><A class=comment href="http://www.atsquad.com/">[ATS] vs {DEATH}</A></TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif height=19><SPAN class=style6><FONT color=#ff0000>4-6</FONT></SPAN></TD>
<TD> </TD></TR>
<TR>
<TD width=2> </TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif>
<DIV align=center><IMG height=15 alt="" src="http://atsquad.com/images/bullet_10.gif" width=13 border=0></DIV></TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif><A class=comment href="http://www.atsquad.com/">No Record</A></TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif height=19><SPAN class=style6><FONT color=#0000ff>0-0</FONT></SPAN></TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif>
<DIV align=center><IMG height=15 alt="" src="http://atsquad.com/images/bullet_10.gif" width=13 border=0></DIV></TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif><A class=comment href="http://www.atsquad.com/">No Record</A></TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif height=19><SPAN class=style6><FONT color=#0000ff>0-0</FONT></SPAN></TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif>
<DIV align=center><IMG height=15 alt="" src="http://atsquad.com/images/bullet_10.gif" width=13 border=0></DIV></TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif><A class=comment href="http://www.atsquad.com/">No Record</A></TD>
<TD background=http://atsquad.com/images/leftbarrepeat_11.gif height=19><SPAN class=style6><FONT color=#0000ff>0-0</FONT></SPAN></TD>
<TD> </TD></TR>
<TR>
<TD width=2><IMG height=5 src="http://atsquad.com/images/leftside_17.gif" width=2></TD>
<TD width=20 background=images/leftbarrepeat_11.gif>
<DIV align=center><IMG height=15 alt="" src="http://atsquad.com/images/bullet_10.gif" width=13 border=0></DIV></TD>
<TD width=137 background=http://atsquad.com/images/leftbarrepeat_11.gif><A class=comment href="http://www.atsquad.com/">Record</A></TD>
<TD width=50 background=http://atsquad.com/images/leftbarrepeat_11.gif height=19><SPAN class=style6><FONT color=#0000ff>0-0</FONT></SPAN></TD>
<TD width=4><IMG height=5 src="http://atsquad.com/images/rightside_20.gif" width=2></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=221 border=0>
<TBODY>
<TR>
<TD width=14 background=http://atsquad.com/images/footerbarrepeat_13.gif height=20><IMG height=20 src="http://atsquad.com/images/leftrounder_11.gif" width=11></TD>
<TD width=77 background=http://atsquad.com/images/footerbarrepeat_13.gif> </TD>
<TD width=110 background=http://atsquad.com/images/footerbarrepeat_13.gif>
<DIV class=style4 align=center></DIV></TD>
<TD width=13 border="0"><IMG height=20 src="http://atsquad.com/images/rightrounder_13.gif" width=13></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
If you'll notice the class=comment coding in the links. This links to a .css file I have that makes the link text turn bold when you scroll over it. Now, heres the confusing part. Heres what I want: When you scroll over the navigation bar thing (the white bar that says [ATS] vs {DEATH}, no record, no record, no record, no record) it changes from the current backround ( http://atsquad.com/images/leftbarrepeat_11.gif ) to a new backround ( http://atsquad.com/images/leftbarrepeatmouseover_11.gif ). Also when you scroll over the white bar, the font changes from normal to bold (which is currently achieved from the style.css file) I'm not sure if i'm asking too much here, like I said, i'm still pretty much a newbie at html. Thanks in advanced, jake. Hi, I am designing a website, I know HTML, and CSS languages. I want my website to play backround music when someone is browsing my site. I know the HTML code that allows the designer (me) to play a backround .wav audio BUT it does not quite do what I need it to do what I am looking for is a code that allows me to play a .mp3 in the backround AND I am having an incredibly difficult time figuring out how to prevent the song from starting over when a person on my site clicks another link. Simply put I want a .mp3 to be playing in the backround of my website no matter where the user browses on my website and most importantly I need to have the backround .mp3 to play conintousely like I stated earlier, I don't want it to start playing from the begining when a user clicks on a link on my site. I am pretty sure that I am getting into Java here, unfortunatly for me, I am only NOW begining to learn Java and can't write the code for what I need. If anybody reading this knows a code, or CAN write the code for what I need, PLEASE post it on this thread!! Thanks in advance, I really hope I will finde that code. Hi There Guys, I have a problem! Ive added a background to my site that I want to appear like so fixed center no-repeat. You can see the code below. But for some reason it doesnt line up with the top of my site. It is being pushed down a whole 108px??? You can see from the site how this looks... www.hogansfarm.ie/index.php. To be honest its my first time using fixed center no-repeat so im hoping someone else might have hand this issue and may know whats wrong. You can see the the image there should be no gap http://www.hogansfarm.ie/images/stripe_wide.jpg Thanks for your help! Kat body { background: #1f1e1e url(http://www.hogansfarm.ie/images/stripe_wide.jpg) fixed center no-repeat; color: #000000; font-family: arial, helvetica, sans-serif; font-size: 100.1%; padding: 0px; text-align: center; margin: 0px; padding: 0px; } Hello all, I hope I am not repeating any posts but all the alignment issues that I could find being talked about were with tables. I am trying to align an image with a background image to make one apparently continuous image that will repeat across the top of the page. My design works in IE 7 but not in any of the other browsers I am checking with. Netscape 8 or Chrome. I am working with Dreamweaver but have some basic knowledge of code. Here is the website as I am sure that I have not explained myself as well as I could have. http://www.americain100days.com/ Thanks all, Joey Hell All, I have a question regarding to my website's home page: Right now my homepage has been embedded with an image and I want to insert the HTML text beneath the image. The text should not overlap with the background image and should have the same width as the webpage. How can I do that? Here is my home page: http://www.oleklejbzon.com/campbellsloft2/ And here are the index.html code: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Campbellsloft - Space Age Rugs, ART</title>
<style type="text/css">
/*.bottom
{
float: right;
width: 250px;
border-right-width: 20px;
border-color: black;
background-color: black;
color: white;
}*/
p {font-family: calibri;}
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
#html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {color: black; position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
#background{color: black;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="/campbellsloft2/i/image007_003.jpg" width="100%" height="100% ></div>
<div id="content" align="bottom" bgcolor="black">
<h2></h2>
<p>hello world</p>
<p></p>
</div>
</body>
</html>
I placed an image in the backround of a table on my page. It looks fine on my computer with a square monitor set at 1024x768 pix. When I viewed it on another monitor, a wide screen it displayed about half of my image to the right of where I placed it in the table. Can this be corrected so the image looks correct in all screen resolutions? Here is a link to the page in question. It's the motor in the upper left. The image name is: log2.gif http://cb750sandcastonly.com/new/ Thank You. I would like to have an image that takes 2 url like the following image... is it possible? if so, can someone please tell me how this could be done? Thank you very much.. NOTE: I tried doing this... <map name= 'url1' > <area shape= 'poly' coords= ' 0 , 0 , 50 , 0 , 0 , 50 ' href= 'url1.html' > </map> <a href= 'url2.html' > <img src= 'img.jpg' width= 50 height= 50 usemap= '#url1' > </a> but this only get 'url1' woring... Okay, I know that this problem is going to be really really easy, but I forgot how to do it. I use to own an older website and forgot the code. Anyways, I only know how to describe it. When I minimize the screen, it is minimizing the whole thing and collapsing it making the iframes smaller and the text fit into a smaller space. Most websites have a code (i don't know what it is) so that when someone minimizes their browser, it just makes the browser smaller and not the actual page. Here's what it looks like: http://www.freewebs.com/noeylani94/index.htm Try minimizing that and see how it looks. It collapses the whole page right? Can someone tell me the code how to fix it? Thanks =D Website Website Files (if needed) I'm making a website for my web design class. I've run into an annoying problem. It seems this div container "blocks" me from typing any text under the image. How do I fix this? I am testing my site in FF 3. I'm having two problems. 1.) Can somebody write me up code on how to fix this, it looks fine in IE, it should be in two columns side by side not one in each corner, you'll see it: http://www.bkriegtech.net/index.php?page=hosting 2.) All of the bullets for my design, shared hosting and reseller hosting are out of the content table. Why's that? What do I do to fix it? Again this is only in firefox. I we see its result we get so much top and bottom space just this code: code: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#00FFFF"><h1>Hello</h1></td> </tr> </table> I want to remove top and bottom space. any help Hello, I am fairly new to web programming, and I have taken over the web administration at my work. The page I am working with is an absolute mess, but I have one bug that I just cannot figure out for the life of me. It is an overlap problem, where one of the tables overlaps the one to the right of it, even though there doesn't seem to be anything "pushing" it out further, like unwrappable text or anything like that. It only occurs in IE/Win, I have viewed in both versions 6 and 7. If anyone could give me any suggestions, I would greatly appreciate it. URL: http://www.yonasmedia.com hi..this is Ankit i have a one html Flash Template This Type > See here when i upload that SWf files in My Website [They see This Type] ______________________________ please..! help me...! Hi Could some one please have a look at the code for this site for me as it displays perfectly in IE6/7 but is so far off the mark in firefox, not tried any others. http://www.scottishconsumercredit.com/_dev_colin I can't see where I am going wrong thanks Im been editing some code i found (lol) Anyways whatever i do, i can't get ie8 to work on this animation orginal code: HTML Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Evil Dynamic Layout: Text animation</title>
<style type="text/css">
#canvas { position: relative; margin: 0em; }
div { -moz-opacity: 0; position: absolute; }
/* * { border: solid 1px ***hsia; margin: 4px; padding: 4px; -moz-opacity: 0.9 ! important; } */
</style>
<script type="text/javascript">
function Animator(aElement, aSteps, aDelay) {
this.element = aElement;
this.delay = aDelay;
this.steps = aSteps;
this.transitions = [];
this.addTransition = function(aTransition) {
this.transitions.push(aTransition);
}
this.animate = function() {
if (this.delay > 0) {
this.delay--;
} else {
if (this.steps) {
for (var index = 0; index < this.transitions.length; index++) {
this.transitions[index].animate(this.element, this.steps);
}
this.steps--;
}
}
return this.steps;
}
this.length = function() {
return this.delay + this.steps;
}
}
function DimensionTransition(aProperty, aValue, aEnd, aSuffix) {
this.property = aProperty;
this.value = aValue;
this.end = aEnd;
this.suffix = aSuffix;
this.animate = function(element, steps) {
this.value += (this.end - this.value) / steps;
element.style.setProperty(this.property, this.value+this.suffix, '');
}
}
function KeywordTransition(aProperty, aValue) {
this.property = aProperty;
this.value = aValue;
this.animate = function(element, steps) {
element.style.setProperty(this.property, this.value, '');
}
}
function ClipTransition(aValue, aEnd, aSuffix) {
this.value = aValue;
this.end = aEnd;
this.suffix = aSuffix;
this.animate = function(element, steps) {
this.value += (this.end - this.value) / steps;
// the following is incorrect XXX
element.style.setProperty('clip', 'rect('+this.value+this.suffix+','+this.value+this.suffix+','+this.value+this.suffix+','+this.value+this.suffix+')', '');
}
}
var delay = location.search;
if (delay) {
delay = delay.substring(1, delay.length);
} else {
delay = 50;
}
var animations = [];
function setup() {
animations = [];
var body = document.getElementById('canvas');
for (var index = body.childNodes.length-1; index >= 0; index--) {
body.removeChild(body.childNodes[index]);
}
/* Animation Constants */
var steps1 = 25;
var steps2 = 15;
var steps3 = 15;
var lineStart = 50;
var fontSize = 60;
/* Element: Welcome */
var Welcome = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
Welcome.appendChild(document.createTextNode('Welcome To...'));
Welcome.className = 'Welcome';
Welcome.style.top = '30px';
Welcome.style.left = (-fontSize*2*10+50)+'px';
Welcome.style.width = fontSize*4*10+'px';
Welcome.style.lineHeight = fontSize*2+'px';
Welcome.style.textAlign = 'center';
body.appendChild(Welcome);
/* Element: C */
var C = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
C.appendChild(document.createTextNode('C'));
C.className = 'C';
C.style.width = fontSize*3+'px';
C.style.lineHeight = fontSize*3+'px';
C.style.textAlign = 'center';
body.appendChild(C);
/* Element: S */
var S1 = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
S1.appendChild(document.createTextNode('S'));
S1.className = 'S';
S1.style.width = fontSize*3+'px';
S1.style.lineHeight = fontSize*3+'px';
S1.style.textAlign = 'center';
body.appendChild(S1);
/* Element: S */
var S2 = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
S2.appendChild(document.createTextNode('S'));
S2.className = 'S';
S2.style.width = fontSize*3+'px';
S2.style.lineHeight = fontSize*3+'px';
S2.style.textAlign = 'center';
body.appendChild(S2);
/* Element: footer */
var Footer = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
Footer.appendChild(document.createTextNode('\u00A9 2001-2003 Ian Hickson. Distributed under the terms of the GPL.'));
Footer.className = 'Footer';
Footer.style.top = 50+fontSize*3+'px';
Footer.style.left = lineStart/2+'px';
Footer.style.fontSize = fontSize/5+'px';
body.appendChild(Footer);
/* Animation */
var WelcomeAnimation1 = new Animator(Welcome, steps1*6/5, 0);
WelcomeAnimation1.addTransition(new DimensionTransition('font-size', fontSize/4, fontSize/3, 'px'));
WelcomeAnimation1.addTransition(new DimensionTransition('-moz-opacity', 0.0, 1.0, ''));
WelcomeAnimation1.addTransition(new DimensionTransition('margin-left', 0, lineStart+fontSize, 'px'));
animations.push(WelcomeAnimation1);
var CAnimation1 = new Animator(C, steps1, 0);
CAnimation1.addTransition(new DimensionTransition('font-size', fontSize*5, fontSize, 'px'));
CAnimation1.addTransition(new DimensionTransition('-moz-opacity', 0.0, 1.0, ''));
CAnimation1.addTransition(new DimensionTransition('left', -150, lineStart+fontSize*0.1, 'px'));
CAnimation1.addTransition(new DimensionTransition('top', -150, 50, 'px'));
animations.push(CAnimation1);
var S1Animation1 = new Animator(S1, steps1, steps1/5);
S1Animation1.addTransition(new DimensionTransition('font-size', fontSize*3, fontSize, 'px'));
S1Animation1.addTransition(new DimensionTransition('-moz-opacity', 0.0, 1.0, ''));
S1Animation1.addTransition(new DimensionTransition('left', -50, lineStart+fontSize*0.8, 'px'));
S1Animation1.addTransition(new DimensionTransition('top', 200, 50, 'px'));
animations.push(S1Animation1);
var S2Animation1 = new Animator(S2, steps1, steps1/4);
S2Animation1.addTransition(new DimensionTransition('font-size', fontSize*4, fontSize, 'px'));
S2Animation1.addTransition(new DimensionTransition('-moz-opacity', 0.0, 1.0, ''));
S2Animation1.addTransition(new DimensionTransition('left', 250, lineStart+fontSize*1.4, 'px'));
S2Animation1.addTransition(new DimensionTransition('top', 300, 50, 'px'));
animations.push(S2Animation1);
var DAnimation1 = new Animator(D, steps2, steps1*2/3);
var WelcomeAnimation2 = new Animator(Welcome, steps2*2, MAnimation1.length());
WelcomeAnimation2.addTransition(new DimensionTransition('font-size', fontSize/3, fontSize*3, 'px'));
WelcomeAnimation2.addTransition(new DimensionTransition('-moz-opacity', 1.0, 0.0, ''));
animations.push(WelcomeAnimation2);
var CAnimation2 = new Animator(C, steps2*2, MAnimation1.length());
CAnimation2.addTransition(new DimensionTransition('font-size', fontSize, fontSize*3, 'px'));
CAnimation2.addTransition(new DimensionTransition('-moz-opacity', 1.0, 0.0, ''));
animations.push(CAnimation2);
var S1Animation2 = new Animator(S1, steps2*2, MAnimation1.length());
S1Animation2.addTransition(new DimensionTransition('font-size', fontSize, fontSize*3, 'px'));
S1Animation2.addTransition(new DimensionTransition('-moz-opacity', 1.0, 0.0, ''));
animations.push(S1Animation2);
var S2Animation2 = new Animator(S2, steps2*2, MAnimation1.length());
S2Animation2.addTransition(new DimensionTransition('font-size', fontSize, fontSize*3, 'px'));
S2Animation2.addTransition(new DimensionTransition('-moz-opacity', 1.0, 0.0, ''));
animations.push(S2Animation2);
var FooterAnimation1 = new Animator(Footer, steps3, MAnimation2.length()-steps2*0.5);
FooterAnimation1.addTransition(new DimensionTransition('-moz-opacity', 0.0, 1.0, ''));
animations.push(FooterAnimation1);
var FooterAnimation2 = new Animator(Footer, steps3, FooterAnimation1.length());
FooterAnimation2.addTransition(new DimensionTransition('-moz-opacity', 1.0, 0.5, ''));
animations.push(FooterAnimation2);
}
function idle() {
var more = 0;
for (var index = 0; index < animations.length; index++) {
more |= animations[index].animate();
}
if (more) {
window.setTimeout(idle, delay);
}
}
</script>
</head>
<body onload="setup(); idle()">
<div id="canvas"/>
</body>
</html>
Hi Guys I got a problem I'm trying to embed a html page in my joomla page but it will not fit in right and the colors don't mach this is the page I'm trying to fit in http://www.quebec-ufo-research.com/R...ndex%20QC.html and this is the link where the page should go. http://www.quebec-ufo-research.com/i...id=52&Itemid=2 As you can see the colors are of and the page goes to fare to the right. NowI tried to change the tab to a lower number <TABLE CELLSPACING=1 width="707"> to 200 to check if it would work but it doesn't.Can anyone please help me with this. Thanks Fixed it =] Hello, I've got a problem and i have been searching on the web for 2 days now and can't find how to fix it. It's a .png file problem in IE7 and IE8. I have save the .png files on different ways, Photoshop CS4 > save for the web.. png 8 and png 24. sRGB - interlaced and none. But nothing has worked out so far. Also if i go to the image physically in the IE browser they show off very good. Physically i mean, domain.com/images/picture.png I think it has something to do with the hover of one image to the second image. Strange thing is that all browsers support all this except IE7 and IE8. I don't care about IE6 this will get a redirect to browser update. So can some professional look at my page and see what is going wrong here. I would really appreciate the help.. Meanwhile thanks, BJ *** Edit Deleted my url ** |
|||||||