I need to split my screen in half horizontally, so I can have an index on one half (<aside>), and the content on another (<article>). As such, they need to have independent scroll bars, because otherwise the user would need to scroll the very extensive content (<article>) just to reach the index (<aside>) again, which I don't want to happen -- I want the index (<aside>) to be always visible.
Also, there needs to be some part on the top where the title and the description of the page is kept always visible. I managed to solve this using a position: sticky on the <header>.
This is the best I got so far, with my limited knowledge:
h1{
position: sticky;
top: 0;
background-color: lightblue;
border-bottom: 1px solid black;
}
aside {
float:right;
position: sticky;
right: 0;
top: 0;
width: 40%;
background-color: lightyellow;
border: 1px solid black;
}
<html>
<head>
<meta charset="UTF-8" />
<title>Page Title</title>
</head>
<body>
<h1>"Page Title"</h1>
<aside>
<h2>Index</h2>
<ol>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ol>
Footnotes.
</aside>
<article>
<p>This is the very extensive content:</p>
<h2 id="item-01">January</h2>
<h2 id="item-02">February</h2>
<h2 id="item-03">March</h2>
<h2 id="item-04">April</h2>
<h2 id="item-05">May</h2>
<h2 id="item-06">June</h2>
<h2 id="item-07">July</h2>
<h2 id="item-08">August</h2>
<h2 id="item-09">September</h2>
<h2 id="item-10">October</h2>
<h2 id="item-11">November</h2>
<h2 id="item-12">December</h2>
</article>
</body>
</html>
It should give some visual orientation for you to understand what I'm trying to do here.
Here you go :)
body{
height:100%;
width:100%;
overflow:hidden;
position: absolute;
margin: 0;
padding: 0;
}
h1{
position: sticky;
top: 0;
background-color: lightblue;
border-bottom: 1px solid black;
margin:0;
height: 40px;
}
aside {
position: absolute;
height: calc(100% - 40px);
overflow-y: scroll;
float:right;
position: sticky;
right: 0;
top: 0;
width: 40%;
background-color: lightyellow;
border: 1px solid black;
}
article{
height: calc(100% - 40px);
overflow-y: scroll;
}
<html>
<head>
<meta charset="UTF-8" />
<title>Page Title</title>
</head>
<body>
<h1>"Page Title"</h1>
<aside>
<h2>Index</h2>
<ol>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ol>
Footnotes.
</aside>
<article>
<p>This is the very extensive content:</p>
<h2 id="item-01">January</h2>
<h2 id="item-02">February</h2>
<h2 id="item-03">March</h2>
<h2 id="item-04">April</h2>
<h2 id="item-05">May</h2>
<h2 id="item-06">June</h2>
<h2 id="item-07">July</h2>
<h2 id="item-08">August</h2>
<h2 id="item-09">September</h2>
<h2 id="item-10">October</h2>
<h2 id="item-11">November</h2>
<h2 id="item-12">December</h2>
</article>
</body>
</html>
Related
im trying to position the the list headers into my website side by side I already tried it with a float: left and margin-right: 32px; code but somehow its still not working im a newbie so im currently looking for answers in the internet. Could somebody provide me with code which position the headers side by side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width:device-width, initial-scale=1.0"
<title>Fitness Website </title>
<link rel="stylesheet" href="appoooo.css">
</head>
<body style="background-color: silver;">
<section>
<header>
Fitness
<ul class="navigation">
<li><a class="navigation" href="#">Home</a></li>
<li><a class="navigation1" href="#">Online Business</a></li>
<li><a class="navigation2" href="#">Training</a></li>
<li><a class="navigation3" href="#">Hobbies Vlog</a></li>
<li><a class="navigation4" href="#">Music</a></li>
</ul>
</header>
</section>
</body>
</html>
height: 3px;
margin: 0 2px 0 0;
position: relative;
}
.navigation1 {
float: left;
width: 143px;
height: 3px;
margin: 0 2px 0 0;
position: relative;
}
.navigation2 {
float: left;
width: 143px;
height: 3px;
margin: 0 2px 0 0;
position: relative;
}
.navigation3 {
float: left;
width: 143px;
height: 3px;
margin: 0 2px 0 0;
position: relative;
}
.navigation4 {
float: left;
width: 143px;
height: 3px;
margin: 0 2px 0 0;
position: e;
}
I hope this answered your question...
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_nowrap8
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>
</body>
</html>
</html>
I am trying to recreate a cool look I saw on a graphic design mockup but I am unsure how to do it. There is a background video, with a transparent green overlay over it, then there is an image of a man that stays fixed to the right with text overflowing over it. For the most part I was able to recreate it but it still does not look right and the image does not stay fixed to the right side. Any suggestions or a different method would be appreciated.
Here is the mockup of the webpage I am trying to recreate in CSS:
Here is what I have managed to recreate using bootstrap:
*::before, *, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.jumbotron {
position: relative;
overflow: hidden;
background-color: black;
height: 70vh;
margin-bottom: 0;
}
.jumbotron video {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
height: 100%;
/* object-fit is not supported on IE */
object-fit: cover;
opacity: 0.5;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(126, 154, 111, 0.5);
}
.jumbotron .container-fluid {
z-index: 3;
position: relative;
padding-right: 0 !important;
}
.image-holder {
width: 30%;
height: 100%;
}
.image-holder img {
width: 30%;
position: absolute;
top: -100px;
right: 0;
}
#heyGoodMeeting {
width: 80%;
z-index: 4;
}
.showcase__description {
color: white;
font-size: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Testing</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="overlay"></div>
<video autoplay muted loop>
<source src="https://geniecast.com/wp-content/uploads/2020/10/Zuen-Office-Background-Video.mp4" data-src="" type="video/mp4">
</video>
<div class="container-fluid text-white d-flex justify-content-end">
<div style="width: 80%">
<img id="heyGoodMeeting" src="https://geniecast.com/wp-content/uploads/2020/10/Good-Meeting-Logo.png" alt="hey good meeting">
<div class="showcase__description">The personalized comedy event that will transform your next client gathering, holiday party, or company meeting from a typical zoom call into a customized, memorable, and hilarious experience.</div>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
<div class="image-holder">
<img src="https://geniecast.com/wp-content/uploads/2020/10/David-Header.png" alt="">
</div>
</div>
<!-- /.container -->
</div>
</body>
</html>
Here is a link to a jsFiddle
First of all, in your jsfiddle demo, it seems like you didn't include Bootstrap 4 but you tagged Bootstrap 4 in your question.
To style that person picture in the background, you can just do the same way you did on the video and the overlay: set its position to absolute, top, bottom and right to 0 so that it sticks on the right. I think the tricky part is to set its height to 100% so that it won't overflow its parent relative container.
Anyway, I've cleaned up the layout a little bit and assigned several custom CSS classes so that I can style those classes instead of directly on the elements:
<div class="jumbotron jumbotron-fluid banner">
<div class="overlay"></div>
<video />
<img src="https://geniecast.com/wp-content/uploads/2020/10/David-Header.png"
class="img-background" />
<div class="banner-content container-fluid">
<div class="showcase">
<img id="heyGoodMeeting"
src="https://geniecast.com/wp-content/uploads/2020/10/Good-Meeting-Logo.png"
class="img-fluid" />
<p class="description" />
<a class="btn btn-light btn-lg" />
</div>
</div>
</div>
And the following is the CSS to stick that person picture in the background:
.banner .img-background {
z-index: 3;
position: absolute;
top: 0;
bottom: 0;
right: 0;
height: 100%;
}
demo: https://jsfiddle.net/davidliang2008/xd2s630q/80/
I want to have css style like in image. I could not find it in Bootstrap and can not remember what it is called in css style. Can anyone tell me how to style it?
Thanks.
<!DOCTYPE html>
<html>
<body>
<h1>The legend element</h1>
<form action="/action_page.php">
<fieldset style="height:200px;">
<legend>Personalia:</legend>
</fieldset>
</form>
</body>
</html>
This design can be achieved using tag in HTML.
To know more about the Legend tag, see the link below.
https://www.w3schools.com/tags/tag_legend.asp
Example of Legend Tag.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_legend
You can even do it with some Math+CSS.
body {
margin: 0px;
padding: 0px;
}
.outer {
margin: 20px;
height: 100px;
width: 300px;
border: 2px solid gray;
position: relative;
}
.block {
width: max-content;
height: 20px;
padding: 0 5px;
position: absolute;
top: -10px;
background: white;
}
.left {
left: 10px;
}
.right {
right: 10px;
}
.center {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<div class="block left">Left Title</div>
</div>
<div class="outer">
<div class="block center">Center Title</div>
</div>
<div class="outer">
<div class="block right">Right Title</div>
</div>
I have the following HTML source:
<div id="page">
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!--></div>
<div id="footer">
</div>
<!-- end page div -->
</div>
<div id="leftshadow"></div>
<div id="rightshadow"></div>
</body>
And this is the CSS source
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 1220px;
z-index: none;
top: -50px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: 345px;
z-index: none;
top: -25px;
}
/* header ---------- */
#header {
height: 110px;
top: 0px;
line-height: 30px;
background-image: url("images/header.png");
background-position-x: center;
background-repeat: repeat-x;
}
/* main -------------- */
#main {
line-height: 21px;
font-family: arial;
width: 625px;
padding: 30px;
position: relative;
right: 205px;
padding-bottom: 80px;
direction: rtl;
top: 42px;
padding-right: 60px;
min-height: 750px;
text-align: justify;
}
Normally I got this result
But in Internet-Explorer I got this result
I know that if I will insert the
<div id="leftshadow"></div>
<div id="rightshadow"></div>
******Live example here! http://lawb.co.il/******
Into the #page Div the problem could be solved, but the only problem is that the shadow than is complatly on the content, und not behund him
Can you pleas help me with this?
wish for help, thanks!
Any reason as to why you are using images to create shadows when you could use CSS3 box-shadow?
If you are going to use this approach I would change your HTML structure like so:
<div id="page">
<div id="leftshadow"></div>
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!-->
</div>
<div id="footer">
<!-- footer -->
</div>
<!-- end page div -->
<div id="rightshadow"></div>
</div>
And then float the right shadow div to the right and the left shadow div to the left. Most likely you are seeing inconsistencies because
you are not using a reset, and stuff is relatively positioned. You really don't need to position everything relative and the shadows if inside the #page container won't need to be positioned absolute.
I have a complex image cutted up in alot of slice.
You can see http://jsfiddle.net/yefQR/
<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Title</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentBottom{
top: auto;
bottom: 0;
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 130px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="framecontentTop">
<div class="innertube">
<div id="screenshot%20tsam%20900r2c2" style=" background-color: green;position:absolute; left:4px; top:6px; width:20px; height:68px; z-index:1; visibility:visible; ">
</div>
<div id="screenshot%20tsam%20900r2c3" style="background-color: yellow; position:absolute; left:24px; top:6px;width:47px; height:68px;z-index:2; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c4" style="background-color: red; position:absolute; left:71px; top:6px;width:165px; height:68px;z-index:3; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c5" style="background-color: black; position:absolute; left:236px; top:6px;width:62px; height:68px;z-index:4; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c6" style="background-color: pink; position:absolute; left:298px; top:6px;width:147px; height:68px;z-index:5; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c7" style="background-color: orange; position:absolute; left:445px; top:6px;width:311px; height:37px;z-index:6; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c9" style="background-color: cyan; position:absolute; left:756px; top:6px;width:108px; height:37px;z-index:7; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r2c11" style="background-color: white; position:absolute; left:864px; top:6px;width:27px; height:37px;z-index:8; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r3c7" style="background-color: DodgerBlue; position:absolute; left:445px; top:43px;width:8px; height:31px;z-index:9; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r3c8" style="background-color: Gold; position:absolute; left:453px; top:43px;width:355px; height:31px;z-index:10; visibility:visible;"></div>
<div id="screenshot%20tsam%20900r3c10" style="background-color: LightCyan ; position:absolute; left:808px; top:43px;width:83px; height:31px;z-index:11; visibility:visible;"></div>
</div>
</div>
<div id="framecontentBottom">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Lorem</h1>
<p>
Lorem ipsum
</p>
<p style="text-align: center">Vestibulum </p>
</div>
</div>
</body>
</html>
Id like to make :
1) the header image autoexpanding using the repeated-y css property of DodgerBlue color and Orange div because thy are the only 2 part of image axpandible.
2) Is it possible to define a minimum size of header, and is possible to make the entire body minimum size based that size so the browser cant get smaller an if the window get smaller, scrollbar is show.
Yes, just use min-width in your css. You can also define a max-width if you need too.