I'm not very good with HTML or anything like that so please bear with me! So I'm editing a tumblr theme (that someone else made, not me) and I moved the sidebars from the right to the left, which messed everything on the theme up. I've almost got it looking how I wanted layout wise, but the container won't stretch to match the posts or the page etc. You can see what I mean here (sorry can't post images):
vbthemes.tumblr.com/page
Even on the main page it isn't quite long enough to go down past the pagination.
Ideally I want the container to stretch down to the bottom of the posts/post on the page.
This is the code for the container:
// CONTAINER //
.containerbg{
padding:20px;
margin-left:-40px;
margin-top:29px;
background:{color:containerbg};
padding-top:10px;
width: 880px;
height: 100%;
z-index:-1000;
}
Can anyone give me any tips?
I can provide more of the code if you need, as I said I'm a huge noob.
(the theme was made by themesofcaroline.tumblr.com and i take no credit for it)
I'm having trouble testing this, but this should work.
Add the following css to your theme:
/* -------------------------------
CLEARFIX FLOATING FIXES
---------------------------------- */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clear { overflow:hidden; clear:both; height:1px; margin:-1px 0px 0px 0px; font-size:1px; }
.clear-simple {clear:both; }
Then add clearfix class to your container. So:
<div class="containerbg clearfix">
Untested but try it.
Related
I've seen some attempts at solutions to this problem, but I can't get them to work.
I'm using cycle2 like this:
<div id="slideShow" class="cycle-slideshow" data-cycle-slides="> div.slides" data-cycle-prev="#slideShowPrev" data-cycle-next="#slideShowNext">
It works well, but on loading it shows all the slides below each other.
I've tried the solution suggested on cycle2 website:
#slideshow img, #slideshow div { display: none }
#slideshow img.first { display: block }
But, sadly, this doesn't seem to work.
Does anyone have a simple solution for this?
I think this is what you need:
.slides {display: none;}
.slides.cycle-slide {display: block;}
This hides your slides until the plugin is loaded and starts doing the magic.
In your CSS, you're adding a display block to an image child of a hidden div; if you want to show the 1st slide too, until plugin's sentinel kicks in, you can do this:
.slides {display: none;}
.slides:first-child, .slides.cycle-slide {display: block;}
I have added a sticky footer to a SharePoint master page using the flexbox method, and it is working fine in all browsers on Windows, but does not work correctly for Safari or Chrome on OSX.
The HTML is roughly as follows:
<body>
<form>
<!--
a whole bunch of SharePoint stuff here that I can't mess with
-->
<div id="s4-workspace">
<div id="s4-bodyContainer"></div>
<div id="footer"></div>
</div>
</form>
</body>
And my initial CSS is this:
#s4-workspace {
display: flex;
flex-direction: column;
}
#footer {
clear: both;
height: 100px;
min-height: 100px;
width:100%;
background-color: #2e2e2e;
font-size: 11px;
margin-top: auto;
}
Now after searching around a bit I found this question, and based on that I started playing around with all kinds of vendor prefixes, and I even realized that the way I was using the flexbox was maybe a little unorthodox. Instead of having the main content div #s4-bodyContainer grow to use extra space, I was getting the footer div to expand it's top margin up to fill any extra space, which I guess flexes the #s4-workspace to fill the viewport if necessary.
So then I tried adding
#s4-bodyContainer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
But that didn't help either (and actually started causing problems in IE on Windows, which had worked fine before).
The behavior that I'm trying to fix in Safari and Chrome on OSX is this:
When the page renders, it seems as though the footer calculates it's top margin based on the viewport. It is always initially sitting at the bottom of the window, as if it was the case that there was little content and it should push down to the bottom of the window. But this happens even if there is a lot of content flowing underneath it, and it really should have pushed down to below #s4-bodyContainer (out of the viewport). If I scroll the page, it just sits on the page exactly where it was initially drawn and remains covering whatever content was under it on the initial rendering.
What can I do about this? What secrets are out the for getting flexboxes working correctly on OSX?
Found the answer here.
Apparently (should I say unsurprisingly?) there are some bugs in the way certain browsers handle flexboxes.
I was able to get the behavior I wanted reliably across IE, Firefox and Chrome on Windows and Safari, Firefox and Chrome on OSX with the following:
#s4-workspace {
display: flex;
flex-direction: column;
}
#s4-bodyContainer {
flex: 1 0 auto;
}
#footer {
clear: both;
height: 100px;
min-height: 100px;
width:100%;
background-color: #2e2e2e;
font-size: 11px;
margin-top: auto;
flex-shrink: 0;
}
I am practicing using various image replacement methods and recently came across a couple articles discussing a new, supposedly more efficient method by Scott Kellum.
Original website article regarding this new method
It seems good and I would like to practice using it, but am not to sure what the html and css for it should be. So in the example below, I have an h1, with the example logo text inside. Then I added a class of .hide-text to my h1 and styled it with CSS. I used a photoshop logo image I made and set that as the background image....the image has a width of 203px and a height of 57px.
Question 1:
When I tested my code in the browser, everything seems to be working fine, however is my usage of Mr.Kellum's image replacement technique correct?
Question 2:
Should I target the h1 in the css and declare the width and height or is it okay to include the width and height directly in the hide-text class like in my example below?
<style>
.hide-text {
background: url(images/mylogo.jpg) 0 0 no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 203;
height: 57px;
}
<body>
<h1 class="hide-text">MyLogo text</h1>
</body>
Any help is greatly appreciated. Thank you community!
I have found the css image replacement museum while searching for the actual trends on image replacement. I met the Scott Kellum method's there. After that I found this question - so I'm not an expert using this technique - and i want to share my opinion about.
Implementation copy-pasted from the link above
Simple, as also posted on the question.
<h3 class="skm">CSS-Tricks</h3>
CSS
h3.skm {
width: 300px;
height: 75px;
background: url(test.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Implementation as I would do it
I've read the original article and i think it's better to split the css code for reusability. Maybe we'll replace with images more than a single element.
<h1 class="ir">An awesome pretty title</h1>
<h2>Some words here not replaced with images<h2>
<nav>
<!-- some links replaced with images that also use css sprites -->
<a class="ir" href="#">home</a>
<a class="ir" href="#">sweet</a>
<a class="ir" href="#">home</a>
</nav>
Reusing the ir class for the image replacement technique, as suggested on the post you linked on the question, keeps things tidy.
.ir {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
h1 {
background-image: url('/the-title-replacement.png'');
width: /*the-image-width*/px;
height: /*the-image-height*/px;
}
nav a {
background-image: url('/the-menu-icons-sprite.png');
width: 24px;
height: 24px;
}
nav a { background-position: 0 0; }
nav a + a { background-position: 0 24px; }
nav a + a + a { background-position: 0 48px; }
Conclusions
The image url & the size must be set for each replaced element. If we are using sprites the background position also comes in play for each element, though the element size is often shared between all the elements.
All of this use cases can benefit from splitting the css code, keeping the stylesheet tidier.
NOTE: I've made these thoughts for a pure css implementation. Using a css preprocessor - such as less for example - changes the rules.
NOTE 2: Another trending method is the proposed by the H5BP team. I am undecided about which to use.
I've tried and tried so hard to overcome this problem the past few days as I just want to get this site launched above all now. I have been developing this for the last week or so and I have been using my specific preferred browser, Google Chrome. Yes, big mistake!
Anyway, here is the demo site which shows what I want near everything to look like (apologies for some things that are out of place, haven't quite finished yet!): http://www.weburton.co.uk/content/demo/
You see the social area? It displays properly in Chrome; exactly as I want it. In IE it displays the div areas, but there are some styling issues such as the text on the Twitter side.
However, the div areas are completely ignored in other browsers it seems; its a strange problem, I'll admit that. I have them encased in a div which has a background image (selenasocial) and then have the other divs floating. Here is the code (CSS):
#selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
display: inherit;
width: 100%;
min-height: 263px;
z-index: 555;
border: none;
overflow:auto;}
.selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
display: inherit;
width: 100%;
min-height: 263px;
z-index: 255;
border: none;
overflow:auto;}
.selenasocial img {
border: none;}
.twitsocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}
.facesocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}
And here is the HTML, I am using Widgets (and yes, they have been styled correctly in functions.php):
<!-- Selena Gomez Social Networks -->
<div class="selenasocial">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar") ) : ?> <?php endif;?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar 2") ) : ?> <?php endif;?>
</div>
I overcame the error in IE (as it was happening there, too) by copying the CSS above into a separate IE.css file. I just don't understand why two browsers which are leaps and bounds ahead of IE aren't reading from the main CSS file.
Any help would be HUGELY appreciated - I've been tearing my hair out about this for the past few days.
Thanks in advance!
There's (technically) nothing wrong with your code - the part you posted. You are setting both float properties to left, which I guess is not what you want, but that did not explain why the other properties were getting ignored.
I won't read your 4700-lines CSS file to find what is wrong with it but I will try to help you do it yourself.
The first thing I did was to try to hunt the CSS code you posted with firebug and, to my surprise, it was not there. The very last line of CSS firefug gave me was the 902th which was this:
.clearfix {
zoom: 1;
}
Actually, firebug did not show that zoom thing (the brackets were empty). So I went to the CSS file directly to find it out and, after wondering why would anyone use such non-standardized property, I checked the next lines to find there was a parentheses instead of a bracket in the 907th line.
After finding such error I proceeded to run a CSS validator on your CSS file and results were not very good. Fix those errors and Firefox will draw that properly.
Deciding whether IE and Chrome's capability of interpreting wrong CSS files is actually good or bad is not to be discussed here but learning how to find and correct your mistakes can help you get things to work with stricter browsers.
I use Twitter Bootstrap in one of my projects, but I have the problem that my content goes out of the browser view. Normally you see the scrollbar on the right side of the screen, but not in my case. I searched in bootstrap css file after overflow: hidden; or something like that and deleted it, but that didn't solve the problem.
Does someone know how to enable scrollbar in bootstrap css? (without bootstrap css the bars are showed)
edit:
I have find out that the problem the navbar-fixed in the black navbar which you can add. Without postition: fixed it works fine.
Make sure all the <div> from the navbar are closed. If not, the fixed property is inherited by the descending tags and the scroll bars disappears.
I found removing the "position: fixed" for the navbar resolved this problem for me:
.navbar-fixed-top, .navbar-fixed-bottom {
/*position: fixed;*/
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
This guy also has some more useful info: http://davidlains.com/strange-twitter-bootstrap-scrolling-issue
Override it with your last stylesheet.
( Probably your own theme stylesheet. )
html, body {
overflow: visible;
}
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
Hope this is what you are looking for
You are missing a closing </div> in your HTML code. For every <div class="foobar"> you must have a closing </div>. This (scrolling issue) can happen when using twitter bootstrap and not closing your divs.