I am using position: fixed to fix the name of the website at the top of the page however in doing so the div boundary finishes as soon as the text in the div is completed. It's not covering the complete screen length:
<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed;">
<div style="background-color: bisque; margin-top: 0%; font-family: Copperplate, Papyrus, fantasy; color: black; text-align: center;">
<h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1>
</div>
</nav>
This is how it's working with Fixed:
This is how I want it to get fixed at the top:
use 100vw
nav{
width = 100vw;
}
body{
height: 200vh;
background-image: linear-gradient(red, yellow);
}
nav {
position: fixed;
top:0;
left:0;
width:100vw;
/* extra */
height: 50px;
background: red;
margin-bottom: 0%;
}
.nagi{
background-color: bisque;
font-family: Copperplate, Papyrus, fantasy;
color: black;
text-align: center;
}
<body>
<nav>
<div class="nagi">
<h1>
Ratnesh Nagi
</h1>
</div>
</nav>
</body>
Set the right and left property to zero.
You can specify the horizontal position of positioned elements using right and left properties. See the snippet below:
<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed; right: 0; left:0;">
<div style="background-color: bisque; margin-top: 0%; font-family: Copperplate, Papyrus, fantasy; color: black; text-align: center;">
<h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1>
</div>
</nav>
You can use flex perhaps as an alternative with some other creative CSS
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.navbar {
/* force this to full width*/
align-self: stretch;
margin-bottom: 1rem;
}
.navbar-content {
text-align: center;
background-color: bisque;
font-family: Copperplate, Papyrus, fantasy;
color: black;
/* make it have a size without the */
border: 1px solid transparent;
}
.navbar-brand {
text-decoration: none;
}
.new-thing {
background-color: #bbdddd;
/* force this to full width just for fun */
align-self: stretch;
}
<div class="container">
<nav class="navbar navbar-light bg-light">
<div class="navbar-content">
<h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1>
</div>
</nav>
<div class="new-thing">I am next in line</div>
</div>
Related
I want to make header like on the photo:
Now it looks like that:
header
Here is the html code:
<header class="header">
<div class="container">
<nav class="navBar">
<div class="navBar-wrapper">
<div class="img-logo">
<img src="./img/logo.jpg" alt="" srcset=""></div>
<div class="home">Home</div>
<div class="aboutUs">About us</div>
<div class="findSpace">Find space</div>
<div class="share-space">Share space</div>
<div class="promoteSpace">Promote space</div>
</div>
</nav>
</div>
</header>
And here is css:
Is there any way to add space between logo and move the navigation to the left?
body{
font-family:"Poppins",sans-serif;
font-weight: 400;
}
.container{
max-width: 1110px;
margin-left: auto;
margin-right: auto;
}
.header{
height: 112px;
width: 100%;
background: #fff;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.navBar-wrapper{
display: flex;
align-items: center;
justify-content: space-between;
}
.navBar-wrapper div{
font-size: 16px;
line-height: 24px;
color: #323232;
margin-top: 28px;
}
.home{
font-weight: 700 !important;
color:#F78434 !important;
}
How can I make a space between logo and nav?
Tried to access second child using nth-child(2), but that didn't work.
Code snippet: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html
You can do that by simply applying margin-right: auto; to the img-logo-container.
Note that this will affect the parent containers justify-content: space-between;, so I would suggest applying another CSS-property such as gap: 10px; to navBar-wrapper.
Alternatively, you could wrap all the links in the navbar inside another container for better control in your navbar.
body {
font-family: "Poppins", sans-serif;
font-weight: 400;
}
.img-logo img {
max-width: 100px;
}
.img-logo {
margin-right: auto;
}
.container {
max-width: 1110px;
margin-left: auto;
margin-right: auto;
}
.header {
height: 112px;
width: 100%;
background: #fff;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.navBar-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.navBar-wrapper div {
font-size: 16px;
line-height: 24px;
color: #323232;
margin-top: 28px;
}
.home {
font-weight: 700 !important;
color: #F78434 !important;
}
<header class="header">
<div class="container">
<nav class="navBar">
<div class="navBar-wrapper">
<div class="img-logo">
<img src="https://4m4you.com/wp-content/uploads/2020/06/logo-placeholder.png" alt="" srcset=""></div>
<div class="home">Home</div>
<div class="aboutUs">About us</div>
<div class="findSpace">Find space</div>
<div class="share-space">Share space</div>
<div class="promoteSpace">Promote space</div>
</div>
</nav>
</div>
</header>
I'm pretty much stuck on a site that I'm trying to build in the responsiveness part
And in the position of the text.
The img background -
What I try to do it to make the img background full cover in big screens
and on the small screen, I want that they will see the ball in the img - it only works for me for big screens.
Next to this, I want to put H1 and p, but I want it will be near the ball in the background img
My code:
/* hamburger */
const hamburger = document.querySelector("#hamburger");
const navUL = document.querySelector("#nav-ul");
hamburger.addEventListener('click', () =>{
navUL.classList.toggle('show');
});
html,body{
padding: 0;
margin: 0;
font-family: 'Rubik', sans-serif;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
.container{
max-width: 1100px;
margin: 0 auto;
}
.btn{
background-color: #222f3e;
color: white;
padding: 6px 10px;
border-radius: 20px;
cursor: pointer;
}
.btn:hover{
color: #2e86de;
background-color: #fff;
}
/* Header */
header {
background-image: url(./img/main-img.jpg) ;
background-repeat: no-repeat;
background-position: bottom center ;
background-size: cover;
}
/* Navbar */
#navbar{
padding: 10px;
}
#navbar .container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.hamburger{
display: none;
background: transparent;
border: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.hamburger:focus{
outline: none;
}
#navbar ul{
padding-right: 0;
}
#navbar ul li {
display: inline-block;
font-size: 18px;
}
.logo a{
padding: 20px;
color: #fff;
}
/* Showcase Section */
#showcase{
min-height: 700px;
}
#showcase .container{
}
#media screen and (max-width: 767px){
#nav-ul{
display: none;
width: 100%;
}
#nav-ul.show{
display: flex;
justify-content: center;
}
.hamburger{
display: block;
}
}
<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./mystyle.css">
<title>Football</title>
</head>
<body>
<header>
<nav id="navbar">
<div dir="ltr" class="container">
<h1 class="logo">
Natan Football
</h1>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<ul id="nav-ul">
<li><a class="btn"href="#">צור קשר</a></li>
<li><a class="btn"href="#">מה מציעים</a></li>
<li><a class="btn"href="#">קצת עלינו</a></li>
<li><a class="btn" href="./index.html">דף הבית</a> </li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container grid">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</section>
</header>
<script src="./app.js"></script>
</body>
</html>
here i have provided a very basic code cause i don't have your full code.
I just added few css properties for you needs. If you run this code on big screen the .text will be top and center of the page. and you go in small screen text will be near the ball as you asked. You can even use px for height. It's just an example to show you.
body {
background: url("https://i.stack.imgur.com/08nIZ.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
}
.text {
position: absolute;
color: white;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
#media screen and (max-width: 767px) {
body {
height: 40vh;
}
.text {
top: 50%;
}
}
<div class="wrapper">
<div class="text">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</div>
Let me know if it doesn't work for you.
I'm trying to create a navigation bar with knockout text. I've tested this code with just using a <div> with a <p> inside, and got it to work properly. However, when I try to style my <nav> element using the same technique, the text remains black instead of becoming transparent.
HTML:
<body>
<nav class="flex-row">
<a class="flex-center" href="index.html" class="logo"><img src="images/logo-no-bkg.png" style="height:15vh;"></a>
<a class="flex-center" href="about.html">about</a>
<a class="flex-center" href="team.html">team</a>
<a class="flex-center" href="services.html">services</a>
<a class="flex-center" href="contact.html">contact</a>
</nav>
<div class="background">
<div class="text flex-center">TEST</p>
</div>
</body>
CSS:
body {
width: 100vw;
height: 100vh;
background-image: url("../images/nyc.jpeg");
background-position: top;
background-size: cover;
}
nav {
justify-content: space-around;
color: black;
background: rgba(255,255,255,0.5);
mix-blend-mode: screen;
}
nav a {
height: 20vh;
width: 20vw;
font-family: 'Bebas Neue', cursive;
font-size: 50px;
align-self: stretch;
position: relative;
text-align: center;
}
.background {
width: 100vw;
height: 100vh;
background-image: url('../images/nyc.jpeg');
}
.text {
height: 100%;
margin: 10px solid;
font-family: 'Bebas Neue', cursive;
font-size: 400px;
color: black;
background: rgba(255,255,255,0.5);
mix-blend-mode: screen;
}
Here's an image of both the <nav> bar and my test <div>, the <div> working correctly and the <nav> bar not working:
For whatever reason, it does not like that you are using your <body> element to try to do this. Wrapping everything inside the <body> in a separate <div class="background-2"> division, and applying the exact same styles to it as the body seems to solve the issue:
.background-2 {
width: 100vw;
height: 100vh;
/* background-image: url("../images/nyc.jpeg"); */
background-image: url("https://via.placeholder.com/200/f00");
background-position: top;
background-size: cover;
}
nav {
justify-content: space-around;
color: black;
background: rgba(255,255,255,0.5);
mix-blend-mode: screen;
}
nav a {
height: 20vh;
width: 20vw;
font-family: 'Bebas Neue', cursive;
font-size: 50px;
align-self: stretch;
position: relative;
text-align: center;
color:black;
}
.background {
width: 100vw;
height: 100vh;
/* background-image: url("../images/nyc.jpeg"); */
background-image: url("https://via.placeholder.com/200/0f0");
}
.text {
height: 100%;
margin: 10px solid;
font-family: 'Bebas Neue', cursive;
font-size: 400px;
color: black;
background: rgba(255,255,255,0.5);
mix-blend-mode: screen;
}
<body>
<div class="background-2">
<nav class="flex-row">
<!-- <a class="flex-center" href="index.html" class="logo"><img src="images/logo-no-bkg.png" style="height:15vh;"></a> -->
<a class="flex-center" href="index.html" class="logo">
<img src="https://via.placeholder.com/200/000" style="height:15vh;">
</a>
<a class="flex-center" href="about.html">about</a>
<a class="flex-center" href="team.html">team</a>
<a class="flex-center" href="services.html">services</a>
<a class="flex-center" href="contact.html">contact</a>
</nav>
<div class="background">
<div class="text flex-center">TEST</p>
</div>
</div>
</body>
Run and view code snippet in Full page mode to see it clearly.
I'm having a real issue trying to position a button at the bottom and center of a div. I ended up finally getting it to look right in full screen mode but I know the methodology is totally wrong.
I was able to align the text the way I wanted but the button not working the same with position and translate. I tried using bootstraps columns but that did not work. I'm not sure I fully understand positioning things relative to their parent elements or position at all. In addition, I tried
vertical-align:bottom
vertical-align:baseline
Neither of these worked.
What is the best practice for positioning a button or any element at the bottom and center of a div
.navbar-brand {
font-family: 'Great Vibes', cursive;
font-size: 30px;
margin: 5px 0px 5px 1px;
}
.navbar-brand {
color: #F05F40 !important;
}
.jumbotron {
background: url('http://i65.tinypic.com/1213l9y.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
width: 100vw;
margin-left: -15px;
}
.jumbotron h1 {
font-family: 'Great Vibes', cursive;
font-size: 75px;
color: white;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.jumbotron h4 {
font-family: 'Great Vibes', sans-serif;
font-size: 25px;
color: white;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btn-primary {
color: white;
background-color: #F05F40;
border-color: #F05F40;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
margin-top: 25%;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
color: white;
background-color: #ee4b28;
border-color: #ed431f;
}
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #F05F40;
border-color: #F05F40;
}
.btn-primary .badge {
color: #F05F40;
background-color: white;
}
.btn {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
border: none;
border-radius: 300px;
font-weight: 700;
text-transform: uppercase;
}
.btn-xl {
padding: 15px 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
The Authentic Gentleman
</div>
<nav class="pull-right collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
Blog
</li>
<li>
Advice
</li>
<li class="#">
About
</li>
</ul>
</nav>
</div>
</header>
<div class="container-fluid">
<div class="jumbotron">
<h1 class="text-center">The Authetnic Gentelman</h1>
<h4 class="text-center">Refine your life</h4>
<div class="text-center">
Find Out More
</div>
</div>
</div>
You can set it using position: absolute;. updated codepen
<div class="text-center btnDiv">
Find Out More
</div>
.jumbotron {
position: relative;
}
.btnDiv {
width: 100%;
left: 0;
bottom: 10px;
position: absolute;
}
You can also give this a try.
.parent{
text-align:center;
}
.button{
position:fixed;
bottom:0;
}
<div class='parent'>
<button class='button'>Save</button>
</div>
So add position:relative; to parent div and add the following css to the button:
position: absolute;
bottom: 0;
CSS:
#parent{
position:relative;
}
#button{
position:absolute;
bottom:0;
}
This will help you.
css:
#parent{
height: 200px;
width: 100%;
position: relative;
border: 1px solid blue;
}
#parent #child{
width:100%;
margin: auto;
text-align: center;
bottom: 0px;
position: absolute;
}
<div id="parent">
<div id="child">
<button>click here</button>
</div>
</div>
Cleaned up your code a little bit - you don't need to give class="text-center" to every element. Put text-align: center; in the parent div instead so the child elements get that attribute down too.
https://codepen.io/julysfx/pen/vZqXgj
You don't need to complicate the code with position: absolute;
You can do this simply with display:table;
Code is mentioned bellow...
<div class="parent">
<div class="buttonWrap">
<button>button</button>
</div>
</div>
.parent {
height: 200px;
width: 300px;
padding-bottom: 10px;
background: #444;
display: table;
}
.buttonWrap {
display: table-cell;
vertical-align: bottom;
}
button {
margin: 0 auto;
display: block;
}
So when I fully reduce the browser size, I have my website looking like this, which is how I want it to look:
http://oi66.tinypic.com/10x7zw4.jpg
But when I start stretching out the browser, the position of my picture in the center will begin to change and move all the way to the left. I want the picture to stay on the center regardless of whether I stretch out the browser or reduce it. Is there a way I can fix this issue? Been trying to find out how to solve the issue but cannot find any clue. Please help, thank you.
My HTML:
<html>
<head>
<title>Jason H Kang</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div id="span">
<h1 class="text-center">Jason H Kang</h1>
<div class="intro">
<p class="text-center">23 Years Old | Junior Web Developer | NJ</p>
</div>
<div class="hello">
<p class="text-center">
Hello I am Jason Kang. Welcome to my personal website!</br>Please feel free to contact me if you have further inquiries.</p>
</div>
</div>
<div class="image">
<img src="kangjason.jpg" alt="face" class="img-circle">
</div>
<!-- <div class="button">
<button type="button" class="btn btn-success">Contact Me!</button>
</div> -->
<div id="footer">
<p class="copyright">Copyright: Jason Kang 2015</p>
</div>
</body>
</html>
My CSS:
body {
background-color: #F8F8FF;
color: #000000;
}
.navbar {
background: rgba(114, 180, 39, 1)
}
.navbar .brand, .navbar .nav > li > a {
color: #FFFFFF;
margin-left: 14em;
padding-right: 0em;
font-family: Gill Sans;
font-size: 1.0em;
}
.navbar .brand, .navbar .nav > li > a:hover {
color: #000000;
}
#footer {
background:#000000;
width:100%;
height:47px;
position:fixed;
bottom:0px;
left: 0px;
}
.copyright {
padding-top: 19px;
padding-left: 1.3%;
font-family: Arial;
font-size: 0.9em;
color: white;
}
.intro {
padding-left: 0.35%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.hello {
padding-top: 1.5%;
padding-left: 5%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin-left: 10em;
margin-top: 1em;
position: relative;
}
To center a block level element, you use margin:auto:
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin: auto;
margin-top: 1em;
position: relative;
display:block;
}
JSFiddle Demo
Or, alternatively, you can set the parent to text-align:center;:
.image {
text-align: center;
}
JSFiddle Demo
Change your css for the img-circle class as follows
.img-circle {
width: 11.0em;
height: 11.0em;
margin: 0 auto;
border: 1px solid black;
display: flex;
}