Div id without definition in css layout file

Hi,
I noticed that I can insert a div id which doesn't have the corresponding definition in my css file? I don't see any warning from Dreamweaver 4.
<div id="main-content">
Is this allowed? what is supposed to happen in this situation? I was expecting DW to catch this kind of behavior.
Thanks
Hongjun

hjma29 wrote:
Is this allowed? what is supposed to happen in this situation? I was expecting DW to catch this kind of behavior.
Yes, of course it's allowed. It's a very common scenario. You give an HTML element an ID and you then create a style rule to handle it. In fact, IDs are not only used for styles, they are used as "hooks" for JavaScript functions, as well as the target for links (instead of old-fashioned named anchors).
It sounds as though you need to brush up your knowledge of HTML, CSS, and other web technologies. You'll find it makes working with Dreamweaver a lot easier.

Similar Messages

Inserting div in a pre-existing CSS layout

I am trying to add a div tag to an existing CSS style sheet - twoColFixFt Hdr.css. I want to add a second sidebar under the existing sidebar which is floated to the right of the main content. I want the second sidebar to float to the right of the main content div as well, and be positioned under the first sidebar. I tried virtually every combination of inserting this tag in the insert div window, but I cannot get it in the correct position. I also tried positioning as an AP div (it looks fine in Dreamweaver), but when viewed in Firefox or Explorer it's overlapping the copy in the main content. Any help will be appreciated.

1. Go into code view.
2. Find the line of code below (around about line 95)
</div>
3. Wrap another <div> around the 'sidebar1' <div> as shown below:
<div id="sidebarWrapper">
<div id="sidebar1">
    <h3>Sidebar1 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
</div>
</div>
4. Insert another <div> 'sidebar2' directly after the 'sidebar1 <div> as shown below:
<div id="sidebarWrapper">
<div id="sidebar1">
    <h3>Sidebar1 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
</div>
<div id="sidebar2">Sidebar2</div>
</div>
5. Add the below css selector to your existing css:
.twoColFixRtHdr #sidebarWrapper {
float: right;
width: 200px;
overflow: hidden;
6. Amend the 'sidebar1' css to as below:
.twoColFixRtHdr #sidebar1 {
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px;
7. Add the below css selector to your existing css:
.twoColFixRtHdr #sidebar2 {
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px;

Inserting SWF in one of my divs is causing problems with css layout

I am testing code for a new layout including an swf piece in
the center of my page and I can't understand what the issue is.
http://www.ltcproduction.com/ltcproditems.html
I am loosing a lot of my formatting which should look exactly
like
http://www.ltcproduction.com
only with a dynamic piece in the middle
here is the code I am using for the new dynamic page below:
HTML Code:
<html xmlns="
http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>ltcproditems_bleu</title>
<script language="javascript">AC_FL_RunContent =
0;</script>
<script src="AC_RunActiveContent.js"
language="javascript"></script>
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', '
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '750',
'height', '400',
'src', 'ltcproditems_bleu',
'quality', 'high',
'pluginspage', '
http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'ltcproditems_bleu',
'bgcolor', '#ffff99',
'name', 'ltcproditems_bleu',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'ltcproditems_bleu',
'salign', ''
); //end AC code
</script>
</head>
<body bgcolor="#ffff99">




<div id="bar-top"></div>
<div id="content_long">
<h2>Ltc Production</h2>
<?php
include("navbar_insert.php");
?>
<div id="main_container1">
<noscript>
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="750" height="400" id="ltcproditems_bleu" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="ltcproditems_bleu.swf"
/><param name="quality" value="high" /><param
name="bgcolor" value="#ffff99" /> <embed
src="ltcproditems_bleu.swf" quality="high" bgcolor="#ffff99"
width="750" height="400" name="ltcproditems_bleu" align="middle"
allowScriptAccess="sameDomain" allowFullScreen="false"
type="application/x-shockwave-flash" pluginspage="
http://www.macromedia.com/go/getflashplayer"
/>
</object>
</noscript>
</div></div>
<div id="bar-bottom">
<span class="copyright">(c) ltc
production</span></div>
</body>
</html>

