I'm using bootstrap 3 - for this topic especiall the sticky-footer makes problems on mobile phones and devices (e.g. Chrome # Samsung Galaxy 4, IPad).
I'm using a div container (wrap_con) to push the footer down to the end of the page. So my html code looks like this:
<body>
<div id="wrap_con">
page content
</div>
<div id="my_footer">
two container (<div class="container">) are implementing the footer here
</div>
I'm using bootstrap 3 with following own extensions:
#wrap_con {
background-color:white;
font-color:black;
color: #000000;
font-family: 'Droid Sans',sans-serif;
font-size: 14px;
border: 0px solid white;
height: auto;
margin: 0 auto -150px;
/* margin: 0 auto 0px; */
min-height: 100%;
padding: 0 0 150px;
/* padding: 0 0 0px; */
}
#my_footer {
height: 150px;
color: #ffffff;
font-size: 10px;
border: 0px solid white;
border-style: none;
}
#my_footer .container:first-of-type {
background: transparent url(footer_bg_white.gif) repeat;
width: 100%;
border: 0px solid white;
height: 80px;
padding-top: -30px;
}
#my_footer .container:last-of-type {
background: transparent url(footer_bg.gif) repeat;
width: 100%;
height: 80px;
border: 0px solid white;
}
So in praxis two container should always stick on bottom of the page and implement the footer. This works great in all desktop browsers but if it comes to view the site on a mobile browser the footer is not on the bottom of the page. There is a distance of about 75px between the footer and the bottom of the page.
add this to your footer, on a media-query for mobile.
position:fixed;
bottom:0;
left:0;
Did you try it? #joe
Related
I have been working on a project that involves custom scroll bar here is the code
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body id="main">
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
</body>
the problem is it is only working on chrome how can i make it work on every browser. i have searched all over the internet but still cannot fine any reliable solution.thanks in advance
Sorry friend firfox, Opera Mini & Edge not supported scrollbarstyle
YOU can check it here
check it
-WebKit- applies to Chrome and safari, not sure if other browsers support custom scroll bars but I think they don't
I can't understand why the text I'm trying to get in the bubble box won't be there.
Here is the link to a picture of what I see
I'm super newbie and this might be a very stupid question, but I spent like 40 minutes trying to figure out what's wrong.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bubble
{
position: absolute;
width: 230px;
height: 33px;
text-align: left;
font-size: 10px;
line-height: 100px;
background-color: #00ff00;
border-radius: 10px;
margin-top: 100px;
margin-left: 200px;
}
.bubble:after
{
content: '';
position: absolute;
width: 0;
height: 0;
left: 20px;
top: 33px;
border: 22px solid;
border-color: #00ff00 transparent transparent #00ff00;
}
</style>
</head>
<div class="bubble">im lemon im a little spaghetti</div>
</html>
Help
You should define line-height: 33px, because that is the height of your bubble
See fiddle
I suggest you add a bit of padding, so that the text won't be stuck at the left border of the bubble. Like that :
padding: 0 5px;
That will add 5px of padding to the left and to the right, that is a shorthand for :
padding: 0 5px 0 5px; which is itself a shorthand for
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
See updated fiddle
Looks like its overlapping. You should look at this example, there are variety of layouts and other css options to accomplish what you're trying to do covering multiple browsers.
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
Here is the CSS for the first bubble text:
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c; /* default background for browsers without gradient support */
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* Variant : for top positioned triangle
------------------------------------------ */
.triangle-isosceles.top {
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
background:-moz-linear-gradient(#f3961c, #f9d835);
background:-o-linear-gradient(#f3961c, #f9d835);
background:linear-gradient(#f3961c, #f9d835);
}
The complete CSS:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css
Basically you'd put the text inside the paragraph tag by calling the class:
<p class="triangle-isosceles">This only needs one HTML element.</p>
#ref: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
I'm try to display two rows of six columns and have them shrink when the browser window shrinks. The original css displays number of columns depending on the image size, each image floating left, so for different screen sizes I end up with large spaces.
.ngg-albumoverview {
overflow: hidden;
margin-top: 1px;
margin-left: 0px;
width: 100%;
clear:both;
display:block !important;
}
.ngg-album {
float:left;
height: 100%;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #fff;
}
/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
overflow:hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-album {
overflow: hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-albumtitle {
text-align: left;
font-weight: bold;
margin:0px;
padding:0px;
font-size: 1.4em;
margin-bottom: 0px;
}
.ngg-thumbnail {
float: left;
margin-bottom: 10px;
margin-right: 2px;
text-align: center;
font-weight:bold;
background-color:#0F0F0F;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px
}
.ngg-thumbnail img {
background-color:#A9A9A9;
border:0px solid #1D1D1D;
display:block;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:200px;
}
.more {
width: 100%;
background-color:#0F0F0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.ngg-thumbnail:hover {
background-color: #333333;
}
.ngg-thumbnail img:hover {
background-color: #FFFFFF;
}
.more:hover {
background-color: #333333;
}
.ngg-description {
text-align: center;
}
When I add this css to .ngg-albumoverview it displays six columns ok and shrinks them, but the second image is placed under the first, instead of alongside, with the third image alongside the first.
columns:100px 6;
-webkit-columns:100px 6; /* Safari and Chrome */
-moz-columns:100px 6; /* Firefox */
CSS columns are just segregations of the page and flow the same as the rest of the page. Your images are laid out like this:
[1][3][5]
[2][4][6]
because the flow of a page goes top to bottom and expands as necessary depending on element widths.
Your images will not be in the order you want unless you remove the columns and replace it with a responsive grid. If you want the images to appear like:
[1][2][3]
[4][5][6]
you need to adjust your .ngg-thumbnail widths to be a percentage (that incorporates the margin, border and padding spacing in between and adds up close to 100% between 3 of them), float them to the left and give your .ngg-thumbnail img a max-width: 100%; and height: auto;. Be sure to float the .ngg-thumbnail parent element and not the img or they will be removed from the document flow and not line up with the grid unless you perfectly size everything (and you don't want that).
Almost forgot - make sure you add a clear: left; on the 4th image if your widths don't add up to 100% so it starts on a new line by default. You can select the 4th image with:
.ngg-thumbnail img:nth-of-type(4);
Here is a good resource for you if you'd like an enjoyable way to learn more about this.
I am totally a beginner at CSS layouts, but I am trying to just start a basic one that is simply a 'fixed width' center column (just one div), so that the sides are flexible. I know this is not responsive/reactive, but I am just starting.
So I have tried googling tons of examples, but I can't find a starting point that works on both FF and IE9? I mean just getting started and they are different??
Here is latest example of simple style I tried:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #f5f5f5;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#content {
width: 900px;
color: #333;
border: 0px solid #f5f5f5;
background: white;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 600px;
}
so this is the very beginning but already FF shows this aligned to the center and IE doesn't. So already everything I try (i.e. left:50% and margin-right:-461px, as an example I found) affects these differently. I read all over the place this is a very common challege, but I fear there is some foundation logic here that I am unaware of?
any help with this is greatly appreciated!
EDIT: Thanks for the comment! I do have the following, which again works in IE (and in chrome) but not FF?
css:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #f5f5f5;
}
#wrapper {
margin: 0 auto;
width: 922px;
margin-left:auto;
margin-right:auto;
}
#content {
width: 900px;
color: #333;
border: 2px solid #f5f5f5;
background: white;
padding: 10px;
height: 600px;
position:absolute;
left:50%;
margin-left:-461px;
}
#welcomeBanner{
text-align:center;
font-family:"segoe ui light","segoe ui","segoe";
font-size:18pt;
padding-top:20px;
padding-bottom:20px;
margin-top:0px;
}
html: is literally only:
<div id="wrapper">
<div id="content">
<div id="welcomeBanner">Attempting to Learn This Stuff<div>
</div>
</div>
so in IE9 and Chrome I get the title in the center, big box center fixed with back ground color, etc. In FF nothing. I like there is not style applied to the page at all? I am using a link tag in the head, but it is obviously there and working for the others?
body {
width:100%
}
div {
width: 900px;
margin:0 auto;
}
should work
cf Centering a Div in IE9 Using margin:auto
Here is an example. http://jsfiddle.net/52c7t/
Simply: I'm trying to get the div on the right side, to have a border like the div on the left. (I'd want the border to be on the left side of the right div)
I tried a million different combinations and haven't been able to do it. I was trying to avoid making an image and do this with css.
Thanks for your help!
UPDATE:
Image of what I mean. Sorry about my graphic design skills :P
http://i.imgur.com/pGSnL.png
HTML
<div id = "top_bar">
<div id="top_left_button" >border</div>
<div class = "trapezoid"> none </div>
</div>
CSS
.trapezoid{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid blue;
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 50px;
display: inline-block;
right:1px;
}
#top_bar{
background-color: #000;
border-bottom: 1px solid #666;
color: #222;
position:fixed;
left:0px;
top: 0px;
width:100%;
overflow:hidden;
height: 50%;
font-weight: normal;
white-space: nowrap;
color: white;
z-index:20;
line-height: 45px;
min-width:320px;
max-width: 320px;
max-height:48px;
border-radius: 5px;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
}
#top_bar:after {
content: '';
width: 10%;
display: inline-block;
font-size: 0;
line-height: 0
}
#top_title, #top_left_button, #notifications, #top_right_button {
color: white;
height: 100%;
overflow:hidden;
display: inline-block;
text-align: center;
vertical-align: middle;
}
#top_left_button,#top_right_button{
width: 20%;
background: rgba( 100, 255, 255, .1 );
}
#top_left_button{
border-right: 2px solid #666;
}
EDIT: UPDATED LINK
The simple solution is to create another div since your blue div is already made up using the border property.
That new div is essentially a clone of the blue div, but will be colored red and made a little larger using the CSS width property. This becomes a pseudo border for the blue div.
Example of new div:
.trapezoid-border{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid red; /* Color Changed will be pseudo-border color */
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 53px; /* Extra 3 pix when compared to .trapezoid class width */
display: inline-block;
right:1px;
}
jsFiddle DEMO
Frankly, I think you should be using an image for this, but if you really want or have to avoid that, a somewhat dirty (though I think very convincing looking) fix would be to create a fixed sized red <div>, that you position and rotate (using the transform property) just right to achieve the appropriate effect.
.redborder {
background-color:red;
width:3px;
height:70px;
transform:rotate(37deg);
-ms-transform:rotate(37deg);
-moz-transform:rotate(37deg);
-webkit-transform:rotate(37deg);
-o-transform:rotate(37deg);
position:absolute;
right:70px;
top:-10px;
}
On jsfiddle: http://jsfiddle.net/QBTpV/18/
(tested in Chrome and IE)