|
HTML - Backround Image In Table Tiling With Different Screen Resolutions
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. Similar TutorialsHi, I am a photographer and am trying to build my own site. Am using dreamweaver 8 and am ok using it, but my html is a little rubbish. have been developing my site, www.robertallenweddingphotography.co.uk, however just realised i have been developing at 1024x768 but if you look at the site at a lower or higher resolution it looks v.bad. Have read a few bits and pieces about using % instead of set pixels?! but am a bit lost! Can any body point me in the right direction? Basically want to end up with a site that looks 'correct' to as many people as possible! Thanks Rob Hi! I'm having a problem with my website on larger screens. My website looks fine on my 1024 by 768 screen, but when I check it on higher resolution screens, all the content is stuck in the upper left corner leaving a big void on the right. How would I make my content appear in the middle of the screen like most modern websites? Or is there another solution that somebody can propose? Thank you for your time! Im designing a new site and I was kind of wondering a few things that I was hoping to get some answers to. I wasnt sure where this should be posted so if its in the wrong spot please accept my appology. So I do know I want to do alot of css and make it look very professional. 1) I remember at one time that you should make the site big enough to accomidate an 800x600 resolution. But considering that 1024x768 and bigger is pretty common place should I be scaling up to that or still stay at 800x600? 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>
Hello, all...this is my first time on the site. I am a newb when it comes to HTML etc...I won't lie. I know just about nothing when it comes to websites. I'm a graphic designer, and i created a background for my website I'm trying to: (A) Stop the tiling of my background image... (B) Center the image I bought some books on HTML and they're pretty good. I don't have any trouble following them. I started reading about STYLE SHEETS and it seems this is the way to go. I've read about EXTERNAL, INTERNAL, INLINE and I would like to use the EXTERNAL method...but I don't know how to: (A) Make a link to my style sheet for the background image to be centered (B) Writing the style sheet, so that it centers and doesn't tile my image... Pllease, any help that you could give me, would be GREATLY appreciated. Thank you. http://www.cahoonzcreationz.com I am trying to create a table that does not change size depending on what the screen resolution is set to. I know that it is good practice to use percentages, however, as I am used to using pixels, I am finding it frustrating as I don't get the desired table size I want when the resolution is changed Here is an example of the table, if anyone can help me with the changes, it would be much appreciated or if you could point me in the direction of a tutorial that makes the table resize to reflect the chosen resolution preference, that too would be welcomed Code: <font color="#FFFFFF" face="Verdana" size="2">
<table width="810px" align="center" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#000033">
<td height="130px" colspan="2"><div align="center">Header</div></td>
</tr>
<tr>
<td width="130px" height="130px" bgcolor="#000066"><div align="center">Login</div></td>
<td width="680px" height="130px" bgcolor="#000099"><div align="center">Image</div></td>
</tr>
<tr bgcolor="#0000CC">
<td height="80px" colspan="2"><div align="center">Page Title</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center"></div></td>
<td rowspan="15" bgcolor="#0066FF"><div align="center">Body</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 1</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 2</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 3</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 4</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 5</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 6</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 7</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 8</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 9</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 10</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 11</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 12</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center"></div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center"></div></td>
</tr>
<tr bgcolor="#003399">
<td height="30px" colspan="2"><div align="center">Footer</div></td>
</tr>
</table></font>
Thanks in advanced Hi, How do I get my table to be flush with the top and sides of the screen? Currently there is a spacing in automatic between. Thanks Hi, How do you get an image at the top of the screen This is what I mean, Thanks. I've got the weirdest thing happening... An image on a site I'm working on doesn't appear on in Firefox on my computer when I view the site online. It's fine offline, and it's fine on other computers... including browsercam. It's also fine in IE on my system AND when I set up a guest system in VMWare I can see it in Firefox. So this probably isn't really an HTML question, just a "Have you ever seen this total weirdness?" question. I've rebooted repeatedly. The image is the photo of the sledders in the upper left corner at http://tourismwithkidsinnh.com. 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? Hello everyone.... I'm trying to figure out how to tile right to left with an image inside a <td>. Anyone know how? Right now I'm using the background property but it tiles an image left to right. I need it to tile right to left. Any ideas? Thank you...... Hi All, I need to have a wide (1984px) image centred on the screen. If the screen is only 1024px wide it always aligns left. I am probably missing something basic here but can anyone offer advice? Thankyou. Hi all I only know very basic HTML and at the moment. I have an image that is hosted on Buzztouch. http://www.buzztouch.com/application...elfordboat.jpg Now my Question What code would I need to write so when you click on a page the image appears full screen no mater what brower you use it on. ? thanks Dont know how to explain this but i have some flash centered in the middle of the screen and i would like to put a image that to the left and right of the centered flash im running at 1024x768, i did seem to manage this but when i tried a higher resolution the flash stopped center and the left and right image kept to the left and far right of the screen when what i wanted is the left and right image to stay flush left and right to the centered flash. Below is my code minus the left and right image, could someone help me add a image to the left and right of the centered flash, so even if the resolution is increased the left and right image will stay flush with the centered flash. HTML 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></title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>
<body >
<table width="770" border="0" align="center">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="70">
<param name="movie" value="bombay-logo-top.swf" />
<param name="quality" value="high" />
<embed src="bombay-logo-top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="70"></embed>
</object></td>
</tr>
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="400">
<param name="movie" value="main.swf" />
<param name="quality" value="high" />
<embed src="main.swf" main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="400"></embed>
</object></td>
</tr>
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="100">
<param name="movie" value="time.swf" />
<param name="quality" value="high" />
<embed src="time.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="100"></embed>
</object></td>
</tr>
</table>
</body>
</html>
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. Alright, 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'm currently designing this website: www.carmelalopez.com and I'm trying to get the images on the left to fit the size of the browser screen on the right when you click on them. The images themselves are huge, so I'd like some kind of code that resizes the images to fit the size of the visitor's screen, which will vary from user to user. This might not be an HTML question (maybe CSS), but any guidance in the right direction would be greatly appreciated. Thank you. |
|||||||