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
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed last month.
here is the html code and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<title>Frontend Mentor | Space tourism website</title>
<link rel="stylesheet" href="testing-css/testing.css">
</head>
<body>
<div class="bg">
<div class="main-menu">
<div class="logo">
<img class="logo-img" src="assets/shared/logo.svg" alt="logo-img">
</div>
<!-- <div class="line">
<div class="horizontal-line"></div>
</div> -->
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-image: url('../assets/home/background-home-desktop.jpg') ;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vh;
}
.main-menu {
display: block;
margin: 50px;
padding: 25px 0 25px 0;
width: 2000px;
height: 50px;
font-size: 0;
}
.logo {
width: 50px;
height: 50px;
display: inline-block;
}
.logo-img {
width: 50%;
height: 50%;
}
.line {
width: 600px;
height: 50px;
display: inline-block;
padding-left: 50px;
padding-right: 50px;
}
.horizontal-line {
width: 600px;
height: 2px;
display: block;
background-color:#979797;
position: relative;
bottom: -50%;
}
the result shows:
when there is no second inline-block element
when remove the comment remarks, the html code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<title>Frontend Mentor | Space tourism website</title>
<link rel="stylesheet" href="testing-css/testing.css">
</head>
<body>
<div class="bg">
<div class="main-menu">
<div class="logo">
<img class="logo-img" src="assets/shared/logo.svg" alt="logo-img">
</div>
<div class="line">
<div class="horizontal-line"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code is the same as before, no changes.
the results shows :
when there has second inline-block element
the first inline-block element were pushed down...
what is the reason for this happening??
So , what is reason that affects the first inline-block element's position??
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 have this image of a long line going over 2 sections in my design file and I would like to translate that with CSS. How should I go about this? should I create a layer that encapsulates both sections with an absolute position?
* {
--my-orange: rgb(255, 166, 0);
}
.timeline-container {
margin-left: 2em;
}
.timeline-container .timeline {
width: 5px;
height: 100vh;
background: var(--my-orange);
}
.checkpoint {
border: 3px solid var(--my-orange);
padding: 0.5rem;
width: 2rem;
border-radius: 2rem;
text-align: center;
transform: translateX(-1.5rem);
background: white;
position: relative;
top: calc(20vh * var(--i))
}
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="timeline-container">
<div class="timeline">
<div class="checkpoint" style="--i: 0;">0%</div>
<div class="checkpoint" style="--i: 1;">5%</div>
<div class="checkpoint" style="--i: 2;">10%</div>
<!--more divs-->
</div>
</div>
</body>
</html>
I am having problem with positioning div. I have the following css
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
Here is the javascript:
$("#main").click(function(event){
$("#popup").css({'left':event.pageX, 'top':event.pageY, 'display':'block'});
});
here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="img/favicon-ksu.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main2.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Something Goes arround here <span style="color: red;">Something More here</span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="helper" id="helper">
Click Here!
</div>
<div class="popup" id="popup">
oops! You clicked at wrong place. Try again!
</div>
<div class="workspace" id="workspace" contenteditable="true"></div>
<div id="main" class="main">
</div>
</div>
</div>
</div><!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main2.js"></script>
</body>
</html>
everything works fine up to here! But when i specify following,
body {
padding: 0px;
width: 1230px;
margin: 0 auto;
}
the div is not positioned at the place of click, div appears somewhere else. I am wondering what is wrong! If someone could help!!!
changing position to fixed from absolute solves this problem.
Instead of this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
use this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: fixed;
border-radius: 10px;
z-index: 2;
}