Programming Forums - CSS Div Question

Programming Forums (http://www.programmingforums.org/forumindex.php)

- HTML / XHTML / CSS (http://www.programmingforums.org/forum27.html)

- - CSS Div Question (http://www.programmingforums.org/showthread.php?t=12212)

CSS Div Question

Alright, this is a really important question, and I really need help, Ive been stumped for awhile.

What I need is to have the "map" div somewhere, and in it have several other divs, but each of the divs within needs to have a relative position starting at 0; thats the only real way my MMORPG can be browser compadible, because otherwise I will have to caculate exact measurements of where the map displays (for position absolute), and that wont be constant.

I have the image of the map floated, because anytime I tried to add a div everythings relative position matched it, so I had to just float the image, adding the image as a background-image attribute to map was a failure because the image file is updated constantly (via php and gd) and the background would be cached.

Anyways heres what I have:

<style type="text/css">

#map {

        float: left;

        width: 512px;

        height: 384px;

        border: 1px solid;

        border-color: #000;

        margin-right: 3px;

}



#dispobj {

        position: relative;

        width: 16px;

        height: 16px;

        top: 0px;

        left: 0px;

        background-image: url('tiles/littleroot/sign.jpg');

        border: 1px solid;

        border-color: #FFF;

}

</style>



<div id="map" name="map">

        <img src="map.jpg" style="float: left;">

        <div style="float: left; position: relative; top: 32px; left: 32px;"><img src="trainerimgs/lady_small.gif"></div>

        <div class="dispobj" id="dispobj" name="dispobj"></div>

</div>

dispobj did display perfectly fine until I added in the div containing the image, then that div and dispobj div's relative position moved to below the map. What can I do? Absolute positioning is what I REALLY want to stay away from.

I cannot comprehend exactly what your problem is. Posting a before and after image of what you are trying to accomplish would definitely help.

From what I understand, it sounds like you are trying to align objects in a certain way, perhaps in a grid. If this is a case, you should use an HTML <table>.

It may be that he wants to display certain images on top of other images, and relative positioning doesn't inherently allow overlaps. I wonder; what happens if you float your #dispobj?

Sorry, I know my explanation was really confusing. What im trying to accomplish is have the map image layered [at the bottom layer] at relative position 0, 0 within the map div. Then each div layer ontop of the map, I want to be able to position with the top and left values from the top and left within the map div, not from the page, and not relative to the object before it. A table would be too much loading, too much for the browser to download [and actually wouldnt even work, as some tiles are bigger than others].

Absolute positioning is sort of what I want, except I want the absoluteness to start at the top left corner of the map div, not of the page.

<div class="map">

  <div style="position: ??; top: 16px; left: 16px;"></div>

  <div style="position: ??; top: 17px; left: 16px;"></div>

  <div style="position: ??; top: 25px; left: 15px"></div>

</div>

Something of that effect, where each of those divs would position absolute, within the div "map", not of the page (since the div will display at diffrent places)... javascript calculation is something I dont want, position absolute and manually adding in a number to compensate for the maps offset on the page is also something I dont want.

Absolute positioning is not always relative to the page. If the enclosing container is positioned relative, the enclosed container, if positioned absolute, will be absolute with respect to the enclosing container. Sounds sort of confusing, I know.

Here is some sample code. The page div has relative positioning so that absolute positioning will be relative to it. The menuContainer div is positioned relative for the same reason. The menu, a contained list, is positioned only with padding. The menu shadow, a div, is positioned absolute. The positioning is relative to the enclosing menu container (which is positioned inside the page div only by margin). The shadow is z-indexed below the page so that text is above it. The menu is z-indexed above the page. Text wraps around the menu container because the container is floated left. Its width is fixed, so that the shadow, though contained, can extend beyond it, to the right, into the text.

I don't know if this will be of any help, I just thought I'd toss it out here. Bear in mind that IE has box dimensioning problems in that margin/padding numbers don't accumulate properly. It also has problems with determining the correct enclosing container. I didn't have to hack that in this particular instance, but sometimes it's necessary. It did give me problems with the shadow matching the menu when an item in the menu expands.

Forgive the large tabs. I just copied and pasted portions of this into Wordpad; should have used another editor.

You can see this at either of the Contributor's Corner links in my signature.

<body>

<div class="page">

        ***********************************

        The page css, for reference, not actually present in this spot.

        .page

        {

                margin: 2em;

                background-image: url(../images/paper.jpg);

                border: 1px outset #000000;

                padding: 2em;

                position: relative;  Because this is relative, an internal absolutely positioned container will be relative to this

        }

        ************************************

        <div class="masthead" id="masthead"> Only positioning for this is via padding

                ...stuff here...

        </div>

        <div class="leadin" id="leadin"> Only positioning for this is via padding

                ...stuff here...

        </div>

        <div class="intro" id="intro"> Only positioning for this is via padding

                ...stuff here...

        </div>

        <br/>

        <div class="menuContainer" id="mc">

                ***********************************

                menuContainer css, for reference

                .menuContainer

                {

                        background-color: #ffffee;

                        color: #000000;

                        border: 1px outset #000000;

                        width: 15em;

                        position: relative;  Because this is relative, an internal absolutely positioned container will be relative to this

                        float: left;

                        margin: 0px 10px 0px 0px;

                        z-index: 2;

                }

                ****************************************

                <ul class="menu"><center>Contents</center>

                        ****************************

                        menu CSS

                        .menu

                        {

                                list-style-position: inside;

                                list-style-type: none;

                                background-color: #ffffee;

                                font-family: Verdana, Arial, Helvetica, sans-serif;

                                font-size: smaller;

                                line-height: 1.75;

                                font-weight: bold;

                                margin: 0px;

                                padding: 10px;

                                z-index: 2;

                                Not positioned, therefore at 0, 0 in the menu container, plus the padding

                        }

                        ************************************                        

                        <hr style="padding: 0px; margin: 0px; border: 1px solid #888888; width: 100%;"/>

                        <li class="item">

                                <a href="pointers.php?page=0-0" style="color: #888888;">What is a pointer?</a>

                        </li>

                        ...more stuff here...

                </ul> <!-- end of the menu -->

                <div class="shadow">

                        ******************************

                        shadow CSS, for reference

                        .shadow

                        {

                                position: absolute;  Absolute with respect to the enclosing container, the menu container

                                top: 15px;

                                left: 15px;

                                background-color: #000000;

                                border: 1px inset #000000;

                                width: 15em;

                                opacity: .5; 

                                filter: alpha(opacity=50);

                                z-index: -1;

                        }

                        *******************************

                        <ul class="shadowmenu">Contents

                                <hr style="padding: 0px; margin: 0px; border: 1px solid #000000; width: 100%;"/>

                                <li class="item" id="0-0">

                                        <a href="#">&nbsp;</a>

                                </li>

                                ...more stuff here...

                        </ul>

                </div> <!-- end of the shadow -->

        </div> <! end of the menu container -->

        <div class="section"><strong class="sectionhead">What is a pointer?</strong><p>

                A pointer is a programming language datatype whose value is used to  

                ...more content....

        </div>

        ...more content.....

</div> <!-- end of the page -->

</body>

Thank you! Problem solved!

Quote:

Originally Posted by brokenhope (Post 121464)

A table would be too much loading, too much for the browser to download

Somehow, I doubt that would be a problem. But since a table won't work for you for other reasons, I'm glad you found an answer to your question.

It is entirely possible to make a table with tiny cell sizes and adjust it accordingly by combining certain numbers of columns and rows. There was a time when it was the only reasonable solution. Those days are gone. Tables are not evil, but they should be use to present tabular material. Don't tune your carburetor by enlarging the jet with chewing gum. It may work, but it's schlocky , unprofessional, and subject to unanticipated failures.

Yeah, but what im saying is my map is 32 x 24, so multiply that, and thats the amount of TD's generated minimaly. Now each TD call will include a class name too, so thats about 15 bytes each sent to the browser, now multiply 15 bytes x 24 x 32... way more than some simple divs. Plus if any tile were to be bigger than 16 x 16 [which currently half the tiles are], tables would completely not work.