The HTML/CSS below works in recent browsers, but not in CF9's cfdocument. Anyone with ideas?
I would like to use the inline-block property in cfdocument, if I can. Or perhaps there is an alternative to render similar results?
WHAT DO I KNOW?
I am aware that CF's cfdocument supports a limited set of CSS properties (CSS1/CSS2). The CF documentation says it supports the "display" CSS property. However, it doesn't identify what values are supported. I have included the Expected Output and some Example Code.
EXPECTED OUTPUT (See image below)
EXAMPLE CODE
<cfdocument format="PDF" pagetype="letter">
<!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>
<title>CSS Demo: Display Property (block, inline, inline-block)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="margin: 0; padding: 0">
<style>
.container { margin-left: 2em; width: 35em; border: none; }
div { margin: 1em 0; border: solid 1px red; }
p { margin: 1em 0; border: dotted 2px blue; }
div#one p { display: block; width: 6em; text-align: center; }
div#two p { display: inline; width: 6em; text-align: center; }
div#three p { display: inline-block; width: 6em; text-align: center; }
</style>
<div class="container">
<div id="one">
<strong>TEST 1: block</strong> This text is within block-level level element (DIV).
<p>Here's a block-level paragraph (P).</p>
Here's some additional text still inside a block-level elment.
</div>
<div id="two">
<strong>TEST 2: inline</strong> This text is within block-level level element (DIV).
<p>Here's an inline paragraph (P).</p>
Here's some additional text still inside a block-level element.
</div>
<div id="three">
<strong>TEST 3: inline-block</strong> This text is within block-level level element (DIV).
<p>Here's an inline-block paragraph (P).</p>
Here's some additional text still inside a block-level element.
</div>
</div>
</body>
</html>
</cfdocument>
You may try float instead display : follow link
.container { margin-left: 2em; width: 35em; border: none; }
div { margin: 1em 0; border: solid 1px red; }
p { margin: 1em 0; border: dotted 2px blue; }
div#one p { float: right; width: 6em; text-align: center; }
div#two p { float: right; width: 6em; text-align: center; }
div#three p { float:right; width: 6em; text-align: center; }
.clear {clear:both; border:0px}
Related
I can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
I have a square div (called "square") and trying to put another div ("caption") inside the "square". But the caption goes outside the square boundaries! How to cut its size to the exact boundaries of the parent div?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #000000;
}
a {
text-decoration: none;
color: #FFFFFF;
}
div.square {
background-color: #1BA1E2;
display: inline-block;
width: 44px;
height: 44px;
margin: 0 6px 0 9px;
}
div.caption {
display: inline-block;
margin: 15px 0 0 3px;
padding: 0;
color: #FFFFFF;
font-size: 24px;
}
span.description {
display: inline-block;
vertical-align: bottom;
font-size: 18px;
}
</style>
</head>
<body>
<p>
<a href="page">
<div class="square">
<div class="caption">
Caption
</div>
</div>
<span class="description">
Description
</span>
</a>
</p>
</body>
</html>
In this case, Caption should be cut to Cap+ 1/2t inside the blue box (something like WP7 style). And a description alongside.
Put overflow:hidden in the styles for div.square. This will cause the caption to cut off at the boundaries of the box.
Running example
Hopefully the title of my question was clear enough.
Here's a really simple version of my CSS Combo Box. I think I'm just missing something minor and hope you can help with it. Basically I have a container Div, then I have a dropdown Div that holds the floated button on the right. Inside this dropdown Div I also have a Menu Div that is hidden until the user hovers the floated button Div.
I can get it to work by hovering over the dropdown Div since the menu Div is a child of it HOWEVER, I wanted to be able to hover over the button Div which is the first child of dropdown Div and display menu Div, which is the second child of dropdown div and not of button div.
Is there a way to accomplish this?
<!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" lang="en">
<head>
<style type="text/css">
#container {
position: relative;
background-color: #999999;
height: 31px;
width: 200px;
}
#container #dropdown {
background-color: #999999;
height: 31px;
width: 200px;
}
#container #dropdown #button {
float: right;
background: #555555 url('assets/img/ddw.png') no-repeat center;
height: 25px;
width: 25px;
margin-top: 3px;
margin-right: 3px;
}
#container #dropdown #button:hover #menu {
display: block;
float: right;
background: #555555 url('assets/img/ddw.png') no-repeat center;
height: 25px;
width: 25px;
margin-top: 3px;
margin-right: 3px;
}
#container #dropdown #menu {
display: none;
position: absolute;
background-color: #777777;
top: 32px;
height: 200px;
width: 200px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>
<div id="container">
<div id="dropdown">
<div id="button"></div>
<div id="menu">
Option 1
<br/>
Option 2
<br/>
Option 3
</div>
</div>
</div>
</body>
</html>
Since #menu comes after #button, you can use the adjacent sibling selector (+) instead of the descendant selector (space):
#container #dropdown #button:hover + #menu {
display: block;
float: right;
background: #555555 url('assets/img/ddw.png') no-repeat center;
height: 25px;
width: 25px;
margin-top: 3px;
margin-right: 3px;
}
Try placing your div#menu inside your div#button. Then, give div#menu the following properties: position: relative, display: block, and top: 25px. Give your button div an overflow: hidden. then, change your #container #dropdown #button:hover #menu selector to #container #dropdown #button:hover, and give it the following properties: width: auto, height: auto, overflow: visible. See this jsFiddle for a working example: http://jsfiddle.net/kzEek/
I believe this is a beginner's CSS question. I am utilizing the method described in http://www.xs4all.nl/~peterned/examples/csslayout1.html to fix a header to the top and a footer to the bottom.
What I'd like to achieve now is two columns inside the content div. A left one of 200px and a right one that takes up the rest of the width.
Unfortunately, I can't get the left and right divs to display correctly: they just don't grow vertically, and if I make the right div "width: 100%" it positions itself underneath the left one.
What is the trick to make the left and right div take up all the space within the content div?
The layout1.css is the original one. I just added two entries: #left and #right
layout1.css:
/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/
html,body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
background: gray;
font-family: arial, sans-serif;
font-size: small;
color: #666;
}
h1 {
font: 1.5em georgia, serif;
margin: 0.5em 0;
}
h2 {
font: 1.25em georgia, serif;
margin: 0 0 0.5em;
}
h1,h2,a {
color: orange;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 750px;
background: #f0f0f0;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
}
div#header p {
font-style: italic;
font-size: 1.1em;
margin: 0;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align: justify;
padding: 0 1em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background: #ddd;
border-top: 6px double gray;
}
div#footer p {
padding: 1em;
margin: 0;
}
// added the following:
div#left {
border: 1px solid red;
width: 200px;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
div#right {
border: 1px solid blue;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
layout.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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<link rel="stylesheet" type="text/css" href="layout1.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div id="content">
<div id="left">
left column
</div>
<div id="right">
right column
</div>
</div>
<div id="footer">
<p>
footer
</p>
</div>
</div>
</body>
Just in case somebody else stumbles onto this question like me. This is what I ended up doing.
<div class="left">
text
</div>
<div class="right">
text
</div>
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}
And for simpler cases (e.g., when you don't need border on the right element), you don't even have to specify left width twice: http://jsfiddle.net/j8T9v/1/
Another example, without setting up width at all. Left element takes as much space as it needs, right - the rest: http://jsfiddle.net/j8T9v/2/
The way I usually do it is by using the float and padding properties.
HTML:
<div id="leftCol">
content
</div>
<div id = "rightCol">
content
</div>
CSS:
#leftCol {
width: 200px;
}
#rightCol {
width: 100%;
float: right;
padding-left: 200px;
}
Should work.
So you are using float, and padding to put the div's side by side.
You might need:
position: absolute;
top: 0px;
right: 0px;
in your #rightCol CSS style (Not tested btw... from memory)
I'm trying to set up a simple horizontal tab structure for a page I'm working on, and I'm running into some trouble with floating div's combined with z-index.
Viewing the following code in a browser:
<!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>Untitled Document</title>
<style type="text/css">
#main { width: 500px; z-index: 1;}
.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 2; margin-right: -2px }
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="main">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
<br />
RIGHT
</div>
<div class="clear"></div>
</div>
</body>
</html>
Why doesn't the left div's orange border overlap the right div's green border?
z-index property will not apply to statically positioned elements. In order to use z-index the CSS must also include any position value other than static (ie relative, absolute, fixed).
.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; }
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 2; position: relative; }
Will give you what you want I think. I added position: relative; and changed the z-index of the .left to 3 (from 2) and changed the z-index of .right to 2 (from 3).
z-index has no effect on elements that are not positioned (eg position:absolute;)
Use the position property for element upper. Adding position:relative to .left.
Negative margin-left?
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; margin-left: -5px;}