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).
Related
I want to display a dashboard using a card layout. Ideally, I want to achieve the following layout.:
HTML File:
<div id="overallCanvasWrapper" class="statistic-container">
<p ng-show="emptyAlltimeStats">No data available for given filters</p>
<div ng-show="!emptyAlltimeStats">
<div class="header-piechart">Pie Chart</div>
<canvas id="pieCombined" class="chart chart-pie" chart-data="combinedData" chart-labels="labels" chart-options="options"
chart-colours="colours">
</canvas>
<div class="chart-legend">
<ul>
<li class="blue">Blue</li>
<li class="red">Red</li>
</ul>
</div>
</div>
</div>
CSS file:
canvas{
width: 100% !important;
max-width: 450px;
height: auto !important;
}
.statistic-container {
padding: 10px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
padding-left: 5px;
padding-right: 5px;
height: 340px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: rgba(240,240,240,0.8);
background-blend-mode: soft-light;
}
.blue:before { background-color: #00aef3; }
.red:before { background-color: #d8171e; }
.chart-legend li:before {
display: block;
width: 5px;
height: 16px;
position: absolute;
left: 0;
top: 3px;
content: "";
}
However, I want to place chart-legend in the center (horizontally and Vertically) of the remaining part of the card even when the window is resized. How can I achieve that?
give the canvas element a fixed width (ex: width=300px) and use the rules margin:auto; for example:
canvas{
width: 200px;
margin-left: auto;
margin-right:auto;
}
.!emptyAlltimeStats{
text-align:center;
}
achieve centre alignment of div using position: absolute;
canvas{
width: 100% !important;
max-width: 450px;
height: auto !important;
position: relative;
}
.statistic-container {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
}
So, I have a main container that shows like the following:
I want to be able to adapt the parent div to the number of child's it receives. Let's say we remove div2. The result should be something like this:
Instead, the parent div does not stretch to the width of the div child's
Here's my code:
HTML:
<div class="main-container">
<!-- Card container -->
<div class="card-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
</div>
<!-- Footer container -->
<div class="footer">i am a footer</div>
</div>
CSS:
.main-container {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 400px;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
}
.card-container {
color: #3B3D3D;
height:105px;
float: left;
width: 100%;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
float: left;
width: 100%;
}
.card {
width:100px;
float:left;
}
What am I doing wrong here? I've tried the display: inline-block; solutions out there but since the parent div must be fixed to the bottom, I am not seeing the desired result.
Any help will be precious.
Thanks in advance.
Try this https://jsfiddle.net/2Lzo9vfc/136/
You can try to remove one .card on click and see what hapens here https://jsfiddle.net/2Lzo9vfc/138/
CSS
.main-container {
position: fixed;
margin: 0 auto;
left: 50%;
bottom: 0;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
display: inline-block;
transform: translateX(-50%);
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
width: 100%;
}
.card {
width:100px;
height:105px;
display: inline-block;
}
HTML
<div class="main-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
<div class="footer">i am a footer</div>
</div>
Here you go: http://codepen.io/n3ptun3/pen/PPgWNb
You don't need to use display: inline-block.
I've left your HTML alone, and simplified some of your CSS: .card-container and .footer don't need float: left; and width: 100%;. They are both block-level elements so they will take up 100% of the width, and they don't need anything to wrap around them.
On the .main-container, you can't set margin: 0 auto; and position: fixed;. position: fixed; removes the ability for centering via margin. left: 0; and right: 0; were stretching the size of the main container, so those need to be removed. width: 100%; and max-width: 400px; were trying to fix the width issue, but that wouldn't allow resizing based on content.
Instead you need to set left: 50%; (places left edge of element at 50% of the parent's width, i.e. the viewport width, in this case) and then transform: translate(-50%); to bring the element back toward the left by 50% of its width. Thus bringing the element to the center of the window/viewport.
Now, if you remove one of the "cards," it will resize the "main-container," while keeping everything fixed to the bottom and centered.
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
}
.card {
width: 100px;
float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
EDIT: Based on your new information (re: the increased width or added "cards"), I've found that the issue lies with the left position on the .main-container. When you position the element by 50% and its width is more than 50% of the parent, it runs into the right side of the parent div, and you get the stacking. To fix this, you can instead remove the float: left; on .card and add display: flex; on .card-container. This will allow you to increase the width of the "cards" while keeping them from stacking.
I've updated the code here: http://codepen.io/n3ptun3/pen/PPgWNb
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
display: flex;
}
.card {
width: 100px;
// float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
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%);
}
I'm attempting to make a header with the div's centered with a logo in the middle. With the Logo div hanging over, which I've successfully done. I can not however figure out how to place the logo div in the middle of the link divs for the life of me.
Any help would be appreciated, google searching hasn't gotten me any luck, but I'm not sure I know what to search for. I'm not good at making things look pretty normally :(
Page Layout:
Header (overlay)
Content (z-index: -1)
Image of site without a float declared on .headerLogo
Image of site with float: left declared on .headerLogo
html:
<div class='header'>
<div class='headerLink'>Home</div>
<div class='headerLink'>Contact</div>
<div class='headerLogo'></div>
<div class='headerLink'>Menu</div>
<div class='headerLink'>Connect</div>
</div>
<div class='content'>
</div>
css:
*{
margin: 0;
}
body,html{
background-color: #000;
color: #FFF;
text-align: center;
font-family: calibri;
height: 100%;
overflow:auto;
}
.header{
top:0;
height: 100px;
line-height: 100px;
width: 100%;
display: inline-block;
border-bottom: lime 10px solid;
margin:0;
position: static;
background-color: #000;
font-size: 24px;
}
.headerLink{
display: inline-block;
float: center;
margin-left: 60px;
margin-right: 60px;
margin-top: 0px;
margin-bottom: 0px;
}
.headerLogo{
display: inline;
float: left;
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
margin-left: auto;
margin-right: auto;
background-color: lime;
color: lime;
width: 200px;
height: 200px;
line-height: 100px;
}
.content{
z-index: -1;
float: left;
text-align: center;
min-height: 100%;
width: 100%;
margin-top: -110px;
margin-bottom: -50px;
background-color: #333343;
}
You've got a couple ways to go about this. I think the easiest way is to use a fake placeholder to make the horizontal space between menu items in the middle, then have the logo be absolutely positioned on top.
HTML:
<div class='header'>
<div class='headerLink'>Home</div>
<div class='headerLink'>Contact</div>
<div class='headerLogo'></div>
<div class='headerLink headerLogoFake'></div>
<div class='headerLink'>Menu</div>
<div class='headerLink'>Connect</div>
</div>
<div class='content'>
</div>
CSS:
.headerLogo{
display: inline;
float: left;
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
background-color: lime;
color: lime;
width: 200px;
height: 200px;
line-height: 100px;
position:absolute;
top:0;
left:50%;
margin-left:-100px;
}
.headerLogoFake {
width:200px;
}
As you probably know, if you just leave it as you have, without the float, it'll be in the middle, but it'll push the green bottom border down. This will place a fake empty thing in the middle, but at the same height as the menu items, so won't push it down. It'll add the logo in on top.
Working Fiddle
.headerLogo{
position:absolute;
display: inline;
float: left;
left 50%
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
margin-left: -50px;
margin-right: auto;
background-color: lime;
color: lime;
width: 100px;
height: 100px;
line-height: 100px;
}
Your mark-up provided did not produce the result you were looking for, so I applied the bare minimal styling to accomplish what you are asking for.
Most importantly float:center; does not exist.
If you give elements a property of display:inline-block;, then you can use text-align:center; around the container to center all of the elements.
.header {
text-align:center;
}
.headerLink {
display:inline-block;
padding:10px;
}
.headerLogo {
display:inline-block;
height:100px; width:100px;
background:red;
margin:0px 10px;
}
Then, to line them up with your logo, vertically, give them a vertical-align:top property and set the margin to near half the width of the logo
http://jsfiddle.net/5V29a/1/ - UPDATED DEMO
I have a fixed header on my page, inside the header is an image. Id like it to stay in place when the window is resized.
I have tried different positioning tags and wrapper divs, but i must not be doing something right.
My CSS is as follows
.header {
background: url("#") repeat-x scroll left top transparent;
height: 70px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headbar {
position:fixed;
z-index: 99999;
left:0px;
top:0px;
height:50px;
width:100%;
background:#273D90;
padding-top: 10px;
box-shadow: 0 0 50px 0;
}
#headbar img {
display: block;
text-indent: -9999px;
left: 5%;
overflow: hidden;
/*margin: 0 0 0 5%;*/
position: fixed;
float: left;
}
.imgwrap{
float: left;
position: absolute;
}
#logo {
float: left;
margin-right: 50px;
margin-top:25px;
}
and my HTML is
<div class="header">
<div id="headbar">
<div class="imgwrap">
<img alt="logo" src="images/whitelogo.png" height="50" width="100">
</div>
</div>
</div>
Your header is 100% of the width of the page. Your image is positioned with left: 5%. That is 5% of the width of the header. Since the header resizes when the window does, this 5% changes. Use a fixed value with px or em and it will not move.
http://jsfiddle.net/vfvxE/
#headbar img {
display: block;
text-indent: -9999px;
left: 5%; /* <-- % is relative */
overflow: hidden;
/*margin: 0 0 0 5%;*/
position: fixed;
float: left;
}
You will have to use NOT relatives units to achive what you want. Try using Absolute lengths units: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units