When I change the position of my image to fixed it goes off to the right, I cannot figure out how to get it back to the center of my page and still use the position:fixed attribute. Please help
Thank you ahead of time!
CSS:
header {
height: 60px;
color: #413659;
background-color: #413659;
margin-top: 30px;
}
#logo {
height: 100px;
width: 100px;
margin-left: auto;
margin-right: auto;
position: fixed;
top: 10px;
}
HTML:
<header>
<img src="http://i.imgur.com/IdtgpVa.png" alt="DP" id="logo">
</header>
Try this
#logo {
height: 100px;
width: 100px;
margin-left: -50px;
margin-right: auto;
position: fixed;
top: 10px;
left:50%;
}
updated jsFiddle file
Also you can use calc() from CSS3
left: 45%;
left: calc(50% - 50px);
http://jsfiddle.net/S8utY/
Try to use this for your CSS:
header {
height: 60px;
color: #413659;
background-color: #413659;
margin-top: 30px;
}
#logo {
height: 100px;
width: 100px;
margin-left: 45%;
margin-right: auto;
position: fixed;
top: 10px;
}
Related
I seem to be having a slight problem here. My divs dont show up in the web page. I tried changing the position of the div to absolute but it still dosen't show up.
Here is my code:
body {
background: url("http://fux-media.com/yz/skyline_exp1.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.header {
background-color: #DADAC8;
width: 900px;
height: 10%;
position: relative;
border-radius: 7px;
margin-top: -100px;
margin-left: 170px;
z-index: 500;
}
img {
border-radius: 70%;
border: 1px solid;
margin-left: 40%;
height: 175px;
width: 175px;
position: relative;
z-index: 1;
}
<img src="http://farm5.static.flickr.com/4118/4890853985_b34231ccfb_o.jpg" />
<div class="header"></div>
in your css add this
html, body { height: 100%; width: 100%; margin: 0; }
I've converted your example code into a code snippet and it seems to work fine. What exactly seems to be wrong? Are you missing the .header <div>? In that case give it some content or give it a fixed width. How should the .header look?
body {
background: url("http://fux-media.com/yz/skyline_exp1.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.header {
background-color: #DADAC8;
width: 900px;
height: 10%;
position: relative;
border-radius: 7px;
margin-top: -100px;
margin-left: 170px;
z-index: 500;
}
img {
border-radius: 70%;
border: 1px solid;
margin-left: 40%;
height: 175px;
width: 175px;
position: relative;
z-index: 1;
}
<img src="http://farm5.static.flickr.com/4118/4890853985_b34231ccfb_o.jpg" />
<div class="header"></div>
Your div is present there. But it doesn't have any contents that's why it is not visible.
Add some content in it like text etc. or add some padding to the 'header' class. Then you will be able to see it.
I am able to center my elements horizontally, but not vertically. I found couple of questions on stackoverflow regarding the same issue but the suggestions in those didn't work for some reason. Any suggestions? This is what I am going for: http://i62.tinypic.com/n4gzcw.png
Here is what I have so far:
<style>
.container {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.datetime {
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 15%;
background-color: white;
text-align: center;
}
.main {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 3%;
background-color: yellow;
text-align: center;
}
.left {
width: 25%;
float: left;
}
.left img {
width: 50%;
height: 50%;
max-width: 80px;
max-height: 80px;
}
.mid {
width: 50%;
text-align: center;
float: left;
padding-top: 5%;
font-size: 1em;
}
.right {
width: 25%;
float: left;
}
.right img {
width: 50%;
height: 50%;
max-width: 80px;
max-height: 80px;
}
.stadium {
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: white;
text-align: center;
}
</style>
<div class="container">
<div class="datetime">26 August 2014<br />12:00pm</div>
<div class="main">
<div class="left"><img src="http://dejaniskra.comze.com/ManchesterUnitedUpcomingFixture/logos/mkdons.png" /></div>
<div class="mid">MK Dons vs Manchester United</div>
<div class="right"><img src="http://dejaniskra.comze.com/ManchesterUnitedUpcomingFixture/logos/manchesterunited.png" /></div>
</div>
<div class="stadium">Stadium:mk - Milton Keynes</div>
</div>
You can wrap your content with .container-inner and add styles:
.container-inner{
height: 150px;
position: absolute;
top: 50%;
margin-top: -75px;
width: 100%;
}
you can find the working example here:
http://jsfiddle.net/Lkfdxm13/
Creating a partial CSS layout and then attempting to adapt it to another strategy can be fraught with problems. My suggestion would be to create a clean set of html wrappers with only background colours and work on employing one of the solutions that you've found, for example How to verticaly align into the center of the content of a div with defined width/height?. Once you have a working layout then you can move your content in.
If you come across a problem that you can't solve then you can post a specific CSS question and the answers will probably be a lot more forthcoming.
I have this tricky CSS problem: I have this HTML and CSS:
.mark {
height: 30px;
width: 30px;
background: red;
position: absolute;
left: 30px;
bottom: 30px;
}
http://jsfiddle.net/mr_mohsen_rasouli/4Nb9L/
I want to red box stay in define position but when I scroll, it move!
how can I fix that?
Try this.. this may not be a good approach.
But will give you the desired result.
I place the div mark in another div
and give
.mark {
height: 30px;
width: 30px;
background:red;
position: fixed;
}
Full code is here
http://jsfiddle.net/4Nb9L/7/
you have used absolute,use fixed instead
.mark {
height: 30px;
width: 30px;
background: red;
position: fixed;
left: 30px;
bottom: 30px;
}
Use position : fixed and top reference for the .mark element
Example:
.mark {
height: 30px;
width: 30px;
background: red;
position: fixed;
left: 30px;
top:150px;
}
change the value of position property fixed instead of absolute and try.
.mark {
height: 30px;
width: 30px;
background: red;
position: fixed;
left: 30px;
bottom: 30px;
}
Link : Updated Fiddle
I have a div inside a div that will not move up into the center where I want it to. It is the image called youthcouncil
HTML
<div id="header">
<img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Logo.png" id="logo">
<img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Title.PNG" id="title">
<img src="http://www.youtharts.ie/sites/youtharts.ie/files/NYCI%20Logo%20Full%20JPG_2.jpg" id="youthcouncil">
</div>
Corresponding CSS
#header {
height: 100px;
width: 2000px;
background-color: #993333;
margin-top: -10px;
}
#youthcouncil {
height: 80px;
width: 180px;
margin-left: 300px;
margin-top: 5px;
}
#logo {
height: 80px;
width: 180px;
margin-left: 20px;
margin-top: 5px;
}
#title {
height: 80px;
width: 180px;
margin-left: 250px;
margin-top: 5px;
}
UPDATED
I removed some parts for you, to make it easier to see how it works. Now you should be able to add back your other images etc.
Demo: http://jsfiddle.net/UKAEu/2/
HTML
<div id="header">
<img src="http://www.youtharts.ie/sites/youtharts.ie/files/NYCI%20Logo%20Full%20JPG_2.jpg" id="youthcouncil" />
</div>
CSS
#header {
height: 100px;
width: 500px;
background-color: #993333;
}
#youthcouncil {
height: 80px;
width: 180px;
margin-top: 10px;
position: relative; /* make it moveable */
left: 50%; /* push left edge to center */
margin-left: -90px; /* push back half its width */
}
I want to place one div over the other. I've already accomplished this with position:absolute;, but the behavior is different on other screen resolutions—specifically, the div on top moves to the left. Can anyone figure out the issue? To better understand my question, see this page.
My CSS:
#flashplayercontainer{
overflow: auto;
}
#flashplayer{
width: 975px;
margin: 0 auto;
background-color:#666666;
border:#CC0000 thick 2px;
}
#adsbox{
background: #222;
width: 930px;
height: 480px;
position: absolute;
top: 350px;
left: 205px;
}
#cpmbox{
margin: 0 auto;
margin-top: 40px;
width: 500px;
text-align: center;
}
#cpmbox h2{
color: #FFF;
margin-bottom: 20px;
}
#cpmbox a {
color: #FC0;
cursor: pointer;
}
</style>
My HTML:
<div id="flashplayercontainer">
<div id="flashplayer">
...
</div>
<div id="adsbox" style="height: 400px;">
<div id="cpmbox">
<h2>Loading.......</h2>
<script type="text/javascript">document.write("<iframe src='http://www.epicgameads.com/ads/banneriframe.php?id=yeA5z58737&t=300x250&channel=2&cb=" + (Math.floor(Math.random()*99999) + new Date().getTime()) + "' style='width:300px;height:250px;' frameborder='0' scrolling='no'></iframe>");</script>
<p><a id="closeads">Close This Ads (<span id="covertimer">20</span>)</a></p>
</div>
</div>
</div>
</div>
Replace your css. we need to make it Position % with two div equally, I think its working perfectly.
#flashplayercontainer{
overflow: auto;
}
#flashplayer{
width: 975px;
margin: 0 auto;
}
#adsbox, #cpmbox {
width: 930px;
height: 480px;
border:#CC0000 thick 2px;
}
#adsbox {
bottom: 50%;
right: 50%;
position: absolute;
}
#cpmbox {
left: 50%;
position: relative;
background-color:#666666;
top: 50%;
margin: 0 auto;
margin-top: 40px;
text-align: center;
}
#cpmbox h2{
color: #FFF;
margin-bottom: 20px;
}
#cpmbox a {
color: #FC0;
cursor: pointer;
}
Three Things you need to change you code.
1) Make it Fixed instead of absolute
2) Left and Top make it % instead of px
like that:
#adsbox{
background: #222;
width: 930px;
height: 480px;
position: fixed;
top: 20%;
left: 15%;
}
3) If you want also minimize and Maximize (window resizing) time. you have to write JS for
position calculation of the Div i mean (left,top)
I hope its use full.
Please add the position:relative to flashplayercontainer div,
example:
#flashplayercontainer{
overflow: auto;
position:relative;
}
And do the some pixels adjust for top and left in ID adsbox.