I understand Divs & relative positioning?

Hello.

So, to cut a long story short...

I'm newbie and immersed in the creation of my first website using all elements of PA, only to find out that this is not a good way because of the nature of the AP
After a lot of help from this forum (PZ in particular), I decided to do my research some more.

I always create another site which I assume must really be built in flash (as someone suggested). But as I do not know Flash is not an option. (see design attached).

The only things I really need at this point would be for the 'get a quote' & 'about', 'contacts' bubbles have reversal says that change color when the mouse passes over to them.

I tried to find the best way to do this without AP elements.

(1) create a Div container with the main image for the background, and then insert a table and try to insert the images flown over this way. But after research, I think I should branch out tables and move forward on the path to CSS. Then led me to idea not 2.

(2) create a Div container with the main image for the background, then insert div and adjust the margins (relative positioning?) to move the divs right places I need bearings. But even once, I read that this method should only be done to tweak a web page and not to structure a page Web could cause problems.

(3) create a Div container with the main image for the background, then insert Div in a grid like system (see the attachment image of my guides where I place Div), but this seems a more complicated way to do and you end up with some divs with no use and a lot of unwanted code.

OR do I have reason to think that works?

(4) apply to a relative positioned Div, set the background image, then place the AP div in Div PR I would use for my bearings? If I did this would be - it then avoid the problem of the divs PA moving in different browsers?

Or I have it completely wrong and have to go back to the drawing board?

Your thoughts you know :-)

Thanks in advance

Louisa

Use CSS Sprites or Image Maps for navigation.  Use HTML content anywhere else.

Don't forget print/graphic design is not the same as the design of web sites.  Every so often designers paint in a corner with a model of design that is too stiff to work on a web site themselves.  Knowing how & where to make adjustments is part of the process.

The Holy Grail is a web site that:

  • excellent results in all devices & settings,
  • loads quickly,
  • What are web accessible.
  • visually attractive, and
  • rich in interesting HTML content.

I'd do things differently, but the site is a good example of this.

http://www.debsofield.com/services/

Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
www.Alt-Web.com/
www.Twitter.com/ALTWEB
www.Alt-Web.blogspot.com

Tags: Dreamweaver

