DIV tags disappears in 3.1
Hi
I have a report region in which I have following defined in the "Break Formatting" section:
<br>
"Display this text when printing report sums":<br>
<div id="FinalSum"><br>
<script type="text/javascript"><br>
var lastRow=html_CascadeUpTill('FinalSum','TR');<br>
lastRow.style.backgroundColor='#CCCC99'; <br>
lastRow.style.color='red';<br>
</script><br>
Totalt Personal Antal<br>
</div><br>
<br>
This formats the last last row of the report nicely in ApEx 3.0.1. But the exact same code in ApEx 3.1 doesn't work. When I look on the generated HTML source I can see that the DIV tags including the contained SCRIPT tags are gone(!). Because of that you only see the javascript code followed by "Totalt Personal Antal" on the last row.
Is this a bug in 3.1? Does anyone have workaround proposal?
kind regards // Frederic
I solved my self ;)
There is something strange with version 3.1 that removes some tags in the report breaking sections. I solved by it with this javascript:
function setBreakStyle(p_class, p_break, p_totalbreak, p_totalbg) {
var i, l_cell;
var l_table = getElementsByClass(p_class)[0];// the class of the table
for(i=0; i< l_table.rows.length; i++){
l_cell = l_table.rows.cells[0]
// Set styles for heading breaks
if ( $u_SubString(l_cell.innerHTML, p_break) ) { // The cell is found
$x_Style(l_cell, 'color', 'gray');
$x_Style(l_cell, 'textAlign', 'right');
$x_Style(l_cell, 'fontStyle', 'italic');
// Set styles for page break
if ( $u_SubString(l_cell.innerHTML, p_totalbreak) ) { // The cell is found
$x_Style(l_table.rows[i], 'backgroundColor', p_totalbg);
$x_Style(l_table.rows[i], 'color', 'red');
Similar Messages
-
DIV tags disappear when put over swf file background
I am working on a site which has a swf movie as a background
which fills the browser window(SWFobject). When I place DIV tags,
which reference a CSS id and contain swf files as well, over the
top (for absolute positioning, etc.) they disappear when previewed
in a browser . Is there a reason that the swfobject always takes on
top position in the browser? Do I need to change something in the
SWFoject javascript file, in the code or within either the CSS file
or the dreamweaver HTML code? Here is a link to a site that is very
similar to what I am working on.
http://www.pronghornclub.com
Any help would be most appreciated.All Active content on a page will always rise to the top, so
to speak,
including Flash, certain form elements, Java applets, and
Active X controls.
This means that each of these will poke through layers. There
is not a good
cross-browser/platform reliable way to solve this issue, but
if you can be
confident in your visitors using IE 5+ or NN6+, then you can
use the Flash
wmode parameter (however, Safari does not support this
properly!).
Adobe articles:
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_15523
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14201
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"jlrowedog" <[email protected]> wrote in
message
news:fb53q0$akk$[email protected]..
>I am working on a site which has a swf movie as a
background which fills
>the
> browser window(SWFobject). When I place DIV tags, which
reference a CSS
> id,
> over the top (for absolute positioning, etc.) they
disappear when
> previewed in
> a browser. Is there a reason that the swf file always
takes on top
> position in
> the browser? Do I need to change something in the
SWFoject javascript
> file, in
> the code or within either the CSS file or the
dreamweaver HTML code? Here
> is a
> link to a site that is very similar to what I am working
on.
>
>
http://www.pronghornclub.com
>
> Any help would be most appreciated.
>
>
> -
How to auto adjust the height of my div tag?
This is my website www.whistleandlisten.com
The white background is a div tag and whenever I add new content within the div tag I want it to auto adjust to extend the white div tag down as the page gets longer. I have tried css and set my height to auto but that makes it disappear. Right now I have to set it to a certain amount of pixels which gets annoying and sometimes I forget to after adding lots of content. PLEASE HELP.To have an extensible height element, you should not apply the height property as you have done starting at line 9 of songcss.css
#whitediv
position: absolute;
left: 50%;
margin-left: -490px;
top: 0px;
width: 950px;
height: 2900px;
z-index: 1;
background-color: #ffffff;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
color: #ffffff;
box-shadow: #ffffff;
overflow-x: visible;
overflow-y: visible; -
Green highlight when working with Fluid Grid Layout Div tags
What does the green highlight mean when working in Live view of a Fluid Grid Layout using Fluid Grid Layout Div Tags? Sometimes they show up, but sometimes they don't. I think it has something to do with the width setting but I can't figure out what the rule is or what the highlight indicates.
Dreamweaver CS6
Mac OSX 10.8.2
THANK YOU!!Brian McNay wrote:
the green highlight sometimes disappears when modifying the width property of the div. My question is what does this signify?
If you change the width of a div manually in Code view or in the CSS styles panel, Dreamweaver ceases to treat it as a fluid grid layout div, and the green highlighting disappears.
To be treated as a fluid grid layout div, the width must be adjusted by dragging the handles in Design view. Dreamweaver snaps fluid grid layout divs to the grid that is defined when you first create the page, and it calculates the width and margins to many decimal places. If the width and/or margin doesn't match the grid dimensions, the highlighting disappears, and the div is treated as any other div.
It's not a bug, nor are fluid grid layout divs any different from normal ones. The idea of the grid and the highlighting is to allow you to create a responsive layout according to a hypothetical grid. Once you've created the basic structure, it's best to turn off the visual guides anyway.
Personally, I think that the implementation of fluid grid layouts in Dreamweaver CS6 leaves a lot to be desired. The basic idea is good, but it's difficult to use if you don't have a solid understanding of CSS. -
Hello,
I am trying to create an editable background color within the
div tag of the top portion of my webpage. I have a banner image and
I would like not only it, but also its associated bkgd color to be
easily changeable from page to page. So I am trying to have these
appear within an editable region (the div) of my template. It looks
like it works in design view, but when I preview it in a browser,
although the image shows up ok, the background color disappears
here is the code in question:
<!-- TemplateBeginEditable name="bannerimg" -->
<div id="header" bgcolor="6999bc">
<img src="../imgs/banr_genl_6999bc.gif" alt="banner
image" width="687" height="118" />
<!-- end #header --></div>
<!-- TemplateEndEditable -->
Any suggestions?
Many thanks!
Alan> Maybe how
> I have typed the code for this tag is where I have
erred...?
I would think so, yes.
> I think I may have found a workaround though - I created
a separate
> editable
> region in the head of the template and placed the
bgcolor reference there,
> within opening and closing style tags.. that seems to
work although its
> not
> quite as tidy.
It's actually much more tidy, and it's how you should always
do such things.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"alan kirker" <[email protected]> wrote in
message
news:fc2402$ltt$[email protected]..
> Thanks Murray,
> That is what I would expect as well and its what I
want... however, when I
> apply the template with this code to a page, and then
test it by browsing
> it
> locally, the image appears, but the bkgd color does
not... And although
> its
> technically "editable" for the reason you point out,
changes made to the
> hex
> value still yield no color behind the image. Even when I
add the "#" or
> try
> using "background-color" instead of "bgcolor" as the
attribute name. Maybe
> how
> I have typed the code for this tag is where I have
erred...?
>
> I think I may have found a workaround though - I created
a separate
> editable
> region in the head of the template and placed the
bgcolor reference there,
> within opening and closing style tags.. that seems to
work although its
> not
> quite as tidy.
>
> many thanks for your help... if you have additional
suggestions, I am all
> ears,
> Alan
> -
Hidden and visible div tags, transparence and links - HELP....
I am showing different products in div tags that are controlled by simple javascript. I would like to add text links to open a new div tag about the related products, but also hide the original div tag that the link is placed on.
Please check this page out
http://www.aestheticgroup.fr/New/Inex/Inex_lipoAspirationR.html
and then click on the image for
CANULES D’ASPIRATION PROXIMALE
and then click on the text link:
manche BD 300 10
You will understand my problem. I'm trying to make this div tag (Canule d’aspiration Proximale) disappear instead of having them stack one on top of the other.
Do you have an idea of how I can add multiple functions to one click (close the div tag and open a new one at the same time)?
Thank you for your help!
SooooophieHi Sophie,
I downloaded your site and yes, there was a typo in the script...
The script should read...
var curOverlay = null;
function overlay( aOly) {
var el = document.getElementById(aOly);
if (curOverlay) curOverlay.style.visibility = "hidden"; // THIS LINE HAS CHANGED
if (curOverlay != el) {
el.style.visibility = "visible";
curOverlay = el;
else
curOverlay = null;
I also realize that wherever you call an overlayXX function that you are currently using, you'll need to replace it with a call to overlay('overlayXX')
I needed to add this to your onclick attribute for the close button... I tested this and it seems to work for the existing page.
here are the snippets from your page that I changed
<div id="Groups02"><a href='#' onclick='overlay("overlay02")' onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','images/LipoReutilisable02B.jpg',1)"><img src="images/LipoReutilisable02.jpg" name="Image21" width="170" height="120" border="0" id="Image21" /></a>
<p>CANULES D’ASPIRATION <br />
UN ORIFICE</p>
</div>
and for the close button:
<div id="close02"><a href='#' onclick='overlay("overlay02")' onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','images/close.jpg',1)"><img src="images/close02.jpg" name="Image43" width="72" height="20" border="0" id="Image43" /></a></div>
You'll need to change this wherever you reference each overlay, in this case, it was for overlay02. The good news is you'll only need this function and not one function per overlay as you have now.
As I said in the previous post, I am off on vacation for a little over a week.
Good Luck! -
What's wrong with my div tag / site won't center....
Hi,
I am re-designing a website and I cannot get it to center. I created a div tag and id it "wrapper" and created a css rule. I am sure its a simple mistake, but I cannot figure it out.....
Here is the CSS rules...
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
margin: 0px;
padding: 0px;
#wrapper{
margin: 0, auto;
background-color: #9B9E6B;
ul {
list-style: none;
table#content1{
background-color: #00C;
background-image: url(_images/content_bgrnd.png);
background-repeat: no-repeat;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 20px;
text-align: center;
padding: 8px;
Here is the code for the site......
<!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>Kiahuna 104</title>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//-->
</script>
<link href="104.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('_images/buttinside1.jpg','_images/buttproperty1.jpg','_images/b uttactivities1.jpg','_images/buttdining1.jpg','_images/buttcontacts1.jpg','_images/home_lg 1.png','_images/home_lg2.png','_images/home_lg3.png','_images/home_lg4.png','_images/home_ lg5.png','_images/home_lg6.png','_images/home_lg7.png','_images/home_lg8.png')">
<div id="wrapper">
<!--Header-->
<table id="header">
<div class="header"><img src="_images/newLOGO.jpg" alt="Kiahuna 104" width="1000"/>
</div>
<!--Navigation table-->
<table width="1000" bgcolor="000">
<tr>
<td width="40"> </td>
<td width="150"><a href="inside.htm"><img src="_images/butthome1.jpg" alt="home1" name="home1" id="home1" /></a></td>
<td width="150"><img src="_images/buttinside2.jpg" alt="inside2" name="inside2" id="inside2" onmouseover="MM_swapImage('inside2','','_images/buttinside1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="150"><a href="property.htm"><img src="_images/buttproperty2.jpg" alt="property2" name="property2" id="property2" onmouseover="MM_swapImage('property2','','_images/buttproperty1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="150"><a href="activities.htm"><img src="_images/buttactivities2.jpg" alt="activities2" name="act2" id="act2" onmouseover="MM_swapImage('act2','','_images/buttactivities1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="150"><a href="dining.htm"><img src="_images/buttdining2.jpg" alt="dining2" name="dining2" id="dining2" onmouseover="MM_swapImage('dining2','','_images/buttdining1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="150"><a href="contact.htm"><img src="_images/buttcontacts2.jpg" alt="contact2" name="contact2" id="contact2" onmouseover="MM_swapImage('contact2','','_images/buttcontacts1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
</table>
<!--Start of content1 table- height = 371-->
<table id="content1" table width="1000" height="371">
<tr>
<td width="34"> </td>
<td width="897"><p>blah blah blah.</p>
<p class="center2">NEW: IN-CONDO WASHER & DRYER - COMPLETELY NEW FURNITURE</p></td>
<td width="53"> </td>
</tr>
</table>
</body>
</html>I tried to assign a width in both the page and CSS and it still doesn't center. Here is a link to the site and the CSS....
http://taffyproductions.com/test/
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
margin: 0px;
padding: 0px;
#wrapper{
margin: 0, auto;
background-color: #000;
ul {
list-style: none;
table#content1{
background-color: #00C;
background-image: url(_images/content_bgrnd.png);
background-repeat: no-repeat;
font-size: 16px;
font-family: Papyrus, Arial, "Helvetica Bold", serif;
font-size: 22px;
text-align: center;
padding: 8px;
table#imagegallery{
background-image: url(_images/imageGallery_bckgrnd.png);
background-repeat: no-repeat;
#imagegallery a img{
padding: 0px;
margin: 2px;
border: 2px solid #000;
#imagegallery a:hover img {
border: 2px solid #C00;
table#footer{
background-image: url(_images/footer_bckgrnd.png);
background-repeat: no-repeat; -
Problem with Flash in a Hide/Show Div Tag
What is the best way to handle Flash files on an HTML page
within a <div> tag you hide and show (via javascript). It
seems to reload when you hide and then show the <div> tag
when using display: block.
Positioning instead (move offscreen)?
Visibility?
Other?I would say off-screen is going to give you the best
cross-platform performance. I've found visibility show/hide
prevents the swf from working in IE while hidden much like you
alluded to. Of course in mozilla browsers hide doesn't behave the
same way. -
How is it that I can no longer control the position and size of a Div in design view? There appears to be no way to resize or move the div tag.I am using CS5
Do you mean Divs or AP Divs?
-
Dreamweaver crashes when i drag my div tags in design view
Hi
Ive just encountered a problem with dreamweaver cs4 at work.
I was creating a website using CSS and creating multiple div tags to house my images around the page. I normally position them using the CSS style sheet, but on this occasion, I grabbed the div tag whilst in design view and dragged it manually, and dreamweaver crashed! See image below It does so everytime I try the same thing again. Ive even restarted my PC. Anyone know why?I've not see this before, so can't say why it would be happening. Would the pc be low on resources? but then again you say it happened even after a restart of the pc.
Maybe you could try the file cache and the personal configuration folder fix to see if it fixes any issues.
http://forums.adobe.com/thread/417116#cache
PS: While I'm at it, it would be wrong for me to point out that using AP divs is not the optimum way to create a layout.... unless you know the repercussions of using them.
Here's why: (from the Dreamweaver FAQ)
http://forums.adobe.com/thread/477969 -
Can you change the default code that targets a new window to change the content in a div tag instead
I created a database for store locations. I was able to display the list of stores. Here though I don't want the list to show the number in front of it... I still need to find the CSS to edit my results for this one. However, more importantly, I don't want to open my results in a new window, I want to be able to target a DIV tag instead.
This is the code that is created to display the list of stores.
{module_webapps,5665,a,,,_blank,,50,,1}
Currently it opens a blank window. I'd like to target a div tag on the right of the list area where the store info can appear.
Perhaps the gurus at adobe can upgrade this feature? Target DIVs instead of new or blank windows, or using frames. Below is the screen of the links created from the DB.
Below is the blank window that it opens.
Would like to make it open in a div to the right of the list. Not sure how to change to core code that was created to make that change.I'm doing something wrong. I have the list showing the stores in CA
<div class="flip" id="woodcontainer" style="width: 160px; height: 23px;">
<h1>CALIFORNIA</h1>
</div>
<div class="panel">
<script>
$("#infochange").load("{module_webapps,5665,c,41140}"); /* this creates the list of stores in CA where #infochange is the DIV I am targeting.
</script>
</div>
<br />
The code for the DIV where I want the details to load.
<div id="infochange"></div>
This doesn't make sense because I need to have something in the DIV as a holder of some sort? -
How to Include More Than One Font and Font Color Within a Fluid Grid Div Tag?
Using CSS code, I can make all the words within a fluid grid div tag the same font, font size, and font color, but how do I make a few of the words different?
You can style the basic text and heading selectors with CSS:
p { }
h1 { }
h2 { }
h3 { }
h4 { }
etc...
And you can make classes:
.red {color:red}
.highlight {background-color:yellow}
Then apply classes to your text or sections of it using the HTML properties panel.
<div>
<p>This is a default paragraph style.</p>
<p class="red">This is red.</p>
<p class="highlight">This is highlighted.</p>
<p>Default style with <span class="red highlight">red, highlighted text</span> and normal text.</p>
</div>
Incidentally, this will work in any layout.
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
Nancy O. -
Dreamweaver cs5.5 - div tags won't float next to eachother
I have being trying to get 2 div tags to float next to eachother for hours! I've been messing with the float and messing with margins, but what ever i do the div is always somewhat under my other div tag. I want them completely side by side. I have tried changing the top and bottom margins but that doesn't work either. how can i get them side by side? One is called 'textbox' and the other 'imagewrapper'. The code is:
<!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>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />
<!--embedded styles for this page only-->
<style type="text/css">
body {
margin:0;
padding:0;
font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
#wrapper {
width: 1064px;
margin: 0 auto; /**with width, this centers page on screen**/
background: #FFF;
text-align:center;
/**this styles image container**/
#thumbs p {
float:center;
width: 50px;
height: 75px;
/**this styles caption text**/
font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
color: #666;
text-align:center;
border: 1px solid silver;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 18px;
margin-left: 5px;
/**recommend using same size images**/
#thumbs img {
width: 50px; /**adjust width to photo**/
height: 75px; /**adjust height to photo**/
/**CSS3 drop shadows**/
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
-khtml-box-shadow: 5px 5px 5px #666;
box-shadow: 5px 5px 5px #666;
/**float clearing**/
#thumbs:after{
display:block;
visibility:hidden;
height:0;
font-size:0;
content: " ";
clear: left;
#wrapper #thumbs #imagewrapper {
height: 362px;
width: 280px;
float: right;
margin-right: 720px;
#wrapper #thumbs #imagewrapper img {
height: 362px;
width: 280px;
#wrapper #textbox {
float: right;
height: 300px;
width: 600px;
margin-right: 70px;
.clearing {
clear:left;
height:px;
width: 100%;
</style>
</head>
<body>
<div id="wrapper">
<img src="product and website photos/header.png" width="1064" height="116" alt="header" />
<!--begin menu -->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#home.html">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>
<li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>
<li><a href="bwt.html">Tops</a></li>
<li><a href="bws.html">Skirts/Shorts</a></li>
<li><a href="bwl.html">Trousers/Leggings</a></li>
<li><a href="bwa.html">Accessories</a></li>
<li><a href="bwd.html">Dresses</a></li></ul></li>
<li><a href="#" class="MenuBarItemSubmenu">Men</a>
<ul>
<li><a href="#">Tops</a></li>
<li><a href="#">Bottoms</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">Semi-Unique</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a><ul>
<li><a href="t-shirt shop.html">Men</a></li>
<li><a href="t-shirt shop.html">Women</a></li>
<li><a href="t-shirt shop.html">Unique</a></li>
</ul></li>
<li><a href="clearance.html">Clearance</a></li>
<li><a href="#">About</a></li>
</ul>
<h2> </h2>
<div id="textbox"></div>
<div id="thumbs">
<div id="imagewrapper"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!--end wrapper --></div>
<hr align="center" size="10" noshade="noshade" class="clearing" color="#999999" />
<div align="left">© 2012 your footer text goes here</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>If you want to position 2 divs - one on left and other on right, the float for your left div should say float: left; and for the one on the right the CSS should say float:right;
In your code, I see you want imagewrapper to come on right and textbox to come on left. But your float for BOTH these say right. This is where the issue lies.
You can combine float:left and float:right to achieve side by side divs provided the overall width (container width+padding+margin) of both divs is less than or equal to the width of the wrapper div.
In the OP's example:
#wrapper = 1064+0+0 = 1064px
#textbox + #imagewrapper = 600+70+280+720 = 1670px = float drop -
Floating div tags - won't align
Hi there,
I am trying to align 2 div tags next to one another in the latest version of dreamweaver cc. At the moment I have one floating to the left 60% wide and on the the right 40% wide. The second div tag sits on the next line down to the right but I can't seem to get them the sit directly next to one another. Please help Thank youCopy & paste this code into a new, blank document. SaveAs test.html and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
body {
padding: 0;
width: 90%; /**adjust width as required**/
margin: 0 auto; /**this is centered**/
background: #F5DD83;
color: #2294AE;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
box-shadow: 2px 2px 4px #333;
header {
margin: 0;
padding: 0 1%;
width: 100%;
background: #B00202;
color: #FFF;
header h1, header h2 {
display: inline;
color: #F5DD83;
padding: 0 3%;
section {
margin: 0;
padding: 0;
background: #FFF;
overflow: hidden; /**float containment**/
article {
margin: 0;
padding: 0 2%;
float: left;
article.left { width: 60%; }
article.right {
border-left: 1px solid #366;
width: 40%;
footer {
background: #B00202;
clear: left;
display: block;
padding: 2%;
color: #FFF;
</style>
</head>
<body>
<!--begin header-->
<header>
<h1>Sitename</h1>
<h2>Some pithy slogan...</h2>
<nav>Horizontal menu goes here...</nav>
</header>
<!--begin main content-->
<section>
<article class="left"> <h3>Article Left 60% wide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<!--end left article-->
</article>
<!--begin right article-->
<article class="right"> <h3>Article Right 40% wide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
</article>
<!--begin footer-->
<footer> <small>© 2014 Your Site Name. All rights reserved</small> </footer>
</section>
</body>
</html>
Nancy O. -
How do you make a div tag only as wide as the content that is
inside of it, rather than the width of the cell that surrounds
it?<div style="width:200px; float:left">
Would give you a div 200px wide and floated to the left. You
can similarly
float another div to the right of this div etc. When you are
done with a row
of divs, you would want to clear the float so that the next
set of divs
starts with the extreme left as the reference point. To clear
a float you
would use style="clear:both;" or style="clear:left;" etc.
Please do some
reading on all this before you start experimenting else
you'll run into a
multitude of issues.
You cannot lose until you give up !!!
"AngryCloud" <[email protected]> wrote in
message
news:f133f2$jk4$[email protected]..
> How do you make a div tag only as wide as the content
that is inside of
> it, rather than the width of the cell that surrounds it?
Maybe you are looking for
-
Trouble with Drive&Walk USA license and 2.0
I've tried to 'update' my license and the only thing that shows up is a city guide I purchased. If I exit and go back in it shows the Drive&Walk license I have with 328 days remaining. If I try to Navigate it takes me to the purchase screen and wants
-
I found this, sctipt, that I try to re-write. As it is, it creates sub folders in the targetfolder, which I found out how to stop it from, by deleting the "\" backslash sign in line 9. But what I also want is that subfolders if such should exist, als
-
pages wont load half the time have to close all the way and reopen always says connecting this really started to happen after the last 2 updates
-
CS5 Upgrade Can't Find FTP Info
I just upgraded from CS3 to CS5 and CS5 is not seeing any of my site FTP information and wants me to input all the passwords, etc. How do I make it find the site remote FTP info so that I don't have to input it all over again?
-
Is it possible for TM local snapshots to be renabled automatically?
Today I just discovered that TM local snapshoting was enabled. What surprises me about this is that not long ago I explicitly turned this off via "sudo tmutil disablelocal" and verified it was off. Are there ways this can be re-enabled without my r