HTML - how to make one div scrollable and the others static? - html

I have this default.html file that places all div elements.
I need div header and sidebar to be fixed and only div content to be scrollable if content is too big.
My default.html follows:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<link rel="shortcut-icon" th:href="#{/assets/img/favicon.png}" type="image/x-icon" />
<title th:text="#{app.name}"> </title>
<style type="text/css">
.content {
display: -webkit-flex;
display: flex;
height: 100vh;
width: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div id="header" th:replace="fragments/header :: headerFragment"> </div>
<div class="main-container container-fluid">
<div class="page-container">
<div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div id="content" layout:fragment="content"></div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</div>
</body>
</html>
What am I missing here?

.header, .footer { overflow: hidden; position: fixed; }
.page-content { overflow: auto; }

You are using a class in the CSS and an id in the code. Aslo you dont need the type="text/css" in html5:
<style>
#content {
display: -webkit-flex;
display: flex;
height: 100vh;
width: 100%;
overflow: auto;
}
</style>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#content {
height: 150px;
width: 100%;
background-color:lightpink;
padding:25px;
margin:20px;
}
#header{
color:white;
width:100%;
height:40px;
left:0;
top:0;
position:fixed;
background-color:black;
}
#sidebar{
top:0;
left:0;
width:90px;
height:100%;
position:fixed;
color:white;
background-color:steelblue;
}
</style>
</head>
<body>
<div id="defaultFragment" fragment="defaultFragment">
<div id="header"> <center><h3>Header</h3></center> </div>
<div class="main-container container-fluid">
<div class="page-container">
<div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</div>
</body>
</html>

Related

Justify-content: space-between is not working as expected

