|
HTML - Newbie Trying To Align Image With Backround
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 Similar TutorialsHi 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; } 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. 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? 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. I'm having trouble trying to align an image to the top and right. If I just use <img src="" align=right> it goes right as far as I want it, but for some reason the image falls below the text line and appears odd. If I use <img src="" align=top> it goes with the text line like it should, but then it's not to the right like it should be. Isn't there some way to combine the two? <img src="" align=right align=top> doesn't work. Thanks in advance. hello, im kinda a noobie here, i cant align my image! I need it to be centered, but i cant seem to find how. How would you do this? I have a list of items and I want to display image on the right side of one list item. How can i do it? For example: <ul> <li>Coffee</li> <li>Tea</li> </ul> I want to display a rectangle figure on the right side of 'Coffee' text. I need to apologize beforehand for asking help with such a aimple process. I'm doing a site exclusively in HTML. It looks pretty good for my first attempt, but I can't find data ANYWHERE online to vertically align images. The site is frames, the top frame just displays an image, I need the image to self-center to accommodate other screen resolutions. Perhaps I need to align the text(that isn't there), and then align the image to it? Thanks in advance, Tom i just have a cell where i want to align the contents to the upper left and stay there .. simple right i've tried html and css styles but can't get safari and IE to display the same thing.. surely this is easy..i've even validated the html.. it works in safari but not in IE - i've tried using CSS styles but can't seem to find the attribute to "stick it in the top left corner" - valign does the trick in safari too but doesn't work in IE.. what have i gotta do - thanks for your helps.. sandy HTML Code: <?xml version="1.0" encoding="utf-8"?>
<!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>
<title>Annyx Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="text.css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
-->
</style>
</head>
<body onload="MM_preloadImages('button_news_on.jpg','button_stuff_on.jpg','button_contact_on.jpg','button_location_on.jpg')">
<table width="807" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td height="40"> </td>
</tr>
</table>
<table width="807" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="main" height="28" colspan="3"><img src="frame_top.jpg" width="807" height="28" alt="bollocks"/></td>
</tr>
<tr>
<td width="31" rowspan="2"><img src="frame_left.jpg" width="31" height="657" alt="bollocks"/></td>
<td width="746" height="73"style="vertical-align: top;"><img src="logo.jpg" width="370" height="73" alt="bollocks"/><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','button_news_on.jpg',1)"><img src="button_news_off.jpg" name="news" width="79" height="73" border="0" id="news" alt="bollocks"/></a><a href="stuff.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('stuff','','button_stuff_on.jpg',1)"><img src="button_stuff_off.jpg" name="stuff" width="72" height="73" border="0" id="stuff" alt="bollocks"/></a><a href="location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('location','','button_location_on.jpg',1)"><img src="button_location_off.jpg" name="location" width="107" height="73" border="0" id="location" alt="bollocks"/></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','button_contact_on.jpg',1)"><img src="button_contact_off.jpg" name="contact" width="117" height="73" border="0" id="contact" alt="bollocks"/></a></td>
<td width="31" rowspan="2"><img src="frame_right.jpg" width="31" height="657" alt="bollocks"/></td>
</tr>
<tr>
<td valign="top"><div id="pagetitle"><img src="title_stuff_sub.jpg" width="118" height="50" alt="bollocks"/><img src="title_chickens.jpg" width="584" height="50" alt="bollocks"/></div></td>
</tr>
<tr>
<td colspan="3"><img src="frame_bottom.jpg" width="807" height="27" alt="bollocks"/></td>
</tr>
</table>
</body>
</html>
I have my Introduction with the title and all. Then i want my href links on the left side of the picture. However i can't seem to be able to do it.(this is a type of autobiographical site for web design, i am making it as a joke to the current assignment. HOWEVER my teacher isn't able to assist me with this...) Ok here is my code <html> <head> <title>A web site about nothing but video games</title> </head> <body> <h1 align="Center">Chairman of the world</h1> <h4 align="center">This is a site dedicated to Chairman Tide Oo</h4> <hr noshade="1"> <center> <img align="middle" src="http://www.dimensionsguide.com/wp-content/uploads/2009/11/Orange.jpg"> </center> <a href="_" >Link 1</a> <p>Yes and yes</p> <a href="_">Link 2</a> <p>Why not </p> <a href="_">Link 3</a> <p>Why yes </p> <a href="_">Link 4</a> <p>Ye...no?</p> <a href="_">Link 5</a> <p>YES!</p> <hr noshade="1"> </body> </html> Thank you~ Hi All, if there a way of adding two images with a title in the middle. For example "Image" This is a example "Image2" With both images flush against the borders. Because at the moment mine looks daft lol!! The RightTopImage needs to be obviously Top right of the webpage, and then there will be an image to the left of the webpage with the title in the middle... I cant figure out the structure of CSS Html HTML Code: <div class="page">
This will be where the Left Image will be.
<div class="header">
<div class="title">
"Text as an example......"
</div>
</div>
<div class="RightTopImage">
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div class="clear">
</div>
</div>
Css HTML Code: .RightTopImage
{
background-image:url(../Images/RightTopSmoke.gif);
background-repeat: no-repeat;
background-position: top right;
width: 292px;
height: 222px;
}
.page
{
width: 100%;
background-color: #fff;
margin: 0px;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
I havent added the left image yet, but if any one can help me or maybe have a code snippet i could use it would be highly appreciated. P.s this will be in the site master. Thank you. Quick update. Am i right in saying this is how you define a title with two images and a text area. .Query { background-image:url(../Images/RightTopSmoke.gif); background-repeat: no-repeat; background-position: top right; Text Details go here background-image:url(../Images/RightTopSmoke.gif); background-repeat: no-repeat; background-position: top left; } hmmmmm I have a logo image and a table (being used as a nav.) I want the table to be centered vertically on the right side of the logo. Here is what I have so far: css: HTML Code: body .logo {position:absolute;
}
table {width: 65%;
margin: 20px auto 0px auto;
border-bottom: 3px solid #3399cc;
}
html: HTML Code: <div> <div id="Drafting & Design Logo" class="logo"> <img src="menu/Logo.png" height="155" width="139"> </div> <div> <table> <tr> <td width=18.3%><a href="#" id="drafting" target="_new" /></td> <td width=25%><a href="#" id="programming" target="_new" /></td> <td width=18.3%><a href="#" id="resume" target="_new" /></td> <td width=18.3%><a href="#" id="contact" target="_new" /></td> </tr> </table> </div> </div> I want the entire thing centered in 65% of the browser window. Right now the image off to the left and the table is centered. When I change the margins on the image it doesn't do what I would like it to. Also, the reason I don't add it to the table is because I want to have a line under the nav bar stopping at the logo. Any help would be greatly appreciated. Hi guys, i put only one image in my page. but its not align of center of the screen. It aligned only horizontally. i want also vertically centered alignment. the image should align horizontally center and also vertically center align. how can it possible please send me the valuable solution or opinion. i gave one sample image. Hello, I have a simple problem and tried to google but did not get anything much. I want a simple HTML page which had a image aligned absolutely to the right in the middle and touching the scrollbar. Now, I can achieve this by having the image as the body background. However, when I use it in a image tag, it is aligned to the right ut there is space between the scrollbar and image. about a centimeter. Can anyone help.? Please note that there is no text just a image which has a map tag. I just need to align it to the extreme left or right touching the browser. this works great. if I put the no repeat option Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>S</title> </head> <body background ="6.jpg"> </body> </html> however when I use as a regular image there is a gap. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>S</title> </head> <body> <img src = "6.jpg" align = right> </body> </html> Thanks, Sunil this is SO easy - except for me.. how do i align this image to the top of the page - i am using CSS for the text but not for the image by the way.. thanks for your help.. sandy http://www.thebollocks.org/drop/rugged/taylor.html Hi I'm still a newbie to HTML coding hence i would most appreciate your assistance. I'm writing a few articles for my site and making use of images in my pieces. However, i'm having alot of problems aligning the caption just right in the middle under the image. I would also like to add a hyperlink to the caption to open in a new window. I've tried numerous tutorials on the web but still cant get it. Would most appreciate some advice. Thank you With the align attribute of <img> deprecated, can anyone tell me what the correct way of center-aligning an image should be? Thanks, James |
|||||||