I am a novice in CSS and I have not yet solved what I am trying to achieve.
I want the items of a horizontal menu to be centered regardless of the monitor resolution. Here is my code:
The HTML semantic:
<body>
<div class="inicio_m"></div>
<div id="menu">
<div id="cab_menu" class="clearfix">
<div class="conteudo_menu clearfix">
Item 1
Item 2
Item 3
Item 4
</div>
</div>
</div>
</body>
This is the CSS format:
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
#cab_menu {
width: 100%;
position: relative;
}
#cab_menu a {
padding: 20px 10px;
float: left;
color: #FFFF40;
}
.clearfix { display: block; }
.conteudo_menu {
width: 100%;
margin: 0 auto;
}
I posted on Fiddle for a more convenient check:
http://jsfiddle.net/nQXd7/
Thanks in advance
Remove the floats and use display:inline-block instead. Then add text-align:center to the wrapping element.
JSFiddle
CSS
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
#cab_menu {
width: 100%;
position: relative;
}
#cab_menu a {
font-size: 12px;
font-weight: bold;
padding: 20px 10px;
display: inline-block;
color: #FFFF40;
}
.clearfix {
display: block;
}
.conteudo_menu {
width: 100%;
margin: 0 auto;
text-align: center;
}
Please remove the unwanted codes in css, try this one in order to make the menus just simply centered.
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
.conteudo_menu {
text-align: center;
}
#cab_menu a {
padding: 20px 10px;
color: #FFFF40;
display: inline-block;
}
Related
I want to align the bottom of my mat icon and that of the img next to it. I've tried multiple things, and this is what it currently looks like:
Here's my HTML:
<div class="container">
<p class="triage"><mat-icon>assignment_ind</mat-icon></p>
<p class="O2"><img src="../../assets/med_O2.png"></p>
</div>
CSS:
.O2, .triage{
display: inline-block;
vertical-align: middle;
}
.container img {
width: 50px;
height: 50px;
}
.container mat-icon{
font-size: 60px;
width: 60px;
}
Use line-height:
.container
{
line-height: 60px; //or what ever height your container is
}
Can you push mat-icon down with a little bit of margin or padding?
.container mat-icon{
font-size: 60px;
width: 60px;
margin-top: 5px;
}
What about something like this?
<style>
.container {
position: relative;
width: 65px;
height: 100px;
}
p.triage {
background: blue;
width: 30px;
height: 40px;
position: absolute;
bottom: 0;
right: 0;
}
p.O2 {
width: 30px;
height: 20px;
background: red;
position: absolute;
bottom: 0;
left: 0;
}
</style>
<div class="container">
<p class="triage"></p>
<p class="O2"></p>
</div>
I have a section where it is to equal columns full width across. if you look a the 2nd column where it says content here if i do 100% on the jscroll-pane it shows horizontal bars, if i give it 98% it works properly but is not full width of the column. not sure why it adds horizontal bars to 100% but not 98%. I am not sure if foundation is causing my issue or not but if i take it out of the column and put in a row the 100% works fine just not in a large-6
html
<section id="component">
<div class="row expanded collapse">
<div class="large-6 column">
<img src="images/image.png">
</div>
<div class="large-6 column">
<div class="jscroll-pane">
Content Here
</div>
</div>
</div>
</section>
css
.jscroll-pane {
display: block;
width: 100% !important;
height: 400px;
max-height: 400px;
overflow: auto;
background-color: #fff;
}
#component {
padding: 0px;
background-color: #fff;
}
jscroll external css file
.jspContainer{
overflow:hidden;
position:relative;
height:100% !important;
width: 100% !important;
}
.jspPane{
position:absolute;
width: 100%!important;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #d8d8d8;
position: relative;
}
.jspDrag
{
background: #000;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
Try this, Remove the display block and change overflow: auto to hidden; I believe this should help you.
.jscroll-pane {
width: 100% !important;
height: 400px;
max-height: 400px;
overflow: hidden;
background-color: #fff;
}
I am trying to create a modal with a fixed header. This was all working fine but we have since added a custom scroll bar in webkit browsers using ::-webkit-scrollbar. When we did this it causes the fixed header to be wider then the modal by the width of the custom scroll.
** edit: this is only an issue when resizing the window/when min-width kicks in **
My understanding is the fixed header is calculating its max width of 90% based on the whole window and the modal is calculating 90% based on the available space not including the scrollbar.
There are two css ways of fixing this that I can think of.
1) figure out if I am just being silly and there is a way of making a fixed element depend on the size of the relative parent.
2) if the body or the parent div of the modal has the pseudo selector add styles.
Sadly the following does not work:
div::-webkit-scrollbar ._common-modal.is-open, body::-webkit-scrollbar ._common-modal.is-open{
width:calc(100% - $scrollbarwidth );
}
Any thoughts?
css :
.modal-overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2);
z-index: 100;
}
div::-webkit-scrollbar ._common-modal.is-open, body::-webkit-scrollbar ._common-modal.is-open {
display: none;
}
._common-modal.is-open {
bottom: 0;
left: 0;
outline: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
right: 0;
top: 0;
padding: 20px 0;
text-align: center;
z-index: 101;
}
._common-modal.is-open.header-detached .modal-header {
position: fixed;
top: -1px;
width: inherit;
max-width: 90%;
}
._common-modal.is-open.header-detached .modal-header:after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 3px;
background: rgba(85, 85, 85, 0.05);
}
._common-modal.is-open.header-detached .modal-content {
margin-top: 50px;
}
._common-modal.is-open:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
._common-modal.is-open .wkModal {
text-align: left;
position: relative;
max-width: 90%;
width: 500px;
z-index: 2;
background: #ffffff;
border: 1px solid grey;
display: inline-block;
vertical-align: middle;
}
._common-modal.is-open .modal-header {
border-bottom: 1px solid grey;
padding: 0 15px;
line-height: 51px;
background-color: #fff;
z-index: 2;
}
._common-modal.is-open .modal-footer {
padding: 0 15px;
line-height: 50px;
}
._common-modal.is-open .modal-title {
font-size: 20px;
text-align: center;
font-weight: 300;
width: 80%;
margin: 0 auto;
}
._common-modal.is-open .modal-close {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
display: block;
background: url(../img/blue_small-x.svg) no-repeat center center;
}
._common-modal.is-open .modal-content {
padding: 10px 15px;
}
._common-modal.is-open .modal-content p {
text-align: center;
}
html:
<div class="_common-modal is-open">
<div class="wkModal">
<div class="modal-header" >
<div class="modal-title">
<span >Large Modal Custom</span>
</div><a class="modal-close"
></a>
</div>
<div class="modal-content" >
<h1 Test Modal Content</h1>
<div>
**content**
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
<li class="row">
<div class="small-6 column center">
<img src="test.jpg">
</div>
<div class="small-6 column center">
<p>hello</p>
</div>
</li>
I wish to make the hello p in the centre (vertically and horizontally) of it's column.
I do this with the styles:
p{
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
The problem is, the second column is not the same height as the first column. How can I make it so that it is?
Here's my styles for columns:
.row{
width: 100%;
float: left;
.column{
width: 100%;
position: relative;
float: left;
display: block;
background: yellow;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
}
.small-1 {
width: 8.33333%; }
.small-2 {
width: 16.66667%;}
.small-3 {
width: 25%;}
.small-4 {
width: 33.33333%; }
.small-5 {
width: 41.66667%; }
.small-6 {
width: 50%; }
.small-7 {
width: 58.33333%; }
.small-8 {
width: 66.66667%; }
.small-9 {
width: 75%; }
.small-10 {
width: 83.33333%; }
.small-11 {
width: 91.66667%; }
.small-12 {
width: 100%; }
}
.pull-left{
float: left;
}
.pull-right{
float: right;
}
.center{
text-align: center;
}
you can do something like
.small-6 {
line-height: 60px;
}
or like this
.small-6 {
height: 60px;
}
change 60 to whatever works for you
You have a couple of options here.
Use JS to create equal height boxes - Foundation has an example of that here
Make the row "cleared" and stretch the text box to the top and bottom of it like this:
.box-content{
position: absolute;
top: 50%;
left: 50%;
margin: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
}
http://jsfiddle.net/ga24a/3/
Now its rather fragile when the text becomes larger - it cannot force the row container to be larger, only the img box can.
Use the new hyper super duber FLEX :D
http://jsfiddle.net/3n7Dj/1/
.row {
display: flex;
align-items: center;
...
}
I am trying to crate a vertically centered dialog with variable height. I'm using a technique with span element with height: 100% and vertical-align:middle within the container.
Now the dialog box has a max-height:80% set on it so that it doesn't take up the entire height of the container if it becomes small. When the container becomes small, the content are becomes smaller as well but I cannot get the content area to become scrollable when this happens..
Here is a simplified version in a fiddle.
HTML:
<div id="main">
<div id="overlay">
<span id="mickey-mouse"></span>
<div id="overlay-inner">
<div id="overlay-title">Title</div>
<div id="overlay-content">
<div id="content">MAKE ME SCROLL!</div>
</div>
</div>
</div>
</div>
CSS:
body, html {
position: relative;
width: 100%;
height: 100%;
position: relative;
background: yellow;
padding: 0;
margin: 0;
}
#main {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: aboslute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
}
#mickey-mouse {
display: inline-block;
height: 100%;
width: 0;
margin-right: -0.25em;
vertical-align: middle;
}
#overlay-inner {
text-align: left;
display: inline-block;
vertical-align: middle;
max-height: 80%;
max-width: 300px;
width: 80%;
background: white;
overflow: hidden;
}
#overlay-title {
padding: 1em;
height: 14px;
background: #eee;
}
#overlay-content {
padding: 1em;
/* HOW TO MAKE THIS SCROLLABLE? */
}
Here goes your fiddle code
fiddle
Here's the modified css
body, html {
position: relative;
width: 100%;
height: 100%;
position: relative;
background: yellow;
padding: 0;
margin: 0;
}
#main {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: aboslute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
}
#mickey-mouse {
display: inline-block;
height: 100%;
width: 0;
margin-right: -0.25em;
vertical-align: middle;
}
#overlay-inner {
text-align: left;
display: inline-block;
vertical-align: middle;
max-height: 90%;
height: 90%;
max-width: 300px;
width: 80%;
background: white;
overflow: hidden;
}
#overlay-title {
padding: 1em;
height: 5%;
background: #eee;
}
#overlay-content {
padding: 1em;
max-height: 80%;
overflow:auto;
}
Please try and let me know
EDIT:
three things have been done .
added overflow visible for content div. added overflow-auto for overlay-content
and set the height and width of overlay-inner, overlay-content in percentages