So basically I have a sidebar which I wan't to be fixed in my page and have only the other column in my row be scrollable.
I tried changing the position css attribute of the element, but then the original content would be squished into the first column.
A demo of what I have is available here: JSFiddle
Here is my HTML:
<div class="container">
<div class="row">
<div class="col-4" role="sidebar">
<div class="diamond"><span>RS</span></div>
<br />
<div class="brief">
Text here...
</div>
<form class="search">
<input type="text" placeholder="Search...">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
<ul class="sidebar-menu">
<li class="github">Github</li>
<li class="twitter">Twitter</li>
<li class="stackoverflow">StackOverflow</li>
<li class="linkedin">LinkedIn</li>
</ul>
</div>
<div class="col-8" role="content">
<h1 class="title">Title</h1><div class="horizontal-rule"></div>
<nav class="subnav">
<ul>
<li>Link</li> /
<li>Link</li> /
<li>Link</li> /
<li>Link</li>
</ul>
</nav>
</div>
</div>
</div>
I don't know which element you want to have fixed, but you could use this method:
<div id="id">
Content of the div
</div>
And the CSS:
#id {
position: fixed;
left: 30px; // or whatever you want
top: 100px; // or whatever you want
}
I hope this helped for you!
Related
This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 1 year ago.
I would like to know if there is a way I can add a black layer over my Background image but have it slightly transparent so you can still see the Background image.
I am using Bootstrap 4 & below is the code I am using including CSS :)
Any help will be much appreciated. Thanks for help
<nav class="navbar navbar-expand-lg navbar-light bg-light ">
<div id="container-fluid">
<!-- <input type="checkbox" id="check" /> -->
<div>
<div><label for="check" class="chechbtn"><i id="chechbtn" class="fas fa-bars p-2"></i></label></div>
<div><a class="navbar-1" href="{{url('/')}}"><img src="{{ asset('gelecek/img/logo.png') }}" alt="Logo" /></a></div>
</div>
<div>
<div >
<div class="collapse navbar-collapse " id="navbarText">
<ul class="navbar-nav mb-4 mb-lg-0">
<li class="nav-item">
<div class="dropdown">
<button class="dropbtn"><span>FAALİYETLERİMİZ</span></button>
<div class="dropdown-content">
<ul>
<li><span>Gelecek Yürüyüşü</span></li>
<li><span>5 Dakika Sohbetleri</span></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="https://geleceginbilimi.com/blog/">BLOG</a></li>
<li class="nav-item"><a class="nav-link" href="#">gelecek-uyeligi</a></li>
<li class="nav-item">
<div class="dropdown">
<button class="dropbtn"><span>HAKKIMIZDA</span></button>
<div class="dropdown-content">
<ul>
<li><span>Gelecek Vizyonu</span></li>
<li><span>Gelecek Meclisi</span></li>
<li>
<div class="dropdowndown">
<button class="dropbtn"><span>Gelecek Şurası</span></button>
<div class="dropdown-content">
<ul>
<li><span>Gelecek Daveti</span></li>
<li><span>Gelecek Akademisi</span></li>
<li><span>Gelecek medya</span></li>
<li><span>Geleceğin ajansi</span></li>
<li><span>Gelecek toplumu</span></li>
<li><span>Gelecek isleri</span></li>
<li><span> Gelecek tasavvuru</span></li>
</ul>
</div>
</div>
</li>
<li><span>Gelecek tasarimcilari</span></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div>
#auth
<div class="mr-2"><a type="button" href="{{ route('dashboard') }}" class="btn btn-outline">User Profile <i class="fas fa-sign-in-alt ml-2"></i></a></div>
#else
<div class="mr-2"><a type="button" href="{{ route('login') }}" class="btn btn-outline">login <i class="fas fa-sign-in-alt ml-2"></i></a></div>
#endauth
<div>Global <i class="fas fa-globe-africa ml-2"></i></div>
</div>
</div>
</div>
</nav>
<!-- Nav Bar End -->
<!-- Page Header Start -->
<div class="page-header mb-0" >
<div class="container ">
<div class="row">
<div class="col-12" style="padding: 36px;">
<h2>Gelecek Üyeliği</h2>
</div>
</div>
</div>
</div>
CSS background image
<style>
.page-header{
background-image: url(./gelecek/img/header_img.png);
}
</style>
You can use pseudo element ::after on your .page-header element. Make the .page-header position: relative so that the pseudo elements position properties will be relative to its position, then make your ::after position absolute and define the top and left properties to 0 so they line up with the page-header elements border box. The ::after pseudo element will have a height and width of 100% along with your black opaque layer using RGBA rgba(0, 0, 0, 0.5) -> black with a 0.5 opacity
.page-header {
background-image: url(https://allhdwallpapers.com/wp-content/uploads/2015/07/Sky-4.jpg);
position: relative;
}
.page-header::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
}
.page-header h2 {
color: white;
}
<div class="page-header mb-0">
<div class="container ">
<div class="row">
<div class="col-12" style="padding: 36px;">
<h2>Gelecek Üyeliği</h2>
</div>
</div>
</div>
</div>
You can simply use background color along with the image like this;
.page-header {
background-image: url(https://allhdwallpapers.com/wp-content/uploads/2015/07/Sky-4.jpg) rgb(163 204 170 / 50%);
}
I am using rgb(163 204 170 / 50%); with opacity, you can use color of your choice. Hope this will solve your problem.
You can learn about colors with opacity from w3Schools.
How can i create a simple subscription form? i have tried using this codes and css style, but they don't align the way it should be. whats wrong with what i've done? can someone point me in the right direction?
i want the form to have a background color or image and sit just above the footer, how do i achieve this?
.subscribe-container {
width: 100%;
padding-bottom: 5px;
margin-left: 200px;
margin-top: -40px;
}
.subscribe-container li {
display: block;
float: right;
width: 60%;
margin: 0 auto;
}
<form method="post" class="subscribe-form" action="#">
<div class="row">
<div class="col span-1-of-3">
<ul class="subscribe-container">
<li class="subscribe-feature">
<label for="email">Get Updates</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="subscribe-container">
<li class="subscribe-feature">
<input type="text" class="updates" id="updates" placeholder="Email Address">
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="subscribe-container">
<li class="subscribe-features">
<label> </label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="subscribe-container">
<li class="subscribe-features">
<input type="submit" class="subscribe-btn" value="Subscribe">
</li>
</ul>
</div>
</div>
</form>
you will need to define the height and width of your class: subscribe-form and then set the background-color or image, like this:
.subscribe-form{
width: 500px;
heigth: 500px;
background-image:url("/your directory");
//or
background-color: blue;
}
In relation to the form you are going to the right direction, your "action" needs to ref some action page like in php, and if you need something like a javascript function, you can create a tag script in your code to enable javascript functions, you will need to add a button type="submit" in your html to call them, like that:
<html>
<form method="post" class="subscribe-form" action="#" onsubmit="doSomething()">
<div class="row">
<div class="col span-1-of-3">
<ul class="subscribe-container">
<li class="subscribe-feature">
<label for="email">Get Updates</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="subscribe-container">
<li class="subscribe-feature">
<input type="text" class="updates" id="updates" placeholder="Email Address">
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="subscribe-container">
<li class="subscribe-features">
<label> </label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="subscribe-container">
<li class="subscribe-features">
<input type="submit" class="subscribe-btn" value="Subscribe">
</li>
</ul>
</div>
<button type="submit">Action form</button>
</div>
</form>
</html>
<script>
doSomething() {
window.alert('Thats the action of my form!');
}
</script>
I'm using Bootstrap and my issue is that the content (ul) within the "forecastDiv" is not inside the "forecastDiv" border. The content stays inside the border once I remove Bootstrap's grid system but I need to align my content properly so I need to be using the grid system. Below is the code I have in a codepen (go to "6-day forecast" comment in HTML). Any help is appreciated. Thank you.
HTML
<div id="forecastDiv">
<div class="col-md-1" id="boxInfo0">
<p id="forecast0">0
</p>
<p id="forecast0TempC">0
</p>
<p id="day0">Test
</p>
</div>
<div class="col-md-1" id="boxInfo1">
<p id="forecast1">0
</p>
<p id="forecast1TempC">0
</p>
<p id="day1">Test
</p>
</div>
<div class="col-md-1" id="boxInfo2">
<ul id="forecast2">0
</ul>
<ul id="forecast2TempC">0
</ul>
<ul id="day2">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo3">
<ul id="forecast3">0
</ul>
<ul id="forecast3TempC">0
</ul>
<ul id="day3">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo4">
<ul id="forecast4">0
</ul>
<ul id="forecast4TempC">0
</ul>
<ul id="day4">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo5">
<ul id="forecast5">0
</ul>
<ul id="forecast5TempC">0
</ul>
<ul id="day5">Test
</ul>
</div>
</div> <!-- end forecastDiv -->
CSS
#forecastDiv {
width: 100%;
border: solid black;
margin: 0 auto; }
https://codepen.io/mcmaster-99/pen/ybWvyy
add a "container" or "container-fluid" class to your <div id="forecastDiv">. "container" is a bootstrap class that will keep everything inside the div.
<div class="container" id="forecastDiv">
Iam trying to fix a div always on top in slide menu.scroll needs only for the bellow contents how can i fix this issue? please check my fiddle
https://jsfiddle.net/kannankds/j79hggn3/
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div class="topHead"> <!--need to fix this area-->
<input type="text"><input type="button" class="btn btn-info" value="ok">
</div> <!--area ends-->
<ul>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="content-header">
<h1 id="home">
<a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
</h1>
</div>
</div>
https://jsfiddle.net/kannankds/j79hggn3/
#sidebar-wrapper .topHead{
position: absolute;
top: 0;
}
#sidebar-wrapper ul{
margin:0px;
padding-top:50px;
overflow: auto;
height: 100%;
}
use absolute position for sidebar top head and set height to the ul and add overflow scroll to the menu items conatiner ul .Check if it works https://jsfiddle.net/31ndd6kk/4/
<div id="wrapper">
<!-- Sideba][1]r -->
<div class="topHead"> <!--need to fix this area-->
<input type="text"><input type="button" class="btn btn-info" value="ok">
</div> <!--area ends-->
<!--//// Do as follow ////
1. add your scroll to id 'sidebar-wrapper'
2. set the height to 'sidebar-wrapper'
-->
<div id="sidebar-wrapper">
<ul>
<li>menu1</li>
...
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="content-header">
<h1 id="home">
<a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
</h1>
</div>
</div>
Check this Updated fiddle here
Changes in CSS:
#sidebar-wrapper ul {
height: calc(100% - 34px);
overflow: auto;
}
#wrapper.active {
position: absolute;
left: 250px;
}
Note: comment or remove the #sidebar-wrapper style overflow-y: auto.
I have a header.top-bar element at the top (with div.top-bar-left and div.top-bar-right elements inside), then everything after that is inside a div.row element. What's the simplest way to make the items in the top bar line up with the edges of the row? I tried putting the header itself inside a row but that just completely messed up the placement of everything.
<div class="container">
// place your html code here
</div>
Check this!
<!-- Navigation Start -->
<nav class="navbar navbar-default navbar-fixed-top">
<!-- Container Start -->
<div class="container">
<!-- Note that the .navbar-collapse and .collapse classes have been removed from the #navbar -->
<div id="navbar">
<form class="navbar-form navbar-right">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-left">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Container End -->
</nav>
<!-- Navigation End-->
Put the row and top-bar in a div and use flex-property
<div class="container">
<div class="top-bar">
</div>
<div class="row">
</div>
</div>
.container{
display:flex;
flex-direction:column;
}