Heres the link to the page In question....
http://team2648.com/OTIS2/DivTest.html
So If you look at that page, If your browser is small enough, you see that below the box with the red background, there is a bit of space, Why doesn't the box below float up?
The HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OTIS v1.5</title>
<!-- Javascript - Fix the flash of unstyled content -->
<script type="text/javascript"></script>
<!-- Stylesheets -->
<link href="css/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styling.css" rel="stylesheet" type="text/css" media="screen" />
<!--Validation-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/common.js" type="text/javascript"></script>
<!-- Meta Information -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Techplex Engineer" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-10899272-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="header-in">
<h2>Online Team Information System</h2>
<h6>A Web Database Application for Team Profile Management</h6>
</div> <!-- end #header-in -->
</div> <!-- end #header -->
<div id="content-wrap" class="clear lcol"> <!-- Navigation Column-->
<div class="column">
<div class="column-in">
<ul>
<li> My </li>
<ul>
<li> Dashboard </li>
<li> Profile</li>
<li> Information</li>
<li> Emergency Contact</li>
</ul>
<li> Management </li>
<ul>
<li> Users </li>
<li> Email </li><li> Blog </li>
</ul>
<li> Report a Bug </li>
<li> Logout </li>
</ul>
<br />
Logged in as:
<br />
Blake
</div>
</div>
<div class="content">
<div class="content-in">
<h5>Welcome to your personal dashboard Blake </h5><hr id="hr1"/>
<div id="bio" style="display: none;">
Your current Bio: <br/><textarea rows="10" cols="50"> </textarea>
</div>
<div id="profilestats" class="widget">
<strong>IMPORTANT</strong><br/>
<ul style="padding-left: 10px;">
<li>Your Public Profile is pending moderation.</li>
</ul>
</div>
<div id="cal" class="widget">
<!-- <iframe src="https://www.google.com/calendar/hosted/team2648.com/embed?showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&mode=AGENDA&height=200&wkst=1&bgcolor=%23FFFFFF&src=team2648.com_a1ur39fpp2cn076ak2q06o8hhc%40group.calendar.google.com&color=%235229A3&ctz=America%2FNew_York" style=" border-width:0 " width="400" height="200" frameborder="0" scrolling="no"></iframe>-->
<iframe src="https://www.google.com/calendar/hosted/team2648.com/embed?showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=200&wkst=1&bgcolor=%23FFFFFF&src=team2648.com_a1ur39fpp2cn076ak2q06o8hhc%40group.calendar.google.com&color=%235229A3&ctz=America%2FNew_York" style=" border-width:0 " width="400" height="200" frameborder="0" scrolling="no"></iframe>
</div>
<div id="stats" class="widget"><!-- and finally output the information formated for the widget-->
<strong>You have:</strong><br/>
<ul style="padding-left: 10px;">
<li> <strong>42</strong> of 30 fundraising hours<br/></li>
<li>fundraised $<strong>160</strong> of $300<br/></li>
<li> <strong>3</strong> of 5 community service hours<br/></li>
<li> <strong>0</strong> of 40 build hours <br/></li>
</ul>
</div>
<div id="logins" class="widget">
<form name="controlsForm">
<input id="cblogin" type="checkbox" name="loginbox" onClick=""/> Disable Login<br />
<input id="cbreg" type="checkbox" name="regbox" onClick=""/> Disable Registration<br />
</form>
</div>
<div class="clear"></div>
</div><!-- end .content-in -->
</div> <!-- end .content -->
</div> <!-- end #content-wrap -->
<div id="footer">
<div id="footer-in">
This system was designed, built and is maintained by Blake for Infinite Loop Robotics <br>OTIS(Online Team Information System) © 2010 Techplex Labs </div> <!-- end #footer-in -->
</div> <!-- end #footer -->
</div> <!-- end div#container -->
</body>
</html>
You can view the css here:
http://team2648.com/OTIS2/css/styling.css
but the relevant part is this:
div.widget{
width: 200px;
float: left;
/* text-align: center;*/
border: 1px solid black;
padding: 8px;
margin: 8px;
/* margin-left:8px;
font-weight:400;*/
-moz-border-radius:11px;
-khtml-border-radius:11px;
-webkit-border-radius:11px;
border-radius:5px;
background:#fff;
border:2px solid #e5e5e5;
-moz-box-shadow:rgba(200,200,200,1) 0 4px 18px;
-webkit-box-shadow:rgba(200,200,200,1) 0 4px 18px;
-khtml-box-shadow:rgba(200,200,200,1) 0 4px 18px;
box-shadow:rgba(200,200,200,1) 0 4px 18px;
/* padding:16px 16px 40px;*/
}
div#disclaimer
{
margin-top: 10px;
border: 1px dotted black;
font-size:10px;
background-color: #D7D7D7;
}
div.clear
{
clear: both;
}
div#profilestats
{
border:2px solid #FF9999;
}
div#cal
{
width: 400px;
padding-bottom: 0px;
}
I don't know if you have this as you like, but with the comments, I see when you make the full window smaller, the box with the calendar in it (cal) moves below the red Important box (profilestats).
IF you wish this to be closer (close the gap between these) what is causing the space is the DIV.widget in styling.css, margin:8px; besides that, I see nothing causing space at this point with that change - I tested this in IE8 and removing that CSS element setting did indeed push them directly conjunctual with no space between.
Now if what you mean is moving the "stats" up directly below the "profilestats" then that is another matter which can be resolved a couple of different ways.
put "profilestats" and "stats" in a div together (with "cal" and "logins" in
another div together, and float both "container" divs left.
Use the float:left and float: right on the left and right
elements, but that will introduce a space between if the width is
extended (browser width) unless addressed through additional css.
In this case, I would opt for #1 as the css is easier to control.
NOTE: be cautious of margins on IE6 in float left elements at times it can be inconsistent.
The reason why this happening is because both profilestats div and cal div are float:left. Try a float:right; on cal div so that the next div which is floated left(stats) can take the available space below profilestats.
Related
Being new to bootstrap and scripting with html/css in general, I am attempting to create a simple html table (one row with three columns). Each column is to be even (taking up one third of the table which it exists inside of. The problem I am encountering is that it appears to be taking up only two-thirds (2/3) of the available space with in the table. I've looked on the internet for solutions, googled, read a several posts/articles on stack and other places, but I've not found a solution and am hoping for help.
You can see a straight html render of the error here
Here is a picture detailing the issue:
As the example image shows the thin red column is taking up one third of the table space (green bordered table), however that table is not expanding to occupy the full space available to it in the red div. I've looked for through the html render and not found a cause for the issue.
<div class="area">
<section class="wrapper scrollable">
<div class="main-grid">
<div class="agile-grids">
<!-- blank-page -->
<div class="blank">
<div class="blank-page">
<h1>Session is active</h1>
<table class=" " style="border: 1px solid red;">
<tbody>
<tr scope="row" style="border: 1px solid red;">
<td class="text-center" style="border: 1px solid green;">
<div class="col-lg-4 col-md-6 col-sm-12" style="border: 1px solid red;">
<div class="card_user-charProfile">
<img class=" img-fluid" style="width: 100%;" src="http://localhost/wBase/zUploads/cImg/3bgCard.jpg" alt="Wiccan">
<div class="card">
<div class="card">
<p> content goes here</p></div>
</div>
</div> <!-- end row -->
</div><!-- end CHARACTER PROFILE OUTER DIV -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
Here are the CSS declarations / links
<script language="JavaScript" type="text/javascript">
<!-- This JS disallows hijacking into someone else's frame...
if (top.location != self.location){top.location=self.location}
//-->
</script>
<link href="../__themes/bs4_marvelCSS/bs4_bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../__themes/bs4_marvelCSS/bs4_dashV3.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/style_sticky-footer-navbar.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/bs4_dashTweaks.css" rel="stylesheet">
<!-- font CSS -->
<!-- roboto -->
<link href="//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<!-- lato -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- hammersmith one -->
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">
<!-- __themes/_fonts/font-glyphicons.css -->
<link href="../__themes/bs4_marvelCSS/font.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-awesome.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-glyphicons.css" rel="stylesheet">
<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script>
$(function () {
$("#supported").text("Supported/allowed: " + !!screenfull.enabled);
if (!screenfull.enabled) {
return false;
}
$("#toggle").click(function () {
screenfull.toggle($("#container")[0]);
});
});
</script>
Why are you using the table? You can handle that all with the bootstrap grid system. Avoid using table in your project. But I will suggest you to give it a width:
td{width:100% !important;}
Try doing this it may help you.
I am new to bootstrap coding and CSS I am stuck in one issue where in the desktop version i need one image but when it comes to the mobile version i need the second image to be shown and first image should hide.
<div class="col-md-9" style="padding: 0px;">
<img src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
<img src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>
Help needed.
Please implement this code.
You can change max width in media query according to your need. Also please expand snippet to check hide and show image according to device.
I hope it will work for you.
<style>
.image_section img{
display: block;
}
#media (max-width:640px){
.image_section img:first-child{
display:none;
}
}
</style>
<div class="col-md-9 image_section" style="padding: 0px;">
<img src="images/Trinity-Garden-landing-Page-1.jpg" />
<img src="images/Trinity-Garden-landing-Page-4.jpg" />
</div>
Use the below code, It might help you..
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="Masters_baby.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
#media(max-width:767px){
.image1 {
display: block!important;
}
.image2 {
display: none !important;
}
}
</style>
</head>
<body>
<div class="row">
<img src="img/kiran.png" alt="img1" style="height: 200px;width: 200px;display:none;" class="image1">
<img src="img/kiran2.png" alt="img1" style="height: 200px;width: 200px;display: block;" class="image2">
</div>
</body>
</html>
In that I used #media query to hide first image and display second image on mobile view.
You can use bootstrap responsive utilities for showing/hiding components based on the screen size.
Your code snippet has been modified as an example.
The first image will be visible in medium sized screens only
The second image will be hidden on medium sized screens
<div class="col-md-9" style="padding:0px;">
<img class="visible-md-block" src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
<img class="hidden-md" src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>
UPDATED :
Try these classes :
http://getbootstrap.com/css/#responsive-utilities-classes
for the image that must only show in the desktop use :
hidden-xs hidden-sm hidden-md
for image that must show only on mobile use :
hidden-lg hidden-xl
example :
<div class="col-md-9" style="padding:0px;">
<img class=" hidden-lg hidden-xl " src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
<img class="hidden-xs hidden-sm hidden-md" src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>
You may want to have a look at the picture element. Support is quite good now.
Example:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
i need help with responsive image when orientation change.
When mobile change to landscape mode, show white space inside page wrapper just after image, creating a space between image and fixed footer.
When click on a button panel image fix.
html:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/app-theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure.min.css" />
<link rel="stylesheet" href="css/index.css" />
<title>Elephant</title>
</head>
<body>
<div class="app">
<div data-role="page" id="pageone" data-title="Elephant" data-url="pageone">
<!--Menu Panel-->
<div id="menu-panel" data-role="panel" data-position="left" data-display="push" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li data-icon="search"><a data-rel="close" href="#pageone">Search</a></li>
<li data-icon="cloud"><a data-rel="close" href="#pageone">Weather</a></li>
<li id="location-btn" data-icon="location"><a data-rel="close"
href="#pageone">Location</a></li>
<li data-icon="camera"><a data-rel="close" href="#pageone">Camera</a></li>
<li data-icon="gear"><a data-rel="close" href="#pageone">Configuration</a></li>
</ul>
</div>
<!--/ Menu Panel-->
<!--Actions Panel-->
<div id="overlay-panel" data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li id="camera-btn" data-icon="camera"><a data-rel="close" href="#pageone">Photo</a></li>
<li data-icon="video"><a data-rel="close" href="#pageone">Video</a></li>
<li data-icon="audio"><a data-rel="close" href="#pageone">Audio</a></li>
<li data-icon="alert"><a data-rel="close" href="#pageone">File</a></li>
</ul>
</div>
<!--/Actions Panel-->
<header id="page-header" data-role="header" data-position="fixed">
<a id="menu-btn" href="#menu-panel" data-role="button"
data-rel="close" data-icon="bars" data-iconpos="notext">Menu</a>
<h1>
<div id="spinner" class="visually-hidden ui-loader"></div>
<span class="visually-hidden">Elephant</span>
</h1>
<a href="#overlay-panel" data-role="button" class="ui-btn-right"
data-icon="bullets" data-iconpos="notext">Media</a>
</header>
<div id="main-content" role="main" class="ui-content">
<div class="ui-grid-solo">
<div id="photos-container" class="ui-block-a">
<img style="display: block;" id="smallImage" src="img/test.jpeg" />
<!-- <img style="display: none;" id="largeImage" src="" /> -->
</div>
</div>
</div>
<footer id="page-footer" role="contentinfo" data-role="footer" data-position="fixed">
<h1></h1>
</footer>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
css:
#photos-container {
width: 90%;
margin-left: 5%;
}
#photos-container img {
max-width: 100%;
}
Thank you very much
Regards
Thanks for your attention.
Error comes calculating min-height. I fixed it writting:
#media screen and (orientation: landscape) {
.ui-mobile .ui-page {
min-height: 0 !important;
}
}
Regards
In JQuery mobile listview, how can I replace the left-side thumbnail image with a data element?
Say I have a list of daily exercise tips. Instead of an image to the left, I want to show the "Day" of the tip. Like this:
4 Lift some weights -->
3 Do some squats -->
2 Do some pushups -->
1 Stretch your muscles -->
Assume in the "tips" model, there's a field for "Day", just like there's a field for content. Day is a number.
So, instead of this current code (which works to put a img to the left)
<div data-role="content" data-theme="d" >
<div class="content-primary">
<ul data-role="listview" >
<% #all_challenges.each do |tip| %>
<li><a href="#">
<img src="/images/icondock/accept2.png" class="ui-li-icon">
<h3><%= tip.outboundtitle %></h3>
</a>
<ul><!-- Second page with full tip -->
<li>
<br />
<p><%= tip.outgoing %></p>
</li>
</ul>
</li>
<% end %>
</ul>
I want to replace that line with a data element: <%= tip.day %>
What I can't figure out is how to let JQuery Mobile let me keep that great 32X32 space to the left, but not expect an image there. I want to put a big number (day) in there.
If I replace the img src line with <%= tip.day %> it just puts the number on TOP of the tip, and both are left justified. Two lines.
Any ideas?
Just created a sample with hardcoded values.Hope this is what you are looking for.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.day{
margin-top: -15px;
font-size:1.5em;
color:red;
}
#list .ui-link-inherit{
padding-left:30px;
}
</style>
</head>
<body>
<div id="page" data-role="page">
<div data-role="header">
<h1>Test Page</h1>
</div>
<div data-role="content">
<ul id="list" data-role="listview" data-inset="true">
<li><div class="day ui-li-icon ui-li-thumb">4</div>Lift some weights</li>
<li><div class="day ui-li-icon ui-li-thumb">3</div>Do some squats</li>
<li><div class="day ui-li-icon ui-li-thumb">2</div>Do some pushups</li>
<li><div class="day ui-li-icon ui-li-thumb">1</div>Stretch your muscles</li>
</ul>
</div>
</body>
</html>
A demo here - http://jsfiddle.net/5PPs4/
Let me know if that helps
I am very new to CSS. please go easy on me.
I am interested in putting a survey (using survey monkey) into a website. I want it to be in a fixed position as a side bar on the left and shrink the size of the survey box. Where am I going wrong?
<!DOCTYPE html>
<html dir='ltr' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<div>
<head>
<title>
Home
| qfo4produce
</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<link href='css/inuit.css' media='all' rel='stylesheet'>
<link href='css/grid.inuit.css' media='all' rel='stylesheet'>
<link href='css/style.css' media='all' rel='stylesheet'>
</head>
<body class='wrapper'>
<div id='header'>
<a href='index.html' rel='home'>
<img src='images/banner.png' alt="" title='Home'>
</a>
</div>
<div>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
top:0;
left:-30;
iframe { width: 250px !important; }
height:100%;
}
</style>
<div id="surveyInfo"> <div><script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=wtvL1HViBjWad5DOwtqu7A_3d_3d"> </script>
</div>
<ul class='nav'>
<li class='first'>
<a href='what-is-qfo.html' title='What Is QFO?'>What Is QFO?</a>
</li>
<li>
<a href='team.html' title='Team'>Team</a>
</li>
<li>
<a href='examples.html' title='Examples'>Examples</a>
</li>
<li>
<a href='technology.html' title='Technology'>Technology</a>
</li>
<li class='last'>
<a href='mailto:info#franwell.com' title='Contact'>Contact</a>
</li>
</ul>
<a class='login' href='qfo.aspx.html' title='Login'>Login</a>
<div id='main'>
<p>
<img src='images/summary.png' alt="Summary of QfO Process" />
</p>
</div>
Copyright © 2011 Hussmann Corporation and Franwell, Inc.
</div>
</body>
</html>
You can set the width of the autogenerated iframe. This will force the SurveyMonkey iFrame to be smaller.
http://jsfiddle.net/H6WNP/
iframe { width: 250px !important; }
I just gave you a generic answer because your post is missing a lot of html that corresponds to your CSS. I think this is what you are after though.