I am trying to make a row which is displayed in image .Actually my circle is not on right side and my “P” is not getting background color.Here is my code
http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=preview
can we give row height in percentage ?
actually I need my row should look like as shown in image
![<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Swipe Down</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5"></script>
</head>
<style>
.brd {
border: 1px solid red;
}
</style>
<body ng-app="">
<div class="list card">
<div class="item item-avatar">
<div style="border: 1px solid red;float: left;background: gray;">P </div>
<h2>16000389</h2>
<p>RutherFord & Alfanso Company Lmt</p>
<div style="border: 1px solid black;float: left;background: green;border-radius: 100%;width: 50px;height: 50px">650</div>
</div>
</div>
</body>
</html>
Update Plunker here: http://plnkr.co/edit/Z8w97NgD15rwuKjnmr05?p=preview
Edit: In light of the responsive requirement I have changed the plunker to use viewport settings. This will take up 100% of the width AND set the height of the items inside it to remain in proportion. As for the text I'm not sure you can do that with pure css.
<div class="">
<div class="" style="height: 30vw; position:relative; width: 100%;">
<div style="float: left;background: gray; height:100%; width: 10%; text-align:center;">
<div style=" position:relative; top:40%;">P</div>
</div>
<h2>16000389</h2>
<p>RutherFord & Alfanso Company Lmt</p>
<div style="border: 1px solid black;float: right;background: green;border-radius: 100%;width: 20vw; height: 20vw;position:absolute; top:20%; text-align:center; right:10%">
<div style=" position:relative; top:30%;">650</div>
</div>
</div>
I assume you will be moving all this inline css to separate files though...
Related
I have following, simple web page. Here I have used vh for image height. But when I resize it to small screen sizes, the size of the background section doesn't resize properly.
Are there any solutions for this problem without remvoing vh.
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
section{
background-color: rgb(200,200,200);
padding: 10px 0px 30px 0px;
}
.edit_image img{
max-height: 80vh;
padding: 30px 30px 30px 30px;
}
</style>
</head>
<body>
<div class="container-full" style="padding: 20px;">
<section>
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<div class='edit_image' img_id=0><img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'></div>
</div>
</div>
</section>
</div>
</body>
</html>
Wrong (Small screen):
Correct (Normal Web page):
Here is a working solution for you. Basically just added max-width to the css. Also created a fiddle https://jsfiddle.net/9p619qwq/
Please note that the fixed padding (for both the <section> and <img>) is going to cause issues when the page gets smaller as the width and the padding ratios are going to overlap.
section{
background-color: rgb(200,200,200);
padding: 10px 0px 30px 0px;
text-align: center;
}
.edit_image img{
max-height: 80vh;
max-width: 80vw;
padding: 30px;
}
<div class="container-full" style="padding: 20px;">
<section>
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<div class='edit_image' img_id=0>
<img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'>
</div>
</div>
</div>
</section>
</div>
hey i notice you forgot to add the viewport meta:
<meta name="viewport" content="width=device-width" /> perhaps this will solve your problem
I have a page with the following structure:
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/coachmaster.css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="dashboard.js"></script>
</head>
<body>
<div id="outer">
<div id="wrap1">
<img id="logo" src="/images/dashboard.png" />
<div id="status">Status</div>
<div id="menu">Menu</div>
</div>
<div id="grip1" ></div>
<div id="wrap2">
<div id="content">
<table class="title"><tr><td>Ian's Dashboard</td></tr></table>
<div class="fields">This is the screen content
</div>
<table class="listhead"><tr>.. row of command buttons... </tr></table>
</div>
</div>
</div>
</body>
</html>
The key CSS fragment are:
div.fields {
position: absolute;
top: 32px; bottom: 36px;
width: 99.8%;
overflow-y: scroll;
border-right:1px solid #d3d1d1;
border-left:1px solid #d3d1d1;
}
table.listhead {
position: fixed;
bottom: 0;
width: 100%;
}
This means that the .listhead table is always at the bottom of the screen, and when the div.fields gets too big for the space available, a vertical scroll bar appears.
The customer wants the table.listhead moved up to butt on to the div.fields so any spare space appears below it.
I have tried everything I can think of to achieve this, and failed. I wondered about wrapping div.fields with table.listhead, but I could not get anything to work.
Is it even possible?
Thanks. Ian
a little easier to understand now, thanks! :)
I would try playing around with position, I could move the bottom table up by doing:
table.listhead {
position:relative;
top: 285px;
}
so guys, if u test the code below, u can see that everything is alright, except if u size down the window, so the flash menu ( red div ) is going out of the page to the right.
well if the window is smaller then 900px, there is a HORIZONTAL scrollpane, so far so good, but it just scrolls the content of the page!
I want the upper part also to scroll, but only horizontal, cuz I want them to be fixed (stay on top of the site always)...
any suggestions? I've tried so many things from google, but no one of them was the right one 4 me...
thx & g.r. ace
html:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="div_page" align="center">
// page content goes here
</div>
<div id="div_menu">
<img src="img/logo.png" alt="<Logo>" style="position:absolute; top:0px; left:20px; width:225px; height:150px;">
<div id="div_flash"></div>
</div>
</body>
</html>
css:
#charset "utf-8";
body {
padding:0px;
margin:0px;
}
#div_menu {
position:fixed;
top:0px; right:0px; left:0px;
width:100%; height:40px;
min-width:800px;
overflow:visible;
background-image:url(img/menu.png);
background-position:top left;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 40px;
background-color:#333;
}
#div_flash {
position:absolute;
top:0px; left:250px;
width:500px; height:150px;
background-color:#F00;
}
#div_page {
position:absolute;
top:40px; right:0px;left:0px;
min-width:800px; min-height:500px;
}
As it seems to me, pure CSS can't solve this issue.
But adding a few lines of JQuery may help:
<script type="text/javascript">
$(window).scroll(function() {
$('#div_menu').css('top', $(this).scrollTop() + "px");
});
</script>
CSS position of #div_menu should be changed to absolute.
UPD:
In pure JS it would be:
<script type="text/javascript">
var div_menu = document.getElementById('div_menu');
window.onscroll = function (e) {
if (div_menu)
div_menu.style.top = window.pageYOffset + 'px';
}
</script>
There is a CSS-only solution possible with position:sticky , top:0
See this Fiddle : Link
$headerDiv = $('.header-wrapper');
$rowDiv = $('.row-wrapper');
$rowDiv.scroll(function(e) {
$headerDiv.css({
left: -$rowDiv[0].scrollLeft + 'px'
});
});
It will be helpful.
Hie, that is because you have made the widht of the content boxes/divs fixed; If you want to make them adjust as per the window size, then use percentages for width like: width: 60%; This is infact a responsive design. But still if you want your page header only to be scrolled, then make sure that you bound the content required in a div tag, whose width should be determined by page's width and apply overflow property for that tag; if you want only in horizontal direction, then use overflow-x:scroll and overflow-y hidden(since if one direction is specfied, other will be visible but with disabled mode), which is as shown:
<div style="width:60%;overflow-x:scroll; overflow-y:hidden;">
//your conetnt//including divs
</div>
The thing here is, whenever the width of the content in a div/any tag is more than the width of its outer div, then overflow happens; in this case, you can use overflow property, where you can set properties like : hidden, show, scroll, auto etc..
But try to avoid this, because responsive design is the next-generation markup language technique, where the widths(size) should be dependent on the browser size... :)
Happy coding.. :)
$("#body").scroll(function() {
scrolled = $("#body").scrollLeft();
$("#header").scrollLeft(scrolled);
});
.header {
background-color: red;
position: absolute;
top: 10px;
left: 8px;
width: 120px;
overflow: hidden;
}
.body {
overflow: scroll;
margin-top: 51px;
height: 100px;
width: 120px;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell1 {
border-top: 1px solid red;
border-right: 1px solid red;
background: #DDD;
height: 40px;
min-height: 40px;
width: 50px;
min-width: 50px;
}
.cellh {
border-top: 1px solid red;
border-right: 1px solid red;
background: yellow;
height: 40px;
width: 50px;
min-width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here a very simple solution
Uses Flex for the table formatting -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="header" class="row header">
<div class="cellh">1</div>
<div class="cellh">2</div>
<div class="cellh">3</div>
<div class="cellh ">4</div>
<div class="cellh">5</div>
</div>
<div id="body" class="col body">
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
</div>
</div>
</div>
</body>
</html>
When using HTML5, if you place a canvas/video/audio/svg element in a div, there will be a 4px gap below these elements. I tested the code below in almost all browsers which support HTML5, unfortunately they all have the same problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow"></canvas>
</div>
</body>
</html>
It's because they are inline elements with resizable height (most inline elements are not explicitly resizable). If you set them to display: block; the gap goes away. You can also set vertical-align: top; to achieve the same result.
Demo: http://jsfiddle.net/ThinkingStiff/F2LAK/
HTML:
<div class="container">
<canvas width="200" height="100"></canvas>
</div>
<div class="container">
<canvas id="block" width="200" height="100"></canvas>
</div>
CSS:
.container {
border: 1px solid blue;
}
canvas {
border: 1px solid red;
}
#block {
display: block;
}
Output:
For anyone wondering what the gap actually is:
As ThinkingStiff mentions, these are inline elements. That means that by default they will try to align themselves with the baseline of text. If you had some adjacent text, it would be easier to see what's happening.
The amount of space left below the svg is the size of a descender at the current font-size. This is why Teg's solution only works for the default font-size. The default font-size is 16px and 4px of that is dedicated to the descender. If you increase the font-size, the descender will also increase.
See the same piece of DOM using font-sizes of default (16px), 50px and 0px;
div{
border: 1px solid blue;
}
canvas{
border: 1px solid red;
}
#two{
font-size:50px;
}
#three{
font-size:0px;
}
<div id="one">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="two">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="three">
xy<canvas width="100" height="100"></canvas>
</div>
Margin -5px is working in Firefox.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow; margin-bottom:-5px"></canvas>
</div>
</body>
</html>
I'm trying to accomplish some atypical div behavior, so I'm not sure if this is possible.
I have three divs which sit next to one another horizontally: A, B, and C (from left to right). When the browser is resized, or if a user's browser window is too small, I would like div B to drop below div A, rather than the typical behavior where div C drops below div A.
The typical behavior is demonstrated by this code:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
</style>
</head>
<body>
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
<div class="box" style="height: 500px;">div c</div>
</body>
</html>
http://jsfiddle.net/P5xLx/
When I place divs A and B in one table-cell and div C in another, I can get div B to drop below div A. The only issue with this is that the left table-cell which contains the two divs does not collapse to the width of the two divs, and so there is still a gap between divs A and B and div C. This code shows that behavior:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
</style>
</head>
<body>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
</div>
<div style="display: table-cell;">
<div class="box" style="height: 500px;">div c</div>
</div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/cncgs/
Is there a way to make the left table-cell take the width of the two stacked divs, or maybe there is some other way to accomplish this which doesn't involve the table at all. Basically, I just need to find a way for div C to sit next to A and B once B drops below A. I'm trying to find a css solution and avoid using a javascript solution which, for example, calculates the width of A and B and compares it to the width of the left table-cell.
EDIT In the examples above, the widths are 200px, but in the actual implementation, that 200px is a variable width, depending on user-submitted content. I'm looking for a solution which can deal with variable-width columns.
How does this suit? Using media queries to change the width of the container for the first two divs:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<style type="text/css">
.box {
display: block;
margin: 4px;
background: #ccc;
width: 200px;
float:left;
}
.leftCol{width:416px; float:left}
#media screen and (max-width: 1000px){
.leftCol{width:208px;}
}
</style>
</head>
<body>
<div class="leftCol">
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
</div>
<div class="box" style="height: 500px;">div c</div>
</body>
</html>
Obviously the widths will vary depending on what you’re building.
This might be close to what you want
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
.left { float: left; }
.right {float: right;}
.wrap {max-width: 625px; overflow:auto;}
</style>
</head>
<body>
<div class="wrap">
<div class="box left" style="height: 200px;">div a</div>
<div class="box right" style="height: 500px;">div c</div>
<div class="box" style="height: 300px;">div b</div>
</div>
</body>
</html>
http://jsfiddle.net/MR6fj/
The only problem is div c stays all the way to the right of the wrap div all the time. This might be closer to what you wanted though.