I have a div-layout on my asp.net page.
Left a div for menu, middle a div for content and right a div for a online user list.
All divs are with float:left and height/width on his place and it works problemless.
Now I must have a advertise over the left and the middle div together.
My first try was to have it in the middle and set margin-left:-270px;.
But the the advertise-div is OVER the menu and you cant click anything anymore.
My second try is to have it in the left div and overflow it easyly on the middle div, but that of course don't work, because the left menu div has a width: 300px; and exacly there end the banner.
here is it to see:
http://s3.imgimg.de/uploads/4b247298bJPG.jpg
how to do?
It's hard to tell without seeing your HTML/CSS, but perhaps the easiest way would be to to put the advert in it's own <div> under all of the left, middle, right divs, and use something like margin-top: -110px to shift it up.
It's not a very clean solution. If you can't get this to work, or just plain don't like it, then post your code.
Related
When developing a site in HTML/CSS how do you position divs on a page to hold content in place and exactly where you want them. Not just in a straight up in down manner. Is there a unified method/technique that everyone uses to achieve this placement? Or more generally how is it done?
Example: Here is an image of an example page I'm building with a container div and 5 other divs inside it.
IMAGE: http://go-dl.eve-files.com/media/1310/image.png
I was able to place the header div at the top, I was able to place the sidebar div below it and to the left (floated left), and I was able to position the content div below the header and to the right of the sidebar div (floated right). Now I have put the footer div in but the footer floats under the sidebar but also to the left of the content div. NOT under it and at the bottom of the page.
There are so many possible options/values in Dreamweaver to a assign to each div like box, float, margin, position, padding, etc,. I have linked my code below. Is there anything I can do to facilitate positioning divs on a page more efficiently and at all for that matter. I'd like for the footer to stay at the bottom of the page.
Here is my code:
PASTEBIN: http://pastebin.com/xbvPEfjA
I am truly stuck on this. Any help would be greatly appreciated. Also there are some other questions similar to this question but not the exact same of what I am asking. Thanks in advance!
in your css apply clear:both to the footer. That means floated elements are not allowed on either side of it.
Honestly, before this problem I kinda thought that I actually knew something about css positioning, but it looks that I do not.
Here is what I have, I need to position the social buttons div on the left of the container and make it fixed so it does not move, but only until the bottom of that div is lined up with the bottom of the container in which it was positioned then it will need to scroll further. I do not know if I am explaining my self so that everyone can understand what I mean here so please take a look at the following example
The div with all facebook, twitter, G+ and print buttons is scrollable until it is aprox. 10px below the top of the browser, then it stops and continues to scroll only after the bottom of it is lined up with the container that it is placed in to.
Please help, I am kinda stack with it
This isn't a CSS question unless you're willing to make-do with position: sticky, which probably isn't what you're looking for. (Reading about it here)
If you're looking for a jQuery solution, then you could use ScrollFollow, where you can specify a container parent for the fixed-scrolling item.
I can't seem to find a way to put a bottom margin on the page. What I want to happen is the following: when you click one of the buttons and the thumbnails appear, that list should have a bottom margin so it's not stuck at the bottom of the page.
A lot of stuff is positioned with JavaScript; I don't know if that messes around with stuff.
My page: http://bit.ly/JV5I0Z
Surely there must be a way to set a bottom margin. Any ideas?
To make something that is positioned at the bottom of the page, you have two options.
1 - position: absoulte; margin-top: 600px (example)
2 - Use javascript to get the browser height and then change the margin-top to what ever it should be.
I've started coding a really simple layout I made sometime last year, I've finished most of it, when I discovered when the 'wrapper' div doesn't touch the bottom of the page, as if it has the "position: fixed" style on it, but it doesn't have that style. And I'm also stuck on why the Footer div isn't at the bottom, its right below the "topbar" div.
I'm really confused because I have no idea why the footer and the wrapper divs aren't working properly ;(
I've published it to my site on the link below so you can check the html/css.
HenryNorthen.com
Elements that float consume no space in the layout; everything after your header is floating, so nothing's there to push the footer to the bottom. Instead, the floating elements "float" away from the footer, which is placed right after the header.
If you add this to the style of your footer, it should solve this problem:
clear: both;
I am just trying to get the image box to slide up next to the BBD logo and I can't seem to figure it out.
A bit new to css and floats, etc. Can anyone offer a suggestion???
I'm working off of a template, so didn't set up the css myself.
Thanks!
link text
You will need to float both the div with the bbd logo and the div.slideshowgallery. When both siblings are floated (left for example), they will be next to each other (if the width of the containing block permits it).
A suggestion? I can give you that.
#sliderWrapper > div { float: left; }
Add this CSS and your divs will be side by side. Rounded corners and the background will break. To solve the background, add <div class="clear"></div> to the bottom of the sliderWrapper div. The rest... no idea.
always remember to work with a wrap container with a specific width otherwise is very difficult, to make this with a elastic design.
and then just float both divs... ideally on the same side and spearate them with their own margins.