I'm using bootstrap for a simple HTML5, CSS3 website.(see here: http://skyfistudio.com/project/fsc/ ) .there are three divs that should be 100% width.
It's looking good in desktop and all browsers. But in iPhone , it shows aligned left(Please see the attached image). I want it to stretch 100%. The iPhone view is here:
http://skyfistudio.com/project/fsc/hosting/
Here is the code for first navigation:
ul.fnav
{
list-style-type:none;
margin:0 auto;
padding:0;
padding-top:8px;
padding-bottom:8px;
text-align:center;
margin-top:0px;
background-color:#3B5998;
width:100%;
}
ul.fnav li
{
display:inline;
}
ul.fnav a:link,ul.fnav a:visited
{
font-weight:normal;
color:#fff;
margin-left:10px;
font-size:13px;
text-align:center;
padding:6px;
margin-right:55px;
text-decoration:none;
text-transform:uppercase;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
ul.fnav a:hover,a:active
{
color:#ccc;
}
Place them inside a <div class="container-fluid">...</div>
Make Both and the image div in one div so that bot come in one row-fluid and also check with #media-queries in custom.css
Related
Well, this is my first topic here, so here it is!
I've just done a nice-simple :hover code where you can mouse over an image and the captions underneath it appears for complete. More specifically, in this code I have two types of captions, one above the image and one right underneath the image, which can be found when you mouse it over.
The :hover works pretty fine, however I need to add a simple effect, just a little linear transition. So I add the most basic transitions in the "a" tag, but it is not working at all! I guess the code is not recognizing the top:0px in the .featured-banner a class and the bottom:0px in the .featured-banner a:hover.
Does anyone have a solution for it? I appreciate you guys for helping me out!
Oh, just in case, the text inside the captions classes are written in portuguese but not very interesting, just an ad for Cancun! =P
Here is the HTML i'm using:
<div class="featured-banner">
<a href="#">
<div class="caption">
<p>Mega Oferta • Cancún • Carnaval 2014</p>
</div>
<img src="http://www.advtour.com.br/sample-cancun.jpg" />
<div class="under-caption">A partir de US$ 2.148 Ou entrada + 11x de R$ 358</div>
</a>
And here is the CSS:
.featured-banner {
width:930px;
height:350px;
background:#000;
font-family:sans-serif;
font-size:23px;
margin:14px 0px;
overflow:hidden;
position:relative;
}
.featured-banner a {
text-decoration:none;
position:absolute;
top:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.featured-banner a:hover {
top:inherit;
bottom:0;
}
.caption {
width:100%;
height:350px;
color:#FFF;
text-transform:uppercase;
position:absolute;
top:0px;
z-index:98;
}
.caption p {
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
text-align:justify;
text-transform:uppercase;
background:rgba(0,0,0, .4);
padding:11px 14px;
position:absolute;
bottom:0px;
z-index:98;
}
.under-caption {
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
font-size:20px;
text-align:justify;
background:rgba(0,0,0, .4);
padding:11px 14px;
z-index:98;
}
Here is a demo
If you are going to transition the effect then you need to transition the same style. Going from top - bottom will cause no transition since it is changing the styles. If you did top: 0; to top: 100%; then you will see a transition.
Here is the css I changed:
.featured-banner a {
text-decoration:none;
position:absolute;
top:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.featured-banner a:hover {
top:inherit;
top: -55px;
}
Finally, a fiddle: Demo
You can only transition the same attribute. Top and bottom aren't the same.
I worked out a fiddle, which shows how it could work.
.under-caption {
position: absolute;
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
font-size:20px;
text-align:justify;
background:rgba(0,0,0, .4);
padding:11px 14px;
z-index:98;
bottom: -3em;
-webkit-transition:bottom 1s ease;
-moz-transition:bottom 1s ease;
-ms-transition:bottom 1s ease;
-o-transition:bottom 1s ease;
transition:bottom 1s ease;
}
.featured-banner:hover .under-caption{
bottom: 1em;
}
http://jsfiddle.net/u3E5P/1/
I have managed to get a text showing when having the cursor over an image, but now I want to position it so that it appears on the image, preferrably in the center of it. And I would also like to change the font size of it. As I am new to web development I am not sure how to arrange this.
JSFiddle with necessary info: http://jsfiddle.net/gGvb2/
HTML:
<article class="art-1"> <img src="nutrition.jpg">
<span>Nutrition</span></article>
CSS:
span {
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;
}
img {
width: 462px;
}
img:hover ~ span {
opacity: 1;
}
Any help is greatly appreciated!
I'd suggest relatively positioning the parent article element, and then absolutely positioning the span element relative to it. I'm not sure where you want the span to appear, but in this example it has a width of 100% and has text-align:center for horizontal centering.
UPDATED EXAMPLE HERE
span {
opacity: 0;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
}
img:hover ~ span, span:hover {
opacity: 1;
font-size:20px;
font-weight:bold;
}
article {
position:relative;
display:inline-block;
}
article span {
position:absolute;
top:10px; left:0;
width:100%;
text-align:center;
background:white;
}
Does anyone know how to recreate this link effect that is done in jQuery in pure CSS3?
The effect can be seen at: http://www.yuhong-ng.com/
Same html :
<a href="#" id="liveshows" style="margin-top: -40px;">
<span class="top">Live Shows</span>
<span class="bottom">Live Shows</span>
</a>
Same base CSS :
#navigation li a {
height:80px;
font-size: 18px;
font-family: 'PT Sans Narrow';
font-weight: bold;
}
#navigation li,#navigation li a {
float: left;
}
#navigation li a span {
display:block;
height:32px;
padding:8px 20px 0 20px;
cursor:pointer;
}
An some new CSS3 stuff :
#navigation li a {
-webkit-transition: margin-top 500ms linear;
-moz-transition: margin-top 500ms linear;
transition: margin-top 500ms linear;
}
#navigation li a:hover {
margin-top: -40px;
}
So, what happens here ?
On hover, your JavaScript animates the margin property to -40px. Simple stuff.
So, in CSS, you need a transition property and, on :hover, change the margin. Same stuff.
A better version would use 3dtransforms, because it avoids repainting. It depends really if this effect is alone on your page (then transition on margin is fine) or if the website is "effect rich" (then repaints are to be tracked and eliminated.)
#navigation li a {
-webkit-transition: -webkit-transform 500ms linear;
-moz-transition: -moz-transform 500ms linear;
transition: -ms-transform 500ms linear;
transition: transform 500ms linear;
}
#navigation li a:hover {
-webkit-transform: translate3d(0,-40px,0px);
-moz-transform: translate3d(0,-40px,0px);
-ms-transform: translate3d(0,-40px,0px);
transform: translate3d(0,-40px,0px);
}
More about repaints (must see video) : http://www.youtube.com/watch?v=x0VR3lUOpdc
Ok guys, noob here, writing my first joomla module (or trying to anyway!). Gotten suprisingly far but am having some issues with my css styling, im sure its to do with my selectors and my lack of understanding about whats happening!
Basically Im trying to make one of the li's padding-right grow on hover, the effect is working but currently both the li's are growing rather than just the one I am hovering on.
Any help would be awesome!
THE HTML
<div>
<ul id="social">
<li>one</li>
<li>two</li>
</ul>
</div>
THE CSS
#social{
position:fixed;
z-index:1000;
top:50%;
right:0px;
list-style:none;
}
#social li{
padding-right: 5px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
background-color: #202020;
border-radius: 4px 0 0 4px;
margin-top:15px;
-moz-transition: padding-right .3s ease-in;
-o-transition: padding-right .3s ease-in;
-webkit-transition: padding-right .3s ease-in;
transition: padding-right .3s ease-in;
}
#social li:hover{
padding-right: 25px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
}
I'm pretty sure this is because li is a block element, which fills it's parent (the ul) When one grows, the parent is pushed out, causing the other li to fill the space. This way the lis will always be the same size.
There might be a better way, but you could add the following styles to the li
float:right;
clear:both;
This works because it changes the elements to act like inline elements, and keeps them stuck to the right side, but also puts each on a separate line.
An alternative is to put an inline element inside of the li (span or a), and change the li styles to be a, and add an li style to simply set text-align:right. You'll probably want some other styling, but I just did enough to get the functionality in there.
<div>
<ul id="social">
<li><a href='#'>one</a></li>
<li><a href='#'>two</a></li>
</ul>
</div>
#social{
position:fixed;
z-index:1000;
top:50%;
right:0px;
list-style:none;
}
#social li{
text-align:right;
}
#social a{
padding-right: 5px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
background-color: #202020;
border-radius: 4px 0 0 4px;
margin-top:15px;
-moz-transition: padding-right .3s ease-in;
-o-transition: padding-right .3s ease-in;
-webkit-transition: padding-right .3s ease-in;
transition: padding-right .3s ease-in;
}
#social a:hover{
padding-right: 25px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
}
I am creating a vertical navigation and have already made the CSS properties for the buttons.
The hover properties are faded in using:
-webkit-transition:all .1s;
-moz-transition:all .1s;
-o-transition:all .1s;
-ms-transition:all .1s;
However, because the hover button is larger than the static button, during the animation the stack of buttons move. is there anything I can do to stop this?
The full code looks like this:
<div id="nav">
<form method="post" action="">
<a>Home</a>
<a>link 2</a>
<a>link 3</a>
</form>
</div>
#nav {
position:absolute;
margin-top:96px;
margin-left:30px;
height: 450px;
width: 140px;
font-family:"Book Antiqua";}
#nav a {
background:url(Images/Button.png);
height:28px;
width:130px;
font-size:14px;
text-align:center;
color:#C60;
text-decoration:none;
background-position:center;
margin:auto;
display:block;
position:relative;
line-height:190%;
}
#nav a:hover {
background:url(Images/Button%20Hover.png);
height:34px;
width:140px;
font-size:16px;
text-align:center;
color:#C60;
text-decoration:none;
margin:-3px;
z-index:2;
line-height:220%;
text-indent:-10px;
-webkit-transition:all .1s;
-moz-transition:all .1s;
-o-transition:all .1s;
-ms-transition:all .1s;}
#nav a:active {
background:url(Images/Button%20Hover.png);
height:34px;
width:140px;
font-size:16px;
text-align:center;
color:#C60;
text-decoration:none;
margin:-3px;
z-index:2;
line-height:210%;
text-indent:-10px;}
Use CSS transform method instead of scaling with font-size, margin or line-height: http://jsfiddle.net/tovic/KSZsH/4/