I have an HTML template and I need to make his left sidebar fixed (no scrolling) without using position: fixed because it ruins all the template.
<div class="layout-w">
<!-- menu -->
<div class="menu">
<!-- elements here -->
</div>
<!-- content -->
<div class="content">
<!-- Elements here -->
</div>
</div>
And this the css
.layout-w {
display: flex;
}
.menu {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
How can I accomplish this?
You could just put your menu div inside another div with height of 100% and background-color:transparent.
<div class="layout-w">
<!-- menu -->
<div class="menu-container">
<div class="menu">
<!-- elements here -->
</div>
</div>
<!-- content -->
<div class="content">
<!-- Elements here -->
</div>
and in css file:
.menu-container { height: 100%; background-color: transparent; }
.menu { postion: fixed }
Related
How to make this "a href="#koszulki"]SCROLL TO 'KOSZULKI' /a" scroll to div in div with overflow-y: scroll;
Somebody knows how to do it? I have no idea how could i do it. Thanks!
<head>
<style type="text/css">
body{
overflow: hidden;
}
#content{
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="container">
SCROLL TO 'KOSZULKI'
<div id="content">
<section id="produkty">
<div id="koszulki">
<div class="produkt">
<!-- CONTENT !-->
</div>
<div class="produkt">
<!-- CONTENT !-->
</div>
<div class="produkt">
<!-- CONTENT !-->
</div>
</div>
<br>
<div id="bluzy">
<div class="produkt">
<!-- CONTENT !-->
</div>
<div class="produkt">
<!-- CONTENT !-->
</div>
<div class="produkt">
<!-- CONTENT !-->
</div>
</div>
</section>
</div>
</div>
</body>
this is how to scroll to a div
function scrollToDiv() {
const bounds = document.getElementById("there").getBoundingClientRect()
window.scrollTo(0, bounds.bottom);
}
document.getElementsByTagName("button")[0].onclick= () => scrollToDiv()
body {
height: 3000px;
display : flex;
flex-direction : column;
justify-content: space-between;
margin : 50px;
}
.there {
}
html {
scroll-behavior: smooth;
}
<button>scroll there</button>
<div id="there">come here<div>
I am trying to make this image full size but why some space is remaining right side
CSS/HTML
/* Header */
.header {
background: url('https://picsum.photos/1920/1080') center center no-repeat;
background-size: cover;
}
.header .header-content {
padding-top: 15.5rem;
text-align: left;
}
.header .text-container {
margin-top: 3rem;
margin-bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="content">
<!-- start of header -->
<header id="header" class="header">
<div class="header-content"> //here give an class of that image
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="text-container">
<h1><span class="turquoise">StartUp Landing</span> Page Template Free</h1>
<p class="p-large">Use Evolo free landing page template to promote your business startup and generate leads for the offered services</p>
<a class="btn-solid-lg page-scroll" href="#services">DISCOVER</a>
</div>
<!-- end of text-container -->
</div>
<!-- end of col -->
<div class="col-lg-6">
<div class="image-container">
<img class="img-fluid" src="https://picsum.photos/1920/1088" alt="alternative">
</div>
<!-- end of image-container -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of header-content -->
</header>
<!-- end of header -->
</div>
I want to set this full image right side(question mark)
which place need correction
add the width and height to body and html in head.
html,body {
width:100%;
height:100%
}
.img-fluid{
width:100%
height:100%
}
.image-container{
width:<!--as you wish--> 20px;
height:<!--as you wish--> 20px;
}
I'm trying to slightly rewrite my application. I have in the past only created applications with Sidenavs, however now I don't need it in a website i'm working on. The issue is I can't seem to find a way to remove the sidenav container without it breaking the background image, the nav bar being sticky, etc. I can't seem to find anything on material.angular.io that refers to anything like this or can fix this.
If anyone knows how to remedy this issue please point me to the documentation/ what I can change to fix this.
Github for the site
With Mat-Sidenav-Container
Sidenav container as a div
div with css taken from the sidenav container
Here is a quick fix
app.component.html
<!-- <mat-sidenav-container fullscreen class="sidenav-container"> -->
<!-- <mat-toolbar class="toolbar"> -->
<!-- <div class="social-media" id="discord" (click)="navigateToDiscord()"> -->
<!-- <img src="../../assets/discord.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="social-media" (click)="navigateToTwitch()"> -->
<!-- <img src="../../assets/twitch.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="social-media" (click)="navigateToTwitter()"> -->
<!-- <img src="../../assets/twitter.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="social-media" (click)="navigateToYoutube()"> -->
<!-- <img src="../../assets/youtube.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="themeathon-name"> -->
<!-- <div class="name-span"> -->
<!-- <span>THEMEATHON</span> -->
<!-- </div> -->
<!-- </div> -->
<!-- </mat-toolbar> -->
<!-- -->
<!-- <stream-component></stream-component> -->
<!-- -->
<!-- </mat-sidenav-container> -->
<div class="background">
<div class="toolbar">
<div class="social-media-container">
<div class="social-media" id="discord" (click)="navigateToDiscord()">
<img src="../../assets/discord.png">
</div>
<div class="social-media" (click)="navigateToTwitch()">
<img src="../../assets/twitch.png">
</div>
<div class="social-media" (click)="navigateToTwitter()">
<img src="../../assets/twitter.png">
</div>
<div class="social-media" (click)="navigateToYoutube()">
<img src="../../assets/youtube.png">
</div>
</div>
<div class="themeathon-name">
<div class="name-span">
<span>THEMEATHON</span>
</div>
</div>
</div>
<stream-component></stream-component>
</div>
Added css class .background at app.component.css
.background {
background-image: url(../../assets/japan.jpg);
}
.toolbar {
top: 0;
position: sticky;
position: -webkit-sticky;
z-index: 50;
width: 100%;
background-color: black;
height: 70px;
}
.social-media-container,
.themeathon-name {
position: absolute;
top: calc(50% - 16px);
}
.social-media {
padding-top: 6px;
margin: 0 25px;
cursor: pointer;
display: inline;
}
.social-media img {
fill: #fff;
width: 32px;
height: 32px;
}
.social-media-text {
float: right;
margin-left: 6px;
}
.themeathon-name {
width: 100%;
text-align: center;
}
.themeathon-name span {
font-family: SAMURAI, Roboto, "Helvetica Neue", sans-serif;
font-size: 32px;
color: #fff;
letter-spacing: 10px;
display: block;
margin: auto 26%;
}
Is that what you are after?
Here is the screen when I move down
At the moment my html page has 2 divs that hold all the information on the page one underneath the other. Now I want there to be a side bar to the left of them spanning down the entire page.
<div class="container">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 1</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 2</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
I would normally do this using the bootstrap grid template, however I am using an angular drag and drop library and using that (for some reason) messes up the animations when things are being moved around.
What would be the easiest way of adding in another div to act as a side menu always to the left of the two divs shown?
You can do something like this:
.sidebar {
background: #eee;
width: 100px;
height: 50px;
margin-right: -100%;
margin-bottom: 10px;
position: relative;
display: block;
overflow: visible;
float: left;
box-sizing: border-box;
}
.page-content {
background: #aaa;
margin-left: 100px;
}
<div class="container">
<div class="sidebar-wrapper">
<div class="sidebar">
SIDEBAR<br>
AT LEFT;
</div>
</div>
<div class="page-content-wrapper">
<div class="page-content">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 1</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 2</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Trade-offs of this approach:
You need to put a fixed width to your sidebar (either by px, %, or anything)
You need either to have a fixed height or to let the sidebar has the height of the content (you can't put height: 100%;)
You can float a sidebar left, but to have it fill the page’s full height all its ancestor elements must have height: 100%. If .sidebar is directly under body, these styles will do it:
html, body, .sidebar { height: 100% }
.sidebar { float: left }
Sample, with tinted backgrounds to show block outlines.
I m not sure I understand entirely the question so I ll try to answer.
I would create a div with float left css to have a nav within for your left menu and if it has to be all along the page . And another div either float right or none to keep the 2 divs you created.
You can use flexbox (adjust your needs)
CSS
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.flex-item {
-webkit-flex: 1 auto;
flex: 1 auto;
}
DEMO HERE
Wrap it all in a container with
display: table;
width: 100%;
table-layout: fixed;
then create a sidebar div with
display:table-cell;
vertical-align:top;
width:35%;
and wrap your content in a container with
display:table-cell;
vertical-align:top;
width:100%;
make sure your side bare is above your content for it to be on the left.
and that's you a flexible grid with a sidebar.
You can use col-md-3 and col-md-9 for sidebar and content respectively. Fix the sidebar using position: fixed
BootPly Demo
I want to remove the space above hr tag.now I get some unwanted space.I want to remove it.I want to start hr line where I marked in green.Please see my above edited question.This is my whole body section.
Css
hr {
margin: 0;
width: 1px;
height: 660px;
border: 0;
background: #fff;
float: left;
}
.sidemenu {
float: left;
margin-top: 150px;
width: 100%;
}
.content {
position:relative;
}
.side{
width: 24%;
float: left;
display: inline-block;
}
html
<div class="outer">
<div class="log">
<h1>Profile</h1>
<form method="post" class="lout" > <button class="logout" name="logout" >Logout</button></form>
</div> <!--End of log div -->
<div class="rest">
<div class="side">
<div class="sidemenu">
<div class="1 menu">
Profile
</div> <!--End of menu1 -->
<div class="2 menu">
Clients
</div> <!--End of menu 2-->
<div class="3 menu">
Employees
</div> <!--End of menu 3-->
<div class="menu 4">
Documents
</div> <!--End of menu 4-->
</div> <!--End of side menu -->
</div> <!--End of side div -->
<hr>
<!-- <div class="heading" >
<h1>Profile</h1>
</div> End of heading div -->
<div class="content">
</div>
</div> <!--End of content -->
</div> <!--End of rest div -->
</div> <!--End of outer div-->
Remove property margin-top i.e. margin-top: 150px;
from your class sidemenu :
Use the class mentioned below :
.sidemenu {
float: left;
width: 100%;
}
To align content to center, add below CSS class to outer
.outer{
margin-left:50%;
width:100%;
}
And you will see the desired output.
Give overflow hidden for outer wrapper
I assumed your HTML structure and CSS are as JS below:
<div class="wrapper">
<div class="sidemenu">
left
</div>
<hr>
<div class="container">
right
</div>
</div>
DEMO 1
As you can see with the different background color.
The padding of the outer wrapper is giving you spacing above the hr tag.
Removed the padding top/padding bottom for the outer wrapper use the padding within the sidemenu and content. As I use in JS below:
DEMO 2