See http://log85.no-ip.org/q100.html
Why the second block is in that position? //in firefox and chrome
Have you tryed to add this CSS :
canvas{display:block;width:100px;height:100px;}
Update: It only because the canvas have a default size bigger than expected in this case witch cause a weird but "normal" reaction of the HTML.
Regards,
Has something to do with the default width and heights of canvas. If you set them to 100%, it fixes the issue.
If you use the following code, it somewhat fixes issue.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>[ LoG85 ] - [ Duda CSS ]</title>
<style type="text/css">
body {background:#012;text-align:center}
.container {width:800px;margin:auto;border:1px solid blue}
.block {display:inline-block;border:1px solid green;width:320px;height:240px}
</style>
</head>
<body>
<div class="container">
<div class="block"></div> I removed <canvas></canvas> from here.
<div class="block"></div>
<div class="block"><canvas></canvas></div>
<div class="block"><canvas></canvas></div>
<div class="block"><canvas></canvas></div>
<div class="block"><canvas></canvas></div>
</div>
</body>
</html>
Note : I haven't tested it on Chrome, since I don't have Chrome installed but it works fine in IE and Firefox.
Related
I need to mix English text with and Japanese kanjis in the same text (paragrah).
I found on W3C (https://www.w3.org/TR/1999/WD-i18n-format-19990127/) the CSS property layout-grid-type, which when set to 'fixed' seems to do exactly what I need.
I tried the below code sample but I cannot get it work as expected, like this for example.
All characters (roman, kanjis and even symbols) must have the same bounding box width (whatever the spacing in between).
<head>
<style>
.example {
layout-grid-type: fixed;
}
</style>
</head>
<body>
<div class="example">layout-grid-typeこ子: fixed</div>
</body>
What am I misisng here ?
Thank you.
[edit] I realized the W3C doc above was a draft, seems was not released as it. Any aternative then for that presentation style ?
Thank you Kevin, the blog clarified it all !
This header is enough to get is all addressed : all chars and symbols have the same width now.
[EDIT]: This works in Firefox only ! Chars width is not same in other browsers...
Back to original question :(
<!doctype HTML>
<html lang="ja-jp" />
<head>
<meta charset="utf-8" />
<style>
.example {
text-transform: full-width;
white-space: pre;
}
</style>
</head>
<body>
<div class="example">layo↑t-grid-typeこ子: fixed</div>
<div class="example">layo ut-grid-typeこ子: fixed</div>
<div class="example">123456789012345678901234567890</div>
<div class="example"> 56789012345678901234567890</div>
<div class="example">↑↑←→↓↑↑56789012345678901234567890</div>
<div class="example">↑↑↑↑56789012345678901234567890</div>
</body>
I have a structure like this:
<body>
<div id="root">
<div>
<div>Not tis one</div>
<script>something</script>
<div>THIS DIV</div>
</div>
</div>
</body>
Somehow script + div didn't work for me, possibly due to some extensions that I have or a similar reason.
I'm trying to give uBlock Origin a target for a "One more story" or whatever overlay at the bottom of the page over here.
You can use either nth-child or last-child depending on whether your code structure changes.
And if you want to make sure it's not too generic, you can specify the parent elements. With the HTML that you have, the CSS could look something like this:
#root div div:last-child {
color: red;
}
Quick Example:
#root div div:last-child {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="root">
<div>
<div>Not this one</div>
<script>something</script>
<div>THIS DIV</div>
</div>
</div>
</body>
</html>
I'm trying to follow a Bootstrap tutorial but the first div I'm creating, that should be spanning the entire width of my browser/device, seems to be limited at ~1000 pixels. Any ideas as to why this is?
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing the Bootstrap 3.0 Grid System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
.col-xs-12 {
height: 100px;
background-color: blue;
color:white;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
</body>
</html>
Thanks in advance for any help.
If you're using the latest 3.1, you can use the container-fluid class instead of container like this..
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
3.1 full width: http://www.bootply.com/116382
For Bootstrap 3.0.x you'd need to use a custom container like this...
.container-full {
margin: 0 auto;
width: 100%;
}
3.0 full width: http://www.bootply.com/107715
The container class has a width specified depending on the media query. Your content is within this div so its width is based upon it.
You can see this in the dev tools in all major browsers, find that element and view the CSS styles/properties.
I'm trying to put some page breaks into a page with page-break-before. The site is built around Bootstrap 2.3.2; what I have is working fine in Mac Chrome and Firefox, but not Safari (7.0.1). A greatly stripped-down version of one of my pages (also available at http://sampleco.net/print.php):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Storyboards for Project 1</title>
<style>#import url("bootstrap.css");</style>
<style type='text/css'>
.vr_pagebreak {
page-break-before: always;
}
</style>
</head>
<body>
<div id="main_container" class="container">
<div class="row">
<section class="span12">
<h1 class="page-header">A general page header</h1>
<div class='vr_pagebreak'></div>
<h2>Scene 741: Alice places the call</h2>
<p>Something about the scene and image.</p>
<div class='vr_pagebreak'></div>
<h2>Scene 2314: Scene with no takes (2314)</h2>
<p>Something about the scene and image.</p>
</section>
</div>
</div>
</body>
</html>
(There are a few Drupalisms in here, left over from the original site, but not many at this point.) bootstrap.css is simply a copy of the Bootstrap 2.3.2 css file. If it's removed from this page, my page breaks work correctly in Safari (as well as in other browsers). FWIW, adding a bit of text to the vr_pagebreak divs has no effect, nor does putting the vr_pagebreak css into a #media print wrapper.
I've looked through the bootstrap code, and don't see anything that might be getting in the way. Does any of this ring a bell with anyone?
So: A bit of stylesheet hacking later, and it appears that the culprit is in line 255 of bootstrap.css:
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
In the demo code above, if you remove float: left, Safari properly does the requested page breaking. As a test, I can hack around it by adding to my page:
section.span12 {
float: inherit;
}
Odd... Thoughts on this are welcome.
Hi this is a simplified version of an issue I'm having with IE7. Basically the divs following the cleared div (green) don't behave as expected (in IE7). It works as expected in Safari, FF etc and IE8.
Does anybody have any advice for a fix. Thanks for any help :)
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#wrap {width:600px;height:1000px;background:black;}
.box {width:179px;height:180px; float:left; border-right:1px solid white;border-top:1px solid white;margin-right:20px;background:blue;}
.clear{clear:left;}.small{height:100px}.xsmall{height:50px}.first{background:red;}.second{background:yellow;}.third{background:pink;}
.fourth{background:green;}.fifth{background:aqua;}</style>
</head>
<body>
<div id="wrap">
<div class="box first"></div>
<div class="box small second"></div>
<div class="box xsmall third"></div>
<div class="box clear fourth "></div>
<div class="box fifth"></div>
<div class="box sixth"></div>
</div>
</body>
</html>
You can...
A) insert a "divider" clear element between 3rd and 4th which will do clear:both, span a height of 1px, take up the entire width, and then margin-top:-1px on 4, 5, 6 so there's no vertical 1px gap in between.
B) use inline-block instead of floats, like this: http://jsfiddle.net/gLcNm/16/
This requires markup change so there are no whitespace between your box divs, AND a css hack for IE which doesnt natively do inline-block without redeclaring inline for block levels.
C) make each of those box divs be contained by a "row" div:
<div class="row">
<box><box><box>
</div>
Then make row clear so it'll contain the boxes.