Would appreciate some help on this. So, I wanted to re-align the first picture to look like the second picture. I was expecting the space-between to distribute the space evenly in between so I've been trying to use justify-content: space-between which unfortunately doesn't work. Any idea why?
HTML
#import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
* {
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container {
text-align: center;
}
.progress-container {
display: flex;
justify-content: space-between;
width: 350px;
max-width: 100%;
border: 1px solid blue;
position: relative;
margin-bottom: 30px;
}
<!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="./css/style.css" />
<title>Progress Bar</title>
</head>
<body>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<div class="btn-container">
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
In flex div all item get same width, if you set empty div then it's also consider as a one item of that flex div that's why your "progress" class div also get same width there is no matter there is data or not in the div.
To make your desire design make "progress" class hidden.
.progress {
display: none;
}
Because there is another div before the circle 1. It should be removed:
<div class="container">
<div class="progress-container">
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<div class="btn-container">
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
</div>
Try this fiddle here: http://jsfiddle.net/usf9Lcdg/
this happened because of the id="progress" DIV that takes a space in the row ...
#import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
* {
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container {
text-align: center;
}
.progress-container {
display: flex;
justify-content: space-between;
width: 350px;
max-width: 100%;
border: 1px solid blue;
position: relative;
margin-bottom: 30px;
}
<!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="./css/style.css" />
<title>Progress Bar</title>
</head>
<body>
<div class="container">
<div class="progress" id="progress"></div>
<div class="progress-container">
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<div class="btn-container">
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>

How I can set two images inline in HTML?

I will do set two images in inline, in the header of my website. But how I can do it?
https://imgur.com/0xnuqp5
I tried this... but (obviously) doesn't work.
<img src="../wp-content/themes/sadra/images/logo/3d-header.png" width="350"><img src="../wp-content/themes/sadra/images/home/prot3-sadra-JSI22D-1.png" width="325">
Try this flexbox example:
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.image {
flex: 33.33%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="row">
<div class="image">
<img src="https://picsum.photos/id/237/200/300.jpg" style="width:100%">
</div>
<div class="image">
<img src="https://picsum.photos/id/237/200/300.jpg" style="width:100%">
</div>
</div>
</body>
</html>
<style>
.img{float:left;}
</style>
or
<style>
.img{display:inline;}
</style>
And then apply the class:
<img src="../wp-content/themes/sadra/images/logo/3d-header.png" width="350" class="img"><img src="../wp-content/themes/sadra/images/home/prot3-sadra-JSI22D-1.png" width="325" class="img">

Css moving the divs in left and right

I have the "left ads" div and a "right ads" div and the main content and menu at the center. I want to move the "left ads" div in left so that so that the "menu bar" and all the content below it gets at top. And i want to move the "right ads" div in right . Also after moving them they should be independent i.e what ever be their content they should not effect the middle div i.e main content div .[Please view it in desktop in full screen]
*{
margin: 0;
padding: 0;
}
#adleft{
background: pink;
}
#wrapper{
max-width: 1024px;
margin: 0 auto;
}
#topmenubar{
background:violet;
}
#logoandad{
background:greenyellow;
}
#main_content{
background: azure;
border: 1px solid black;
}
#featuredcontent{
background: burlywood;
}
#morecontents{
background: crimson;
}
#allquizes{
background: chocolate;
}
#adright{
background: aqua;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style/quiz.css">
<title>QuizOm</title>
</head>
<body>
<div class="adscontainers" id="adleft">Left Ads</div>
<div id="wrapper">
<div id="topmenubar">Menu Bar</div>
<div id="logoandad">Logo and Ads</div>
<div id="main_content">
<div id="featuredcontent">
<div class="twoupperbox">Featured content 1</div>
<div class="twoupperbox">Featured content 2</div>
</div>
<div id="morecontents">
<div class="bottomthreebox">conten1</div>
<div class="bottomthreebox">conten2</div>
<div class="bottomthreebox">conten3</div>
</div>
<div id="allquizes">
<h1>All Quizes</h1>
<div class="bottomthreebox">All quiz1</div>
<div class="bottomthreebox">All quiz2</div>
<div class="bottomthreebox">All quiz3</div>
</div>
</div>
</div>
<div class="adscontainers" id="adright">Right Ads</div>
</body>
</html>
The easiest way to achieve this would be using display:flex
#adleft{
background: pink;
}
#wrapper{
max-width: 1024px;
margin: 0 auto;
flex:1 0 auto;
}
#topmenubar{
background:violet;
}
#logoandad{
background:greenyellow;
}
#main_content{
background: azure;
border: 1px solid black;
}
#featuredcontent{
background: burlywood;
}
#morecontents{
background: crimson;
}
#allquizes{
background: chocolate;
}
#adright{
background: aqua;
}
.container{
display: flex;
flex-direction: row;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style/quiz.css">
<title>QuizOm</title>
</head>
<body>
<div class="container">
<div class="adscontainers" id="adleft">Left Ads</div>
<div id="wrapper">
<div id="topmenubar">Menu Bar</div>
<div id="logoandad">Logo and Ads</div>
<div id="main_content">
<div id="featuredcontent">
<div class="twoupperbox">Featured content 1</div>
<div class="twoupperbox">Featured content 2</div>
</div>
<div id="morecontents">
<div class="bottomthreebox">conten1</div>
<div class="bottomthreebox">conten2</div>
<div class="bottomthreebox">conten3</div>
</div>
<div id="allquizes">
<h1>All Quizes</h1>
<div class="bottomthreebox">All quiz1</div>
<div class="bottomthreebox">All quiz2</div>
<div class="bottomthreebox">All quiz3</div>
</div>
</div>
</div>
<div class="adscontainers" id="adright">Right Ads</div>
</div>
</body>
</html>

How would get two div tags to align horizontally

Okay so I have two div elements that I want to align vertically, the elements are identified as "NavBar" and "title" I have tried multiple times to align them but nothing seems to work... Any help would be great and the code is below.
Here is the code:
body {
background-color: black;
}
div.NavBar {
color: blue;
background-color: white;
text-align: center;
max-width: 25%;
min-width: 140px;
flex: 1;
}
div.title {
color: purple;
text-align: center;
}
div.container {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<link rel='shortcut icon' href='favicon.png' type='image/png'/ >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bobby The Death Mage</title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="NavBar">
<h1>Nav Bar<BR>---------------</h1>
</div>
</div>
<div class="title">
<h1>Site Title<BR>--------------------------------------------</h1>
</div>
</body>
</html>
If you want to align the 2 divs horizontally, you're closing the </div> of "container" before "title", close it after the "title" div block https://jsfiddle.net/L9n8jf2y/
<div class="container">
<div class="help">
<h1>Nav Bar</h1>
</div>
<div class="title">
<h1>Site Title</h1>
</div>
</div>
div {
text-align: center
}
<!DOCTYPE html>
<html>
<head>
<link rel='shortcut icon' href='favicon.png' type='image/png'/ >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bobby The Death Mage</title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="Nav Bar">
<h1>Nav Bar<BR>---------------</h1>
</div>
</div>
<div class="title">
<h1>Site Title<BR>--------------------------------------------</h1>
</div>
</body>
</html>
you close the container div after NavBar.. so according to your code here is the answer just place the container div end after class title /div> close and add a extra class into container class div- https://jsfiddle.net/exwbfxa8/1/
body {
background-color: black;
}
div.v_align {
display: inline-flex;
}
div.NavBar {
color: blue;
background-color: white;
}
div.title {
color: purple;
text-align: center;
}
<div class="container v_align">
<div class="NavBar">
<h1>Nav Bar--------------</h1>
</div>
<div class="title">
<h1>Site Title----------------------</h1>
</div>
</div>

CSS issue in IE7

I have simple web page and that banner contains three images. I want to expand the banner when different resolutions.my solution is working on Firefox and Chrome but not IE7.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#left{width:338px; height:103px; float:left; background-image:url('image/banner_left.jpg'); background-repeat:no-repeat; margin:0px; padding:0px;}
.middle{float:left; background-image:url('image/banner_middle.jpg'); background-repeat:repeat-x; margin:0px; padding:0px; }
#right{width:620px; height:103px; float:right; background-image:url('image/banner_right.jpg'); background-repeat:no-repeat;margin:0px; padding:0px; }
</style>
</head>
<body style="margin:0px; padding:0px;">
<form id="form1" runat="server">
<div id="container" class="middle" style="float:left;">
<div id="left"></div>
<div id="middle" class="middle"></div>
<div id="right"></div>
<div id="content" style="clear:both; float:left;"></div>
</div>
</form>
</body>
</html>
any idea?
thanks in advance!
Try to set width value in .middle in percents.
Using your example and assuming you want any content under the banner this is one way you can do it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#banner{
background:url('image/banner_middle.jpg') ;
background-repeat:repeat-x;
}
#left{
width:338px;
height:103px;
float:left;
background-image:url('image/banner_left.jpg');
background-repeat:no-repeat;
}
#right{
width:620px;
height:103px;
float:right;
background-image:url('image/banner_right.jpg');
background-repeat:no-repeat;
}
.clearFloat{
clear:both;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="banner">
<div id="left"></div>
<div id="right"></div>
<div class="clearFloat"></div>
</div>
<div id="content">
Any content goes here
</div>
</form>
</body>
</html>