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/
Related
All i want to do is just Center my menu on my stie .
When i add :
.primary-menu {
float: none !important;
}
in my custom.css
just nothing happend.
when i add just :
.primary-menu {
float: right !important;
}
My menu is moving to right side of my page.
( I don't have access to files , i can use only custom.css in my wordpress )
my website: http://test.projekt-tenis.pl/wordpress/
and screen:
can someone just look in google chrome and tell me what i should add to my custom.css to center this menu?
It is not the <a> but the <li>:
.primary-menu {
text-align: center;
width: 100%;
}
.primary-menu .wbc_menu > li {
display: inline-block;
float: none;
}
Now in the website, it looks like:
Is this what you need?
I would like to achieve the effect of a scrolling line beneath anchor links to meet a client brief - I stupidly imagined a bit of CSS3 would easily achieve this without any bother, so I've setup something along the lines of the following code, and spent the past hour banging my head on the desk due to a very annoying bug I don't understand.
Everything works great on desktop, but on mobile (both iOS and Android) I experience an issue when I select a link - First click, the animation runs, and I have to click a second time to trigger the link (same happens with below codepen). It's baffling me and I wonder if anyone can shine any light on things for me!!?
http://codepen.io/pablodancer/pen/ZLJVOP
li {
display: inline-block;
list-style-type: none;
}
li a {
text-decoration: none;
position: relative;
line-height: 1;
height: auto;
padding: 0;
margin-right: 8px;
padding-bottom: 8px;
z-index: 1;
}
li a:after {
display: block;
left: 0;
bottom: 0;
margin-top: 4px;
width: 0;
height: 5px;
background-color: blue;
content: "";
z-index: -3;
transition: width 0.3s;
}
li a:hover:after,
li.active a:after {
width: 100%;
}
<ul>
<li class="active">nme</li>
<li>bbc</li>
<li>blah3</li>
<li>blah4</li>
<li>blah5</li>
</ul>
I believe the double tap issue is only related to iOS. What I normally do is to simply hide the pseudo element on touch devices, either approach below will work.
(1) Using CSS media queries, it works in iOS 9+ and Android 5+.
#media (hover: none) {
li a:after {
display: none;
}
}
(2) Using a bit of Javascript + CSS:
(function(html) {
html.className += ('ontouchstart' in window) ? ' touch ' : ' no-touch ';
})(document.documentElement);
.touch li a:after {
display: none;
}
In addition, if you wish to keep the active style, you can use selector li:not(.active) a:after. You may also want to set li {vertical-align: top;} so the items can lineup nicely.
This is caused by a non-standard behavior adopted by WebKit on IOS.
Weird (but common) issue needs a weird (and simple) hack, here is how I solved it with only CSS and bullet-proof browser support.
Basically, the magic is using transforms and IOS/WebKit will not consider as hidden the pseudo element, so it will not force the double-tap behavior when it's shown on hover:
li a:after {
/* keep the element 'visible' and with a size */
display: block;
content: '';
width: 100%;
height: 2px;
...
/* then 'hide' it with a transform */
transform: scaleX(0);
...
/* add a nice transition */
transition: transform 600ms ease;
}
li a:hover:after {
/* 'show' the element by resetting the transform */
transform: scaleX(1);
}
Till now, it seems to do the trick, why? because the size of a transformed element is not computed in the reflow of the page :)
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
I'm working on a website on wordpress.
I have a wrapper with header and entry inside of it.
my Body height is set to height: 100%;
Wrapper is set to height: 100% and min-height: 100%.
The height of my page expand depending of the content of my entry, that works perfectly on most of pages.
but on some pages, I've included Pure CSS Tabs, which are set to position:absolute to work.
I used this example : http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/
on pages including those tabs my content doesn't expand anymore, I can not use position:relative for the tabs...
Is there a way of expending the body height depending of my tab contact height ?
maybe using Js ?
can anybody help me ?
here is my css :
html,body{
width: 100%;
max-width: 1220px;
font-family: 'andale';
font-size:14px;
line-height: 20px;
color: black;
text-transform: none;
background-color: #4C4C4C;
letter-spacing: 2px;height: 97%;}
#wrapper{
background-color: white;
height: auto !important; /* ie6 ignores !important, so this will be overridden below */ min-height: 100%; /* ie6 ignores min-height completely */
margin-left: 20px;
margin-top: 20px;
padding-top: 20px;
height: 100%;}
.entry{
padding-left: 20px;
padding-right: 20px;}
#header{
font-size: 14px;
line-height: 20px;
width: 100%;
color: #FF5000;
text-decoration: none}
.menu-menu-container{clear: both;padding-top: 5px;}
#menu-menu {list-style:none;}
.menu-item {float:left;}
#menu-menu li:after{content:"\00a0|";}
#menu-menu li:before{content:"\00a0";}
#menu-menu li:first-child:before{content:"";}
#menu-menu li:last-child:after{content:"";}
#menu-menu li.current_page_item a { color:#FF5000;text-decoration: line-through }
#menu-menu li.current-page-ancestor a { color:#FF5000;text-decoration: line-through }
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
list-style: none;
position: relative;}
.tabs li{
float: left;}
.tabs li:after{
content:"|\00a0";}
.tabs li:last-child:after{
content:"";}
.tabs label:hover {
color:#FF5000;
text-decoration: line-through}
[id^=tab]:checked + label {
color:#FF5000;
text-decoration: line-through}
[id^=tab]:checked ~ [id^=tab-content] {display: block;}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
left: 0;
position: absolute;}
here is a jsfiddle http://jsfiddle.net/MPhnP/
anyone can help me with this ? is it possible using the css tabs I'm using ?
thanks a lot for your help !
Wow, I remember battling with this exact problem a couple of months ago, I was even using those exact same tabs you linked.
The thing with absolute positioning is that you are positioning the elements outside of the normal flow of the webpage - any div with position absolute will not contribute to the page flow.
This leaves you with 2 options:
Manually set the height of the tab group. For example:
.tabs {
height: 450px;
}
I don't like this solution as it means you can't have a dynamic height for each tab - all tabs will be the same height. If your first tab had only a few lines of text and your 2nd one had many paragraphs, the whole thing would just look weird, or you would have a large gap under the tab group.
So what are your other options? Ditch pure CSS tabs and use jQuery. Honestly, I spent hours and hours researching pure CSS tabs trying to find/create some that were practical and functional, and I concluded it just isn't feasible. Pure CSS tabs are just gimmicks and a brilliant example of the power of CSS, but I do not believe they have any practical use in a production environment.
EDIT: It just occurred to me you probably CAN use JS to get your tabs to work how you want, but if you're going to go down that route, why not just use JS tabs?
On this site http://rushir.co/ I would like to make the Title (the slide.js) fixed, like the background is, so that when you scroll the "Who I Am" comes up to cover it. What do I do?
Also, I've somehow managed to make the Twitter and Email links fixed but I can't seem to get the "Who I Am" to cover it when it scrolls.
What do I do?
If the View Source isn't enough the code is on GitHub here https://github.com/rushir/rushir.github.io
Thanks in advance for your help!
To solve your problem you got to remove the "style = margin-top: -250px" from your nav element:
<nav style="margin-top: -250">
to
<nav>
Then put in your css file on the nav closure: position: fixed or whatever you want. Example:
nav {
position:fixed;
margin-top:0;// Or what ever value you want
width: 100%;
text-align: center;
left:0;
top:0;
}
The left: 0 and top: 0 is to make the elements don't disapear in firefox when they are fixed positioned.
This are the kind of problem that we ran when we put inline css code in our html tags. Properties that are declare in html tags cannot be overwrited later in our .css file unless we modify the .html file directly or we overwrite it using the !important hack (which is not recomendable).
e).
Extra: To center the links on the top-center of the page, replace the blocks as the same selectors with the following ones and you are done:
nav {
position:fixed;
width:100%;
left:0;
top:0
}
nav ul {
display: block;
line-height: -20;
vertical-align: center;
width:inherit;
text-align:center;
}
nav ul li {
list-style: none;
margin: 30px 30px 50px;
margin: 1.875rem 1.875rem 3.125rem;
font-family: "Lato", Arial, sans-serif;
font-size: .8125em;
font-weight: 400;
text-transform: uppercase;
display:inline-block;
}
I hope it helped :). Cheers.