HTML - Right-left Repeat Backgrund Images

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

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

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>

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 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

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?

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

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 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>&nbsp;</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.

In html left to right <marquie behaviour
but i want right to left the text comes from right to left and left standard positin
whch command do i need to use? please provide
thanks for helping

Hi ,

I have an odd HTML question. In my company we make procedures (stuff that we think we need written down in case we need to repeat it), which we update on a regular basis. Whenever we go to do an install, update, fix, etc. and we need a procedure, we print it out and then head off with it (we make red lines as necessary.) All of these are in HTML and stored in CVS.

One of the engineers (she is not terribly familiar with HTML and turned to me) asked me if I could make a little "box" to the left of a list. The steps of the procedure are a bunch of <li> tags, having a nice box to the left to check it off as you go through them would be great. This stumped me. The best that I could do was make a one-celled table inside the <li> tags (the HTML for which I've posted) in order to get the impression of a "box" where you can check off a step that you just completed. Is there any way to put that box on the left? If you look at the end of this post I made a simple ASCII representation of what I would like to accomplish.

Code:

<html>
  <head>
    <title>
      Example
    </title>
  </head>
  <body>
    <ol>
      <li>
        <table border="1">
          <tr>
            <td>
              &nbsp;&nbsp;&nbsp;&nbsp;
            </td>
          </tr>
        </table>
        Do stuff...
      </li>
      <li>
        <table border="1">
          <tr>
            <td>
              &nbsp;&nbsp;&nbsp;&nbsp;
            </td>
          </tr>
        </table>
        Do stuff...
        <ol type="a">
          <li>
            <table border="1">
              <tr>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                </td>
              </tr>
            </table>
            Do sub-step...
          </li>
          <li>
            <table border="1">
              <tr>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                </td>
              </tr>
            </table>
            Do sub-step...
          </li>
          <li>
            <table border="1">
              <tr>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                </td>
              </tr>
            </table>
            Do sub-step...
          </li>
        </ol>
      </li>
      <li>
        <table border="1">
          <tr>
            <td>
              &nbsp;&nbsp;&nbsp;&nbsp;
            </td>
          </tr>
        </table>
        Do stuff...
      </li>
    </ol>
  </body>
</html>

Code:

+---+
|   |  1) Do stuff...
+---+

+---+
|   |  2) Do stuff...
+---+

       +---+
       |   |  a) Sub-step...
       +---+
       
       +---+
       |   |  b) Sub-step...
       +---+
       
       +---+
       |   |  c) Sub-setp...
       +---+

+---+
|   |  3) Do stuff...
+---+

I want to add a left vertical sub navigation... but i want it to look similar to this one! RamVideos

I dont know where to start... Thanks In Advance!