This plain code(btw, I took it from another stackoverflow poste) works as the red div#wrapper reaches from top to bottom...
<html>
<head>
<style media="screen">
#wrapper {
height:100%;
width:300px;
background-color:red;
}
#first {
background-color:#F5DEB3;
height: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="first"></div>
</div>
</body>
</html>
but when I integrate this to a wordpress+bootstrap+timber theme it's not working... even with a html,body{height: 100% } written in style.css...
I'm not sure if this is bootstrap or wordpress related problem...
hmtl, body{
height: 100%!important;
}
#wrapper {
height:100%!important;
background-color:red;
}
.navbar-brand-image{
margin: 0 auto;
}
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
float: none;
text-align: center
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
width: 100%;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
.navbar{
margin-bottom: 0px
}
.navbar .navbar-nav a{
color: #fff;
font-weight: bold
}
.navbar .navbar-nav a:hover{
background-color: rgba(0, 0, 0, 0.2);
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
Without seeing the rest of the CSS in the page it's not possible to pinpoint the problem. You can however add an !important to the height element to ignore any CSS inheritance.
#wrapper {
height:100% !important;
width:300px;
background-color:red;
}
When you use these libraries there are big chances of them override in your code.
To check if this is the case place !important at the end of your css properties.
Example:
#wrapper {
height:100% !important;
width:300px !important;
background-color:red !important;
}
Related
I have a website made using Bootstrap v3.3.7.
As you can see from the image below, there is a small white line on the right hand side of the panel, at the bottom. It doesnt stretch the whole way up the right side of the panel, on where the table is, so I assume it is something to do with the table.
Example of the white line
Here is the HTML
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading panel-custom premium">Hosting service name here</div>
<div class="panel-body">
<p>A small description of the hosting company here, only plain text, make length of 255 characters.</p>
<img src="banner.png" class="img-responsive" style="display: block; margin: auto"/>
</div>
<table class="table">
<tr>
<th><i class="fa fa-internet-explorer" aria-hidden="true"></i> Website</th>
<th><i class="fa fa-money" aria-hidden="true"></i> Price of GB/month</th>
<th><i class="fa fa-signal" aria-hidden="true"></i> Uptime</th>
</tr>
<tr>
<td><a>www.website.com</a></td>
<td>£0.05</td>
<td>99%</td>
</tr>
</table>
</div>
</div>
Here is my custom CSS
html, body {
margin: 0;
padding: 0;
background: #1F2022 !important;
position: relative;
font-family: 'Montserrat', serif !important;
}
a {
color: #B24628 !important;
}
h1, h2 {
text-align: center;
padding-bottom: 20px;
color: white !important;
}
.navbar-custom {
background: #42424B !important;
border-color: #42424B !important;
}
.navbar-custom a {
color: white !important;
}
.active a {
background: #B24628 !important;
}
.custom-div {
background: #42424B !important;
}
.dropdown-menu {
background: #42424B !important;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
background: #B24628 !important;
}
.panel-custom {
background: #42424B !important;
border-color: #42424B !important;
color: white !important;
}
.panel{
border: none !important;
}
.panel-body, table, tr, td{
background: #969896 !important;
border: none !important;
}
td, th {
text-align: center !important;
}
table { table-layout: fixed !important; }
td { width: 33% !important; }
hr {
border-color: #42424B !important;
}
.img-pad {
padding-bottom: 8px !important;
margin: 0 auto;
}
.btn {
background: #B24628 !important;
border-color: #913218 !important;
color: white !important;
}
.footer {
background: #42424B !important;
color: white !important;
height: 60px;
position: absolute !important;
right: 0;
bottom: 0;
left: 0;
width: 100%;
}
.footer a {
color: #B24628 !important;
}
.footer p {
padding-top: 20px;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border: none !important;
}
.navbar-default .navbar-toggle {
border: none !important;
}
.navbar-default .navbar-toggle {
border-color: white;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background: #B24628 !important;
}
.navbar-form {
border: none !important;
}
.navbar-default :last-child {
border-bottom: 0!important;
}
* {
border-radius: 0 !important;
}
footer { background-color:#42424B; min-height:350px; font-family: 'Montserrat', sans-serif;}
.footerleft { margin-top:50px; padding:0 36px; }
.logofooter { margin-bottom:10px; font-size:25px; color:#fff; font-weight:700;}
.footerleft p { color:#fff; font-size:12px !important; font-family: 'Montserrat', sans-serif; margin-bottom:15px;}
.footerleft p i { width:20px; color:#999;}
.paddingtop-bottom { margin-top:50px;}
.footer-ul { list-style-type:none; padding-left:0px; margin-left:2px;}
.footer-ul li { line-height:29px; font-size:12px;}
.footer-ul li a { color:#a0a3a4; transition: color 0.2s linear 0s, background 0.2s linear 0s; }
.footer-ul i { margin-right:10px;}
.footer-ul li a:hover {transition: color 0.2s linear 0s, background 0.2s linear 0s; color:#ff670f; }
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.icon-ul { list-style-type:none !important; margin:0px; padding:0px;}
.icon-ul li { line-height:75px; width:100%; float:left;}
.icon { float:left; margin-right:5px;}
.copyright { min-height:40px; background-color:#42424B;}
.copyright p { text-align:left; color:#FFF; padding:10px 0; margin-bottom:0px;}
.heading7 { font-size:21px; font-weight:700; color:#d9d6d6; margin-bottom:22px;}
.post p { font-size:12px; color:#FFF; line-height:20px;}
.post p span { display:block; color:#8f8f8f;}
.bottom_ul { list-style-type:none; float:right; margin-bottom:0px;}
.bottom_ul li { float:left; line-height:40px;}
.bottom_ul li:after { content:"/"; color:#b24628; margin-right:8px; margin-left:8px;}
.bottom_ul li a { color:#FFF; font-size:12px;}
/**
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
.navbar-fixed-top {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
*//
.dark-text {
color: #333333 !important;
}
.premium {
background: #B27328 !important;
border: #B27328 !important;
}
.float-right {
}
#media only screen and (min-width : 992px) {
.float-right {
float: right !important;
}
}
#media only screen and (min-width : 1200px) {
.float-right {
float: right !important;
}
}
.bottom_ul a {
color: white !important;
}
This problem only occurs occasionally where if I change the width of the web browser, the line goes, but if I make it bigger is comes back.
Eg. at a width of 1032px, the line is visible, but at 1034px it disappears
As you can see, I have tried setting all the borders to none etc. Would the solution be fixed if I downloaded Bootstrap v4 or is it something in my code .Any help would be greatly appreciated.
I changed bootstrap's navbar collapse at 992px breakpoint but it still show me dropdown menu
http://imgur.com/WR4LS2o,qHvd6RH#0
using this standard css code
#media (max-width: 991px) {
header nav.navbar-main.clearfix {
background-color: transparent;
}
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
background-color: white;
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
How can i do?
(I'm sorry for the external link but i dont have enought reputation to link an image)
The first method is to generate a custom bootstrap in overiding the
breakpoints.
( I think it's the best way because it does the whole job alone )
The second method is too add this css lines to your given code :
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu>li>a {
line-height: 20px;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
You can find a fiddle with a default navbar here
Solved in this way
#media (max-width: 991px) {
.navbar-main .navbar-nav li ul {
display: block;
position: inherit;
left: auto;
top: auto;
width: 100%;
background: transparent;
padding: 0 0 0 10px;
z-index: 1;
box-shadow: none;
}
.navbar-collapse.collapse.in {
overflow-y: auto;
}
}
First of all, I've looked at all of the suggested links. I'm new to CSS and don't know how to incorporate it into this.
I want to have the h1 header that says "Basics" align with the tab that says "Site Basics." They already sort of do, but they are not directly aligned with each other.
Here is the HTML:
<!DOCTYPE html>
<html>
<header>
<title>Site Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</header>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Site Title</h3>
</div>
</div>
</div>
<div class="container">
<div class="support_container">
<div id="left_nav" class="h_navbar">
<h1 class="h1_title">Basics</h1>
</div>
<div id="right_nav" class="h_navbar">
<ul id="">
<li class="h_tab" id="tab_basics">Site Basics</li>
<li class="h_tab" id="tab_comparison">Comparision</li>
<li class="h_tab" id="tab_whats_new">What's New</li>
<li class="h_tab" id="tab_faq">FAQ</li>
<li class="h_tab" id="tab_issues">Known Issues</li>
<li class="h_tab" id="tab_bug">Report a Bug</li>
<li class="h_tab" id="tab_email">Email Us<li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Custom CSS:
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/** Container **/
.support_container
{
background-color:white;
padding:30px;
margin:0 auto;
border-radius:7px;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: rgba(255,255,255,.75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
.h_p {
color:black;
text-shadow:none;
}
#nav_href{
color:black;
text-shadow:none;
}
.h_tab {
display:block;
border-top: 1px solid #eee;
padding: 11px 25px 9px 0;
text-decoration:none;
}
.h1_title {
color:black;
text-shadow:none;
}
#right_nav {
margin: 30px -30px 30px 0;
width:190px;
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
Here you go: http://jsbin.com/vugekikana/3/edit
I just had to modify the body css not to be text-align:center and added this:
#left_nav{ display:inline-block; margin-top:10px; }
#right_nav{ display:inline-block; vertical-align:top; }
Assuming you want them aligned to the left then remove text-align:center; from your body and add padding:0; to the ul element of the nav in your stylesheet.
Alternatively if you want the nav in the center then add display: inline; to nav_href so use:
#nav_href {
display: inline;
}
I have some problem with first tab Please check this & solve my problem I given you also fiddle :Click here to see my Problem http://jsfiddle.net/anupkaranjkar/JKQZ6/
<style type="text/css" media="screen">
body { font: 0.8em Arial, sans-serif; }
.menu { padding: 0; clear: both; }
.menu li { display: inline; }
.menu li a { background: #ccf; padding: 10px; float:left;
border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000;
font-weight: bold;}
.menu li.active a { background: #eef; }
.content { float: left; clear: both; border: 1px solid #ccf; border-top: none;
border-left: none; background: #eef; padding: 10px 20px 20px; width: 400px; }
</style>
You have to remove clear:both; from your class called "menu". Here your updated fiddle
change your .menu li to display:block
.menu li { display: block; }
here it is in working order: http://jsfiddle.net/JKQZ6/2/
here it is, this is the css, and the media queries is down below, just search #media and it will find it.
Thanks so much for your help, idk why it is not working, the media query has no effect on the ipad emulator, in portrait mode, i changed the background just to see if it would work and it still did not, so not sure whats going on.
body {background-image:url('../images/space1.jpg');
background-repeat:no-repeat;
background-size:200%;
}
body {
color:white;
}
a, a:visited {
color:#3399FF; text-decoration:none;
}
div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:125%;
}
div.logo{
margin-top:-40px;
}
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
background-color: ;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color: :#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
li:hover ul {
display: block;
}
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.1 {
text-align: center;
}
.left {
float: left;
margin-left:20%;
padding:10px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:20%;
padding:10px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
div.header{
text-align:right;
font-size:120%;
}
div.header1 {
text-align:right;
font-size:85%;
}
div.logo{
margin-top:-40px;
}
div.logo {
img
height:150px;
width:320px;
}
#nav{
width:85%;
height:3%;
font-size: 30%;
font-weight: bold;
background-color: ;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color: :#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
li:hover ul {
display: block;
}
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.1 {
text-align: center;
}
.left {
float: left;
margin-left:0%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:0%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
}
So, the problem is primarily twofold:
1) You have several errors in your css. Using the validator, I found 13 errors.
- There's declarations that are unclosed (missing a closing curly-brace - }), such as your declaration for #nav a:hover
- There's extra / stray closing curly-braces in other locations.
- There's invalid background color and color properties
- You have div.1, which implies a class of "1". That's not a valid class according to the validator.
2) The media query contains far too many rules. You should only put rules in the media query that replace / override previous rules, or are new rules. You've got many rules that are simply repeats of your other common css rules.
Clean up the errors. Try running them through the W3C CSS validator - you can copy-and-paste your css directly, to see if / where there are errors.
Then, simplify your media query css to only include the necessary changed rules (and only the specific properties that need to be changed).
Note: I was able to get it to validate by cleaning up the errors. For your reference, the valid / clean CSS is below.
You still need to simplify, and the code below is not necessarily guaranteed to work. I'd encourage you to over-simplify - put one rule in your media query for a border, background color, or something, just to see if the media query is getting picked up. Then you can work on adding in the different styles you need.
body {background-image:url('../images/space1.jpg');
background-repeat:no-repeat;
background-size:200%;
}
body {
color:white;
}
a, a:visited {
color:#3399FF;
text-decoration:none;
}
div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:125%;
}
div.logo{
margin-top:-40px;
}
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:20%;
padding:10px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:20%;
padding:10px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
div.header{
text-align:right;
font-size:120%;
}
div.header1 {
text-align:right;
font-size:85%;
}
div.logo{
margin-top:-40px;
}
div.logo {
height:150px;
width:320px;
}
#nav{
width:85%;
height:3%;
font-size: 30%;
font-weight: bold;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:0%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:0%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
}