I have this screen:
I want the screen to look like
so the motorcycle will appear also with the red flag when the status is active
The code:
HTML
<a class="" ng-class="{'myflicker':orderInfo.status==orderStat.order_status}">
<div class="logoMove" aria-hidden="true"></div>
</a>
<div class="map "></div>
<div class="triggerName">
{{orderStat.order_status_display}}
</div>
</li>
<div class="clearfix"></div>
</ul>
</div>
CSS:
.tracker .active a {
background-image: url(../images/flag_red.png);
background-repeat: no-repeat;
border: 0px solid #A52A2A;
The image is inside here:
.li.a.logoMove{
background-image: url(../images/moto.png);
background-repeat: no-repeat;
position: absolute;
width: 150px;
height: 150px;
left: 0;
transition: all 2s;
}
But image is not showing right. Why is that?
When you position something as absolute , you have to give it z-index . Try giving the picture you want to be shown a z-index: 1; . Tell me if this does anything.
Related
i have this code in my html:
<div class="col-xs-3" >
<div id="coupon1-tile"><span>coupon1</span></div>
</div>
<div class="col-xs-3 ">
<div id="coupon2-tile"><span>coupon2</span></div>
</div>
<div class="col-xs-3">
<div id="coupon3-tile"> <span>coupon3</span> </div>
</div>
</div>
in my css i have this code:
#coupon1-tile, #coupon2-tile, #coupon3-tile {
height: 250px;
width: 85%;
margin-bottom: 15px;
position: relative;
border: 2px solid #3F0C1F;
overflow: hidden;
}
#coupon1-tile:hover, #coupon2-tile:hover, #coupon3-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#coupon1-tile {
background: no-repeat;
background-position: center;
}
#coupon2-tile {
background: no-repeat;
background-position: center;
}
#coupon3-tile {
background: no-repeat;
background-position: center;
}
now i have $scope.coupons where i retrieve data from the db, every coupon has details and picture.
my questions:
1. how do i revise my code in the html page to show the coupons pictures inside the same structure i have here, that means 3 coupons in a row?
2. where should i save the pictures and what is the path i should store in my db? please be percise( i work with derby and local host).
3. i work with eclipse dynamic web project if it is necessary for the saving the pictures question part.
Thanks
My problem has to do with how mobile browsers seem to be ignoring the border radius attribute when inside a div with overflow:scroll. Below is an example of the problem in a jsfiddle that needs to be opened in a mobile browser. As you scroll you will see that the red boxes poke out of the border-radius corners at the top and bottom of the grey element. If anyone knows of anyway to get rid of this problem, please help! Thanks in advance!
http://jsfiddle.net/Thatguyhampton/LLn74/
html:
<div class="card scrollable">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
css :
.scrollable {
box-sizing: border-box;
overflow: auto;
overflow-y: overlay;
position: relative;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.card {
height: 300px;
width: 100px;
background-color: grey;
border-radius: .5em;
}
.content {
height: 50px;
width: 100%;
background-color : red;
margin-top: 10px;
margin-bottom: 10px;
}
Just want to stress that I only see this on mobile browsers.
remove the -webkit-overflow-scrolling: touch; and it will fix it :)
Im trying to make a fluid responsive web that contains an horizontal navbar, my problem is that at a certain width of the browser window the elements of the bar start to relocate one on top each other, is there any way to avoid this behavior in order to make the navbar just stretch until a certain media query break point. I need to website to look al least decent in the ranges where the querys are not activated.
Here's how things look so far:
http://wearehellyeah.com/test/home_formacio.html
<div class="barra">
<!--Menu Principal-->
<nav class="menu-principal">
<ul class="menu">
<li class="item sub"><button type="button" id="menu-lateral" class="sb-toggle-left"><img src="img/iconos/menu.png" alt="search"></button></li>
<li class="item">Actualitat</li>
<li class="item">Activitat de l'oficina</li>
<li class="item">Vocalies</li>
<li class="item">Formació</li>
<li class="item">Serveis</li>
<li class="item">Actualitat</li>
<li class="item no-border">El Col-legi</li>
<li class="item home">Marcar com pàgina d'inici</li>
<li class="item conectados">Conectados 103</li>
<li class="item"><button type="button" id="search"><img src="img/iconos/search.png"></button></li>
</ul>
</nav>
<!--Fin Menu Principal-->
<!--Input buscador-->
<div class="buscador">
<form action="">
<input type="text" id="ip-search">
</form>
</div>
<!--Fin de Input Buscador-->
</div>
The CSS:
.barra {
background: #00b1da;
width: 100%;
padding: 0;
}
.menu-principal {
height: 36px;
line-height: 35px;
margin: 0 auto;
max-width: 1024px;
position: relative;
width: 100%;
}
.menu {
padding: 0;
margin: 0;
}
.menu .item {
float: left;
list-style: none;
}
.menu .item a {
border-right: 1px solid #008ba9;
color: #fff;
font-size: 13px;
padding: 0 .98em;
text-decoration: none;
white-space: nowrap;
}
.menu .sub {
background: #008ba9;
padding: 0 .4em;
height: 35px;
display: block;
}
.conectados {
background: #fff;
color: #4b585b;
font-size: 13px;
padding: .1em 1em 0 2.3em;
position: relative;
}
.menu .home {
background: url("../img/iconos/home.png") no-repeat 2% #00a9a1;
border-left: 1px solid #40c2d3;
padding: 0 0 0 1em;
}
You could add a min-width:
.menu-principal {
min-width:883px;
}
Then it won't go on top of each other. However there are too many options on the navigation bar, you might want to make it a drop-down box when it goes into a mobile media-query range.
e.g. http://vagish.com (as you make the browser width smaller, it changes the navigation bar)
You could have a media query which takes place between 768px and 880px, and reduces the spacing between menu items, and this should be able to make it look fine until you hit the 768px media query.
This would work (along with the CSS above):
#media all and (max-width: 768px) and (min-width: 880px) {
.menu-principal {
padding:0px;
}
.menu-med .item a {
padding:0 .69em;
}
}
I am new to Boot Strap 3. Working on Responsive Layout.
I have a logo centered aligned and below that a navigation bar which has few links e.g. "About Us" "Contact Us" "FAQ", etc.
My Requirement is
Above 1024 resolution the navigation bar should appear below logo in a bar.
Below 1024 resolution it should be collapsed and viewed on right hand side of logo.
Please advise.
1024px is not a breakpoint in the Bootstrap default configuration. You can customize the breakpoint of when the mobile navbar kicks in at the http://getbootstrap.com/customize/ but it affects when everything breaks down to mobile. The default is 768px. So in the un-modified Bootstrap default everything (all forms, collapse, navbar-text, and so on) has to be changed along with the max-width of same, when applicable, so that is 767px. If you don't use LESS then this is a pain.
This only works if you adjust all the CSS break the navbar at the points indicated in the paragraph above. In the Bin below, that's been done, you will need to search for 1023px and 1024px to see where those are located in your installation of Bootstrap. Make a backup. Also, when you update to 3.1.0 in a few days, you'll need to do this again unless you use LESS, which will make short work of this.
DEMO: http://jsbin.com/AsaRofuW/1/
EDIT: http://jsbin.com/AsaRofuW/1/edit
This is the HTML structure to center a logo below the navigation. It does not differ from the docs, except that it adds the image.
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="yourlink.html" class="navbar-brand">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png" alt="company name">
</a>
</div><!--/.navbar-header-->
<div id="nav-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Anchor 1</li>
<li>Anchor 2</li>
<li>Anchor 3</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Test</li>
<li>Another link</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul><!--/.navbar-nav-->
</div><!--/.nav-collapse -->
</div><!--/.container-->
</div><!--/.navbar-->
CSS
This CSS uses the min-width 1024px. For default Boostrap 3.0.3 CSS this min-width is 768px. These add styles that differ from yours and the default bootstrap, you can remove, adjust or whatever.
/* logo container padding on right so it doesn't hit the toggle */
.navbar-brand {
text-decoration: none;
padding-right: 80px;
float: left;
width: 70%; /* adjust as needed */
}
/* logo image */
.navbar-brand img {
max-width: 100%;
min-width: 90px;
max-height: 50px;
}
/* so that the navbar has some bottom white space */
.main-page {
margin-top: 20px
}
.navbar-toggle {
position:absolute;
right:0;
top:10px;
}
#media (min-width:1024px) {
.navbar-header {
width: 100%;
text-align: center;
position: absolute;
left: 0;
bottom: -120px;
/*logo position */
}
/* hide logo after scroll past navbar height */
.showlogo {
display: none
}
.navbar-collapse {
float: left;
width: 100%;
margin: 0;
position: relative;
margin-top: -50px;
padding-top: 50px;
}
/* brand for tablet and up */
.navbar-brand {
text-align: center;
float: none;
width: 100%;
padding: 0;
}
.navbar-brand img {
max-height: 80px
}
/* centered navigation */
.nav.navbar-nav {
float: left;
background: transparent!important;
}
.nav.navbar-nav > li:not(.dropdown) > a:after {
content: "/";
display: inline-block;
padding-left: 30px;
margin-right: -30px;
}
.nav.navbar-nav > li:last-child:not(.dropdown) > a:after {
content: ""
}
.nav.navbar-nav > li.active > a,
ul.nav.navbar-nav > li.dropdown.open > a.dropdown-toggle {
background: transparent;
position: relative;
}
.nav.navbar-nav li.dropdown > ul {
left: 15px
}
.nav.navbar-nav {
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav.navbar-nav > li {
position: relative;
right: 50%;
padding-left: 15px;
padding-right: 15px;
}
.nav.navbar-nav li {
text-align: left
}
/* page styles */
.main-page {
margin-top: 150px
}
}
Note: Responsive utilities won't work inside your navbar because the media queries are changed. Lots more work to fix those, which you will need to figure out. Probably requires making two sets (about 400 more lines of CSS and isolating with a .navbar preceding the class).
Since you're new to bootstrap, I think sticking to an existing breakpoint would be wise, like you have in your example link.
Try putting the logo in your html twice, and show/hide either one with css via media queries matching that same breakpoint. See: http://bootply.com/103276.
I am working with a to client fix a problem on a single page. On all pages, the footer content is positioned and displays properly. However, on this page, when viewed in IE7 the footer content moves up into the body area. The only difference between this page and all the other is the presence of a WooFoo contact form.
I have tried a zillion different ways to bump that content down, but it will not respond to padding or margin adjustments.
Here is the HTML:
<div id="footer">
<div class="width">
<ul class="footerNav">
<li><a class="bFB" href="http://www.facebook.com/pages/Charlotte-NC/The-Idea-People/124178504825" target="_blank" title="The Idea People Charlotte web design facebook">FaceBook</a></li>
<li><a class="bTW" href="http://twitter.com/theideapeople" target="_blank" title="The Idea People Charlotte web design twitter">Twitter</a></li>
<li><a class="bEM" href="http://feedburner.google.com/fb/a/mailverify?uri=theideapeople" target="_blank" title="The Idea People Charlotte web design email">FeedBurner</a></li>
<li><a class="bRSS" href="http://feeds.feedburner.com/theideapeople" target="_blank" title="The Idea People Charlotte web design rss">RSS</a></li>
</ul>
<br class="clear" />
<ul class="termNav">
<li>Terms of Use |</li>
<li>Privacy Policy</li>
</ul>
<p class="copyright">©2010 The Idea People. All Rights Reserved.</p>
<p class="company">Charlotte, NC web design, graphic design and internet marketing</p>
<div id="address"> <strong>The Idea People</strong><br />
4424 Taggart Creek Rd., Suite 111<br />
Charlotte, NC 28208 </div>
<div id="phone"> <strong>T</strong> 704.398.4437<br />
<strong>F</strong> 704.398.4438<br />
<strong>E</strong> ideas#theideapeople.com </div>
<br class="clear"/>
</div>
</div>
Here is the CSS:
#footer { clear: both; background: url(../images/bg_footer.png) 0 0 no-repeat; padding: 10px 0 76px; color: #ccc; font-size: 14px; font-weight: bold; }
#footer .width { position: relative; margin: 0 auto; width: 960px; }
.footerNav { width: 300px; height: 30px; font-size: 15px; position: relative; top: 5px; left: 770px; }
.footerNav li { position:relative; float:left; margin:0; }
.footerNav li a { color: #fff; display: block; text-decoration: none; font-weight: bold; text-indent: -9999px; }
.footerNav li a.bRSS { background: url(../images/icon-rss.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bFB { background: url(../images/icon-facebook.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bTW { background: url(../images/icon-twitter.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bEM { background: url(../images/icon-email.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
Any help in resolving this will be greatly appreciated!
Thanks.
The .footerNav element is causing overflow and busting the layout. I even get horizontal scrollbars on my machine, on all browsers.
The following CSS seems to fix it:
.footerNav
{
/* Add clear and float
*/
clear: left;
float: right;
font-size: 15px;
height: 30px;
top: 5px;
/* Delete these 3
position: relative;
left: 770px;
width: 300px;
*/
}