move the javascript block that starts with if
(AC_FL_RunContent == 0) { to immediately before the noscript block,
and it should fix your problem.
I may suggest using swfobject:
http://code.google.com/p/swfobject/
to embed your swf. It gives you more flexibility than the adobe
AC_RunActiveContent method.

Add AP Div to CSS Layout...

Hey,
I really need to add an AP Div to my CSS- Layout (3 column
absolutely positioned) ! No problem BUT i need it to shrink and
grow with the other parts of the page (sidebar1/2, main content,
header, footer etc..) In other words, I need a third sidebar in
this "CSS-Set"... How can I "attach" the apDiv's to the other Divs
such as main content, header... ?!
Thx for help !

On Mon, 12 Jan 2009 15:47:54 +0000 (UTC), "hendrik.r."
<[email protected]> wrote:
> I really need to add an AP Div to my CSS- Layout (3
column absolutely
>positioned) ! No problem BUT i need it to shrink and grow
with the other parts
>of the page (sidebar1/2, main content, header, footer
etc..) In other words, I
>need a third sidebar in this "CSS-Set"... How can I
"attach" the apDiv's to the
>other Divs such as main content, header... ?!
The short answer is, you cannot. Absolutely positioned page
elements
cannot interact with other page elements because they are
removed from the
normal flow of the document. That's what makes absolute
positioning a bad
way to do most things.
Gary

CSS layout

Hi
A couple of embarrassingly basic questions but would
appreciate help:
1. I'm using a CSS layout template and need to alter the
position of a div border (to coincide with another border). How do
you physically do this? Can't seem to "drag and drop" the border
2. I've aligned a Heading to the "left" but when I display it
on the browser it either stays to the left or moves to the center
of the div. depending on the size of my window. How do you prevent
this?
3. Currently my html and css codes are in 2 different
(linked) documents. When I publish to the web do I simply load both
files or do I need to copy and paste the css coding into my html
document?
Thanks once again

Posting our code would be helpful
> 1. I'm using a CSS layout template and need to alter the
position of a div
> border (to coincide with another border). How do you
physically do this?
> Can't
> seem to "drag and drop" the border
I'm not sure what you're asking here ... positioning a
border? the div
border is always, well, on the perimeter of the div. Do you
want to move one
edge of the div over 10 px? If so (and assuming its the left
border...) ,
try subtracting 10 px from the div width and giving the div a
margin-left of
10px. As for "drag and drop," what are we dragging? What are
we dropping?
> 2. I've aligned a Heading to the "left" but when I
display it on the
> browser
> it either stays to the left or moves to the center of
the div. depending
> on the
> size of my window. How do you prevent this?
can we see the code here? It sounds to me like you're running
into problems
with an element being set to 500px wide and then a browser
window that is
400px wide. A wide img maybe? I'm only guessing at things
without seeing th
ecode though
> 3. Currently my html and css codes are in 2 different
(linked) documents.
> When
> I publish to the web do I simply load both files or do I
need to copy and
> paste
> the css coding into my html document?
Yep. Just make sure they stay relative to each other in the
same way. In
other words, if both your htm file and css file are in the
same folder on
your local machinge then they must remain in the same folder
on your server.
If your css is in a subfolder called "css" then you need to
make sure your
css file is in a similar subfolder on the server
Alex

Still practicing my CSS layout, and IE 7 issues.

I've revamped my site, and I've been practicing with the last 4 sites or so with mostly CSS layout....definitely a work in progress. My site is the first I've tried with overlapping images and the whole z-index thing. Everything looks great, for the most part. My issue is ALWAYS ie7, and then my issue is monitors with lower screen resolution. My sticky notes are showing up at the top of the page in IE7, looks great in 8. Every other browser seems to look great as well, as long as the resolution of the monitor is higher. I'm hoping someone can help me with positioning my sticky notes, so they don't shove my flash out to the right side of the page. Here's the URL www.theresasheridan.com.
Another site with another IE 7 issue....www.viewcamera.com. Here the issue is that the image in the maincontent div is shoved way down the page. I want to keep my width at 450 px so that I can have my side borders. Anyone have any other suggestions for me pretty please?
Last IE 7 issue (thanks so much), www.losvaquerosridingclub.org. The background color is white under the spry menu, but again...only in IE7.
Thank you!!

You are absolutely right about the validator. Some of it is way beyond me too!
However, it seems to indicate that you have some tag confusion going on there, usually that's about missing a closing element. Fixing that is a good thing because it can screw your layout. Another thing the validator points out is the omission of a few of your alt="" text. That won't muck about with any layout issues but is worth adding if you have the time or inclination. I'm afraid I don't have time to look right now but if I get the chance I'll have a go later.
With your sticky notes, it struck me that you could use absolute positioning. The trick there is to place those elements in to a containing element, set that element to position: relative and then absolutely position the sticky notes using px dimensions where you want them in the page. At the moment, you are using floats on those two parts of the page but again, I haven't quite got the time to look in detail now.
With the float drop thing and width, you would do well to Google "Box Model CSS" or something similar. Width is not just the content width but also takes into account margin, border and padding. When you add those up, the width may be too big for the containing element width which will cause the content to "drop" or to be forced into a space that can accommodate it. The other snag with the Box Model is that different Browsers handle it differently. Sometimes what you need to do to create space in the page is to put padding on the nested element which constrains it's content without affecting the width of the container.
I'm a bit of a novice myself at this and it sounds a lot to get your head around. However there is a a logic to it and once you crack it, it gets easier.
One other tip is to use FireFox browser and get the Firbug plug-in. That lets you view the page in the browser and you can tweak your CSS "live" to get an idea of how things work together. Once you have what you want you then turn to DW to make your edits.
I hope that helps rather than misleads! As I say, I'll try to look later on but in the mean time, an expert might drop by.
And while I'm here, my feeling is that you might have done better to put each of your queries in different threads. Sometimes, to see several questions in one hit is a bit daunting and I think people here tend to leave the longer questions a bit until they have time.
Regards
Martin

CSS Layout in DW CS 3

I'm kinda wondering why the id's are preceded with a class if
you open any of the premade CSS layouts in DW CS3.
example:
Two Columns, all widths in percent, with right sidebar header
and footer.
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;
.twoColLiqRtHdr #container {
width: 80%; /* this will create a container 80% of the
browser width */
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. */
.twoColLiqRtHdr #header {
background: #DDDDDD;
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear beneath it. If an image is
used in the #header instead of text, you may want to remove the
padding. */
.twoColLiqRtHdr #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: 10px 0; /* using padding instead of margin will
allow you to keep the element away from the edges of the div */
/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use
padding on the sidebar. It will be added to the width for standards
compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within
it can be created by placing a left and right margin on those
elements as seen in the ".twoColLiqRtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element
is rendered, you may occasionally run into unexplained bugs with
percentage-based columns. If you need more predictable results, you
may choose to change to pixel sized columns.
.twoColLiqRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must
be given */
width: 24%;
background: #EBEBEB; /* the background color will be
displayed for the length of the content in the column, but no
further */
padding-top: 15px 0; /* top and bottom padding create visual
space within this div */
.twoColLiqRtHdr #sidebar1 h3, .twoColLiqRtHdr #sidebar1 p {
margin-left: 10px; /* the left and right margin should be
given to every element that will be placed in the side columns */
margin-right: 10px;
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created
with the right margin on the mainContent div. No matter how much
content the sidebar1 div contains, the column space will remain.
You can remove this right margin if you want the #mainContent div's
text to fill the #sidebar1 space when the content in #sidebar1
ends.
2. to avoid float drop at a supported minimum 800 x 600
resolution, elements within the mainContent div should be 430px or
smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the
zoom property is used to give the mainContent "hasLayout." This
avoids several IE-specific bugs.
.twoColLiqRtHdr #mainContent {
margin: 0 26% 0 10px; /* the left margin should mirror the
margin on the header and footer for proper alignment. */
.twoColLiqRtHdr #footer {
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear above it. */
background:#DDDDDD;
.twoColLiqRtHdr #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: 10px 0; /* padding on this element will create
space, just as the the margin would have, without the margin
collapse issue */
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right
in your page. The floated element must precede the element it
should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left
in your page. The floated element must precede the element it
should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or
break element and should be the final element before the close of a
container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
take a look at this
.twoColLiqRtHdr #container {
width: 80%; /* this will create a container 80% of the
browser width */
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. */
how do you interpret
.twoColLiqRtHdr #container?
in the code, .twoColLiqRtHdr is a class for the <body>
tag only.
So i guess I just need some enlightenment on how this CSS
works, maybe I'm used to just defining the ID of <div> tags
(ex: #wrapper {}).
Is this use for inline styles only?
what's the advantage of using this type of styles?
I hope someone can take a look at this, thank you in advance!
:)

Yeah.... I can't really see a use for class here at all. But
that's me
(and now you!)....
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
==================
"Thierry | www.TJKDesign.com" <[email protected]>
wrote in message
news:f0lh1l$ng$[email protected]..
> Murray *ACE* wrote:
>> I use this often when I have a single template with
variable layout
>> (i.e., section-specific layouts). You can use either
>> server-scripting or template parameters to change
the ID attribute on
>> the body tag, which will trigger an entirely
different set of CSS
>> selector assignments.
>
> FWIW, I believe it makes more sense to use an ID
attribute - as you do -
> rather than a class on "BODY" as this element is unique
through the
> document.
>
> --
> Thierry
> Articles and Tutorials:
http://www.TJKDesign.com/go/?0
> The perfect FAQ page:
http://www.TJKDesign.com/go/?9
> CSS-P Templates:
http://www.TJKDesign.com/go/?1
> CSS Tab Menu:
http://www.TJKDesign.com/go/?3
>
>

Error in running Extract Definition Upload from Data File concurrent.

Hi all,
Am trying to upload the 834 Extract Layout from the data file by running the concurrent program, Extract Definition Upload from Data File.
After running this concurrent program am getting the Extract Layout definition with Record layout and Data elements within it.
But some record layouts has the changes at their repeating level in that.
Please suggest me how do i get the same repeating levels for the record layouts when i move the 834 benefit extract layout definition
from one instance to another instance.

Hi,
We have exactly the same error in IBolt. This error happens sometime and we don't find the reason.
IBolt has been upgraded to Version 3.1 SP1 and a fix has been developed by the support. After installation, we've work hardly during 2 days for testing all the flows by the customer without having this error.
Ibolt works as a service and when this error occurs, the service stopped and must be restarted.
In our flows, we have put a delete of the observer.dll file just before the rest of the flow but it doesn't solve the problem.
Deleting the directory can be temporarly a solution but the error come back another day.
Each time the SBO client or DTW is started, the %temp%\SMS_OBJ_DLL directory is created...
When you just delete the observer.dll file and leave the rest of the directory like it is, the file is re-created when you start and log to SBO. I would say that this file is a copy of another file observer_800178.dll (800178 depending of the version of SBO yoi have). 800178 corresponds to SBO 2007 A PL 42.
Do you have more information since your post has been send ?
Thanks in advance for your help.
Best regards.

Design view of CSS layout is innacurate

Hello all -
I'm beginning to redraft my company's hompage using a full
CSS layout instead of our current nested table layout. Since I need
to ensure that other staff members can edit pages freely - and I'm
the only person comfortable doing straight code - it's important
that the design view is as accurate as possible.
When editing in Dreamweaver 8, my three column layout (a left
table of contents, a center content column, and an additional
content right column) breaks so that the table of contents
dissapears. Some people have spoken with have suggested that my
problem might be the negative margins I'm using to position the
floated columns that form the meat of the page.
You can view the page here:
http://www.southernenvironment.org/test/home_redraft.html
The CSS is here:
http://www.southernenvironment.org/test/style_redraft.css
In addition, the header navbar also appears strangely. In
Design View, two word titles (ie. "Our Programs") break on to two
separate lines, instead of staying in one line as they do in
browsers I've tested.
The frustrating thing about this is that my design seems to
work in most browsers - but without a somewhat accurate
representation in Dreamweaver, I won't be able to sell the idea of
a standards-based revamp to other staff here.
Any ideas?
Matt

Your CSS is not tight enough to get accurate columns. You
shouldn't try to
define the columns with the body tag. For a purely CSS site,
you really find
out why the code is called 'cascading' styles. They cascade
all right. We've
just finished wrestling with a similar re-design with CSS and
the order of
how tags and files come into play is very important.
We have defined the body tag with background color, 0 margins
and font
family, color and size only. Header/footer and columns are
defined by ID.
The three "content" columns are within a page container,
header and footer
outside the page container. How these elements are placed is
important, as
they cascade.
We use 3 linked main css files, 1) Page Layout (3 or 4
different options) 2)
Page presentation (all text styles) 3) Page menu styles (only
menu styles).
They are in that order, as the only body tag is in Page
Layout.
If a page has a watermarked background we import the code
just for the
watermark.
This is not true for the home page, but all other pages in
the site.
http://www.nic.bc.ca/index.asp
I hope this helps.
Marianne
"homestar79" <[email protected]> wrote in
message
news:[email protected]...
> Hello all -
>
> I'm beginning to redraft my company's hompage using a
full CSS layout
> instead
> of our current nested table layout. Since I need to
ensure that other
> staff
> members can edit pages freely - and I'm the only person
comfortable doing
> straight code - it's important that the design view is
as accurate as
> possible.
>
> When editing in Dreamweaver 8, my three column layout (a
left table of
> contents, a center content column, and an additional
content right column)
> breaks so that the table of contents dissapears. Some
people have spoken
> with
> have suggested that my problem might be the negative
margins I'm using to
> position the floated columns that form the meat of the
page.
>
> You can view the page here:
>
>
http://www.southernenvironment.org/test/home_redraft.html
>
> The CSS is here:
>
>
http://www.southernenvironment.org/test/style_redraft.css
>
> In addition, the header navbar also appears strangely.
In Design View,
> two
> word titles (ie. "Our Programs") break on to two
separate lines, instead
> of
> staying in one line as they do in browsers I've tested.
>
> The frustrating thing about this is that my design seems
to work in most
> browsers - but without a somewhat accurate
representation in Dreamweaver,
> I
> won't be able to sell the idea of a standards-based
revamp to other staff
> here.
>
> Any ideas?
>
> Matt
>

