Could any one help me around this piece of stupid code where I lost almost 2hours trying to figure out how to make it work. Goal is to center input field verticaly and horizontaly inside horizontal bar.
Here is a simplified code:
HTML:
<div class="navigationBar">
<input type="text" id="searchField">
</div>
CSS:
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
}
#searchField{
margin; auto;
height: 25px;
width: 200px;
}
I've also tried with display modes, changing position types but no luck.
Here is the code
Adding a line-height wil make it centered vertically.
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
}
#seachfield
margin; 0, auto;
height: 25px;
line-height: 40px;
width: 200px;
}
Answer is simple, just remove padding for #nav element and set his height and line-height to 40px and then set display: inline-block for #search
#nav {
line-height: 40px;
height: 40px;
}
#search {
display: inline-block;
}
Try below CSS:
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
position:relative;
}
#searchField{
margin: auto;
height: 25px;
width: 200px;
position:absolute;
left:0px; right:0px; top:0px; bottom:0px;
}
PS : its not margin; auto;, the correct syntax is margin: auto;
DEMO
add display:block;
#searchField{
display:block;
margin: 2px auto;
height: 25px;
width: 200px;
}
margin auto: top and left
add 'text-align: center;'=> (not only alignment text)
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
text-align: center;
}
#searchField{
height: 25px;
width: 200px;
display:inline-block;
margin:4px auto;
}
2 ways to do it
second way is actually using latest css features so , take care
1.)
.navigationBar { position: relative;}
#searchField { width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
2.)
.navigationBar { position: relative;}
#searchField { position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Related
All answers are not helping me.
Please see here: https://jsfiddle.net/prg5hc9m/1/
#main {
width: 300px;
height: 400px;
position: relative;
}
#main1 {
position: absolute;
float:left;
}
#main2 {
position: absolute;
overflow-y: scroll;
height: inherit;
float:left;
width: 50%;
}
I want main2 to be under main1.
Not very clear on what you need but you cant use absolute with float. If you remove the absolutes on both the scroll section appears under the other.
updated fiddle: https://jsfiddle.net/prg5hc9m/3/
#main {
top: 20px;
left: 20px;
width: 300px;
height: 400px;
position: relative;
display:block;
}
#main1 {
float:left;
}
#main2 {
clear:left;
overflow-y: scroll;
height: 300px;
float:left;
//top: 10%;
width: 50%;
}
By 'under', I'm assuming you mean 'behind'. In order to do that, you need to add a z-index. Z-indexes start at zero, so simply give your #main1 div a z-index of 1 to have it appear 'on top':
#main1 {
z-index: 1;
}
I've created an updated fiddle here.
Hope this helps! :)
Use inline-block.
#main {
top: 20px;
left: 20px;
width: 300px;
height: 400px;
position: relative;
display:block;
}
#main1 {
display: inline-block;
float:left;
height: 50px;
}
#main2 {
clear:left;
display: inline-block;
overflow-y: scroll;
height: 300px;
float:left;
//top: 10%;
width: 50%;
}
I have 3 divs in my footer, those divs are used for footer and you can see them horizontally on the bottom of the page.
<div class="footer-text footer_mainDIV">
<div class="footer_leftDIV">
All rights reserved
</div>
<div class="footer_middleDIV">
Help
</div>
<div class="footer_rightDIV">
Version 6.0
</div>
</div>
with css:
.footer_mainDIV {
position: relative;
width: 100%;
border-top: 1px solid #eeeeee;
margin: auto;
}
.footer_leftDIV {
text-align: left;
position : absolute;
top: 0px;
left: 20px;
height: 50px;
width: 33%;
margin: auto;
}
.footer_middleDIV {
height: 50px;
width: 33%;
margin: auto;
}
.footer_rightDIV {
text-align: right;
position: absolute;
top: 0px;
right: 20px;
height: 50px;
width: 33%;
margin: auto;
}
What is the way to make my divs from horizontal view to vertical when minimizing the browser using css?
I need the divs to become vertically when the browser is minimized and there is not enough width to see them horizontally.
Thanks,
You can use media query to achieve this. For example i have targeted 480 pixels.
#media all and (max-width: 480px)
{
.footer_leftDIV, .footer_middleDIV, .footer_rightDIV
{
width:100%;
position:relative;
text-align:left;
left:0;
}
}
SAMPLE DEMO
you can update your given css with it
.footer_mainDIV {
position: absolute;
width: 100%;
border-top: 1px solid #eeeeee;
margin: auto;
bottom: 0px;
left:20px;
}
.footer_leftDIV {
text-align: left;
height: 50px;
width: 33%;
float:left;
}
.footer_middleDIV {
height: 50px;
width: 33%;
float:left;
}
.footer_rightDIV {
float:left;
height: 50px;
width: 33%;
}
But add it in a relative property div i hope it will work for you.
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child
I would like to center div for QuickSearch with several Q & A but no luck. The div is float left with background image.
HTML
<div class="l-row">
<div class="QuickSearch">
<div class="loop"></div>
<form action=><div class="quickSearchInputName">xxx</div></form>
</div>
</div>
CSS
.QuickSearch {
background: url(/templates/_system/main/images/job-search-bg.jpg) no-repeat top left;
float:left;
width:900px;
height:170px;
display:block;
text-align:center;
margin: 0px auto 0px auto;
}
.loop {
/* background: url(quickSearch.png) no-repeat;*/
width: 10px; height: 135px;
display: block;
float: left;
margin: 0 0 0 2px;
}
l-row {
max-width:942px;
width:100%;
min-width:942px;
text-align:center;
}
Well, you have an element with fixed size here, so I suppose you should follow the classic:
.loop {
width: 10px; height: 135px;
...
position: absolute;
top: 50%;
left: 50%;
margin-top: -67px;
/* taking into account that margin-right: 2px in the original ruleset */
margin-left: -3px;
}
Check this fiddle (had to alter it somewhat, using plain colors instead of images for backgrounds).
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.