Hi in the below code logo and text was not displaying. when I am adding the style to vertical-align:center.I want image and text should me center
Any one help me
.logo{
display:inline-block;
}
.logo a {
font-size: 3em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #fff;
font-family: "Roboto Slab", serif;
}
.logo a img{
vertical-align:middle;
}
.logo p {
color: #000;
text-transform: uppercase;
font-size: 1.2em;
margin-top: -10px;
display:inline-block;
}
<div class="logo">
<img src="images/logo_sml.jpg">
<p>Newton Public School<br>
Kanaka Nagar-Rt Nagar<br>
Reach Out, Reach High, Reach Beyond</p>
</div>
Update log class like this:
.logo{
text-align: center;
display:inline-block;
width:100%;
}
For horizontal align change logo style to:
.logo {
display: block;
text-align: center;
}
And HTML to:
<div class="logo">
<p><img src="images/logo_sml.jpg"></p>
<p>Newton Public School<br>
Kanaka Nagar-Rt Nagar<br>
Reach Out, Reach High, Reach Beyond</p>
</div>
If you want to center the div only horizontally, simply put the .logo div inside a center element, like this: <center><div class="logo">...</div></center>.
If you want to center it both horizontally and vertically, try out this answer of a very old question.
Modify it
.logo{
text-align: center;
display:inline-block;
width:100%;
}
.logo a {
font-size: 3em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #fff;
font-family: "Roboto Slab", serif;
padding-left: 50%;
}
.logo a img{
vertical-align:middle;
}
.logo p {
color: #000;
text-transform: uppercase;
font-size: 1.2em;
margin-top: -10px;
display:inline-block;
}
<div class="logo">
<img src="images/logo_sml.jpg">
<p>Newton Public School<br>
Kanaka Nagar-Rt Nagar<br>
Reach Out, Reach High, Reach Beyond</p>
</div>
Related
I have a logo/home button for my webpage which is the abbreviation of my project (the temp letters I use are ABCDEF). I am using Arial for the font (although may change it later). As you can see from the photo of the logo, the letters do not completely align under each other.
I've tried font-kerning: none; which helps but does not completely make it do what I want it to do.
I've made a jsfiddle for this example and here's the link: https://jsfiddle.net/7dfetxto/
Otherwise, here's my code (same as in the jsfiddle):
HTML
<div id="logo">
<a href="#">
<h1>ABC</br>DEF</h1>
</a>
</div>
CSS
#logo{
font-family: "arial", "times", "sans-serif";
width: 128px;
height: 100%;
background-color: #336699;
float: left;
}
#logo a{
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}
#logo h1{
margin: 0px;
padding: 26px 30px;
text-align: center;
text-transform: uppercase;
font-kerning: none;
display: block;
color: white;
}
My goal is to get the letters on the second line to fall directly under their respective letter on the first line.
Thank you.
letter-spacing
Use CSS letter-spacing property.
JSfiddle.
#logo {
font-family: "arial", "times", "sans-serif";
width: 128px;
height: 100%;
background-color: #336699;
float: left;
}
#logo a {
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}
#logo h1 {
margin: 0px;
padding: 26px 30px;
text-align: center;
text-transform: uppercase;
font-kerning: none;
display: block;
color: white;
}
.h1b {
letter-spacing: 3.25px;
}
<div id="logo">
<a href="#">
<h1>ABC<br><span class="h1b">DEF</span></h1>
</a>
</div>
You might find this interesting: kerningjs
There are more possible ways. One is
font-size
By making the font-size of the second line (in this case) bigger, it will grow and reach the two sides of the first line: JSFiddle.
I want this layout:
So I tried this:
<h2>Make search awesome using Open Source</h2>
.banner .section_title h2 {
font-family: "Oswald", Arial, sans-serif;
font-size: 5em;
line-height: 1.4em;
text-transform: uppercase;
overflow: hidden;
text-align: center;
display: inline;
padding: 0 30px;
background: #176072;
}
But I am getting this result:
So, I want to add that padding (the red circle). How can I do that?
For the responsive design, I want this result:
Here's one solution. Wrap the components that you want on separate lines with a span or div element. This will you to style the sections of text independently but keep the full text within a heading tag.
<h2><span>Make Search Awesome Using</span> <span>Open Souce</span></h2>
h2 span {
font-family: "Oswald", Arial, sans-serif;
font-size: 3em;
line-height: 1.4em;
text-transform: uppercase;
padding: 0 30px;
background: #176072;
color: #FFFFFF;
display: inline-block;
}
h2 {
background-color: #062949;
padding: 25px;
text-align: center;
}
jsFiddle: http://jsfiddle.net/vcpo5rmj/
Note: This is not a complete responsive solution.
To dynamically keep the padding on your text you need to use the CSS outline property:
body {
background-color: #033569;
}
.container {
text-align: center;
}
h2 {
display: inline;
text-transform: uppercase;
background-color: #176684;
color: white;
font-family: sans-serif;
outline: 5px solid #176684;
}
<div class="container">
<h2>Make search awesome using Open Source</h2>
<p>Click Full Page button then resize the browser</p>
</div>
Or view the example and adjust the container width in this fiddle.
Container width at 200px below:
Oh just use CSS3 box shadows to emulate the padding on either side of each line:
body {
font-family: Arial, sans-serif;
color: #FFFFFF;
background-color: #003366;
}
.section_title {
text-align: center;
}
.section_title h2 {
display: inline;
font-size: 3em;
background: #176072;
box-shadow: -.5em 0 #1D758C, .5em 0 #1D758C;
}
<div class="section_title">
<h2>Make search awesome using Open Source</h2>
<p>A different color box-shadow is used for illustration.</p>
</div>
best i could do https://jsfiddle.net/tonytansley/91j10osv/3/ - not responsive sorry
<div class="banner">
<div>
<h2>Make search awesome using</h2>
<h2>Open Source</h2>
</div>
</div>
<hr/>
<div class="banner">
<div>
<h2>Make search awesome using <br/>
Open Source</h2>
</div>
</div>
<hr/>
<div class="banner">
<div>
<h2>Make search awesome using<em></em><br/>
<em></em>Open Source</h2>
</div>
</div>
css
.banner div{
text-align:center;
}
.banner h2, .banner p{
font-family:"Oswald", Arial, sans-serif;
font-size: 2em;
line-height: 1.4em;
text-transform:uppercase;
text-align:center;
display: inline;
padding: 0 30px;
background: #176072;
color:white;
}
.banner h2:first-of-type{
margin-bottom:0.2em;
}
em{
width:30px;
display:inline-block;
}
try this
html code...
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="holder">
<h2> Make search awesome using </h2>
<h2> Open Sources </h2>
</div>
</body>
</html>
css code
body{
margin:0;
}
div.holder{
width:auto;
height: auto;
text-align: center;
}
div.holder h2{
font-family:"Oswald", Arial, sans-serif;
font-size: 4.5em;
text-transform:uppercase;
background: #176072;
display: inline;
line-height: 80px;
}
I have a CSS greybox: (When I say greybox, I mean the CSS box I have created that I have made with the color grey as you can see down below.)
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
}
This greybox is inside of my header and since this greybox is bigger than it appears, it goes past the header image but doesn't appear.
With this:
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<img id="mailpicture" src="images/gmail.png">
<h1 id="mailtext">Mail Us</h1>
<h1 id="nava">test</h1>
</nav>
</div>
</a>
</div>
The picture and Mail Us show in the correct position not exposing the box. The test however, when I put it in exposes the box.
Here is the CSS I have behind this
#mailtext
{
margin-top: 20px;
display: inline-block;
margin-left: 1230px;
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
float: right;
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
margin-left: 500px;
}
You already saw the box for CSS.
I would like to accomplish either one of two things: Make the CSS box smaller and lower it, or have the CSS correctly position the test along with more elements to stay in the same line as the Mail Us.
NOTE: I have tried for the test margin-top:-pixels, this does not go up high enough and stops going up after a while.
This is what it looks like with the test:
This is what it looks like without the test:
As you can notice the first one has a larger box that drops down beneath the header picture. The one without the test has stayed in the header's picture.
There are a few problems with your code.
First, you should not nest anchors (<a>) in other anchor elements.
Using margin to position elements is not a good idea, you are already trying to use inline-block to change default block display of headers and at the same time you are floating one of your inline-block elements to the right.
Adding big margin to the element makes the element use more space and moves next inline element to the new line if it cannot fit in one line with other elements.
If you want to position all your menu items to the right you can use text- align:right on your inline-block elements to stick them to the right.
If you want your mail element be on the right you may stick to using float:right on it, but it would also be easier to just place mail element as the last one in the nav
You can nest anchors <a> inside headers <h1> to create links inside headers
<h1 id="mailtext">Mail Us <img id="mailpicture" src="images/gmail.png"></h1>
http://jsbin.com/kazocekoba/1/
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
text-align: right;
}
#mailtext
{
margin-top: 20px;
display: inline-block;
/* margin-left: 1230px;*/
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
float: right;
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
/*margin-left: 500px;*/
}
/* use padding to separate your navigation elements */
.navigation > * {
padding-left: 2em;
}
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<!-- --><img id="mailpicture" src="images/gmail.png">
<h1 id="mailtext">Mail Us</h1>
<h1 id="nava">test</h1>
</nav>
</div>
</a>
</div>
A bit better solution http://jsbin.com/xunokaviju/1/
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
text-align: right;
}
#mailtext
{
margin-top: 20px;
display: inline-block;
/* margin-left: 1230px;*/
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
/*float: right;*/
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
/*margin-left: 500px;*/
}
/* use padding to pad elements */
.navigation > * {
padding-left: 1em;
}
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<!-- -->
<h1 id="nava">test</h1>
<h1 id="mailtext">Mail Us <img id="mailpicture" src="images/gmail.png"> </h1>
</nav>
</div>
</a>
</div>
In #mailtext the margin-left:1230 is the problem. Keeping your code just as it is the only change you'll have to make looks like this:
#mailtext
{
float: right;
font-size: 20px;
color: white;
font-style: italic;
}
change your
#mailtext
{
margin-top: 20px;
display: inline-block;
margin-left: 1230px;
font-size: 20px;
color: white;
font-style: italic;
}
to
#mailtext
{
margin-top: 20px;
display: inline-block;
float:right;
font-size: 20px;
color: white;
font-style: italic;
}
Hope it solves your problem
I am trying to vertically align font icons. I have tried "vertical-align: middle" but I always get a little align difference. The following example has 2 different ways to use the icons and they are not aligned correctly.
An example on Jsfiddle:
https://jsfiddle.net/crphowLg/7/
<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">
<style>
div {
font-size: 50px;
font-family: helvetica,arial,sans-serif;
text-transform: uppercase;
background: yellow;
}
.cart {
margin-top: 20px;
}
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;
vertical-align: middle;
text-transform: none;
}
</style>
<div>
<span class="icon icon-shopping-cart"></span>
Shopping Cart
</div>
<div class="cart">
Shopping Cart
</div>
Thank you.
I think it difference size of font. Because you using fanatic-icons font for it. So i think you try add padding for cart::before
display: inline;
font-family: "fanatic-icons" !important;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
padding-bottom: 15px; //added it
text-transform: none !important;
vertical-align: middle;
goodluck !
DEMO
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 15px;
vertical-align: middle;
text-transform: none;
float: left;
}
Giving it float left and adjusting the margin-right will make it fit at the middle.
Update your css like below. I have added a class to your HTML as well.
This can be achieved by using display:inline-block; and float properties in css
DEMO
CSS
div {
font-size: 50px;
font-family: helvetica,arial,sans-serif;
text-transform: uppercase;
background: yellow;
}
.cart {
display :inline-block;
width : 50%;
}
.cart1{
display: inline-block;
width:50%;
float:right;
}
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;
text-transform: none;
}
HTML:
<div class ="cart1">
<span class="icon icon-shopping-cart"></span>
Cart
</div>
<div class="cart">
Cart
</div>
Just wondering how to get rid of the unnecessary looking spaces
in my heading. I want my header to look similar to the capture 2 (2nd picture) but there are unnecessary spaces that I can't seem to get rid of. I ran it through jsfiddle:
http://jsfiddle.net/yT6h6/ and I can still see the spaces even though I don't think there was anything wrong with the code. Please take a look at this and greatly appreciated if you can help me.
HTML Code:
<div class="content">
<div class="heading"><b style="font-size:14px; font-family:'Arial', Gadget, sans-serif"><b style="font-size:9px;">Home \\ Current Students \\</b>
</b>
<br />FBE Degrees & Electives
<br>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
CSS Code:
.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
font-size: 28px;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
try this one remove line-height and add display:block
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
display:block;
color: #336666;
}
I think you firstly need to seriously tidy up that HTML and use some more natural elements. The heading should be a H of some level, probably h1. The paragraph tags make more sense for the text. Everything will be far cleaner and easier to solve if you do this. Here's my suggestion that changes the HTML and fixes your margin issues.
HTML
<div class="content">
<div class="heading">
<p class="crumbs">Home \\ Current Students \\</p>
<h1>FBE Degrees & Electives</h1>
<p class="subheading">FBE Degrees & Other Courses for FBE students including Elective courses</p>
</div>
</div>
CSS
p {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #336666;
}
a {
color:#fff;
text-decoration:none;
}
.heading {
background:#333333;
padding:20px;
}
.heading p {
margin:0;
padding:0;
line-height:10px;
}
h1 {
margin:0;
margin-bottom:5px;
font-family:"Courier New", Courier, monospace;
font-size:28px;
line-height:36px;
color:#DBDBDB;
}
Fiddle here:
http://jsfiddle.net/yT6h6/6/
It can be simplified more actually (I left some of your classes in there even though they aren't used), but this is at least a lot neater to work with.
Hey i've tried your code see at: http://jsbin.com/awonek/1/edit
Looks fine to me.
could code try
div#heading{
margin-bottom:-20px;
}
what browsers have you tried it in?
Added some changes: See http://jsbin.com/uvurev/1/edit
<div class="content">
<div class="heading">
Home \\ Current Students \\
<h2 class="M_logo_text">FBE Degrees & Electives</h2>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
</div>
CSS
div.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5{
font-size:9px; font-family:'Arial', Gadget, sans-serif
margin-right: -2px;
text-decoration: none;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
/*
added style
*/
b.type1{
font-size:9px; font-family:'Arial', Gadget, sans-serif
}
h2.M_logo_text{
font-size: 20px;
margin:0px;
}