Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css div tags posistioning

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #38056
    jasemilly
    Member

    Hi guys
    New to the site and learning css webdesign etc, but enjoying it all most of the time.

    I have read and watched videos on divs and posistioning etc, but I think I may have things a little mixed up.

    If anyone can put me straight would be great.

    My page is a home automation page sitting on top of homeseer.

    what I have is a contianer div that is a 100% in width and height. It has a background image of a gradient colour.

    I then have a floorplan div that just holds the floorplan as a background image.

    then I have lots of divs that hold the on or off light bulbicon.

    I have them all posistioned on my broswer fine. but the moment I resize the browser the light bulb icons go wrong.

    I think my problem is that the light bulb divs are set to absoulete when they should be realtive to the floorplan div.

    I have my floor plan set to realtive and the container to absoulete.

    How can I have my floorplan set to realtive to the caintainer and absoulete for the floorplan div?????

    As I type this it I have thought that perhaps the light bulb icons should be realtive to the container div not the floorplan???

    thanks for anythoughts
    jasemilly

    #102799
    Paulie_D
    Member

    We’d need a link to help you out. It’s tough to visualise what you are after.

    #102860
    jasemilly1
    Member

    http://www.millington4.karoo.net/index.php

    here is the link, in my browser at full screen the lights are in the correct places of the room when you resize then the lights are all in the wrong place.

    #102861
    Paulie_D
    Member

    I’m not sure what I can offer.

    My thought is that the floorplan image should scale to the size of the div. I think

    background-size: cover;

    might work.

    I’d try adapting this https://css-tricks.com/perfect-full-page-background-image/ to the floorplan div, then see if a single bulb stays put when the browser is re-sized and go from there.

    #103017
    jasemilly1
    Member

    Realised I had a closing div tag in the wrong place!!!

    but that makes me ask another question, if you have an couple of id’s set up as posistion realitive. Inside a container div set to absoulete. In your html does it matter what order the divs are inside the container div??

    if I change the order it makes a dramatic effect on the appearence even though they have position values in the css











    here control is before a1_1 and a1_2 and they appear at the bottom of the page, if I move control to after these to divs everything appears within the container???

    here is the css


    #container
    {

    /*background-image: url(images/graphics/background.jpg);*/
    width: 100%;
    height: 100%;
    position: absolute;

    background-color: purple;
    }


    #floorplan{

    top: 0%;
    background-image: url(images/graphics/floorplan.gif);

    width: 80%;
    height: 100%;
    left: 15%;
    background-repeat: no-repeat;
    background-position: right top;


    position: relative;

    /* background-color: lime;*/
    }

    #control{
    position: relative;
    top:0%;
    left:0%;
    width:4%;
    height:80%;
    background-color: teal;
    padding-left: 4%;
    padding-top: 1%;
    }

    #cq {position: relative;
    top:20%;
    left:20%;
    width:10%;
    height:10%;
    background-color:green;
    padding-left: 4%;
    padding-top: 1%;}
    /*.off{background-image:url(images/icons/lightbulboff.png);}*/
    /* this section is all the bulbs a1 is the group and _1 is the indvidual bulb */

    /* a1 is the table lights*/
    #a1_1{width: 2%;
    height: 2%;
    top: 0%;
    left: 20%;
    position: relative;
    background-repeat: no-repeat;
    background-color: blue ;

    }

    #a1_2{width: 2%;
    height: 2%;
    top: 10%;
    left: 30%;
    position: relative;
    background-repeat: no-repeat;
    background-color: blue ;

    }

    why is this what have I got wrong?

    thanks for any thoughts.

    #103023
    Paulie_D
    Member

    Put the lamp(?) divs inside ‘flooplan’














    Also, is there some reason why ‘floorplan’ is inside ‘control’?

    I think you should ease up on the positioning and consider floats, widths & margins for divs that are just containers for other elements.

    #103024
    jasemilly1
    Member

    Hi the lamps are inside the the floorplan div they are labelled up A1_1 and A1_2

    I didn’t think the floorplan is inside the container, as a closing DIV before the floorplan.

    thanks I shall have a look at floats, widths and margins.

    #103026
    jasemilly1
    Member

    sorry meant say not inside control

    #103027
    Paulie_D
    Member

    Actually the lamps aren’t inside the floorplan it’s not shown in your code at all.

    #103029
    jasemilly1
    Member

    Hi sorry, I don’t follow. I have my lamp divs as


    inside the floorplan.

    the .off” is remmed out of the css, but that just has the image the #a1_1 and #a1_2 are in the css.

    have I done something really daft?

    thanks

    #103048
    Paulie_D
    Member

    I beg to differ. Your floorplan div is

    There is nothing inside there.

    It should look like:




    I’ve been working on this for a while and while the floorplan image can scale with browser width, don’t think there is any way you can position the lights using positioning (or margins whether px based or % based) so that they will stay in place.

    #103145
    jasemilly1
    Member

    I realise whats happened regarding the floor plan, i was speaking about the code I had copied up on this forum, not the index.php file thats on the test site yes that has a closing div in the wrong place.

    I appreciate the time you have put into trying to help me with this issue.

    Would it be worth trying changing from having lots of divs to just a div to hold everything and put images for everything and put a zorder so the floor plan is at the back??? images on top and use margins to posistion stuff???

    thanks again for your help.

    #103146
    jasemilly1
    Member

    I have found this Your text to link… going to look into this to see if it handles situation adequately.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.