I'm trying to make a vertical navbar on the left of the page which is as long as the website (i.e. stretches down to the footer). However, it is only the right height when there is nothing above it - when I add the site's title, the navbar gets longer than the site.
body{
padding: 0px;
margin: 10px auto 0 auto;
font-family: 'corbel','arial';
background: #fff;
color: #444; /* text colour */
max-width: 1500px;
height: auto;
position: relative;
}
footer{
background: #333;
color: #fff;
padding: .1em 3em;
width: auto;
margin-left: 130px;
}
h1{
text-align: center;
font-size: 85px;
padding: 10px;
margin: auto;
margin-top: 10px;
}
#content{
margin-left: 150px;
}
/* Navbar */
#navbar{
background-color: #599;
list-style-type: none;
overflow: hidden;
width: 130px;
margin: 0px;
font-family: 'corbel','arial';
text-align: center;
padding-left: 0px;
height: 100%;
float: left;
position: absolute;
}
#nav_li{
text-align: center;
}
#nav_a{
text-decoration: none;
margin: 10px;
display: inline-block;
color: white;
}
<h1>Website Title</h1>
<body>
<ul id='navbar'>
<li id='nav_li'><a id='nav_a' href='index.html'>Home</a></li>
<li id='nav_li'><a id='nav_a' href='gallery.html'>Gallery</a></li>
<li id='nav_li'><a id='nav_a' href='reviews.html'>Our reviews</a></li>
</ul>
<div id='nav_fill'> </div>
<div id='content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
<p>Content © Business Name - Website design ©</p>
</footer>
</body>
Big thanks to anyone who can help!
There are multiple ways of fixing this problem - the easiest is to just put the html, body background color as the sidebar in CSS (with height: 100%), then add a sticky header and footer at the top and bottom, and put a background-color on the container-element.
Something like this:
* { margin: 0; padding: 0;}
html, body {
height: 100%;
background: blue;
}
#content {
background: white;
}
h1 {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3em;
}
#menu {
margin-top: 3.5em;
float: left;
width: 7em;
color: white;
}
#content {
background: white;
height: 100%;
margin: 3em 0 4em 7em;
padding-top: 3.5em;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 4em;
background: gray;
}
<body>
<h1>This is a heading</h1>
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="content">
<p>Something goes in here</p>
</div>
<footer>This is the footer</footer>
</body>
Try using position:fixed, and min/max-height i also suggest to use calc(), to calculate good size of navbar.
Here You have jsfiddle
Related
*Hello, I want to have text below the image like in the example, but I can't figure out what is wrong, i took the code from
W3Schools: https://www.w3schools.com
/css/tryit.asp?filename=trycss_ex_images_card
Can someone help? Thanks
Example Image: https://imgur.com/a/P86DVjW
What It Looks Like: https://imgur.com/a/JOXpAJI*
```{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #32053d;
}
header {
position: absolute;
top: 0;
Left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center
}
header .logo
{
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul
{
display: flex;
justify-content: center;
align-items: center;
}
header ul li
{
list-style: none;
margin-left: 20px;
}
header ul li a
{
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active
{
background: #fff;
color: #4a2880;
}
h1 {
color: white;
margin-top: 250px;
margin-left: 270px;
}
p {
color:white;
margin-left: 60px;
text-align: center;
font-size: 15px;
}
.sec {
margin-right: 80px;
}
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
```<!DOCTYPE html>
<html>
<h1>ABC</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<center><img src="images/ArrowDown.webp" id="arrow" width="200"></center>
<div class="sec">
<center> <div class="polaroid">
<img src="Images/Darbs1.png" alt="Darbs1" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<center> <div class="polaroid">
<img src="images/Darbs1.png" alt="Darbs2" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<head>
<title>Projects</title>
<link rel="stylesheet" type="text/css" href="Website.css"
</head>
<body>
<header>
Logo
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>```
The problem is with the css. You have set the p tag color:white that is why it is not showing. Set color:black
p {
color:black;
margin-left: 60px;
text-align: center;
font-size: 15px;
}
I approve of Usama's answer, the description is written in white on a white background.
You can add a specific rule:
.polaroid .container p {
color:black;
}
PS: Can you reformat your code?
Use 4 spaces or the button {} in the text editor
here is my index.html:
<div id="container1" class="py-0 my-0">
<div id="left" class="col-md-6">
<img class="image" src="C:\Users\asus\Desktop\project\image.png">
</div>
<div id="right" class="col-md-6">
<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav ml-auto">
<li class="nav-index">
HOME
</li>
<li class="nav-index">
ABOUT US
</li>
<li class="nav-index">
COURSES
</li>
<li class="nav-index">
LOG IN
</li>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<p class="paragraph col-md-6">
<h3 class="Welcome text-center">Welcome to mobile legends!</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br>
<br>
<footer class="footer1" id="footer1">
<h6>Contact the developer:</h6>
<p>luckyllemos0909#gmail.com</p>
</footer>
</div>
</div>
here is my style.css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
align-items: center;
vertical-align: middle;
}
#container1{
width: 100%;
height: 100%;
vertical-align: middle;
display: flex;
align-items: center;
}
#left,
#right {
width: 50%;
height: 100%;
}
#left {
background: #ffd6dd;
align-items: center;
}
.image{
margin-top: 50px;
margin-left: -10px;
padding: 100px;
}
#right {
background: #FBAED2;
align-items: center;
}
.paragraph{
color: red;
margin: 50px;
}
.fa {
margin-top: none;
padding: 20px;
font-size: 20px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
color: #000000;
}
.fa-linkedin {
color: #000000;
}
.fa-youtube {
color: #000000;
}
.Welcome{
margin-left:60px;
}
.nav-link{
color: #000000;
}
.nav-index{
padding-left: 30px;
padding-right: 30px;
align-items: center;
}
my problem is when i put it in mobile phone it does not go flexible.
This is the original output:
and This what happens when try to look on mobile screen:
What you're looking for is media queries, which let you decide how your website looks on varying screen sizes. In the example below in the css class example is first shown how it would look on a larger screen size, then below with the media query in effect you can stylize how your page would look on a (in this example) a screen with a width of less than 900px. Take a look at the link below for further explanation.
.example {
font-family: "Droid+Sans";
font-weight: normal;
color: #ffffff ;
font-size: 7rem;
position: absolute;
top: 17%;
width: 100%;
}
#media screen and (max-width: 900px){
.example {
font-size: 3.5rem;
margin: auto;
width: 50%;
left: 20%;
right: 20%;
padding-bottom: 100px;
}
}
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Use Bootstrap Utility Classes in a better way. Since you are using bootstrap simply add your classes to work for different break points.
Add col-12 Utility classes on the following elements: Note that Bootstrap follows mobile-first approach.
<div id="left" class="col-12 col-md-6">
And
<div id="right" class="col-12 col-md-6">
I am trying to create a single page website using relative units (vh; em; rem) for the first time but the footer wouldn't stay at the bottom and for different screen sizes it stays at the viewport height of the screen. For mobile it works fine since the text is smaller thanks to the units.
I've tired setting each sections (nav, homePG, footer) a grid-row of 1,2,3 respectively to see if it can fix the issue.
html, body {
height: 100%;
width: 100%;
margin: auto;
padding: auto;
background-color: #020224;
color: white;
}
.container{
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
/* NAV SECTION */
.nav{
position: sticky;
background-color: transparent;
top: 0;
left: 0;
right: 0;
display: grid;
grid-template-columns: auto auto;
z-index: 1;
}
.nav a:link, .nav a:visited{
color: white;
text-decoration: none;
}
.nav a:hover{
color: cyan;
}
.navLeft {
font-size: 2em;
text-align: left;
}
.navRight{
font-size: 1.5em;
text-align: right;
}
.navRight a {
padding-left: 10px;
}
/* MAIN CONTENT */
.homePG{
position: absolute;
margin: auto;
width: 100%;
text-align: center;
font-size: 7vw;
}
.homePG img{
width: 500px;
height: 500px;
}
.homePG h1{
font-size: 1em;
}
.homePG p{
font-size: 0.5em;
}
/* FOOTER CONTENT */
.footer{
position: absolute;
text-align: center;
margin: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #030342;
padding:10px;
font-size:15px;
}
#media screen and (max-width: 1000px) {
.homePG{
padding-top: 50%;
}
.homePG img{
width: 400px;
height: 400px;
}
}
#media screen and (max-width: 750px) {
.homePG img{
width: 200px;
height: 200px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Brandon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="container">
<section class="nav">
<nav class="navLeft">
Brandon
</nav>
<nav class="navRight">
ABOUT
PROJECTS
CONTACT
</nav>
</section>
<section class="homePG">
<img src="./assets/pic.png"></img>
<h1>Brandon</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="footer">
<footer>
# Copyright
</footer>
</section>
</body>
</html>
why you are using position: absolute please change it to relative in below two classes hope this will help you.
.homePG{
position: relative;
margin: auto;
width: 100%;
text-align: center;
font-size: 7vw;
}
.footer{
position: relative;
text-align: center;
margin: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #030342;
padding:10px;
font-size:15px;
}
I'm trying to create a simple web page consisting of three divs: A header div containing an image, a content div containing text and a nav div containing the nav elements and a logo. My goal is to overlap the header div with the nav div so that the nav elements and the logo are always positioned vertically centered on the lower border of the header div.
Here's my code so far:
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
text-align: center;
}
#headerimage {
height: 100%;
width: 100%;
z-index: 50;
position: relative;
}
#headerimage > img {
max-width: 100%;
max-height: 100%;
border: 6px;
border-style: solid;
border-color: #671013;
}
#nav {
width: 100%;
overflow: visible;
top: 97.75%;
z-index: 100;
position: absolute;
}
#nav > img {
text-align: center;
vertical-align: middle;
margin-top: -6.2%;
height: 20%;
width: 20%;
}
.nav-element {
width: 10%;
height: 100%;
padding: 5px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-align: center;
font-weight: bold;
border: 4px;
border-style: solid;
border-color: #2d3139;
background-color: white;
color: #80857f;
}
.nav-element:hover {
background-color: #2d3139;
color: white;
cursor: pointer;
}
.left {
float: left;
z-index: 100;
}
.first {
margin-left: 3%;
}
.right {
float: right;
z-index: 100;
}
.last {
margin-right: 3%;
}
#point2 {
margin-left: 9%;
}
#point3 {
margin-right: 9%;
}
#content {
height: 100%;
width: 100%;
}
#text {
padding-top: 8%;
padding-left: 3%;
padding-right: 3%;
padding-bottom: 5%;
text-align: justify center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
</style>
</head>
<body>
<div id="headerimage">
<img src="https://images.pexels.com/photos/34577/pexels-photo.jpg" alt="Headerimage" />
<div id="nav">
<div id="point1" class="nav-element left first">
Point 1
</div>
<div id="point2" class="nav-element left ">
Point 2
</div>
<img src="https://pixabay.com/get/55e2d3454853a814f1dc8460da2932771736dfe6575074_640.png" alt="Logo" />
<div id="point3" class="nav-element right last">
Point 3
</div>
<div id="point4" class="nav-element right">
Point 4
</div>
</div>
</div>
<div id="content">
<div id="text">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</h1>
</div>
</div>
</body>
</html>
Currently the nav div doesn't stay centered on the lower border and my online researches haven't brought any useful results so far, so if anyone has an idea to point me in the right direction, I'd be really grateful!
Hope this is what you want:
nav img {
margin-top: -40px;
}
#point1, #point2, #point3, #point4 {
margin-top: -40px;
}
Fine-tune the margin as fits.
I am unable to put " a:hover " on my home button in menu bar. even unable to remove the text-decoration.
while i was trying my hands on media queries , just got puzzled.
****stack overflow settings is not allowing me to post question unless i add more details*****
body {
background-image: url("blue-bokeh.jpeg");
width: 100%;
height: 100%;
}
.wrap {
height: auto;
width: 90%;
margin: auto;
}
header {
background: #333;
color: white;
height: auto;
width:100%;
float: left;
}
header nav {
width: 100%;
height: auto;
}
header nav ul {
list-style: none;
height: auto;
width: auto; /* what happens if i change the value to 100% */
float: right;
margin-right:30px;
}
header nav ul li {
display: inline;
padding: 15px 30px;
float: left;
border-radius: 5px;
}
header nav ul li a.active {
text-decoration: none;
}
header nav ul li:hover {
background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
/*background: tomato;*/ /* get the code checked , if its repeated in .top class */
float: left;
margin-top: 20px;
border-radius: 10px;
/*padding: 20px 20px;*/
height: auto;
width: 60%;
margin-right: 2%;
}
.top {
background: tomato;
margin-bottom: 10px;
float: left;
border-radius: 10px;
padding: 20px 20px;
}
.top h3 {
color: darkslategray
}
.bottom {
background: tomato;
margin-bottom: 50px;
float: left;
border-radius: 10px;
padding: 20px 20px;
}
.bottom h3 {
color: darkslategray
}
.sidebar {
float: left;
height: auto;
width: 38%;
margin-top: 20px;
}
.topside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.middleside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.bottomside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
footer {
background: darkslategray;
float: left;
width: 100%;
height: auto;
border-radius: 10px;
}
footer p {
padding-left: 50px;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------MEDIA QUERY STARTS HERE---------------------------------------------------------------*/
#media screen and (max-width: 700px) {
body {
background-image: url("blue-bokeh.jpeg");
width: 100%;
height: 100%;
}
.wrap {
height: auto;
width: 90%;
margin: auto;
}
header {
background: #444;
color: white;
height: auto;
width:100%;
}
header nav {
width: 100%;
height: auto;
}
header nav ul {
list-style: none;
height: auto;
width: 100%; /* what happens if i change the value to 100% */
margin: 0;
padding: 0;
text-align: center;
}
header nav ul li {
display: block;
padding: 15px 30px;
float: none;
}
header nav ul li:hover {
background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
/*background: tomato;*/ /* get the code checked , if its repeated in .top class */
margin-top: 20px;
border-radius: 10px;
/*padding: 20px 20px;*/
height: auto;
width: 100%;
}
.top {
background: tomato;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.top h3 {
color: darkslategray
}
.bottom {
background: tomato;
border-radius: 10px;
padding: 20px 20px;
}
.bottom h3 {
color: darkslategray
}
.sidebar {
height: auto;
width: 100%;
}
.topside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.middleside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.bottomside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
footer {
background: darkslategray;
float: left;
width: 100%;
height: auto;
border-radius: 10px;
}
footer p {
padding-left: 50px;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="restheme.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="mainbody">
<article class="top">
<h3>First Post</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
<article class="bottom">
<h3>Second Post</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
</div>
<div class="sidebar">
<aside class="topside">
<h3>Top Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
<aside class="middleside">
<h3>Middle Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
<aside class="bottomside">
<h3>Bottom Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
</div>
<footer>
<p>Copyright © 2016 Faltoo Webdesigns</p>
</footer>
</div>
</body>
</html>
If I understand you right, you want to achive something like this?
https://jsfiddle.net/j7j54Lta/1/
I did some improvements and changed the structure. The li gets the .active-class and not the anchor. If the anchor in the active li is hovered it changes the color (or whatever you want to achive):
header nav ul li.active a:hover{
color: red;
/* or whatever*/
}
Moreover there is no text-decoration:
header nav ul li.active a {
text-decoration: none;
cursor: default;
}