Objects Moving Around Page (Full Version)

All Forums >> [Web Development] >> Dreamweaver Help



Message

mellis200 -> Objects Moving Around Page (1/17/2008 11:40:01)

Hello,

I am using dreamweaver MX 2004, and am experiencing problems with my layer boxes and images moving around the page. The text is doing the same thing. I have the images sitting in the layer boxes, but not the text. I would appreciate any help on this.

Thank you.



Tailslide -> RE: Objects Moving Around Page (1/17/2008 12:14:48)

You'll have to give us a URL as otherwise it could be any number of reasons causing this.

Probably due to your using absolute positioning for the divs with images in. Absolute positioning positions items according to their container. It sounds like you've got your divs positioned with reference to your viewport (the browser window) rather than the actual containing div. If these divs with images are within another div - add "position:relative;" to that div's CSS rule and you might sort it.

Generally using absolute positioning is a bit of a pain and you're usually better off floating images and divs instead of trying to position them absolutely. When you AP something you remove it from the normal flow of the page completely - and therefore they'll move without any reference to stuff around them.




mellis200 -> RE: Objects Moving Around Page (1/17/2008 13:01:52)

So I should just delete the layers, and put the Images next to the text?



Tailslide -> RE: Objects Moving Around Page (1/17/2008 13:10:39)

It's difficult to know without seeing your code and knowing what end effect you want - but if you just want an image sitting within a chunk of text then, yes - don't bother with divs especially for the image - just have it in the text and float it left or right depending on whether you want the image to be flush with the left or right hand side of the text. If you float the image then the text will wrap neatly around it.



mellis200 -> RE: Objects Moving Around Page (1/17/2008 13:17:50)

