I am trying to build a sidebar with centered vertical elements like this design:
I couldn't figure it out after 2 hours so I decided to ask you guys if somebody could help me since I can't find any good links that can provide helpful information.
I think I am doing something wrong in the following sidenav class:
.sidenav {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #16191C;
position: fixed;
top: 0px;
width: 150px;
height: 100%;
color: #e1ffff;
}
Check JsFiddle.
First the a href must be inside the li element..
use flexbox.
ul {
position: fixed;
z-index: 1;
top: auto;
bottom: auto;
left: 0;
/*right: 0;*/
margin: auto;
height: 100%;
width: 100%;
padding: 50px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
ul li {
display:block;
width:100%;
}
Try this updated fiddle
OK try this
with more elements
Related
Here is the code.
The text align wont work.
html {
position: fixed;
top: -50px;
background-color: #c4f3ff;
}
div {
width: 100%;
height: 50px;
text-align: center;
}
h1 {
font-family: monospace;
line-height: normal;
color: #fffb29;
font-size: 50px;
position: fixed;
top: -20px;
}
Here is a screen shot of the result
You mean the yellow text need to be align to center/right or somewhere?
If so, you just use:
h1{
width:100%;
text-align:center;
}
In your css file you marked your html (??) and all your divs with
position: fixed;
Position fixed elements will need a width as well. add
width: 100%;
or
width: 100vw;
So it can center your text.
I am trying to add a text overlay to my images, but I am struggling making it responsive, and vertically centered.
Here is where I got : http://jsfiddle.net/r8rFc/910/
.img-overlay {
position: relative;
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(41,128,185,0.9);
color: #fff;
}
.centered-text
{
display:table;
height:100%;
width:100%;
text-align:center;
vertical-align:center;
}
I am able to center the text horizontally, but I cannot make it vertically... I really have no clue how to do that. All I checked was either non responsive, or it was just a logo at the center of the overlay...
Thanks !
Thanks to Henrique Barcelos, I have been able to solve the issue.
Here is the fiddle giving the solution : http://jsfiddle.net/r8rFc/912/
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(41,128,185,0.9);
color: #fff;
display:flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
How about setting
.project-overlay as such
.project-overlay {
position: absolute;
top: 45%;
left: 0;
text-align: center;
width: 100%;
background-color: rgba(41,128,185,0.9);
color: #fff;
}
With this you can try setting a wrapper div to set the background color to whatever color it is that you want
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 trying to make a sidebar and this is what I'm expecting:
Header fixed top and Footer fixed bottom ( I don't know if 'fixed' is the right term, but I want them not to overlap the sidebar container )
Scrollable sidebar-container
I tried to play with position of the div but it didn't work.
I also tried sticky footer's approach and It didn't work so well.
I tried googling my problem, but most answers are the whole layout of the website.
I need it working inside my sidebar.
Here's my: jsFiddle
The code is kinda long so I'm just gonna post the CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#push, #footer {
height: 60px;
}
.container-fluid {
width: 100%;
height: 100%;
}
#content {
position: absolute;
width: 100%;
bottom: 60px;
top: 42px;
right: 0px;
left: 0px;
padding: 0px;
}
#sidebar {
position:absolute;
width:300px;
height:100%;
}
#sidebar .ul-menu {
margin:0px;
}
#sidenavbar .tabs-left>.nav-tabs>li>a{
margin: 0px;
min-width: 30px;
width: 70px;
-webkit-border-radius: 0px 0 0 0px;
-moz-border-radius: 0px 0 0 0px;
border-radius: 0px 0 0 0px;
border: 0px;
}
.sidebar-tab-content {
background: #FFF;
position: absolute;
height: 100%;
left: 94px;
width:100%;
}
#sidenavbar .tabs-left>.nav-tabs {
border: 0px;
}
#footer {
color: #FFF;
background-color: #666;
}
.side-header, .side-footer {
background: #AAF;
}
h2 {
margin: 0px;
}
Thanks for the ideas. I solve my problem just now by adding these css codes:
.side-header {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
}
.side-container {
position: absolute;
bottom: 40px;
top: 40px;
overflow-y: auto;
}
.side-footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
Here's the JSFiddle: http://jsfiddle.net/geddemet/XCn7C/
This community is really helpful. Cheers!
I use this for my footer. it works for me, the header and footer stay in the same place and the footer will expand if the content with the scroll bar gets bigger. As for the box with the scroll bar, I believe you need to have something like overflow:hidden in the CSS for the box that you want to have a scroll bar on.
You can apply overflow: auto to your content div.
See this minimal example of how it would work.
Take a look at my sample
sample
It was not good when you set place the side bar and right content into position absolute. Your design should have to get you in trouble if right content is not predictable and make more custom on it.
.sidebar-tab-content {
background: #FFF;
width: 100%;
height: 500px; /*you could change it to 100% depend your need*/
}
Edited: Please look inside my jsfiddle sample code instead, the above proportion of CSS which I placed here was just small one of the changes
Your looking for position: fixed
FIDDLE Full screen Normal Fiddle
CSS:
.side-header{
background: #AAF;
position: fixed;
width: 100%;
}
.side-footer {
background: #AAF;
position:fixed;
bottom:60px;
width: 100%;
}
But you are going to have to play around with the width's because it's taking the container width div.
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.