Similar Questions

  • Bug: Façade objects relative position changes when you move the fusion VI on block diagram

    I posted a bug report on the LAVA, here:

    http://forums.lavag.org/front-panel-objects-relative-position-change-when-placing-merge-VI-onto-bloc...

    If someone at home OR can reproduce, can I please get a CAR #?

    Thank you

    -Jim

    Hi Jim,.

    This was reported to R & D (# 139212) for further investigations.  I don't know if it's more embarrassing fall into the range of functions and reorganize the façade or drop out of the front and hope that the code of the Subvi is not disseminated in the block diagram.  Because the code (or orders) are selected after a fall, and you can switch between diagram and panel above all keeping this selection, at least you can move the code as a whole, right?

  • Relative position of a form of multi-record Record in a block

    Hi all

    I have a block record multi with number of items displayed in the 16. This block is used to fill the data in the table that can contain 100 records. When I scroll down the block for a record 39 said individual, I get the value of current_record than 39. But how do I know its relative position, that is to say which position he is currently now out of these 16 files that are displayed. Is there a way to manipulate it.

    Version of form: form of Oracle 10 g

    Thanks and greetings

    JaKes

    Hello:

    You can use: TO_NUMBER (Get_Block_Property (: system.cursor_block, CURRENT_RECORD))-TO_NUMBER (Get_Block_Property (: system.cursor_block, TOP_RECORD)) + 1

    Kind regards

  • radial gradient with relative positions and absolute RADIUS length

    Hello

    I tried provide a style with a radial gradient in the upper right corner of a control, but apparently the use of relative positions does not work well combined with a length of absolute RADIUS:
    .myStyle{   
        -fx-background-color: radial-gradient(center 100% 0%, radius 8px, red, white);
    }
    place the center of the gradient to the upper left corner, although it must be placed in the upper right corner. If the RADIUS is defined as ratio (10%), the implementation of the pole is correct. Is there a general constraint prevents this works?

    ARO
    Jens

    My guess is that, like the class RadialGradient has a method isProportional which acts on the Center and the RADIUS, as css just implemenets the settings of the proportionality of the RadialGradient as something all or nothing, but that is not documented in the guide of the css.

    http://docs.Oracle.com/JavaFX/2/API/JavaFX/scene/paint/RadialGradient.html#isProportional%28%29
    http://docs.Oracle.com/JavaFX/2/API/JavaFX/scene/doc-files/cssref.html#typepaint

    I would advise you connecting a jira request that documentation or implementation is updated.

    http://JavaFX-JIRA.Kenai.com/

  • How to provide relative positioning of containers?

    How to provide a relative positioning of a container which is another container

    If you use Flex 4, use the mx Canvas (not the spark) container and then see this link on the columns in the constraint:

    http://livedocs.Adobe.com/Flex/3/HTML/Help.HTML?content=size_position_5.html

    If you are using Flex 3, you can have columns of the constraint on request, (made available 'absolute' =) sign, or containers in canvas.

    Flex 4 does not support the columns of the constraint, except in containers of Flex 3-herites Panel and canvas.

    If this post answers your question or assistance, please mark it as such.

    Greg Lafrance - Flex 2 and 3 certified ACE

    www.ChikaraDev.com

    Training Flex and Support Services

  • AP div not positioning as expected!

    In fact, it does not draw on any positioning I have try applt on it.

    I have a circular logo that refers to 75 feet, and I use a background image to help me position my content according to the needs, but the logo of 75 feet div that I placed is late to the timer. Infact, the logo should appear in front of him, because he has a higher z-index... Another confusion for me then!

    Take a look on http://www.fortnerf.co.UK and let me know why it won't work.

    The AP div in question is called "75home", and I put it everywhere wherever I can think of to place on the page. It's just a simple div with a logo in it. It positioned correctly in DW, but as soon as I test it with live view or in a browser, it moves!

    The CSS for it and other AP div tags is as follows:

    {#timer}

    position: absolute;

    Width: 390px;

    height: 243px;

    z-index: 1;

    left: 710px;

    top: 50px;

    }

    {#win}

    position: absolute;

    / * Width: 460px;

    height: 365px; * /

    z-index: 2;

    left:-40px;

    top: 333px;

    }

    {#homebuttons}

    position: absolute;

    Width: 465px;

    height: 232px;

    z index: 3;

    left: 561px;

    top: 445px;

    }

    {#75home}

    position: absolute;

    Width: 222px;

    height: 222px;

    z index: 4;

    top: 261px;

    left: 572px;

    }

    I also tried the following:

    {#75home}

    position: relative;

    Width: 222px;

    height: 222px;

    z index: 4;

    top of the margin: 261px.

    left margin:-104px;

    }

    Thank you.

    Carpet

    A css selector cannot start with a number, so change #75home to #home75 and don't forget to change the id for the

    thus:

  • Drag several objects at once or relative positioning

    I work in AIR for Flash CS5.5 iOS. In any case, I have a background and buttons on top of the background. I want to do this with scroll and the best way I found to do was drag the background in a defined area. Unfortunately the buttons do not move. So I thought I could do the buttons positioned over the bottom but they don't reposition once you drag the bottom. So how do positions to relative and dynamic buttons? Or is there a better way to add the scrolling feature? I'm really close to finishing this app, I just can't understand this. in any case, thank you very much.

    If positions of the buttons are fixed against the background, add them to the background movieclip.  or, do an another movieclip that contains your background and buttons and add it to the scene.

  • Why do I see the relative position on a floating element?

    When I put position: relative; on the film class, it floats the scarf to the left, but when I place, position: relative; on the #container it dose not. Why what and why why should I set a position: relative; on a floating element?

    < html >

    < head >

    < meta charset = "UTF-8" >

    < title > < / title >

    < style >

    #container {}

    margin: 0 auto;

    width: 850px;

    }

    Wrap {}

    height: 140px;

    padding: 1em 0;

    width: 250px;

    float: left;

    position: relative;

    }

    IMG {}

    left: 0;

    position: absolute;

    top: 0;

    }

    < / style >

    < script >

    < /script >

    < / head >

    < body >

    < div id = 'hand' >

    < div id = "container" >

    < div class = "wrap" >

    < img src = "images/back.jpg" alt = "image" / > "

    < img src = "images/front.jpg" alt = "image" class = "before" / > "

    < / div >

    < div class = "wrap" >

    < img src = "images/back.jpg" alt = "image" / > "

    < img src = "images/front.jpg" alt = "image" class = "before" / > "

    < / div >

    < div class = "wrap" >

    < img src = "images/back.jpg" alt = "image" / > "

    < img src = "images/front.jpg" alt = "image" class = "before" / > "

    < / div >

    < / div >

    < / div >

    < / body >

    < / html >

    Compensation of absolute and fixed implementation are calculated from the location of the nearest positioned ancestor.  This ancestor could be position: relative | fixed | absolute.  If there is no positioned ancestor, the body tag is used (which is the top left corner of the browser window).  That's why things seem to move when you use the AP elements on pages with content (without a positioned ancestor) centering.  Most people interpret this as part of AP moving to the left, whereas in fact, it's the rest of the content of the page, moving to the right.

    So when the parent is placed on an item, it defines the reference zero for the child elements that it contained with?

    Yes, but only for the fixed | elements in absolute position.

    so is it a good idea to give each element on a page a positioning context, most of the time I think it would be relative. So is it a good idea to give each element on a page a positioning context?

    N ° N °

    It's a good idea to not use positioning at all unless you absolutely must (pun intended).

  • Resizing/Scaling - only resize graphic on auto-size while keeping the other controls on their relative position.

    This feature looks like a long shot, but is it not possible to allow that a specific control resize while others remained the same at maximization or change the size of the window?

    I have a sign (actually a tab in the tab easy) that has tables, buttons, text boxes and a chart.  Ideally when lets say a user enlarges the window, and I would all of my conrols in the upper left corner to stay at their relative location, for example, controls stay that far from the top and left side, controls on the right side, stay xx pixels on the right side.  And then having my graph resize to be bigger to fill that extra space.

    This would allow all the controls do not to the funky look when the screen is resized.  I know it can be done in VB easily enough but it seems that ICB allows only an absolute based position on the left and up.

    Hello-

    The splitter control should be able to supply what you need here.  See the example for "Docking".

    NickB

    National Instruments

  • A sensitive composition in a DIV container positioning

    OK, I have a moment of fruit loop but I spent 2 days trying to right position and size a sensitive composition in a div. base

    I have some old songs I try to update as soon as 2013, but when sensitive scaling is selected (horizontal, vertical, or both) then they jump out of all the div containing on my page and across to the window.

    My layout is % age and composition must evolve inside the div that contains the size of the viewport and any resizing.  Everything worked perfectly until I've updated, but now whenever I put a composition in "Sensitive Scaling" he wants to go to the page.

    Am I missing something really obvious?

    Increase the options in the page html script tag, as below:

    AdobeEdge.loadComposition ({'Untitled-1', 'EDGE-565958637',

    scaleToFit: "width",

    centerStage: "horizontal."

    minW: "0."

    maxW: "undefined."

    Width: "550px"

    height: "400px",.

    bScaleToParent: true

    (}, {dom: []}, {dom: []});

    HTH,

    Vivekuma

  • How can I copy some clipping masks including the relative positions of multiple images?

    I have a number of images of microscope on the same subject that were made under three different conditions. I would like to use clipping masks to crop the images in the same way (the same size, but also the same position relative to the corners/sides of the images. Where it was inconsistent, I made an image to try to explain what I want to achieve (the same portion of each image for each game):

    mask.png

    Thank you, Jacob. I don't know that is easier or more efficient, but I ended up inserting all of the images on top of each other, and copy and paste in place (Ctrl + Shift + V) my rectangle. Then I chose a rectangle and an image and apply the mask (Ctrl + 7) and then sent it to the back with (Ctrl + Shift + []) before repeating.

  • How can I define relative positions in the form objects.

    Hello

    I have created a form of Bill, who is blinded by a schema. In my application, the form is rendered a XML data file.

    In the form, there is a table and 2 zones of text under the table. During rendering, the table of contents come above the text boxes.

    How can I give a position relative to the text boxes, so that while that the rows of the table increases, the text also come down, without overlapping boxes.

    Thanks in advance.

    1. The main subform (this is one that is created by default should be set to "Flowed", "Western text".)
    2. Then put the Table in an another subform, BUT in the main form and set this new subform to "positioned".
    3. Create an another subform for your text, defining as this one for "positioned".
    4. Make sure your hierarchy, the subforms are arranged correctly, which is main form flowed everything first, then followed by your table subform, then text subform (or order whatever you want to follow them;) REMEMBER THAT TABLE SUBFORMS AND THE TEXT SHOULD BE IN THE MAIN SUBFORM.  Test the form and your table grows, it should push your texts.
  • Div Layout positioning - borders?

    Hi all

    I've slowly been tinkering away to re - making the website of our company between projects, service interruptions. I'm a graphic designer, yet to get used to DW. I had lots of help from the search for topics and questions on these forums already. I'm confident enough, once I finished a page I can extend this practice in the rest of our site. It seems to me be blocked at this point:

    I laid out a header and a footer with the navigation of the site and content, including a menu "direct product". I want to place a picture of our office here, as in the photo:

    mhelp1.jpg

    I learned the tables are badand absolute positioning is bad, so I threw the pages using the margins around divs to hold them in place. It worked nicely so far in all the browsers that I tested it. You can see the margins shown in the image above in DW. However, when I delete the position attribute: absolute, I can't return this div in the 'content' of the page part (it keeps wanting it by default in or under the left-menu "homenav.")

    mhelp2.jpg

    I guess that's not find a border upset? I put a border of 1px around the menu on the left, but it does not work. In addition, when I do a preview in any browser, the image disappears entirely:

    mhelp3.jpg

    Here is a link to the temporary home page:

    http://www.gellerlighting.com/indextemporary.html

    I appreciate any help you can give me. I suppose that there is a CSS attribute, that I'm not familiar with what I need to assign to the div of the image or the menu div on the left? Thank you

    Dan

    Edit the css for the 'homenav.

    to exactly as shown below:

    {#homenav}

    float: left;

    Width: 210px;

    height: 531px;

    background-image: url(Images/front%20page%20nav%20menu.jpg);

    margin left: 14px;

    top of the margin: 15px;

    background-repeat: no-repeat;

    }

    Then select your "apDiv9".

    (the one that contains your large image you want to be placed beside the left navigation). Cut it from the code, because it's in the wrong location. Paste it directly after closing "homenav.
    tag.

    You can locate the closing tag for the 'homenav' container by clicking his name tag that will appear at the bottom of the design view in Dreamweaver when you click your mouse anywhere inside of the

    . Switch to code view and scroll to the end of the section highlight and paste it into your "apDiv9".
    After the section highlighted.

    Then edit the css of 'apDiv9' to exactly as shown below:

    {#apDiv9}

    float: left;

    Width: 535px;

    height: 286px.

    left margin: 26px;

    top of the margin: 16px;

    }

    To align items side by side, you must use the css 'float' attribute (as shown in the css above).

    See these % 20 characters in the path name to your background image? They are spaces in the name. Don't leave no spaces. Use of underscores to the name of the image as - Images/front_page_nav_menu.jpg

    Best practices is also trying not to put high on your . I do not see why you must assign a height to the 'homenav.

    and there is no reason to attribute to the 'apDiv9 '.
    or the other.

  • SVG and relative position

    Hello

    Something weird happens to me with animate 4.0

    When I import a SVG graphic on the stage, and convert its coordinate X px in %, inside is too sensitive (%) Scene, when I'm trying (in Safari) and I expand the browser window, fits in the chart position, but in the opposite direction. In other words, if I expand the width of the window, my chart escapes to the left, and when I reduce it, it goes to the right.

    With PNG graphics, the behavior is normal as expected, but not with SVG.

    Any ideas?

    Thank you

    Hello

    It seems to be bug in Edge animate 4.0.

    But this bug does not occur with the new upcoming version of animate it dashboard (to be published very soon this month).

    Thank you

    Vivekuma

  • AP div tags/positioning within a box/can ' t do?

    * I drew a box container for my home page, in which I want to add an image and then freely put my interactive/rollover buttons or images within this area.  I the background... and the box... but Dreamweaver doesn't let me draw an apdiv tag in the box.  I can draw off the beaten path, but get a circle with a slash when trying to attract within the area.

    I have a page www.bradmarsh.orgonline.  I created it by just placing the image and then the draw button boxes and placing them.  They are not placed against the inside of the box, so they move when I resize the browser.   Also... I might add... it's just a mock-up.

    At this point, I still don't understand html, but I'm starting to understand a little.  If I can solve this little problem, I can wear to create my own website.

    Help?

    Thank you

    I drew a box container for my homepage,

    DW is not a graphical application with which you freely draw boxes on a workspace.  It is the professional level web that requires you to have a knowledge of practical concepts of Web design, software for creating HTML and CSS code.

    Close DW.

    Spend time learning CSS and XHTML first.

    Then work through this tutorial into 3 parts:

    Taking a Fireworks comp to a setting shaped CSS in DW
    Part 1 - initial design
    http://www.Adobe.com/devnet/Dreamweaver/articles/dw_fw_css_pt1.html

    Part 2 - markup preparation
    http://www.Adobe.com/devnet/Dreamweaver/articles/dw_fw_css_pt2.html

    Part 3: layout and CSS
    http://www.Adobe.com/devnet/Dreamweaver/articles/dw_fw_css_pt3.html

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

Maybe you are looking for