tinfanide Posted February 15, 2011 Share Posted February 15, 2011 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 More sharing options...
thescientist Posted February 15, 2011 Share Posted February 15, 2011 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 More sharing options...
dsonesuk Posted February 15, 2011 Share Posted February 15, 2011 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; } Link to comment Share on other sites More sharing options...
tinfanide Posted February 16, 2011 Author Share Posted February 16, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.