I have some divs which i positioned with
position:absolute;
width:100px;
margin:-20px 420px;
same like this another one also...
the problem is it is looking fine in chrome and firefox ,but in ie7 those divs are being moved away.
how to set it to look perfect in all browsers??thanks
edited:
.button {
display:block;
position:absolute;
width:200px;
height:50px;
background:url(../images/portfolio.gif) no-repeat 0 -49px;
margin:-50px 420px;
}
.button a {
display:block;
position:absolute;
width:100%;
height:100%;
background:url(../images/portfolio.gif) no-repeat 0 0;
text-indent:-9999px;
}
.button a:hover {
background-position: 0 50px;
}
.button1 {
display:block;
position:absolute;
width:200px;
height:50px;
background:url(../images/design-brief.gif) no-repeat 0 -49px;
margin:-20px 420px;
}
.button1 a {
display:block;
position:absolute;
width:100%;
height:100%;
background:url(../images/design-brief.gif) no-repeat 0 0;
text-indent:-9999px;
}
.button1 a:hover {
background-position: 0 50px;
}
these two buttons,button and button1 are inside this div along with some text
.cont
{
position:relative;
width:1400px;
height:500px;
}
I guess you have to set a top:0px and a left:0px. You can not use position:absolute without setting a real position.
Or: You can try position:static or position:relative, I'm not sure what you want to do.
Don't use margin to position your buttons. If you have made it position:absolute; use top: 0px; left: 0px; (obviously setting them to the desired position). As you have set the parent div .cont as position:relative; the buttons will be set within this div as long as they are there in the DOM. So if you were to set them top: 0px; left: 0px; the buttons would sit in the top left hand corner of the div.
Much more reliable than playing with negative margins.
Agree with Matt Asbury... If u r using positions then there is no use of margins. and one more thing, u r using position absolute for buttons. in that case don't use position for its child unless and until u want to position its child as well. If u can provide html then it will be easy to understand the code and help.
Related
I'm trying to develop my first responsive website but I'm having some trouble (of course).
I need an element (sort of a menu) to contain 4 row of elements and each element has an image to the left and some text to the right. Now, the issue I'm having is that I can't seem to be able to make the elements center vertically correctly. I've tried several methods that seem to work for a lot of people so I thought I'ld ask if anybody knows why nothing seems to work for me.
This is what the image CSS looks like:
.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}
Here is the fiddle: http://jsfiddle.net/mampy3000/9JZdZ/1/
Appreciate any help!
since your elements are inline-block , you can inject an inline-block pseudo-element 100% height and vertical-align:middle it to img and span : DEMO
basicly (+ below update of your CSS):
.tablaBuscadorElementos:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.tablaBuscadorElementos {
height:22%;/* instead min-height so value can be used for pseudo or direct child */
border: 1px solid black;
padding:0px;
width:100%;
}
.tablaBuscadorElementos > span {
font-size:20px;
width:80%;
vertical-align:middle; /* align to next inline-block element or baseline*/
border:1px solid black;
display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
vertical-align:middle; /* align to next inline-block element or baseline*/
width: 20px;
height:20px;
}
.tablaBuscador, .tablaBuscadorElementos{
display:block;
}
.tablaBuscadorElementos:before {
content:'';
height:100%;/* calculated from 22% parent's height */
display:inline-block;/* layout*/
vertical-align:middle;/* align to next inline-block element or baseline*/
}
You can do this by adding this css to .tablaBuscador
position: fixed;
top: 50%;
margin-top:-100px; /* half of height */
More info here: How to center a table of the screen (vertically and horizontally)
The newer option would be to use calc() but you might run into browser support issues.
position: fixed;
top:calc(50% - 100px).
Here are which browsers support calc(): http://caniuse.com/#feat=calc
Your code needs a major tune-up. You are floating elements, using vertical-align on them, positioning them relatively with left, right, top, and bottom set to 0. None of these make any sense. Here's a cleaned up fiddle: http://jsfiddle.net/jL2Gz/.
And here's a tuned up code:
* {
padding: 0;
margin: 0;
}
body {
height:100%;
}
.tablaBuscador {
font-family: "Maven Pro", sans-serif;
height:200px;
width:40%;
}
.tablaBuscador > div {
border: 1px solid black;
padding: 10px 0;
}
.tablaBuscador > div > span {
font-size:20px;
width:80%;
border:1px solid black;
}
.tablaBuscador > div > img {
width: 20px;
height: 20px;
}
.tablaBuscador > div > * {
display: inline-block;
vertical-align: middle;
}
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
im playing around with a loading bar in this fiddle, and i have this code
html
<div id="back"><span id="text">loading...</span></div>
css
#back {
width:100px;
background-color:#bbbbbb;
}
#text {
z-index:2;
height:30px;
position: absolute;
margin:auto;
}
div{
height:30px;
position: absolute;
}
yet the span does not have a margin, it looks like this
when i give it a normal margin value it works.
i have also tried margin: 0 auto; but also with no success. and when i try margin:10px auto; i get the 10px but not the auto.
Applying auto margin to an absolutely positioned inline element with unknown width introduces various problems.
I had success centering the text by setting line-height and text-align:center like so:
#text {
position: absolute;
z-index:2;
width:100%;
height:30px;
line-height:30px;
text-align:center;
}
http://jsfiddle.net/ruzED/
It's because the text is position absolute. Try this:
#back {
width:100px;
background-color:#bbbbbb;
text-align:center;
}
#text {
z-index:2;
height:30px;
line-height:30px;
position: relative;
}
JSFiddle: http://jsfiddle.net/h6BRn/13/
I am using position:relative and top:-120px to move the header background image underneath the two header <div/>s, which works nicely. I then had to set the wrapper <div/> and footer <div/> to also be relative and move them both up 120 pixels to line up correctly. The problem is that the bottom of the page now has 120 pixels of extra space underneath the footer. Is there an easy way to remove that space? Or perhaps is there a different way of using CSS and the position property to achieve this result? Here's my site:
http://ledvideowall.net
Here's the fix:
.wrapper {
top: 0;
}
.site-header {
margin-bottom: -120px;
}
footer[role="contentinfo"]{
top:0;
}
I was going to say that #headerbg doesn't need to exist, but I see that you are using the image to maintain the height/width ratio of the header as the page sizes down.
When I need to do something like this, I don't position the "background-image" in this case at all, but make the wrapper position:relative and the #headertop & #menubar position:absolute. This takes the top and menu out of the flow and makes the background image the work.
.site-header {
position:relative;
...
}
#headertop {
position:absolute;
top:0;
left:0;
width:100%;
z-index:1;
...
}
#menubar {
position:absolute;
top:80px;
left:0;
width:100%;
z-index:1;
...
}
#headerbg {
display:block;
height:auto;
width:100%;
/*
position: relative;
top: -120px;
z-index: 0;
*/
}
#headerbg img {
display:block;
width:100%;
height:auto;
}
You could apply margin-bottom to revert the effect the relative position causes:
footer[role="contentinfo"]{
margin-bottom: -120px;
}
If you've intentionally moved the footer up 120px, you can do this to remove the white space below it.
footer[role="contentinfo"] {
margin-bottom: -120px;
}
I want to know the best way to achieve the below image in CSS+HTML.
I'm having difficulty explaining in words what I want, so I guess a picture would make it more clear:
While the second and third parts are doable. I'm curious to know the best way to achieve the first one (Blue menu). If i split my page into three parts (based on the menus), in the case of blue, my div items must float out of the horizontal width of the menu, but within the vertical.
Thoughts wise ones?
Working Fiddle
You can see i have used position:relative on parent and position:absolute on child to make it flow out of that li element.
ul {
list-style:none;
width:906px;
height:600px;
}
li {
float:left;
display:inline-block;
border:1px solid #ccc;
width:300px;
height:600px;
text-align:center;
position:relative;
}
.selected {
background:yellow;
}
.div {
position:absolute;
left:-150px;
width:600px;
height:80px;
border:1px solid #000;
background:#fff;
z-index:2;
}
#div-1 {
top:30px;
}
#div-2 {
top:140px;
}
#div-3 {
top:250px;
}
You can do it by position: absolute.
.blueDiv{
position:relative;
}
.innerDiv{
position:absolute;
top: (your choice);
left: 50%;
margin-left: -(innerDivSize / 2);
}
If you don't have the width of the elements inside ... you can try to push them to the left and right by:
.innerDiv{
position:absolute;
top: (your choice);
left: 0;
right: 0;
}
But that will work only if the parent element is not on the very left or very right of the page.