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.
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
Safari seems to have a bug that when you use webkit-background-... to give text some gradient it sometimes creates a really thin border.
It's really hard to reproduce this error consistently. The problem doesn't occur on each screen size or resolution. Adding/removing a paragraph on a random place on the page sometimes solves the issue (no logic),... Especially on Safari for iOS this problem occurs.
But this is the code I am using:
<span id="text">text.</span>
#text {
font-size: 8em;
font-weight: 700;
letter-spacing: 1px;
color: #000000;
text-decoration: none;
display: block;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #09D380, #0EC7D4 50%, #a4a4a4 50%);
background-size: 200% 100%;
}
This code is supposed to give the text inside the span a customized background, in this case a gradient. And that works fine. On it's own this code also does not have this issue.
The problem occurs when mixing it on a page with more content:
<!DOCTYPE html>
<html>
<head>
<title>Safari bug</title>
<link rel="icon" type="image/png" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: Poppins, sans-serif;
width: 100%;
height: 100%;
padding: 0;
background: linear-gradient(90deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 50%)
}
#container {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 100%;
}
#inner-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
width: 90%;
}
#under-construction-half {
position: relative;
text-align: center;
}
#under-construction-half img {
width: 60%;
margin-right: 10px;
}
#logo-and-slogan-half {
text-align: left;
box-sizing: border-box;
margin-left: 50px;
}
#logo {
font-size: 8em;
font-weight: 700;
letter-spacing: 1px;
color: #000000;
text-decoration: none;
display: block;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #09D380, #0EC7D4 50%, #a4a4a4 50%);
background-size: 200% 100%;
}
#slogan {
font-size: 3.5em;
margin-top: -10%;
color: #3B3B3A;
}
#text {
margin-left: 7.5%;
margin-top: 7%;
font-size: 1.5em;
}
#under-construction-title {
font-weight: 700;
color: #09DD80;
font-size: 1.3em;
}
span {
display: block;
}
#media screen and (max-width: 950px) {
#inner-container {
flex-direction: column;
margin: auto;
}
#logo-and-slogan-half {
margin-left: 0;
font-size: 60%;
}
#text {
width: 90%;
margin: auto;
font-size: 100%;
margin-top: 20%;
}
#under-construction-half {
text-align: left;
}
#under-construction-half img {
width: 50%;
}
}
</style>
</head>
<body>
<div id="container">
<div id="inner-container">
<div id="logo-and-slogan-half">
<div id="logo-and-slogan">
<span id="logo">text.</span>
</div>
</div>
</div>
<div id="text">
<span id="under-construction-title">title...</span>
<p id="under-construction-text">
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>
</div>
</body>
</html>
Demo page.
Adding a border to the span with the same color as the background of the page also solves the issue. But this is not always possible due to having for example an image as background.
I am already tweaking and fiddling with this HTML/CSS code to resolve the issue, but I can't find a solution for this bug.
You can crop few pixels around using clip-path:inset(1px). You can use a smaller or a bigger value based on your need.
You can also crop only from the top clip-path:inset(1px 0 0). The values work the same way as with padding/margin.
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 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