I'm trying to find a way to float certain items left on left-hand pages, and right and right-hand pages. Not sure where to look, since all I can find that seems related is #page :left/:right, but that seems to only apply to the page box and margins, not the page content.
Here's an example of what I want to do; The first float wants to go to the right, if it is on page 1, and the second float wants to go to the left, if it is on page 2, but to the right if it is on page 3.
The big boxes are just meant to demonstrate that there could be a lot (particularly an unknown) of stuff between the floats, and I can't predict which page might contain the float. (Thanks to Christian for making the assumption that I could, to point out the unstated assumption in my question, and I could make this clarifying edit.)
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>float left or right</title>
<link href=favicon-index.ico type=image/x-icon rel="shortcut icon">
<link href=/style.css type=text/css rel=stylesheet>
<style>
div { border: solid black 1px; }
</style>
</head>
<body>
<h1>float left or right</h1>
<div style="page-break-inside: autor;">
<div style="float: right;">
float 1 content
</div>
page 1 content
<div style="height: 8in; width: 1in;"></div>
unknown amount of content between floats
<div style="height: 8in; width: 1in;"></div>
<div style="float: right;">
float content somewhere later
</div>
<div>content winds up on page 2? 3? 4? 5?</div>
</div>
</body>
</html>
But how do I instruct the browser to do that?
N.B. At least in 2001, the "Complete Idiots Guide" series of books used this sort of odd/even dependent float for the sidebars entitled "Learning Links" (and maybe other such sidebars also). So there is precedent for this sort of style requirement, although I'm not trying to reproduce their books in HTML!
Here is the solution to your query
If you change your html structure as given in the code below then apply the following CSS, then your query will be satisfied
.pages div:nth-child(odd) {
text-align: right;
clear: both;
}
<html>
<head>
<meta charset=utf-8>
<title>float left or right</title>
<link href=favicon-index.ico type=image/x-icon rel="shortcut icon">
<link href=/style.css type=text/css rel=stylesheet>
<style>
div {
border: solid black 1px;
}
</style>
</head>
<body>
<h1>float left or right</h1>
<div class="pages">
<div id="page-1">page 1 content</div>
<div id="page-2">page 2 content</div>
<div id="page-3">page 3 content</div>
</div>
</body>
</html>
The structure is not changed much but it's almost similar to the one you provided
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 simple tag with a banner and a border at the bottom. How can I stop sliding these two elements on zooming? I was looking for a way to get the two elements intact on zoom in and out. Even after a few hours of search, i couldn't get the desired output. I tried this and one more post which says to change from px to em.
My html tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height= 160">
</div>
<div id="container-border">
</div>
</body>
css:
#header
{ padding:0 20px;
display:block;
margin:0 auto;
background: #D6D6D6 url(background.jpg) repeat-x;
height: 205px;
width: 1500px;
position: center;
}
#container-border {
width: 1538px;
height:900px;
margin-left:260px;
border-color: black;
border-width: 1px;
border-style: solid;
}
You first need to wrap the content in a containing DIV
HTML
<div class="site-content">
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height="160">
</div>
<div id="container-border">
</div>
</div>
Note the new DIV .site-content. This is where you would center the website content and control the website contents width.
Here's my codepen: https://codepen.io/arlcode/pen/aRpWZo
I would also recommend not using static width/height for mobile dynamic purpose. You're also going to want to use classes more then ID's because ID's are specific but classes allow you to manipulate multiple DIVs at once.
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.
I'm creating a web but having trouble with the alignment of divs. Cant fix this problem for a day now.
How do I force align the image(the text image)? It's inside the div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" charset="utf-8;" content="text/html" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<
And force the lower div to stay put when window resized or zoomed in/out.
If you seriously want to use a "text image" as a regular image, why not use it in a style sheet? So right now you have it in a div, so make that div a class or id like and make a style sheet where you have that image as a background image. Then you can use the position tactic to put the image wherever you want.
HTML:
<body>
<div class="textimage">
</div>
</body>
CSS:
.textimage{
width:500px;
height:500px;
background-image: url('..whatever.gif');
background-position: 50px 50px; //the first coordinate moves the image left to right // while the second coordinate moves it up and down
}
Try it
<div style="text-align: center">
<img style="width: 960px;" src="images/about us img.jpg"></img>
<div style="text-align: center">
<img src="images/about-cti.jpg"></img>
<br />ABOUT CTI
</div>
</div>
first issue is don't add specific margin like "margin-right:300px" when you want it to be resized or zoomed in/out.
and second issue is adding "float:right" to the image.
the below changes to the code will solve your problem.
<div style="width: 960px; margin:0 auto;" align="left">
<p>
<span style="float:left">
<br>
ABOUT CTI
</span>
<img src="images/about-cti.jpg"/>
</p>
</div>
There is something I guess I just don't understand about HTML css. When I use this code:
<!DOCTYPE html>
<html>
<head>
<title>STC </title>
<link href="bootstrap.css" rel="stylesheet">
<script src="bootstrap.js"></script>
<style type="text/css">
...
.loginHeader{
float: right;
padding: 5px;
}
.navLinks{
float: left;
padding: 5px;
}
</style>
</head>
<body>
<div class="topBar">
<div class="navLinks">
Home | About | Suggestions | Terms & Conditions
</div>
<div class="loginheader">
croberts | My Contracts | <a href='?logout'>Logout </a>
</div>
</div>
...
</body>
</html>
My float right doesn't work the way I want it to. But if at the very beginning of my file, before the doctype declaration, I add <style></style> then it works perfectly. So why would something like that have any affect on that particular style? Everything else looks the way it should, it's just the float right problem.
See the 'H' of the .loginheader{} in your css you have 'H' and in HTML you have 'h'
Corrected >> http://jsfiddle.net/4eDAm/
The reason that everything would look the way you would expect it to when adding content before your DOCTYPE is that you're throwing the document into Quirks Mode.