I need my image to be position: sticky but I need it on top of my navbar.
HTML5. this is for a school project I really need to get it done. please and thank you
<div>
<a href="index.html">
<img class="logo" src="./images/logo.png">
</a>
</div>
<nav> Home
Articles
Contact
Sources</nav>
CSS
nav{
background-color: black;
position: fixed;
text-align: center;
z-index: 10;
top: 3%;
left: 50%
width: 100%;
height:50px ;
transform: translate(-50%, -50%);
display: block;}
div{
transform: translate(-40%, 40%);
top: 3%;
z-index: 10;
overflow: hidden;}
try this and see if are what you want.
HTML
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div>
<a href="index.html">
<img class="logo" src="./images/logo.png">
</a>
<nav>
<div>
<img src="https://www.history.com/.image/ar_4:3%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTU3ODc5MDg2NDMzNTEwNzI5/death-of-socrates.jpg"
alt="Your image" class="img">
</div>
Home
Articles
Contact
Sources
</nav>
</div>
</body>
</html>
CSS
nav {
background-color: black;
position: fixed;
text-align: center;
z-index: 10;
top: 3%;
left: 50%;
width: 100%;
height: auto;
transform: translate(-50%, -50%);
display: block;
}
div{
height: auto;
}
.img {
z-index: -1;
}
Related
a week ago I started to learn html and css and to practice I decided to emulate an old web page with what I learned so far. The page is the following: http://in3.org/info/reading.htm
I am having difficulty making the blue vertical line appear that is on the right side of the page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<header>
<img src="assets/ga.gif" alt="" />
<br>
<img src="assets/eptype2.gif" alt="" />
</header>
<aside class="aside1">
<img src="/assets/epnav5.gif" alt="" />
</aside>
<h2>Reading Notes</h3>
<aside class="aside2"></aside>
</main>
</body>
</html>
head,
body {
background-color: lightcyan;
margin: auto;
}
header {
width: 100%;
padding-left: 4.85%;
margin: auto;
}
.aside1 {
position: absolute;
width: 4.85%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
.aside2 {
position: absolute;
width: 4.85%;
padding-right: 30%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
img {
padding: 10px;
}
h2 {
color: red;
padding-left: 5.5%;
}
To make that blue vertical line I thought of using an empty aside tag with a width of 4.85% with a padding-right of 30%, but instead of having a distance of 30% to the right and occupying a 4.85% width, the aside is placed to the left of the page occupying 30% of the page.
I'd just give the wrapper/body-element your desired background-color, make a new container inside of that wrapper-element, give that your other desired background-color, and then center it. This way you don't have to make 2 new elements.
* {
margin: 0;
padding: 0;
}
body {
background-color: lightcyan;
}
.wrapper {
background-color: rgb(35, 168, 221);
height: 100vh;
max-width: 75%;
}
.container {
background-color: lightcyan;
max-width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<div class="wrapper">
<div class="container">
<h2>Reading Notes</h3>
</div>
</div>
</main>
</body>
</html>
The problem is that the html template in a message (Gmail) doesn't display the background image.
Here is the code(There should be some text instead of **):
`
<!DOCTYPE html>
<HTML lang="ru">
<head></head>
<meta charset="UTF-8" />
<meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
<style type = "text/css">
.container {
position: relative;
text-align: center;
height: 30px;
}
.centered {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.lower {
position: relative;
height: 40px;
}
body {
background-image: url('https://photographylife.com/wp-content/uploads/2017/05/Minimalism-5.jpg');
width: 800px;
height: 400px;
}
ul{
list-style-position: inside;
}
</style>
<body>
<title>Document</title>
<div class="container">
<div class="lower">Приглашение на бета-тест!</div>
<div class="lower">********************</div>
<div class="lower">********************</div>
<div>
<ul>
<li>********************</li>
<li>********************</li>
<li>********************</li>
<li>********************</li>
<li>********************</li>
<li>********************</li>
</ul>
</div>
<div class="lower">********************</div>
<div class="lower">********************</div>
</div>
</body>
</HTML>
`
What should I do to correct it?
I tried changing size of the background image, however it didn't help.
Try inline css style instead using in body{}
try this
<!DOCTYPE html>
<HTML lang="ru">
<head></head>
<meta charset="UTF-8" />
<meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
<style type = "text/css">
.container {
position: relative;
text-align: center;
height: 30px;
}
.centered {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.lower {
position: relative;
height: 40px;
}
body {
width: 800px;
height: 400px;
}
ul{
list-style-position: inside;
}
</style>
<body style="background-image: url('https://photographylife.com/wp-content/uploads/2017/05/Minimalism-5.jpg');">
<title>Document</title>
<div class="container">
<div class="lower">Приглашение на бета-тест!</div>
<div class="lower">********************</div>
<div class="lower">********************</div>
<div>
<ul>
<li>********************</li>
<li>********************</li>
<li>********************</li>
<li>********************</li>
<li>********************</li>
<li>********************</li>
</ul>
</div>
<div class="lower">********************</div>
<div class="lower">********************</div>
</div>
</body>
</HTML>
I want to place the text and headers I added in my code above the image I set in. Every time I center the text, the image is always covering it. The text and headers I have has to be above the image and not under.
#eventcenterimg {
text-align: center;
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-repeat: no-repeat;
}
#starting-info {
text-align: center;
margin-left: 40vh;
font-family: 'Roboto Condensed', sans-serif;
color: black;
display: inline;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300;400&display=swap" rel="stylesheet">
<img src="img/correaevent.png" height="970" alt="" id="eventcenterimg">
<div class="correa-events-info">
<h4 id="starting-info">Book and experience any special events at Correa Events Center.</h4>
<h4 id="starting-info">Call to book at:</h4>
</div>
<div class="socialmedia">
<i class="fab fa-facebook-f"></i>
</div>
Just an alternative minimal solution, you could also set z-index: -1 for the <img> as a quick fix, without making changes on other elements.
Example:
#eventcenterimg {
/* 👇 Add this */
z-index: -1;
text-align: center;
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-repeat: no-repeat;
}
I haven't tried your code yet, but if the case is just about things covering something else. Try changing this:
Set your text's z-index to 2 (set it in your styling)
I hope that works
only use absolute positioning when you have to. Use flex
#eventcenterimg {
text-align: center;
width: 30%;
/*position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -17%);
background-repeat: no-repeat; */
}
.starting-info {
text-align: center;
width: 100%;
font-family: 'Roboto Condensed', sans-serif;
color: black;
display: inline-block;
}
#container {
display: flex;
flex-direction: column;
justify-content:center;
align-items:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
intitial-scale=1.0">
<title>Correa Events</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300;400&display=swap" rel="stylesheet">
</head>
<body>
<div id='container'>
<div class="correa-events-info">
<h4 class="starting-info">Book and experience any special events at Correa Events Center.</h4>
<h4 class="starting-info">Call to book at:</h4>
</div>
<img src="https://via.placeholder.com/200" height="970" alt="" id="eventcenterimg">
<div class="socialmedia">
<i class="fab fa-facebook-f"></i>
</div>
</div>
</body>
</html>
Im working on a code and I would like to make the space between "Szafranowka" and "Apartaments & Restaurant" smaller. Here's how it looks like now: https://gyazo.com/d6843d8857e954acbae5c1da748c044b
I really cannot find the answer that would perfectly fit my expectations. Please, could any1 help me? :)
Also, I would like to make a small square around "Wejscie/Entrance", but when im trying to do it with the border, it looks like this: https://gyazo.com/f84fedc7a78854773b287e01ebd3a21f
Here's a part of code that im using to make a border:
<h5 style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">Wejscie/Entrance</h5>
and here's my code:
HTML:
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance">Wejscie/Entrance</h5>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
to your #entrance, try this :
#entrance {
width: 8rem; //or another size
margin auto; // to center
border: 2px solid;
}
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <span id="entrance">Wejscie/Entrance</span>
</div>
CSS:
h2{
margin:5px;
line-height:15px
}
#entrance{
border:1px solid;
}
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
#header h2
{
margin-bottom: -30px;
}
#entrance span
{
border: 1px solid;
padding: 15px;
}
</style>
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance"><span>Wejscie/Entrance</span></h5>
</div>
</div>
</body>
</html>
I am trying to have the three images centered and at the bottom of the page. I'm stuck with the images to the left instead of the center. I've tried many different ways to get it to work, but none have worked. If anyone could please help me it would be greatly appreciated
.banner {
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
body {
padding: 0;
margin: 0;
}
#imagesMain {
position: fixed;
bottom: 0;
padding: 0;
margin: 20px 10px;
text-align: center;
}
img {
margin-right: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
</a>
</div>
</html>
Just add width:100% on #imagesMain. Your images are centered but the #imagesMain itself isn't wide enough to show it. width:100% makes it as wide as the viewport.
.banner{
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
body{
padding: 0;
margin: 0;
}
#imagesMain{
position: fixed;
bottom: 0;
padding: 0;
margin: 20px 10px;
text-align: center;
width:100%
}
img{
margin-right: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
</a>
</div>
</html>
Just modify your css of "#imagesMain":
#imagesMain {
bottom: 0;
left: 0;
margin: 20px 10px;
padding: 0;
position: fixed;
right: 0;
text-align: center;
}