I made a web page. When I zoom it, there is no scroll bar on the bottom of browser. I tried many times but I can't.
Please any body help me.
Here is my dropbox link
Hi now remove to your .fix in css overflow:hidden; and add this css in your stylesheet
as like this
Remove this css
.fix {
overflow: hidden;
}
Add this css
.fix{
*zoom: 1;
}
.fix:after, .fix:before {
content: "";
display: table;
line-height: 0;
}
.fix:after {
clear: both;
}
Your Css Path is
css/main.css ---> Line No is 111
Related
This is the website I am developing right now: in-nabavi.com. There is nothing in it but a few blocks. As you see there is an extra white space at the end of the document that I really have no idea why it is in there.
This is the firebug result
As you see the area with red line around it is not included in the HTML area.
I also tried the following
body, html{
margin:0;
height: 100%;
}
but it didn't work again.
Thanks.
You have used content: "." inside clearfix class for setting layout.
Use content: ""; only.
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
There is a .clearfix:aftercss class in which there is a content:"."
Remove that.
Or override it, so that it does not hamper anything else.
.clearfix:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
content: close-quote;
}
You can try this....
.panels-flexible-1 .panels-flexible-row-last{position: absolute;}
So I use Modernizr to detect javascript. Based on the .no-js class, I have the following:
html.no-js .navContainer {
visibility: visible !important;
}
.navContainer{
visibility: hidden;
}
If the user has javascript enabled, the element is hidden. If they do not have javascript enabled, the element is visible.
Works great. Now I want to do the reverse. That is, I want an element hidden if the user doesn't have javascript. What is the best way to do that?
I've tried a number of things, including numerous variations on this:
html.no-js .navButton {
display: none;
}
html .navButton {
display: block;
}
but so far, nothing has worked. It's my understanding that html.no-js .navButton should only be selecting on <html class="no-js">. Is that not the case?
Try putting it in page directly like below.
<noscript>
<style type="text/css">
#import url (nojs.css);
.navButton {
display: none;
}
</style>
</noscript>
To hide visually and from screen readers use
html.no-js .navbutton {
display: none
}
If you want to hide visually and from screen readers, but maintain layout:
html.no-js .navbutton {
visibility: hidden;
}
To hide only visually, but have it available for screen readers:
html.no-js .navbutton {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
To extends the previous style to allow the element to be focusable when navigated to via the keyboard:
html.no-js .navbutton.focusable:active,
html.no-js .navbutton.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
Sources
HTML5Boilerplate
Hiding content for accessibility
Is it possible to implement vertical layout with CSS only, and not with HTML elements?
I have a list of divs inside one div. By default the next element is right to the last, when there's no place on right, it is placed below.
I'd like to achieve the same with CSS style settings. Is it possible?
By CSS-only I mean, we have div and its children, and do not add anything special such as:
line-breaking elements ( <br/>, <div style="clear:both;"/> )
UL tags
tables (yes, still used, f.g. JSF almost exclusively based on them)
So:
<div id="menu">
Page 1
Page 2
Page 3
</div>
And CSS implementing vertical layout:
#menu { ??? }
#menu a { ??? }
Is there a ??? that I could use to achieve what I want?
Display anchor tags as block elements.
#menu a {
display: block;
}
Do you mean something like this?
http://jsfiddle.net/7Y9jS/
#menu {
width: 300px;
}
#menu a {
display: block;
background: #ccc;
color: #000;
padding: 10px 0;
text-align: center;
margin-bottom: 2px;
}
<div id="menu">
Page 1
Page 2
Page 3
</div>
set display block to a
#menu a {
display: block;
}
use float left
#menu a {
float:left;
}
and then add the class group to your #menu
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
my slider cuts off and I noticed wwhat causing it is boostrap, the framework i use for the grid system.
http://jsfiddle.net/5q39A/1/
Why acutally does it cuts off? I included all css meaning with boostrap too.
this is the boostrap website: http://twitter.github.com/bootstrap/
You can see the slider cuts off there:
http:// justxp.plutohost.net /survive/index.html
any help would be appreciated! thanks!
This is what is causing the issue:
li {
line-height: 18px;
margin: 5px;
}
on line 545 of bootstrap.css
Use this example to override:
Change this:
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
on line 327 of style.css
To this:
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
margin:0 !important;
}
Fiddle: http://jsfiddle.net/5q39A/4/
As a part of learning CSS (& practically applying it — by creating simple themes), today I wanted to know some proper ways of clearing floats in CSS.
I wanted to see how Twitter does it, so I downloaded Bootstrap, went through the bootstrap.css file, and found what I was looking for (I found two code blocks):
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
&
.container {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.container:before, .container:after {
display: table;
content: "";
}
.container:after {
clear: both;
}
I immediately tried it out, and that specific part of my code looked like so:
<p class="sample-preview">
<span class="sample-preview">PREVIEW</span>
<em>This is italicized aka emphasized</em>, and so is <em>this</em>.<br />
<strong>This is bold aka strong emphasis</strong>, and so is <strong>this</strong>.<br />
Use <strong><em>italics and bold together</em></strong> if you <strong><em>have to</em></strong>.
</p>
+
p.sample-preview {
border: 1px solid #FFCCC9;
background: #FFEBE9;
outline: 2px solid #FFEBE9;
padding: 10px;
}
span.sample-preview {
display: inline-block;
float: right;
margin:0;
font-weight: bold;
font-size: 12px;
background: #FFCCC9;
padding: 2px 5px;
}
.sample-preview {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.sample-preview:before, .sample-preview:after {
display: table;
content: "";
}
.sample-preview:after {
clear: both;
}
Although I am not entirely sure, I think this code is causing a weird bug on the page I tried it. Why do I think so? Everything seemed fine when I removed display: table; from the code using Firebug.
You can take a look at the page here and the bug is — the first pink box is taller than the content. What am I doing wrong?
The issue is that you're also clearing the floated menu to the right.
There's two solutions for that:
the usual is to float your content area itself to the left. This means that everything inside it is in a different float context. Your clear will only affect the elements inside of it.
another trick that works is specifying overflow: hidden on your sample-preview paragraph. This is probably easier to do. Specifying the overflow property on an element (but not set to visible) causes it to behave like a float container.
Cfr: http://www.brunildo.org/test/clear.html, http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
I should also note that with this overflow trick, you don't need the clearfix at all.