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.
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 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
I would like to have my Header Elements stack on top of each other to the right hand side of the screen (H1 element with the H2 element right under it). I am just starting to get a hang of CSS so do bear with me. Tried searching online for solutions but was only able to find an answer for when there was a single element.
Anyways this is what the page is looking like right now on screen:
The blue "We Help People and Businesses" is an H1 Element. The white "Achieve today's Goals and tomorrow's Aspirations" is an H2 Element. Both of these Header elements are nested within a DIV
Currently the CSS code is looking like this:
.hero01_content-div {
margin-top: 400px;
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
How can I make the H2 element stack right under my H1 element with both of these elements on the right hand side? I would appreciate any help. Thank you in advance.
A codepen demonstrating the above can be found here: http://codepen.io/anon/pen/qOoVxb
You need to set float: right to the parent container and remove the floating properties from the heading element as it takes it out of the normal flow.
Codepen Demo
.hero01_content-div {
margin-top: 400px;
float: right; /* Added */
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
<div class="w-section hero-01">
<div class="hero01_overlay">
<div class="w-container hero01_content">
<div class="w-clearfix hero01_content-div hero01_test" data-ix="scroll-reveal">
<h1 class="hero01_content-head-test-main">We Help People and Businesses</h1>
<h2 class="hero01_content-subhead-test-main">Achieve today's Goals and tomorrow's Aspirations</h2>
</div>
</div>
</div>
</div>
OK you need to remove
.hero01_content-div {
margin-top: 400px;
float: right;
}
Then change these
.hero01_content-head-test-main {
postion: absolute;
top: 0px;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
float: right;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
I'm attempting to get the blog posts for this student staff to go left to right and auto wrap to the next line. The problem is that the div blocks will only stay to the left side. Is there something I'm missing in the CSS?
.page_container {
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 20px;
margin-top: 30px;
min-height: 250px;
padding: 0 15px;
position: relative;
width: 700px;
}
.staff_container {
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 20px;
margin-top: 30px;
padding: 0;
position: relative;
width: 300px;
}
Weber State PRSSA Staff Page here
Do you mean like this?
I added these styles:
.post {
float: left;
width: 300px;
}
.staff_container {
width: 100%;
}
The div class circle renders on the right had page but even adding margin:0 auto; nothing works it just stays there what gives.
Here is my html/php
<?php
/*
Template Name: Home Page
*/
?>
<?php get_header(); ?>
<div id="content">
<header>
<h1><span class="tech">TECH</span><span class="basics">BASICS</span></h1>
<h2>Personal Tech Specialists</h2>
</header>
<div class="circle"></div>
</div> <!-- end #content -->
<?php get_footer(); ?>
Here is my css
html {
font-size: 16px;
}
body {
background: #BAE4FF;
font-family: "Open Sans", sans-serif;
}
nav {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
font-weight: 400;
}
nav .menu {
list-style-type: none;
padding: 0;
margin: 0;
}
nav .menu li {
padding: 3px 0 3px 0;
display: none;
}
nav .menu li a {
text-decoration: none;
color: #fff;
font-size: 2.1em;
}
nav .menu .blog {
background: #1669B5;
}
nav .menu .contact {
background: #3892E3;
}
nav #touchNav {
background: #48B4EF;
width: 100%;
display: block;
color: #fff;
font-size: 2.1em;
padding: 3px 0 3px 0;
text-decoration: none;
}
header {
margin: 50px 0 0 0;
margin-top: 50px;
text-align: center;
width: 100%;
}
header h1 {
margin: 0 auto;
width: 100%;
}
header h1 .tech {
color: #fff;
font-weight: 500;
margin-right: 3.5px;
font-size: 1.1em;
}
header h1 .basics {
color: #48B5EF;
margin-left: 3.5px;
font-size: 1.3em;
}
header h2 {
font-size: 2.1em;
font-weight: 100;
width: 100%;
margin: 0 auto;
color: #fff;
line-height: 1.2em;
}
.circle {
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
}
try to add position tag.. u can use fixed as position or relative whatever suits your needs.. to the .circle class.
Your circle class margins are funny.
Try this instead:
.circle {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/1/
One should think that this will work too but trust the first one more:
.circle {
margin: 0 auto;
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/2/
CSS means Cascading style sheets. Cascading means that if one property is defined two or more times for the same element then the property read last is applied. So if you define margin on circle, then again latter in the same style sheet, then again later in a second style sheet with its rel link after the first in the head section, then in the head section itself after the rel links in a style tag, then again inline on the element itself, then the inline value is used. In fact that is the order they are used.
it would be beeter to have an example of page when you ask about css,
but here is the real problem for you
in css margin top does not work as you expect.
its not making a space on the top of your elements unless all the elements be in the same parent z-index (or simpler i mean they all have one parent) i.e all li's within a ul.
the top margin affects space between li's not between li and ul.
for making that you should give the ul a padding-top.
Hope it helps