Content overlapping footer - css

My slideshow is overlapping my footer. In the source code, I've tried to clear the previous DIV as typically recommended:
<div class="clear"></div><!-- /clear any floats -->
This is not fixing the problem. Any ideas?

One way to solve this is to adjust the footer-wrap class to add more margin on top:
#footer-wrap {
margin: 100px auto 120px;
}
There might be other adjustments necessary but this should fix the issue assuming your content in the sideshow stays the same height.

give this one <div class="ls-thumbnail-wrapper" style="visibility: visible;"> a float: left and it should be fixed

Related

Margin of header is added to body (how to solve it ?)

I try to solve this problem for hours ...
I tried a few tricks, some small hack, I also tried to add positions "relative, absolute...Etc", some "top", top add a invisible not fixed div behind the fixed and others, but I want the cleanest solution possible and to know WHY have I got this problem.
: I have a menu "fixed" to the top, and a header.
The header is behind the menu (normal), but the problem is that when I add a margin to the header, it adds a margin to the body, while I want to add margin to the header INSIDE the body, just place the header under the menu without position:relative+top:Xpx.
And use "box-sizing: border-box" doesn't change anything
http://jsfiddle.net/WdNz4/
<div id="menu">
</div>
<div id="header">
test1(Success)<br>test2<br>test3(Lose)<br>test4<br>test5
</div>
(can't post my css, little bug, go to jsfiddle)
Thanx in advance for your help !
Add top:0; property to your #menu:
#menu {
height: 40px;
width: 100%;
position: fixed;
background-color: red;
top:0;
}
JSFiddle: http://jsfiddle.net/WdNz4/4/
Just use float:left; this will set your block outside the body structure, so that way you can position it anyway you want.

Positioning elements CSS

I recently start to learn CSS and table less design.
After reviewing some tutorials now I am involved with converting PSD Mockup to XHTML and CSS.
Most often my problem is to positioning elements and containers.
for example this below design:
I am converting this to CSS and HTML.
I have no problem with styling Input elements.
about main layout it seems two columns layout , right ?
How do I style containers ?
I wrote this code It displays better here.
I divided my page to two containers and valued (float:left) to left container.
As specified in jsFiddle link elements on the left side container had come out of the box (I think its because of float).
I can't set containers position to absolute.
Now please help me to refactor and change my code. And please explain to me how to position elements right ?
i think a
<div style="clear:both;"></div>
before the </div> of the container will work.
edit:
http://jsfiddle.net/xNwAc/5/
Try and have a wrapping element to contain your two columns. with W3C code, you'll want to use floated elements. The elements don't have any padding, you can work on them yourself, but it's a very basic structure to follow:
The CSS:
#wrapper { width: 960px; margin: 0 auto; background: blue; } /* positions it center of page */
#left { float: left; width: 50%; background: red;}
#right { float: right; width: 50%; background: green;}
The HTML:
<div id="wrapper">
<div id="left"> Left content </div>
<div id="right"> Right content </div>
</div>
You have to set a new formating context on the container, with overflow:auto; eg.
I sugger you to read the specification which is very clear and useful.
As the exclamation point is not a part of the content you can place it as a background image.

the css property "clear" leaves a huge empty space

I am simply using a div of this nature to clear an area after floats:
.clear {
clear:both;
}
however, I am seeing it is causing a big space in my formatting and I'm not sure how to rid of it. what do you think may be happening?
thank you!
In case anyone else runs into this problem, the solution is to add this to the group's parent; that is the element that is causing the problems:
overflow: auto
i.e.:
<div style="overflow: auto">
<div style="float: right">Testing</div>
<div style="clear: both"></div>
</div>
Try to use a line height , it should fix the problem.
Is it happening only on IE , if so add line height
do something like this
.clear {
clear: both;
height: 0px;
overflow: hidden;
}
I would just apply the clear: both attribute to the next content element (i.e. div) instead of creating an empty div (which I'm assuming that you are doing).
Demo: http://jsfiddle.net/wdm954/ArDhF/1/
I had the same problem with several small left-floating tables next to each other. The clear div afterwards took a lot of white space without having any height, nor padding or margin.
The solution: Wrap all tables within a div, then assign overflow-hidden to that div and (this is important) a value for the height.
E.g.
.tablecontainer {
height: 70px;
overflow: hidden;
}

Centering Text and images within a DIV, and more

So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)

CSS Absolute Position

Evening All,
Had a question on whether or not the use of Absolute postioning in my context would be considered wrong by the CSS gods. Basically what I am doing is using it to position images for the header bar of my website.
We can use SO as a good example. So the main logo at the top of our page is StackOverFlow followed by a menu. On the right side we have Ask Question. Now pretend with me that both of those elements are pictures. Would it be considered within reason to absolutely position those so that we don't have to fight with any other CSS div positioning?
Cheers,
Mike
In my experience, you will generally find yourself disappointed with absolute positioning over, say, floats, meaning you'll find some nasty corner cases that will make the whole exercise a hair-pulling experience.
The one exception to that is relative+absolute positioning. When used properly that can be incredibly useful.
But to do a heading like on the SO site I would probably just use floats.
<div id="header">
<img id="left" src="image1.png">
<img id="right" src="image2.png">
</div>
with:
#header { overflow: hidden; }
#left { float: left; }
#right { float: right; }
Most of the time, that's problem solved.
It may be that only one of these needs to be floated. If its the one on the left:
<div id="header">
<img id="left" src="image1.png">
<div id="right">Some more content</div>
</div>
with:
#header { overflow: hidden; }
#left { float: left; width: 150px; }
#right { margin-left: 150px; }
I am guessing you will only need to absolutely position one of the two items you discuss. Leave the logo in normal page flow, and position the other item.
You could also use float:right on the one item, but that can be hard to troubleshoot across the spectrum of browsers.
I am not in touch with the CSS gods, but I say your plan of attack sounds like a fine use of absolute positioning.
Just be sure whatever wraps the two elements has position: relative
Absolute positioning can be really helpful when both elements are a different height
i would say probably easiest to make the right side image/div a float:right
that will let you shift things around fluidly

Resources