CSS Layout issue!! Help Urgent!!

I am having a problem with creating a css layout, in the past i used tables and am trying to convert my sites for my customers. I have layed out the website using divs and css and it looks great until i put in the cosing of the menu bar. when i put in the coding for the menu bar suddenly the bar has a padding around it but i cannot find a padding that would change this in the css coding. I need this done asap! so please help. ill show my coding below:
this is the div coding:
<div id=Nav>
   <ul class="dropdown" id="Bar"; width: 879px" name="Bar">
         <li class="style16" style="width: 161px; height: 22px">
   <a href="default.html" style="width: 146px">Home</a></li>
         <li class="style10" style="width: 169px; height: 23px">
   <a href="about.html" style="width: 153px">About</a></li>
     <li class="" style="height: 31px; width: 175px; left: 0px; top: 0px">
   <a href="Equipment.html" class="style18">
   <div class="style10" style="width: 156px; height: 20px;">
    Equipment</div>
   </a> <ul class="sub_menu">
            <li><a href="compressor.html">Air Compressors</a></li>
            <li><a href="compactions.html">Compaction</a></li>
            <li><a href="concrete.html">Concrete Equipment</a></li>
            <li><a href="forklifts.html">Fork Lifts</a></li>
            <li><a href="generators.html">Generators</a></li>
            <li><a href="groundthawing.html">Ground Thawing</a></li>
            <li><a href="heaters.html">Heaters</a></li>
            <li><a href="scissorlifts.html">Scissor Lifts</a></li>
            <li><a href="boomlifts.html">Boom Lifts</a></li>
            <li><a href="lighttowes.html">Light Towers</a></li>
            <li><a href="misc.html">Misc.</a></li>
            <li><a href="dirtequipment.html">Dirt Equipment</a></li>
            <li><a href="powertools.html">Power Tools</a></li>
            <li><a href="pumps.html">Pumps | Saws | Welders</a></li>
                 </ul>
         </li>
         <li style="width: 165px"><a href="locations.html">
   <div class="style10" style="width: 154px">
    Locations</div>
   </a>
           </li>
             <li style="width: 180px"><a href="contact.html">
   <div class="style16" style="height: 24px">
    Contact Us</div>
   </a>         </li>
        </ul>
