When dropping any kind of image into a content container it places it a couple centimeters away from the left side of said container. It is acting as if there is some sort of padding on the inside of the container.
If I set the padding-top property to 0 it will move the image exactly to the top of the container, however the same is not true for the padding-left property? Why is this and how can I get around it to fully utilize the side of my container?
Thanks in advance.
Related
Having trouble getting the black bar at the bottom of the slider to stretch full-width on the screen. It works on the left, but the right side is cut off at the container edge. Using Master Slider if that's relative info. Any tips on how I can get that black bar to stretch all the way across?
http://designatwork.net/51fifteen/
To fix the issue
Remove tranform property from the div having class ms-slide ms-sl-selected
Remove width property from the div having class ms-layer. As div is absolutely positioned, set left and right values to 0 to make it full width
Remove max-width and left from div with class ms-slide-layers also
Although I feel, structure is not proper, having relative positions within absolute creates problems. Still above fix can save you from re-write.
A few classes like ms-slide-layers, ms-inner-controls-cont and ms-layer have hardcoded values for left, width and, most limiting in this case, max-width.
I think this case would benefit from using the viewport width unit, vw by setting width: 100vw; you're telling it to be the width of the entire viewport.
Also, you don't need the padding and margin in 9999px. You can position: absolute the layer, have bottom: 0 and then use reasonable padding and align the text according to your needs to get a better, cleaner result.
First set a position (anything other than static) to its parent element. Then set the black bar's position to absolute. This way, it will be relative to its nearest parent element that contains a position. Next, stretch it out by either using height and width properties, or use directional positions (top, bottom, left, right). If youll use directional positions then use both left and right simultaneously and the black bar will expand across the screen.
So, I have this code
http://pastebin.com/W3ggtgZB as css, and the body looks like this:
http://pastebin.com/2tkmhnfW
What I am trying to do is create a div with two children divs, one of which has a fixed width, and the other one I want to fill the rest of the blank space. I'm eventually going to want a div going across the top of this side div, too, but, that comes later. My issue is, the child div sub1 expands to be 100% of its parent width, which is an issue, because then it overlaps out of the parent div and keeps going. I tried things like floating left, using block and inline, I tried setting the width to auto (which makes it disappear for some reason) - but nothing seems to really work. It looks okay, at first, but when you zoom in, sub1 kinda follows its own rules. Can someone help me fix it so that sub1 will just fill in the rest of the space left in the main div?
Here is the answer:
http://dabblet.com/gist/6069015
Only need to specify the side column's floating and the rest will take place as you want, adapting the screen size as well.
Hope it helps!
I have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
This is the page: propertytest.uphero.com
I have narrowed down the problem to the 6 blueish boxes (the top 3 are under a div called offers and the 3 below that are under a div called properties). If I was to take them out, the space goes but I would really like to keep them in so I need someone to help me troubleshoot it so that I can keep the boxes and have no space below the footer.
I think my problem lies with the fact they are positioned with relative (all divs are positioned relative - bad idea I now realize that).
I have tried:
aligning the 2 divs with absolute positioning - that does the trick of getting rid of the space at the bottom/right however if I was to scale down the browser, the boxes go out of position..
removing all positioning and floating them to the left/right - removes the space at the bottom/right but doesn't go into the position I would like them to ( I don't think you can position floats with top/bottom/left/right or margin? )
Here is how to sort out the 6 boxes that you currently have as position:relative;
http://jsfiddle.net/F9Q6T/
The basic premise is that you float the boxes inside a container and then clearfix them to make the container the right size.
In terms of the issue at the bottom of the page you need to remove bottom:290px; from your footer. This appears to be what is causing the problem
I think main problem is body background image. You have used image of 1300px * 1000px size. i think you must use image of 1px width with repeat property.. And white space at bottom come due to bottom property of orders and properties div`
thanks.
To get an idea of what the hell I'm on about, please go Here and Here
As you will see there is a side bar and a content area, sidebar is floating left, content floating right, and footer clears both.
Height on the sidebar and content are not set so the divs grow!
However, you can see that if one floating div is bigger than the other, the the background image appears.
I need to know how to make the background colour of both divs always be the same, and grow together in peace and harmony
Thanks
display: table-cell on both divs (and removing the floats) can work easily here, though lower IEs won't like it.
Or, you could always use the infamous Faux Columns
What you are asking is for the two divs to be the same height even though their content height is different. This cannot be done without relying on tables or javascript.
What you can do to achieve the same effect, is have a container div (I can see you already have it) and give this a vertically repeating background image of the sidebar and content color. This is known as Faux Columns.
Make sure to clear within the container (move <div class="clear"></div> up one level) so the container gets the height of whichever div is bigger.