So I have a navbar fixed to the top and for this I've used position: fixed but for some reason my content is overriding it. I would like to have something like this:
html {
position: relative;
min-height: 100%;
}
.header {
top: 0;
position: fixed;
}
.footer {
position: fixed;
bottom: 0
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Static Template</title>
</head>
<body>
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column side" style="background-color: #aaa;">Column</div>
<div class="column middle" style="background-color: #bbb;">Column</div>
<div class="column side" style="background-color: #ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
Codesandbox Demo: https://codesandbox.io/s/laughing-dew-2g2r6?file=/index.html
You have to add some margin-top to the row class.
html {
position: relative;
min-height: 100%;
}
.header {
top: 0;
position: fixed;
}
.row {
margin-top: 50px;
}
.footer {
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Static Template</title>
</head>
<body>
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column side" style="background-color: #aaa;">Column</div>
<div class="column middle" style="background-color: #bbb;">Column</div>
<div class="column side" style="background-color: #ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
For that you need to add margin-top css in your row class.
For example:
.header {
position: fixed;
top: 0;
width: 100%;
}
.row{
margin-top: 67px;
}
.footer {
position: fixed;
bottom: 0
}
<div class="header">
<h2>header</h2>
</div>
<div class="row">
<div class="column side" style="background-color: #aaa;">Column</div>
<div class="column middle" style="background-color: #bbb;">Column</div>
<div class="column side" style="background-color: #ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
You can play with code here. Also you can check here in other resources.
Related
I am developing my first .net core web application. I am trying to put my company logo in _layout.cshtml page, but it seems that the style sheet site.css is not recognized by the _layout page. Below is my code for _layout.cshtml page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - VitalRecords</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="headerDiv">
<div class="headerTopBanner"></div>
<div class="headerLogo">
<div class="logo"></div>
</div>
<h1 class="display-4">Welcome</h1>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - test - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
and my site.css has the following defined:
.headerDiv {
background-color: white;
}
.headerTopBanner {
background-color: $header-top-banner-color;
height: 5px;
width: 100%;
}
.headerLogo {
padding: 5px;
padding-left: 10px;
vertical-align: middle;
}
.logo {
background: url(../../images/LogoWithDesc) 0 0;
min-height: 70px;
vertical-align: middle;
}
$header-top-banner-color: #FD810A;
the screen shot of the output looks like so:
I have the similar code in Index.cshtml:
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
<div class="headerDiv">
<div class="headerTopBanner"></div>
<div class="headerLogo">
<div class="logo"></div>
</div>
<h1 class="display-4">Welcome</h1>
</div>
Thats is why the welcome is coming twice on my page, but logo and some other colors are not coming. It seems that site.css is not recognized at all.
any help will be highly appreciated,
Try importing your css link like this
<link href="#Url.Content("~/css/site.css")" rel="stylesheet" type="text/css" />
i want to make my horizontal table go vertical in responsive. what i mean is that my table is at the moment horizontal, and i want to make it vertical. i dont care if it is with table attributes or div attributes.
thanks.
i dont know what else to write about my problem.
body {
background-color: #596770;
margin-left: 85px; /* Same as the width of the sidenav */
margin-top: 102.5px;
font-size: 18px; /* Increased text to enable scrolling */
padding: 0px 52px 0px 52px;
font-size: 35;
color:white;
font-family: montserrat, sans-serif;
}
table {
}
th {
width: 423px;
height: 273px;
}
.latest img {
max-width: 100%;
}
.About {
margin: -45px 0px 0px -52px;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
<div class="main">
<h2>Latest News</h2>
<style>
table, th {
border: 1px solid black;
}
table, tr {
border: 0px;
}
</style>
<table class="latest">
<tr>
<!--Latest news-->
<th>
<a href="">
<img src="img/NemID_app_to.jpg.png" alt="NemID"><img/>
</a>
</th>
<td width="61px">
<!--second news-->
<th>Pic2</th>
<td width="61px">
<!--Third news-->
<th>Pic3</th>
</tr>
</table>
</div>
You can use bootstrap and have col tags. When the screen is made smaller the columns will shift down vertically. See an example here: https://getbootstrap.com/docs/3.3/examples/grid/
Are you looking for something like this?
* {
margin: 0;
}
.table {
display: table;
width: 100%
}
.tr {
display: table-row;
}
.td {
display: table-cell;
border: 1px solid #ccc;
padding: 5px
}
#media (max-width: 768px) {
.tr {
display: block;
float: left;
}
.td {
display: block;
}
}
<div class="table">
<div class="tr">
<div class="td">Test 1</div>
<div class="td">Test 2</div>
<div class="td">Test 3</div>
<div class="td">Test 4</div>
<div class="td">Test 5</div>
<div class="td">Test 6</div>
</div>
<div class="tr">
<div class="td">Test 1</div>
<div class="td">Test 2</div>
<div class="td">Test 3</div>
<div class="td">Test 4</div>
<div class="td">Test 5</div>
<div class="td">Test 6</div>
</div>
</div>
When i try to use bootstrap, it is interference with my own CSS. it is possible, to only let the Bootstrap CSS to work on a special ammount of my website.
Looking at your example, you don't want an actual table, but some grid to place the news items. I don't know which browsers you want to support, but CSS Grid layout may be the solution. Then you can define a different grid depening on the screen width.
is this what you are looking for:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
</div>
<div class="row">
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
</div>
</div>
<header>
</header>
</body>
</html>
resize the window to see effect
I am using Bootstrap and I want add a button at right of a bar that looks like <input-group-addon>. To be specific, full height and locates at right most.
I've tried height: 100% but the button styles super high.
this is part of my code: https://plnkr.co/edit/lK8vt0wT1xDesuOZW8vU?p=preview
this is what I m looking for
Try absolutely positioning your button:
.my-heading {
position: relative;
}
.btn.my-btn {
position:absolute;
right: 0;
top: 0;
height: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading my-heading">Assist Panel<button class="my-btn btn"><i class="fa fa-chevron-left"></i></button></div>
<div class="panel-body"></div>
</div>
</body>
The parent needs position:relative.
Then you can position the button absolutely in the corner with height:100%
.panel-heading{
position:relative;
}
button.btn{
float: none;
margin-right: 0;
position: absolute;
top: 0;
right: 0;
height: 100%;
}
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">Assist Panel<button style="float:right;margin-right:0;" class="btn" onclick="assist_close()"><i class="fa fa-chevron-left"></i></button></div>
<div class="panel-body"></div>
</div>
</body>
Using Position Property
.panel-heading{
position: relative;
}
button.btn{
position: absolute;
top:0;
bottom:0;
border-radius: 0;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
<div class="panel-heading">Assist Panel<button class="btn" onclick="assist_close()"><i class="fa fa-chevron-left"></i></button></div>
<div class="panel-body"></div>
</div>
By using display flex on the parent panel you could set the panel heading and the button next to each other and then they will naturally have the same height. Then would just need to adjust to panel-heading width.
.panel{
display: flex;
}
.panel-heading {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">Assist Panel</div>
<button class="btn" onclick="assist_close()"><i class="fa fa-chevron-left"></i></button>
</div>
</body>
</html>
I am using bootstrap to layout my website.
Everything is fine except the vertical alignment of the text "THIS IS TEST". I used different ways which I found in the web such as combination of vertical-align: middle and text-align: center and flex box. None of these generated the right vertical alignment. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<style>
.header{
font-weight: bold;
font-size: 30px;
background-color: #4070CB;
color: #EFF0F2;
height:60px;
}
.txt{
align-items :center;
display : flex;
text-align: center;
justify-content: center;
}
.rightImg{
margin-right:30px;
margin-left:12px;
}
.leftImg{
margin-right:12px;
margin-left:30px;
}
</style>
</head>
<body>
<div class="container col-sm-offset-1">
<div class="row">
<div class="col-sm-10 header">
<div class="row">
<div class="col-sm-1 leftImg"><img src="http://image.flaticon.com/sprites/authors/28-simpleicon.png" alt="Smiley face" height="36" width="36"></div>
<div class="col-sm-8 txt">THIS IS A TEST</div>
<div class="col-sm-1 rightImg"><img src="http://image.flaticon.com/sprites/authors/28-simpleicon.png" alt="Smiley face" height="36" width="36"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div>
</div>
Also here is the jfiddle link to my code:
jfiddle
Can anyone help? How can I vertically align the text in the header?
Your text is centered vertically, but in relation to the row, not the header.
To vertically align everything in the header, you could replace the height with a padding.
.header {
padding: 15px 0;
}
Alternatively you can apply a margin to your text.
.txt {
margin-top: 10px;
}
I have a list of results that I want to make responsive. I have these results displaying roughly in the centre of the page with borders on the left and right which are whitespace. I want this whitespace to disappear as the browser is resized.
I'm using the following css:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
#parent{ position: relative; width: 900px; left: 400px; background: #999;padding:10px;}
.child { position: relative; background:#ccc;min-height:250px;margin:20px;}
This is the html:
<div id="parent" infinite-scroll="addMoreItems()" infinite-scroll-distance="1" infinite-scroll-disabled='busy'>
<div class="child" ng-repeat="blah in blahs">
Description: <br />{{Description}} <br /><br />
StarRating: <br /> {{Rating}} <br /><br />
<div ng-controller="weatherCtrl" ng-init="isCollapsed = !isCollapsed">
<div>
<button ng-model="blah" class="btn btn-default" ng-click="loadWeather(blah, $index);">{{buttonText}} weather</button>
<hr>
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
</div>
<div style='clear: both;'></div>
</div>
<div ng-show='busy'><h1>Loading data...</h1></div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
#parent{ position: relative; width: 900px; left: 400px; background: #999;padding:10px;}
.child { position: relative; background:#ccc;min-height:250px;margin:20px;}
#media (max-width: 400px) {
.child{margin:0px;}
#parent{width:100%;}
}
That should be the css you want to use