How can I make the caption responsive? - html

I'm trying to make an image with an caption on the left-middle. The caption should be always at the left-middle or anywhere on the left side of the image and it's size should be vary with browser size simultaneously.
The problem is that when I resize the window than size of the caption won't change and It's position is also not fixed w.r.t the image.
.page-overview{
width: 100%;
border: 1px solid black;
}
.overview-content img{
width: 100%;
}
.caption{
position: absolute;
top: 20%;
left: 18px;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span{
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content"><img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto">
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>


Remove position: absolute; and use relative instead. absolute will not account for browser shrinkage, it will just still stay in the specified area.
.page-overview {
width: 100%;
border: 1px solid black;
}
.overview-content img {
width: 100%;
}
.caption {
position: relative;
width: fit-content;
margin: auto 0;
top: 20%;
left: 18px;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span {
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content">
<img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto">
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>


The main thing is to wrap a position:absolute divs with a position:relative div, so the absolute div will be relative that that parent.
Besides that, I used flexbox to center the content.
That is assuming you want the caption ON the image...
.page-overview{
width: 100%;
border: 1px solid black;
}
.overview-content img{
width: 100%;
}
.caption{
position: absolute;
top: 20%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span{
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
.image-wrapper {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content">
<div class="image-wrapper">
<a href="#">
<img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto"/>
</a>
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>
</div>

Related

How do I right-center text next to an image/svg file in HTML/CSS?

I'm making a simple website (HTML & CSS only) consisting of an svg file (blob) with text inside of it, both items centered on the left side of the page. To the right of the page the word "Company" should be displayed centered this is what is suppossed to look like. Another issue I have is the text inside the blob not stretching all the way when the webpage is in full view (admittedly, it does fix itself when I decrease font-size but I feel like it could be fully stretched at the current 4.2em). This is the result of my code.
html body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
body {
background-color: #121212;
}
svg {
max-width: 100%;
object-fit: scale-down;
}
p {
color: white;
font-size: 4rem;
}
.container {
position: absolute;
text-align: center;
color: white;
padding-left: 4%;
padding-right: 4%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4.2em;
}
.company {
position: right absolute;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet"/>
<title>Coming Soon</title>
</head>
<body>
<main>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"
width="600"
height="600"
viewBox="0 0 638.673 621.008">
<path id="Path_1" data-name="Path 1" d="M500,170.963c67.589,4.626,132.75,31.976,182.124,78.365,45.711,42.948,55.831,107.484,78.093,166.122,23.716,62.466,75.065,123.258,56.095,187.326-19.022,64.243-87.325,101.559-149.224,127.2-52.76,21.856-110.546-4.191-167.088,3.831-71.47,10.139-140.841,81.139-205.49,49.025-63.083-31.336-59.973-122.575-79.066-190.375-18.212-64.672-44.091-128.9-29.3-194.435,15.654-69.353,55.066-133.255,112.67-174.929,57.536-41.625,130.336-56.98,201.184-52.131" transform="translate(-181.759 -170.1)" fill="#bf4040"/>
</svg>
<div class="centered">Coming Soon</div>
</div>
<div class="company">
<p class="outside">Company</p>
</div>
</main>
</body>
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet"/>
<title>Coming Soon</title>
</head>
<body>
<main>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"
width="600"
height="600"
viewBox="0 0 638.673 621.008">
<path id="Path_1" data-name="Path 1" d="M500,170.963c67.589,4.626,132.75,31.976,182.124,78.365,45.711,42.948,55.831,107.484,78.093,166.122,23.716,62.466,75.065,123.258,56.095,187.326-19.022,64.243-87.325,101.559-149.224,127.2-52.76,21.856-110.546-4.191-167.088,3.831-71.47,10.139-140.841,81.139-205.49,49.025-63.083-31.336-59.973-122.575-79.066-190.375-18.212-64.672-44.091-128.9-29.3-194.435,15.654-69.353,55.066-133.255,112.67-174.929,57.536-41.625,130.336-56.98,201.184-52.131" transform="translate(-181.759 -170.1)" fill="#bf4040"/>
</svg>
<div class="centered">Coming Soon</div>
</div>
<div class="company">
<p class="outside">Company</p>
</div>
</main>
</body>
CSS:
html body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
body {
background-color: #121212;
}
svg {
max-width: 100%;
object-fit: scale-down;
}
p {
color: white;
font-size: 4rem;
}
.container {
position: absolute;
text-align: center;
color: white;
padding-left: 4%;
padding-right: 4%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4.2em;
}
.company {
position: right absolute;
text-align: center;
}
My first thought was to split the page in half, this way I could center the blob and text on the left and "Company" on the right. While I did manage to center everything and match the design, when resizing the window, the background from the right side would cover the blob and text so I had to scrap that idea. Any help would be great!

There are several ways to do this, but one way is to do the following:
Use flexbox layout
Use a relative container div with absolute centered div
I added background colors to show you layout better. You still need some code cleanup here, but this should be close to what you are looking for.
html body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
body {
background-color: #121212;
}
svg {
max-width: 100%;
object-fit: scale-down;
}
p {
color: white;
font-size: 4rem;
}
.container {
position: relative;
text-align: center;
color: white;
padding-left: 4%;
padding-right: 4%;
flex: 50%;
background-color: green;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4.2em;
}
.company {
text-align: center;
flex: 50%;
background-color: blue;
align-self: center;
}
main {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet"/>
<title>Coming Soon</title>
</head>
<body>
<main>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"
width="600"
height="600"
viewBox="0 0 638.673 621.008">
<path id="Path_1" data-name="Path 1" d="M500,170.963c67.589,4.626,132.75,31.976,182.124,78.365,45.711,42.948,55.831,107.484,78.093,166.122,23.716,62.466,75.065,123.258,56.095,187.326-19.022,64.243-87.325,101.559-149.224,127.2-52.76,21.856-110.546-4.191-167.088,3.831-71.47,10.139-140.841,81.139-205.49,49.025-63.083-31.336-59.973-122.575-79.066-190.375-18.212-64.672-44.091-128.9-29.3-194.435,15.654-69.353,55.066-133.255,112.67-174.929,57.536-41.625,130.336-56.98,201.184-52.131" transform="translate(-181.759 -170.1)" fill="#bf4040"/>
</svg>
<div class="centered">Coming Soon</div>
</div>
<div class="company">
<p class="outside">Company</p>
</div>
</main>
</body>

I used flex containers to achieve this look you want. I left borders around the div containers so you could see where the div's are that I positioned. You can play with the padding and what not to get the desired look you want. This code is responsive to screen size as well.
* {
padding: 0;
margin: 0;
}
html body {
height: 100vh;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
font-size: 16px;
overflow-x: hidden;
}
body {
background-color: #121212;
}
.wrapper {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
margin: 50px 0 0 0;
border: 1px solid red;
}
/* LEFT SIDE */
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 300px;
padding: 10px;
border: 1px solid blue;
}
.svg-container {
border: 1px solid green;
object-fit: contain;
}
svg {
width: 100%;
height: 100%;
}
.coming-soon {
color: white;
font-size: 2rem;
}
.coming-soon-container {
position: absolute;
border: 1px solid white;
z-index: 1000;
}
/*RIGHT SIDE */
.company {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid azure;
padding: 20px;
}
p {
color: white;
font-size: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="style.css" rel="stylesheet" />
<title>Coming Soon</title>
</head>
<body>
<main>
<div class="wrapper">
<div class="container">
<div class="svg-container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="600"
height="600"
viewBox="0 0 638.673 621.008"
>
<path
id="Path_1"
data-name="Path 1"
d="M500,170.963c67.589,4.626,132.75,31.976,182.124,78.365,45.711,42.948,55.831,107.484,78.093,166.122,23.716,62.466,75.065,123.258,56.095,187.326-19.022,64.243-87.325,101.559-149.224,127.2-52.76,21.856-110.546-4.191-167.088,3.831-71.47,10.139-140.841,81.139-205.49,49.025-63.083-31.336-59.973-122.575-79.066-190.375-18.212-64.672-44.091-128.9-29.3-194.435,15.654-69.353,55.066-133.255,112.67-174.929,57.536-41.625,130.336-56.98,201.184-52.131"
transform="translate(-181.759 -170.1)"
fill="#bf4040"
/>
</svg>
</div>
<div class="coming-soon-container">
<div class="coming-soon">Coming Soon</div>
</div>
</div>
<div class="company">
<p>Company</p>
</div>
</div>
</main>
</body>
</html>

Parallax effect only working on background image and not text

I'm currently following the tutorial on parallax effects on W3Schools. Basically, I have it so where the parallax is scrolling over my background correctly, but it's not scrolling over the text as well.
I tried a lot of things but it still doesn't work. I also saw one other post about this issue, but their code differed a lot from mine so it was hard to understand.
Here is the image of what is happening (the words are scrolling up with the page):
Here's my code:
*{
box-sizing: border-box;
}
body{
margin: 0px;
background-color: #ffffff;
}
ul{
text-align: center;
padding: 0px 20px;
margin: 12px auto;
list-style: none;
position: fixed;
z-index:10;
top: 0;
}
ul, li{
display: inline-table;
}
li{
margin: 10px 30px;
font-size: 15px;
color: #42385d;
font-weight: bold;
font-family: 'Roboto Slab', serif;
}
.navbar{
background-color: #ffcfda;
position: fixed;
width: 100%;
border-bottom: 1px solid #ffcfda;
z-index: 10;
height: 70px;
top: 0;
overflow: hidden;
}
#parallax{
background-image: url("pinkbackground.jpg");
min-height: 100vh;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
.transition{
height: 200px;
background-color: #42385d;
width: 100%;
}
.intro-text{
text-align: center;
width: 100%;
color: #42385d;
padding: 37vh;
height: 100vh;
width: 100%;
font-size: 50px;
font-family: 'Roboto Slab', serif;
position: relative;
background-attachment: initial;
}
.question{
font-size: 30px;
font-family: 'Roboto Mono', monospace;
color: #42385d;
font-weight: bolder;
padding-top: 40px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>schpiel - Applying, Made Easier</title>
<!--meta data-->
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name = "description" content =
"schpiel, like the name implies, makes applying easier.
no, it doesn't sound like that? :(. Using our new autofill
feature, with one click you can apply instantly!">
<!--styling-->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght#1,300&family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="icon" href="https://i.imgur.com/RoPgdJh.jpg">
</head>
<body>
<div id="navigation">
<nav class="navbar";>
<ul>
<li>
<a>
Home
</a>
</li>
<li>
<a>
About
</a>
</li>
<li>
<a>
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="parallax">
<div class="intro-text">
text
<br>
here
</div>
</div>
<div class="transition"></div>
<section id="whatIsSchpiel">
<div class="question">
What is schpiel?
</div>
<div class="answer">
sscsdafads
</div>
</section>
</body>
<footer>
</footer>

HTML does not want load CSS in second html file

I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}

Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp

How to make smaller space between 2 sentences in HTML

Im working on a code and I would like to make the space between "Szafranowka" and "Apartaments & Restaurant" smaller. Here's how it looks like now: https://gyazo.com/d6843d8857e954acbae5c1da748c044b
I really cannot find the answer that would perfectly fit my expectations. Please, could any1 help me? :)
Also, I would like to make a small square around "Wejscie/Entrance", but when im trying to do it with the border, it looks like this: https://gyazo.com/f84fedc7a78854773b287e01ebd3a21f
Here's a part of code that im using to make a border:
<h5 style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">Wejscie/Entrance</h5>
and here's my code:
HTML:
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance">Wejscie/Entrance</h5>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}

to your #entrance, try this :
#entrance {
width: 8rem; //or another size
margin auto; // to center
border: 2px solid;
}

<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <span id="entrance">Wejscie/Entrance</span>
</div>
CSS:
h2{
margin:5px;
line-height:15px
}
#entrance{
border:1px solid;
}

<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
#header h2
{
margin-bottom: -30px;
}
#entrance span
{
border: 1px solid;
padding: 15px;
}
</style>
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance"><span>Wejscie/Entrance</span></h5>
</div>
</div>
</body>
</html>

How to Center a span in between two floating spans and the container is fixed?

I'm working on header section where there are 3 spans, one floating to the left, one floating to the right and the other span in the middle. The middle span is not getting horizontally aligned no matter what.
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
}
#position{
float: right;
margin-right: 10px;
/*width: 20px;*/
/*margin-top: -75px;*/
}
#logo{
float: left;
height: inherit;
}
#logo:hover{
cursor: pointer;
}
#name{
border: 1px solid black;
position: absolute;
margin: 0px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<a href="https://www.google.com" target="_blank">
<img src="abc.png" id="logo">
</a>
<span id="position"> Developer Developer </span>
<span id="name">SKSV</span>
</div>
</body>
</html>

Here is a simpler solution. Wrap them in a parent div and make the width equal. Take a look at the following:
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
font-size:0;
}
.header-col
{
display:inline-block;
width:33.3333333334%;
vertical-align:middle;
font-size:13px;
}
#position{
display:block;
text-align:right;
}
#logo{
display:block;
text-align:left;
}
#name{
border: 1px solid black;
display:block;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<div class="header-col">
<a href="https://www.google.com" target="_blank" id="logo">
<img src="abc.png">
</a>
</div>
<div class="header-col">
<span id="name">SKSV</span>
</div>
<div class="header-col">
<span id="position"> Developer Developer </span>
</div>
</div>
</body>
</html>

I would use left: 50%. Here. I this what you wanted:
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
}
#position{
float: right;
margin-right: 10px;
/*width: 20px;*/
/*margin-top: -75px;*/
}
#logo{
float: left;
height: inherit;
}
#logo:hover{
cursor: pointer;
}
#name{
border: 1px solid black;
position: absolute;
margin: 0px auto;
left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<a href="https://www.google.com" target="_blank">
<img src="abc.png" id="logo">
</a>
<span id="position"> Developer Developer </span>
<span id="name">SKSV</span>
</div>
</body>
</html>