I'm having some trouble centering a text inside a div. The text, "Project description" is a little bit longer than the other options so it is displayed on two lines.
Here's the code responsible for this:
.left-menu {
float: left;
width: 109px;
margin-right: 33px;
}
.left-menu .button {
width: 108px;
height: 64px;
background-color: #E6E6E6;
margin-bottom: 32px;
text-align: center;
}
.left-menu .button a {
font-size: 18px;
font-weight: bold;
line-height: 64px;
color: #00359F;
text-decoration: none;
}
And here here is the fiddle.
How can I make the word "description" to be displayed right bellow the word "Project"?
Thank you!
Update these rules in your CSS file:
.left-menu .button {
width: 108px;
background-color: #E6E6E6;
margin-bottom: 32px;
text-align: center;
padding: 20px 0;
box-sizing: border-box;
}
.left-menu .button a {
font-size: 18px;
font-weight: bold;
color: #00359F;
line-height: 1.2em;
text-decoration: none;
}
I've changed the line height on the a and removed the fixed height on the button too as it's better to achieve what you're after with padding. See this link for a working version https://jsfiddle.net/sukky4r3/2/
I've updated your fiddle to match what you want.
All you'll have to do is still adjust the line-height property on the .left-menu .button a to match the exact spacing you want, I've set it to 30px to make it look 'alright' for now.
The way this works is by using tables, make the .left-menu .button display: table; and it's child .left-menu .button a display: table-cell; with vertical-align: middle; and it will center multiple lines vertically.
Your CSS will look like this
.left-menu .button {
width: 108px;
height: 64px;
background-color: #E6E6E6;
margin-bottom: 32px;
text-align: center;
display: table; // make the display table here.
}
.left-menu .button a {
font-size: 18px;
font-weight: bold;
line-height: 30px; // adjusted line-height so that multiple lines fit in one menu.
color: #00359F;
text-decoration: none;
display: table-cell; // child has to be table-cell
vertical-align: middle; // this vertically centers the text
}
fiddle here
css tricks article on the subject here
Related
When I hover my link normally it turns to green. However there is also red showing up around the link. I don't understand.
.myButtonRegister{
float: left;
background-color: #C22312;
height: 48px;
width: 168px;
text-align: center;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.myButtonRegister a {
color: #f2f2f2;
text-decoration: none;
}
.myButtonRegister a:hover {
background-color: green;
color: black;
}
Thanks
As the size of <a> link tag is size of the content it contains, so the background doesn't cover the entire parent element which it has a larger size.
You can force the link to have the same size as the container by adding:
.myButtonRegister a {
display: block;
width: 100%;
height: 100%;
...
}
.myButtonRegister {
float: left;
background-color: #C22312;
height: 48px;
width: 168px;
text-align: center;
font-family: 'Pridi', serif;
font-size: 26px;
line-height: 48px; /* added */
/* padding-top: 10px; */
word-spacing: 0px;
}
.myButtonRegister a {
color: #f2f2f2;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.myButtonRegister a:hover {
background-color: green;
color: black;
}
<div class="myButtonRegister">Sample text</div>
I would suggest to get rid of the div container but only use the link tag.
.myButtonRegister {
display: inline-block;
height: 48px;
width: 168px;
font-family: 'Pridi', serif;
font-size: 26px;
line-height: 48px;
text-decoration: none;
text-align: center;
background-color: #C22312;
color: #f2f2f2;
}
.myButtonRegister:hover {
background-color: green;
color: black;
}
<a class="myButtonRegister" href="#">Sample text</a>
When hovering the <a> tag you are also triggering the hover on its parent element .myButtonRegister. Your html can be simplified from this:
<button class="myButtonRegister">
REGISTER
</button>
to this:
<a class="myButtonRegister">REGISTER</a>
Then trigger a hover animation on class myButtonRegister. Because both button tag and a tag can be used to render a button.
I'm trying to align vertically a text block. I have a :before pseudo-element and what I'd like to achieve is having both aligned to the middle.
Is it possible to achieve it without extra wrapper? Here's what my problem looks like:
HTML:
<div class="fail">Something's wrong</div>
<div class="success">
<span>Perfect middle</span>
</div>
CSS fail:
.fail
{
background: orange;
font-size: 30px;
display: inline-block;
}
.fail:before
{
background: red;
content: '✗';
text-align: center;
display: inline-block;
line-height: 60px;
margin-right: 10px;
vertical-align: middle;
width: 60px;
}
CSS success:
.success
{
font-size: 30px;
background: lime;
display: inline-block;
}
.success:before
{
background: green;
content: '✓';
text-align: center;
display: inline-block;
line-height: 60px;
margin-right: 10px;
vertical-align: middle;
width: 60px;
}
.success span {
vertical-align: middle;
}
It might be not so obvious from this picture, but the left one is too high, about 2-3 pixels of difference. It matters especially for smaller elements.
So my question is: can I achieve perfect middle with just one HTML tag + :before?
Because I dont like inline elements that much, I would do it like this:
.fail {
position: relative;
float:left;
padding-right: 10px;
line-height: 60px;
font-size: 30px;
background: orange;
}
.fail:before {
content: '✗';
display: inline-block;
width: 60px;
margin-right: 10px;
text-align: center;
background: red;
}
I'm having difficulty lining up my checkboxes (under Weeks) with the other sections of my form (namely 2. Date & Time). In addition to this, I can't seem to get text to the right of the checkbox, it always seeems to appear underneath. How can I resolve this?
Here is my fiddle: http://jsfiddle.net/4YMaQ/2/
Code
label {
width: 8em;
float: left;
text-align: left;
display: block;
}
select {
width: 70%;
}
.slider, .slider2 {
width: 100%;
margin-top: 5px;
}
input {
border: none;
font-family: 'Segoe UI', arial, helvetica, sans-serif !important;
font-size: 14px;
padding: 0px;
background-color: transparent;
}
.clear {
clear: both;
}
.w50 {
width: 50%;
}
.weeks fieldset {
border: none;
outline: none;
}
.weeks fieldset > legend {
float: left;
margin-right: 3.8em;
}
.weeks fieldset .item {
overflow: hidden;
margin: 0;
padding: 0;
}
.weeks fieldset label {
float: none;
display: inline-block;
vertical-align: top;
}
.left {
float: left;
outline: none;
}
fieldset span {
display: inline-block;
width: 12em;
}
.weeks fieldset span {
display: inline-block;
width: 2em;
}
.request_heading {
font-size: 18px;
font-weight: bold;
}
.page {
padding-left: 20px;
font-family: 'Segoe UI', arial, helvetica, sans-serif;
padding-right: 20px;
font-size: 14px;
}
Your spans are 2em (you seem to have overwritten your 12em on the line below) where as your labels are 8em which is why they are wrapping onto the next line if you change your
if you change your spans to 3.5em and your labels to 1.5em you will get the following:
.weeks fieldset label {width:1.5em}
.weeks fieldset span {width:3em;}
http://jsfiddle.net/4YMaQ/6/
if you change your right margin on your legend you can fit five on a line:
.weeks fieldset > legend {margin-right:1.1em;}
Now just define your class .weeks fieldset span text-align:center; and
Define your .weeks fieldset label with:auto;
as like this
.weeks fieldset span{
text-align:center;
}
.weeks fieldset label{
width:auto;
}
Demo
Adjust the width of the .weeks fieldset, you force the checkboxes to go under weeks :)
.weeks fieldset {
border: none;
outline: none;
width: 50px;
}
It did not work anymore because other things changed, this is what you have to do:
.weeks fieldset .item {
margin: 0;
padding: 0;
width: 40px;
}
Remove overflow hidden and add a width to this field.
.weeks fieldset {
border: none;
outline: none;
width: 124px;
}
The width i provided might not be the width you want, adjust to your own needs :)
I changed the structure of your HTML to match your needs, I removed all the labels after the inputs.
Here's the fiddle, let me know if it's good enough for you.
Just Use display: inline-block; to your item class It works. Demo
Changing the display of your .item-Elements to inline-block should do the trick.
.weeks fieldset .item {
display: inline-block;
overflow: hidden;
margin: 0;
padding: 0;
}
here my website
http://maximearchambault.com/index.php/contact/
My question is regarding one of my headings.
I use it for the main title of the page, contact / info
My problem is the block is not a line with the text.
I will like that the text will be centered with the cyan block
h2 { font-size: 30px;
font-weight: bold;
background: #00FFFF;
width: 600px;
HEIGHT: 33px;
display: block;
}
add line-height:33px; to your h2 {... }
h2 { font-size: 30px;
font-weight: bold;
background: #00FFFF;
width: 600px;
HEIGHT: 33px;
display: block;
line-height:33px;
}
You can change your css to:
h2{
background: none repeat scroll 0 0 #00FFFF;
display: table-cell;
font-size: 30px;
font-weight: bold;
height: 33px;
vertical-align: middle !important;
text-align:center;
width: 600px;
}
You may try something like;
h2 {
font-size: 30px;
font-weight: bold;
background: #00FFFF;
width: 600px;
display: block;
padding-top: 2px;
padding-bottom: 2px;
}
Here is the working Live Demo.
h2 {
background: none repeat scroll 0 0 #00FFFF;
font-size: 30px;
font-weight: bold;
height: 33px;
line-height: 33px;
text-align: center;
width: 600px;
}
1. Remove the properly "display: block" from h2 class properties because h2 is block element
2. Add a property - "text-align: center"
Just change:
display: block;
to:
display: inline;
Also remember that CSS is case-sensitive so HEIGHT is not a valid property.
Newbe question here.
When I do a mouse-over on a menu item then only fixed region is highlighted. The problem is that the next item on the menu consists of 2 long words and hover doesn't cover it all, only a part of it.
Here is the code that makes it happen:
navlist {
margin-left: -3px;
padding-left: 0px;
white-space: nowrap;
position: absolute;
height: 26px;
width: 777px;
top: 225px;
background: url(images/mb2.jpg) repeat-x top left;
font-family: Arial;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist li a {
padding: 3px 10px;
height: 20px;
width: 91px;
display: inline;
position: absolute;
text-align: center;
color: #FFF;
text-decoration: none;
margin-top: 5px;
}
#navlist li a span {
padding: 3px 10px;
height: 20px;
width: 71px;
display: inline;
position: absolute;
text-align: center;
color: #FFF;
text-decoration: none;
margin-top: -5px;
font-weight: bolder;
}
#navlist a:hover {
background: #0687eb;
height: 10px;
cursor: pointer;
}
Is it something that can be fixed (covering both words of menu item? I tried playing with width: 91px; value - the problem is that it can increase the area of being covered but hten it becomes to long and infringes on other menu items when you cover the first one)
Thanks.
Ideally I would like to highlight text only (letters of the text) - but not sure if it;s possible at all to do that for 2-words items)
Thank you.
Is your link in two lines of text and second line can not be hovered?
If so, try to remove height from #navlist li a span. this may help, but can also break layout.