Jump to content

absolute position question


rawlin
 Share

Recommended Posts

Hi, I did for a while run a word press blog http://blog.claesdesign.com for fun, it's been inactive for a while now. On this blog when I set absolute position on something it adapted to the window size, for example when I placed the logo with absolute position it followed with the resizing of the window instead of being in place and get out of order.The problem that I have with my own page is that I can get a nice layout with absolute position but it looks like crap as soon as the window size changes. The page I am building is a centered page and what I am currently trying to accomplish is Putting a div next to the centered div with the centered div still centered. I have tried a lot of stuff without finding a solution, when just placing them next to each other both get centered and the div that I would want in middle is moved to the left. but not the other one and also some images ontop in a couple of places. Is there a way to solve this and get them to be in place even if the size change? http://www.svenskamagic.com/news/ seems to have accomplished something similar.I am also trying to put the logo on top on a specific spot and keep it in place.I am new to CSS and the wordpress blog is very advanced and I can't figure out where the code that makes it adapt are.

Link to comment
Share on other sites

I'm not certain that absolute positioning is what you want to use. There are situations where it's acceptable (even necessary) and maybe this is one of those situations, but for most things you don't need it. I can certainly think of a way to make it work for what I think you're trying to accomplish, but it's best to avoid positioning if possible.Can you post a screen shot of the layout you're trying to achieve? Or if not, explain it in detail?

Link to comment
Share on other sites

I'm not certain that absolute positioning is what you want to use. There are situations where it's acceptable (even necessary) and maybe this is one of those situations, but for most things you don't need it. I can certainly think of a way to make it work for what I think you're trying to accomplish, but it's best to avoid positioning if possible.Can you post a screen shot of the layout you're trying to achieve? Or if not, explain it in detail?
Hi, thanks for your replyI am new to CSS so ofcourse I am open to suggestions, it's just that on the wordpress blog it was very easy to to get stuff where I wanted them, just by putting in the position.Here is a image of what I am trying to accomplishLayout imageEdit: The center div is supposed to stay in center while the extra div is next to the center div. I have tried a lot, but I am sure that I am missing something on how to do this. I mostly end up with the extra div getting on top of the center div when resizing or that the center div is outside of the screen when the window is smaller. Edited by claes
Link to comment
Share on other sites

Ok, the only element you'll need absolute positioning for is the extra div. So just follow dsonesuk's advice, and give the outer div (the one with the light blue border in your image) position: relative and place the extra div inside of it with position: absolute. So you'd end up with something like this:

CSS:.container {   position: relative;   width: 500px; /*or any value you want*/   margin: 0px auto; /*this centers the div*/}#extra_div {   position: absolute;   left: 500px /*or whatever the width of .container*/}....HTML:<div class='container'>   <div id='extra_div'>Stuff</div>   ....Rest of content....</div>

Link to comment
Share on other sites

there no such style as Owerflow: visible, hidden;should be overflow:hidden;overflow:auto;overflow:visible;overflow:scroll;or overflow-y: hidden; which set overflow hidden to vertical, top and bottom edges.overflow:x: hidden; which set overflow hidden to horizontal, left and right edgesyou can't use two values separated by comma.you also have magin-top: 0em; in body selectorshould be margin-top:0;

Link to comment
Share on other sites

I know that! (teach grandmother to ###### eggs..comes to mind) I was referring to MAGIN:Oh! so what exactly does magin:0em do then? look before you leap.
:) :) Oops. Sorry, dsonesuk! I should indeed look before I leap. At a quick glance the only difference I noticed was the units..... Edited by ShadowMage
Link to comment
Share on other sites

Nice :) did I meantion I ###### at this :)I fixed the spelling errors you guys found and thanks a lot for taking your time to check through that havoc code :)It did fix the part where the text and images started overflowing but now I got a scrollbar instead, is there a simple retard-proof way to get the page to simply expand as I add more content?

Link to comment
Share on other sites

Thanks you saved me :) that worked. I have followed a lot of tutorials in css but it still is a mysterie to me how it works, to me setting outer div to overflow: hidden; sounded like it would hide the entire page but instead it showed all. Maybe it is like quantum physics, I don't understand that either :)I'm gonna see if I can solve the extra div part nowMany thanks for all the help :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...