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>
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>
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;
}
I want to be able to display 3 colums with images, titles and buttons shown below. I know I am using split left and right but I am unable to create 3 columns on my own. I am using this for my portfolio, if you require anymore information or an example of my portfolio so you can understand what I would like then please do ask.
<!DOCTYPE html>
<html>
<head>`enter code here`
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Joe's Portfolio</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header class="fix">
<div class="nav-area">
<ul class="menu-area">
<li>Home</li>
<li>Coursework</li>
<li class="active">Future Aspirations</li>
<li>About Me</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div class="banner-text-name">
<h2>Joe Busby</h2>
</div>
</header>
<div class="split left">
<div class="centered">
<img src="Assets/coding.png" alt="Online World">
<h2>Website Developer</h2>
<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<span class="spot"></span>Learn More
</div>
</svg>
</div>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="Assets/shield.png" alt="Security">
<h2>Security Analyst</h2>
<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<span class="spot"></span>Learn More
</div>
</svg>
</div>
</div>
</div>
</body>
</html>
//CSS//
.split {
height: 100%;
width: 50%;
position: fixed;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
.left h2 {
color: aliceblue;
font-family: sans-serif;
}
.right h2 {
color: aliceblue;
font-family: sans-serif;
}
.right {
right: 0;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
}
you could always use bootstrap as already said.
if you rather do it with pure css and html see http://jsfiddle.net/a6yecjqb/4/
.split {
height: 100%;
width: 33.33%;
position: fixed;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.center {
left:33%;
right:33%;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
if you change the width of split and add a center block you will get 3 div's in separate rows. if more explanation is needed let me know
Why not using grid?
div.example {
width: 100%;
display: grid;
grid-template-columns: auto auto auto;
}
When you create elements inside that div, they will appear automatically in 33%
You can do that by using flexbox: here is a quick example:
body {
background: gray;
}
.wrapper {
margin: 0 auto;
width: 500px;
display: flex;
}
.columns {
padding: 5px;
color: black;
position: relative;
height: 500px;
overflow-x: hidden;
background: white;
margin-right: 5px;
}
.columns h2 {
color: black;
font-family: sans-serif;
}
.centered img {
width: 150px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Joe's Portfolio</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
</div>
</body>
</html>
https://jsbin.com/xipeduxuda/
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>
This is My code
<!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-with, initial-scale = 1">
<title>Tittle</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body, html, .sidebar, .body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.sidebar {
background-color: green;
width: 10%;
float: left;
height: 100%;
//position: fixed;
}
.body {
float:left;
width:90%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="sidebar">
</div>
<div class="body">
<div id="Div">
<img src="http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg" alt="image" width="100%" height="1200px"/>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
This code works perfectly but I want the sidebar to be fixed at its position when user is scrolling the page here the output
I tried this CSS property
postion: fixed;
and this is the Output
I need help cant'figure out what to do and I have searched alot but can't find suitable solution
try to add margin-left: 10% to your .body class (and delete the floatfor it)
whats about this:
<!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-with, initial-scale = 1">
<title>Tittle</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body,
html,
.sidebar,
.body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.sidebar {
background-color: green;
width: 10%;
float: left;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
.body {
float: left;
width: 89%;
height: 100%;
position: absolute;
left: 11%;
}
</style>
</head>
<body>
<div id="container">
<div class="sidebar">
</div>
<div class="body">
<div id="Div">
<img src="http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg" alt="image" width="100%" height="1200px" />
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
information found at https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position