HTML - No Repeat - Problems
Hi, i have the following problem. I'm working on a site that uses a table. The middle part of the table has a background image that should be stable and should not move, stretch or repeat itself within the table cell.
On top of that backgroundimage are points that when a mouse hovers over it an image specific to that location is deisplayed....the background image being a map and the fixed points specific locations on the map. I have 2 questions : 1) To fix the background i used : <table background-repeat:no-repeat="" background="campustour%20flensburg_files/flcampus.jpg" border="0" height="633" width="753"> is that correct ? if so why does it not work and as soon as someone hover over the location the background get's repeated ? 2) Is there a better way to do this interactive map without using tables ? The site is here :http://www.cartoonorama.de/ Thanks for any suggestions. George Similar TutorialsHey, I'm working on a site, and I've made a background that works for what I'm doing, but it repeats on the bottom. See, I can't use the no-repeat (or so I think) because the image is 3px wide. What do I do? Hi all, I'm new here and was hoping I could get some help. I am trying to make an image repeat right next to a first image. Example: img1, img2, img2, img2, img2, img2, img2, img2, img2, ..... Here's a better example using the drupal logo. Say I needed to place this image at the top of my page: and needed this one to go on the right of the first image and repeat over and over (Horizontal only to the end of the page): Any help is greatly apreciated, thanks in advance hey everyone - im really not a scripter i only do designs, but i wanted to know if its possible to repeat an image that is not set as background like in a table? thanks alot! x here's my site: gypsysphere.com I'm trying to get the dates on the posts below to not repeat when they are multiple posts on the same day. Any ideas? Here's the html: <div class="datebox"> <div class="date"><?php the_time('d'); ?><?php _e('th'); ?></div> <div class="month"><?php the_time('M'); ?></div> <div class="year"><?php the_time('Y'); ?></div> </div> And CSS: .datebox{margin-left:-50px;position:absolute; border-bottom:solid 1px #dcdcdc; margin-top:10px;} .date{ display:block; width:40px; padding:2px 0px; font-size:17px; font-weight:bold; color:#f2f2f2; background:#222; text-align:center;border-bottom:solid 1px #666;} .month{ display:block; width:40px; font-size:17px; font-weight:bold; color:#222; background:#cdcdcd; text-align:center; text-transform:uppercase;border-bottom:solid 1px #c5c3c3;} .year{ display:block; width:40px;font-size:14px; font-weight:bold; color:#222; background:#e7e7e7; text-align:center;} Thanks I have created a menu bar that runs horizontally along the top of my website (not as a frame) and repeats across every webpage. I was just wondering if it was possible to insert some shorter code that referenced a text file that contained the menu bar code so that I would not have to put my menu code on every page. I'm thinking something in CSS might do it, but I'm not sure. Thanks. Hi all, I sold an ad on my blog and they want it placed beneath each individual post. I know where to place the code within my template to make that happen, BUT they only want it to appear under the top 3 posts, not every single post. I'm assuming there is some sort of "no repeat" or "limited repeat" code I can use, but my skillz do not venture that far. Can anyone offer any help? Thank you!! www.yankeeschick.com how do you get music to repeat itself over and over. and to auto play? here is the code <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="13" height="13" allowNetworking="internal"> <param name="wmode" value="transparent"> <param name="allowScriptAccess" value="sameDomain" /><param name="FlashVars" value="resourceID=97664201&flp=false" /> <param name="movie" value="http://static.last.fm/webclient/inline/1/inlinePlayer.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed wmode="transparent" src="http://static.last.fm/webclient/inline/1/inlinePlayer.swf" quality="high" FlashVars="resourceID=97664201&flp=false" bgcolor="#ffffff" width="13" height="13" name="inlinePlayer" allowNetworking="internal" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <a href="/music/Linkin+Park"></a><a href="/music/Linkin+Park//Wake"></a> problem is i dont know how to make it repeat and i dont know how to make it autoplay i would be very gratefull for any help given Yeah, it's probably a real simple question but it's bugging the heck out of me. I'm trying to design my first layout (hence why it looks so simple), but it's not working out. Here's the layout: http://www.lifeschronicles.net/index_test_brown.html I want the content boxes (pale brown) to run all down the page. How do I do that? Please help. Edit: Ok I have finally realised what I need to do. So simple! Haha. Can ignore/delete this thread if you want to. Sorry guys! I am trying to create a frame for a page content as shown in the attachment. As you can see, each column has a pilaster (background which is not repeated) and actually a column which is repeated. Generaly I want to create a code which would work for a content of any length, so I want the columns to be repeated as many times as it is required automatically. Here is what I tried to do. Of course, this does not work, otherwise I wont ask Do you have Ideas how to make it working? HTML Code: <table cellpadding=0 cellspacing=0 border="0"> <tr> <td colspan=3 style="background-image:url('top_beam.jpg');background-position:bottom;background-repeat:no-repeat;"> </td> </tr> <tr> <td style="background-image:url('left_pilaster.jpg');background-position:right;background-repeat:no-repeat;"> </td> <td rowspan=2> ACTUALLY THE CONTENT </td> <td style="background-image:url('right_pilaster.jpg');background-position:left;background-repeat:no-repeat;"> </td> </tr> <tr> <td style="background-image:url('left_column.jpg');background-position:right;background-repeat:repeat-y;"> </td> <td style="background-image:url('right_column.jpg');background-position:left;background-repeat:repeat-y;"> </td> </tr> <tr> <td colspan=3 style="background-image:url('brick_floor.jpg');background-position:top;background-repeat:no-repeat;"> </td> </tr> </table> I've been writing this xhtml/css page and ive run into a problem. It should be a bit confusing to explain but ill try. Basically i want a nav bar on the left side, one solid color going from top to bottom, and then text next to this. So i have a div tag for the nav bar that ive set with css to have a height of 100%. the text however, makes the page too big and thus it has to scroll. But when I scroll down the nav bar is gone. By that I mean it doesnt repeat past where I can see on the page before scrolling. How would i make the nav bar go ALL the way to the base of the page? I am trying to use two different repeat bg images for right and left side. I want them to repeat on 'x-repeat' coordinated and they are going to be on the right-left side of the .swf , Here is my code; <html> <head> <title>SeanDon.com</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> body { background-color: #aef0ff; } .leftRepeat { background-image: url( 'images/index_01.jpg' ); background-repeat: repeat-x; } .rightRepeat { background-image: url( 'images/index_03.jpg' ); background-repeat: repeat-x; } </style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (SeanDon_web_illustration 950x650 b.ai - Slices: 01, 02, 03) --> <table id="Table_01" width="950" height="650" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="30%" height="652" class="leftRepeat"> </td> <td align="center" valign="top"> <div align="center"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" height="650" title="SeanDon"> <param name="movie" value="index.swf"> <param name="quality" value="high"> <embed src="index.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="950" height="650"></embed> </object> </div> </td> <td width="30%" height="652" class="rightRepeat" ></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> I have an image that serves as a text box. It includes a border (i.e., the border is part of the image, not HTML) and a background picture. The picture fades into a solid color at the bottom. This first image depicts the top, left, and right parts of the border. (Here is the plan I first envisioned.) I have created a second image, one pixel tall, of what the rest of the box would look like, after which it would end in a similar 1px-high image of the border color. So, as the background of a div, is there a way to display one image, then have another image repeat indefinitely, followed by a third image? Alternatively, is there a way to have the background be a simple repeated image, with another one on top of it? Then I could cap the bottom in a different div. The most likely solution I have come up with is the following. Why don't I crop off the border and do that with HTML? That way, I have only to display one image, and the rest of the background can be a solid color. I don't know how to do this either, but it seems the most plausible. Hi I want to addd a image for background so i can postion it and not have it repeat : for for a table cell if u see my link below its the purple table cell that has the Bomboniere Adelaide as the heading i only want the background image in that cell - thanks in advance http://weddingsmadeeasy.com.au/adelaide/Bomboniere.html Hi I have tried a lot of things and search the internet for hours regarding this matter... My image background doesn't reapeat in Internet explorer however works fine in any other browsers such as google chrome and firefox. Can you please help me get this fixed? I am new to xhtml and css and really it's really frustrating having this kind of problem. Thank you Website Link: www.pjrazon.co.uk/newlayout/index.html screenshots if it helps: CSS: @charset "utf-8"; * { margin: 0px; padding: 0px; } body { background-color: #CCCCCC; } a:link { color: #ffffff; text-decoration: none; } a:visited {text-decoration: none;} a:hover {color: #b23937;} a:active {text-decoration: none;} #wrapper { width: 1151px; margin-right: auto; margin-left: auto; border-right-width: thin; border-left-width: thin; border-right-style: solid; border-left-style: solid; border-right-color: #999999; border-left-color: #999999; } #wrapper #logo { height: 120px; width: 1151px; } #wrapper #navigation { background-image: url(../images/nav.home.gif); height: 32px; } #wrapper #navigation #navlabel { color: #FFFFFF; padding-top: 5px; padding-left: 125px; } #wrapper #navigation #navlabel #nav li { display:block; width:100px; float:left; list-style:none; } #wrapper #header { height: 391px; background-image: url(../images/welcome.jpg); } #wrapper #mainContent { height: 384px; background-image: url(../images/maincontent.jpg); width: 1151px; } #wrapper #bodyArea #footer { background-image: url(../images/footer.jpg); height: 73px; clear: both; } #wrapper #bodyArea { background: url(../images/bg_bodyarea.jpg) repeat-y; } #wrapper #bodyArea #mainContent #content { display:block; width:400px; float:left; } #wrapper #bodyArea #mainContent #contentwrapper { padding-left: 140px; padding-top: 70px; } HTML: <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Perfect Vision</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="logo"><img src="images/header.jpg" alt="logo" /></div> <div id="navigation"> <div id="navlabel"> <ul id="nav"> <li><a href="homepage.html">Home</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> <div id="header"></div> <div id="bodyArea"> <div id="mainContent"> <div id="contentwrapper"> <div id="content"> <p>August 10 2010</p> <p> </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper turpis in tortor interdum sed mattis lectus mollis. Pellentesque laoreet quam et mauris feugiat sit amet eleifend turpis imperdiet. Praesent condimentum libero vitae massa imperdiet pellentesque. Vestibulum et risus dolor, ac tincidunt velit. Maecenas lobortis diam tellus. Suspendisse auctor, velit ut imperdiet semper, erat orci pharetra tortor, venenatis vulputate metus eros ut felis. Cras ullamcorper odio sed felis ornare ultricies. Phasellus porta adipiscing aliquet. Aenean ligula tellus, blandit a pulvinar in, fermentum a erat. Sed arcu nisl, porta eu vestibulum at, luctus sed tellus. Aenean eget quam justo, quis ultricies ante. Vivamus tempor sollicitudin augue ut rhoncus. Sed odio mauris, imperdiet ut elementum vitae, dapibus at quam. Nullam in aliquam sem. Fusce consectetur laoreet elit, non consequat nunc tempus nec. Cras at enim ipsum. Praesent ipsum purus, tempus non sagittis volutpat, fringilla eget mi. Maecenas sed elit est. Morbi facilisis purus eget nunc tincidunt iaculis mattis quam pellentesque. </p> <p> Sed tortor leo, laoreet sit amet mattis a, fermentum in ligula. Sed tempor lacus a lorem fermentum fermentum semper nunc sagittis. Vivamus et est porta purus mollis cursus eget in ante. Sed lacinia, diam in tempor suscipit, turpis enim posuere turpis, sit amet vestibulum quam nulla id elit. Vivamus ultricies tempus mi, non consequat velit mollis id. Curabitur vehicula, turpis id tempor condimentum, sem nulla molestie enim, vel commodo metus ipsum non nisi. Aliquam erat volutpat. Fusce venenatis porttitor massa eget suscipit. Sed purus turpis, iaculis id sollicitudin id, vulputate sit amet velit. Suspendisse sed velit non tellus eleifend venenatis vehicula ut elit. Integer sit amet ullamcorper nulla. </p> <p> Vestibulum dictum ante eu nisl ornare tincidunt. Etiam id risus mauris. Duis nec turpis in neque porttitor euismod sed id odio. Sed molestie urna a magna fermentum egestas. Nulla facilisi. Quisque risus neque, sodales pulvinar rhoncus a, lacinia eget neque. Vivamus vel malesuada nisl. Proin mollis tempor felis id dapibus. Morbi velit mi, aliquet sed malesuada et, blandit vitae eros. Nulla nec lorem quam, eu aliquam sapien. Quisque venenatis, enim non ultricies lobortis, lectus dolor consectetur nulla, eu tincidunt metus enim vitae libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sit amet neque eu libero commodo condimentum. Fusce hendrerit diam sed libero lacinia nec adipiscing massa posuere. Pellentesque eget libero risus, eget venenatis metus. Morbi quis dolor enim. Cras orci orci, ultrices nec consectetur sed, auctor non leo. Aliquam nec sem erat. Nam ut nunc sed leo tempor pretium. Maecenas sit amet tortor a neque congue iaculis eu in ipsum. </p> </div> </div> </div> <div id="footer"></div> </div> </div> </body> </html> I have this task as part of an HTML class project. It has to be done using the <embed> tag, and must repeat a wav file twice (playing it three times total). This is the code I'm using: <p> <embed src="background.wav" width="145" height="100" hidden="true" autostart="true" playcount="3" loop="3" /> </p> It doesn't loop at all in firefox, and in IE it loops constantly. If I remove the loop="3" attribute, it works properly in IE. Is there any way to get this working across browsers using the embed tag, or would a more complex method be needed? (such as javascript browser detection with browser specific code). I'm really stuck on this, any help would be really appreciated. this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon My OS is windows 7 64bit and have installed: - internet explorer 9 - Mozilla Firefox - Google Chrome My website is getting displayed correctly on Firefox and Chrome but is a bit of a mess on IE9 If you could have a look and let me know if there is anything I could do, would be much appreciated. Here is one page of my site that is bothering me: http://www.dashony.com/Solar%20panel...0projects.html Please check out the white menu, ( SpryMenuBarVertical ) using IE and one of the other 2. Thanks! Hi everyone, I recently landed myself a job as a web manager. It's been a long time since I done it however, as I've had children to bring up and so on - i'm a bit rusty but getting through it okay. I've hit a snag however and I'm wondering if anyone can help me... The website i'm charged with watching over works completely fine bar one problem, and its not even a big problem - just a bit annoying. One of the images, when opened in Chrome, floats to the left when it is supposed to be central. This is the only image to do this on the website in any browser. Has anyone got any tips for me? |