AP Div vs Tables?
After using Dreamweaver MX for many years, I have now switched over to Dreamweaver CS5.5. I have been busy reading help files, watching Adobe TV, and reading whatever else I can find so I can make the switch as painlessly as possible. However, there is one thing that I am having trouble conceptualizing. I have spent years using tables as the basic organizational structure of my web sites. I always found utilizing tables a refreshingly simple and effective way to keep order on the page.
Now that I am using Dreamweaver CS5.5 and gettng more deeply involved in using proper CSS from the get-go, it appears that using tables to organize data has become rather passe, and AP Div tags seem to have taken the place of tables. Because I am so used to table structures, for some reason I still can't fully get grip on this other concept. Using the example I utline below, can someone try to explain this to me (the short and sweet version)? Every time I think I've got it, I read something else and get confused again.
For example: Using Dreamweaver MX I created a very simpe web site. The underlying structure includes a primary table 950 pixels wide, centered on the page. Within this primary table I nested a second table consisting of three columns. Left and right columns are fixed in size, and the center column (main content) is not fixed and is free to resize depending on browser dictates. The fixed columns also contain another nested table or two.
If I were to take this same simple page and re-create it from scratch using Dreamweaver CS5.5, but using AP Div instead of tables for the underlying structure, what initial steps do I need to take to make it all come together?
If someone can provide just a simple explanation that will help me understand this part of basic page creation using the div tags instead of tables, then it wil be greatly appreciated. Everything else is a piece of cake. Many thanks.
The best way to create a web site is to use CSS rather than rables. In fact, I dare say that tables should only be used for tabular output.
Having said that, a normal layout should not rely on absolute positioned elements. If you require more info on the why's then you can Google the subject.
A good place to start with a CSS layout is to click Ctrl-n (windows) and the following dialog pops up
Simply choose the layout that you want.
Gramps
Similar Messages
-
Me again, hello.
I'd like to get your perspectives on the debate between <table>s and <div>s in CSS.
Over and over I've read the proponents of <div>s vs those of <table>s, and what I've taken away is:
"If you have a lot of tabular data, use a <table>, if not, use <div>s."
"Tables inside of tables are a big problem"
So I'll give you a specific example
Here is a mockup of a simple series of <div>s.
The large one on the right will be for a photo.
The other 12 <div>s will be for textual data.
http://www.heartinstitutehd.com/php/testingcsslayout.htm
I've done exactly the same layout using a table with rowspan="3" for the picture.
In your opinion(s), what are the pros and cons of using <div> vs <table> in this particular example?
For noobs such as myself, here's the code:
<!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=windows-1252" />
<style>
.largebox {
height:200px;
width:800px;
margin-left:auto;
margin-right:auto;
background-color:lime;}
.shortwidebox {
width:85%;
height:33%;
background-color:gray;
float:left;}
.picturebox {
height:100%;
width:15%;
background-color:navy;
float:right;}
.smallboxblue {
height:100%;
width:25%;
float:left;
background-color:blue;}
.smallboxgreen {
height:100%;
width:25%;
float:left;
background-color:green;}
.smallboxred {
height:100%;
width:25%;
float:left;
background-color:red;}
.smallboxblack {
height:100%;
width:25%;
float:left;
background-color:black;}
</style>
</head>
<body>
<div class="largebox">
<div class="picturebox"></div>
<div class="shortwidebox">
<div class="smallboxblack"></div>
<div class="smallboxblue"></div>
<div class="smallboxgreen"></div>
<div class="smallboxred"></div>
</div>
<div class="shortwidebox">
<div class="smallboxred"></div>
<div class="smallboxgreen"></div>
<div class="smallboxblue"></div>
<div class="smallboxblack"></div>
</div>
<div class="shortwidebox">
<div class="smallboxblack"></div>
<div class="smallboxblue"></div>
<div class="smallboxgreen"></div>
<div class="smallboxred"></div>
</div>
</div>
</body>
</html>"Tables inside of tables are a big problem"
That's really not true. Tables inside of tables is wasteful, and troublesome since it creates LOTS of markup that gets in the way of troublshooting, and that adds to the weight of the page. It's not uncommon to find tables nested 7 or 8 deep on pages that use tables for layout. You will rarely find such contorted structures on CSS pages. What makes tables within tables big trouble and even dangerous is when those tables contain lots of colspans and rowspans. This leads to relative unstable structures that will figuratively explode if someone bumps up the text size on the page.
My critique of your page is that you have assigned heights to those elements. While I recognize that you may be doing that for effect, it's never a good idea - let the contents determine the height - you risk overflow problems when you don't.
And finally, I have used tables on a page perhaps three times in the last year. All three times were to present tabular data. While tables can be an important tool in your toolbag when you need to use them, I'd avoid them for any other uses. -
I have a table that contains data parsed for a weather station page. It also has a webcam picture on the page. Up until now, the webcam pic has loaded via an applet but I want to change that to a jquery slideshow so it's accessible to more mobile devices. My problem is that no matter what I do (aside from putting a 5x240 spacer) I can't get the table data to display below the webcam div (id="featured"). I've put the webcam and data table in their own div, the webcam's div in the table, used clear:both on the divs, tried setting block size, but it's like nothing is working. So I'm back to go and thought I'd post it here since there are so many folks here who know more about this than me. This is the html, right now with no CSS classes or anything added. So whatever you would suggest as far as div and/or table layout and any CSS would be appreciated.
<table width="100%" cellpadding="3">
<tr align="center"><td >
<div id="featured"> <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img0" /></a>
<a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-9.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img10" /></a>
<a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-8.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img9" /></a>
<a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-7.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img8" /></a>
<a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-6.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img7" /></a>
<a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-5.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img6" /></a>
<a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-4.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img5" /></a>
<a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-3.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img4" /></a>
<a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-2.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img3" /></a>
<a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-1.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img2" /></a>
<a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-0.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img1" /></a> <!--end div featured--></div>
</td></tr>
<tr>
<td><img src="images/spacer5x260.gif" width="5" height="260"></td></tr>
<tr>
<td colspan="4"><p align="center"><a href="images/06/Waterspout/Waterspouts.htm"><br />
</a></p>
<div align="center">
<p><a href="images/Waterspout/Waterspouts.php">Waterspout on Lake Mich </a>||| <a href="images/ANIFreighter.gif">Freighter Leaving Harbor</a><br />
</p>
</div></td>
</tr>
<tr>
<td colspan="4" bgcolor="#EAEFF9"><div align="center">
<h2>Weather Conditions Last Updated wvcurudwv at wvcurutwv </h2>
</div></td>
</tr>
<tr>
<td><div align="right"> Temperature </div></td>
<td><div align="left"> wvcur01wv </div></td>
<td><div align="right"> Wind Speed </div></td>
<td><div align="left"> wvcur18wv </div></td>
</tr>
<tr>
<td><div align="right"> Average High </div></td>
<td><div align="left"> wvahtempwv </div></td>
<td><div align="right"> Wind Direction </div></td>
<td><div align="left"> wvcur17wv </div></td>
</tr>
<tr>
<td><div align="right"> Record High </div></td>
<td><div align="left"> wvrhtempwv in
wvrhtyrwv </div></td>
<td><div align="right"> Peak Wind Gust </div></td>
<td><div align="left"> wvhigh18wv at
wvhight18wv </div></td>
</tr>
<tr>
<td><div align="right"> High
Since Midnight </div></td>
<td><div align="left"> wvhigh01wv
at wvhight01wv </div></td>
<td><div align="right"> Wind Chill Factor </div></td>
<td><div align="left"> wvcur02wv </div></td>
</tr>
<tr>
<td><div align="right"> Low </div></td>
<td><div align="left"> wvlow01wv
at wvlowt01wv </div></td>
<td><div align="right"> Yesterday Max Wind </div></td>
<td><div align="left"> wvyhigh18wv at wvyhight18wv </div></td>
</tr>
<tr>
<td><div align="right"> Rainfall Since
Midnight </div></td>
<td><div align="left"> wvcur16wv </div></td>
<td><div align="right"> Relative Humidity </div></td>
<td><div align="left"> wvcur13wv </div></td>
</tr>
<tr>
<td><div align="right"> Rainfall Yesterday </div></td>
<td><div align="left"> wvyhigh16wv </div></td>
<td><div align="right"> Barometric Pressure </div></td>
<td><div align="left"> wvcur15wv </div></td>
</tr>
<tr>
<td><div align="right"> Sunrise </div></td>
<td><div align="left"> wvsrisewv </div></td>
<td><div align="right"> Heat Index </div></td>
<td><div align="left"> wvcur04wv </div></td>
</tr>
<tr>
<td><div align="right"> Sunset </div></td>
<td><div align="left"> wvssetwv </div></td>
<td><div align="right"> Dew Point </div></td>
<td><div align="left"> wvcur03wv </div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Moon
distance from earth</td>
<td><span>wvmdistwv</span></td>
<td> </td>
</tr>
<tr>
<td><h2> </h2></td>
<td><h2> </h2></td>
<td><h2> </h2></td>
<td><h2> </h2></td>
</tr>
<tr>
<td><h2><a href="http://www.coastwatch.msu.edu/twomichigans.html" target="_blank">Lake
Michigan<br />
Water Temp</a></h2></td>
<td><h2><a href="http://www.woodtv.com/Global/category.asp?C=2906&nav=0Rcf">TV
8</a> & <a href="http://www.wzzm13.com/weather/forecast/weather.asp">TV13</a> Weather </h2></td>
<td><h2><a href="http://www.deq.state.mi.us/beach/Default.aspx?County=70" target="_blank">Ottawa County Beach Conditions</a></h2></td>
<td><h2><a href="http://www.crh.noaa.gov/product.php?site=grr&product=nsh&issuedby=grr" target="_blank">Nearshore
Marine Forcast</a></h2></td>
</tr>
</table>Of course as soon as I posted that, I found the error of my ways. I had forgotten to set containerheight: on my .js script for 'div#featured'
Arrrghh, why couldn't I have realized that a hour ago!!! -
DIV and Table Tag - height issue
Help. I'm using div tags to setup the structure for sections
of my Web page. But when it comes to populating these pages with
dynamically generated text, the height changes. Sure the table td
cell expands, but the div surrounding the table tags DOES NOT. Here
is the page where I am having the problem.
http://www.fuelcellmagazine.com/story2.cfm?id=17
Scroll down to the bottom of the page and you'll see the
table tag overflowing past the div tag settings.
Any suggestions?
DThat is quite a div soup you have there. Why so much absolute
positioning?
Two ticks of the enlarge text in FF and the page is
completely broken. Your
problem is not the div heights, it's the absolute
positioning.
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
==================
"OnDemand Junkie" <[email protected]> wrote
in message
news:e246jj$1fb$[email protected]..
> Help. I'm using div tags to setup the structure for
sections of my Web
> page.
> But when it comes to populating these pages with
dynamically generated
> text,
> the height changes. Sure the table td cell expands, but
the div
> surrounding
> the table tags DOES NOT. Here is the page where I am
having the problem.
>
>
http://www.fuelcellmagazine.com/story2.cfm?id=17
>
> Scroll down to the bottom of the page and you'll see the
table tag
> overflowing
> past the div tag settings.
>
> Any suggestions?
>
> D
> -
I'm trying to figure out how to convert the DIV tags to a
table, but
can't quite get it. Can someone convert for me:
<div style="padding: 5px;">
<div class="conContainer">
<div class="con_tl"><div class="con_tr"><div
class="con_br"><div
class="con_bl">
<div class="conTitle">Your Title Here</div>
<div class="blockContent">Place your text in
here</div>
</div></div></div></div></div></div>
With the CSS of
.conTitle {/font-size: 110%;font-weight:
bold;text-decoration:
none;margin: 0px 0px .2em 0px;padding: 12px 0px 10px
38px;background-image:url(images/bluex/colt.gif);
background-repeat:
no-repeat;color: #1d1d1d1d;}
.conIcons {float: right;position: relative;font-size:
0.85em;top:
-25px;right: 5px;}
.con_tl {background-image:
url(images/bluex/tl.gif);background-position: 0%
0%;background-repeat:
no-repeat;position: relative;top: -1px;left: -1px;}
.con_tr {background-image:
url(images/bluex/tr.gif);background-position: 100%
0%;background-repeat: no-repeat;position: relative;left:
2px;}
.con_br {background-image:
url(images/bluex/br.gif);background-position: 100%
100%;background-repeat: no-repeat;position: relative;top:
2px;}
.con_bl {background-image:
url(images/bluex/bl.gif);background-position: 0%
100%;background-repeat: no-repeat;position: relative;left:
-2px;padding: .8em;overflow: hidden;}
.conContainer {background-image:
url(images/bluex/bg.jpg);border: 1px
solid #D0D0E0;position: relative;margin-bottom: 10px;z-index:
0;}
Thanks.Why do you want to do this? And what happens when you try?
<background>This conversion, and its obverse of tables
to divs, should have
been removed from the product 3 versions ago. It has no
practical value,
and only accomplishes a complete destruction of your page's
markup making
longer-term maintenance of the page a
nightmare.</background>
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
==================
"Port Man" <[email protected]> wrote in message
news:[email protected]...
> I'm trying to figure out how to convert the DIV tags to
a table, but
> can't quite get it. Can someone convert for me:
>
> <div style="padding: 5px;">
> <div class="conContainer">
> <div class="con_tl"><div
class="con_tr"><div class="con_br"><div
> class="con_bl">
> <div class="conTitle">Your Title Here</div>
> <div class="blockContent">Place your text in
here</div>
>
</div></div></div></div></div></div>
>
>
> With the CSS of
>
> .conTitle {/font-size: 110%;font-weight:
bold;text-decoration:
> none;margin: 0px 0px .2em 0px;padding: 12px 0px 10px
> 38px;background-image:url(images/bluex/colt.gif);
background-repeat:
> no-repeat;color: #1d1d1d1d;}
> .conIcons {float: right;position: relative;font-size:
0.85em;top:
> -25px;right: 5px;}
> .con_tl {background-image:
> url(images/bluex/tl.gif);background-position: 0%
0%;background-repeat:
> no-repeat;position: relative;top: -1px;left: -1px;}
> .con_tr {background-image:
> url(images/bluex/tr.gif);background-position: 100%
> 0%;background-repeat: no-repeat;position: relative;left:
2px;}
> .con_br {background-image:
> url(images/bluex/br.gif);background-position: 100%
> 100%;background-repeat: no-repeat;position:
relative;top: 2px;}
> .con_bl {background-image:
> url(images/bluex/bl.gif);background-position: 0%
> 100%;background-repeat: no-repeat;position:
relative;left:
> -2px;padding: .8em;overflow: hidden;}
> .conContainer {background-image:
url(images/bluex/bg.jpg);border: 1px
> solid #D0D0E0;position: relative;margin-bottom:
10px;z-index: 0;}
>
> Thanks.
>
> --
> -
I have a confession to make. I am still stuck in the world of exporting my websites out of photoshop into table formats.
Could someone please explain why I should export as DIVs instead of tables?
Also, is there a way to export a project where each layer or groups of layers is a DIV, so don't have to slice the PSD file?
Thank you in advance for your input!!
MickyHonestly, you do not know what you have been missing out on! Don't bother with the slice function ever again. Quite useless, and its existence in Photoshop should be ended asap (in my opinion).
Better (and free): http://www.cutandslice.me/
Other handy web related photoshop plugs:
http://webzap.uiparade.com/
http://css3ps.com/
http://www.fnordware.com/superpng/
http://guideguide.me/
If you are on Windows, do yourself a favour, and get Color Quantizr for optimum png for web:
http://www.softpedia.com/get/Multimedia/Graphic/Graphic-Others/Color-quantizer.shtml
Otherwise, for mac imagealpha will have to do: http://pngmini.com/
If, however, you are looking for a full slice replacement in Photoshop that allows for full web page output, try SiteGrinder:
http://www.medialab.com/psd-to-html/why-sitegrinder.php
Myself, I dislike SiteGrinder, but other like it a lot. -
I have craeted a site usinging divs and CSS, The site appears ok on PC IE 6 and Firefox and on Mac FireFox.
However although the site appears OK in Safari locally, when viewed from the live test server the layout goes amiss. When I then view the source code from live some of the divs have been given table tags.
I have also checked the CSS is the same locally and live so the problem is not with the CSS. Also when I view the source code of the live pages on Mac IE there are no table tags.
Any Clues?Try this way:
LOOP AT IT_MSG INTO WA_MSG.
"To display the Message
MESSAGE ID wa_msg-mid TYPE wa_msg-mtype NUMBER wa_msg-num.
"To get the Message Text
MESSAGE ID wa_msg-mid TYPE wa_msg-mtype NUMBER wa_msg-num INTO v_string.
ENDLOOP.
You do not need to use any FM to get the message text. SAP provides a standard addition MESSAGE ... INTO which does the same.
@Uday: As per your original post you have the Message Type with you in the internal table.
@Raymond: That was cool !!! You had the patience to do that formatting
BR,
Suhas
Edited by: Suhas Saha on Mar 3, 2010 3:18 PM -
Visual aids on tables and divs
It seem in dreamweaver cs6, my divs and tables had little dotted outlines around them, so i can see where they were. In CC those have vanished and there is a blue outline when I click on them. I found the doted outlines a great visual design aid, how do i get them back.
I am a newbie, and am teaching myself how to create html e-mail. I, too cannot see table outlines. CSS is not an option for my application.
I have a split view, code on the bottom and "site" on the top.
I clicked insert > table and selected 1 row, one column, width 98%, thickness 0, padding 0, spacing 0, header none.
Then, within that table I did the same thing but this time with 4 rows for the parts of the e-mail: planning header, content 1, content 2, footer
I could not see table borders, so I read that you can make the borders 1 instead of 0 for the creation, and then go back and reset to 0 once done -- note this is live view.
In follow on with this thread, I would prefer to see the outlines in design view -- the expanded table view I've seen discussed. But when I switch to design view, there is no table, even with the cursor placed within the table in the code:
Pffffft - nothing's there. In either view, if I go to modify > table in either view, all the options are greyed out. And, if I right click I get a standard context menu with cut, copy, paste, etc.
This is Dreamweaver 2014.1 -- what am I missing? -
I am new to web design and although I have spent countless
hours trying to grasp CSS I am still beginning. Can I use some
tables to layout my page and some DIVs? For instance, I have a
#wrapper to center the site on the screen, I have a DIV that
contains my header and footer. I also used table cells to add my
nav bar, text and a few others things. Is this okay while I'm still
learning?> I tried setting it in a table, the appearance varied
greatly in different
> browsers so I gave up.
This is only a reflection of your skill, not the ability of
tables to
contain a stable layout.
> I have tried setting the page using apdivs
Yes - that's definitely a mistake.
> Should I be laying out the page differently? Using a
combination of divs /
> apdivs / tables?
http://apptools.com/examples/pagelayout101.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"NickJ_London" <[email protected]> wrote in
message
news:g9dfpt$ku8$[email protected]..
> I'm also having issues deciding if I should use divs /
apdivs / tables to
> lay
> out my page.
>
> I tried setting it in a table, the appearance varied
greatly in different
> browsers so I gave up.
> I have tried setting the page using apdivs - one
container with the rest
> nesting, this gives a great layout but is anchored to
the left. What is
> the
> #wrapper command you used to centre the page on screen?
>
> Should I be laying out the page differently? Using a
combination of divs /
> apdivs / tables?
> -
Dreamweaver 8 - Height of tables keeps changing when images added to another table
Greetings! i have a rather annoying problem on my hands with
dreamweaver.
Currently for a small college project i am being asked to
design a small yet effective website to show students in the future
what will be expected.
So i've drawn up my template etc etc and all was going
well.... i created a table with 2 columns, 1 row on the right side
(where information shall be written) and 7 on the left hand column.
At the very top of the left hand column i have a 250x250
image and the other columns house several Sub links.
Now upon typing information in the right hand column
everything went well when browsing.....i then added pictures to the
right hand column that will be clickable links for
enlargements....of which dreamweaver had a small hissy fit and
stretched the left hand columns 90% down the total width of the
page....which a simple click on the border line solved and
everything went back to proportion. BUT what i get when browsing is
completley baffeling! Several of the left hand rows are stretched
like crazy! and i havent a clue why! some screen shots will be
viewable below...but i was wondering if any folk out there with any
information into solving this problem could help!
This is the dreamweaver view
http://i37.photobucket.com/albums/e92/Kaoscontrol/Dreamweaverview.jpg
And this is the browser view i get on every computer i've
tried it on
http://i37.photobucket.com/albums/e92/Kaoscontrol/Browserview.jpg
If there is anyone that can help me out it would be greatley
appretiated.
Many thanks
JamesTry changing this -
action="Mailto: [email protected]"
to this -
action=''Mailto:[email protected]''
I am doubtful that this will help, but give it a try.
You do know how unreliable that method is, right?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"alpha911" <[email protected]> wrote in
message
news:fit4am$nq7$[email protected]..
> this is the script for the problem i am having. I am not
getting any
> email
> when someone press send
> <form name="frmsendmail" method="POST" >
onSubmit="return
> ValidationForm()">
> <table width="80" height="386" border="0"
align="center">
>
> <tr>
> <td width="105"> </td>
>
> <td width="327"> </td><tr>
> <td> </td>
> <td> </td></tr>
> <td align="right" class="text">Name :
> <td><div align="left">
> <input name="txtEmailfrm2" type="text" class="input"
> id="txtEmailfrm22" size="30" maxlength="100">
> </div>
> <tr>
> <td align="right" class="text">Email :
> <td><div align="left">
> <input name="txtEmailfrm2" type="text" class="input"
> id="txtEmailfrm22" size="30" maxlength="100">
> </div>
> <tr>
> <td align="right" class="text">Subject :
> <td><div align="left">
> <input name="txtSub2" type="text" class="input"
id="txtSub22"
> size="30" maxlength="100">
> </div>
> </tr>
> <tr>
> <td align="right" class="text">Mesage(body) :
> <td><textarea name="txtMsg" cols="50" rows="10"
class="input"
> id="textarea"></textarea>
> </tr>
> <tr>
> <td align="right">
> <div align="right">
> <input name="hidsubmit" type="hidden" id="hidsubmit"
> value="true">
> <input name="Submit" type="submit" class="input"
> value="Send">
> </div>
> <td><div align="left">
> <input name="Submit2" type="reset" class="input"
> value="Reset">
> </div>
> </tr>
> </table>
> <body>
> </form>
> -
Hi,
I'm just getting comfortable with the concept of using DIVS
vs. tables. I just watched a tutorial on YouTube in which a
developer used AP Layers to create all his div tags, in DW CS3.
(absolute placement layers) I'd like to know what you think of this
method? Have layers changed into divs? I don't recall them being
able to do this on former software versions. Now, everything stays
in place, as it should, in the browser. Please let me know if the
layers tool has been modified/upgraded as so, because a few years
back I was instructed to keep clear of using it.
Thank you!The problem is not in coding them. It's in using them.
It's best not to use absolutely positioned elements for
layout, whether they
are manually coded, written by DW using the INSERT | Layout
Objects > AP
div, or appear magically on the page! 8)
For good CSS information, check these -
http://www.projectseven.com/tutorials/css/qdmacfly/index.htm
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"r_tist" <[email protected]> wrote in
message
news:gjtgjj$4g4$[email protected]..
> So it is best to hard code all divs, rather than using a
ready-made tool
> in Dreamweaver?
>
> Please let me know any info you have...
>
> Thanks -
How to make onClick behavior inside div active?
Code seems correct in Dreamweaver CS4, yet when clicking within the <div></div> tag area on initial webpage containing below code in browser (using F12 to view on local system -- browser is FireFox 3.6.8) no action occurs and no webpage redirect info appears in bottom bar of browser.
Code is essentially as follows:
<table>
<th width="338"><div id="bgimage" onClick="../subdirectory/webpageA.htm"><p class="maincopy">blah blah<br />blah blah<br />blah blah</p></div></th>
<th width="338"><div id="bgimage" onClick="../subdirectory/webpageB.htm"><p class="maincopy">blah blah<br />blah blah<br />blah blah</p></div></th>
<th><div id="bgimage" onClick="../subdirectory/webpageC.htm"><p class="maincopy">blah blah<br />blah blah<br />blah blah</p></div></th>
<th><div id="bgimage" onClick="../subdirectory/webpageD.htm"><p class="maincopy">blah blah<br />blah blah<br />blah blah</p></div></th>
</table>
Each table cell includes text superimposed over 50% opaque background image. Looks great! Can easily change text and republish to website if want to quickly modify one line of text to emphasize something new/different about the associated category the background image represents. Intent is taht the website visitor should be able to click anywhere within each image to go to detailed page.
Tried putting <a href ...></a> around <div> ... that creates the hyperlink, BUT each line of text is then underlined. Don't want to change href in CSS to remove underline because then other links in site will not have underline.
Anyone have any suggestions other than rebuilding images w/text over them in Fireworks? That is a klugy multistep process every time a minor change is desired.Several points:
1. I saw you're using Firefox. There are some known issues with onClick in Firefox. Google "Firefox onclick" for help with that.
2. Are the onClicks neccessary? You're not calling any javascript functions, why not just use <a>'s?
3. If you change the DocType to html5, you can use <a> to wrap a <div> but that's the only DocType I know that will support that.
4. Your markup seems bloated. I'm assuming that the table is not being used for your layout. Would this be better?
<table>
<th class="bgimage">
<a href="../subdirectory/webpageA.htm">...</a>
</th>
<th class="bgimage">
<a href="../subdirectory/webpageB.htm">...</a>
</th>
<th>
<a href="../subdirectory/webpageC.htm">...</a>
</th>
<th>
<a href="../subdirectory/webpageD.htm">...</a>
</th>
</table>
Then if you needed to size the table cells use a CSS document with stuff like:
.bgimage{
width: 338px;
background: url(point/to/my/image.jpg);
table a{
display: block;
.maincopy, table a *{
// My maincopy rules here. -
Scrollable table not working in IE
I have a scrollable table that works great in Firefox, Safari, and Chrome. I cannot get it to work properly in IE. I think the problem is with the CSS, but I can't figure out what is wrong. Here's the CSS code:
div.tableContainer { clear: both; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; height: 285px; overflow: auto; width: 989px; } \html div.tableContainer{ padding: 0 16px 0 0; width: 973px; } html>body div.tableContainer { height: auto; padding: 0; } head:first-child+body div[class].tableContainer { height: 285px; overflow: hidden; width: 973px; } div.tableContainer table { float: left; width: 100%; } \html div.tableContainer table{ margin: 0 -16px 0 0; } html>body div.tableContainer table { float: none; margin: 0; width: 973px } head:first-child+body div[class].tableContainer table { width: 973px; } thead.fixedHeader tr { position: relative; top: expression(document.getElementById("tableContainer").scrollTop); } head:first-child+body thead[class].fixedHeader tr { display: block; } thead.fixedHeader th { background: #BC0001; border-left: 1px solid #CCC; border-right: 1px solid #CCC; font-weight: normal; padding: 4px 3px; text-align: left; font-size:12px; line-height:normal; color: #FFF; } thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited { color: #FFF; display: block; text-decoration: none; width: 100%; } head:first-child+body tbody[class].scrollContent { display: block; height: 262px; overflow: auto; width: 100%; } tbody.scrollContent td, tbody.scrollContent tr.normalRow td { background: #FFF; height: 35px; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px; font-family: Arial, Helvetica, sans-serif; } tbody.scrollContent tr.alternateRow td { background: #EEE; height: 35px; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px; }
Here's the HTMLSorry... html is:
<table border="0" cellpadding="2" cellspacing="0" class="tableRed" width="974px">
<tbody>
<tr>
<td style="color:#FFF; border-right:1px solid #CCC; border-bottom: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;" width="110"> </td>
<td style="color:#FFF; border-right:1px solid #CCC;" width="71"> </td>
<td style="color:#FFF; border-right:1px solid #CCC;" width="69"> </td>
<td style="color:#FFF; border-right:1px solid #CCC; border-left:1px solid #CCC; border-bottom: 1px solid #CCC; text-align: center; font-family: Arial, Helvetica, sans-serif;" width="280"> </td>
<td style="color:#FFF; border-right:1px solid #CCC; text-align: center; font-family: Arial, Helvetica, sans-serif;" width="69">
</td>
<td style="color:#FFF; border-right:1px solid #CCC; border-bottom: 1px solid #CCC; text-align: center; font-family: Arial, Helvetica, sans-serif;" width="223"> </td>
</tr>
</tbody>
</table>
<div class="tableContainer" id="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" class="scrollTable" width="100%">
<thead class="fixedHeader" id="fixedHeader">
<tr>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
</tr>
<tr>
<td>
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
</tr>
<tr>
<td>
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div> -
Javascritp to determine div size?
Is it possible to use javascript to determine a div (or
table) height and width? For example I have layer 1 and layer 2, I
want to have layer 2 height to depend on layer 1's height.
Can it be done?http://www.projectseven.com/
I believe that there is an equal column height extension
there.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"serg2049" <[email protected]> wrote in
message
news:fh1tur$tp$[email protected]..
> Is it possible to use javascript to determine a div (or
table) height and
> width? For example I have layer 1 and layer 2, I want to
have layer 2
> height to depend on layer 1's height.
>
> Can it be done? -
Sample application using the Eclipse BIRT schema
<p>Somaco have produced a sample application based upon the Eclipse BIRT example schema (customers, orders, products, etc). Hopefully this will be of some use to new-to-Spring developers looking for other example applications and sample applications.</p>
<p>So far we're tested/run the sample application on Tomcat, using JOTM transactions against the MySQL version of the BIRT schema. We'd like to (a) offer the sample application to those Weblogic users looking for sample applications (other than petstore), and (b) get some feedback on the sample application from Weblogic users - both for the deployment and for the app itself.</p>
<p>
The sample application uses the following Spring MVC Framework features:</p>
<ul>
<li>Various Spring controllers including: SimpleFormController, AbstractWizardFormController, and MultiActionController.</li>
<li>Validation and Custom Editors (including a CustomTimestampEditor for java.sql.Timestamp fields).</li>
<li>Clearly tiered application design with web, application and persistence tiers.</li>
<li>Ibatis/DB persistence tier using result maps, correlated result maps, dynamic and iterative map definitions.</li>
<li>Simple QBE on text fields.</li>
<li>Externalised messages (for i18n/l10n).</li>
<li>WAI-friendly page structure (e.g. CSS2 styling, use of divs, not tables).</li>
<li>Declarative JOTM transactions.</li>
</ul>
<p>The sample application was created using the Somaco Software Production service.</p>
<p>Follow the link from the Somaco home page to download the application (~4.1 MB).</p>
<p>No registration required. Feedback would be appreciated. Enjoy.</p>
<p>Cheers - John</p><p>Somaco have produced a sample application based upon the Eclipse BIRT example schema (customers, orders, products, etc). Hopefully this will be of some use to new-to-Spring developers looking for other example applications and sample applications.</p>
<p>So far we're tested/run the sample application on Tomcat, using JOTM transactions against the MySQL version of the BIRT schema. We'd like to (a) offer the sample application to those Weblogic users looking for sample applications (other than petstore), and (b) get some feedback on the sample application from Weblogic users - both for the deployment and for the app itself.</p>
<p>
The sample application uses the following Spring MVC Framework features:</p>
<ul>
<li>Various Spring controllers including: SimpleFormController, AbstractWizardFormController, and MultiActionController.</li>
<li>Validation and Custom Editors (including a CustomTimestampEditor for java.sql.Timestamp fields).</li>
<li>Clearly tiered application design with web, application and persistence tiers.</li>
<li>Ibatis/DB persistence tier using result maps, correlated result maps, dynamic and iterative map definitions.</li>
<li>Simple QBE on text fields.</li>
<li>Externalised messages (for i18n/l10n).</li>
<li>WAI-friendly page structure (e.g. CSS2 styling, use of divs, not tables).</li>
<li>Declarative JOTM transactions.</li>
</ul>
<p>The sample application was created using the Somaco Software Production service.</p>
<p>Follow the link from the Somaco home page to download the application (~4.1 MB).</p>
<p>No registration required. Feedback would be appreciated. Enjoy.</p>
<p>Cheers - John</p>
Maybe you are looking for
-
I have mac pro 2007 model given to me, I updated it to lion about six months ago, and I do not have a time machine. Lion stopped loading before I get to the login screen, I tried all the tips, doing a option/shift/v. I noticed several fsk_dsk errors
-
XML Payload Response Syn scenario not comming
Hi all, I am working in a SOAP-->JDBC syncronous scenario. I am doing an INSERT into a JDBC data base. I am able to do the insert, but I can not map de response message from data base. I get a Mapping error. I guess that this error is due to my defin
-
Error "ADS: com.adobe.ProcessingException: X Exception - P(200101)"
Hi folks, I created a new Adobe Interactive Form which is quite simple. There's just a header and the personal number of an employee to be printed. I binded a structure (contains 10 fields) to the context and de-activated all of the fields except th
-
How do you extract SQL from Oracle Forms and Reports files?
I am developing an "as is" data model for a government client for a 14 year old system that has three databases, 20 schemas, over 1500 tables, and over 23,000 columns. Needless to say, I do not plan to perform a manual mapping of data to screens and
-
HI, IS IT POSSIBLE TO SET DIFFERENT BACKGROUND COLOUR OF THE TEXT ITEM OF A DATA BLOCK ACCORDING TO THE VALUE INSIDE THE ITEM? Example: BLOCK WITH 5 RECORDS, FIRST RECORDS'ITEMS BACKGROUND MUST BE RED (CAUSE VALUE IS <0), 2ND AND 3RD WHITE (VALUE >0)