|
CSS - Problems With Text Scrolling Offscreen..
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 Similar TutorialsI 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 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. 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'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 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 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? [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 Hi, we have a site that is having some issues with text formatting, and I'm hoping someone can help vs. changing the template. the site is paydayleads(dot)com and as you can see, even text formatted in <p> tags are not coming up as new paragraphs, everything is grouped together, etc. I was able to format a list alright, but I am trying to figure out how to troubleshoot the regular paragraph problems. Any ideas? If Im not in the right place can anyone suggest where to go? In Firefox, my text will align perfectly. However, IE will not show the text in the proper spot and I can't come up with a way to over come this. Heres my css document: /* CSS Document */ #header { margin: auto; background-image:url(images/header.jpg); width:800px; height:158px; left: auto; top: auto; right: auto; bottom: auto; background-position: center; } #headernav { font-family: "Times New Roman", Times, serif; font-size: 14px; font-style: normal; color: #4B60AF; font-weight: normal; word-spacing: 12px; margin-top: -42.5px; margin-right: auto; margin-bottom: auto; margin-left: auto; any suggestions? BTW the text is in headernav Ok, so here is my page: http://a.parsons.edu/~sean/weargreen/home.html and here is the design I layed out in photoshop http://a.parsons.edu/~sean/weargreen/homeimg.gif In FireFox the text is placed a few pixels lower than the text in IE. Though I have fiddled around with the placement and lineheight and all that, I can't get them to look the same. Here are screenshots IE: http://a.parsons.edu/~sean/weargreen/iescreen.gif FF: http://a.parsons.edu/~sean/weargreen/ffscreen.gif Any advice or help would be greatly appreciated. Thanks! The new version of the website I work on is now structured using CSS to position divs, whereas the old site was done entirely using tables. The thing is, it's no longer possible to select the text properly now its inside div tags - many of the other divs get highlighted completely, and the target text gets highlighted in an unpredictable manner - whereas on the old site, with its table format, this was not a problem. Please help! Argh! I want to have a little icon as a link with a caption under it. It should be a no brainer. Like this: PHP Code: <a class="a" style="line-height: normal;" href="http://www.oregonetail.com/etail.html"><img src="/images/heart_innovation_icon.jpg" height="60" width="39" alt="heart innovation poster" border="0" />E-tail Neighbors</a> Here's the thing, there's a GAP between the graphic and the caption, and if the caption has to go an extra line because of the width constraint of the <div> that this is in, there's a huge GAP between the lines. I want the caption BUTT UP against the bottom of the picture and if the caption wraps, I want the second line of it BUTT UP against the first one NO GAP. I've been twiddling around with line-height but NOTHING I DO alters this in the slightest. BTW the "a" class is nothing but font-size: .75em my next test is to take that out and see if that helps, but I don't have a clue what is the root cause of this. This should be so ffing basic!!! Removing the "a" class didn't work. Here is a little context: Code: <div> <div style="width:88px; float:left" > <a href="https://estore.villageprofile.com/itemdetail.cfm?nItemid=546&viewby=exhibit&nexhibitID=2&subview=37" target="_blank"> <img src="/images/corv_ebook_cover.jpg" style="width:88px; height:100px" border="0" /> <span class="a" style='line-height: .5;'>FREE Town Guide</span></a> </div> <div style="float: left; width:50px;"> <a href="http://www.corvallisiba.org"><img src="/images/ciba_tiny.jpg" height="33"; width="50" alt="ciba logo" border="0" /> <span style='line-height: .5;'>CIBA Member</span></a> </div> On one of them I took the span out in case *THAT* was causing it and applied the styles to the "<a" tagged item as in the first exmple. NOTHING changed. PLEASE HELP! Hi guys, I just wanted to say that I think devshed is a kick butt place for getting help with all sorts of CSS problems... always seems whenever I post that someone really helpful ends up helping me solve the problem in a way I hadn't thought of... So here's the issue: I need to put two elements into a div, one aligned on the left side and one aligned on the right Now what I'm looking at is the section where I have the Home text and the Quick News. So I've put the design into XHTML and CSS he But I can't seem to get the news line to move over properly. Any suggestions? I have used float:right but it just doesn't seem to work. I tried putting a div in and align=right but that pushes the element onto the next line which I don't want. Any ideas guys? There simply has got to be an easy way to align text within a div that I'm missing somehow. Thanks! I am working on a site and I have a lot of the design worked out but I am running into a problem. The client wants to two columns. one in the center with a background image and a second off to the side as a sidebar. The second div is working as I want it to so far but the problem is placing the background image on the first div and getting the text to appear on top of it. Any help would be appreciated. Code: <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position: absolute;
top:75;
left:180px;
z-index: 1;
width: 800px;
height: 600px;
background-image:url('WEROCK-NETWORK-BG2.png');
}
}
#sidebar {
position: absolute;
top:95;
left:1000px;
z-index: 1;
width: 175px;
height: 600px;
background-color: #FFFFFF
}
}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
<script language="JavaScript">
function maximizeWin() {
if (window.screen) {
var aw = screen.availWidth;
var ah = screen.availHeight;
window.moveTo(0, 0);
window.resizeTo(1024, 768);
}
}
</script>
<body onload="javascript:maximizeWin()">
<img src="WEROCK-NETWORK-BG.png" alt="background image" id="bg" />
<div id="content">
test
</div>
<div id="sidebar">Sidebar test</div>
</body>
</html>
Hi all, I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified. How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments. Thanks in Advance. - John im sure this may be answered somewhere on this forum inside another post, but using search, i could not find anyone who had actually asked this specific question... i found a few posts back in 2002 that never got a responce... i'd hope we'd have an answer 3 years later... anyhow, my question is quite simple... i think.. i have a div that is 50px in height, and has some text inside it.. the text aligned center, and now i want it to vAlign center.. but the CSS doesnt seem to work... my problem is that the text in that field changes quite often, and having to constantly change margins in CSS would be a pain. anyhow, now for a snippit Code:
.advertboxtitle {
margin:10px 0px 0px 110px;
height:50px;
border:1px dashed #900;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#CCFFFF;
font-weight:bold;
text-align:center;
}
.advertboxtitlevalign {
vertical-align:middle;
}
Code: <div class="advertboxtitle"> <span class="advertboxtitlevalign">From X-Box to Xbox</span> </div> anyhow, reason why it is in a span is because i read that inline elements react to vertical-align:middle... but apparently not... anyhow, here is a link.. http://defunctgames.com/helpfix/middle.htm the text needs to be align verticaly in the dashed red box. thanks I am having two problems with a theme I have for PHPBB3. One problem is the text that you type into textboxes when making a new post, updating your profile, or a few other spots is white on a very light grey background; therefore, hardly showing up. The second problem is that the page display a white line at the bottom of a few pages (but not others) and the line goes away if you resize the IE window smaller, but reappears again if you full screen it. I know the first problem has to exist in the stylesheet.css file; however, I am not sure where to make these changes as I am not familiar with PHPBB stylesheets. If anyone could help it would be greatly appreciated. Thanks! Forums: Click Here Stylesheet: Click Here Pictures of my problems: Text problem- Line Problem - |
|||||||