Positioning AP Div Tags in DW CS4!!

Discussion in 'Web Design and Development' started by jbonante, Apr 30, 2010.

  1. jbonante macrumors member

    Joined:
    Aug 16, 2007
    #1
    Hello,

    I've been struggling with this for some time now. I can't seem to be able to draw a ap div tag and place it where i want it to go. When i apply a ap div tag in design view it looks good. Its when i switch to "live view" or save and view the page in safari everything is out of line.

    My question is how do i get what i design in design view to be the same when i view the page online...

    All i'm trying to do is insert a photo to the far left of the page and to the right of the photo add text.
     
  2. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #2
    Why not float the elements?

    Or alternatively set the parent element to position:relative
     
  3. katierosy macrumors newbie

    Joined:
    Dec 8, 2008
    #3
    Make the parent container position:relative.
    else, Give float:left to the photo.
    and clear the float value before closing parent tag.
     
  4. jbonante thread starter macrumors member

    Joined:
    Aug 16, 2007
    #4
    Thanks guys i'll give it a shot!

    I settled and used a set of tables to get what i wanted done. Prob not the best way to approach building a website but I'm new and don't understand css completely.
     
  5. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #5
    CSS is pretty easy once you get the hang of it. The hard things are tables and there being no explanation for why they blow up!

    For instance, positioning. If you set a parent DIV to position:relative the any element inside will use that div for reference when using position:absolute. Meaning, top:0;left:0; won't be at the top left most of your browser window, but the top left of the relative div.

    Code:
    <head>
    <style>
    div{width:50%;height:200px}
    div.parent{position:relative;margin:0 auto;background:red}
    div.child{position:absolute;top:0;left:0;background:#000}
    </style>
    </head>
    <body>
    	<div class="parent">
    		<div class="child"></div>
    	</div>
    </body>
    
    That code should show you what I mean. Remove the position:relative; and see how .child changes location.
     
  6. jbonante thread starter macrumors member

    Joined:
    Aug 16, 2007
    #6
    Thanks guys! I tried it and it actually worked!

    One more slight problem... Once I have everything where I want it and I click out of the ap div tages... They disappear! Once I go to "live view" itS on the page. Would this have something to do with the z index? It looks like the order of my boxes go: container then main_content. I made boh realitive.. Either way I try it the ap div tags are still gone.. Only when in design view tho.
     

Share This Page