Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Sep 2004
    Posts
    2
    Member #
    7392
    On my PC the a site I designed (mainlinefamilydentistry.com) looks fine...no images overlap or anything. however, when viewed in the same browser(IE) on different PCs,the images overlap the text and everything isnt the way I positioned a little. I read the other posts similar to this aboutr CSS style. It said something about adding <td style="position:relative;">. but I don't have any tables in mine.? Also why would it look different if its the exact same page viewed in the exact same browser at the same display setting? I just wanna fix this ASAP. any help would be greatly appreciated. thanks

  2.  

  3. #2
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Almost all dreamweaver layer problems(this one included) orgionate from the same problem.. dreamweaver has no clue what you really want it to do since a div can be used a countless number of ways. This is why you need to understand what you have in your markup. As in all answers I have made on this subject you must understand be able to dig around your code to fix this.

    I am going to use part of your source to show you what is going on and how to fix it. The snippit I am going to use is on your staff page 'layer7'. Note this post may end up being a bit long, but bear with me since I am taking the time to help.
    HTML Code:
    <div id="Layer7" style="position:absolute; left:697px; top:691px; width:165px; height:321px; z-index:7"> 
      <p><img src="images/linda.jpg" alt="Linda" width="131" height="171"></p>
      <p><img src="images/lyn.jpg" alt="Lyn" width="131" height="168"></p>
      <p><img src="images/deanna.jpg" alt="Deanna" width="131" height="173"></p>
    </div>
    If i were to draw a skeleton of your source inside of the body, it would look like this..
    HTML Code:
    <body>
      <div></div> <!--id="Layer1"-->
      <div></div> <!--id="Layer2"-->
      <div></div> <!--id="Layer3"-->
      <div></div> <!--id="Layer4"-->
      <div></div> <!--id="Layer5"-->
      <div></div> <!--id="Layer6"-->
      <div></div> <!--id="Layer7"-->
      ..
      ..
      ..
    </body>
    So you see the only element that wraps around layer7 is the <body> element itself, the other layers are also directly inside the <body> element so they are said to be siblings to layer7 and the body tag is said to be their parent since it is directly one step in front of them, If it were two or more it would be some sort of ansestor. You can obviouly very much think of it as a family tree. This understanding is important because if you deal with css positioning(as layers do) you need to understand how your elements are structuered in your markup.

    Ok if you look at the layer7 tag itself here is what we get..
    HTML Code:
    <div id="Layer7" style="position:absolute; left:697px; top:691px; width:165px; height:321px; z-index:7">
    </div>
    The first thing you will notice is your layer is a <DIV>. A <DIV> is just a regular HTML tag. It is short for division. It does nothing special to the presentation of your webpage. But it is very useful as it can be used to section off your markup in order to make it easier to manipulate with other means.

    The second thing you will notice about your layer is there are two attributes inside of the tag, 'id' and 'style'. The 'id' attribute has a value of "layer7". All that does is give your <DIV> a 'name'. That name could be used for various things such as targeting that element for manipulation though external CSS style sheets or Javascript. In this example the 'id' attribute does not serve a purpose. So dont concentrate on it, just know it is there and is part of what defines a dreamweaver layer.

    The attribute we are conserned with is the 'style' attribute. The style attribute is what you can use to give CSS rules to an element without using external style sheets or putting them in the head of the document. It is the least favored way to impliment CSS because it defeats the purpose of seperating your css from your markup, but is used in dreamweaver layers for convience, plus any rules written this way will overwrite all others.

    Inside the 'style' attribute is "position:absolute;". This is where things can get tricky since changing an elements positioning scheme changes how it behaves with relation to the rest of your markup.. Absolute positioning is difficult to understand. The best way I have found to explain it is to say an element with absolute positioning gets it's bearings according to its container, and not where it currently is as in relative positioning. The same model exists with any grid where you have x and y corrdinates. You specify where you want it to appear according to either the top or bottom and/or left or right of its container. Witch brings us to the next two rules in the 'style' attribute: "left:697px; top:691px;" these are modifying rules that are used to fine tune exactly where you want a positioned element to appear. In the case of absolute positioning you can think of them as x and y values. What yours in particular are saying is I want to position myself 697 pixles away from the left and 691 pixles from the top of my container. But what is a container??

    A container is the element the absolutly positioned element is in.. As I stated earler the layer is directly inside the body element so it will position itself according to that, there is also what it will position itself according to by default, more on that in a bit. In many cases that will be be the same as the browser window. So no matter what else is in your markup or how much you change your window size that element will ALWAYS be exactly in that position. However you can change the container to be another element by putting the layer into another element and also changing that elements positioning. An absolute positioned element needs to be directly inside another positioned element or else it will default to the body. Position relative usually serves this as a containers positioning since it does not change the position or properties of the container element, but you could use absolute or fixed depending on your perticular circumstaces or needs. Another part of the 'style' attribute is z-index. This, i belive, is what i think started the use of the term layer for these elements. They enable you to control the stacking order of verious elements. Normally an element will stack(if need be) according to its order in your markup, but you can alter that by using z-index. The topic of z-index can get quite in depth and since this post is quite long enough alrady I will not touch on it here. The rest of the 'style' attribute deals with width and height witch I think is self explanitory.

    So all this coupled with the fact that certin other elements are set to be centered inside the browser window cause things to overlap eachother. There is no direct way to fix this without chaning the whole markup scheme and possiably the layout. But hopefully you picked up some tips and understand what is going on so you may alter the code accordingly.


  4. #3
    Junior Member
    Join Date
    Sep 2004
    Posts
    2
    Member #
    7392
    1st off THANK YOU VERY much!! that helped me tremendously.

    So what you are saying is i cant really fix it? I will change the markup is necessary.

    few questions:
    I understand the thing about containers, but can you set a layer to position itslef according to the top and left of the actual page instead of the <BODY> tag? Wouldnt this solve the problem?

    Also, postion relative. If i change the postion absolute to relative can I fix the problem? I must fix it regadless of what it takes. thanks

  5. #4
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    You might be able to 'fix' it rather easily, the problem is how to you want it fixed? You could change mechanics of how the images are placed or change how the text is placed. A quick solution might be to take the align="center" off of the bottom <p> tags witch will cause them to align to the left. This might be undesireable, so like I said it depends on how you want to 'fix it'.

    For practical purposes you can think of the <body> tag as being the same thing as the browser/page window. So 500 pixles from the left of the body is practically the same as 500 pixles from the left of the browsr window. However this is not always the case, but in yours you should have no problem. You might consider attatching it to the right side instead of the left.

    Reguarding relative positioning. Relative positioning is vastly different then absolute positioning. For one you do not need a 'container'. It gets its barings based on its orgional position. So a "position:relative; left:500px;" would tell an element to move 500pixles to the left of where it was orgionally. Also in relative positioning the orgional space that the element would have taken up remains intact even though it may appear nothing occupies that space. So in your case it might help, but again it depends on how you want to fix it. But I do not think the results will be what you want.

    The reason why i mentioned you should rework the whole site is that is the only way to address each issue.. but just like most things not everything has to be functioning properly for it to work.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

dreamweaver code overlapping

Click on a term to search for related topics.
All times are GMT -6. The time now is 06:25 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com