Here is my code. All I want is for the images to be next to the text..... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="3col_leftNav.css" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
.style1 {
	font-family: "SF Atarian System";
	font-size: 120%;
}
.style2 {font-family: "SF Atarian System"}
.style3 {font-size: 120%}
.style12 {color: #006699}
.style13 {font-family: "SF Atarian System"; font-size: 120%; color: #006699; }
-->
</style>
</head>
<body> 
<div id="masthead"> 
  <div id="Layer2" style="position:absolute; width:234px; height:111px; z-index:2; left: 372px; top: 1px; font-size: 105%; color: #334d55; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;"><img src="RossMS/distingbanner2.gif" width="100" height="100"><img src="RossMS/abcusd.gif" width="124" height="114"></div>
  <h1 id="siteName"> </h1> 
  <div id="globalNav">
     
    <p> </p>
    <div id="Layer6" style="position:absolute; width:200px; height:115px; z-index:6; left: 18px; top: 83px; font-weight: bold; color: #000000;">HOME OF THE FALCONS</div>
    <div id="Layer4" style="position:absolute; width:126px; height:38px; z-index:4; font-size: xx-large; left: 92px; top: 4px; color: #666666; font-weight: bold;">MIDDLE</div>
    <div id="Layer5" style="position:absolute; width:137px; height:43px; z-index:5; font-size: xx-large; color: #666666; font-weight: bold; left: 90px; top: 40px;">SCHOOL</div>
    <p> 
    </p>
    <div id="Layer3" style="position:absolute; width:89px; height:40px; z-index:3; left: 2px; top: 22px; font-size: xx-large; font-weight: bold;">ROSS </div>
  </div> 
  <p> </p>
  <p> </p>
  <p> </p>
  <div id="Layer1" style="position:absolute; width:137px; height:80px; z-index:1; left: 606px; top: 1px;"><img src="RossMS/title1aaalogo2.jpg" width="200" height="100"></div>
</div>
<div id="navBar"> 
  <div id="search"> 
  </div> 
  <div id="sectionLinks"> 
    <h3>Links</h3>
    <ul> 
      <li><a href="RossOffice1.htm" class="style1">Office Staff </a></li> 
      <li><span class="style2"><span class="style3"><a href="Teachers1.htm">Teachers</a></span></span></li> 
      <li class="style1"><a href="#">Library</a></li> 
      <li class="style1"><a href="#">Bell Schedules </a></li> 
      <li class="style1"><a href="#">PTA</a></li> 
      <li><span class="style1"><a href="#">REACH</a></span></li> 
    </ul> 
  </div> 
  <div class="relatedLinks"> 
    <h3>School Info/Policies</h3> 
    <ul> 
      <li class="style2"><span class="style3"><a href="#">Homework Club </a></span></li> 
      <li class="style1"><a href="#">After-School Activities </a></li> 
      <li class="style1"><a href="#">Interventions</a></li> 
      <li class="style1"><a href="#">Dress Code </a></li> 
      <li class="style1 style12">EXTRA</li> 
      <li class="style1"><a href="#">Tardies</a></li>
      <li class="style13">Star Testing</li>
      <li class="style13">ELAC </li>
      <li><span class="style1"><a href="#">Homework</a></span></li> 
    </ul> 
  </div> 
  <div class="relatedLinks"> 
    <h3>Other Links </h3> 
    <ul> 
      <li><span class="style2"><span class="style3"><a href="#">Lunch Menus</a></span></span></li> 
      <li class="style13"><a href="http://www.mynutrikids.com">My Nutrikids</a> </li>
      <li class="style13">Calendar</li> 
      <li class="style13">Band Schedule </li>
      <li class="style1"><a href="http://www.abcusd.k12.ca.us">ABC Unified School District </a></li> 
      <li class="style1"></li> 
    </ul> 
  </div> 
</div> 
<!--end navBar div --> 
<div id="headlines"> 
  <h3> </h3>
  <h3>Headlines</h3>
  <p> Daily Bulletin <br>
    <b><i><font face=""><font color="#000066"><br>
  </font></font></i></b></p> 
  <p> 
  </p> 
  <div id="advert"> 
    .
 </div> 
</div> 
<!--end headlines --> 
<div id="content"> 
  <div class="feature"> 
    <p> </p>
    <p><img src="IMG_3602.JPG" alt="" width="250" height="220" align="left"> 
    </p>
    <h3>Principal's Message </h3> 
    <p>
     Welcome to Ross Middle School, Academy of Creative and Media Arts (RACMA), where all students are challenged academically and creatively through a standards based core curriculum infused with the arts, media and technology.
</p> 
    <p><strong>2007 California Distinguished School Award </strong><br>
      <img src="IMG_3581.JPG" width="114" height="116">Our school was selected as one of only 171 secondary schools to be honored as the best among California public schools. This award recognizes our outstanding commitment to academic excellence, creativity and support for student learning. Over the last six years, the dedicated staff at Ross has transformed our school from a high poverty, high minority and low achieving school to a place in the top 7% of California middle and high schools.
    <p><strong>2007 Title Academic Achievement Award </strong><br>
      <img src="RossMS/title1aaalogo2.jpg" width="150" height="100" align="right">Our school was also honored with this prestigious award which acknowledges our extraordinary growth in academic achievement both school wide and among socio- economically disadvantaged students. We were one of only 476 Title I schools in the state to receive this award.
    <p>    
    <p><strong>Academic Achievement </strong><br>
    Student achievement is on the rise again at Ross. Our Academic Performance Index increased 14 points to 740. The percent of students proficient in English Language Arts has increased 7% in the past two years, and the percent of students proficient in Math has increased over 14%.
    <p><strong>2006 National Magnet School of Distinction </strong><br>
  Last year our school was recognized as a Magnet School of Distinction for our commitment to innovation in curriculum. Students at Ross participate in classes in music, visual arts, video production, dramatic arts, and dance. This award acknowledges our outstanding achievement among federal magnet schools throughout the nation.
    <p><strong>Creative and Media Arts </strong><br>
  Seventh grade students experience exploratory classes in applied art, drama, computer arts survey and the Yamaha Music in Education program. Eighth grade visual arts students develop their talents through printmaking, ceramics, watercolor and drawing. Video production students film, edit, and produce daily school news broadcasts over Channel One. Drama students present two major performances each year, and music students choose from Beginning, Intermediate and Advanced Band, orchestra, drum line, parade band, jazz band and choir. Journalism students publish the RACMA Times as well as the school yearbook. Technology is infused across the curriculum, with both students and teachers having access to state -of –the- art computers in the classrooms, computer lab and library/media center with a student/computer ratio of 5:1.
    <p>Ross Middle School is a place where students explore their talents, develop their abilities and learn to understand their responsibilities to themselves and to their community. We are proud of our Title I Academic Achievement and California Distinguished Schools Awards, and our innovative curriculum in the creative and media arts. <br>
    </p>
  </div> 
  <div class="story"> 
    <h3> </h3> 
  </div> 
  <div class="story"></div> 
</div> 
<!--end content --> 
<div id="siteInfo">   17707 S. Elaine Avenue. Artesia, CA 90701. 


 FAX (562) 402-6145

Phone Number: 562-924-8331 | ©2008</div> 
<br> 
</body>
</html>



d a v e -> RE: Objects Moving Around Page (1/17/2008 14:50:05)

or this page then?
http://www.rossms.abcusd.k12.ca.us/administrators.html



jaybee -> RE: Objects Moving Around Page (1/17/2008 15:57:21)

When people ask to see your code all they want is the URL to the page, they can grab the code themselves and check it.

If you do have to post code on here, please post it in between code tags so it doesn't take up reams of space. The Code tags can be entered into your posting box by pressing the <% button on the toolbar.

I've modified your post above for you.



Tailslide -> RE: Objects Moving Around Page (1/17/2008 16:02:33)

No I don't think it's the same one Dave - I think this is a new one. But I can't really do alot without seeing the CSS too - best if you could upload your html and css to the web that way we don't have to start re-building the file for you - we can fiddle with it live.

But from the looks of it - yes, there's a load of AP in there which, as mentioned is hard to get right to be honest. If you just want the images in the text then just remove the divs around the images. Then give the ones you want floated left a class - say "left" and the ones you want floated right a class of "right" then in your stylesheet add: 

img.left {float:left; margin: 5px 5px 5px 0;}
img.right{float:right; margin: 5px 0 5px 5px;}


for example.

I'm off to bed now, hope that's helped!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125