I have the problem where I cannot make my content div take up all the space of the content area.
I have a fixed footer and static header. The content div is actually inside the div from a RenderBody directive in ASP.Net Core MVC.
Here are what a couple of pages look like with the footer at the bottom:
So I actually don't mind that the blue content div does not come down to the bottom. I think I can take it or leave it.
But then I created this page with a big image in the content div:
In this last pic you can see the image goes into the footer and extends the height of the footer element from it's orginal 60px height.
Here is my style sheet:
html, body {
height: 100%;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
white-space:nowrap;
line-height: 60px;
}
.content {
background-color: cornflowerblue /*aliceblue*/;
border: 1px solid black;
padding:10px;
}
.title {
/*background-color: cornflowerblue;*/
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/* anchor styles */
.nav-link, .dropdown-item {
color: blue !important;
}
.nav-link:hover, .dropdown-item:hover {
color: darkgreen !important;
background-color:aliceblue;
}
.green-header-nav{
color: black;
}
.green-header-nav:hover {
color: black;
}
.facebook-anchor {
color: #4267B2
}
.facebook-anchor:hover {
color: #4267B2
}
/* end anchor styles */
Here is my layout page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"
/>
<title>NeuroplasticityTherapies -
#ViewData["Title"]</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="row" style="background-color:black">
<div class="col-3">
<img src="~/Images/dark-blue-brain.jpg" />
</div>
<div class="col-9 text-center">
<div class="text-light" style="height:100%">
<h1>Neuroplasticity Therapies</h1>
<div style="border:1px solid green; padding:15px; border-radius:25px; display:inline-block;">
There are answers and where there are answers there is hope.
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light">
#*<a class="navbar-brand" href="#">Navbar</a>*#
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" asp-action="Index">
Neuroplasticity Therapies
</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="AboutTheFounder">
About The Founder
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Functional Neurology
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Functional Medicine</a>
<a class="dropdown-item" href="#">Neural Plasticity</a>
<a class="dropdown-item" href="#">Alternative Medicine</a>
<a class="dropdown-item" href="#">Integrative Medicine</a>
<a class="dropdown-item" href="#">Holistic Medicine</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Survey</a>
</li>
</ul>
</div>
</nav>
<div class="row bg-info">
<div class="col-sm-3" style="border:2px solid black; text-align:center;font-weight:bold">
Contact Us
</div>
<div class="col-sm-6" style="border:2px solid black; text-align:center;font-weight:bold; background-color:black;">
<a class="facebook-anchor"
href="https://www.facebook.com/groups/NeuroplasticityTherapies/"
target="_blank">
Like Us On Facebook
<i class="fab fa-facebook"></i>
</a>
</div>
<div class="col-sm-3" style="border:2px solid black; text-align:center;font-weight:bold">
<a class="green-header-nav" asp-action="BrainMap">
Brain Map</a>
</div>
</div>
<div class="container-fluid">
#RenderBody()
</div>
<footer id="footer" class="border-top footer text-muted">
<div class="container">
© 2020 - NeuroplasticityTherapies
</div>
</footer>
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
#*<script>
console.log(`footer.top: ${document.getElementById("footer").offsetTop}`);
var footer_top = document.getElementById("footer").offsetTop;
document.getElementById("content_div").style.bottom
= footer_top;
</script>*#
</body>
</html>
Here is a content page with the blue background for "About The Author":
#{
ViewData["Title"] = "AboutTheFounder";
}
<h1 class="title">About The Founder</h1>
<div id="content_div" class="content">
<b>Gemma Herbertson</b>
<p></p>
Gemma has received training from all different parts of the world to include:
<ul>
<li>Institute of Neuro-Physiological Psychology (UK)</li>
<li>Rhythmic Movement Therapy, JIAS (Denmark)</li>
<li>Family Hope Centre (USA)</li>
<li>Carrick Institute (USA)</li>
<li>Kharrazian Institute (USA)</li>
<li>Gillespie Approach (USA)</li>
<li>The Neuro Science Academy (Australia)</li>
</ul>
Her approach is to work from the <u>bottom-up</u>:
getting the brain to a healthy state
(well-fuelled with nutrients and oxygen),
and then providing individual neuroplasticity exercises
for optimum effect.
</div>
Here is the page with the image on it in the content area. The page is named "BrainMap". This one is raising the issue for me. I believe if there is too much content on any page I will run into this issue.
#{
ViewData["Title"] = "BrainMap";
}
<h1>BrainMap</h1>
<div id="content_div" class="content">
<img src="~/Images/brain_map.jpg" class="center" />
</div>
Don't know why I went down the road of color on the content background but I really want it now I think it is looking good.
You may try using the calc in CSS:
e.g.
if your header height = 100px, and footer = 80px fixed, then you can set your content height = calc(100% - 180px)
Refer: https://www.w3schools.com/cssref/func_calc.asp
html {
height: 100%;
}
body {
position: relative;
margin: 0;
padding-bottom: 60px;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}
.content {
background-color: cornflowerblue /*aliceblue*/;
border: 1px solid black;
padding: 10px;
height: calc(100vh - 260px);
/*you can change 260px accordingly to your needs*/
}
...
Here is the result of this demo:
Related
I am troubling in navbar positioning.
My navbar items are disappeared after creating the image below. I have tried to adjust the position of elements but still doesn't work:((
I m also trying to making a fixed-top navbar, it doesn't work too:((
I am bad in positioning, hope someone can show me how to solve the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.carousel-item{
height:32rem;
background:url(https://picsum.photos/200/300);
color:white;
position:relative;
top:0;
}
.container{
position:absolute;
bottom: 0;
left: 0;
right:0;
padding-bottom: 50px;
}
nav{
min-height: 6vh;
background-color: black;
position: fixed;
top: 0;
overflow: hidden;
width: 100%;
}
nav .navbar-nav{
position:relative;
}
nav .navtoggler .navbar-toggler-icon{
background-color: white;
color:lightgray;
margin-left: 0px;
}
nav .logo{
font-size: 2em;
text-decoration: none;
color:white;
font-weight:bolder;
font-family:Arial, Helvetica, sans-serif;
}
nav .collapse a{
font-weight: bold;
font-size: medium;
color:lightgrey;
text-transform: uppercase;
text-decoration: none;
text-align: center;
word-spacing: 1px;
}
nav .collapse a:hover{
color:hotpink;
}
nav .navbar-nav ul{
list-style: none;
}
nav .nav-link{
display:flex;
width:30%;
letter-spacing: 1px;
word-spacing: 10px;
}
nav .btn{
border:1px solid hotpink;
color:white;
}
nav .btn:hover{
color:hotpink;
}
.main{
margin-top: 30px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-lightdark my-3">
<div class="container ">
<a class="logo " href="index.html" aria-current="page">
<img src="img/logo.png" alt="Logo" style="width:50px; height:55px;"class="d-inline-block mt-2">Fit Fit Fitness
</a>
<button class="navbar-toggler navbar-light bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<!--Related links to other aspects of the website(only for design purpose, not part of the project) -->
<ul class="navbar-nav ms-auto mb-2">
<li class="nav-item">
<a class="nav-link" href="#fp-section2-thelatest">TheLatest</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fp-section3-workout">Workout</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Food&Nutrition</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Athlete&Celebrities</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Apparel&Gear</a>
</li>
</ul>
<button class="btn btn-small" type="submit">Search</button>
</div>
</div>
</nav>
<main role="main">
<div class="carousel-item active">
<div class="container">
<span class="carousel-artCategory">Food & Nutrition › Weight Loss</span>
<h1 class="carousel-artTitle">Four Easy Change Ups You Can Do Today To Burn More Fat</h1>
<p>
<span class="carousel-artCite">By Train
<time datetime="2017-02-14"> 14 Jul, 2022</time>
</span>
</p>
Read
<a></a>
</div>
</div>
</main>
</body>
</html>
I have tried to insert keyword " fixed-top" into the class of nav, but it doesn't working:((
Besides,
When using position:absolute; the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, meaning changing it to position:sticky; or removing the line entirely in the container class should fix your issue.
In the picture below you can see that my Skills text is in the section where it is not supposed to be which is the home-section
In the above picture, you can see that Skills has appeared in the section of the home. Note that I used Bootstrap row to style my content
Below is the html code ------- <-- I added bootstrap -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/29ea37403a.js"
crossorigin="anonymous"
></script>
</head>
<body>
<section id="home-section">
<nav class="navbar navbar-expand-lg navbar-light">
<h1 class="navbar-brand">ᔕᗩᗰᑌᗴᒪ</h1>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="home-contect">
<h1 class="home-title">I have software development experience</h1>
<h5 class="home-description">
Hi! I'm a software developer - Developing elegant mobile sofwares
for companies all over the world
</h5>
<div class="button-con">
<button
type="button"
class="home-button btn btn-lg btn-warning download-button"
>
Let's Talk <i class="fa-solid fa-paper-plane"></i>
</button>
<button
type="button"
class="home-button btn btn-lg btn-outline-warning download-button">
Resume <i class="fa-solid fa-arrow-down"></i>
</button>
</div>
<div class="links">
<h6>Check Out My
<div class="home-icon-container" id="github"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-linkedin-in"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-twitter"></i> </div>
</h6>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<img
class="personal-photo"
src="assets/portfolio-image.png"
alt="A picture of me"
/>
</div>
</div>
</section>
<section title="skill-section">
<h1>Skills</h1>
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Below is my css styling
/* Home Section */
#home-section{
padding-left: 10%;
padding-right: 10%;
}
h1{
text-align: left;
font-size: xxx-large;
}
.personal-photo{
position: absolute;
margin-left: 11%;
}
.btn{
margin-top: 15px;
}
.home-description{
text-align: left;
padding: 2% 0;
}
.home-button{
margin-right: 4px;
}
.home-icon{
color: black;
}
.home-icon-container#github{
margin-left: 20px;
}
.home-icon-container{
margin-top: 15px;
margin-right: 13px;
padding: 11px;
border-radius: 100%;
background-color: #dcedc8;
display: inline-block;
}
/* skill-section */
#skill-section{
background-color: gold;
padding: 5% 10%;
}
/* media-queries */
#media (min-width: 500){
.personal-photo{
width: 0px;
}
}
#media (max-width: 768px){
h1.home-title{
text-align: center;
}
.home-description{
text-align: center;
}
.button-con{
text-align: center;
}
.links{
text-align: center;
}
.personal-photo{
width: 50%;
}
}
The image has a display property of 'absolute'. MDN.
It may need more of a margin to avoid covering up the text, but you're probably better off using a different way to position the image instead of using absolute.
I have a centered heading within a nav which causes the links in the nav to wrap before the nav-bar collapes -
What I'd like to do is just have the links collapse earlier than they currently are. I've looked over all the answers to this question and haven't been able to find an answer that works for what I'm trying to accomplish. Down below is my last test. I thought if I changed the width of the custom header using a media query that would help but it hasn't. As of right now when the links collapse the hamburger icon is also floating to the left of the centered text. I'll worry about that later.
<nav class ="navbar navbar-expand-xl navbar-light bground">
<a class ="navbar-brand" href ="#"> NavBar Testing </a>
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#colNav">
<span class ="navbar-toggler-icon"></span>
</button>
<div class="customHead">
<text>Centered horizontally and vertically</text>
</div>
<div class ="collapse navbar-collapse" id ="colNav">
<ul class ="navbar-nav ml-auto">
<li class ="nav-item">
<a class ="nav-link" href="#"> Services </a>
</li>
<li class ="nav-item">
<a class ="nav-link" href ="#"> About Us</a>
</li>
<li class ="nav-item">
<a class ="nav-link" href ="#"> Contact Us </a>
</li>
</ul>
</div>
</nav>
.navbar-collapse {
background-color: red;
float: right;
width: 25%;
}
.navbar-nav, .nav-link{
background-color: yellow;
color: red !important;
}
.customHead {
width: 100%;
position: relative;
background: red;
}
text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -130%);
background: orange;
margin-top: 10px;
}
#media only screen and (max-width: 1200px) {
.customHead {
width: 80%;
}
.navbar-toggler {
background-color: red;
float: right;
}
}
There is other CSS than what's displayed here so it's tough to know exactly. But one solve could be:
<!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>
<style>
.flex {
flex: 1;
display: flex;
}
.horizontal-center {
justify-content: center;
}
.horizontal-end {
justify-content: flex-end;
}
.vertical-center {
align-items: center;
}
.navbar-nav {
display: flex;
}
.nav-link{
background-color: yellow;
color: red !important;
margin-left: 10px;
}
li {
list-style: none;
}
</style>
</head>
<body>
<nav class="flex">
<div class="flex vertical-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#colNav">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"> NavBar Testing </a>
</div>
<div class="flex vertical-center horizontal-center">
<text>Centered horizontally and vertically</text>
</div>
<div class="flex horizontal-end vertical-center">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"> Services </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Contact Us </a>
</li>
</ul>
</div>
</nav>
</body>
</html>
I am having a problem whenever I scroll my page or content, the Sidebar is being scrolled down as well which leaves the navbar at the top and produce a gap in between. Here is the picture of the problem.
How to fix this UI problem. As you can see there's a gap in between, and if I scroll it down, the gap becomes larger.
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<!-- End -->
<!-- sIDEBAR -->
<div class="sidebar">
<a class="active" href="<?php echo base_url(); ?>">Dashboard</a>
<a class="" href="<?php echo base_url(); ?>">Bookes</a>
<a class="" href="<?php echo base_url(); ?>">Clothes</a>
<a class="" href="<?php echo base_url(); ?>">Electronics</a>
</div>
<div class="content">
body {margin:0;}
/*Sidebar*/
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
top:80px;
height: 100%;
overflow: auto;
}
/*Navbar*/
.navbar {
position:fixed;
top:0;
left:0;
height:80px;
width:100%;
background:red;
}
/*Main content*/
main {margin-top:120px; margin-left:240px;}
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">App</a>
</nav>
<!-- End -->
<main>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
</main>
<!-- sIDEBAR -->
<div class="sidebar">
<a class="active" href="<?php echo base_url(); ?>">Dashboard</a>
<a>1</a>
<a>2</a>
<a >3</a>
<a>4</a>
</div>
<div class="content">
Both your navbar and sidebar need to be position: fixed. That way they wont be affected by the scroll.
I know its bit late, but still to help community.
Code:
<aside class="left-sidebar">
<div class="sidebar">
<nav >
<span class="divider"></span>
<a class="active" href="<?php echo base_url(); ?>">Dashboard</a>
<a class="" href="<?php echo base_url(); ?>">Bookes</a>
.
.
</nav>
<div>
</aside>
CSS:
.left-sidebar {
position: relative;
width: 240px;
height: 100%;
background-color: $darkBlue;
background: linear-gradient(180deg, #0072C0 15%, $darkBlue 100%);
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
}
.divider{
display: block;
border-bottom: 1px solid rgba(255,255,255,0.10);
width: 170px;
margin: 0 auto;
}
<!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>
<style>
.sidebar {
margin: 0;
padding: 0;
width: 201px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 999px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<br><br>
<div class="sidebar">
<a class="active" href="<?php echo base_url(); ?>">Dashboard</a>
<a class="" href="<?php echo base_url(); ?>">Bookes</a>
<a class="" href="<?php echo base_url(); ?>">Clothes</a>
<a class="" href="<?php echo base_url(); ?>">Electronics</a>
</div>
<div class="content">
</body>
</html>
I have a problem with the positioning (?) of my div boxes. I have a div box for my navigation bar.
I want a div box right under the navigation bar in the center, which can be filled with some text.
I tried:
.navigation {
background-color: black;
position: fixed;
width: 1920px;
left: 0px;
top: 0px;
}
.inhalt {
position: realative;
margin: 0px auto;
width: 600px;
top: 600px;
background-color: white;
}
<div class="navigation">
<table>
<tr>
<th><img src="logo.jpeg"></th>
<th></th>
<th></th>
<th>Startseite</th>
<th>Beats</th>
<th>Preise</th>
<th>Kontakt</th>
</tr>
</table>
</div>
Thanks for any answer!!
1- first, .inhalt class position must be "relative" not "position:realative;" as you have written above so the "top" property could work.
2- give height to your second box so you can see it.
3- When elements are positioned, they can overlap other elements. you can solve this by either give your navigation bar "sticky" position or if you want to use fixed position, use "top" property to solve the problem. I add a snippet for this solution.
4- you can use first give your navigation bar relative position and then on scrolling give it a fixed position. see the example on codepen.
.navigation{
background-color: black;
position: fixed;
width: 100%;
left: 0px;
top: 0px;
z-index: 99999;
}
.inhalt{
position:relative;
width: 600px;
height: 500px;
top: 30px;
margin: 0px auto;
background-color: lightblue;
}
<div class="navigation">
<table>
<tr>
<th><img src="logo.jpeg"></th>
<th></th>
<th></th>
<th>Startseite</th>
<th>Beats</th>
<th>Preise</th>
<th>Kontakt</th>
</tr>
</table>
</table>
</div>
<div class="inhalt"></div>
Your question is vague, but this should give you some idea to work with:
.navigation {
background-color: black;
float: left;
position: fixed;
width: 1920px;
left: 0px;
top: 0px;
float: left
}
.inhalt {
float: left;
text-align: center;
top: 15%;
left: 10%;
margin: 0px auto;
width: 100%;
background-color: white;
font-size: 20px;
}
<div id="wrapper">
<div class="navigation">
<table>
<tr>
<th><img src="logo.jpeg"></th>
<th></th>
<th></th>
<th>Startseite</th>
<th>Beats</th>
<th>Preise</th>
<th>Kontakt</th>
</tr>
</table>
</div>
<div class="inhalt">
<p> Some random Text </p>
</div>
</div>
Also you should prefer using lists <li> for your navigation, since tables can be a nightmare to work with in that particular usecase.
Ok so in addition to what explained Phanti, your HTML has an issue as there are two times the closing tab
That would be my CSS I removed some of the instructions that were not making sense to me like the fix width:
.navigation {
background-color: black;
float: left;
position: fixed;
width: 100%;
height:40px;
left: 0px;
top: 0px;
float: left
}
.inhalt {
float: left;
text-align: center;
margin-top: 60px;
margin: 0px auto;
width: 100%;
background-color: white;
font-size: 20px;
}
That would be my HTML :
<div id="wrapper">
<div class="navigation">
<table>
<tr>
<th><img src="logo.jpeg"></th>
<th></th>
<th></th>
<th>Startseite</th>
<th>Beats</th>
<th>Preise</th>
<th>Kontakt</th>
</tr>
</table>
</div>
<div class="inhalt">
<p> Some random Text </p>
</div>
</div>
Overall, since you seem to be starting on html and CSS, I would storngly advise you to start with a CSS Framwork like bootstrap, you will be able to easily build from scratch responsive website by relying on predefined classes and module (especially for menu where moving from desktop to tablet to mobile is very painful).
If you were to use Bootstrap 4 here would be a code working on all support :
Insert this between your :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Then add this in your code for the navigation and your content
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Some content</p>
</div>
</div>
</div>
<!-- HTML -->
div class="inhalt">
<p> some text </p>
</div>
/*-- CSS-- */
.inhalt{
margin: 10px auto 0;
width: 50%;
}
This is the perfect way of centring the div element.