Too many divs overlapping each other, no links working. css/html - css

I actually wrote here a whole page of text, but it was impossible to understand and putting a jsfiddle is just easier for you guys.
here it is: http://jsfiddle.net/pMdZK/
the problem is links dont work, if they do hovers doesnt work and I have tried solutions like clearfix.
Both "container" and "default" divs are essential to me and they are actually 2 images that meant to overlap each other(one is half-transparent, gif image with some parts missing. that is to change that image later for other stuff, while user is in page.)
also changing
position:absolute
doesnt seem to do much either.

Changing the padding-top of all items into margin solves your problem. The reason is that padding extends the entire entity while margin pushes the other entity's away.
http://jsfiddle.net/pMdZK/1/
You had:
#containerx #pl6
{
padding: 521px 0 0 120px;
position: absolute;
font-size: 22px;
}
You need:
#containerx #pl6
{
margin: 521px 0 0 120px;
position: absolute;
font-size: 22px;
}
change this for every item ofc.
The difference between margin and padding:
Margins and padding can be confusing to the novice Web designer. After all, in some ways, they seem like the same thing: white space around an image or object.
Padding is the space inside the border between the border and the actual image or cell contents. In the image, the padding is the yellow area around the contents. Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.
Margins are the spaces outside the border, between the border and the other elements next to this object. In the image, the margin is the red area outside the entire object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.
To further explain the difference i made a quick jsfiddle.
http://jsfiddle.net/GRLkt/
The padding box expands the entire div. (as you can see by the background image).
The margin box pushes the other content away.

Related

CSS - Images and Footer Problems

Ok, if you go here: http://opportunityfinance.net/Test/2013conf/index.html
You will notice 2 layout issues
This image of the 3 logos needs to be below the "Gold" <h4> tag. But for some reason it won't do it. I have assigned the <div> tag a position of relative since there are other divs within it that need to align the images to the bottom, and this does it correctly, however, it now won't go below the <h4>Gold</h4> HTML.
Next Layout issue:
I have been trying like hell to get a footer on the bottom of the page. Sounds simple right? WRONG! But now that I got the div to be at the bottom, it seems to be cutting off the top area divs above it. So, not all of the content is showing. Instead it is being pushed underneath of the footer. How can I fix this? Tried to put a padding on it, but now sure where and/or how? margin-top on the footer doesn't seem to do anything either.
Any help on this is greatly appreciated. I have been struggling like hell to get this simple layout in order. It should be a fluid layout, as I'm resizing text down as the page resizes also, which seems to be perfectly fine, except for these 2 problems :(
EDIT
Here is a pic of what it looks like when applying the container div a 100 pixel height value:
It is giving it too much space between the <h4>Gold</h4> and the 3 images. Atleast this is the case in Opera. Any possible work-arounds for this?
here's a fix for one
.body {
background-color: #FFFFFF;
padding: 2em 2em 52px 0;
}
you have 3 logo's in one div, on that div add a height, for example
element.style {
height: 100px;
position: relative;
width: 100%;
}
Pretty basic stuff really, you should look into clearfix's here http://css-tricks.com/snippets/css/clear-fix/
When you add a float or position:absolute; to a div, in a way it gives up its reserved space so that causes the parent div to think that there isnt anything inside and therefor has no height, clearfix will fix these problems for you, reason i say is becuase the 3 logo's are all either floated or absolute;
this is the result i get

Text centering cross-browser issue

I don't see what would control text to be offset on different computers, as seen below. One is centered within the blue area correctly, the other seems offset somehow. It's happening in a text field and a button. Live site: http://www.muuzik.me:8000
The key is in adjusting the padding around that element. Currently there is 18px of padding on the top and 4px of padding on the bottom. That's not balanced, so the text won't be centered vertically. To get it centered horizontally, make sure that the left and right padding are the same; to get it centered vertically, make sure that the top and bottom padding are the same.
It probably helps things that you can use a shorthand declaration to create this effect:
padding: 10px 20px; will set the top & bottom to 10px and the left & right to 20px.
I think that is the padding settings. See the green areas? Those are the paddings. Your curren t padding is
padding-top:14px;
padding-right:18px
padding-bottoem:4px;
padding-left:18px;
That is why the text is not presented in center;
You can try to set the padding to
padding: 12px;
I tried this, it works for me on Chrome and Firefox
You should show the whole CSS, but did you try to set text-align: center; and line-height: 46pxto the button?

Floating element dissapears behind background when container has position:relative

I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.

trying to use a negative margin in css on a list

I have been trying for an hour to get a list in a sidebar of WordPress to have a negative margin. Fooled around with margins, padding, sidebar placement in the php files... But the link images just keep disappearing behind the background.
Here's the page where I'm working: http://kirahenschel.com/
This is what I am trying to achieve:
http://emgraphics.net/kira/idea2-11.jpg
Ideally I'd also like that sidebar to be a finite height so the white boxes on the bottom spread, but I can cope with them being off to the right.
Anyone have any ideas? Neg margins are working fine on the logo, so it is just a list thing?
Thanks
If you're merely trying to get the list to be bumped to the left, why not use a CSS positioning property? Negative margins can get really wonky, and are (most likely) unneeded in this application.
#nameoflistdiv {
left: -20px;
}
You may also need to change the value of your div's position element, but this will bump your div and everything in it left, overlapping the container div.
If that doesn't answer your question, can you post the HTML and CSS you are using? The CSS code
margin-left: -20px;
really should work in this application as well, so show us what you've got.
Your negative margin is working as expected. The reason the images are getting cut off is because you have set overflow:hidden on the #main container. If you remove that property your images will appear.
#main {
background: url("images/blend.png") repeat-x scroll center top #2765CA;
clear: both;
height: 630px;
overflow: hidden; /* delete this line */
padding: 0;
}

What's wrong with my menu background image?

The web site is here.
See that blue bar behind the menu items? It's 40 pixels high and one pixel wide, and used as a repeating background - so, why does it look strange after the right-most menu item?
The image is here, if anyone needs it.
The image is used thusly:
.menu_bar
{
background-image: url("http://leonixsolutions.com/images/menu_background.jpg");
background-repeat: repeat-x;
font-size: large;
padding-left: 160px;
padding-top: 5px;
text-align: center;
}
Nothing is wrong with it,
Your menu container div.pd_menu_01 has a background color #ffffff remove it and you'll be fine...
The real problem here is that .pd_menu_01 extends too far to the right (and with its white background, covers the gradient). Try making it inline-block with an auto width, or something similar, so that it doesn't extend further to the right than it has to. You could also set its background color to transparent (but in my browser, .pd_menu_01 makes the page too wide and thus introduces unnecessary and ugly horizontal scrollbars, so the width solution is still relevant).
.pd_menu_01 has a background color of white declared, and is a div. Since divs are block level elements, they have a default width of 100%.
Either declare the div to be display:inline, wrap the menu in a span instead of a div, or make the background color transparent instead of white.

Resources