I would like to present the intermediate steps of a division the pen and paper method on a web page.
The result should like "written" on graph paper / checkered paper.
I could use a table, but WCAG says that's not the way.
I could use a fixed width font and <pre>, but what if I dislike fixed width fonts?
This image explains it better:
http://upload.wikimedia.org/wikipedia/commons/4/40/Division_Schriftlich.jpg
Vertical linage is important.
Here is an example using divs. And size of type of text will work with this. Please note you have to read the columns vertically to add text.
HTML
<div class="col">1<br>1<br></div>
<div class="col">3<br>2<br>1<br>1</div>
<div class="col">0<br>0<br>0<br>0</div>
<div class="col">7<br><br>7<br>5<br>2<br>1</div>
<div class="col"><br><br><br><br>0<br>5</div>
<div class="col"><br></div>
CSS
.col {
border: 1px solid black;
display: inline-block;
float: left;
}
Example with borders (to show vertical alignment) here
Example without borders here
A method using non-breakable spaces, for example:
1307<br>
120<br>
107<br>
105<br>
will not align properly. Therefore discarding horizontal alignment, I think vertical alignment is the best option.
Here is an example with the enhanced layout
Related
NOTE This is similar to this post, however there is a strict no-javascript requirement and the answer should be responsive (i.e there is not a fixed number of columns).
I would like to style several fixed width, variable height boxes using no javascript such that they form a kind of fluid grid. This jsfiddle yields the picture below. This is essentially just the following css:
div {
float: left;
margin: 1em;
border: 1px solid #999;
width: 150px;
}
I'd like for the only vertical empty space to be the margins. In terms of the screenshot above, I'd like for the tops of 5 and 6 to move upwards to 1em from the bottom of 1 and 2, respectively.
it's not possible by using pure CSS because any how you have to know the current position of div so if you really wanna do this then you have to re position the <div> either using " margin-top " property of css or using jQuery like these jqueryhouse.com/jquery-grid-plugins
I'm a new developer trying to get a bootstrap site up and running. Of course, I have encountered typical newbie problems with vertical alignment. I thought that my problems would be solved (at least for the case of vertical centering) by adding a class .vcenter to my .row elements. The .vcenter class (basically) has the display: flex and align-items: center property/value pairs. This idea came from an excellent SO answer on vertical alignment by Hashem Qolami.
HOWEVER, when I resize the browser window, the grid columns do not stack like they should, even when I apply the .col-xs-12 class to each column. Instead, if the window gets small enough, the columns overlap in a very ugly way. Here is a bootply with the relevant html/css. To see what I'm talking about, navigate to the bootply linked above and click on the phone icon to open a mobile sized screen. If you shrink the window down small enough there's an ugly overlap of the columns. More importantly, the columns should be stacking (as you can see if you turn off the .vcenter class).
SO THE QUESTION IS can I use flexboxes and the bootstrap grid system at the same time or is there some inherent lack of compatibility between the two for this particular case? I suppose possible solutions would be to turn off the display: flex property for mobile screens or to use inline-block for vertical alignment, but I'm looking for a more fundamental theoretical explanation of what's going on here.
Here's the code from the bootply:
HTML
<!DOCTYPE html>
<html>
<head><!-- bootstrap css automatically included by bootply --></head>
<body>
<div class="container">
<div class="row vcenter">
<div class="col-xs-12 col-md-5 bluebox">
<h1>Big Blue Box</h1>
</div>
<div class="col-xs-12 col-md-7 redbox">
<h1>Big Red Box</h1>
</div>
</div>
</div>
</body>
</html>
CSS
/* CSS used here will be applied after bootstrap.css */
.bluebox {
color: #FFF;
background-color: blue;
}
.redbox {
color: #FFF;
background-color: red;
}
/* FLEXBOX CLASSES */
.vcenter {
min-height: 100%; /* Fallback for vh unit */
min-height: 100vh;
display: flex;
align-items: center;
/* Bootply includes properties for cross-browser compatibility */
}
You put what you want on larger viewports in a min-width media query.
http://www.bootply.com/p4ndb1MiZK
Remove the col-xs-12, not necessary, all things are full width under the last column class so anything under col-md if there is no other class on it is full width with the same padding.
What's going on here is that if you put styles outside media queries they are for all viewport sizes, if you put the flexbox inside a min-width it's for that media query and up until another media query comes after that with another value, if there is one.
Hashem Qolami is a rock star and his code is always solid but flex is for modern browsers, if you intend to have it look decent on IE 8, then use display:table and display:table-cell.
Note: I didn't indent your CSS, but when styles are inside a media query they are indented.
I have a responsive image grid background in my website.
All its working fine with perfectly square images but when one image is for example 1px height bigger, the grid breaks.
Example OK:
[H][H][H][H][H][H]
[H][H][H][H][H][H]
[H][H][H][H][H][H]
Example FAIL
[H][H][H][H][H][H]
[H][H][H][A][H][H]
[H][H]
[H][H][H][H][H][H]
I dont want to use mansory o other plugins, this is my code:
HTML
<div class="resp pull-left">
<img class="img-responsive indexUser" src="image.jpg">
</div>
CSS
.resp{
width:10%;
height:10%;
}
.resp img{
width:100%;
}
Im using Bootstrap 3. Is it possible to do it?
EDIT WITH MORE INFORMATION
I want to put only square pictures in order, sorry, without grid. The image containers are floating. This is the screenshot with the problem:
Is responsive and I need to use % in with to adjust perfectly fullscreen allways
There are two things you can try here that might answer your question. Of course, without seeing your code it's very hard to advise in a more in-depth fashion.
If you're using Boostratp, why not wrap each row of images in a row-fluid container and use it's grid system? This will at least ensure that you don't get the dirty float bug, although it also means that you'll get a little extra space underneath the child elements of that one taller one.
Or, set the parent anchor's height and set overflow: hidden. This will essentially cut off the bottom edge of the taller image, although you would have to work through your break points.
As a code example of point two above:
.resp a{
display: block;
max-height: 300px;
overflow: hidden;
}
Bear in mind that images in Bootstrap have max-width: 100% set to them automatically so they will always flow to the width of the container if wide enough.
You will probably need to provide a height and maybe even set overflow:hidden. Please provide more markup if you want a better answer.
This is one linked image in a div, not a grid:
<div class="resp pull-left">
<img class="img-responsive indexUser" src="image.jpg">
</div>
<figure><img src="images/edu.jpg"></figure>
figure img {
width: 100%;
}
http://www.fccorp.us/index.php
The vertical column to the left is my site menu system. The column is a div with a height:100%, and the different details are div's laid over it.
The buttons are DIV's with blank buttons as backgrounds, with links on them. I have two different size buttons, the big one 60px tall and the small one 30px. Using CSS can I get the links to be centered vertically regardless of the height of the button's DIV?
I've looked here and used a few CSS sites & Android Apps. The site here suggests I can't, but I can't understand why the CSS group would not create a vertically centering function since it seems so needed.
Am I just missing something or am I really trying to get something that isn't available with CSS?
Based off your site, you can use line-height to adjust the vertical positioning of the text.
Try applying this to your 30px tall links:
line-height: 30px;
And this for the 60px tall:
line-height: 60px;
Additionally, you should not be nesting <div> tags within <a> tags.
Use this:
.menubuttonthick{line-height:60px;}
.menubuttonthin{line-height:30px;}
That will center all of your links.
On another note, currently you have the following structure:
<a href="#">
<div>text</div>
</a>
That is invalid HTML. I'm not a "HTML must be valid at all times" type of guy, but when you can fix it that easily, I think it wouldn't hurt making it valid. You should use the following:
<div>
text
</div>
Add this to your CSS. It will work regardless of the height of your buttons:
.menubar a div {
display: table-cell;
vertical-align: middle;
}
I'm having a very hard time trying to come up with html/css for a layout to suite the following:
Where the left area is a static menu. The right area is dynamic content, generated using a call to ASP.Net's RenderBody method. You may not believe it, but I have been trying to figure this out for hours. I keep getting either the right section ending up underneath the left section taking 100% of the width or not displaying at all, with Chrome's object inspector saying its 0 pixels wide.
I feel like a complete idiot as this seems as if it should be easy as pie. Could I please get some help?
There's several ways to go about this. Here's one not particularly fancy but straight-up way to go about it:
<body>
<div id="menu">MENU</div>
<div id="content"> content <br /> content <br /> content </div>
</body>
CSS:
div { border: 2px solid black; } /* demo purposes */
#menu {
float: left;
width: 150px;
}
#content {
margin-left: 154px; /* menu width + (2 x menu.border-width) */
}
See this jsfiddle for a working sample.
This solution has the added benefit that your content region will take up exactly 100% of the remaining width of its parent:
<div class="parent">
<div class="content">blah...</div>
<div class="left-menu">blah...</div>
</div>
CSS:
.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
.left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }
Excellent tutorial on fluid layouts: http://www.alistapart.com/articles/holygrail
Works in IE7 and newer, Safari/Chrome/Opera/Firefox...
The best way to do this is by using the already considered safe to use box-sizing property.
Take a look at the tinkerbin -> http://tinkerbin.com/AcJjYk0r
It works as you want it to. Fixed width for the menu, percentage based width for the content area.
Then...
...if you want the background-colors to expand to the highest of the heights between the two boxes (remember, one times the menu can be higher than the content box, and vice-versa), then the only way to go about it (no javascript) is to use a background image and place it below the two boxes. With css3 gradients (safe to use too) it's pretty easy. Take a look:
http://tinkerbin.com/3ETH28Oq