Below is simple html page with an iframe. Inside this iframe are some fluid rows. The problem is now that the content in the iframe is stacked but it should be on the same row. There is enough space for "label" and "main content" to be on the same line.
Here is the code of the main page:
<!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" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="span12">
<iframe src="frame.html" width="500px"></iframe>
</div>
</div>
</body>
</html>
Here is the code of the iframe:
<!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" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="span6">label</div>
<div class="span6">main content</div>
</div>
<div class="row-fluid">
<div class="span6">label 1</div>
<div class="span6">main content 1</div>
</div>
</body>
</html>
The result is now:
label
main content
label 1
main content 1
instead of
label main content
label 1 main content 1
Does somebody know how can I achieve the desired result?
Width of your iframe is 500px, and if you are using Twitter Bootstrap css for responsive layout, media queries will break your layout for small screens. You can use current markup, but remove Twitter Bootstrap responsive CSS.
Below is example with bootstrap-responsive.css
http://jsfiddle.net/ebrPt/ (try to decrease width)
And here is example without responsive css
http://jsfiddle.net/ebrPt/1/ (try to decrease width)
Finally I ended up overriding some media tags of bootstrap when I'm in an iframe
#media screen and (max-width: 767px) {
.row-fluid [class*="span"] {
float: left !important;
width: 49% !important;
margin: 0 !important;
}
}
#media screen and (max-width: 480px) {
.row-fluid [class*="span"] {
float: none !important;
width: 100% !important;
margin: 0 !important;
}
}
Related
I want to block scroll in my pages
this is the html pages :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script src="frise.js"></script>
<link rel="STYLESHEET" type="text/css" href="style.css">
<script>
var a;
function start()
{
a = new frise("frisekk", 'Mon Nov 15 2014 19:25:00', 'lab', 600);
}
</script>
</head>
<body onload="start();">
<div id="blocantiscroll">
<div id="frisekk"> <br/> </div>
</div>
</body>
</html>
So I call my CSS in <div id="blocantiscroll">
but nothing happen, I have look on the web and this should work but it doesn't, the sroll is always active.
Is there a problem in my html page or in my CSS ?
my CSS :
blocantiscroll {
height: 100%;
overflow: hidden;
}
blocantiscroll is an ID so you need to use # in your selector:
#blocantiscroll {
height: 100%;
overflow: hidden;
}
Your current selector is looking for an element of type blocantiscroll which doesn't exist.
Further reading
Also, if you want #blocantiscroll to be 100% height of the window, you will need to set the below:
html, body {
height: 100%;
}
blocantiscroll is an ID..
so you need to specify # before "blocantiscroll"
give it as:
#blocantiscroll
Add this to your css
body {overflow: hidden;}
So this is probably a very minor adjustment that needs to be made to the HTML/CSS code but here is the issue I've been facing. My code for a general HTML page is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<link href="sites/css/style.css" rel="stylesheet" type="text/css" />
<title>My Page</title>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="main_content">
</div>
<div class="footer">Copyright © 2012-2013.</div>
</div>
</body>
</html>
The CSS for the .wrapper class is as follows:
.wrapper {
border: 1px solid #ddd;
margin-left: auto;
margin-right: auto;
width: 980px;
}
I finding that when I put content into any of the other DIVs that go on the page especially when using either float: left; or float: right; the border for the wrapper does not continue on down the page unless I use a class called:
.clearer {
clear: both;
}
and put a DIV:
<div class="clearer"></div>
at the bottom of every DIV that is floated. Is there something I'm not doing correctly here or is this a common issue?
Any help or advice appreciated!
Thanks!
Dave.
This is a common issue, which you can usually fix by adding overflow: auto to the #wrapper. If that doesn't work, your clearer solution is another often-used alternative.
First off I do not consider myself to be anything more than a hack at HTML/CSS. With that said , I am having a problem with the attached code in Chrome and Safari (Firefox and Opera work perfectly fine). The problem is clicking on one of the help icons in the center iframe should send the right iframe to the appropriate anchor, but it does not. I would like the help topics to move from topic to topic without a scroll bar.
index.html
<!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" content="text/html; charset=utf-8" />
<title>Lorem ipsum dolor</title>
<link href="apstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Body">
<div class="leftnav"><p>Something</p></div>
<div class="main"><iframe src="Setup.html" name="main" id="main" width="450" height="100%" frameborder="0"></iframe></div>
<div class="right"><iframe src="Help.html" name="help" id="help" width="235" height="100%" frameborder="0" scrolling="no"></iframe></div>
</div>
</body>
</html>
Setup.html
<!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" content="text/html; charset=utf-8" />
<link href="apstyle.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="options">
<p>Get Help #2
<a href="Help.html#help2" target="help">
<img src="helpicon16.png" alt="help2" class="help_icon"/>
</a>
</p>
<p>Get Help #3
<a href="Help.html#help3" target="help">
<img src="helpicon16.png" alt="help3" class="help_icon"/>
</a>
</p>
</div>
</body>
</html>
and the css
#charset "UTF-8";
.Body {
float : left;
clear : both;
width : 100%;
margin-top : 5px;
margin-bottom : 5px;
}
.leftnav {
float : left;
height : 500px;
width : 155px;
margin-left : 25px;
background-color : #eae6e3;
}
.main {
float : left;
height : 500px;
width : 445px;
margin-left : 5px;
}
.right {
clear : right;
float : left;
height : 500px;
width : 185px;
margin-left : 5px;
}
iframe.help {
overflow : hidden;
}
div.spacer {
height: 1000px;
}
Any help would be greatly appreciated
I suppose adding the Help.html might make this easier to replicate
Help.html
<!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" content="text/html; charset=UTF-8"/>
<title>Help</title>
<link href="apstyle.css" rel="stylesheet" />
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>
<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>
<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>
<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>
</div>
</body>
</html>
remove :
scrolling="no"
and it works for Chrome 21 on windows.
Edit
Still remove the scrolling="no" but change the html code for Help.html to this:
<!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" content="text/html; charset=UTF-8"/>
<title>Help</title>
<link href="apstyle.css" rel="stylesheet" />
<style>
html {
overflow:hidden;
}
</style>
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>
<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>
<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>
<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>
</div>
</body>
</html>
See here: testing.dpwebdev.co.uk/stackoverflow/anchors
If I have the following 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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
</head>
<body>
<div style="page-break-after: always; float: left;">hello</div>
<div style="page-break-after: always; float: left;">there</div>
<div style="page-break-after: always; float: left;">bilbo</div>
<div style="page-break-after: always; float: left;">baggins</div>
</body>
</html>
I want one word to be printed on each page, with a page break after each one. (This is simplified code - in my actual web page, the floats are important.)
Firefox prints this fine, but both IE and Safari print them all on one page, ignoring the page breaks. Is this a bug in those browsers? Is there a better way to do this?
Thanks.
It is the floats that are messing it up for printing.
Do you need the floats there for printing? or are floats only needed for the web?
Why I am asking is you can have different CSS classes for different medias (print, screen)
http://www.w3.org/TR/CSS2/media.html
So your float can be on the screen media - which will show only for web. While you will want your page break only to show for print media.
Here is an example using the media: (note when referencing CSS you can choose media via an attribute )
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
<style>
#media print {
.myDiv { page-break-after: always; }
}
#media screen {
.myDiv {float:left;}
}
</style>
</head>
<body>
<div class="myDiv">hello</div>
<div class="myDiv">there</div>
<div class="myDiv">bilbo</div>
<div class="myDiv">baggins</div>
</body>
</html>
Update:
Will this work for what you need? GIves you a 3x3 on each page when printing out. But on the screen it's a 3x6. Quick sample.
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
<style>
.break
{
page-break-after: right;
width:700px;
clear:both;
}
.myDiv {
float:left;
width:200px;
height:100px;
background-color:blue;
margin:5px;
}
}
</style>
</head>
<body>
<div class="break">
<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>
<div class="myDiv">4</div>
<div class="myDiv">5</div>
<div class="myDiv">6</div>
<div class="myDiv">7</div>
<div class="myDiv">8</div>
<div class="myDiv">9</div>
</div>
<div class="break">
<div class="myDiv">11</div>
<div class="myDiv">22</div>
<div class="myDiv">33</div>
<div class="myDiv">44</div>
<div class="myDiv">55</div>
<div class="myDiv">66</div>
<div class="myDiv">77</div>
<div class="myDiv">88</div>
<div class="myDiv">99</div>
</div>
</body>
</html>
I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html>
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
I said it was really simple. :)
Thank you,
Brett
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>
</body>
</html>
The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center;}
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
I added a 1px border to the div so that you could see what was happening more clearly.
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
Now you'll be able to see your 300 px div center on the page.
Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.
You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.
<html>
<head>
<title>Welcome</title>
<style>
#container {text-align:center;border:1px solid blue}
#pageContainer {width:300px; margin:0 auto; border:1px solid red}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="container">
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</div>
</body>
</html>
(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.
You probably want to change it to the following:
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center; }
#pageContainer {width:300px;margin:0 auto;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).
FOR BLUEPRINT USERS
This drove my nuts, until i found this post: problem with ie8 and blueprint
Long story short, in you html code change the
<!--[if IE]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
for
<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Regards
Alex
This works for me on IE6,7,8,FF 3.6.3:
#container
{
width:100%;
}
#centered
{
width:350px;
margin:0 auto;
}
and
<div id="container">
<div id="centered">content</div>
</div>