I'm currently trying to do a navigation bar in HTML/CSS but I have a problem.
I would like to show the titles of the tabs at their right but they're bellow the 'nav' div box and I would like them to be above it.
Here are my html/css files :
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap');
* { font-family: 'Lato', sans-serif; }
.nav {
position: fixed;
top: 80px;
left: 20px;
bottom: 20px;
width: 75px;
height: 90%;
box-sizing: initial;
border-radius: 10px;
border-left: 5px solid #2e3137;
background: #2e3137;
overflow-x: hidden;
}
.nav ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-left: 5px;
padding-top: 20px;
}
.nav ul li {
position: relative;
list-style: none;
width: 100%;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.nav ul li .title {
position: absolute;
top: 15px;
left: 50px;
width: 60px;
height: 30px;
border-radius: 10px;
background-color: #000;
color: #fff;
}
.nav ul li .title strong {
position: absolute;
left: 10px;
top: 5px;
}
.nav ul li a {
position: relative;
display: block;
display: flex;
text-decoration: none;
color: #fff;
}
.nav ul li a .icon {
display: block;
min-width: 60px;
height: 60px;
line-height: 65px;
text-align: center;
}
.nav ul li a .icon ionicon { font-size: 1.5em; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="s-sidebar.css">
<!-- Icons <ion-icon> -->
<script type="module" src="https://unpkg.com/ionicons#4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons#4.5.10-0/dist/ionicons/ionicons.js"></script>
<title>Saori - StackOverflow</title>
</head>
<body>
<div class="nav">
<ul>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="person"></ion-icon>
</span>
</a>
<div class="title">
<strong>Profile</strong>
</div>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="chatbubbles"></ion-icon>
</span>
</a>
<div class="title">
<strong>Messages</strong>
</div>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="settings"></ion-icon>
</span>
</a>
<div class="title">
<strong>Settings</strong>
</div>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="help"></ion-icon>
</span>
</a>
<div class="title">
<strong>About</strong>
</div>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="log-in"></ion-icon>
</span>
</a>
<div class="title">
<strong>Login</strong>
</div>
</li>
</ul>
</div>
</body>
</html>
I tried soimon's answer on CSS - Allow an div to stick out of its parent but it didn't work for me.
What I have :
https://i.stack.imgur.com/1pRQ7.png
What I would like to have (bad edit) :
https://i.stack.imgur.com/0IvdG.png
You will see it if you remove overflow-x: hidden; from .nav but I'm not sure what you are trying to achieve here. The "titles" not above or below "nav". It is wrapped within "nav" because it is a fixed element.
Related
My Dropdown menu opens up but it goes down under behind the screen like unless I increase the navbar height it isn't visible.
here is my code.
I want it to come on top of everything so the user can actually see it.
It goes underneath the nav section, so is not visible.
.sub-menu {
display: none;
margin-top: 0 !important;
}
.navbar-header .navbar-ul .main-menu-items .about-us-menu #about-sub-menu {
z-index: 100;
position: relative;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu {
width: 150px;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu ul li a {
padding-top: 10px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.sub-menu ul li {
margin: 15px;
width: 120px;
position: relative;
/* padding: 15px; */
}
.navbar-header .navbar-ul .courses-sub-menu:hover .sub-menu ul li a {
width: 150px;
margin: 0 !important;
padding-top: 10px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu {
width: 180px;
}
.navbar-header ul li:hover .sub-menu {
display: block !important;
position: absolute;
background: #333333;
margin-top: 15px;
}
.sub-menu ul:hover {
display: block !important;
}
.navbar-header ul li:hover .sub-menu ul {
display: block;
/* margin: 10px; */
}
.sub-menu ul li:hover {
display: block;
background: #f5f5f7;
color: black !important;
}
.sub-menu ul li a {
color: #f5f5f7;
}
.navbar-header ul li:hover .sub-menu ul li {
display: block !important;
color: black;
width: 150px;
padding: 0 !important;
border-radius: 0;
text-align: center;
}
.sub-menu ul li a:hover {
color: black;
}
<div class="navbar-header" style="padding: 0; margin: 0; ">
<ul class="navbar-ul">
<div class="main-menu-items">
<li>
<a routerLink="/home"><img src="../../../assets/xyz" class="navbar-logo" alt=""></a>
</li>
<!-- logo -->
<!-- <li><a routerLink="/home">Home</a></li> -->
<!-- <li><a routerLink="/aboutus">About Us</a></li> -->
<li class="about-us-menu"><a routerLink="#">About Us</a>
<div class="sub-menu">
<ul id="about-sub-menu">
<li>
Gallery
</li>
<li>
Testimonials
</li>
<li>
Blogs
</li>
</ul>
</div>
</li>
<li class="courses-sub-menu"><a routerLink="/courses">Courses</a>
<div class="sub-menu">
<ul>
<li>
Science
</li>
<li>
Physics
</li>
<li>
Biology
</li>
<li>
Mathematics
</li>
<li>
Chemistry
</li>
<li>
Business Studies
</li>
<li>
Accountancy
</li>
<li>
Economics
</li>
<li>
Psychology
</li>
<li>
SAT/ACT
</li>
</ul>
</div>
</li>
Here you go.
Check out these CSS properties to achieve your desired result.
.main-menu-items {
background: none;
color: Black;
padding: 12px 26px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
min-width: 160px;
}
.sub-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.sub-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.sub-menu a:hover {background-color: #f1f1f1}
.dropdown:hover .sub-menu {
display: block;
position: absolute;
left: 100%;
top: 0;
}
.nav-wrapper {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="navbar-header">
<div class="nav-wrapper">
<div class="dropdown">
<button class="main-menu-items">About Us</button>
<div class="sub-menu">
Gallery
Testimonials
Blogs
</div>
</div>
</div>
<div class="nav-wrapper">
<div class="dropdown">
<button class="main-menu-items">Courses</button>
<div class="sub-menu">
Science
Physics
Biology
Mathematics
Chemistry
Business Studies
Accountancy
Economics
Psychology
SAT/ACT
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to have a navigation bar that doesn't have any extra space on the sides and on the top and bottom. However nothing seems to be. Is there a way I can fix this. An example of how I would like my navigation bar to look is dootrix.com
Here is an image to illustrate what the problem is: image
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
You have to disable the margin (https://www.w3schools.com/css/css_margin.asp) of your body tag. You can do this in your css. Look at what I did at the top of this css file. That should work.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
I'm building my own website for an assignment project for college and wondering if anyone could help me with this major issue I'm having.
When I open the html file of my website on my macbook which have the dimension 2880 x 1800 at home I have to adjust the view size to 80% on the google chrome bowser for the webpage to be in size proportion. However, at college the website is automatically in size proportion. My concern is when the person who is reviewing my website it's out of size proportion for them.
Is there a code which can adjust the website view depending on the users monitor size automatically?
I have seen some websites use the following html types of code. Does this help with the position of the content to fit and adjust to the dimensions of the monitor and browser.
.image:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
max-width: 100%;
When I open a online portfolio if I use the "Enter Responsive Design Mode" in the "Develop" option on my macbook you can clearly see the way I coded the content it is not in size proportion and has moved.
Here is actual view I want it to look like, I have loaded up my site in the google chrome browser and changed the view to 80%.
In addition, here is a view of my site on Safari, it's all out of alignment.
Furthermore, below is an example of a web developers portfolio which content fits exactly in size proportion on google chrome and safari no matter what dimensions of the monitor is. (This is what I'm trying to achieve)
Overall, I want to know if there is code which can fit my content to the users screen like how the web developers website looked above in the example therefore, when I open my site on google chrome, safari and mobile the content will look perfect and all aligned how I want it to look. Like this.
Lastly, below is my HTML & CSS for anyone who is willing to help me to review if I have included something wrong within the coding or could add anything which will help me achieve purpose of the post.
HTML
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
</body>
</html>
CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align:center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin:0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position:relative;
text-align: center;
width: 100%;
max-width:100%;
width: 100vw;
height: 100%;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding:0;
right:0;
bottom:0;
left:0;
}
.footertext{
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.shape {
content:url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
border-radius: 25px;
background:#4D5061;
color:white;
padding:3px;
margin:150px auto 0 797px;
width:250px;
max-width:100%;
height:250px;
position: absolute;
}
.shape2 {
background: linear-gradient(35deg, #4D5061, #4D5061);
border-radius: 85px;
color:white;
opacity: 0.9;
padding:0px;
margin:410px auto 0 798px;
width:250px;
max-width:100%;
height:40px;
left:200;
position: absolute;
}
</style>
Try updating the head section with this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
with in the head of the HTML file and have a look at CSS Media Queries these help you change the style depending of the size of the screen and it very dynamic
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position: relative;
text-align: center;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.footertext {
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.profile.box {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 250px;
margin: auto;
padding: 3px;
width: 250px;
}
.shape2 {
background: linear-gradient(35deg, #4D5061, #4D5061);
border-radius: 85px;
color: white;
height: 40px;
margin: 1% auto;
opacity: 0.9;
padding: 0px;
width: 250px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="profile box">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
</body>
</html>
Have a go at this; culprit for the annoying sizes are the margin added to shape and shape2 div's
First of all I would recommend you to learn more about the Bootstrap Grid for this. Bootstrap is an easy to use and install CSS-framework that is very good for developing responsive webpages (which is the term you are looking for).
If you want to do this yourself you can use media-queries in CSS for this.
Example
The CSS in the example below is only used on browserwindows that are between 520px and 699px. If the window size is not in this range this CSS is skipped.
#media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
This example is from w3schools. Look here for more information
How can I centre the two <div>s within the <hero> div?
Here is my codepen.
Just to make things more clear, I want to the photo of me and the grey rectangle shape in the centre over the background image.
HTML
<div class="hero">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
CSS
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position:relative;
width: 100%;
width: 100vw;
height: 100%;
height: 70vh;
}
.shape {
content:url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
border-radius: 25px;
background:grey;
color:white;
padding:3px;
margin:200px auto 0 auto;
width:200px;
height:200px;
position: absolute;
}
.shape2 {
background: linear-gradient(15deg, #4D5061, #4D5061);
border-radius: 85px;
color:white;
opacity: 0.9;
padding:0px;
margin:410px auto 0 auto;
width:250px;
height:40px;
left:200;
position: absolute;
}
HTML
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
</body>
</html>
CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align:center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin:0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position:relative;
text-align: center;
width: 100%;
width: 100vw;
height: 100%;
height: 70vh;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding:0;
right:0;
bottom:0;
left:0;
}
.footertext{
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.shape {
content:url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
border-radius: 25px;
background:grey;
color:white;
padding:3px;
margin:200px auto 0 auto;
width:200px;
height:200px;
position: absolute;
}
.shape2 {
background: linear-gradient(15deg, #4D5061, #4D5061);
border-radius: 85px;
color:white;
opacity: 0.9;
padding:0px;
margin:410px auto 0 auto;
width:250px;
height:40px;
left:200;
position: absolute;
}
</style>
I would wrap .shape, .shape2 in a new element, absolutely position that new element to center it horizontally/vertically, then center the 2 shape elements within that element.
.shapes {
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.shape, .shape2 {
margin-left: auto;
margin-right: auto;
}
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position: relative;
text-align: center;
width: 100%;
width: 100vw;
height: 100%;
height: 70vh;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.footertext {
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.shape {
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
border-radius: 25px;
background: grey;
color: white;
padding: 3px;
width: 200px;
margin-bottom: 1em;
}
.shape2 {
background: linear-gradient(15deg, #4D5061, #4D5061);
border-radius: 85px;
color: white;
opacity: 0.9;
padding: 0px;
width: 250px;
}
.shapes {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.shape,
.shape2 {
margin-left: auto;
margin-right: auto;
}
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="shapes">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
</body>
</html>
With .hero, add text-align: center; as a property.
Like so:
.hero{
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position:relative;
width: 100vw;
height: 70vh;
text-align: center;
}
And remove position: absolute from each element :)
Change the margin of the .shape into
margin:200px auto 0 550px;
then change the margin of the .shape2 into
margin:410px auto 0 525px;
It will solve the problem however it`s not that responsive
You could add
display: flex;
align-items: center;
justify-content: center;
to .hero
remove position element from hero, shape and shape2 class. then add
position:relative
to section1 class. then reduce the top margin of shape2 class. all that stuff at the bottom, the section2 and contact stuff with the arrows also seems off. It needs some tinkering as well
One technique to center abosolute positioned element is to add left: 50% and margin-left: negative 50% of the widht.
For example your shape:
.shape { content:url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
border-radius: 25px;
background:grey;
color:white;
padding:3px;
margin:200px auto 0 auto;
width:200px;
height:200px;
position: absolute;
left: 50%;
margin-left: -100px;
}
width is 200px so we add margin-left: -100px and left: 50%;
here is the fork of your codepen: http://codepen.io/adrianrios/pen/ZeaaNN
Q1
How can I center the text <h1>Welcome to Liam Docherty's Digital Portfolio</h1> in line with the navigation bar text? Here is an example the orange box is where I want the text to be placed.
Q2
I was also wondering how I can force the users screen to adjust the view to 80% when they open my website? The reason why is due to 100% makes certain things not look correct. For example my section 1 background image called is out of size porportion. `
HTML
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="page">
<h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
</div>
</footer>
</body>
</html>
CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align:center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav>li>a:hover {
background-color: rgba(17, 17, 17, 0.2);
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
nav-title {
display: block;
margin: 0 auto; /*auto will do the centering trick*/
width: 80%; /*or any width*/
position: relative;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position:absolute;
width: 100%;
width: 100vw;
height: 100%;
height: 70vh;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
//height: 95vh;
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
//height: 95vh;
background-color: #EDF7F6;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 5vh;
background-color: #4D5061;
text-align: center;
padding:0;
right:0;
bottom:0;
left:0:
}
h1{
font-size: 14pt;
margin:0;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
</style>
It's hard without having a live version to edit but
for Q1:
add a div around the text as such
<div class="centertext">
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
then add css as such
.centertext {
width: 100%;
position: absolute;
}
For Q2, I'm not really sure what you are talking about but if only images are not sizing right its better to size them through css rather than for a zoom out.
try adding css options such as background-size: contain; or background-size: cover;
Let me know if this works