</div>
This is the css coding:
#wrapper {
width: 880px;
margin-right: auto;
margin-left: auto;
background-color: #f4f4f4;
#Navigation {
background-image: url(Images/NAvigation%20BAr.jpg);
background-repeat: no-repeat;
width: 880px;
visibility: visible;
height: 3-px;
vertical-align: top;
Nav {
vertical-align: top;
margin: 0px;
padding: 0px;
clear: both;
height: 20px !important;
#wrapper1 {
width: 876px;
margin-right: auto;
margin-left: auto;
color: #F4F4F4;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
#Bar {
background-repeat: no-repeat;
width: 880px;
height: 28pt;
overflow: visible;
background-image: url(Images/NAvigation%20BAr.jpg);
position: relative;
vertical-align: top;
#container {
width: 880px;
color: #000;
background-color: #EDEDED;
dominant-baseline: 578px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
#content {
float: left;
color: #090;
width: 580px;
padding-right: 6px;
background-color: #033;
margin-top: 20px;
.container {
color: #000;
background-color: #ff6;
width: 876px;
#expect {
height: 164px;
width: 294px;
float: right;
position: relative;
background-color: #C90;
margin-left: 582px;
padding-top: 10px;
#hours {
float: left;
height: 55px;
width: 294px;
line-height: 4px;
word-spacing: normal;
white-space: normal;
display: inline;
letter-spacing: normal;
padding-top: 10px;
font-size: 13pt;
color: #000;
margin-left: 586px;
background-color: #F99;
#footer {
height: 76px;
width: 880px;
background-color: #CC0;
clear: both;
#cards {
float: right;
height: 31px;
width: 294px;
margin-left: 582px;
padding-top: 10px;
background-color: #F36;
#contact {
float: left;
height: 328px;
width: 293px;
word-spacing: normal;
white-space: normal;
line-height: 1px;
color: #000;
display: inline;
font-size: 14pt;
background-color: #FFF;
padding-top: 10px;
margin-top: 20px;
#header {
background-image: url(Images/Proquip%20Logo/Proquip%20logo2.jpg);
background-repeat: no-repeat;
background-position: center center;
width: 885px;
height: 126px;
background-color: #000;
margin-right: 2.5px;
margin-left: 0px;
#wrapper #container #contact p strong {
color: #800000;
font-size: 14pt;
#wrapper #container #contact blockquote p a {
color: #000;
#wrapper #container #expect div {
color: #900;
font-size: 14pt;
font-weight: bold;
#wrapper #container #hours div {
color: #900;
font-size: 14pt;
font-weight: bold;
#box2 {
background-image: url(Images/Option%201/Services/whitebox2.jpg);
#box3 {
background-image:url(Images/Option%201/Services/redbox2.jpg);
background-repeat:no-repeat;
background-position: center center;
#gold {
background-image:url(Images/Option%201/Logos/gold.gif);
background-repeat:no-repeat;
#white {
background-image:url(Images/Option%201/ProQuip-Pics/box1.gif);
background-repeat:no repeat;
#forklift {
background-image:url(Images/Option%201/ProQuip-Pics/34-01-4380.jpg);
background-repeat:no-repeat;
#scissorlift {
background-image:url(Images/Option%201/ProQuip-Pics/jlg-scissor-lifts-21.jpg);
background-repeat:no-repeat;
/* Navigation Menu- Level one */
ul {
list-style: none
ul.dropdown {
font-size: 13pt;
color: #000000;
height: 25px;
text-decoration: none !important;
width: 860px;
position: relative;
vertical-align: top;
ul#Bar.dropdown {
width: 878px;
position: relative;
vertical-align: top;
ul.dropdown li {
font-weight: 600;
float: left;
zoom: 1;
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
display: block;
width: 175px;
color: #000000;
top: 25px;
text-decoration: none !important;
text-align: center;
ul.dropdown a:hover {
color:#cc0000;
ul.dropdown a:active {
color: #000000;
ul.dropdown li a {
display: block;
border-right: 1px solid#333;
color: #000000;
border-right-width: 1px;
text-decoration: none !important;
text-align: center;
ul.dropdown li:last-child a {
border-right:none; /* does not wotk in IE */
text-decoration:none !important; }
ul.dropdown li.hover,
ul.dropdown li.hover {
color: #000000;
position: relative;
height: 28px;
top: 0px;
ul.dropdown li.hover a {
color:#800000;
/* Level Two Navigation */
ul.dropdown ul {
width: 180px;
visibility: hidden;
position: absolute;
top: 100%;
left: 36%;
display: block;
float: left;
color: #000000;
text-decoration: none !important;
height: 25px;
ul.dropdown ul li {
font-weight: normal;
color: #000000;
border-bottom: 1px solid #ccc;
float: left;
border-bottom-color: #c0c0c0;
border-bottom-style: groove;
display: block;
background-color: #dbdbdb;
text-decoration:none !important;
/* IE 6&7 needs inline block */
ul.dropdown ul li a {
border-right: none;
display: inline-block;
height: 18px;
line-height: 16px;
color: #000000;
width: 100%;
text-decoration: none !important;
/* Level Three Navigation */
ul.dropdown ul ul {
top: 100%;
color: #000000;
text-decoration: none !important;
ul.dropdown li:hover>ul {
visibility: visible;
color: #000000;
top: 30px;
text-decoration: none !important;

I have the site using tables up and running, this is a website for a client so I cant make a test site using that domain would it be ok if I screen shot'ed the problem?
Date: Thu, 24 Apr 2014 12:19:44 -0700
From: [email protected]
To: [email protected]
Subject: CSS Layout issue!! Help Urgent!!
    Re: CSS Layout issue!! Help Urgent!!
    created by Jon Fritz II in Dreamweaver support forum - View the full discussion
Well, you're not using position:absolute, so you've got a big thumbs up from a bunch of us for that.
Is there any chance you could post a link to this page on your server? It's much easier to troubleshoot from a browser than it is to rebuild the page from code fragments.
If you haven't gone live with the page yet, create a folder called TEST in your site and save copies of the page and css there. Upload TEST and post a link to it here. Once the problem is found/fixed, delete TEST from the server.
You can also attempt to use Firefox or Chrome to find your issue by right clicking > Inspect Element. All CSS that affects a given element will be displayed with file name and line numbers there.
     Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/6327947#6327947
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/6327947#6327947
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/6327947#6327947. In the Actions box on the right, click the Stop Email Notifications link.
           Start a new discussion in Dreamweaver support forum at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/thread/416458?tstart=0.

Looking for a two-column CSS layout

I am looking for a two-column CSS layout that is centered
with blank space
on the sides, so the layout does not expand across the entire
screen, but
instead uses a portion of it (such as 75%). The left column
would be for
navigation and I haven't decided if I want it to be liquid or
fixed, but the
right column for content would be liquid. There would also be
a heading div
and navigation div across the top and a footer across the
bottom.
While looking for sample sites I keep finding ones that use
three columns,
and I'm worried that if I remove the third column that the
layout will break
at some point, even if I don't see it in my test browsers.
I'm also
discovering that some of the sample pages out there don't
respond well when
I resize the browser window. The columns don't have a minimum
width or they
stack on top of each other at some point.
There are so many different techniques to use when designing
a layout with
CSS, some better than others, that I thought maybe some
people here may
already know what's tried and true and what should be
avoided. Are any
layouts robust enough to allow a third column to be added at
a future date
if needed? I also like the idea of putting the content div
first in the
code, to improve search engine indexing and also to aid those
who may be
using a screen reader, but if that feature makes the coding
much more
complex then I could see why I might avoid it for now.

Sorry Nancy, I didn't see your post for some reason. At least
we agree (o:
Jo
"josie1one" <[email protected]> wrote in message
news:g4tv32$57f$[email protected]..
>I have DW8 and am very happy with this:
>
http://projectseven.com/products/templates/pagepacks/cssmagic/index.htm
>
>
> --
> Jo
>
>
> "Matt" <[email protected]> wrote in message
> news:g4tg96$isq$[email protected]..
>>I am looking for a two-column CSS layout that is
centered with blank space
>>on the sides, so the layout does not expand across
the entire screen, but
>>instead uses a portion of it (such as 75%). The left
column would be for
>>navigation and I haven't decided if I want it to be
liquid or fixed, but
>>the right column for content would be liquid. There
would also be a
>>heading div and navigation div across the top and a
footer across the
>>bottom.
>>
>> While looking for sample sites I keep finding ones
that use three
>> columns, and I'm worried that if I remove the third
column that the
>> layout will break at some point, even if I don't see
it in my test
>> browsers. I'm also discovering that some of the
sample pages out there
>> don't respond well when I resize the browser window.
The columns don't
>> have a minimum width or they stack on top of each
other at some point.
>>
>> There are so many different techniques to use when
designing a layout
>> with CSS, some better than others, that I thought
maybe some people here
>> may already know what's tried and true and what
should be avoided. Are
>> any layouts robust enough to allow a third column to
be added at a future
>> date if needed? I also like the idea of putting the
content div first in
>> the code, to improve search engine indexing and also
to aid those who may
>> be using a screen reader, but if that feature makes
the coding much more
>> complex then I could see why I might avoid it for
now.
>>
>
>

CSS Layout problems

I should start this by saying I am very new to CSS layouts,
and am self taught, so I'm probably doing something very wrong. So
far I've stuck to really simple layouts and had no problems...but
they were very simple layouts.
With the site I'm doing at the moment I have placed other
div's inside a content div, so that I can have left and right hand
content within the content div. But the left and right div's are
not pushing the content div down with their content, and I'm not
sure what else to try to get it to work.
I've tried setting the height of the content div to auto or
inherit but that doesn't work.
As you can see on the main page of the site I'm using a
background image in the content cell.
http://members.westnet.com.au/zelky/surfschoolnew/index.html
And if you look at the details page you can see what I am
trying to describe. The content div not pushing down with the left
and right content div’s contents means the background image
is just a few pixels deep under the nav div.
http://members.westnet.com.au/zelky/surfschoolnew/details.html
And my pathetic CSS/stylesheet is here:
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
Thanks in advance and hopefully my mess isn’t’ to
hard to look at. As I said I'm a bit lost so hopefully I'm not
going to confuse anyone with my "home made" skills.

When you 'float' elements on your page you effectively remove
them from
the normal flow of the document, therfore the 'content'
<div> thinks
nothing is inside it. You need to help it by 'clearing' the
floats.
There are various methods for clearing floats.
Insert a 'clearing' <br> (shown below) into your pages
code directly
AFTER the closing 'right' container tag and BEFORE the
closing 'content'
container tag.
</div>
<br style="clear: both;" />
</div>
zelky wrote:
> I should start this by saying I am very new to CSS
layouts, and am self taught,
> so I'm probably doing something very wrong. So far I've
stuck to really simple
> layouts and had no problems...but they were very simple
layouts.
>
> With the site I'm doing at the moment I have placed
other div's inside a
> content div, so that I can have left and right hand
content within the content
> div. But the left and right div's are not pushing the
content div down with
> their content, and I'm not sure what else to try to get
it to work.
>
> I've tried setting the height of the content div to auto
or inherit but that
> doesn't work.
>
> As you can see on the main page of the site I'm using a
background image in
> the content cell.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/index.html
>
> And if you look at the details page you can see what I
am trying to describe.
> The content div not pushing down with the left and right
content div?s contents
> means the background image is just a few pixels deep
under the nav div.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/details.html
>
> And my pathetic CSS/stylesheet is here:
>
>
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
>
> Thanks in advance and hopefully my mess isn?t? to hard
to look at. As I said
> I'm a bit lost so hopefully I'm not going to confuse
anyone with my "home made"
> skills.
>
>

CSS Layout Nightmare!

OK, I've recently decided to convert from table based layout to div layouts using CSS. I'm pretty proud of the outcome and found it a nice approach to designing. HOWEVER, when i click to edit pages in contribute, it strips out all of the css outline visual aids (like you see in wysiwig editors like Dreamweaver). This is going to be a major problem for my client and wysiwig style editing. Does anybody know how i can get contribute to display this in edit mode and also the best option for my client to select divs in order to copy and paste content. This would be pretty easy in table based layout as contribute lets you select a table and copy and paste it. Ideal way for my client to copy and paste additional news items same format. Any help would be gratefully appreciated. Thanks in advance.

Not.
Walt
"SamDesign.be" <[email protected]> wrote in
message
news:ets71o$ark$[email protected]..
> Hallo Brandon,
> Make de "<div id="divContent">" smaller
> Sheers
> www.SamDesign.be
>
>
> "Brandon" <[email protected]>
a écrit dans le message
> de news: ets5tg$9fo$[email protected]..
>> Working on CSS Layout for the first time (always
have used Tables) . . .
>> can you look at the page below (in initial stages)
and tell me how I can
>> move everything UP? It's driving me crazy. The
picture in the center
>> needs to come up, the main nav buttons need to move
up, and the "boxes"
>> in the left column all need to move up under each
other.
>>
>>
http://www.presentationsdirect.com/2007/
>>
>> --
>> Brandon
>>
>>
>
>

Css layout problems - css and tables

Hi guys,
Well as some of you suggested months ago, I've been trying to
learn to layout with CSS... It's actually getting a bit rewarding
now as I start to figure a few things out but there's still plenty
of questions!!!
If anyone can take a look at what I'm working on at the
moment and give me some help I'd REALLY REALLY appreciate it!!
My main trouble (I think) is working with a drop-down menu
system that I found on the web and I'm dying to use it because it's
perfect for this design. It's layed out using a table so I'm trying
to incorporate that...
Click
[url=http://home.iprimus.com.au/jediwdog/ltc/mockup2.jpg]here[/url]
for a picture of what i'm trying to get this page to look like and
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.html]here[/url]
to see how far I've got. You can download the stylesheet from
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.css]here[/url].
Here's what I need to know:
1. I'm trying to push the table down so it looks better lined
up with the logo but when I tell it to be further from the top, it
doesn't seem to move. Any ideas on why?
2. As you can see, I've inserted some blank space into the
middle of the menu so that the logo doesn't cover any of the menu
items. I can't seem to get the same 1px black border on this
section.
I assume this is because the border on the other parts is a
layer/div border? Will I have to somehow put a div in there so as
to create the same border effect?
3. I'd really like to keep the header and footer visible at
all times, even if there's lots of content to scroll through. I
found this:
http://www.cssplay.co.uk/layouts/basics2.html#Top
but when I tried to implement this on my page, it all went haywire!
Is this going to be a possibility?
4. I guess other than that, have I completely stuffed this
up!? I don't think I have but it's worth asking I guess!
THANKS IN ADVANCE! I'm really loving using css layout rather
than tables - it's soooo much more versatile. I just need to get
past some obstacles I think!
Cheers
Neil

On Wed, 24 Jan 2007 22:17:20 +0000 (UTC), "Barb S."
<[email protected]> wrote:
>Ok, I made your suggested changes and have this:
>
> body {
> font-family: Georgia, "Times New Roman", Times, serif;
> text-align: center;
> font-size: 1em;
> font-style: normal;
> text-decoration: none;
> top: 15px;
> background-image:
url(/images/backgrounds/background1.gif);
> padding-top: 15px;
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
>
> #body {
> margin: 0 auto;
> text-align:left;
> width: 760px;
> padding-right: 20px;
> padding-bottom: 20px;
> padding-left: 20px;
> background-color: #FFFFCC;
> padding-top: 20px;
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 1em;
> color: #003366;
>
> }
>
>
http://www.japanesetemari.com
>
> The page is on the left size of the screen and the
yellow box does not expand
>out. Not exactly what I'd wanted. I like to take
advantage of larger screens
>and have the page expand out but not so far out so the
lines of text are real
>long.
> Barb
It's this in the body style that is limiting the width -
change that
to 100%
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
~Malcolm N....
~

CSS layout box model?

Hi, I'm using Dreamweaver cs4. I downloaded a diablo 3
fansite kit from blizzard, and was looking at their code &
style sheets and such for reference while learning to use DIV to
layout new websites. I pretty much have the same DIV box going for
all the content in the middle. But when i click on their DIV box,
it shows margin on the left and the right, and while in design
view, automatically centers their DIV box.
I created a page, setup a div box 1000px wide, centered it,
and it does not give me a preview of it centered while in design
view, nor does it show me the margins & padding (displays
diagonal white transparant stripes where the padding & margins
goes). i made sure i clicked the "CSS Layout Box Model" in the
visual aid menu, but it does not want to work on my page, yet i can
turn it on and off on the fan site index page. How do i make it
work on my page?
Thx

Which page? Can we see the other one too?
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
==================
"ZzarkZul" <[email protected]> wrote in
message
news:[email protected]...
> Heres the code for the .css document.
>
>
>
> /* Stylesheet 1 -------------------------------*/
>
> body { margin:0; font:12px Tahoma; color:#FFFFDD;
> background:url(../images/bg1.jpg) 50% 0 #170f05
repeat-x; }
>
> #ev_bg {
> background:url(../images/ev_bg1.gif) repeat-y;
> width:1064px;
> margin:auto;
> }
> #everything { width:1000px; margin:0 32px;
> background:url(../images/stone-dark.jpg); border:1px
solid black;
> border-width:0px 1px; }
>
> #header { height:162px;
background:url(../images/d3_header1.jpg) right
> no-repeat; padding:0 20px; }
> #header h1 {
> padding-top:115px;
> margin:0;
> color:white;
> }
>
> #middle { clear:both;
background:url(../images/borderb1.gif) repeat-x;
> padding:20px 10px; }
>
> #left_column { width:195px; float:left; }
> .horizontal #left_column { width:auto; float:none; }
> #navigation a { background:url(../images/button_bg1.gif)
no-repeat;
> width:170px; height:25px; display:block;
padding-left:25px; margin:5px 0;
> font-size:13px; color:white; text-decoration:none;
line-height:25px;}
> #navigation a:hover { background-position:0 bottom; }
> .horizontal #navigation a { float:left; }
> #more_information { padding-top:15px;}
>
> #middle_column { float:left; width:50%; margin:0px 20px;
> #middle_column.two_column { float:left; width:75%; }
> .horizontal #middle_column { width:auto; float:none; }
> .date_break { font-size:19px; border-bottom:1px solid
#680808;
> margin-bottom:10px; }
> .post { background:url(../images/leather-heavy.jpg);
border:1px solid
> #221100; margin-bottom:35px; line-height:18px; }
> .post h1 { background:url(../images/title_bg1.gif)
repeat-x #0d2368;
> padding:2px 10px; margin:0; font-size:15px;
color:white;}
> .post_body { padding:5px 15px; }
> .post .postedby { float:left; clear:both; }
> .post .timestamp { float:right }
>
> ul { margin:20px; padding:10px; }
> li { list-style:none;
background:url(../images/bullet.gif) 0 5px
> no-repeat;
> padding-left:30px; line-height:25px; }
> .list_left, .list_right { width:48%; float:left }
>
> .post_info { clear:both; padding-top:10px; }
>
> #right_column {
> width:26%;
> float:left;
> }
> .box { background:url(../images/leather-vdark.jpg);
border:1px solid
> #545454; margin:10px 0 25px 0; padding:10px; }
>
> #footer { clear:both; padding:20px }
> #subnav { margin:10px 0;}
> #subnav a { color:#7A0C0C; }
> #subnav a:hover { color:#E51414 }
> .copyright { font-size:10px;}
>

Div id without definition in css layout file

Similar Messages

Maybe you are looking for