I'm having trouble getting margins to work on an image. I have an image, and it has the following CSS:
#logoRedrum{
position:relative;
width:50px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
The HTML for the image is as follows:
<img id="logoRedrum" src="resources/img/logoRedrum.png">
What I'm trying to do with this is to have my image centered at all times. Instead of having it centered, it is doing this:
The red backwards "R" with the blue outline is my image. I have googled several times what might be causing the image to stay on the left, but to no avail.
All help greatly appreciated!
Add display:block; to img
#logoRedrum{
position:relative;
width:50px;
display:block;
margin:0 auto
}
DEMO
If you need to center the image in the main parent its easy, do it like this
//HTML
<div class="centered-content"> <img class="no-margin" src=""/> </div>
//CSS
.contered-content {
text-align:center;
}
.no-margin{
margin:0 auto;
}
Related
I've got what I think to be quite an interesting problem. Whenever I try to vertical-align all the elements I need - it won't work, but if I leave one out, it appears to work.
Here's the code:
<body style='margin:0; width:100%; height:100%; background-color:#e8e7e7'>
<div id='holder' style='width:100%; height:100%; margin:0'>
<div id='blackout' style='width:100%; height:100%; background-color:#000; opacity:0.5; position:absolute; z-index:1'></div>
<div id='data_holder' style='width:100%; height:100%; z-index:2; position:relative; text-align:center'>
<div id='geo' style='width:96.9%; height:40%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
<div id='dis_v' style='width:24%; height:25%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
<div id='dis_d' style='width:24%; height:25%; background-color:#9F6; display:inline-block; '></div>
<div id='dis_b' style='width:24%; height:25%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
<div id='dis_o' style='width:24%; height:25%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
</div>
</div>
</body>
I would like to know what's causing this problem and how can I solve it and vertical-align all the elements inside the data holder div.
Here's a jsFiddle of the problem.
I think the key idea that you're missing is that you need to set line-height in data_holder. That's just how vertical-align works. (You'll need to use a height like 200px rather than 100%.) See this question for better info:
How do I vertically center text with CSS?
vertical-align work just for text. I usually use margin/padding for vertical align. And add your code to a playground.
I have div inside a div (.konteineris2 and .feedback). When I use left:-200px in .feedback class, fixed div suddenly appears in the very left side of screen, outside .konteineris2. All I wanted it to move for 200px to the left outside .konteineris2, but not appear to the left screen border and then move 200px from that point.
HTML:
<div class="konteineris2">
<div class="feedback">
</div>
</div>
CSS:
.feedback{
position:fixed;
top:220px;
width:100px;
height:200px;
background:white;
}
.konteineris2{
width: 960px;
height:700px;
position:absolute;
top:460px;
padding-top:30px;
pointer-events:none;
overflow:hidden;
}
Any ideas how to manage it?
change position:absolute; to position:relative; in .konteineris2
Add margin-left: -200px; in .feedback
Check it on CodePen . I think you're looking for the same thing.
Without seeing more of the context in which this occurs I'd guess the following might achieve your goal: Try adding margin-left:-200px instead.
I have some trouble with my website.
I have a contact from which is based on 4 divs posisioned like this:
div 1 is the place where you can fill out your information
div 2 is the textarea for your message and a send button
div 3 is contact information
and div 4 are social media icons.
this all works great. on mobile they're are scaled beneath eachother and it works like a charm.
But now my designer want to add a format for landscape posioned mobiles (which I agree with him is nesacery because the contact page is way to long if you keep all the divs beneath eachother. so what he came up with is:
so div 1 and 2 beneath eachother with all the fill out fields. and on the right the information en social media icons.
but here starts my problem. because floating items will go beneath eachother in order. this means that div2 will stay beside div 2 and div 3 will be beneath div 1 like this (the arrow incades which 2 I want to swap:
is there any way to change this by just using css? the solution I came up with is writing a a new code posisioned in the good way for this problem and make it display none until the right landscape mode is registerd.. but this would be a bit of a heavy solution for such a problem in my opinion. so anyway has a better idea:
here a fiddle:http://jsfiddle.net/skunheal/p6Yy6/
#container{
height:200px;
width:400px;
background:#212121;
}
#id1{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id2{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id3{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id4{
height:90px;
width:190px;
background:#fff;
float: left;
}
this is my css right now. in the jsfiddle is the position of every box displayed. aldo it doesnt matter if the boxes on the right are swapped.
Hope anyone can help me out!
If I understand corectly the "responsive" behavior you are looking for , you ca wrap the two first divs together and the two last ones together. and float the wraps to the left. Then using a percent width and max-width/min-width you can achieve the desired behaviour.
See this FIDDLE (I modified the width of #container in your fiddle so it is responsive)
HTML :
<div id="container">
<div id="left_wrap">
<div id="id1">left above</div>
<div id="id2">left under</div>
</div>
<div id="right_wrap">
<div id="id3">right above</div>
<div id="id4">right under</div>
</div>
</div>
CSS (modified)
#left_wrap,#right_wrap{
width:50%;
max-width:380px;
min-width:190px;
float:left;
}
#container {
height:100%;
width:100%;
background:#212121;
}
#id1,#id2,#id3,#id4 {
height:90px;
width:190px;
background:#fff;
float: left;
}
Now, if you change the width of the fiddle window, you will see that if the window width is over 760px the divs all align normaly. If the window is between 760px and 380px you get the disired behaviour. If th window is under 190px the divs all stand on to of each other.
Since you are working with fixed height/width on these, you should be able to use absolute positioning instead of floats.
#container{
height:200px;
width:400px;
background:#212121;
position:relative;
}
#id1{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
left:0;
}
#id2{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}
#id3{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
right:0;
}
#id4{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
right:0;
}
I have 2 divs and I wanted to resize images inside in those divs but they should allways fill div and constrain proportions.
Like this one:
http://www-07.ibm.com/sg/60/
If you try to resize them, they will allways fill their divs and images will allways keep their proportions.
HTML:
<div class="one">
<img src="imgs/photo1.jpg" class="photo1">
</div>
<div class="two">
<img src="imgs/photo2.jpg" class="photo2">
</div>
CSS:
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
}
.two{
position:relative;
overflow:hidden;
width:50%;
height:50%;
float:left;
}
How do I style those images to look like this?
http://www-07.ibm.com/sg/60/
Site is using jquery plugin for the effect, however you can get the same by css3 background-size:cover property.
What you have to do is :
Remove source image and give it through background and use background-size:cover.
<div class="one">
</div>
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
background: url("path to image") no-repeat center center;
background-size : cover;
}
I could be missing something here, but if I understand your question correctly, you can just add:
width: 100%;
to your img tags and they will always fill the containing div.
Try this,
.one img, .two img {
width:100%;
height:auto;
}
I think you would get the best result by not using the tag, but instead make these background images with the attribute:
background-size:cover;
background-position:center;
i'm stuck in a bit of a rut at the moment.
if you head over to my website...
http://dekkro.no-ip.org/
You will see an image, and a div underneath it. I have spent the past few hours trying to position these both in the middle of the page, with the bottom div over lapping the image.
I have failed and failed, what am I doing wrong here? I have used z-index, and positioning but its never centered.
Thanks!
All you need is this:
CSS:
#my_img {
margin:auto;
display:block;
}
#my_div {
margin:auto;
position:relative;
top:-100px;
z-index:2;
}
HTML:
<img id="my_img" src="http://dekkro.no-ip.org/images/testimage.png" />
<div id="my_div">whatever</div>
Here's a demo: http://jsfiddle.net/tX2JY/embedded/result/
Wow, that's alot of code going on for that page.
Without reviewing everything yet (will in a bit) - have you tried setting the main image to be a background image of a div, and then simply putting the log in form inside it?
CSS
#image-div { background-image:url('yourimage.jpg'); }
HTML:
<div id="image-div">
<div id="form-div">
form...
</div>
</div>
Lets say one div has width w1 and height h1 ; other w2 , h2
#div1 {
position:absolute; top:50%; left:50%; margin-left: - w1/2px; margin-top:-h1/2px;
}
#div2 {
position:absolute; top:50%; left:50%; margin-left: - w2/2px;
margin-top:-h2/2px; z-index:9999;
}