I have added a jumbotron to my webpage, my page is now displaying the bottom and right scroll bar! Not sure how to resolve this.
Any tip's or pointers much appreciated.
url http://tyrescanner.net/contact-us
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1><span style="color: #ffffff;">Welcome to Tyrescanner</span></h1>
<p></p>
<h2>Contact us.</h2>
</div>
</div>
</div>
</div>
what are you asking for? I assume you just don't want bottom scrollbar ,is that right?
If so, below is your CSS for HTML . change that as below it's in your bootstrap.css file and line number 1071
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: auto;
overflow-x: hidden;
}
Your jumbotron is wrapped with divs row and col-md-12:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
Delete them and leave only jumbotron.
or remove paddings from your css:
.container-fluid {
width: 100%;
padding-top: 0px;
/* padding-left: 0px; */
/* padding-right: 0px; */
padding-bottom: 0px;
}
It overwrites bootstrap css and cause problem with page width.
After viewing your site I see some issues:
You're using a container-fluid and a nested container-fluid as the jumbotron parent element, the nested one is redundant.
Then I see you've overridden container-fluid and .col--12 classes default bootstrap left/right padding to 0px but you didn't change the default margin of the .row class to have 0px left/right margin hence your bottom scroll bar.
For the footer, remove the margin-top and make the footer a direct child of the body element then add the following css to the form, body and html elements: height:100%;, the rest is margins that you added to the elements.
Related
I have a bootstrap tooltip which I have custom styled. There seems to be an issue with it. Whenever we hover over it, it opens and then immediately closes.
HTML -
<div class="container" style="padding-top:300px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
Here's an inline link to jsFiddle
UPDATED
I made a few changes. Try this: https://jsfiddle.net/2h7jbt9n/6/
HTML
<div class="container" style="padding-top:30px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
JS
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
container: '.info-circle'
});
});
The issue was with padding for the info-circle. I wrapped it in a container. It doesn't flicker now.
Hope it helps.
You are no longer using the tooltip-arrow as the visual arrow you are using the :before and :after after as the visual arrow. The problem is that you have made the arrow bigger and made your own triangles. When you make your css arrow you are using borders. You have set your top border colors to white and blue to make it seem like the arrow has a border as well. In doing this you have forgotten that your arrow still has a bottom transparent border and this transparent border is covering up the element that you are hovering over to deploy the tooltip. So set your :before and :after psuedo elements for your .tooltip-arrow to have a bottom border of none. Like so:
.tooltip.top .tooltip-arrow:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -17px;
top: -5px;
border-width: 12px;
border-top-color: #003f6e;
border-bottom:none;
}
.tooltip.top .tooltip-arrow:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -15px;
top: -5px;
border-width: 10px 10px 0;
border-top-color: #fff;
border-bottom:none;
z-index: 1;
}
I tried to place an h1 element above a div element using the css property z-index, but it's not working!
Here's my html:
<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>
The #headerblock has a black surface including some transparency.
I want the h1 to be appearing above the #headerblock. As I mentioned the z-index property isn't working. Does someone have a solution for this? Or at least a reason why it's not working?
Thanks.
Gotta have a position on the h1.
h1 {
position:relative;
z-index: 500;
}
#header{
background-image: url(img/head.jpg);
background-size: 100%;
height: 520px;
width: 100%;
top:49px;
position: absolute;
margin:0 auto;
text-align:center;
}
#headerblock{
background-color:#444444;
opacity:0.7;
filter:alpha(opacity=70);
width:100%;
position:absolute;
height:200px;
}
<div id="header">
<div id="headerblock"></div>
<h1 style="color:white">This is my header text</h1>
</div>
I want to create a header similar to facebook where position:fixed. and when you zoom-out the whole page centers itself and when I zoom-in the header also streches..
When I use position:fixed and zoom-in some contents disappear due to lack of space on the window..
<div id="header_line" ></div>
<div id="header">
<div id="heading_name" >Home </div>
<div id="heading_name" style="left:28%;">Advertisement Board</div>
<div id="heading_name" style="left:46%;">Advertise</div>
<div id="heading_name" style="left:60%;">Sign In</div>
<div id="heading_name" style="left:76%;">About Us</div>
</div>
<style>
#header_line{
position:fixed;
top:0%;
left:0%;
width:1370px;
height:7px;
z-index:20;
background-color:#F60;
}
#header{
position:fixed;
left: 0px;
z-index:20;
top: 7px;
width:1370px;
height: 30px;
background-color:#003;
border-bottom:thick;
border-bottom-color:#000;
box-shadow:2px 5px 5px 1px #033;
}
</style>
I'm experimenting with Dojo, so far it's very cool except for the fact that I can't seem to be able set the width of a TabContainer. I have the following code
<div id="tabs" dojoType="dijit.layout.TabContainer" doLayout="false">
<div id="javaTab" class="myTab" dojoType="dijit.layout.ContentPane" title="Java">
<h1>Hello I'm the Java Tab</h1>
</div>
<div id="rubyTab" class="myTab" dojoType="dijit.layout.ContentPane" title="Ruby">
<h1>Hello I'm the Ruby Tab</h1>
</div>
</div>
This are the CSS:
#tabs {
width: 100%;
height: 100%;
}
.myTab {
height: 600px;
width: 100%;
padding: 0 !important;
}
If I put a menu bar inside the the tabs then I find that their width is larger than my screen so I don't see the complete bar.
So is there a way to set the width of the generated "tab bar"?
Thanks guys!
Yup Peller is right, you can't set the size on each contentPane, but what you can do is to modify the width of the whole thing (tabContainer)
Hey guys, my first question here on stack overflow. Trying to get something pretty simple to work, I'm sure I'm missing something quite obvious. Still getting used to the "standard" css, too many years working with non-functional ones! Heh.
So, sample of what I'm doing:
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
<div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
In essence: The first div is a container, that I would like to automatically overflow as content is added. Inside of that container, I have a popup menu, which I have simplified here. The popup menu appears (as it should) directly under "hello".
My problem, however, is that instead of the popup menu "coming out" of the parent, as would be expected by the absolute position, it is actually causing a scrollbar to appear on the parent.
I know that if I take otu the "position: relative" it works, but then it no longer appars where I want it (directly under the previous element).
What am I missing here?
EDIT: Sample here: http://marcos.metx.net/OverflowTest.htm
first of all - Inline styling is a big no no.
It is best to include a style sheet and apply it to individual div's via the "id" or "class" attributes.
Please read up on standards compliant css at w3schools
The problem is your overflow property.
auto - "If overflow is clipped, a scroll-bar should be added to see the rest of the content"
What you are looking for is "overflow: visible;"
Using position: absolute instead of relative on that middle div will solve your problem. This gives you (with an added border color on the inner-most div):
alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png
And here is the updated source code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: absolute; z-index: 99999">
<div style="z-index: 99999; overflow-y: hidden; position: absolute;
overflow: hidden; height: 200px; left: 0; auto: 0;
border: 1px solid red">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For more on this, see Absolutely positioned box inside a box with overflow: auto or hidden.