I have a CSS sticky footer defined as follows:
#foot {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
text-align: right;
padding-top: 7px;
font-size: small;
background-color: none;
}
What looks like a horizontal line appears at the bottom of all forms. When I remove the position: fixed (or absolute) the line is not shown.
Here is the test site
HTML - main index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="wtApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="fragment" content="!">
<meta name="google-site-verification" content="yVui_k1sbN4TDHx-yDmol0MzU1QXaTTGlhNa_gVLzUs" />
<title>Writer's Tryst, where authors and publishers, producers, agents meet.</title>
<meta name="description" content="A better way for writers to find publishers, producers and agents" />
<!-- <base href="/" /> -->
<link href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" data-integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" data-integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/shares.css" />
<link rel="shortcut icon" href="img/icons/writers-tryst.png" />
</head>
<body data-ng-controller="mainController">
<header>
<nav class="navbar navbar-light">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="img/writers-tryst-logo.png" alt="logo" /></a>
<div id="shares">
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title) -->
<a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon">
<i class="fa fa-stumbleupon"></i>
</a>
<!-- Reddit (url, title) -->
<a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit">
<i class="fa fa-reddit"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div> <!--navbar-header-->
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="/"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li> Writers</li>
<li> Enablers</li>
<li> About</li>
<li> Privacy/Rules</li>
<li> Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" href="#log-in"><i class="glyphicon glyphicon glyphicon-log-in"></i> Log-In</a></li>
<li><a id="create-account-link" href="#accounts"><i class="glyphicon glyphicon-user"></i> Create Account</a></li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li><a id="#update-profile" href="update-profile">Update profile</a></li>
<li><a id="#manage-uploads" href="manage-uploads">Manage uploads</a></li>
</ul>
</li>
<li ><a id="#reset-pwd-link" href="reset-pwd"></a></li>
</ul>
</div> <!--navbar-collapse-->
</div> <!--container fluid-->
</nav>
</header>
<div>
<div id="message" class="alert m-t-10"></div>
<div id="main" class="content">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
</div>
<div class="panel panel-default">
<div id="foot" class="text-right small">© 2016 Ronald Tornambe, Inc.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/pages.js"></script>
<script>
$("#drop-toggle-1").on("click", function (e) {
e.preventDefault();
});
</script>
</body>
</html>
The Bootstrap panel has a border and box-shadow.
Override it like..
.panel {
border-width:0;
box-shadow:none;
}
http://www.codeply.com/go/CMWIpp8FAE
it comes from this rule in bootstrap,CSS:
.panel-default {
border-color: #ddd;
}
so just reset this rule in your custom CSS like this:
.panel-default {
border-color: transparent;
}
if you are talking about the border line just below your login section then it is because of the class panel which apply
border: 1px solid transparent;
<div class="panel panel-default">
on the Div
Class: 'panel' adds border: 1px solid transparent; and class: 'panel-default' add border-color: #ddd; so your footer does get a border.
You can fix it by adding this to your css:
.panel {border:none;}
Related
I have a carousel inside a div. Because of the varying lengths of text used in the carousel, on a mobile device, the carousel arrows keep moving or the .carousel-text doesn't fit on the screen and cuts off at the bottom.
I've tried changing positions to absolute but the text disappears, tried setting a really large height to the div and it still moves, and I've watched videos and lots of solutions and honestly, my code is such a mess now that I don't have a clue what any of it means.
Sorry, new to coding, and any help is massively appreciated.
I promise I've spent about 90 minutes going through solutions on here and nothing seems to be working.
.carousel-div{
background-color:#FAE8C8;
padding-bottom: 200%;
padding-top:20;
width:auto;
height:800px;
}
.carousel{
position:absolute;
}
.carousel-item{
object-fit:cover;
object-position:center;
overflow:hidden;
text-align:center;
align-items: center;
}
.carousel-image{
width:250px;
}
.carousel-options{
padding-top: 10px;
font-weight:lighter;
color:#445C3C
}
.carousel-text{
font-size: 1.3rem;
padding: 0 15%;
font-weight:lighter;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- bootstrap/css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/567f40eaa8.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Work+Sans:300" rel="stylesheet">
<title>Get Involved</title>
</head>
<body>
<nav class='navbar navbar-expand-lg navbar-light fixed-top'>
<a class='navbar-brand' href="">Body Image and Ethnicity Study</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class='collapse navbar-collapse' id='navbarTogglerDemo01'>
<ul class='navbar-nav ms-auto'>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">FAQs</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#my-work">Meet the Team</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Get Involved</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Further Work</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Contact</a>
</li>
</ul>
</div>
</nav>
<h1 class='about-title' style=>Get Involved</h1>
<div class="container-lg about-main">
<div class="row">
<div class="col-lg-6">
<h1 class='about-item align-items-center'>There are multiple ways to be involved with the Body Image and Ethnicity study this year. </h1>
<h1 class='about-item align-items-center'>If you don’t identify with any of the below opportunities, then please don’t hesitate to <a href="mailto:H.k.lewis#qmul.ac.uk" class='email-han'> get in touch</a> with Hannah.</h1>
</div>
<div class="col-lg-6">
<img src="get-involved-photos/get-involved-img.png" alt="" class='about-image'>
</div>
</div>
</div>
<div class="carousel-div" >
<div id="work-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="get-involved-photos/get-involved-img2.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 1</h1>
<p class='carousel-text option-1'>If you identify as female or non-binary, are aged 13-19, are from a South Asian background and experience body image concerns, you can attend a focus group to discuss your experiences.<a href="https://forms.office.com/r/qrjJdWDkg1" class='email-han'>Just follow this link.</a></p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img3.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 2</h1>
<p class='carousel-text'>If you meet the criteria for Option 1, but would rather have a 1:1 interview than attend a focus group, you can<a href="" class='email-han'>get in touch with Hannah</a>to arrange a convenient time to chat.</p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img4.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 3</h1>
<p class='carousel-text'> If you have lived experience of either BDD or an eating disorder, and would like to be involved in the co-production of a cultural adaptation, you can<a href="" class='email-han'>get in touch with Hannah here.</a></p>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#work-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#work-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
Your arrows were moving because you were using the property align-items: center and because the carousel height was never the same.
One solution you can do is to set a height not to exceed to your paragraph carousel-text .
You can add the overflow-y:auto property to make it responsive.
(you can also personalize your scrollbar)
.carousel-div{
background-color:#FAE8C8;
padding-bottom: 200%;
padding-top:20;
width:auto;
height:800px;
}
.carousel{
position:absolute;
}
.carousel-item{
object-fit:cover;
object-position:center;
overflow:hidden;
text-align:center;
align-items: center;
}
.carousel-image{
width:250px;
}
.carousel-options{
padding-top: 10px;
font-weight:lighter;
color:#445C3C
}
.carousel-text{
font-size: 1.3rem;
padding: 0 15%;
font-weight: lighter;
height: 200px;
overflow-y: auto;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- bootstrap/css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/567f40eaa8.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Work+Sans:300" rel="stylesheet">
<title>Get Involved</title>
</head>
<body>
<nav class='navbar navbar-expand-lg navbar-light fixed-top'>
<a class='navbar-brand' href="">Body Image and Ethnicity Study</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class='collapse navbar-collapse' id='navbarTogglerDemo01'>
<ul class='navbar-nav ms-auto'>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">FAQs</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#my-work">Meet the Team</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Get Involved</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Further Work</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Contact</a>
</li>
</ul>
</div>
</nav>
<h1 class='about-title' style=>Get Involved</h1>
<div class="container-lg about-main">
<div class="row">
<div class="col-lg-6">
<h1 class='about-item align-items-center'>There are multiple ways to be involved with the Body Image and Ethnicity study this year. </h1>
<h1 class='about-item align-items-center'>If you don’t identify with any of the below opportunities, then please don’t hesitate to <a href="mailto:H.k.lewis#qmul.ac.uk" class='email-han'> get in touch</a> with Hannah.</h1>
</div>
<div class="col-lg-6">
<img src="get-involved-photos/get-involved-img.png" alt="" class='about-image'>
</div>
</div>
</div>
<div class="carousel-div" >
<div id="work-carousel" class="carousel slide" data-bs-ride="false">
<button class="carousel-control-prev" type="button" data-bs-target="#work-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#work-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="get-involved-photos/get-involved-img2.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 1</h1>
<p class='carousel-text option-1'>If you identify as female or non-binary, are aged 13-19, are from a South Asian background and experience body image concerns, you can attend a focus group to discuss your experiences.<a href="https://forms.office.com/r/qrjJdWDkg1" class='email-han'>Just follow this link.</a></p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img3.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 2</h1>
<p class='carousel-text'>If you meet the criteria for Option 1, but would rather have a 1:1 interview than attend a focus group, you can<a href="" class='email-han'>get in touch with Hannah</a>to arrange a convenient time to chat.</p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img4.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 3</h1>
<p class='carousel-text'> If you have lived experience of either BDD or an eating disorder, and would like to be involved in the co-production of a cultural adaptation, you can<a href="" class='email-han'>get in touch with Hannah here.</a></p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>David Chu's China Bistro'</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght# S300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght#0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<!--here container is used and not container-fluid because there is little info on this homepage thus we don't want the width to stretch to the full width of the screen-->
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg">
<div id="logo-img" alt="Logo image"></div><!--the id #logo-img is responsible to print the logo-->
</a>
<div class="navbar-brand">
<h1>David Chu's China Bistro</h1>
<p>
<img src="images/K-star-logo.jpg" id="K-logo" alt="Kosher certification" />
<span>Kosher certified</span>
</p>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<!--used to display our menu items(use unordered list)-->
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"<!--glyphicon is used to import the image of the cutlery and let it behave as a font--></span><br class="hidden-xs" /><!--break tag is used here to remove the Menu word when we reach the breakpoint-->Menu
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs" />About
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span>
<br class="hidden-xs" />Awards
</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:410-602-5008">
<span>410-602-5008</span>
</a><div>*We Deliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
My code is responsible for displaying the navbar of a website. When my screen is at full-page i am getting next to the restaurant's name "menu", "awards" and "About".
When the page is squeezed (or website used on a phone), I need the "menu", "awards" and "About" buttons to disappear and display in their place a toggle navigation button that when clicked will display those 3 buttons, which is not happening.
I'm trying to create a typical user panel with thymeleaf layouts.
As you can see on the expected result picture below, the layout is composed by a header and left menu. The contents chosen from the menu are displayed in the child section:
However, the result I get is this one:
This is my "fixed parts" code where the header is the "header" fragment and the menu is the "menu" fragment:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>Thymeleaf Layout</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="panel/css/custom.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">UserName</a>
</div>
<div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 <a href="#"
class="btn btn-danger square-btn-adjust">Logout</a></div>
</nav>
<nav class="navbar-default navbar-side" role="navigation" th:fragment="menu">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}" style="font-weight: normal"></label><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}" style="font-weight: normal"/>
</li>
<li>
<i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}" style="font-weight: normal"/>
</li>
</ul>
</div>
</nav>
</div>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>
This is my "child" page where I import both, the header and the menu fragments:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>Thymeleaf Layout</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="panel/css/custom.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body onload="test()">
<div th:replace="fragments/panel :: header">
</div>
<div th:replace="fragments/panel :: menu">
</div>
<div>
my page content
</div>
<script>
function test() {
alert("TEST");
}
</script>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>
You can find the gitHub repository with the sample code at this link:
https://github.com/MichaelKnight/thymeleafLayout
Bootstrap Dashboard
This Bootstrap Dashboard example showcases how to achieve a three component page.
Top Navigation Bar
Sidebar Navigation Menu
Content Area
The Top Navigation bar is a root component inside your <body>. The Sidebar and Content Area are <div class="col-xs-*"> columns located inside a <div class="row"> row which resides in a <div class="container-fluid"> container.
Visit the link above and view-source to see the structure of the HTML. Fundamentally this is a CSS problem, as your current GitHub project contains all of the elements, they are just positioned behind each other out of view. Adding the appropriate Bootstrap classes will resolve the problem.
The Thymeleaf fragments are being included properly.
The layout sample is uploaded to my gitHub repository which you can find at the end of the issue description.
The top bar:
<div layout:fragment="header">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">UserName</a>
</div>
<div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 <a href="#"
class="btn btn-danger square-btn-adjust">Logout</a></div>
</nav>
</div>
The side menu:
<div layout:fragment="sidebar">
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
style="font-weight: normal"></label><span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
style="font-weight: normal"/></a>
</li>
<li>
<a href="#"><i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}"
style="font-weight: normal"/></a>
</li>
</ul>
</div>
</nav>
</div>
Then you have to create the layout page:
<div layout:fragment="sidebar">
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
style="font-weight: normal"></label><span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
style="font-weight: normal"/></a>
</li>
<li>
<a href="#"><i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}"
style="font-weight: normal"/></a>
</li>
</ul>
</div>
</nav>
</div>
In my main index.html, I reference bootstrap CSS, but styles are not being resolved correctly?
In my test site I have defined a <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>, but it does not show the warning colors.
HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="wtApp">
<head>
<meta charset="utf-8" />
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<title>Writer's Tryst, where authors and publishers, producers, agents meet.</title>
<meta name="description" content="A better way for writers to find publishers, producers and agents" />
<link href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="frainversegment" content="!" />
<meta name="google-site-verification" content="yVui_k1sbN4TDHx-yDmol0MzU1QXaTTGlhNa_gVLzUs" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" data-integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" data-integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/shares.css" />
<link rel="shortcut icon" href="img/icons/writers-tryst.png" />
<!--
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15499108-1");
pageTracker._trackPageview();
} catch (err) { }
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3982825388677642",
enable_page_level_ads: true
});
</script>
-->
</head>
<body data-ng-controller="mainController">
<header>
<nav class="navbar navbar-light">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="img/writers-tryst-logo.png" alt="logo" /></a>
</div>
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li> Writers</li>
<li> Enablers</li>
<li> About</li>
<li> Privacy/Rules</li>
<li> Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="glyphicon glyphicon glyphicon-log-in"></i> Log-In</li>
<li><a id="create-account-link" href="#accounts"><i class="glyphicon glyphicon-user"></i> Create Account</a></li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li><a id="update-profile" href="#update-profile">Update profile</a></li>
<li><a id="manage-uploads" href="#manage-uploads">Manage uploads</a></li>
</ul>
</li>
<li ><a id="reset-pwd-link" href="#reset-pwd"></a></li>
</ul>
</div>
</div>
</nav>
<!--
<div class="google-ad-top">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-3982825388677642"
data-ad-slot="1133448516"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
-->
</header>
<p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p><br/>
<div id="shares">
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title) -->
<a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon">
<i class="fa fa-stumbleupon"></i>
</a>
<!-- Reddit (url, title) -->
<a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit">
<i class="fa fa-reddit"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
</div>
<div>
<div id="message" class="alert m-t-10"></div>
<div id="main" class="content">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
</div>
<div class="panel panel-default">
<div>© 2016 Ronald Tornambe, Inc.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/pages.js"></script>
<script>
$("#drop-toggle-1").on("click", function (e) {
e.preventDefault();
});
$("#update-profile").on("click", function () {
sessionStorage.setItem("create-or-update", "update");
console.log("session-storage=" + sessionStorage.getItem("create-or-update"))
$("#create-account-link").trigger("click");
});
</script>
</body>
</html>
Based on the Bootstrap documentation (http://getbootstrap.com/css/#helper-classes-backgrounds), your warning paragraph is showing the correct color. It looks a little different because you're missing the padding - Bootstrap has a padding: 15px attribute by default.
In my file, there are references to bootstrap styles.
All class references are defaulting to the primary color. To illustrate. this test site, has a button on the top left with class btn btn-success, which should be green.
HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="wtApp">
<head>
<meta charset="utf-8" />
<title>Writer's Tryst, where authors and publishers, producers, agents meet.</title>
<meta name="description" content="A better way for writers to find publishers, producers and agents" />
<link href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="frainversegment" content="!" />
<meta name="google-site-verification" content="yVui_k1sbN4TDHx-yDmol0MzU1QXaTTGlhNa_gVLzUs" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" data-integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" data-integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/shares.css" />
<link rel="shortcut icon" href="img/icons/writers-tryst.png" />
<!--
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15499108-1");
pageTracker._trackPageview();
} catch (err) { }
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3982825388677642",
enable_page_level_ads: true
});
</script>
-->
</head>
<body data-ng-controller="mainController">
<header>
<nav class="navbar navbar-light">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="img/writers-tryst-logo.png" alt="logo" /></a>
</div>
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li> Writers</li>
<li> Enablers</li>
<li> About</li>
<li> Privacy/Rules</li>
<li> Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="glyphicon glyphicon glyphicon-log-in"></i> Log-In</li>
<li><a id="create-account-link" href="#accounts"><i class="glyphicon glyphicon-user"></i> Create Account</a></li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li><a id="update-profile" href="#update-profile">Update profile</a></li>
<li><a id="manage-uploads" href="#manage-uploads">Manage uploads</a></li>
</ul>
</li>
<li ><a id="reset-pwd-link" href="#reset-pwd"></a></li>
</ul>
</div>
</div>
</nav>
<!--
<div class="google-ad-top">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-3982825388677642"
data-ad-slot="1133448516"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
-->
</header>
<div id="shares">
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title) -->
<a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon">
<i class="fa fa-stumbleupon"></i>
</a>
<!-- Reddit (url, title) -->
<a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit">
<i class="fa fa-reddit"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
</div>
<button class="btn btn-success">Hello World</button>
<div>
<div id="message" class="alert m-t-10"></div>
<div id="main" class="content">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
</div>
<footer class="panel panel-default">
<div>© 2016 Ronald Tornambe, Inc.</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/pages.js"></script>
<script>
$("#drop-toggle-1").on("click", function (e) {
e.preventDefault();
});
$("#update-profile").on("click", function () {
sessionStorage.setItem("create-or-update", "update");
console.log("session-storage=" + sessionStorage.getItem("create-or-update"))
$("#create-account-link").trigger("click");
});
</script>
</body>
</html>
Buttons from twitter-bootstrap-3 have class .btn plus a second class, in this case .btn-success and you are in your main.css (line 123) overriding the class .btn with background-color: blue;
.btn {
background-color: blue;
border-radius: 4px;
font-size: smaller;
}
My advice to is only change the second class, that is attached to some kind of event/action of button. instead of general .btn (button)
Note: If you are using Bootstrap as the base stylesheet, this is not an intended solution to the question! This can, however, highlight potential problem areas with overriding styles in custom stylesheets.
The styles for .btn are overridden in main.css. This is caused by loading main.css after bootstrap.css.
From Chrome DevTools:
From this image, you can see that the styles for .btn in main.css are given higher priority than those for .btn-success from buttons.less (part of Bootstrap's styles).
You can easily change the priority by moving the stylesheet for main.css above the one for bootstrap.css, which will make Bootstrap's styles higher priority than the customized ones.
Here's what your site looks as is:
And after moving main.css:
Buttons with .btn are green by default in bootstrap, but you have overridden that in main.css on line 123.
You can either change the class of buttons you wish to be blue, or use a different CSS selector for them.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" data-integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" data-integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/shares.css" />
You created .btn class in css/main.css and this class overriding class in bootstrap.css file