I'm using bootstrap4 fixed-top navbar which works fine in normal browser.
However, when I test on a mobile device (Galaxy S5 using chrome dev options) the content starts behind the nav bar, I've tried some padding in my css but I can't seem to get it to work correctly.
Below is a jsfiddle of the HTML and CSS, the page content starts behind the fixed-top nav bar.
https://jsfiddle.net/8kefh4u7/6/
Also here is my CSS
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.epg-container {
position: relative;
width: 100%;
max-width: 1500px;
overflow: hidden;
display: block;
margin: 0 auto;
background-color: black;
}
.epg-container ul.listings-grid {
list-style-type: none;
padding: 0;
margin: 0;
white-space: nowrap;
background-color: #262626;
}
.epg-container ul.listings-grid li {
font-size: 20px;
text-align: left;
}
.epg-container ul.listings-grid .listings-channel-row {
height: auto;
padding: 0;
border-bottom: solid;
border-bottom-width: 6px;
border-color: #262626;
overflow: hidden;
}
.epg-container ul.listings-grid .listings-channel {
/* color not necesary */
color: white;
width: 20%;
height: 83px;
float: left;
text-align: center;
}
.epg-container ul.listings-grid .listings-channel img {
max-width: 100%;
max-height: 100%;
}
.epg-container ul.listings-grid .listings-program {
color: #989898;
border-right: solid;
border-right-width: 3px;
border-left: solid;
border-left-width: 3px;
border-color: #262626;
float: left;
padding: 10px 10px;
background-color: black;
}
.epg-container ul.listings-grid .listings-details-now-info {
color: #fa9609;
font-size: 12px;
}
.epg-container ul.listings-grid .listings-details-next-info {
color: #fa9609;
font-size: 12px;
}
What would be the best way to make the content page always start under the NAVBAR that would work well on mobile.
The recommended method is padding-top on the BODY, the same height as the navbar...
body {
padding-top: 56px;
}
From the Bootstrap docs..
"Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements."
It is unreliable to use a fixed amount for the height of the header to introduce a padding-top to the body element. I'm using this bit of code after a page refresh to set the body to the correct height.
$("body").css({'padding-top': $('nav.navbar').height()});
The navbar is identified using the nav element with the navbar class.
I fixed this so now the content will always start after the fixed nav bar.
I added the below to the body css
min-height: 51.5rem;
padding-top: 2.5rem;
Thank you #ZimSystem for pointing me in the right direction.
Related
Im trying to make the anchor tag as button and trying to add some css on it but it is not clickable
Here is my html code.
I'm following a youtube tutorial, I followed the video 100% but mine is not working, Im sorry im just new in web developing thankyou for the help.
<body>
<!-- Welcome Page -->
<section id="ulambg">
<div class="ulambg container">
<div>
<h1>Eatwell</h1>
Ready to Eat
Ready to Cook
</div>
</div>
</section>
<!-- End Welcom Page -->
And this is the css I used in the program, is it because of the Java? I read some forum that says some java function wont work if you disabled your java on your machine.
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 15px;
font-family: 'Raleway', sans-serif ;
}
a {
text-decoration: none;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/*Welcome Page Section Ulambg*/
#ulambg {
background-image: url(./img/bg.jpg);
background-size: cover;
background-position: top center;
position: relative;
}
#ulambg::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .5;
}
#ulambg h1 {
color: white;
width: fit-content;
font-size: 4rem;
position: relative;
}
#ulambg .btnulam {
display: inline-block;
padding: 10px 30px;
color: blue;
background-color: transparent;
border: 2px solid blue;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1rem;
margin-top: 30px;
transition: .3s ease;
transition-property: background-color;
}
#ulambg .btnulam:hover {
color: white;
background-color: blue;
}
/*Welcome Page Sectio Ulambg*/
add z-index: -1 in #ulambg::after, it's background, should not cover the page.
Demo
if i understand u correct, u mean <a href="#".. <- Anchor tag isnt clickable?
If yes u need to give it a name like <a href="#goHere".. and this means the link points to an id somewhere on the page ( for example to: <img id="goHere" src="/img/pic.gif"...
I'm new to the stuff myself but hopefully i could help in any way :)
I am trying to generate 1:1 a4 pages from my primitive wyswyg to pdf using mpdf.
So using this css:
#editor {
background-color: gray;
border: 1px black;
padding: 1em 2em;
}
.page {
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
/*padding: 10em 2em;*/
width: 595px;
height: 841px;
display: flex;
flex-direction: column;
}
.content {
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
padding-left: 2cm;
padding-bottom: 2cm;
padding-top: 2cm;
outline-color: white;
}
.header {
background-color: red;
text-align: center;
}
.footer {
background-color: darkgray;
margin-top: auto;
height: 100px;
page-break-after:right;
}
.brasao {
height: 60px;
width: 60px;
}
#template {
display: none;
}
Applied on this HTML + JS: https://jsitor.com/FWvNJa7XN
As you can see, using margin-top:auto on div footer, at least on web browsers, I was able to stick the footers on the bottom of each page.
But when I've tried to write using mpdf :
<?php
use Mpdf\Mpdf;
use Mpdf\Output\Destination;
include 'vendor' . DIRECTORY_SEPARATOR . 'autoload.php';
$mpdf = new Mpdf();
//via JS as I able to send each page outerHTML separated on hidden values
$pages = $_REQUEST['pages'];
$mpdf = new \Mpdf\Mpdf([
'mode' => 'utf-8',
'format' => 'A4',
'margin_left' => 0,
'margin_right' => 0,
'margin_top' => 0,
'margin_bottom' => 0,
'margin_header' => 0,
'margin_footer' => 0,
'dpi' => 72
]);
$stylesheet = file_get_contents('redator.css');
$mpdf->WriteHTML($stylesheet, \Mpdf\HTMLParserMode::HEADER_CSS);
foreach ($pages as $page) {
$mpdf->WriteHTML($page);
}
$mpdf->Output();
On firefox the rendered was this (including the editor div):
https://i.imgur.com/UJldBr9.png
But, using mpdf, the result was not the expected:
https://www.docdroid.net/vP4QALq/mpdf.pdf
So, How can try to render 1:1 on mpdf?
solution 1:
you could add
.content{
...
flex:auto;
...
}
and set height of header and footer as needed.
Solution 2: let the height of header and footer are 100px each and height
.footer {
...
position:absolute;
bottom:0;
height:100px;
...
}
.header{
height:100px;
}
.content{
height:calc(100% - 200px);
}
.page{
position:relative;
}
solution 3 simply give fixed height in header, footer and content classes as required
I don't know this pdf library, but can you try:
.footer {
background-color: darkgray;
/* absolute position */
position: absolute;
/* stick to bottom */
bottom: 0;
/* give it full width */
width: 100%;
height: 100px;
page-break-after:right;
}
.page {
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
/*padding: 10em 2em;*/
width: 595px;
height: 841px;
display: flex;
flex-direction: column;
/* make the header relative to your page element */
position: relative;
}
you can set the value absolute like this:
#editor {
background-color: gray;
border: 1px black;
padding: 1em 2em;
}
.page {
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
/*padding: 10em 2em;*/
width: 595px;
height: 841px;
display: flex;
flex-direction: column;
}
.content {
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
padding-left: 2cm;
padding-bottom: 2cm;
padding-top: 2cm;
outline-color: white;
}
.header {
background-color: red;
text-align: center;
}
.footer {
background-color: darkgray;
position:absolute;
width:595px;
top:817px;
height: 100px;
page-break-after:right;
}
.brasao {
height: 60px;
width: 60px;
}
#template {
display: none;
}
This renders ok in the browser.
You can also render them programmatically.
See this document: https://mpdf.:github.io/headers-footers/method-4.html
Interesting might be to try it using the #page attribute described in the docs:
https://mpdf.github.io/css-stylesheets/supported-css.html
#page
Sets the size of the ‘page-box’, which is usually used with a constant size sheet through the document, as in the CSS2 #paged media spec.
I suppose it would be something like:
#page {
//your CSS
}
1) To Fixed Footer at the bottom replace below css with your css
#editor {
background-color: gray;
border: 1px black;
padding: 1em 2em;
}
.page {
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
/*padding: 10em 2em;*/
width: 595px;
height: 841px;
display: flex;
flex-direction: column;
position:relative;
}
.content {
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
padding-left: 2cm;
padding-bottom: 2cm;
padding-top: 2cm;
outline-color: white;
}
.header {
background-color: red;
text-align: center;
}
.footer {
background-color: darkgray;
margin-top: auto;
height: 100px;
page-break-after:right;
width:inherit;
position:absolute;
bottom:0;
}
.brasao {
height: 60px;
width: 60px;
}
#template {
display: none;
}
2) To generate A4 pages tried below code its working for me
$mpdf = new \Mpdf\Mpdf([
'mode' => 'utf-8',
'format' => 'A4'
]);
In normal CSS you would set the footer's position: absolute; and place it at the bottom.
And to not hide things behind, add a margin-bottom with the same height as the footer to the page.
.page {
position: relative;
margin-bottom: 100px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
heigth: 100px;
}
I'm currently setting up a sidebar menu for my Wordpress website. I'm running into 2 issues. The 1st one is that the text in the menu isn't lining up to the left side properly. I have tried to use the text-align attribute but it doesn't work.
The 2nd problem is that there is a bit of random space at the bottom of the menu that I don't know why is there.
Problem is happening here: http://dreamedbig.com/our-services/
My HTML/PHP:
<div class="page-content">
<div id="services-menu" class="services-sidebar">
<?php dynamic_sidebar('services'); ?>
</div>
</div>
The CSS:
#services-menu {
border: 1px solid black;
align-items: left;
float:left;
height: auto;
display: inline-block;
top:0;
left:0;
background-color: #BCE6FB;
}
#services-menu li{
list-style-type:none;
border-bottom: 1px solid black;
}
#services-menu a {
text-decoration: none;
color: #08203D;
}
#services-menu ul {
}
#services-menu ul li a {
position: relative;
display: block;
box-sizing: border-box;
z-index: 1;
margin: 5px;
padding-left: 5px;
padding-right: 5px;
}
#services-menu ul li a::after
{
content: "";
position: absolute;
top:0;
left: 0;
background-color: #00A2DA;
width: 0%;
height: 100%;
transition: all 1s;
z-index: -1;
}
#services-menu ul li a:hover::after
{
width: 100%;
}
#services-menu ul li:nth-child(odd) a::after
{
background-color: #00A2DA;
}
#services-menu ul li:nth-child(even) a::after
{
background-color: #FFFFFF;
}
It looks like you have some inherited styles from classes called .widget and there is margin and padding added to ul. This is common is your using something like WordPress or underscores that come with some stylesheets.
I think these styles will correct it
.widget, #services-menu ul{
margin:0;
padding:0;
}
I found the unwanted margin and padding by using inspect in my chrome browser. I highly recommend it for frontend styling because it makes troubleshooting these kinds of issue easier to resolve.
Here is an article to better explain how it works
I have a problem with mapping together table and form. In my table I have some values that with help of a form I want to redirect to a page.I have read that I cannot put a form into a table so I tried not to. But if I let
<form>
<table>
structure, my display on page isn't very nice and I am not responsabile with frontend part but anyway I want to not be problems with it.If I let the table, without the form the display is ok(like in image). An image in left page and the table with the information in the right part. When using form, the table goes down and it's not good. So how to do? I try to include an image here to see how my page looks like without the form, but I really need to use the form. Any suggestion how to resolve this?I mean it's possible to have the display like in the photo but plus using a form and to not change the display?
EDIT: the css where tables are displayed
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
}
table th {
padding-right: 40px;
}
html {overflow-y: scroll; overflow-x: hidden;}
body {font-family: 'Open Sans', sans-serif; background:#f0eeed; color: #676767;}
.wrapper {width: 980px; margin: 0 auto;}
#content {padding: 20px 0 80px;}
.header:after {content:"";height:0;display:block;visibility:hidden;clear:both;}
.header {background: #ef8887; border-bottom: 3px solid #db7a78;}
.header .branding-title {float: left; margin: 0 0 0 5px; font: 0/0 serif; text-shadow: none; color: transparent; width:225px; height:125px;background:url(../img/branding-title.png) 0 6px no-repeat;padding: 6px 0;}
.header .branding-title a {display: block; height: 125px; width: 225px;}
.header .nav {float: right; top: 10; right: 0; margin: 0; position: relative; left: 15px; z-index: 99999999;}
.header .nav li {display: inline-block; margin: 0; list-style: none;}
.header .nav li a {
color: white;
text-decoration: none;
display: block;
line-height: 95px;
padding: 10px 0 0;
margin: 0 0 0 50px;
width: 100px;
text-align: left;
background: url('../img/nav-sprite.png') no-repeat 0px 105px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1px;
}
.header .nav li.on a {text-decoration:underline;}
.header .nav li a:hover, .header .nav li a:active {opacity: 0.7;}
.header .nav li.books a {background-position: 8px -5px;}
.header .nav li.movies a {background-position: 13px -105px;}
.header .nav li.music a {background-position: 15px -235px;}
.header .nav li.suggest a {background-position: 35px -340px;}
#content {min-height: 400px; background: white;}
.section.page:after {content:"";display:block;visibility:hidden;height:0;clear:both;}
.section.page {padding: 34px 0; background: white;}
.section.page h1 {
font-size: 24px;
text-align: center;
line-height: 1.6;
font-weight: normal;
}
.section.page .media-details h1 {
text-align: left;
}
.section.page p {width: 475px; margin-left: auto; margin-right: auto; }
.section.page .media-details h1 .price {color: #9d9f4e; padding-right: 10px; font-size: 34px;}
.section.catalog {padding-bottom: 42px;}
.section.catalog h2 {
font-size: 24px;
text-align: center;
line-height: 1.6;
font-weight: normal;
padding-top: 20px;
}
.section.catalog ul.items {margin: 0 0 -17px 0; padding: 0; width: 997px;}
.section.catalog ul.items li {
display: inline-block;
list-style: none;
width: 204px;
text-align: center;
padding: 14px;
margin: 0 0 17px 17px;
position: relative;
left: -17px;
}
.section.catalog ul.items li a:hover:after {
content: '+';
font-size: 50px; position: absolute; top:35px; right:30px; color: #3888c2; vertical-align: top;
}
.section.catalog ul.items li a {
background: white;
display: block;
padding: 30px 0 10px;
text-decoration: none;
}
.details-button {
color: #888;
}
.section.catalog ul.items li a:hover {
opacity: 1;
color: #666;
}
.section.catalog ul.items li img {
width: 190px;
border: 6px solid #f0eeed;
}
.section.catalog ul.items li p {
margin-left: 0;
margin-right: 0;
width: auto;
}
.media-picture {
float: left;
width: 400px;
text-align: center;
border: 1px solid #d9d9d9;
padding: 14px;
background: #f0eeed;
}
.media-picture span {
background: white;
display: block;
width: 100%;
padding: 36px 0 61px;
}
.media-picture img {width: 292px;}
.media-details {
width: 460px;
float: right;
}
.media-details form {
margin-left: 0;
}
td, th {
padding: 5px 5px;
}
form {width: 475px; margin: 34px auto;}
form tr, tr {text-align:left;vertical-align: top; padding:2px;}
form table {width: 475px; margin-bottom: 16px;}
form th {
width: 150px;
vertical-align: middle;
padding: 8px;
}
form td {
padding: 15px 15px;
}
form td select,
form td input,
form td textarea {
width: 100%;
border-radius: 4px;
padding: 10px;
border: 1px solid #a5a5a5;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
form input[type="submit"] {
width: 475px;
text-align: center;
border: 0;
background: #3888c2;
color: #FFF;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 16px;
padding: 14px 0 16px;
font-family: 'Open Sans', sans-serif;
}
form input[type="submit"]:hover {
background: #358dce;
cursor: pointer;
}
.search {
background: #f0eeed;
border-bottom: 3px solid #dddddd;
width:100%;
text-align:right;
}
.search form {
margin: 5px 5px 5px auto;
}
.search form input[type="submit"] {
width: auto;
text-align: center;
border: 0;
background: #3888c2;
color: #FFF;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 16px;
padding: 6px;
font-family: 'Open Sans', sans-serif;
}
.page p.message {
background: #ffeca4;
border: 1px solid #f16702;
padding: 1em;
width: 444px;
}
.breadcrumbs {
font-size: 14px;
font-weight: normal;
padding: 14px 0 48px;
}
.breadcrumbs a {
text-decoration: none;
color: #3888c2;
}
.note-designer {
font-size: 14px;
font-style: italic;
font-weight: bold;
}
.footer {
background: #f0eeed;
border-top: 3px solid #dddddd;
padding: 42px 0;
font-size: 12px;
color: #a5a5a5;
}
.footer ul {margin: 0; padding: 0; float: left;}
.footer ul li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.footer ul li:after {content:" | "}
.footer ul li:last-child:after {content:"";}
.footer p {margin: 0; padding-right: 3px;}
.footer a {text-decoration: none; color: #539def; margin: 0 10px;}
.footer li:first-child a {margin-left: 4px;}
.footer a:hover, .footer a:active {text-decoration: underline;}
sorry for the long code but this is what I found in style css
As mentioned previously, avoid using tables for anything but actual tabular data. Using it to position elements on the page is unpredictable at best.
You said that you aren't responsible for the front end, but do you have access to the HTML? I'm sure many of us could give you some helpful suggestions but we need a reference point beyond a screenshot :).
You might want to check out how some CSS frameworks handle this, it might give you some inspiration (http://getbootstrap.com/css/#forms). I'm not a big Bootstrap guy but there are a lot of basic examples here on form / table formatting.
You should be able to put just about anything inside a form tag without affecting the way anything on the page looks. Assuming you can't just stop using tables asap, you may have to play around with the css to clean this up. If the form tag is affecting the way anything embedded inside it looks then you might have something in your CSS styling the form element. If possible I would eliminate this styling if it exists.
o css no caminho /www/moodle/theme/mytheme/style : custom.css
/* Custom CSS
-------------------------*/
body {
background: url([[pix:theme|bg]]) repeat scroll 0 0 rgba(0, 0, 0, 0);
padding-top: 60px;
color: #58585A;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
margin: 0;
}
#page {
padding-top: 47px;
}
a.logo {
background: url([[setting:logo]]) no-repeat 0 0;
display: block;
float: left;
height: 75px;
margin: 0;
padding: 0;
width: 100%;
}
.dir-rtl a.logo {
background: url([[setting:logo]]) no-repeat 100% 0;
display: block;
float: right;
}
.navbar-inner{
background: #F5F5F5;
}
.navbar .navbar-inner a.brand span {
display: none;
}
.navbar .navbar-inner a.brand {
background-image: url([[pix:theme|logo]]);
background-position: center center;
background-repeat: no-repeat;
min-height: 74px;
padding: 5px 20px;
width: 214px;
}
.navbar .nav {
margin-top: 17px;
}
.navbar-text, .navbar .nav > li > a{color:#E8770D;}
.breadcrumb {
border-radius: 4px;
list-style: none outside none;
margin: 0 0 20px;
padding: 8px 15px;
background-color: #FFFFFF;
border: 1px solid #E0E0E0;
}
.coursebox {
border: 1px dotted #DDDDDD;
border-radius: 4px;
margin-bottom: 15px;
padding: 5px;
background:#f5f5f5;
}
/* Custom CSS Settings
-------------------------*/
[[setting:customcss]]
Moodle puts all the css into one file for speed. To turn this off, add this line to config.php - on a development site not a production site...
$CFG->themedesignermode = true;
Then in Chrome, refresh the page, right click on the block and inspect element. It should now show the original css file.
After you have finished, remove the themedesignermode line or set it to false because it will make the site verrrry slow... http://docs.moodle.org/dev/Creating_a_theme#Theme_designer_mode
You might also need to purge the cache after making any changes - http://docs.moodle.org/26/en/Purge_all_cache