Im currently trying to recreate a photography website for practice and ive gotten as far as creating the nave bar and the icons. Im having difficulties with my images though. Im wanting to align them to the right of the nav bar and im struggling to figure it out. Please provide me with some feedback. Ill post my source code and the photography website im trying to replicate.
Here is the link to the website: https://www.samalive.co/
body {
background-color: #faf9f9;
padding: 70px;
}
header {
list-style-type: none;
line-height: 40px;
margin-left: 20px;
margin-top: 200px;
font-family: 'Fjalla One', sans-serif;
}
.footer {
margin-left: 20px;
}
.title {
padding-right: 20px;
font-family: 'Shadows Into Light', cursive;
font-size: 30px;
letter-spacing: 5px;
}
hr {
border-top: none;
border-left: none;
width: 500px;
}
img {
width: 30%;
float: left;
display: block;
padding: 17px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Shadows+Into+Light" rel="stylesheet">
</head>
<body>
<div class="header">
<header>
<nav>
<h1 class="title">Am Alive</h1>
<li>Home</li>
<li>City</li>
<li>Portrait</li>
<li>Lifestyle</li>
<li>About</li>
</nav>
</header>
<hr align="left">
<div class="footer">
<a class="footer-link" href="https://twitter.com/"><i class="fab fa-instagram"></i></a>
<a class="footer-link" href="https://twitter.com/because_imalex"><i class="fab fa-twitter"></i></a>
<p>© 2018 Visual Madness.</p>
</div>
</div>
<img src="images/waterfall1.jpg" alt="">
<img src="images/waterfall2.jpg" alt="">
</body>
</html>
you have your images set to float left. I set everything else to float left so it will fall in order or else you can use float:right.
body {
background-color: #faf9f9;
padding: 70px;
}
header {
list-style-type: none;
line-height: 40px;
margin-left: 20px;
margin-top: 200px;
font-family: 'Fjalla One', sans-serif;
float: left;
}
.footer {
margin-left: 20px;
float: left;
}
.title {
padding-right: 20px;
font-family: 'Shadows Into Light', cursive;
font-size: 30px;
letter-spacing: 5px;
float: left;
}
hr {
border-top: none;
border-left: none;
width: 500px;
float: left;
}
img {
width: 30%;
float: left;
display: block;
padding: 17px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Shadows+Into+Light" rel="stylesheet">
</head>
<body>
<div class="header">
<header>
<nav>
<h1 class="title">Am Alive</h1>
<li>Home</li>
<li>City</li>
<li>Portrait</li>
<li>Lifestyle</li>
<li>About</li>
</nav>
</header>
<hr align="left">
<div class="footer">
<a class="footer-link" href="https://twitter.com/"><i class="fab fa-instagram"></i></a>
<a class="footer-link" href="https://twitter.com/because_imalex"><i class="fab fa-twitter"></i></a>
<p>© 2018 Visual Madness.</p>
</div>
</div>
<img src="images/waterfall1.jpg" alt="">
<img src="images/waterfall2.jpg" alt="">
</body>
</html>
Related
Before zoom:
After zoom:
From what I noticed, I am working on a 27' monitor display and my teacher will be viewing my website on a 15 inch, and the second image is typically what the teacher will be seeing. How do I prevent the overlapping from occurring, and keep it to its own position and proportional size?
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jared's Workshop | Homepage</title>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="parallax.min.js"></script>
</head>
<header>
<div class="number2">
</div>
<div class="navbar">
<div class="navlinks">
<ul>
<li>H o m e</li>
<li>G a m i n g</li>
<li>O f f i c e</li>
<li>C o n t a c t s</li>
<li>C h e c k o u t</li>
</div>
</div>
</header>
<body>
<div class="container">
<div id="info"></div>
<div class="center">
<div class="logo">
<img src="logoreal2.png"/>
</div>
<div class="text">
<h1>Contact Us</h1>
<h4>- Socials -</h4>
<div id="links">
<a id="facebook" href="https://www.facebook.com/jared.huynh.1">Facebook</a>
<a id="instagram" href="https://www.instagram.com/jarednhu/">Instagram</a>
<a id="twitter" href="https://twitter.com/JaredWorkshop">Twitter</a>
</div>
<h4>- Support -</h4>
<div id="links2">
<a id="aa" href="https://mail.google.com/mail/u/0/#inbox?compose=jrjtXDzFhFXBrtwSfQzLJRrTmwBtfcnPVWKLhHzlGhTRbTKwsKbzRgrczFglKlXLmDLQtQCW" target="_blank">Email: Jaredsworkshop#gmail.com</a>
<a id="bb" href="#">Phone: 0426710063</a>
<a id="cc" href="https://www.google.com/maps/place/PLE+Computers+Wangara/#-31.7873489,115.8205448,17z/data=!3m1!4b1!4m5!3m4!1s0x2a32ad058339f89d:0xeb20a17d59f97d22!8m2!3d-31.7873535!4d115.8227335" target="_blank">Address: 1/46 Buckingham Dr, Wangara WA 6065</a>
</div>
</div>
</div>
<canvas></canvas>
<script src="app.js"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
user-select: none;
}
body {
background: #eee;
}
.text {
font-family: 'Roboto', sans-serif;
font-size: 50px;
color: black;
position: absolute;
}
a {
display: block;
text-decoration: none;
color: black;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 70px;
margin: 0;
}
h4 {
font-family: 'Montserrat', sans-serif;
font-size: 40px;
margin: 0;
margin-top:10px;
}
.hovered a {
color: #ffffff66;
}
.hovered {
color: #fff;
}
.center {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.3);
}
canvas {
width: 100%;
height: 100%;
}
#info {
position: fixed;
padding: 20px;
}
#facebook:hover {
color: #FFFFFF;
}
#instagram:hover {
color: #ff0066;
}
#twitter:hover {
color: #fff;
}
.center .logo {
text-align: center;
position: absolute;
padding-bottom: 0;
margin-top: 30%;
background-color: transparent;
}
.center .logo img {
width: 1200px;
}
.text{
transform: translate(0,-30%);
background-color: transparent;
}
#facebook {
font-size: 2rem;
}
#instagram {
font-size: 2rem;
}
#twitter {
font-size: 2rem;
}
#links a{
display: inline-block;
white-space: nowrap;
padding: 20px;
line-height: 2px;
}
#links2 a{
line-height: 2px;
white-space: nowrap;
padding: 20px;
}
#aa{
font-size: 2rem;
}
#bb{
font-size: 2rem;
}
#cc{
font-size: 2rem;
}
#aa:hover{
color: #fe9500;
transition: 0.5s;
}
#bb:hover{
color: #fe9500;
transition: 0.5s;
}
#cc:hover{
color: #fe9500;
transition: 0.5s;
}
I fixed it by removing position:absolute; in .center .logo{} and removed width: 1200px; under .center .logo img{} . Then I cut and pasted the whole
<div class="logo">
<img src="logoreal2.png"/>
</div>
and placed it all inside <div class="text"> which was the same div as the text below (I'm moving the logo). I later added a negative top margin to move it down from the top of the screen.
Final HTML product looked like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jared's Workshop | Homepage</title>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="parallax.min.js"></script>
</head>
<header>
<div class="number2">
</div>
<div class="navbar">
<div class="navlinks">
<ul>
<li>H o m e</li>
<li>G a m i n g</li>
<li>O f f i c e</li>
<li>C o n t a c t s</li>
<li>C h e c k o u t</li>
</div>
</div>
</header>
<body>
<div class="container">
<div id="info"></div>
<div class="center">
<div class="text">
<div class="logo">
<img src="logoreal2.png"/>
</div>
<h1>Contact Us</h1>
<h4>- Socials -</h4>
<div id="links">
<a id="facebook" href="https://www.facebook.com/jared.huynh.1">Facebook</a>
<a id="instagram" href="https://www.instagram.com/jarednhu/">Instagram</a>
<a id="twitter" href="https://twitter.com/JaredWorkshop">Twitter</a>
</div>
<h4>- Support -</h4>
<div id="links2">
<a id="aa" href="https://mail.google.com/mail/u/0/#inbox?compose=jrjtXDzFhFXBrtwSfQzLJRrTmwBtfcnPVWKLhHzlGhTRbTKwsKbzRgrczFglKlXLmDLQtQCW" target="_blank">Email: Jaredsworkshop#gmail.com</a>
<a id="bb" href="#">Phone: 0426710064</a>
<a id="cc" href="https://www.google.com/maps/place/PLE+Computers+Wangara/#-31.7873489,115.8205448,17z/data=!3m1!4b1!4m5!3m4!1s0x2a32ad058339f89d:0xeb20a17d59f97d22!8m2!3d-31.7873535!4d115.8227335" target="_blank">Address: 1/46 Buckingham Dr, Wangara WA 6065</a>
</div>
</div>
</div>
<canvas></canvas>
<script src="app.js"></script>
</body>
</html>
I am making some portfolio and this question occurs in my favourite music portfolio. You can see the music name that is long will go to another line and will automatically align the text to center. However, the music name that isn't long will not align text to center. How can I do?
img{
width: 160px;
height: 90px;
}
.container{
display: grid;
grid-gap: 10px;
}
.music{
background: #123;
width: 400px;
height: 90px;
}
a{
display: flex ;
}
p{
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<article class="music">
<a href="#">
<img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
<p>See you again</p>
</a>
</article>
<article class="music">
<a href="#" class="music-child">
<img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
<p>Deep Chills - Run Free</p>
</a>
</article>
</div>
<script src="script.js"></script>
</body>
</html>
You don't need display: flex; in your p tag, and you may want to add width: 100%;
img {
width: 160px;
height: 90px;
}
.container {
display: grid;
grid-gap: 10px;
}
.music {
background: #123;
width: 400px;
height: 90px;
}
a {
display: flex;
}
p {
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
align-items: center;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<article class="music">
<a href="#">
<img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
<p>See you again</p>
</a>
</article>
<article class="music">
<a href="#" class="music-child">
<img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
<p>Deep Chills - Run Free</p>
</a>
</article>
</div>
<script src="script.js"></script>
</body>
</html>
You can just add margin-left and margin-right in p tag as following:
margin-left: auto;
margin-right: auto;
So complete style of p tag is as following:
p {
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
}
Hope to helpful!
I want to make the menu to be always on the top when scrolling down the page but the heading that is above the menu to hide. I would like only the menu that is in div tag with id="fixed-div" to stay on the top and the other menu to hide.
I want the menu to pull up and stay fixed on the top of the page like in this site: https://www.w3schools.com/html/default.asp
body {
margin: 0px;
background-color: #fcede0;
height: 900px;
}
#my-logo {
width: 150px;
height: 100px;
position: absolute;
left: -10px;
top: -25px;
z-index: -1;
}
#page-title {
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
font-size: 25px;
text-align: center;
color: #22117a;
}
#inner-title {
padding-left: 120px;
padding-right: 70px;
}
body div img::selection, #inner-title::selection, #menu-up li a::selection, #menu-down li a::selection, body div article a img::selection, footer table tr td div::selection, footer a::selection{
color: #ef4810;
background-color: lightblue;
}
#menu-up{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ef4810;
padding: 5px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#menu-down {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: right;
background-color: #ef4810;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 3px;
}
#menu-up li{
float: left;
display: inline-block;
font-size: 20px;
width: 200px;
}
#menu-down li {
float: right;
display: inline-block;
font-size: 15px;
width: 250px;
}
#menu-up li a:link, #menu-down li a:link, #menu-up li a:visited, #menu-down li a:visited {
display: block;
text-align: center;
padding: 10px 30px;
text-decoration: none;
color: #22117a;
font-family: "Courier New";
font-weight: bold;
padding-top: 1px;
padding-bottom: 1px;
}
#menu-down li a:link, #menu-down li a:visited {
color: #972d09;
}
#menu-up li a:hover, #menu-down li a:hover {
display: block;
text-align: center;
padding: 10px 30px;
text-decoration: none;
color: white;
/*background-color:red;*/
font-family: "Courier New";
font-weight: bold;
padding-top: 1px;
padding-bottom: 1px;
}
.HTML-CSS-logo {
height: 300px;
width: 300px;
box-shadow: 0px 0px 100px 10px black;
border-radius: 40px;
}
#HTML-article, #CSS-article {
display: inline-block;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}
#div-article {
padding-top: 150px;
text-align: center;
margin-bottom: 130px;
}
.HTML-CSS-logo:hover {
-webkit-filter: blur(4px);
filter: blur(4px);
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Сайт за електронно обучение по HTML5 и CSS3">
<meta name="keywords" content="HTML5, CSS3, обучение, електронно обучение, самоучител">
<meta name="description" content="HTML5 и CSS3 обучение">
<meta name="author" content="Иванка Янкулова">
<meta name="copyright" content="Иванка Янкулова">
<!--<meta name="pubdate" content="2017-12-21">-->
<title>HTML5 и CSS3 обучение</title>
<link rel="icon" href="images/icon.png" type="image" >
<link rel="stylesheet" type="text/css" href="Style.css" />
<link rel="stylesheet" type="text/css" href="Index.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>
<div id="page-title">
<img id="my-logo" src="images/logo2.png" alt="Лого" title="Лого" />
<div id="inner-title">Сайт за електронно обучение по HTML5 и CSS3</div>
</div>
</header>
<div id="fixed-div">
<nav>
<ul id="menu-up">
<li id="home-button" class="icon-bar">
<i class="fa fa-home"></i>
</li>
<li>
HTML5
</li>
<li>
CSS3
</li>
<li>
Разработки
</li>
<li>
Справки
</li>
</ul>
</nav>
</div>
<nav>
<ul id="menu-down">
<li>
Полезни връзки
</li>
<li>
Препоръки и забележки
</li>
<li>
Информация за сайта
</li>
<li>
Контакти
</li>
</ul>
</nav>
<div id="div-article">
<article id="HTML-article">
<a href="">
<img class="HTML-CSS-logo" src="images/HTML-logo.png" alt="HTML5" title="HTML5" />
</a>
</article>
<article id="CSS-article">
<a href="">
<img class="HTML-CSS-logo" src="images/CSS-logo.png" alt="CSS3" title="CSS3" />
</a>
</article>
</div>
</body>
</html>
You shoud listen the event of window scroll, using js control #menu-up's position be fixed or static
<!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">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
*{color:#fff;padding:0;margin:0;}
.m-header{height: 68px;background: #ff00ff;}
.m-nav{height: 44px;width:100%;background: #0026ff;}
.m-main{height: 1500px;background: #73ff00;line-height: 200px;}
.m-fixed{position: fixed;top:0;left:0;z-index:3;}
.pt44{padding-top:44px;}
</style>
</head>
<body>
<div class="m-header">I'm header</div>
<div class="m-nav">I'm the nav</div>
<div class="m-main">I'm main content</div>
<script type="text/javascript">
var oNav = $('.m-nav');
var oMain = $('.m-main');
var nNavTop = oNav.offset().top;
var sNavTop= 0;
$(window).scroll(function(){
sNavTop = $(this).scrollTop();
if(sNavTop >= nNavTop){
oNav.addClass('m-fixed');
oMain.addClass('pt44');
}else{
oNav.removeClass('m-fixed');
oMain.removeClass('pt44');
}
});
</script>
</body>
</html>
Add position: fixed css rule to your css code of your menu
like this:
#menu-up{
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ef4810;
padding: 5px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
Just add
#fixed-div
{
position:fixed;
}
so im coding up this pizza site and ive got a problem - i wanted to put the place's logo in the navbar (which is also a link to main page) but i cannot get it to be displayed. im using twitter bootstrap. here's the code:
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span, a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover{
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html"><div id="logo"></div></a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a></li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
jsfiddle
Hi now you just define to margin-right:20px; in your li as like htis
.nav-pills>li+li {
margin-right: 20px;
}
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('http://economictimes.indiatimes.com/photo/33185989.cms');
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span, a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li+li {
margin-right: 20px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover{
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html"><div id="logo"></div></a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="http://economictimes.indiatimes.com/photo/33185989.cms" id="logoFB"></a></li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Please do refer the css code and also do check the image path is correct..
#logo {
background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
background-repeat: no-repeat;
width: 431px;
height: 146px;
margin-left: 15px;
background-size: contain;
background-position: center center;
}
I have just add my website logo and it's working fine. Have a look
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('http://www.dezaro.com/siteimg/logo.png') ;
background-repeat:no-repeat;
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span,
a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover {
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html">
<div id="logo"></div>
</a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li>
<a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342"
width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I'm trying to force the word "District" to sit below "Area School", but it tends to force "District" to the left of the page underneath the logo
HTML:
<!DOCTYPE html>
<head>
<meta name="description" content="EPASD is a public school district that serves the communities in and around East Pennsboro Township in Central Pennsylvania.">
<meta name="author" content="John Gibson">
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="nomargins">
<header id="MainHeader">
<nav>
<ul>
<li class="inline" style="max-width:auto">
<img src="EPASD logo.svg" id="logo">
</li>
<li class="inline" id="DistrictName_1">
<span>East Pennsboro</span>
</li>
<li class="inline" id="DistrictName_2">
<div class="inline">Area School</div>
<div class="inline">District</div>
</li>
</ul>
</nav>
</header>
<aside>
<nav style="VerticalNavbar">
<a href="">
</nav>
</aside>
<section id-"MainContentArea">
<div id="carousel">
</div>
</section>
<aside id="articles">
<h1 class="ArticleSectionHeading">Articles</h3>
</aside>
</body>
</html>
CSS:
* {
margin: 0px 0px 0px 0px;
}
body {
background-image: url(background.svg);
background-size: cover;
background-attachment: scroll;
}
.nomargins {
margin: 0px 0px 0px 0px;
}
#MainHeader {
background: #F08819;
position: fixed;
z-index: 100;
height: 115px;
width: 100%;
min-width: 320px;
color: #000000;
opacity: 0.9;
}
#articles {
position: relative;
overflow: hidden;
}
#logo {
height: 100%;
max-height: 150px;
margin-top: -17px;
}
ul {
list-style-type: none;
padding-left: 0px;
max-height:auto;
overflow: visible;
display: inline-block;
}
#DistrictName_1 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 3.6em;
vertical-align: 60px;
margin-left: 26px;
}
#DistrictName_2 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.625em;
vertical-align: 80px;
}
.inline {
display: inline;
}
.block {
display: block;
}
Any suggestions on how to force District underneath? I'd like to keep it as text rather than merging the text into an .svg
Is this what you wanted to achieve?
Changed HTML
<ul>
<li style="max-width:auto">
<img src="EPASD logo.svg" id="logo"></img>
</li>
<li id="DistrictName_1">
<span>East Pennsboro</span>
</li>
<li id="DistrictName_2">
<div>Area School</div>
<div class="clear">District</div>
</li>
</ul>
CSS
ul li, #DistrictName_2 > div {
display:inline-block;
}
.clear {
float:left;
clear:both;
}
Working example here:
JSFiddle