friends. I am a very beginner of HTML and CSS
I am a bit confused as to how I can center the text(CUSTOMER, FAQ, and CONTACT) on the navigation bar.
I have tried vertically center-aligned but it still continues to stick to the top. Thank you very much for your help.
nav {
background-color: RGB(80, 80, 95);
height: 50px;
position: fixed;
top: 100px;
width: 100%;
}
nav a {
float: inline;
width: 200px;
padding-top: 10px;
height: 40px;
text-align: center;
font-size: 1.1em;
color: white;
text-decoration: none;
}
.pull-right{
text-aling: center;
}
body{
background-color:black;
font-family:Lobster;
color:white;
}
h1{
padding:0;
margin-top:0px;
font-size:5.0em;
padding-top:0%;
}
.btn-default{
background-color:black;
border-color:black;
color:#337ab7;
font-size:1.7em;
margin-top:1%;
}
.pageOne{
background:url("http://www.chairmanenglish.com/wp-content/uploads/2017/01/img_title_bg.jpg");
background-size:cover;
padding-bottom:10%;
padding-top:10%;
margin-top:80px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</header>
<div class="pageOne text-center" id="p1">
<ul class="nav nav-pills navbar-fixed-top">
<li class="logo-left-top">
<img src="http://www.chairmanenglish.com/wp-content/uploads/2017/01/img_bi_top.png" width="100px" heigth="50px">
</li>
<li class="pull-right">
CONTACT
</li>
<li class="pull-right">
FAQ
</li>
<li class="pull-right">
CUSTOMER
</li>
</ul>
I was able to get it to work with:
.pull-right{
width: 25%;
}
Along with a correction to some of your errors that others mentioned.
Please take a look here: http://codepen.io/Squeakasaur/pen/vxrgYd
Related
I'm setting up a portfolio page for an assignment. I made some changes to my code, and now my navbar isn't working properly. I can't get my page links to fit in my actual navbar they are sitting below it for some reason.
I've tried messing with the padding and margins, but that's not doing anything. It was working fine at one point but I'm not sure what changed.
HTML:
<nav>
<p>STEVEN KANG</p>
<ul>
<li class="rightLinks"><a data-scroll-target="contact">Contact</a></li>
<li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
<li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
</ul>
<div class="menu-toggle">
<i class="fa fa-bars"></i>
</div>
</nav>
CSS
nav {
background-color: black;
height:60px;
color: #666666;
position: fixed;
top:0;
left:0;
right:0;
width: 100%;
}
nav p {
font-weight: bold;
margin-top: 25px;
margin-left: 10px;
color: white;
text-align: left;
}
nav a {
color: red;
}
nav ul {
margin-bottom: 5em;
}
.rightLinks {
list-style: none;
float: right;
margin-right: 50px;
margin-left: 15px;
}
Those bio, portfolio, and contact links should be on the right centered inside the navbar mirroring my element saying my name.
I feel like it's a simple fix, I'm just not sure what's wrong right now.
I've taken a look at your code. It looks like you need to to utilise floats and a clearfix in order to achieve this.
Take a look at: https://codepen.io/mrmathewc/pen/OKbXRY
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Steven Kang - Developer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<nav>
<div class="float-left">
<p>STEVEN KANG</p>
</div>
<ul class="float-right">
<li class="rightLinks"><a data-scroll-target="contact">Contact</a></li>
<li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
<li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
</ul>
<div class="menu-toggle">
<i class="fa fa-bars"></i>
</div>
<div class="clearfix"></div>
</nav>
</body>
CSS:
* {
box-sizing: border-box;
}
body {
text-align: center;
}
h1 {
font-family: 'Rubik', sans-serif;
font-size: 48px;
}
h2 {
font-family: 'Rubik', sans-serif;
font-size: 30px;
}
h3 {
font-family: 'Karla', sans-serif;
font-size: 20px;
color: #0047b3;
;
}
p {
font-family: 'Karla', sans-serif;
font-size: 16px;
color: black;
font-weight: bold;
}
nav {
background-color: black;
height:60px;
color: #666666;
position: fixed;
top:0;
left:0;
right:0;
width: 100%;
}
nav p {
font-weight: bold;
margin-top: 25px;
margin-left: 10px;
color: white;
text-align: left;
}
nav a {
color: #0047b3;
}
nav ul {
margin-bottom: 5em;
}
.rightLinks {
list-style: none;
float: right;
margin-right: 50px;
margin-left: 15px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clearfix { clear: both; }
I would recommend looking into Flexbox though, floats can give you some headaches.
Here's a basic example: https://codepen.io/mrmathewc/pen/wVoWgV
You'll need to extend the above to your code. This may help you understand Flexbox more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am relatively new to bootstrap and html/css and so far I have been getting along pretty well. What I have been trying to do is increasing the height of the navbar to 80px. My problem is that now I cannot get the content of my navbar centered, they are just too high up.
It looks like this: https://gyazo.com/4ba22961033e9bafa13aac44a50de3f6
Thanks :)
Here is my whole CSS code:
* {
box-sizing: border-box;
}
body {
background-color:#f6f6f6;
background-image: url("img/bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size:cover;
overflow-x:hidden;
overflow-y:scroll;
margin:0;
padding:0!important;
}
.navbar {
position: relative;
border:1px solid transparent;
min-height: 80px;
border-top: 0;
border-bottom:1px solid #e7e7e7;
margin-bottom:0;
z-index: 100;
}
.navbar-default {
height: 80px;
}
.navbar-brand {
float:left;
font-size:18px;
line-height:80px;
height:80px;
padding:0 15px;
}
.navbar-toggle {
margin-top: 23px;
padding: 9px 10px !important;
}
.navbar-nav > li > a {
height: 80px;
padding-top:10px;
padding-bottom:10px;
line-height:20px;
border-left: 1px solid #e7e7e7;
}
.navbar-left {
float:left!important;
}
.navbar-right {
float:right!important;
margin-right:-15px;
}
.navbar-nav>li>.dropdown-menu {
margin-top:0;
border-top-right-radius:0;
border-top-left-radius:0;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap required meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Links to stylesheets and scripts -->
<link href="style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Test</title>
</head>
<body>
<!-- NavBar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Leaderboards</li>
<li>Support</li>
<li class="dropdown">
<a class "dropdown-toggle" data-toggle="dropdown" href="#">(username&pp)
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Statistics</li>
<li>History</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Try adding the following flex properties inside of your .navbar-nav > li > a CSS block:
display: flex;
align-items: center;
So the .navbar-nav > li > a block should now look like this:
.navbar-nav > li > a {
display: flex;
align-items: center;
height: 80px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
border-left: 1px solid #e7e7e7;
}
CodePen Demo
I think I get the problem(may be)... use this css code...I think this is exactly what you need
.navbar.navbar-default {
min-height: 80px;
}
.container-fluid {
margin-top: 15px;
}
to change font-size change it differently for .navbar-header and .navbar-brand
When I try to minimize this page/resize it to a size smaller than my screen, espicially when it is minimized in a vertical manner (where the height of the page is longer than the width) the footer becomes blank/white and the background-image becomes shorter.
Take a look here.
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<script src="https://use.fontawesome.com/4c228f39e6.js"></script>
<title>Magna Golf</title>
</head>
<body>
<nav class = "top-navigator">
<div class ="float-left">Magna Golf</div>
<div class ="float-right">
<ul>
<li class ="navi-links">Contact Us</li>
<li class ="navi-links"> Members Login</li>
<li class ="navi-links">About Us</li>
<li class ="navi-links">Guests</li>
<li class ="navi-links">Adena Meadows</li>
</ul>
</div>
</nav>
<div class = "center-container">
<div class ="logo"><img src ="horse.png" alt="Magna Golf Logo>" width="130px"</img>
</div>
<div class ="footer">
<div class="footer-text">Check Us out on Social Media
</div>
<div class="footer-social">
<ul>
<li class="social-links"><a class = "social" href="#" target="_blank">Facebook</a></li>
<li class="social-links"><a class = "social" href="#" target="_blank">Twitter</a></li>
<li class="social-links"><a class = "social" href="#" target="_blank">Instagram</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS---
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
}
a{
color:gold;
text-decoration: none;
}
a:hover{
color:white;
}
.top-navigator{
width:100%;
height:50px;
background-color:rgba(0,0,0,0.4);
backgroud-color:grey;
}
.float-left{
color:gold;
font-family:Cinzel, serif;
letter-spacing: 0.1em;
word-spacing: 0.0em;
width:160px;
font-size:20px;
position:relative;
top:25%;
margin-left:4%;
}
.float-right{
font-family:Cinzel, serif;
text-transform:lowercase;
font-size:12px;
width:530px;
position:relative;
margin-left:58%;
bottom:20%;
}
.navi-links{
display:inline;
margin-left:25px;
}
.center-container{
width:100%;
height:calc(100vh - 50px);
background-image:url("http://magnagolf.com/images/slideshow/bgd3.jpg"); background-size:100%;
background-repeat: no-repeat;
}
.logo{
width:75px;
position:relative;
margin:0 auto;
top:12px;
}
.footer{
width:100%;
position:absolute;
height:20px;
bottom:0; /*to get footer to sick to bottom*/
/*
background-color:rgba(0,0,0,0.4);
*/
}
.footer-text{
width:300px;
height:20px;
text-align:center;
font-family:Cinzel, serif;
font-size:14px;
color:white;
position:relative;
margin-Left:1%;
}
.footer-social{
font-family:Cinzel, serif;
font-size:13px;
width:260px;
position:relative;
bottom:23px;
margin-left:78%;
}
.social-links{
display:inline;
color:white;
margin-left:15px;
}
.social{
color:white;
}
The background image is a url so take sometime to post the code in your editor to see what I mean.
Cheers friends,
Because .center-container's background isn't covering the whole div when the viewport is narrow. Your footer doesn't become blank... it's just positioned over a white background when .center-container's background image doesn't cover the bottom of that element, so the white text/links in the footer on top of a white background means you can't see the contents of the footer.
Changing the background to background-size: cover will ensure the background is applied to the whole div regardless of the shape of .center-container when you resize the window.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {}
a {
color: gold;
text-decoration: none;
}
a:hover {
color: white;
}
.top-navigator {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.4);
backgroud-color: grey;
}
.float-left {
color: gold;
font-family: Cinzel, serif;
letter-spacing: 0.1em;
word-spacing: 0.0em;
width: 160px;
font-size: 20px;
position: relative;
top: 25%;
margin-left: 4%;
}
.float-right {
font-family: Cinzel, serif;
text-transform: lowercase;
font-size: 12px;
width: 530px;
position: relative;
margin-left: 58%;
bottom: 20%;
}
.navi-links {
display: inline;
margin-left: 25px;
}
.center-container {
width: 100%;
height: calc(100vh - 50px);
background-image: url("http://magnagolf.com/images/slideshow/bgd3.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.logo {
width: 75px;
position: relative;
margin: 0 auto;
top: 12px;
}
.footer {
width: 100%;
position: absolute;
height: 20px;
bottom: 0;
/*to get footer to sick to bottom*/
/*
background-color:rgba(0,0,0,0.4);
*/
}
.footer-text {
width: 300px;
height: 20px;
text-align: center;
font-family: Cinzel, serif;
font-size: 14px;
color: white;
position: relative;
margin-Left: 1%;
}
.footer-social {
font-family: Cinzel, serif;
font-size: 13px;
width: 260px;
position: relative;
bottom: 23px;
margin-left: 78%;
}
.social-links {
display: inline;
color: white;
margin-left: 15px;
}
.social {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<script src="https://use.fontawesome.com/4c228f39e6.js"></script>
<title>Magna Golf</title>
</head>
<body>
<nav class="top-navigator">
<div class="float-left">Magna Golf</div>
<div class="float-right">
<ul>
<li class="navi-links">Contact Us</li>
<li class="navi-links"> Members Login</li>
<li class="navi-links">About Us</li>
<li class="navi-links">Guests</li>
<li class="navi-links">Adena Meadows</li>
</ul>
</div>
</nav>
<div class="center-container">
<div class="logo"><img src="horse.png" alt="Magna Golf Logo>" width="130px" </img>
</div>
<div class="footer">
<div class="footer-text">Check Us out on Social Media
</div>
<div class="footer-social">
<ul>
<li class="social-links"><a class="social" href="#" target="_blank">Facebook</a></li>
<li class="social-links"><a class="social" href="#" target="_blank">Twitter</a></li>
<li class="social-links"><a class="social" href="#" target="_blank">Instagram</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Your Problem
The background image is a landscape image. Resizing the page will resize the image, but only within it's proportions (it is constrained).
When you resize to an area where the image will not cover some of the page, the footer (with white text) will appear on top of the page background (which is white), and thus the text will seem to "disappear".
Solutions
One way to solve this is to add the background-size:cover style to .container_center, to turn off the constraints on image resizing, and just make it fill the visible area. Note that in some situations, this will crop the image, and for people with really big monitors, it may appear stretched.
However, you could (and should) also make a mobile site view using media queries, and simply change the overall look of your site at that point - some of your links disappear at smaller screen widths...
so, managed to sort my nav bar out the way I like it... However now I've moved onto what I want underneath it. Except I cannot appear to 'gain control' over the 'list' element... What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>St George's League - Home</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<Div class="container">
<ul>
<div class="nav">
<li><img src="images/sgl-logo.jpg" height="145px" alt="SGLLogo" /></li>
<div class="navbar">
<li class="contact">CONTACT</li>
<li class="about">ABOUT
<strong><li class="leagues">LEAGUES</li></strong>
<li class="home">HOME</li>
</div><!--Navbar End-->
</div><!--Nav End-->
</div><!--Container End-->
</div class="list"><strong>
<li>Essex</li>
<li>London</li>
</strong></div><!--Leagues End-->
</body>
</html>
.container {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: arial;
z-index: 2;
}
.navbar a {
float: right;
text-decoration: none;
padding-left: 10px;
color: #003399;
}
.nav li {
display: inline;
}
.navbar {
float: right;
padding-top: 67px;
padding-bottom: 45px;
padding-right: 0px;
z-index: 2;
}
#intro img {
position: absolute;
left:0px;
display: block;
margin: 0;
max-width: 100%;
height: auto;
z-index: 1;
}
.list {
position:relative;
top:300px;
}
.list a {
position:relative;
text-decoration:none;
float:left;
font-family:arial;
font-size:75px;
color:black;
}
li a{
color: #000000;
}
This is all you need to gain control of these in css. See the jsfiddle example here
http://jsfiddle.net/fwvc6zsc/
If you want more certainty that you are using the right one you could also change it like this:
strong li a{
color: #000000;
text-decoration: none;
}
Because you using different class
Use this:
.navbar li {
css code
}
I'm trying to overlay a transparent box that spans the width of the page at the navigation bar, and then one that spans the entire height of the page. I can get the horizontal bar in, but when I do I can't lower it from the top of the page without lowering all other content as well. Any help would be greatly appreciated.
<html>
<head>
<title>Welcome Home</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="topbar">
<div id="container">
<div id="header">
<div id="logo">
<img id="logo" src="images/WelcomeHomeLogo.png">
</div>
<ul class="toolbar">
<li id="left"> About Us </li>
<li id="left"> Volunteer </li>
<li id="left"> Donate </li>
<li id="left"> Contact Us </li>
<li id="left"> Blog </li>
<li id="right"> Events </li>
</ul>
</div>
</div>
</div>
CSS:
body{
background-image:url("../images/thewood.jpeg");
background-size: cover;
}
#container{
background-color:#ffffff;
width: 69%;
margin-left: auto;
margin-right: auto;
opacity:0.7234;
filter:alpha(opacity=60);
height: 950px;
}
#topbar{
filter:alpha(opacity=60);
opacity:0.7234;
width: 100%;
background-color:#ffffff;
height:150px;
}
li{
float: left;
list-style: none;
display: inline;
color: black;
font-size: 170%;
padding-right:48px;
margin-top: 105px;
}
#logo{
float:left;
margin-top:40px;
padding-right:20px;
padding-left:8px;
}
ul{
display: inline;
}
#right{
float: right;
padding-left:none;
}
a:link {text-decoration:none;color:black;}
a:visited {text-decoration:none;color:black;}
a:hover {text-decoration:none;color: black;}
a:active (text-decoration:none;color:black;}
There are more elegant ways, but this will get you where you need to be with minimal change to your current set-up.
Make #topbar a separate element (not a container for #container) like so:
<div id="topbar"></div>
<div id="container">
<div id="header">
and then adjuste the margins CSS for #topbar and #container accordingly
#container {
background-color:#ffffff;
width: 69%;
margin-left: auto;
margin-right: auto;
opacity:0.7234;
filter:alpha(opacity=60);
height: 980px;
margin-top: -180px; /*Push back to top of page (height of #topbar + 30px)*/
}
#topbar {
filter:alpha(opacity=60);
opacity:0.7234;
width: 100%;
background-color:#ffffff;
height:150px;
margin-top: 30px; /*Move it down*/
}