- This topic is empty.
-
AuthorPosts
-
July 12, 2013 at 3:46 pm #46357
Kitastrophe
MemberUpdate:
Thanks for the help! I will look at the examples provided and work on fixing my code. If I have any other problems I’ll post again.Hey everyone, I am having an issue with my DIVs overlapping when the browser resizes. I’m pretty new to CSS, so any help is appreciated.
After doing some research, it looks like it’s due to the position:absolute, but any coding I have tried isn’t working or messes up my images. When I use overflow:hidden, it cuts off the images I have on top of/above my DIVs, I’d like to keep them there if possible.
The site isn’t up and running yet, so I just included the CSS in my Pen. If you need anything else, I’d be happy to update that. I can also include a screenshot if anyone needs it.
http://codepen.io/Kitastrophe/pen/fwaCh
Thank you!
Edit:
I updated the Pen file to include my HTML, and here is a screenshot of what the site looks like.
http://img.photobucket.com/albums/v202/Spaceduck24/site.jpgI was using position:absolute to put those banners on top of my DIVs, any other method I used didn’t quite work.
July 12, 2013 at 3:47 pm #142567theacefes
MemberCould you include the HTML structure?
July 12, 2013 at 3:49 pm #142569Kitastrophe
MemberI can, but I’ll have to upload my images so that they show up. Give me a few minutes and I’ll have that updated.
July 12, 2013 at 3:49 pm #142570Paulie_D
Member>it looks like it’s due to the position:absolute
Probably….this is why it’s one of the last layout options one should employ
July 12, 2013 at 3:50 pm #142571Paulie_D
Member>I’ll have to upload my images so that they show up. Give me a few minutes and I’ll have that updated.
Use LoremPixel.com for replacement images.
July 12, 2013 at 4:01 pm #142573Kitastrophe
MemberThank you Paulie_D for that suggestion! The Pen has been updated. The class=”ribbonlikes” and class=”psst” are a banner and speech bubble that sit on top of that DIV, but right now all of the images are random from the LoremPixel site.
July 12, 2013 at 4:02 pm #142575Paulie_D
MemberAm I right in thinking that you only care about the sidebar div with all the images in it?
July 12, 2013 at 4:03 pm #142576Kitastrophe
MemberThat’s the main problem. That’s the DIV that ends up overlapping over everything else. I can add the other content if needed.
July 12, 2013 at 4:06 pm #142577Paulie_D
MemberTo be honest, I wouldn’t even attempt to correct what you have there because of all the positioning makes it so inflexible.
There are at much better layout options.
Do you have an image of what the design is supposed to look like…we could offer some much simpler layout options?
July 12, 2013 at 4:06 pm #142578Kitastrophe
MemberI went ahead and added my other DIV to the Pen. That class=”ribbonsocial” is another banner that sits on top.
July 12, 2013 at 4:08 pm #142579Kitastrophe
MemberI’ll look into that site, but the reason I have that absolute positioning is for banners to sit on top of my DIVs. That was the only way I researched that worked.
July 12, 2013 at 4:17 pm #142584Kitastrophe
MemberHere is what I have right now:
http://img.photobucket.com/albums/v202/Spaceduck24/site.jpg
That top navigation may or may not be staying, I was just using it for practice from a tutorial site.
July 12, 2013 at 4:44 pm #142588Paulie_D
MemberOK…..but there is no reason you have to absolutely position **everything**.
All you really have there is a `
` with a `nav` section underneath followed by a basic 3-div section under that. July 12, 2013 at 4:49 pm #142589Kitastrophe
MemberI tried to only use absolute positioning on my two banners and one speech bubble image, but I couldn’t get them to sit right on the DIVs and ended up positioning everything.
I’ll try and use your recommended tutorial site as a guide and clean up my coding.
July 12, 2013 at 5:04 pm #142593Paulie_D
MemberAhhh…that’s where the fun comes in.
More often than not what is actually needed, rather than absolute positioning is something completely different….usually **relative** positioning’or negative margins.
Here’s a quick exmaple showing both options…notice that depending in which one you use, the subsequent content might react differently.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.