I am trying to get the Texas icon directly centered between the span and h1 element.
Here is the Screen Capture
I tried googling but I think I might be phrasing what I need poorly. Is it that I have to adjust the padding and margin in css? I just want to move the icon down the y-axis.
Thank you
<header id="top" class="main-header">
<span class="title">Keep it Weird in</span>
<div>
<img class="texas-icon" src="https://image.ibb.co/cGRVFG/texasicon_1.png" alt="texasicon_1" border="0"></a>
</div>
<h1>Austin</h1>
.main-header {
padding-top: 170px;
height: 850px;
background: linear-gradient(lightblue, transparent 90%),
linear-gradient(0deg, #fff, transparent),
#ffa949 url('https://media.giphy.com/media/3ohs7I9ho0H4dfeP7y/giphy.gif') no-repeat center;
background-size: cover;
}
.title {
color: white;
font-size: 1.625rem; /* 26px/16px */
letter-spacing: .065em;
font-weight: 200px;
padding-bottom: 10px;
}
h1 {
font-size: 12.5rem; /* 90px/16px */
color: rgba(255, 255, 255, 1);
text-transform: capitalize;
font-weight: normal;
text-align: center;
line-height: 1.3;
margin: 12px 0px 0px;
}
I think text-align:center is enough in your case, then simply play with margin of elements to create the spaces :
header {
background: blue;
text-align: center;
color: #fff;
max-height: 380px;
padding: 50px 25px 0px;
}
.title {
margin: 5px 0;
font-size: 1.3rem;
border: none;
display: inline-block;
}
h1 {
margin: 10px 0;
font-size: 5rem;
line-height: 1.1;
}
<header id="top" class="main-header">
<span class="title">Keep it Weird in</span>
<div>
<img class="texas-icon" src="https://image.ibb.co/cGRVFG/texasicon_1.png" alt="texasicon_1" border="0">
</div>
<h1>Austin</h1>
</header>
Thank you for the support. Unfortunately, none of the solutions worked but I decided just to change the line height of the h1 element and was able to get the result I wanted. I learned so many new things from the responses to my question. Again, thank you.
Updated Screen Capture
Related
I am trying to make the header for a site but i have a issue when it comes to responsiveness on height.
And something i am not sure that it can be resolved with media queries breakpoints as you can see from the photo below.
and here is how it looks on full window
Html
<body>
<header class="header">
<div class="logo-box"></div>
<img src="/img/logo-white.png" class="logo">
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">City</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our City
Discover our Tours
</div>
</header>
</body>
CSS
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
}
.header{
height:65vh;
background-image: linear-gradient(to right bottom, rgba(132,248,198 , 0.8), rgba(26,187,137,0.8)),url(../img/ch4.jpg);
background-size: cover;
background-position: top;
background-color:#4FD1A9;
}
.logo-box{
position: absolute;
top:40px;
left:40px;
}
.logo{
height:35px;
}
.heading-primary {
color:#fff;
text-transform: uppercase;
}
.heading-primary-main{
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
}
.heading-primary-sub {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: 15px;
margin-bottom: 60px;
}
.text-box {
display: inline-block;
position: absolute;
top:30%;
left:50%;
transform: translate(-50% ,-50%);
text-align: center;
}
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
padding:15px 40px;
display: inline-block;
border-radius: 100px;
transition: all .2s;
margin: 5px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgb(0,0,0,.2);
}
.btn:active {
transform: translateY(-1px) ;
}
.btn-white {
background-color: #fff;
color:#777;
}
Should i make the entire header with CSS grid Layout breaking it its own parts?
My solution is somewhat opinionated, but I think that's unavoidable for this kind of question as there's so many different ways that it could be done.
I take the view that the height of elements should be determined only by their contents. If it was the case that users were comfortable scrolling horizontally as well as vertically through a website, then responsive design would be a complete non-issue. Responsive Design only becomes necessary because we prevent horizontal scrolling. We should not therefore concern ourselves with the height of content, only with the width.
Accordingly, I've removed the fixed height from the header as well as the absolute positioning from some of the elements and allowed the content to be laid out according to the natural flow. For desktop, I think this works fine.
A slightly different approach is required for narrower screens since on these you do begin to have issues with the width of the content. My solution here is to introduce a break-point at around the point when the content starts to get too wide for the viewport. Then I set all dimensions - font-sizes, margins, padding etc - to be a proportion of the current viewport width. A little math is required here to calculate the correct values, and I've also used CSS Custom Properties to make things a bit DRYer. In fact, there's only one declaration within the media query, and that's to set the base-unit from which all other values are calculated.
I've made notes in the CSS giving the reasoning for some of the changes I've made.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
}
.header {
--unit: 1px;
/* removing this since the height of an element should be determined by content */
/* height:65vh;*/
background-image: linear-gradient(to right bottom, rgba(132, 248, 198, 0.8), rgba(26, 187, 137, 0.8)), url(https://s.abcnews.com/images/Business/gty_detroit_mi_130718_4x3_992.jpg);
background-size: cover;
background-position: center;
background-color: #4FD1A9;
/*
* flexbox is the best way to layout content along a single axis
* for various practical and performance reasons
*/
display: flex;
}
.text-box {
--padding-v: calc(var(--unit) * 50);
--padding-h: calc(var(--unit) * 10);
display: inline-block;
padding: var(--padding-v) var(--padding-h);
/* This content should just be in the normal flow of the page */
/*
position: absolute
top:30%;
left:50%;
transform: translate(-50% ,-50%);
*/
text-align: center;
/* Because we're using flexbox, we can center the content both horizontally and vertically
* using this declaration
*/
margin: auto;
}
.heading-primary {
color: #fff;
text-transform: uppercase;
}
.heading-primary-main {
--font-size: calc(var(--unit) * 60);
--letter-spacing: calc(var(--unit) * 35);
display: block;
font-size: var(--font-size);
font-weight: 400;
letter-spacing: var(--letter-spacing);
}
.heading-primary-sub {
--font-size: calc(var(--unit) * 20);
--letter-spacing: calc(var(--unit) * 15);
--margin-bottom: calc(var(--unit) * 60);
display: block;
font-size: var(--font-size);
font-weight: 700;
letter-spacing: var(--letter-spacing);
margin-bottom: var(--margin-bottom);
}
.btn {
--padding-v: calc(var(--unit) * 15);
--padding-h: calc(var(--unit) * 40);
--border-radius: calc(var(--unit) * 100);
--margin: calc(var(--unit) * 5);
--font-size: calc(var(--unit) * 16);
font-size: var(--font-size);
text-transform: uppercase;
text-decoration: none;
padding: var(--padding-v) var(--padding-h);
display: inline-block;
border-radius: var(--border-radius);
transition: all .2s;
margin: var(--margin);
background-color: #fff;
color: #777;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgb(0, 0, 0, .2);
}
.btn:active {
transform: translateY(-1px);
}
/*
* This is around the point at which the text starts to wrap
*
* We take a fundamentally different approach to layout here. Now we want dimensions to
* scale with the width of the viewport so that it will look good at all sizes
*/
#media only screen and (max-width: 550px) {
.header {
--unit: calc(100vw / 550);
}
}
<html>
<head>
<link href="./header.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header class="header">
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">City</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our City
Discover our Tours
</div>
</header>
</body>
</html>
Use media-quires to adjust your layout.
Problem occurs due to position:absolute
Reference
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
}
.header{
height:65vh;
background-image: linear-gradient(to right bottom, rgba(132,248,198 , 0.8), rgba(26,187,137,0.8)),url(../img/ch4.jpg);
background-size: cover;
background-position: top;
background-color:#4FD1A9;
}
.logo-box{
position: absolute;
top:40px;
left:40px;
}
.logo{
height:35px;
}
.heading-primary {
color:#fff;
text-transform: uppercase;
}
.heading-primary-main{
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
}
.heading-primary-sub {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: 15px;
margin-bottom: 60px;
}
.text-box {
display: inline-block;
position: absolute;
top:30%;
left:50%;
transform: translate(-50% ,-50%);
text-align: center;
}
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
padding:15px 40px;
display: inline-block;
border-radius: 100px;
transition: all .2s;
margin: 5px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgb(0,0,0,.2);
}
.btn:active {
transform: translateY(-1px) ;
}
.btn-white {
background-color: #fff;
color:#777;
}
#media only screen and (max-width: 767px) {
.header {
height: 100vh;//adjust as per your req
}
.text-box {
display: block;
position: relative;
top: 0;
left: 0;
transform: none;
text-align: center;
height: 100%;
}
}
<body>
<header class="header">
<div class="logo-box"></div>
<img src="/img/logo-white.png" class="logo">
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">City</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our City
Discover our Tours
</div>
</header>
</body>
Simple question:
Can I make the underline using border-bottom (the ones on the right side) look exactly like the ones using box-shadow (the ones on the left side)?
I need it to be CSS only. And it may span across multiple lines as you can see from the snippet.
Basically I need to move the border-bottom a little bit up and not mess with everything else.
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
div.flex {
display: flex;
width: 420px;
justify-content: space-between;
}
div.flex2 {
display: flex;
width: 300px;
justify-content: space-between;
}
h2 {
font-family: 'Proxima Nova';
color: rgb(60,128,124);
font-size: 21px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
a.boxShadow {
color: darkGrey;
text-decoration: none;
line-height: 26px;
box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
padding-bottom: 3px;
}
a.borderBottom {
color: darkGrey;
text-decoration: none;
line-height: 26px;
border-bottom: 2px solid rgb(60,128,124);
}
<div class="flex">
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
<h2>
<a class="borderBottom">Hello border-bottom</a>
</h2>
</div>
<div class="flex2">
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
<h2>
<a class="borderBottom">Hello border-bottom</a>
</h2>
</div>
REASON FOR THIS QUESTION (BROWSER CONSISTENCY):
The box-shadow example does exactly what I want, but it does not look good on Edge (and I'm afraid other browsers might not render it properly as well). It looks perfect on recente versions of Chrome, Firefox and Safari though.
On Edge, the box-shadow example looks like this (see small line leaking at the bottom):
On the other hand, border-bottom seems to render consistently across browsers. But I can't get the underline in the position that I need.
Gradient can do this
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
div.flex {
display: flex;
width: 420px;
justify-content: space-between;
}
div.flex2 {
display: flex;
width: 300px;
justify-content: space-between;
}
h2 {
font-family: 'Proxima Nova';
color: rgb(60,128,124);
font-size: 21px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
a.boxShadow {
color: darkGrey;
text-decoration: none;
line-height: 26px;
box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
padding-bottom: 3px;
}
a.borderBottom {
color: darkGrey;
text-decoration: none;
line-height: 26px;
background:
linear-gradient(rgb(60,128,124),rgb(60,128,124))
bottom 1px center/ /* Position */
100% 2px /*width height*/
no-repeat;
}
<div class="flex">
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
<h2>
<a class="borderBottom">Hello border-bottom</a>
</h2>
</div>
<div class="flex2">
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
<h2>
<a class="borderBottom">Hello border-bottom</a>
</h2>
</div>
UPDATE: Here's a Fiddle: https://jsfiddle.net/720v4zdy/8/
I'm customizing a tumblr blog to match someone's site and it's almost in good shape. We started with a theme that already matched it closely and then made some changes in CSS.
The last problem I can't solve is how to make the navigation bar stretch the entire page while containing all of the links in a max-width of 1024px.
Here's the tumblr blog WIP: http://craftysheepblog.tumblr.com/
I want the navigation bar to stretch the entire page, but the links to be contained with a max-width of 1024px. The trouble here is I only have one DIV to do this with, so I'm not quite sure how to make it happen.
I'm using this currently, which works somewhat. It gets ugly when you make the browser window smaller though.
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
width: 100%;
}
You can set the nav to max width: 1024px and fill the "gaps" on the sides with ::before and ::after pseudo elements. You'll need to hide the overflow on header#top to avoid sideways scrolling, because the pseudo elements are set wider than the content.
This does rely on you setting the height of your nav and following suit with the <a> (height, line-height, etc.) ...
Also - tweak some more; there is a 600px break point in your CSS on the live site that will interfere with this (along with a lot of your extra CSS that I didn't clean up).
body {
color: rgb(38, 39, 43);
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
font-size: 14px;
line-height: 1.42857143;
margin: 0;
}
#top {
overflow: hidden;
}
#top .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 30px;
text-align: left;
font-weight: lighter;
margin-top: 18px;
display: block;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
max-width: 1024px;
margin: 50px auto 20px;
height: 50px;
width: 100%;
border-width: 0;
padding: 0;
position: relative;
}
#top nav::before{
background: rgb(45,50,51);
content: "";
display: block;
position: absolute;
height: 50px;
width: 100%;
right: 100%;
}
#top nav::after{
background: rgb(45,50,51);
content: "";
display: block;
position: absolute;
height: 50px;
width: 100%;
left: 100%;
top: 0;
}
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
}
#top nav a {
color: #fff;
font-size: 13px;
text-transform: none;
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
border: 0;
display: inline-block;
padding: 0 1em;
margin: 0;
height: 50px;
line-height: 50px;
}
#top nav a:hover {
color: #52A708;
}
#top .headimg {
display: none;
}
<header id="top">
<div class="row">
<div class="small-12 small-centered columns">
<a href="/" class="active">
<div class="title">Page Title</div>
</a>
<nav>
<a class="page" href="#">Link 1</a><a class="page" href="#">Link 2</a><a class="page" href="#">Link 3</a>
</nav>
</div>
</div>
</header>
How about using max-width: 1024px;
The best way to do this is to use a ul inside of a div as your navigation bar. The ul can contain all of your links. That way, the div can have a width that spans the entire page while the unordered list has a max width of 1024px.
Example code:
<html>
<head>
<style>
#nav {
width: 100%;
height: 20%;
}
#nav-links {
max-width: 1024px;
}
</style>
</head>
<body>
<div id="nav">
<ul id="nav-links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>...</li>
</ul>
</div>
</body>
</html>
Then you can style your ul as a nav bar however you like. Here's a good link for that: http://www.w3schools.com/css/css_navbar.asp
With the amount of information you have shared it is hard to say. Obviously the cleanest way to accomplish this is to insert another element (div or otherwise) around these child elements, and assign it a max-width... however this does not sound as if it is an option for you?
If you know how many elements you want to make up the 1024px, you could assign their widths manually (i.e. give each of the four children a width of 256px, or something similar).
If you do not know any of these things, and your options for the space are limited, Javascript is your best option. You could write a script that counts the children, and either assigns their widths appropriately or inserts clears at the proper location.
If you expand your question to target a specific approach, I'm sure myself and the many gurus on here will be able to give you more specific guidance.
Use flexbox: https://philipwalton.github.io/solved-by-flexbox/
The links should stretch as normal but start to shrink when they each exceed 341px which is 1023px as a total width.
Note: Snippet best viewed in Full Page mode.
Relevant CSS
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
display: flex;
flex-flow: row nowrap;
justify-content: baseline;
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
flex: 0 1 341px;
}
body {
color: rgb(38, 39, 43);
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
font-size: 14px;
line-height: 1.42857143;
}
.row {
max-width: 100%;
}
#top {
margin-top: 0px;
}
#top .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 30px;
text-align: left;
font-weight: lighter;
margin-top: 18px;
display: block;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
display: flex;
flex-flow: row nowrap;
justify-content: baseline;
}
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
flex: 0 1 341px;
}
#top nav a {
color: #fff;
font-size: 13px;
text-transform: none;
text-decoration: none;
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
}
#top nav a:hover {
color: #52A708;
}
#top .headimg {
display: none;
}
#posts {
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
.column,
.columns {
padding: 0;
}
#posts article:nth-child(1) {
padding-top: 20px;
}
#posts article .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 36px;
color: rgb(38, 39, 43);
text-align: center;
font-weight: 500;
}
#posts article footer {
display: none;
}
#paginate {
display: none;
}
#bottom {
border: none;
}
#bottom {
border: none;
max-width: 1024px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
<header id="top">
<div class="row">
<div class="small-12 small-centered columns">
<img class="headimg" src="http://assets.tumblr.com/images/x.gif?v=1">
<a href="/" class="active">
<div class="title">Page Title</div>
</a>
<div class="description"></div>
<nav>
<a class="page" href="/online-store">Shop NAO</a><a class="page" href="/nao-couture">NAO Couture</a><a class="page" href="/nao-experience">NAO Experience</a>
</nav>
</div>
<!--.columns-->
</div>
<!--.row-->
</header>
How can I place my button in the center without any kind of "margin cheat" (for example setting margin-left: 525px;)?
HTML
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
CSS
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
margin-left: 525px;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
I've tried making it sit in the center but it didn't work out so well without me setting margin-left; 525px;, which in my case, centers the button under the text, please help me remove this "margin cheat" and do it in the right way.
The a act like text it means when you give text-align:center; to its parent, it will be placed in center of its parent.
You don't need to give margin to the a element. You can use text-align:center;.
#bannerContainer
{
text-align:center;
}
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
If you set the position of the button to absolute, give it a set width, and add this it should center:
left: 50%; right: 50%;
Have you try this:
<center>Products</center>
I am not sure whether it is helpful to you..
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