|
CSS - I Want My Backround Image To Scroll
I there I have a background image on my forum
(goto goldeninja.co.nr and click the forum link on the nav bar) the background image are 2 ninjas resting against the sides of the board. I want them to scroll down when someone uses the scroll bar on the side of there browser... Example: goto SnedenkerDesigns.webs.com and look at the bottom of the page. It shows a ribbon. Now scroll down and it will follow your scroll. I want that scroll follow to work with my ninjas. What is the CSS code for that? Similar TutorialsWhen I view the segment below, I can't see the background image in Fx (Win32 and IceWeasel), however when I view it when editing the CSS in Chris Pederick's Web Developer Toolbar, it's there. I know it's probably something really stupid that I've overlooked, but if someone could point me in the right direction, I'd be grateful Code: .tuesday {
background-image: url('images/tu.jpg');
}
Code: <div class=tuesday> blah blah </div> Hey Guys, Im kinda stuck, my site here -beta.thenpcs.com just displays the backround in IE6. The CSS validates so im not sure what im doing wrong :/ Thanks! I know almost nothing about css, but i was using other codes to try and make something i wanted... .. Yea, well it didn't work out. heh. I want to have a scroll box within an image. Like in video games where when you read something a scroll pops up, and you can scroll the text but the image doesnt move or anything. This was the code i was trying to change.. It is for myspace, it puts all of the comments in a scroll box. But i dont need to it for that, i want to put regualr text in it. Code: <style type="text/css">
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table {background-color:transparent!important}
td.text td.text table td {font-size:13}
td.text td.text table table br {display:inline;}
td.text td.text table b, td.text td.text table table td {font-size:8pt}
td.text td.text table table td {padding:2;}
td.text td.text {height:0}
td.text td.text table table table, td.text td.text table br, .rid br, td.text
td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}
</style>
</td></tr></table></td></tr></table><br>
<table class="rid">
<tr><td><table style="display:none">
<tr><td><table><tr><td>
<style type="text/css">
td.text td.text table table table,
td.text td.text table br,
td.text td.text table .orangetext15,
td.text td.text .redlink, .rid br,
td.text td.text span.btext {display:none;}
table[id*="Friends"] {display:none;}
td.text td.text table td, td.text td.text table {height:0; padding:0; border:0;}
td.text td.text table {background-color:transparent!important;}
td.text td.text table td {font-size:10;}
td.text td.text {height:0;}
.r4wr table table table {width:auto!important}
td.text td.text table b, td.text td.text table table td {font-size:10pt;}
l{note: comment padding fix;}
td.text td.text table table td {padding:3px;}
td.text td.text table table br {display:inline;}
l{note: scrollable comments;}
.rid {display:block; width:433px; height:462px; overflow:auto;}
</style>
</td></tr></table></td></tr></table>
</div><br>
<div class="rid">
<table style="display:none"><tr><td><table><tr><td>
The image i want to place it in is 380 by 466 pixels.. Er... any broken rules i apologize for.. Uhm, thanks.. -woe hey. not sure If i can complete this in CSS, I know how to do a singular image scroll over change, but I have a navigation bar i am creating, with about 9 links across is. I want to have the image change as the mouse scrolls over each link option, so an image map navigation bar with multiple scroll over changes.... how is this possible... it must be some how... I'm currently using Dreamweaver cs4 for my site, although I do have a medium to basic knowledge of html and CSS, so I can adapt coding. any help or pointers would be great. I have two divs that are set to scroll if there is more content than can be viewed in the div. The problem is IE6/7. This works perfectly in FF. All of the contents in the boxes scrolls nicely together. However, in IE6/7, the image at the top just sits there. The text scrolls up and gets lost in the image (they are the same color). I can't tell if the text is on top of or below the image, but that is probably irrelevant. The page can be seen at www dot bordertownband dot us/test/index.php. Sorry, but my URL's seem to be blocked. Here is the CSS code for one of the boxes (they are coded the same): .contentbox { background: #FAFAED; border: 1px solid #787650; width: 461px; height: 100%; margin: 0; float: left; overflow-x: hidden; overflow-y: auto; } .contentbox #contentboxtext { width: 437px; margin: 10px; } .contentbox #contentboxtext img { margin-bottom: 10px; } Here is the HTML code: <div id="contentboxtext"> <img src="images/welcome_to_bordertown_head.png" width="432" height="22" alt="Bordertown Band Party Band Classic Rock Modern Rock Parties Weddings Wedding Receptions Birthday Parties"> <p>Bordertown was formed by a group of experienced musicians who wanted to have fun by playing songs they like and that they grew up with. Here is a list of songs Bordertown is working on now. Bordertown will add life to any atmosphere such as wedding receptions, restaurants, coffee shops, concerts, birthday parties, bar mitzvahs, political rallies, whatever!</p> <p>Bordertown is always available but never free! (that's a joke)</p> <ul> <li>Bad Day - Daniel Powter</li> <li>Don't Stop - Fleetwood Mac</li> <li>Falling In Love At A Coffee Shop - Landon Pigg</li> <li>Have A Nice Day - Bon Jovi</li> <li>How To Save A Life - The Fray</li> <li>Jammin' Me - Tom Petty</li> <li>Over My Head (Cable Car) - The Fray</li> <li>Stop And Stare - OneRepublic</li> <li>True Lies - Kenny Wayne Shepherd</li> <li>Wanted Dead Or Alive - Bon Jovi</li> </ul> </div> Any help would be greatly appreciated. I have a website im developing and I wanted to know how i would go about having a graphic element that floats on top of everything but if it goes outside the bounds of the window it wont introduce scroll bars. Reason: I have an image that i want to make quite long but its not important for the viewer to see the end of the image. I guess its a bit like a background image but on the top Thanks hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help... I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!! Code:
body {
margin:0px;
padding:0px;
font-family: Georgia;
color:#333;
background-color:#FFFFD2;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:11px/20px Georgia;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#ffffd2;
font-size:13px;
text-decoration:none;
/*font-weight:600;*/
font: Georgia;
}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}
a.blue {
color:#0000CC;
font-size:11px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
position:absolute;
top:6px;
left:14px;
width:91px;
height:126px;
background-image: url(../images/logo/gglogoweb.gif);
background-position: 1% 2px;
background-repeat:no-repeat;
visibility: visible;
z-index:1;
}
#slogandiv {
position:absolute;
top:0px;
left:0px;
width:100%;
height:137px;
background-color:#A4AA54;
visibility: visible;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:137px;
width:100%; /* the correct height */
}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}
#MenuBar {
position:absolute;
top: 136px;
left:0px;
width:100%;
height:32px;
padding-bottom:2px;
background-color:#667138;
border-bottom:0px solid #A4AA54;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
height:32px;
}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}
#Content {
position:absolute;
top: 175px;
left: 185px;
width: 81%;
padding:15px;
border: 0px solid #000000;
background-color:#ffffd2;
z-index:0;
}
body>#Content {width:81%;}
#Menu {
position:absolute;
top: 166px;
left:0px;
width:150px;
padding:10px;
background-color:#667138;
border-right:2px solid #A4AA54;
border-top:0px solid #A4AA54;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
and the other Code:
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar
.clBar{position:absolute; width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */
i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!! If anyone can help that would be really appreciated! Thanks very much RF I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that? Hi Guys i want to add a scroll bar to my User Tab so that i scroll for more users ,This is the code for the User Tab of the script i am using Top User Code <div id="an_box_topmember"> <div class="an_btm_header"><span><strong>Top User</strong></span></div> <div class="an_btm_content"> <ul> Scroll Bar Code <div style="width: 190px; height: 190px; overflow: auto; padding: 5px"> </div> Where will i add the scroll bar code,Thanks all comments are welcome seems to work in IE but not firefox... how do i get around this and make it work for both? well ive used this code snippet in a lot of pages and its worked. but this page is giving me trouble. my problem is the colors on the scroll bar itself not changing to what i tell it to. instead its, 'stock' heres the site, go to the rumors sections: www.mikeberlucchi.com heres the code: Code:
<td align="right">
<DIV
style='
color: #000000;
background-color: #867878;
border: solid 0px black;
width: 300px;
height: 250px;
overflow: auto;
scrollbar-face-color: #C3D6DA;
scrollbar-shadow-color: #3D5054;
scrollbar-highlight-color: #C3D6DA;
scrollbar-3dlight-color: #3D5054;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #FFD6DA;
'>
any input would be awesome, thanks If you look at this web site http://www.mobilvox.com/ you can see when the screen is smaller than what they designed for the scrollbars come into the window and it scrolls. I've been using the code below, and I can't seem to get the same behavoir. Code: <style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
background-color:#000033;
}
body {
font: 100%/1.25 verdana, arial, sans-serif;
color: black;
background-color: #eef;
overflow: auto;
}
p {
font-size: 1em;
margin-bottom: 0;
}
p + p {
text-indent: 1em;
margin-top: 0;
}
#header {
color: #000000;
background-color: #fff;
overflow: auto; /*encloses float children
see http://garyblue.port5.com/webdev/floatdemo.html
*/
text-align: center;
}
#header ul {
list-style: none;
margin: 0;
padding: 0;
}
#headermenu1 {
float: left;
text-align: right;
margin-left: 2px;
display: inline; /*this is a fix for IE's doubled
float margin bug*/
}
#headermenu2 {
float: right;
text-align: left;
margin-right: 100px;
display: inline; /*same as above*/
}
#global {
margin:0 auto;
width:500px;
text-align: left;
}
can someone point out the problem. - Thanks - Kris can some one help me create a css scroll bar using the colors from my site http://jaygreentreejr.info/main here is the css for the main area(links) PHP Code: td { font-family: verdana; font-size: 11px; } A:link, A:visited, A:active { COLOR: #000000; } A:hover { COLOR: #73C42C; } A:link {text-decoration: none;} A:hover {text-decoration: underline;} A:active {text-decoration: underline;} A:visited {text-decoration: none;} A:visited:hover {text-decoration: underline;} A:visited:active {text-decoration: underline;} I am at my wits end! Some of my nested divs cause FF throw up scroll bars...and not all the time. If I hit refresh, they disappear. Everything validates: Both my css and xhtml. I have tried every allowed value for overflow to no avail. There are no floated images either to vlear; just text. Give it a look in FF and see: My Site My css hi, i am trying to paint the scrollbar with the following BODY { scrollbar-face-color: #4E5455; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #999999; scrollbar-3dlight-color: #999999; scrollbar-arrow-color: #993300; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #98AAB1; margin:0; padding:0; color:#333333; font: 12px arial, verdana, helvetica, sans-serif; } but it doesn't do anything. it's still the default ie scroll bar. does anyone know why? Hi all, im having a css scrollbar within a table and on refresh of that page,i want 2 position the scroll,at the end of the table. By default the scroll is always at the top. But how do i refer to the scroll position,to bring it to the end of the table? Thanks for taking the time to read my question. I FF v.2 and IE v.7 In FF I don't get a horizontal scroll bar, which is what I want, but in IE I do. I can't figure out why. The horizontal scroll bar happens here [id="ListOfItemTitles"]. HTML: Code: <!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=windows-1252" />
<title>For Sale</title>
<link href="Matt.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Matt.js"></script>
</head>
<body onload="createArray();createArrayDVD()">
<div class="LeftNavMainOut">
<div class="LeftNavMainIn">
<div class="LeftNavContentTitle">
Select category below to view available inventory
</div>
<div class="LeftNavContentHolder">
<div class="LeftNavContent">
<!--<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>-->
<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>
</div>
<div class="LeftNavContent">
<a class="Nav" href="#" onClick="ChangeTitle('DVD \'s','DVD')">DVD's</a>
</div>
</div>
</div>
</div>
<div class="ItemListMain">
<div class="ItemListTitle" id="ListOfItemTitles"></div>
<div class="roundtop"><img class="corner" src="TopLeft3.png" alt="" style="display: none" /></div>
<div class="ItemListContent" id="ListOfStuff"></div>
<div class="roundbottom"><img class="corner" src="BottomLeft3.png" alt="" style="display: none" /></div>
</div>
<div>
<iframe src="CD.txt" id="CDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
<iframe src="DVD.txt" id="DVDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
</div>
<div class="InfoContainer">
<div class="CoverPicMain"><img id="PicutreID" class="CoverPictures" src="Covers/NoCover.png" /></div>
<div id="InformationID" class="ItemDetails">CD and DVD Information</div>
</div>
</body>
</html>
CSS: Code: html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #000000;
}
.LeftNavMainOut {
/*background-color: red;*/
float: left;
display: inline;
/*height: 600px;*/
height: 100%;
width: 170px;
margin-right: 100px;
margin-left: 80px;
padding-left:19px;
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y;
background-position: top left;
}
.LeftNavMainIn {
/*background-color: pink;*/
float: left;
height: 100%;
width: 100%;
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y;
background-position: top right;
}
.LeftNavContentTitle {
text-align: center;
font-size: 20px;
color: white;
width: 150px;
border-bottom: 4px double blue;
margin-top: 10px;
}
.LeftNavContentHolder {
margin-top: 100px;
padding-left: 2px;
}
.LeftNavContent {
background-color: aqua;
width: 140px;
float: left;
border: 2px solid CCCCCC;
text-align: center;
font-size: 20px;
margin-bottom: 10px;
}
.ItemListTitle{
font-size: 25px;
text-align: center;
width: 100%;
height: 25px;
margin-bottom: 5px;
}
.ItemListMain {
/*background-color: #99FF33;*/
margin-top: 100px;
float: left;
width: 180px;
}
.ItemListContent {
background-color: #0033CC;
padding-left: 8px;
padding-right: 8px;
height: 300px;
overflow: auto;
display:block;
}
.InfoContainer {
width: 265px;
float: right;
/*background-color: green;*/
margin-right: 100px;
margin-top: 130px; /*100px like ItemListMain, 25px like ItemListTitle, 5px like ItemListTitle*/
padding: 0px;
overflow: hidden;
}
.CoverPicMain {
/*background-color: gray;*/
width: 150px;
height: 150px;
float: right;
margin-right: 45px;
}
.CoverPictures {
width: 150px;
height: 150px;
}
.ItemDetails {
/*background-color: orange;*/
width: 260px;
height: 146px;
float: right;
margin: auto;
padding: 2px 2px 2px 3px;
overflow: hidden;
color: white;
}
.ItemDetailsArtist {
float: left;
width: 100%;
}
.ItemDetailsTitle {
float: left;
width: 100%;
}
.ItemDetailsType {
float: left;
width: 100%;
}
.ItemDetailsCost {
float: left;
width: 100%;
}
.ItemDetailsWidescreen {
float: left;
width: 100%;
}
.ItemDetailsActors {
float: left;
width: 100%;
}
.ItemDetailsRating {
float: left;
width: 100%;
}
img.corner {
height: 20px;
width: 160px;
border: none;
display: block !important;
}
.roundtop {
background: url('TopRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}
.roundbottom {
background: url('BottomRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}
.Nav {
display: block;
width: 100%;
}
.ListStuff {
display: block;
width: 100%;
border-bottom: 1px solid #CCCCCC;
}
a.Nav:link {
color: #000000;
text-decoration: none;
}
a.Nav:visited {
color: #000000;
text-decoration: none;
}
a.Nav:hover {
color: #000000;
text-decoration: underline;
background-color: #0066FF;
}
a.Nav:active {
color: #000000;
text-decoration: none;
}
a.ListStuff:link {
color: #ffffff;
text-decoration: none;
}
a.ListStuff:visited {
color: #ffffff;
text-decoration: none;
}
a.ListStuff:hover {
color: #ffffff;
text-decoration: underline;
background-color:#0066FF;
}
a.ListStuff:active {
color: #ffffff;
text-decoration: none;
}
JS: Code: var TheCDTitles=new Array();
var TheDVDTitles=new Array();
function ChangeTitle(WhichDesc, FrameName) {
TheCDTitles=''
TheDVDTitles=''
document.getElementById("ListOfItemTitles").innerHTML = "<strong><font color=#ffffff>" + WhichDesc + "</font></strong>";
if (FrameName=='CD') {
for (x in itemsArray)
{
TheCDTitles = TheCDTitles + '<a href="#" class="ListStuff" id="CD" + i + onmouseover="ShowInfoAndPic(' + x + ',' + x + ')">' + itemsArray[x].Artist + '</a>';
}
document.getElementById("ListOfStuff").innerHTML = TheCDTitles;
}
if (FrameName=='DVD') {
for (x in itemsArrayDVD)
{
TheDVDTitles = TheDVDTitles + '<a href="#" class="ListStuff" id="DVD" + i + onmouseover="ShowInfoAndPicDVD(' + x + ',' + x + ')">' + itemsArrayDVD[x].Title + '</a>';
}
document.getElementById("ListOfStuff").innerHTML = TheDVDTitles;
}
}
//*******************CD******************************
var itemsArray=new Array();
var x
function createArray()
{
x=0
var data=getCDContents();
var items=data.split('\n'); //splits the data in retreived from getContents() by line
var stats;
for (var i=0; i<items.length; i++)
{
x++
stats=items[i].split(','); //This is the line that determines what separates values in a line
itemsArray[i]={Artist:stats[0], Title:stats[1], Type:stats[2], Cost:stats[3], Pictu stats[4]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
}
}
function getCDContents()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
var iFrame=document.getElementById('CDIFrame');
var INdata="";
if (iFrame.contentDocument) INdata=iFrame.contentDocument.defaultView.document.body.innerHTML;
if (iFrame.contentWindow) INdata=iFrame.contentWindow.document.body.innerHTML;
INdata=INdata.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
return(INdata);
}
function ShowInfoAndPic(PicID,InfoID){
var Test
Test = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Artist: ' + itemsArray[InfoID].Artist + '</div>' + '<div class="ItemDetailsTitle">Title: ' + itemsArray[InfoID].Title + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArray[InfoID].Type + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArray[InfoID].Cost + '</div>';
if (Test == itemsArray[PicID].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else {
document.getElementById('PicutreID').src = 'Covers/' + itemsArray[PicID].Picture;
}
}
//*******************DVD******************************
var itemsArrayDVD=new Array();
function createArrayDVD()
{
var dataDVD=getCDContentsDVD();
var itemsDVD=dataDVD.split('\n'); //splits the data in retreived from getContents() by line
var statsDVD;
for (var iDVD=0; iDVD<itemsDVD.length; iDVD++)
{
statsDVD=itemsDVD[iDVD].split(','); //This is the line that determines what separates values in a line
itemsArrayDVD[iDVD]={Title:statsDVD[0], Widescreen:statsDVD[1], Actors:statsDVD[2], Type:statsDVD[3], Rating:statsDVD[4], Cost:statsDVD[5], Pictu statsDVD[6]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
}
}
function getCDContentsDVD()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
var iFrameDVD=document.getElementById('DVDIFrame');
var INdataDVD="";
if (iFrameDVD.contentDocument) INdataDVD=iFrameDVD.contentDocument.defaultView.document.body.innerHTML;
if (iFrameDVD.contentWindow) INdataDVD=iFrameDVD.contentWindow.document.body.innerHTML;
INdataDVD=INdataDVD.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
return(INdataDVD);
}
function ShowInfoAndPicDVD(PicIDDVD,InfoIDDVD){
var TestDVD
TestDVD = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Title: ' + itemsArrayDVD[InfoIDDVD].Title + '</div>' + '<div class="ItemDetailsWidescreen">Widescreen (x=Yes): ' + itemsArrayDVD[InfoIDDVD].Widescreen + '</div>' + '<div class="ItemDetailsActors">Actors: ' + itemsArrayDVD[InfoIDDVD].Actors + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArrayDVD[InfoIDDVD].Type + '</div>' + '<div class="ItemDetailsRating">Rating: ' + itemsArrayDVD[InfoIDDVD].Rating + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArrayDVD[InfoIDDVD].Cost + '</div>';
if (TestDVD == itemsArrayDVD[PicIDDVD].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else{
document.getElementById('PicutreID').src = 'Covers/' + itemsArrayDVD[PicIDDVD].Picture;
}
}
text doc for the CD iFrame Save this as CD.txt in the local folder Quote: 3 Doors Down,Away From The Sun,Rock,$5.00 3 Doors Down,The Better Life,Rock,$5.00 Adema,Insomniac's Dream,Rock,$5.00 Aerosmith,Get A Grip,Rock,$5.00 AFI,Sing The Sorrow,Rock,$5.00 Alice In Chains,self titled,Rock,$5.00 Alice In Chains,Dirt,Rock,$5.00 Alien Ant Farm,ANThology,Rock,$5.00 Thanks so much. Brad Hi All I'm trying to insert a scroll bar in a <div> section of my webpage but I'm having a few problems with it. In this section I have the background set to an image I created in Photoshop. It's just a plain white rectangle with rounded corners. The problem I'm having is the scroll bar is displayed outside of this area also the scroll goes right from the top to the bottom so it cuts off the rounded corners. Is there any way to have the scroll bar on the inside and inset just every so slighty?? I'm using css overflow:scroll. I hope this makes sense. Thanks in advance. i have a layout that I am trying to get to work that I need some help with. I am getting records from a database and then displaying them side by side such as: header record1 record2 record3 record4 column1 column1 column1 column1 column1 column2 column2 column2 column2 column2 column3 column3 column3 column3 column3 column4 column4 column4 column4 column4 what I want is for the page to have to scroll to the right when lots of records are present, what happens now is that say record4 starts a new line and will be under the rest of the records not are their side. I can get it if I set the div container's width to something like 10000px but that wont work as sometimes they may be longer or shorter and I dont want a lot of white space to the right side. I want this accomplised dynamically so no matter how wide it is, it will show them all. I tried overflow: scroll but that didn't seem to work. Here is the code, its in php but its not big or too hard to figure out. PHP Code: echo '<div id="tableheader">'; for ($i=0; $i<count($info); $i++) { echo '<p>'.$info[$i][name].'</p>'; } echo '</div>'; for ($i=0; $i<count($data); $i++) { if (!($i & 1)) { echo '<div class="even">'; } else { echo '<div class="odd">'; } for ($j=0; $j<count($data[$i]); $j++) { if ($j == 0) { echo '<p><a href="homedata.php?record='.$data[$i][$j].'">'.$data[$i][$j].'</a></p>'; } else { echo '<p> '.$data[$i][$j].' </p>'; } } echo '</div>'; } echo '</div>'; ?> </div> and my css is: Code:
#tableData {padding: 0; margin: 0; border: 0; width: 10000px;}
#tableheader {background-color: #ACACAC;position: relative; float: left;}
.odd {background-color:#C0D8E1; position: relative; float: left;}
.even {position: relative; float: left;}
#tableData p {padding: 0 3px; margin: 0; border-right: 1px solid black; border-bottom: 1px solid black;display: block;}
Any ideas? Thanks I would like to have the content section of my page have only a vertical scroll bar, an no horizontal one. How can I make content wrap if it goes over horizontaly, but scroll if it goes out of bounds verticaly? |
|||||||