Gaps and spaces between slices in Dreamweaver
I'm running OS X 10.5.8 on a MacBook Pro, using Photoshop I created my webpage ( with the predefined html specs) and sliced up the areas I wanted to make links. Once I stated to make links it showed gaps and spaces between the slices. After I uploaded my site the page is fine in Safari and Chrome, but when firefox is used the spaces show up again. What should I do?
Here is my code:
<html>
<head>
<title>Brad Hager's Book</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
@import url("/site_layout.css");
a:link {
text-decoration: none;
a:visited {
text-decoration: none;
a:hover {
text-decoration: none;
a:active {
text-decoration: none;
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (mybookonline.psd) -->
<table width="1025" height="769" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5"><img src="images/mybookonline_01.jpg" width="1024" height="20" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="6"><img src="images/mybookonline_02.jpg" width="3" height="748" alt=""></td>
<td><a href="/jpegs/Brad Hager's Portfolio /index.html"><img src="images/advertisingportfolio.jpg" width="201" height="16" alt=""></a></td>
<td colspan="3"><img src="images/mybookonline_04.jpg" width="820" height="16" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td colspan="3"><a href="/stamp_resume.html"><img src="images/resume.jpg" width="216" height="15" alt=""></a></td>
<td rowspan="5"><img src="images/mybookonline_06.jpg" width="805" height="732" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><a href="/video.html"><img src="images/creations.jpg" width="203" height="15" alt=""></a></td>
<td><img src="images/resume-09.jpg" width="13" height="2" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="3"><img src="images/mybookonline_09.jpg" width="13" height="715" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="2"><a href="/creations.html"><img src="images/email.jpg" width="203" height="17" alt=""></a></td>
<td><img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="2"><img src="images/mybookonline_11.jpg" width="203" height="685" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="685" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="201" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="805" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-10172368-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</html>
using Photoshop I created my webpage ( with the predefined html specs) and sliced up the areas I wanted to make links.
This is OK for quick mock-ups but it doesn't work in the wild because graphics apps produce terribly rigid code that falls apart when you try to edit it later.
For best results, use Photoshop for images only. Save for web to your DW Local Site folder. Use DW to build your HTML and CSS code.
Taking a Fireworks (or Photoshop) comp to a CSS based layout in DW
Part 1 --
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Part 2 --
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html
Adobe Developer's Center - Getting Started tutorials
http://www.adobe.com/devnet/dreamweaver/?view=gettingstarted
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Similar Messages
-
Gaps and spaces in Adobe 9 professional
Hi all,
I'm having a problem with Adobe 9 Professional. If I convert a specific ully justified document finto a .pdf file, and subsequently make some minor changes with the TouchUp text tool. It creates inadvertent gaps and spaces in other parts of the document. All fonts are embedded and this does not happen if the original word document is left-justified only. My colleague using Acrobat Professional 8.1 has tried to duplicate the exact same steps and has no such problems. Any ideas? The original document was made using Word 2003.
Thanks,
PaddyHi Paddy,
How are you converting the document? In general, the Touch-Up text tool is a tool for small touch-ups and becuase of the structure a PDF file, these types of things are not terribly uncommon and can occur as a result of several things (font type, creation method, inclusion of tags, etc.) that are outside of Acrobat's control.
Often times, going back to the original Word document is the best way to go.
Tim Plumer
Sr. Solutions Engineer
Adobe Systems, Inc. -
When I export and place my image map in Dreamweaver CS6, my map is showing up with a space between the slice and unsliced section. I've never had this happen before. I've tried exporting with and withouth a spacer. Any ideas? As usual, I'm under the gun.
Sigh.Try 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>Untitled Document</title>
<style type="text/css">
img { display:block; }
</style>
</head>
<body>
<img src="images/Embroidery_01.jpg" width="400"
height="139" />
<img src="images/Embroidery_02.jpg" width="400"
height="139" />
</body>
</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
==================
"Dawn Wiseman" <[email protected]> wrote in
message
news:g0sft5$qov$[email protected]..
> here ya go
>
> <!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>
> </head>
>
> <body>
> <img src="images/Embroidery_01.jpg" width="400"
height="139" />
> <img src="images/Embroidery_02.jpg" width="400"
height="139" />
> </body>
> </html>
>
>
> -
http://contentsofadeadmanspockets.com/meet.html
The website that I made is showing spaces between the navigation bar and the banner. Can anyone please take a look at the code for me and suggest what I should do cause as you can see there appears to be something wrong in addition it looks different between internet exsplore and google chrome I want it to look the same. The basics of this page are simple I want the banner at the top the the navigation bar lining right up underneath the banner, the below have those pictures on the left side and then a descripton on the right side of each picture then below that a copyright bar at the bottom.with it all being centered like the homepage is. If you look at some other pages in chrome you will notice those spaces and gaps in more then just that page of the website. Please help me I cannot find a way to fix it. I'd be extreamly greatful if someone could make me a template where i can just drop each sliced image in and type the descriptions and all that in. also have the background of all that grey but where the info on the right is white. so the black text can show98% of browser display problems are caused by coding errors or invalid code for your document type. Fix those problems first.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcontentsofadeadmanspockets.com%2F meet.html
W3C Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Space between tables in dreamweaver
Cellpad = 0, Cellspace = 0 and Border = 0 but there is still a space between tables. I checked in explorer and chrome, same thing. Suggestions?
This is not a DW or even a table problem - it's a 'you' problem! ;-)
What you are seeing is the space that is reserved below inline elements to accommodate text descenders. Make that image have the CSS style of "display:block" and you will see the gap vanish. -
Reduce field size and space between fields
Is there any trick to reduce the size of a field more than "normal" and the space between fields?
I'm creating a form that looks like at table of 5 rows and 8 columns.
Some of the fields is with list function, and they in special take more space than other fields.
When changing the form layout in the web browser I could move the "listfields" to different places and suddenly I can for example reduce them from 124 to 114 that is the smallest I have seen them. Also if try to reduce the same field later it just pops up from 114 to 139.
The space between fields is also annoying large when I try to keep this form as small as possible.
Why am I asking for this?
I know I can increase the size of the form, but I want it as small as possible for the smartphones.
The "listfields only contains number from 1 to 9, so they can be very small.Hi,
We currently have minimum widths defined for each field type. It shouldn't be possible to reduce the size of a field below that minimum width. If possible, could you please share your form with me ([email protected]) to allow me to investigate the behavior that you are seeing with your "listfields"? Also, could you describe how you were moving fields when you saw the field width reduce from 124px to 114px?
Instructions for sharing a form can be found here - http://forums.adobe.com/docs/DOC-2462.
Currently the spacing between fields cannot be modified.
Regards,
Brian -
How to change font size and spaces between fields in SAPscripts?
Hi everyone!
I need help using sapscripts, 'cause I don't know what's the meaning of some symbols, for example: ,,<Z>&BSEG-HBKID</>. Now my question is what's for: ",," "<Z>" and "</>", I have no idea what does symbolas are for?
If anyone can help me I'll really appreciate it!
Thanks for your help!!!Dear Guillermo,
To give a clear answer to your query.
I have the following.
when you are in one window and then go to the contents of the window in change mode.
There you can see that in the command editor i.e the editor where you are writing your code.
as illustarated above your editor looks like.
in the left box you give commands like /: or /* or a paragraph format which you have defined like 'P1'.
By defining this paragraph format you want to tell that the text which is written on the right box will use the font defined whether it is <b>BOLD</b> / <i>Italic</i> etc. whether it is justified or left-aligned etc. and also in the same paragraph format you will define your tab stops.
So when you write <b>,,</b> then it is equivalent to one tab stop. i.e how much margin you want to leave for this paragraph line to start from you page starting.
the symbol <b><Z></b> represents a character format only catering to the characters defined in between <b><Z></b> and <b></></b>This character format is defined through the push button charcter format in you form editor.
the <b></></b> indicates the end of the character format.
&BSID-HBKID&.
& represents that the value will come dyanmically which has been defined before in the Driver program or in the script itself through the <b>DEFINE</b> command.
The <b>BSID-HBKID</b> represents that the value will be got from the table BSID and field HBKID during runtime.
I Hope things are far pretty clear in this way.
If you still have any more clarifications please come back with any further queries, but not forget to reward appropriately.
Thanks & Regards
venugopal -
Enormous Unwanted Gray Lines and Spaces Between Pages?
Does anyone know how to get rid of those **** things? what happened to the thin, little dotted line that separate pages and kept everything tight & together?
what happened to the thin, little dotted line that separate pages and kept everything tight & together?
You are working within an object-oriented page description model. What you see on the display is the design space you defined in Page Setup. You then draw frames in this design space for area composition and area separation, and either save out the design space into the Portable Document Format or rasterize it to a PostScript or Printer Control Language device.
In other words, the metaphor is pages displayed to a desired size the way physical paper that has been trimmed to a desired size. If you don't understand a word of this, then keep in mind that the Mac is the oldest platform for professional publishing. In order to make the most of your Mac, you may want to understand a bit of what is common knowledge in professional publishing.
I can see why a metaphor of continuous form feed paper could be used in a continuous column wordprocessor. But it makes no sense in an application like Pages that lets you define any size design space and populate this space with columns in any position, the way one can in professional publishing.
/hh -
Crossfade doesnt work and glitches between songs with update 7.7
Well, apple has made it again. It seems apple has been very busy with its little iphone toy that It forgot its principal product: computers and software. I am still furious because the last ipod update makes my ipod pause radnomly and now the last Itunes update ***** too. Since this update crossfader doesnt work properly anymore. In fact there´s no crossfade just an annoying gap and glitch between songs. Even if I turn the crossfader off. Why apple? why? You ****** me off already!
We are not Apple we are users like you press power button & menu button hold both down until you see Apple Logo
then wait you will not lose any data also turn you modem off for 30 seconds then after modem has started up
try to connect iPhone .
bsydd uk -
How do I get rid of the 1/16" space between my igoogle homepage and firefox ribbon?
I am currently running Firefox 4 and have igoogle set as my homepage. Both with the previous version of Firefox and with the new one I have about a 1/16 inch blue gap/space between the top of my igoogle homepage and the bottom of the Firefox ribbon/header. How do I get rid of this eyesore? It is only when I am on my igoogle homepage that this is a problem. All other pages are seamless.
Start Firefox in <u>[[Safe Mode]]</u> to check if one of the extensions or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox (Tools) > Add-ons > Appearance/Themes).
*Don't make any changes on the Safe mode start window.
*https://support.mozilla.com/kb/Safe+Mode
Do a malware check with some malware scanning programs on the Windows computer.<br />
You need to scan with all programs because each program detects different malware.<br />
Make sure that you update each program to get the latest version of their databases before doing a scan.<br /><br />
*http://www.malwarebytes.org/mbam.php - Malwarebytes' Anti-Malware
*http://www.superantispyware.com/ - SuperAntispyware
*http://www.microsoft.com/windows/products/winfamily/defender/default.mspx - Windows Defender: Home Page
*http://www.safer-networking.org/en/index.html - Spybot Search & Destroy
*http://www.lavasoft.com/products/ad_aware_free.php - Ad-Aware Free
See also:
*"Spyware on Windows": http://kb.mozillazine.org/Popups_not_blocked -
White space between header and main content
Hello all! I have a 25-27px white space between my header and
main content. I read through fixes in the forum and took out any
height that would effect this gap. I still can't get rid of this
white space. Your help is greatly appreciated! 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>
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and
padding of the body element to account for differing browser
defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5*
browsers. The text is then set to the left aligned default in the
#container selector */
color: #000000;
.oneColElsCtrHdr #container {
width: 46em; /* this width will create a container that will
fit in an 800px browser window if text is left at browser default
font sizes */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a
width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body element. */
.oneColElsCtrHdr #header {
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: #FFFFFF;
.oneColElsCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the
#header div will avoid margin collapse - an unexplainable space
between divs. If the div has a border around it, this is not
necessary as that also avoids the margin collapse */
padding: 0px 0; /* using padding instead of margin will
allow you to keep the element away from the edges of the div */
.oneColElsCtrHdr #mainContent {
background: #FFFFFF;
padding-top: 0;
padding-right: 0px;
padding-left: 0px;
.oneColElsCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear above it. */
background:#DDDDDD;
.oneColElsCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in
the footer will avoid the possibility of margin collapse - a space
between divs */
padding: 0px 0; /* padding on this element will create
space, just as the the margin would have, without the margin
collapse issue */
.style4 { font-family: "Fiolex Girls", "Arial Narrow";
color: #FF0000;
font-size: xx-large;
font-style: italic;
.style6 {color: #FF0000}
.style7 { color: #000000;
font-size: x-small;
.style9 {color: #FF0000; font-family: Arial, Helvetica,
sans-serif; }
-->
</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:static;
width:525px;
height:250px;
z-index:1;
float: left;
border-bottom-color: #000000;
border-bottom-style: solid;
border-top-width: thin;
border-bottom-width: thin;
border-color: #000000;
#apDiv3 {
position:static;
width:500px;
height:0px;
z-index:1;
left: 465px;
top: 410px;
float: right;
.style14 {
font-size: medium;
font-style: italic;
font-weight: normal;
.style15 {font-size: small}
-->
</style>
<link href="p7hscroller/s7/p7HSM07.css" rel="stylesheet"
type="text/css" media="all" />
<script type="text/javascript"
src="p7hscroller/p7hsmscripts.js"></script>
<style type="text/css">
<!--
#apDiv7 {
position:static;
width:737px;
height:0px;
z-index:2;
bottom: 0px;
border-bottom-style: solid;
border-bottom-width: thin;
.style16 {font-size: x-small}
-->
</style>
<!-- Do not remove the line below!!! It is required for
the XML Flash Slideshow v3. -->
<script type="text/javascript"
src="slideshow.js"></script>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<pre><span
class="style4">US-AsianMates</span><span
class="style6">.com</span> <strong><span
class="style9">JOIN FOR FREE <span
class="style7">OR</span> MEMBER LOG
IN</span></strong>
</pre>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="#"
class="style16">HOME</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">ABOUT US</a></div>
</li>
<li>
<div align="center"><a href="#"
class="style16">WHY JOIN US?</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">VISA SUPPORT</a></div>
</li>
<li>
<div align="center" class="style16"><a
href="#">EVENTS</a></div>
</li>
</ul>
<pre><!-- end #header -->
</pre>
</div>
<div id="mainContent">
<div id="apDiv1"><img
src="Images/Outdoor_Bride1.jpg" alt="Bride" name="Bride"
width="525" id="Bride" /></div>
<p> </p>
<p><br>
</p>
<pre>
</pre>
<table width="200" border="1" align="left">
<tr>
<td><img src="Romantic_Kiss.jpg" alt="VISA"
name="VISASUPPORT" width="200" id="VISASUPPORT" /></td>
</tr>
<tr>
<td><img src="Surfing_At_Home.jpg" alt="JOIN"
name="WHYJOIN" width="200" id="WHYJOIN" /></td>
</tr>
</table>
<pre></pre>
<div id="apDiv3">
<div align="center">
<div align="left">
<pre class="style14"> <strong>LIVING
PROOF</strong>
<span class="style15">"12 YEARS AGO I WENT TO
THE PHILIPPINES IN HOPES
OF FINDING MY FUTURE WIFE. 11 YEARS LATER,
I AM HAPPILY MARRIED! WE ALSO HAVE AN ENERGETIC
5 YEAR OLD SON! DREAM IT, LIVE IT! IT CAN
HAPPEN TO YOU ON US-ASIANMATES.COM
CHRIS"</span></pre>
</div>
</div>
</div>
<pre> </span>
</pre></pre>
<p><!-- end #mainContent -->
<br>
<pre>
</pre>
<div id="apDiv7"></div>
<div align="center">
<pre><!-- Begin XML Flash Slideshow v3 -->
<script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'slideshow.swf',w:'580',h:'140',redirect:'',usePreloader:'true', xml:'slideshow_data0.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml% 20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%3Cstyles%3 E%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=% 2270%22%20iconWidth=%2250%22%3E%3C/Preloader%3E%3CPreloaderLabel%20font=%22Verdana%22%20si ze=%2210%22%20color=%22#666666%22%20bold=%22false%22%3E%3C/PreloaderLabel%3E%3CBackground% 20backgroundColor=%22#FFFFFF%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20b evelStrength=%2270%22%20borderWidth=%222%22%20borderColor=%22#000000%22%3E%3C/Background%3 E%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%2 0alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22%3E%3C/LoaderA nimation%3E%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement= %22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22%3E%3C/DataLoader%3 E%3C/styles%3E%3Clocalization%3E%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading% 20Data...%22%3E%3C/text%3E%3C/localization%3E%3Cfonts%3E%3Cfont%20id=%22loader_text%22%20n ame=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22fals e%22%20selectable=%22false%22%20align=%22left%22%3E%3C/font%3E%3C/fonts%3E%3C/slideshow%3E '});
// ]]>
</script>
<!-- End XML Flash Slideshow v3 -->
</pre>
</div>
<pre>
</pre>
<pre> </pre><!-- -->
<pre> </pre>
</div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>"phillychris" <[email protected]> wrote in
message
news:[email protected]...
> Yep, it was the 1 pre tag creating the gap. So why is
this page a
> disaster, Tim?
Just because something is created in DW CS3 doesn't mean it's
not a
disaster, any more than using DeWalt power tools guarantees
that my
carpentry won't be a complete mess. The software is not a
replacement for
skills. It is a tool; your workflow and understanding of HTML
and CSS is
what allows you to use DW effectively.
So why did I call this page a disaster? When I see all that
extra markup,
spans, and inline tags, I shudder. It's way too hard to
troubleshoot. You're
not doing nearly enough with descendant selectors; instead,
most of your
code is inline, despite a huge CSS file.
Just one example: individual li tags with div align="center"
inside of them.
Way overkill. If you're centering all the li text in a given
list, control
it with CSS and kill all that extra markup.
E.g.
.MenuBarHorizontal li { text-align:center; }
In fact, if all there is in that .MenuBarHorizontal is the
list, you don't
even need to specify the list in the CSS. Just do:
.MenuBarHorizontal { text-align:center; }
Now you don't need div tags inside your li at all.
And if all of those a tags in that menu are going to be
.style16 class,
don't specify it on each link. In fact, don't even have a
.style 16 class.
Heck, since it's just specifying font size, you don't need to
target the a
tag at all. Just add font-size:x-small; to the
.MenuBarHorizontal ruleset I
gave you above.
The above are just examples from a quick glance at your code.
On the whole,
your markup and approach to styles are largely wasting the
power and point
of CSS.
In addition, several styles spanned onto one line of text...
a sure sign
that either you are using far too many styles to make design
sense, or else
you've got styles that overlap each other.
Here's my advice: Until you get a better handle on CSS, don't
style things
as you go. Forget styles altogether at the start. Create a
very clean HTML
markup and put ID and class selectors on things you know will
need them.
Preferably, place the HTML elements in the order you would
want your page
read if styling did not even exist, nesting elements where
necessary.
After you have created all the HTML structure, then go back
and style the
elements via CSS only. You will end up with less page weight
and far cleaner
code to decipher, not simply in terms of length but in terms
of conflicts
and redundancies.
If you're really insistent on styling things as you go, at
least do this:
don't create a new style every time you want to accomplish
something. Create
CSS rules for IDed containers and container classes. Then as
you go along
and are about to create a style, ask yourself where you are
and what all
this new rule needs to apply to. Specify the rule there,
under the selector
you've already created. Then you won't have .style1 -
.style16 like you do
now, and you won't have all that inline mess of code to sort
through.
Finally - as you create your CSS, discipline yourself to
avoid style spans.
They are necessary on the odd occasion, but very rarely.
Think semantically
(i.e. purpose of the style point you're making at a given
time).
For example, if you're tempted to create a span in order to
put something in
bold red, ask yourself: "Why?" Generally, it means you want
to place special
emphasis or strength on that. Well, in that case you don't
need a span. You
need to be using the proper tag, such as <em>
(emphasis) or <strong>. Then
you can style that tag in CSS. That way, what you have in
your page actually
makes sense apart from the style, and as a bonus you can
apply or edit your
style easily.
Tim G.
http://www.pactumweb.com
http://www.shortordersite.com
Be smart:
http://www.pactumweb.com/client/tips.php -
Space between footer and content
Hello,
I have made a website, but at the bottom of the page there is a space between my content and my footer.
I know more people have this problem and I saw multiple posts about this, but I have not found a solution yet.
My website is devided in multiple 'parts'.
The first part is a big image that is fixed and pinned to the top.
The others parts are rectangles with a background color and content that will go over the first part.
As I said before, at the end of my page, the footer will stick to the bottom like it should, but there is a gap between the footer and the last 'part'.
In the gap you can see a part of the big image where the website starts with (because it is pinned and will stay behind the other layers) and the browser fill (white).
If I uncheck the sticky footer, the footer will go up and stick to the content, but the gap moves to the bottom, so you see the browser fill below my footer.
You can view my website at emilelampe2.net16.net
I hope someone can help me.
Thanks,
EmileI have changed the header and top page position, now it's the following:
the header guide is at the top of everyting (like a top browser guide), my top page comes after the big image on the border between the big image and the first rectangle, my footer and bottom page guides are on the same place, at the end of the last rectangle on the border between the footer and the last rectangle and my bottom browser guide is at the very bottom of everyting.
What now occurs is that when i scroll down, when the last rectangle is just out of side (so it's 'above' the browser screen) my footer is totally out of side, which makes you see the big images (it was pinned to the top) with the browser fill.
When you scroll down more the footer appears.
My footer part (also a rectangle, but same effect if I delete the rectangle) and footer text are boother checked as 'Footer'.
The arrows are pointing at the two things that are off the screen.
EDIT:
When I unchecked 'Footer' with the foother rectangle and footer text, the rectangle sticked to the last context rectangle and went also up with the last rectangle. The page stopped scrolling when all the rectangles (including the not-footer-anymore footer) disappeared from the screen.
A page like the image above was left, except the footer was above the screen in stead of under it. So it seems like my website stops scrolling when all the 'context' is out of the screen?! -
WAD - How to Minimize the Space Between Drop-Down Box and Table
Hi all,
I am trying to display a query in 'Table' with Web Application Designer (WAD). First, I have placed the 'Drop-down box' web-item and 'Table' web-item below it in the Web Template. There is an half-inch of space between the 'Drop-down box' and the 'Table' when it displays on the browser. It doesn't look good with this gap.
How can I eliminate or minimize this gap, PLEASE ?.
Thanks.Hi Ingo & Hari,
Thanks a lot for your help. Now it reduced the gap between the drop-down box and table to 3mm on browser.
But, there is no gap on web template. If we change some settings, we could still further reduce the gap while displaying it on browser.
Any new suggestions, PLEASE. Thanks again.
<!--BW HTML data source object tags: -->
<object>
<param name="OWNER" value="SAP_BW"/>
<param name="CMD" value="SET_PROPERTIES"/>
<param name="TEMPLATE_ID" value="TESTWBOLAPQUERYUSER1"/>
TEMPLATE PROPERTIES
</object>
<object>
<param name="OWNER" value="SAP_BW"/>
<param name="CMD" value="SET_DATA_PROVIDER"/>
<param name="NAME" value="DATAPROVIDER_1"/>
<param name="QUERY" value="Z_BWSTAT_OLAP_PER_QUERY_USER"/>
<param name="INFOCUBE" value="0BWTC_C10"/>
DATA_PROVIDER: DATAPROVIDER_1
</object>
<html>
<head>
<title>BW Web Application</title>
<link href="/sap/bw/Mime/BEx/StyleSheets/BWReports.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<P align=left>
<TABLE cellSpacing=1 cellPadding=1 width="75%" border=0>
<TR>
<TD vAlign=top><object>
<param name="OWNER" value="SAP_BW"/>
<param name="CMD" value="GET_ITEM"/>
<param name="NAME" value="DROPDOWNBOX_1"/>
<param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/>
<param name="DATA_PROVIDER" value="DATAPROVIDER_1"/>
<param name="WIDTH" value="69"/>
<param name="IOBJNM" value="0TCTUSERNM"/>
ITEM: DROPDOWNBOX_1
</object></TD>
<TD vAlign=top><object>
<param name="OWNER" value="SAP_BW"/>
<param name="CMD" value="GET_ITEM"/>
<param name="NAME" value="DROPDOWNBOX_2"/>
<param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/>
<param name="DATA_PROVIDER" value="DATAPROVIDER_1"/>
<param name="WIDTH" value="19"/>
<param name="IOBJNM" value="0TCTIFCUBE"/>
<param name="MAXVALUES" value="1"/>
ITEM: DROPDOWNBOX_2
</object></TD>
<TD vAlign=top><object>
<param name="OWNER" value="SAP_BW"/>
<param name="CMD" value="GET_ITEM"/>
<param name="NAME" value="DROPDOWNBOX_3"/>
<param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/>
<param name="DATA_PROVIDER" value="DATAPROVIDER_1"/>
<param name="WIDTH" value="34"/>
<param name="IOBJNM" value="0CALDAY"/>
ITEM: DROPDOWNBOX_3
</object></TD>
<TD vAlign=top><object>
<param name="OWNER" value="SAP_BW"/>
<param name="CMD" value="GET_ITEM"/>
<param name="NAME" value="DROPDOWNBOX_4"/>
<param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/>
<param name="DATA_PROVIDER" value="DATAPROVIDER_1"/>
<param name="WIDTH" value="22"/>
<param name="IOBJNM" value="0TCTQUERY"/>
ITEM: DROPDOWNBOX_4
</object></TD></TR></TABLE>
<object>
<param name="OWNER" value="SAP_BW"/>
<param name="CMD" value="GET_ITEM"/>
<param name="NAME" value="TABLE_1"/>
<param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_GRID"/>
<param name="DATA_PROVIDER" value="DATAPROVIDER_1"/>
<param name="WIDTH" value="505"/>
<param name="BORDER_STYLE" value="FORM"/>
<param name="ALT_STYLES" value=""/>
ITEM: TABLE_1
</object></P>
<P align=left> </P>
<P align=left> </P><FONT color=#0000ff size=2>
<P align=center></FONT> </P>
<P align=center> </P>
<P align=center> </P>
</body>
</html> -
No distinction between NULL and space
No distinction between NULL and space. When you see the resultset, in PL/SQL developer, you will see that the NULL value is in yellow colour while column data having spaces is in white colour. In the new tool, there is not distinction between the two, so each time we will have to use the NVL function to determine the value in the column, which I would not like to do.
An option in Preferences could be created, so that it was possible to choose as values NULL would be shown, as already it occurs in other tools.
-
How do I select multiple pictures and compact them so there is no space between them?
I know this should be easy, but I am spending a ton of time trying to move 45 pictures in my video closer together...one by one. Is there a way to grab, let's say 20 pictures, and combine or compact them together so there is no space between them? I'm tired of doing it one by one and trying to get it right. Thanks -
Are these connected clips? Probably not at this stage.
If they were connected, and you wanted to shorten each one, the way to do that is to make the connected clips a secondary storyline and then shorten them. The magnetic storyline will pull them up next to each other.
Maybe you are looking for
-
Selection problem with JFormattedTextField
I encounter a problem to select the content of a JFormattedTextField. Here is a class for a dialog containing 2 JFormattedTextFields : * Created on 7 juin 2005 * To change the template for this generated file go to * Window>Preferences>Java>Code Gene
-
Songs are not displayed in my ZEN when they have no Album T
Hi, i got the new Creative ZEN 4GB and a question: I got some Songs which have no Album Tag. These Songs are not displayed in my Player. I have to go in the Folder of the Artist and then into Options and choose "View Tracks", then it is displayed, ot
-
Pagination issues in Word output from RoboHelp HTML 8
Hi All, We're generating a Word document from our online help (RoboHelp HTML 8) with MS Word 2003 installed. The page numbers inserted automatically are wrong in that it's skipping numbers. For example, in scrolling down through the document, the pag
-
I did a comlete system restore now i have no sound
how do i get my sound back on my hp after a coplete restore
-
How can i get my iPhone, ipad mini and mac to show the same contacts calendar and notes
how can i get my iPhone, ipad mini and mac to show the same contacts calendar and notes