Jump to content

CSS Positioning with HTML Marquee


tinfanide
 Share

Recommended Posts

How can I have the marquee on the top right without being interfered by the images on the left?I discovered if I just used HTML img src to insert the images on the left, the marquee was positioned all right.Once I used CSS styling in the images, the marquee lost its direction and border.Could anyone tell me how I can make the marquee:positioned- on the top right corner- under the "What's new" section and above the "more" link- the image on the left DOES NOT ride over the marquee- the marquee has a green borderMany thanks!!!The code is as follows:<!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><script language="javascript">// var Tscroll_path_to_files = 'ts_files/'// function Tscroll_init (id) {// document.write ('<iframe id="Tscr' + id + '" scrolling=no frameborder=no src=mainframe.html?' + id + '" width="1" height="1"></iframe>');}</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>BME, Bachelor of Music in Education (Honours)</title><style type="text/css"><!--#apDiv1 { position:absolute; width:498px; height:426px; z-index:1; left: 11px; top: 9px;}#apDiv2 { position:absolute; width:200px; height:115px; z-index:2;}#apDiv3 { position:absolute; width:200px; height:115px; z-index:2; left: 161px; top: 68px;}#apDiv4 { position:absolute; width:470px; height:115px; z-index:2; left: 11px; top: 224px;}#apDiv5 { position:absolute; width:284px; height:396px; z-index:3; left: 499px; top: 255px;}#apDiv6 { position:absolute; width:741px; height:115px; z-index:4; left: 11px; top: 752px;}#apDiv7 { position:absolute; width:200px; height:115px; z-index:5; left: 494px; top: 224px;}body { background-color: #FFFFFF; background-image: url(); background-repeat: no-repeat;}#apDiv8 { position:absolute; width:200px; height:115px; z-index:6; left: 12px; top: 225px;}#apDiv9 { position:absolute; width:367px; height:121px; z-index:2; left: 519px; top: 45px;}#apDiv10 { position:absolute; width:201px; height:36px; z-index:3; left: 521px; top: 10px;}.style18 { color: #FF9966; font-weight: bold; font-size: 24px;}.style19 { color: #FF9966; font-weight: bold; font-size: 16px;}#apDiv11 { position:absolute; width:339px; height:172px; z-index:4; left: 98px; top: 162px;}#apDiv12 { position:absolute; width:337px; height:83px; z-index:5; left: 1px; top: 96px;}a:link { color: #FF9966; text-decoration: none;}a:visited { color: #FF9966; text-decoration: none;}a:hover { color: #FF9966; text-decoration: underline;}a:active { color: #FF9966; text-decoration: none;}.style22 { color: #FF9966; font-weight: bold; font-size: 18px;}#apDiv13 { position:absolute; width:368px; height:168px; z-index:5; left: 520px; top: 178px;}.style23 {color: #FF9966}.marquee_notice { position:absolute; top:0; right:0; overflow:auto; width:50; height:100; }--></style><script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script><meta name="keywords" content="BME, Bachelor of Music in Education (Honours) (Contemporary Music and Performance Pedagogy) Programme, Hong Kong Institute of Education, HKIEd, Music, music degree, music programme, HKIEd music" /></head><body><div id="apDiv1"><img src="pic/Campus/2.jpg" width="500" height="350" /></div><p>What's News</p><div><marquee class="marquee_notice"; align="right" behavior="scroll" direction="up"><a href="http://www.google.com.hk/">TESTING</a></marquee></div><div class="style18" id="apDiv10">What's New</div> <div align="right" class="style19"><a href="whats_news.html" target="_self">More</a> </div> </form></div><div id="apDiv13"> <p class="style23"><a href="http://www.ied.edu.hk/acadprog/undergrad.htm" target="_blank">Application Information</a></p> <p class="style23"><a href="http://www.ied.edu.hk/acadprog/online/" target="_blank">Online Application</a></p> <p class="style23"><a href="text_file/HKIEd_BME leaflet 2011 intake_060110.pdf" target="_self">Download Programme Leaflet</a></p></div></body></html>

Link to comment
Share on other sites

have you tried just considering a simple approach, by using floats and margins and paddings, via the box model? It would help eliminate the need for a lot of positioning and z-indexing, which I'm sure will cause you problems when users of a different screen resolution than yours visits the site.http://www.w3schools.com/css/css_boxmodel.asp

Link to comment
Share on other sites

it would help if you define the unit you wish to use for width and height of the marquee..marquee_notice { position:absolute; top:0; right:0; overflow:auto; width:50px; height:100px; }
Yes, I used floating which looks better. But I still didn't know why top and right properties just don't work, to my dismay.And I notice maybe some browsers do not read width or height without px.Thanks for ya reply.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...