I am developing an events page using jquery mobile. I have a stylish way of showing the date. It currently works flawlessly on my desktop, yet when I view it on my iphone 3gs, I get a blurry Image. The text seems as though it is duplicated on itself just slightly to look like this: help please.
link to the page : here
Here is the css:
.caldate2 { background: url(http://www.fsb.muohio.edu/fsb/templates/images/calpage-red.gif) no-repeat;
width:38px;
height:38px;
text-align:center;
margin-right:8px;
float: left; }
.caldate2 .day {
color: #fff;
margin-top:4px; }
.month { text-transform:uppercase;
color:#d5b549;
font-size:9px; }
and the Markup:
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<a data-rel="back" data-icon="back" data-direction="reverse">Back</a>
<h1>Events</h1>Home
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-dividertheme="a" data-inset="true">
<li data-role="list-divider">Divider</li>
<li>
<div class="caldate2">
<div class="day">
28
</div>
<div class="month">
MAR
</div>
</div>This is a test
</li>
</ul>
</div>
</div><!-- /page -->
</body>
mumis,
looking into it, it would appear the class:
.ui-btn-up-a {
color: #000000;
font-weight: bold;
text-shadow: 0 1px 1px #EEEEEE;
}
is causing an extra "#EEE" text-shadow on the text.
Try removing that from the fsb.min.css file!
Oh and btw,
I'm from around SWOhio area (noticed the MUOhio)
Related
I have few menus with titles, and next to them attached icons, the following code is working correctly:
<div class="contentcont">
<div class="content">
<div class="navbar">
<a class="navbar" href="index.htm">
<img src="navhome.png" alt="Home" height="12" width="14"></a>
<a class="navbar" href="index.htm">Login</a>
<div class="clear"> </div>
</div>
when trying to add the same icon next to a different class it is showing the icon above (if written above) or under (if written under) but no on the same line, i have tried to change:
<div class="infoboxheader infoboxheaderuser">
<img src="navhome.png" alt="Home" height="12" width="14"></a>
<h1 class="infobox">Login to Real Estate</h1>
</div>
<div class="infoboxbody">
css info of infobox:
h1.infobox{
color: #5d5d5d;
font-size: 13px;
font-weight: bolder;
padding-left: 10px;
margin: 0px 0px 0px 0px;
text-transform: uppercase;
}
notice that's a different class, what am i doing wrong?
Try using styles for img tag. like,
.infoboxheader img{float:left;margin-top:2px}
here is a working fiddle - https://jsfiddle.net/t8tokcth/1/
I'm trying to grey out the tags (success and recommended on the last 2 boxes) and have them colored only when they are hovered over or active (the first box).
I'm using the gray colour as a disabled state although its just styled gray using css.
I'm trying to do this in in pure CSS using SASS and not using css fitler as I need to target IE browsers.
Could I create a mixin or a true or false statement in SASS to unset a class that is gray to show the colour in its hovered or active state on the parent or something?
The tags are bootstrap.
<div class="row">
<div class="col-md-3">
<div class="sau-select selected">
<div class="header">
<h4>Self Managed</h4>
<p>label</p>
</div>
<div class="main">
<div class="tag tag-success">Success</div>
<p>Included</p>
</div>
</div>
</div><!-- /col-md-3 -->
<div class="col-md-3">
<div class="sau-select error">
<div class="header">
<h4>Self Managed</h4>
<p> </p>
</div>
<div class="main">
<span> </span>
<p>Included</p>
</div>
</div>
</div><!-- /col-md-3 -->
<div class="col-md-3">
<div class="sau-select">
<div class="header">
<h4>Self Managed</h4>
<p>label</p>
</div>
<div class="main">
<span class="tag tag-warning">Recommened</span>
<p><i class="fa fa-plus" aria-hidden="true"></i> $399.00</p>
</div>
</div>
</div><!-- /col-md-3 -->
<div class="col-md-3">
<div class="sau-select">
<div class="header">
<h4>Self Managed</h4>
<p>label</p>
</div>
<div class="main">
<span class="tag tag-success">Success</span>
<p>Included</p>
</div>
</div>
</div><!-- /col-md-3 -->
</div><!-- /row -->
SASS
.sau-select {
border: 2px solid $sau-gray-mid;
float:left;
width:100%;
text-align:center;
cursor:pointer;
.header{
background-color: $sau-gray-mid;
color:#fff;
padding:7px 0 7px 0;
h4{
font-size:1.1rem;
}
p{
font-size:0.8rem;
padding:0;
margin:-7px 0 0 0;
line-height:18px;
}
}
.main{
color:$sau-gray-mid;
padding:4px 0 15px 0;
p{
padding:0;
margin:0;
}
}
&:hover, &.selected{
border: 2px solid $sau-blue;
.header{
background-color: $sau-blue;
}
.main{
color:$sau-blue;
}
}
&.error{
border: 2px solid $brand-danger;
.header{
background-color: $brand-danger;
}
.main{
color:$brand-danger;
}
}
}
If I've read your question correctly, I think you may have a slightly wrong idea of what SASS does. I'll attempt to answer as best I can;
SASS is simply a sugar layer, no matter what function or mix-in you have in a sass file, it always ends up being compiled and being a .css file, Its ability to effect the browser is 100% limited to the exact standards of css, so if css can do it, it is possible, if css can't, sass will not help you.
So with this in mind, having color change on hover is no problem, and your code appears to suggest that you have already achieved this.
As for the selected color, there simply is no way around it, you must add the .selected class to the HTML. This will obviously trigger the color change from the associated class.
Hopefully my answer helps you.
When I hover over the li, theres a gap to the left and I can't find anything in developer console that explains it.
.custom-nav>li {
padding: 1.5em 1em;
border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
padding: 1.5em 1em;
}
.custom-nav>li:hover {
background: #777;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
Bootstrap makes the list items inline elements, and inline elements are sensitive to white space. Just remove the white space between them:
.custom-nav>li {
padding: 1.5em 1em;
border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
padding: 1.5em 1em;
}
.custom-nav>li:hover {
background: #777;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav">
<li>Link</li><li>Link</li><li>Link</li>
</ul>
</div>
</div>
</div>
You can also use HTML comments to occupy the white space instead:
<li>Link</li><!--
--><li>Link</li><!--
--><li>Link</li>
Line break between inline elements creates a whitespace. There are several ways to fight it: to set font-size of parent to 0px, to remove line breaks, to comment
line breaks like that:
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav"><!--
--><li>Link</li><!--
--><li>Link</li><!--
--><li>Link</li><!--
--></ul>
</div>
</div>
</div>
Fiddle demo
I would suggest you to add these CSS options (and then go further with editing CSS):
.list-inline > li {
display: block;
float: left;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
I am using Bootstrap's Navbar and Bootsrap's grid to display a Navbar with a image immediately underneath the Navbar. However, for some reason there is whitespace between this Navbar and the image. When I use firebug to investigate the location of the whitespace, it looks like the Navbar is top-aligned within its containing . I have tried to fix this by using CSS to bottom-align the navbar, to no avail.
How can I eliminate this whitespace?
<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
<div class="span6 offset3" id="divTopLinkNavBar">
<div class="navbar" id="topLinkNavBar">
<div class="navbar-inner" style="font-size: 16px;">
<ul class="nav">
<li class="active">Home</li>
<li class="divider">PROJECTS</li>
<li class="divider">ABOUT US</li>
<li class="divider">THE TEAM</li>
<li class="divider">EVENTS</li>
<li class="divider">MEETINGS</li>
<li>RESOURCES</li>
</ul>
</div>
</div>
</div>
</div>
<!--Background Image-->
<div class="row" id="rowBackgroundImg">
<div class="span6 offset3" id="backgroundImg">
<!-- background image is set in CSS -->
</div>
</div>
Here is my desperate attempt at fixing this issue using CSS:
#backgroundImg
{
color: #ff0000;
background-color: #000000;
/*width: 709px;
height: 553px;*/
background: url('../images/someImage.jpg') no-repeat;
background-size: 100%;
height: 700px;
border-radius: 0px;
background-position: center;
vertical-align: top;
background-position: top;
}
#divTopLinkNavBar
{
vertical-align: bottom;
}
#topLinkNavBar
{
padding-bottom: 0px;
}
#rowBackgroundImg
{
padding-top: 0px;
}
.navbar
{
vertical-align: bottom;
}
You may want to override the margin-bottom: 20px from navbar :
.navbar {
margin-bottom: 0;
}
Something like that : http://jsfiddle.net/q4M2G/
(the !important is here just to override the style of the CDN version of bootstrap I'm using in the jsfiddle but you should not need to use it if your style correctly overrides bootstrap styles)
Why you put classes: span12 offset3 ?
Bootstrap has 12 columns default. so if you didn't changed it try to put:
span9 offset3 or just span12.
The title needs to be at bottom of the text, and just above the video. The border for the wrapper is breaking near the bottom left corner (because of the YouTube video) when viewed in Chrome.
<head>
<style type="text/css">
body{font:15px arial,sans-serif;}
img{border-style: none;}
a:link {color:#0000FF;} /* unvisited link */
a:visited {color:#0000FF;} /* visited link */
a:hover {color:#0000FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
#title{
font-size:130%;
vertical-align:bottom; /*What am I doing wrong here? */
white-space:nowrap;
}
#arrows{
float:left;
margin-top:25px;
margin-left: 25px;
}
#list{
float:right;
margin-right:60px;
}
#wrapper{
width:300px;
border: 10px solid orange; /*Why is the YouTube video breaking this when viewed in Chrome? */
}
#video{
margin:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="arrows">
<br />
<img src='img/up.png'><br />
<img src='img/down.png'>
</div>
<div id="list">
<ul>
<li><a href='...' id='0' >zero</a></li>
<li><a href='...' id='1' >one</a></li>
<li><a href='...' id='2' >two</a></li>
<li><a href='...' id='3' >three</a></li>
<li><a href='...' id='4' >four</li>
<li><a href='...' id='5' >five</a></li>
</ul>
</div>
<div id='title'>Beginner Tutorial 1</div>
<div id='video'><embed style="width:260px; height:176px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=4204540069740232845&hl=en" flashvars=""> </embed></div>
</div>
</body>
</html>
Just move
<div id='title'>Beginner Tutorial 1</div>
below the
<div id='video'><embed style="width:260px; height:176px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=4204540069740232845&hl=en" flashvars=""> </embed></div>
but before the last
</div>
This happened because your other elements are floated and, therefore, are outside the flow of the document.
EDIT: I don't see the border issue in Chrome, BTW.
EDIT #2: To place the div id-title above the video, add the following line above the title:
<br style="clear:both;" />