css div tags posistioning

[jasemilly]

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

[Paulie_D]

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

[jasemilly1]

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.

[Paulie_D]

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.

[jasemilly1]

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.

[Paulie_D]

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.

[jasemilly1]

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.

[jasemilly1]

sorry meant say not inside control

[Paulie_D]

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

[jasemilly1]

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

[Paulie_D]

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.

[jasemilly1]

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.

[jasemilly1]

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

[Author]

Posts