|
CSS - Novice Needs Help With Customized Scrolling Text Bar In A Table
[A view of what I want the final product I made in photoshop is attached.]
When it comes to the technical aspect of design I BS my way through most of it or pick it up as I go along. On top of this, I'm too anal to use anything but Notepad to edit my code, but that's not the problem. This is: The image at the bottom of the page is what I'd like the damn page to look like without the use of Flash (I could do that, but I want to make a seperate site design that uses flash and keep this to HTML, CSS and maybe Javascript). So, I found this: URL and I think it's what I want, but, my first thought was that it was an arhived post. It actually appears to be an unanswered post. I tried it out, and sure enough it doesn't work. Well, I was hoping it would, because I'm more geared towards Graphic Design and no coding. I tend to design em first and fill in the blanks later. Well, this time, my code isn't the only thing that's blank and I'm just this page and another very similer one away from finishing the site, so I need help. Here's how I planned to put the thing together: It's an HTML table centered in the middle of the page. I was planning on planting the CSS in the gaping hole left by removing a section of table, and praying it fit snugly. Am I going about this wrong? And if I'm not and that link is the solution to my problems, how do I implement it into my code? I tried a test version of it, and couldn't get it to work, but I'll tell you now, I only have a theoretical graps of CSS and haven't dove into it as of yet...thus I know nothing really. And on top of this, I want to make those two left side text pieces link to anchors in the scrolling text. And those things on the right side are customized scoll bars. The latter is not nesscary (I know that's java script. I had it on a site I did a while ago, but the site is lost and I didn't code that section), but it would be optimum. So that's it, and, well, if it works, it will look pretty. Thanks for your help before hand, if this is too rambling, please feel free to tell me to better describe it. I'm in a bit of a rush, and as soon as I hit "Submit" I'm running out the door. ------->Jeff Compton Similar TutorialsDear all, I have been working to implement a scrolling table into an xml / xsl interface and so far have managed to put together an acceptable version using <thead> and <tbody> syntax. Indeed, for the html examples that I found out there, this seems to work perfectly. On the surface it also works perfectly in my xml / xsl implementation too (html underneath). Indeed, using IE6*, you can take a look at a cut-down example by going to this link ... http://alse.load4.net/scrollproblem/scrollproblem.xml ... and then selecting 'Milan', 'Report Test' and clicking on 'Run'. This gives a nice scrolling list which is exactly what I want. However ... If you scroll to the bottom of the list in the scrolling area (the list is short as I have removed most of the data and all the reports except for this one) and then resize the window, the headers are distorted. With more data (which is normally the case for us) the distortion is even worse. I have spent many hours tweaking my CSS (contain in the XSL file for convenience) and the HTML but just can't get rid of the 'distortion-on-resize' problem. I am hoping that either ... a.) There is a way to block the browser from being resized (I don't know if there is?) ... or ... b.) Someone can take a look at my syntax and offer a suggestion to sort this out. The source code can be obtained by clicking on the two hyperlinks 'xml file' and 'xsl file' included in the link. Indeed, I believe that the problem (and solution) may lie in some dynamic CSS declarations ( e.g. top: expression(offsetParent.scrollTop); /*IE5+ only*/ ) which I have obtained from various examples but don't understand completely. Many thanks for any help that you can give as this could be a great little tool if we can sort out this last hurdle. Regards, Alan Searle *: This solution is only designed to work with IE as that is what we have in-house. CSS: Here are the CSS declarations which are contained in the XSL file ... [code] <style type="text/css" media="screen"> table {width: 99%; background-color: #E2EFFE; border-style: solid; border-collapse:collapse; border-color: #316AC5;} table.displayframe { background-color: white; border: solid 1px #316AC5;} h1 {margin-top: 1em; font-variant: normal;} h2 {margin-left:5px;} h3 {margin-left:5px;} div.tableContainer { width: 100%; /* table width will be 99% of this*/ height: 344px; /* must be greater than tbody*/ overflow: auto; margin: 0 auto;} table.cont { width: 98%; /*100% of container produces horiz. scroll in Mozilla*/ border: none; background-color: #E2EFFE;} table.cont>tbody { /* child selector syntax which IE6 and older do not support*/ overflow: auto; height: 301px; overflow-x: hidden;} thead.cont tr { border: none; position:relative; top: expression(offsetParent.scrollTop); /*IE5+ only*/ } thead.cont td, thead.cont th { font-size: 14px; background-color: white; color: blue; border: none; /* border-top: solid 1px #d8d8d8; */ } td.cont { color: #000; padding-right: 2px; font-size: 8px; border-bottom: solid 1px #d8d8d8; border-left: solid 1px #d8d8d8;} table.cont tfoot tr { /*to help IE*/ position: relative; overflow-x: hidden; top: expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0); } a:link {text-decoration: underline;} a:hover {text-decoration: underline; color: #851D9E;} a:visited {text-decoration: underline; color: #8080C0;} </style> does anyone know the code for a scroll text box? plz help Can anyone tell me where I can get some info on CSS? Specifically I am trying to create sort of a news page, which will have a box that contains news articles that slowly scroll upwards until they disppear and then raeppear at the bottom at the bottom of the box again. I know this can be done with CSS and I've kind of accomplished what I want. The problem is that I'm using seperate elements for each article title. Therefore, only one article title scrolls through the box at the time since I can only make one element visible. Mabye, it will make more sense when you see my code. I want to basically be able to have the other news article titles begin to scroll underneath each other, not having to wait for the news article title above it to finish scrolling before the next article enters the box. I hope this makes sense! here is the code: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function init() { nos = 1; items = 6; posY = 130; scroller(); } function scroller() { if (nos == items + 1) { nos = 1; } elemID = 'elem'.concat(nos); objDOM = document.all[elemID].style; objDOM.visibility = "visible"; posY -= 1; objDOM.top = posY; if (posY <= 50) { objDOM.visibility = "hidden"; posY = 130; nos += 1; } setTimeout ("scroller()",10); } // --> </SCRIPT> <STYLE TYPE="text/css"> <!-- #elem1 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #elem2 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #elem3 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #elem4 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #elem5 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #elem6 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #screen {position:absolute; visibility:visible; left: 20px; top:50px; z-index:0} --> </STYLE> </HEAD> <BODY onLoad="init()"> <DIV ID="elem1"><FONT COLOR="#000000"> News & Events- article 1 </FONT></DIV> <DIV ID="elem2"><FONT COLOR="#000000"> News & Events- article 2 </FONT></DIV> <DIV ID="elem3"><FONT COLOR="#000000"> News & Events- article 3 </FONT></DIV> <DIV ID="elem4"><FONT COLOR="#000000"> News & Events- article 4 </FONT></DIV> <DIV ID="elem5"><FONT COLOR="#000000"> News & Events- article 5</FONT></DIV> <DIV ID="elem6"><FONT COLOR="#000000"> News & Events- article 6</FONT></DIV> <DIV ID="screen"> <TABLE WIDTH=350 HEIGHT=120 BORDER=0 BGCOLOR=#808080> <TD></TD></TABLE> </DIV> </BODY> </HTML> Hi, I have a webpage that has a fixed background with a header. I want my content to be able to scroll without overlapping my header. Meaning, the content needs to be masked? Or on a different z-index? Or in a frame? I know these are possible but nothing seems to be working. Please help!!! HTML CODE: Code:
<div id="background">
<div id="menucontainer">
<div id="menu">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="safaris.html">Safaris</a></li>
<li><a href="lodging.html">Lodging</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div></div>
<div id="content">
<h1><span>About Us</span></h1>
<p> Welcome to Trompettersfontein. Our expertise is to create exclusive and
unique safaris, professionally assisting you in your most unforgettable
hunting experience. Originally a cattle ranch during the 1960's, we are
now a prominent name in the gaming and ranching industry. Located in the
Elisraas region, Lepahale, in the Limpopo province close to thabazambi and
the waterburg area creating a wildlife oasis making it a prime hunting ground
of South Africa. Situated on 1000 hectors, with special hunting permission
our total hunting area extends over 3000 hectors of typical bushveld area.
The terrain makes makes excellent meat hunting and bow hunting grounds.
Owned and managed by Marius Moolman, a professional game hunter since 1986.
An exceptional tracker with a vast knowledge of the bush and game, he has
studied the age-old natural relationship between predator and prey. He has
also had the privilege of hunting the Big 5 and is a great host and sense
of humour that will leave you with a longing of coming back soon.</p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
</div>
</div>
CSS CODE: Code:
body {
background:#000000;
margin:0px;
padding:0px;
width:100%;
}
#background{
background-image: url('Images/background2.jpg');
background-repeat: no-repeat;
background-position:top;
background-attachment: fixed;
margin:0px;
padding:0px;
width:100%;
height:100%;
z-index:-10;
}
#menucontainer {
width:650px;
margin:auto;
padding:150px 0 0 0;
}
#menu{
width:650px;
margin:0px;
position:fixed;
z-index:5;
}
a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FF6600;
text-decoration: none;
}
a:visited, a:active {
color: #FF6600;
text-decoration: none;
}
#menu ul{
font-family:Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000000;
text-decoration: none;
list-style-type:none;
margin:0px;
text-transform: uppercase;
font-weight: bold;
}
#menu ul li{
display:inline;
margin: 0px;
padding:3px 14px 3px 14px;
}
#content{
width:500px;
margin:auto;
padding:0 0 400px 0;
position:relative;
top:30px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align:justify;
z-index:1;
}
h1 {
background: url('Images/about.png') no-repeat top left;
width:168px;
height:38px;
}
h1 span {
visibility:hidden;
}
p {
line-height: 18pt;
}
As I am pretty new to CSS (about 3 months now) please be patient if I dont understand very advanced coding. Thanks for your time and effort. Any help is much appreciated. In order to generate a scrollable table with fixed header, I am using the method which relies on two separate tables nested within div elements: one table that contains the fixed header row, and another for the main data rows. The div holding the data table has a fixed height and overflow set to auto to enable the scrolling. This part works fine. The problem, as some old posts in this forum describe, is getting the column widths to line up in both of the tables. I tried several things, but this rather brute force method is the only potential solution I have come up with: The first row of both tables must contain an identical header row (I'm using 'td' elements rather than 'th'). I must also include one row of data within the header table -- a 'dummy row'. To achieve the desired effect, the dummy row in the first table, and the header row in the second table, must both be made invisible to the user without altering the rendering of the column widths. I first tried using 'display: none', and the rows disappear but the table reflows and the columns no longer align between the tables. If I instead use 'visibility: none', the columns remain aligned, but now I have to deal with the two rows of blank space that separates tables 1 and 2. Is there a CSS method to collapse that dead space between the two tables? Or perhaps another approach altogether? Note: Unfortunately, I need a solution that will work in MSIE 6/Win. Code: <div id="screenheader">
<table width="98.8%">
<tr>
<td>column heads...
</tr>
<tr id="dummyRow">
<td>representative data...
</tr>
</table>
</div>
<div id="dataTable">
<table id="mytable" width="100%">
<thead>
<tr>
<td>column heads again
</tr>
</thead>
<tr>
rows of data...
</tr>
</table>
</div>
#dummyRow { visibility: hidden; }
thead { visibility: hidden; }
#dataTable {
height: 200px;
overflow: auto;
border-bottom: solid thin #999
}
I'd like to create a table that'll scroll so I can control the on-screen size and have buttons visible below the rows, and so on. I found an example, that appears to have the CSS to make it work in IE (at least that's what the comment say), but although it looks fine in Firefox, I can't get it to work at all in IE 8. Can someone take a look and tell me if there's some simple change that needed, of if this just plain is NOT going to work in IE, or what? I put the whole thing in here, so if you grab it and dump it in an html file, it should run... 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>
<style type="text/css">
<!--
/* Terence Ordona, portal[AT]imaputz[DOT]com */
/* http://creativecommons.org/licenses/by-sa/2.0/ */
/* begin some basic styling here */
body {
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0
}
table, td, a {
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}
h2 {
font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}
h3 {
font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #008000;
margin: 0 0 15px 0
}
/* end basic styling */
/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 756px
}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
overflow: hidden;
width: 756px
}
/* define width of table. IE browsers only */
div.tableContainer table {
float: left;
width: 740px
}
/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. */
html>body div.tableContainer table {
width: 756px
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative
}
/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
display: block
}
/* make the TH elements pretty */
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
}
/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}
/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}
/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body thead.fixedHeader th {
width: 200px
}
html>body thead.fixedHeader th + th {
width: 240px
}
html>body thead.fixedHeader th + th + th {
width: 316px
}
/* define width of TD elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body tbody.scrollContent td {
width: 200px
}
html>body tbody.scrollContent td + td {
width: 240px
}
html>body tbody.scrollContent td + td + td {
width: 300px
}
-->
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>
<th><a href="#">Header 3</a></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
</tbody>
</table>
</div>
<div><br /></div>
</body>
</html>
I'm trying to make one of my current websites compliant with W3C standards by not using marquee tags. The problem is that I still want to keep my horizontal scrolling text (yes, I know there is an issue with accessibility standards but I still need the scrolling text). Anyways, I have found all sorts of ways to use CSS and JavaScript for vertical scrolling text while still being compliant however I have no clue how to do it with horizontal scrolling text. The site I am trying to update is www.gpfbarracudas.org , specifically the scrolling text under the title image. Any help would be greatly appreciated! Josh Hi All, I am experementing with a fixed watermark image/background on my webpage.The code worked fine to prevent the image from tiling however when I scroll the whole lot goes as well,the table of rolovers and the header image. I need a code to keep the table of javascript and the image fixed while only the text scrolls. Also as you will see the bg image takes up the whole page which results in the text scrolling over the entire height of the page.Is there any code I can apply to make a cut off point for the text,for appearance sake lets say the top bar of the image .Here is the url of the page I am working on. Thanks URL I've got some text setup in a <div> of mine, and the lines of text are so long that they scroll off the side of the screen. I want these lines to wrap to a new line so they don't scroll off the screen. How do you make text in a <div> not be able to be more wide than like, x% of the screen? To view my problem go to my url he my site In the HTML below I use divs contentleft, contentcenter and contentright. Because the text under the Header Contentright is so long I would like to make a scrollbar for the text of contentrigth but withoud the Header contentrigth, so that you alwaus see the header when scrolling the text. Is this possible with these content-codes? This is the HTML I have so far: Code: <head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css"><!--
#contentcenter { background-color: #eee; float: left; padding: 0px; width: 300px }
#contentheader { background-color: #fff }
#contentheader h1 { font-size: 14px; margin: 0px; padding: 16px }
#contentleft { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright p { font-size: 14px }
#toptext { text-align: left; margin-top: 10px; margin-right: auto; margin-left: auto; padding: 0px; width: 650px }
body { text-align: center }
h1 { font-size: 14px; margin: 0px 10px 10px; padding-top: 10px }
p { margin: 0px 10px 10px }-->
</style>
</head>
<body>
<div id="toptext">
<div id="contentheader">
<h1><a href="home.asp">Top Text</a>, page with three columns: left, centered, right.</h1>
</div>
<div id="contentleft">
<h1>Header Contentleft</h1>
<p class="greek">This is the left column</p>
</div>
<div id="contentcenter">
<h1>Header Contentcenter</h1>
<p>This is the center column</p>
</div>
<div id="contentright">
<h1>Header Contentright</h1>
<p>This is the right column. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla blaBla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla</p>
</div>
<p><br clear="all">
<!-- without this little <br /> NS6 and IE5PC do not stretch the toptext div down to encopass the content DIVs -->
</div>
</body>
</html>
I am trying to build a table in which the center scrolls both ways but the columns and rows around the edges stay put - have a look at the page below using IE6 to see what I mean: (URL address blocked: See forum rules) This is working exactly as I want it to in IE6, my problem is that I can't get it to work right in IE7 - the horizontal scrolling is not working properly. By re-instating the commented out code on line 81 I can get it to sort of work, but I don't want to have to specify the width like this as the table contents are going to be dynamic and there is no way of knowing how wide they will be. This is for use on a company intranet where all the users have IE6 or IE7, hence I am not concerned with other browsers or earlier versions of IE. Any help getting this working would be much appreciated... P I have a script that shows the latest lines from my chat. sometimes people will post a super long url or another super long thing without periods ie testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something how can I make css break that up so the browser window won't scroll vertically? I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want How to use CSS and DIV properly ... how to code them properly ... can you explain it to me ... and give me some example ... cause i want to make a website using CSS and DIV Hi all, I have a problem with a website I am trying to build. The website is designed to be in three colums with the centre one containing the site content. Both the left and right column contain only a background image that provides the site good aesthetics. Below are links to diagrams of both how the site is currently displayed, and how i would like it to be displayed; http :// securetransaction .co .uk /orangepi /images /2.jpg http :// securetransaction .co .uk /orangepi /images /1.jpg Any help would be greatly apreciated, i can provide the current code if necessary. Cheers How do I remove the text decoration (make underline invisible) in table by CSS? text-decoration: none; cannot work in my CSS..... <style type="text/css"> table { font-family: Verdana; font-size: 12px; text-decoration: none; } </style> Hi, I am making a website for my friend that lost her myspace acount becuase of here small uncle. So I want to make a website for her that is simmular to myspace. So my question is: How do I add in text up the top in the border that is 15xp? Thank you. I am using a Body{...} style on my page (background set to black #000000) and DIV's inside Tables inside DIV's and when I set up and use a .14 (14px size and white color font syle class) my text stays black! The only thing that works is "inline styles". Not good for site wide-control. There is obviously a conflict here or something is superceding my classes. I prefer to use CSS for font control. I am using div's because of a "jquery slider" and tables because I usually design the look in photoshop and then use slices... not doing that on this site, but it's just what I'm used to. Thanks for any help. single page site is here "petermarsphotography dot com" Hey folks, i'm trying to get the effect of the following image: http://www.dgemu.com/Images/first_steps.jpg Basically I got it all set up 'cept for Metroid's image, which is just driving me insane.. I used absolute positioning on the metroid image so I could use relative positioning on that table thingy and use z-index to put it there, but I'm having problems with the text - it goes behind the image ahhhh - what can I do? I was thinking perhaps adding relative positioning for the text too and make it above the image but what I want is to not touch the image - u know like u do float:right on the image - but I can't use float 'cuz then the z-indexing thing messes up.. hmm.. can anyone help me? |
|||||||