Div tags and text decorations

Hello,
Is there a way to control the a:link text decoration/color within a div tag? It seems as thought the Page Props is the only place, hence controlling everything on the page.
Thank you!!!!!!

Okay so I go to a doctor's aqppointment and look at all the action on this thread.
Just to flesh this out a bit more.
I'd only add one other thing you may not be aware of (not you Murray, rather Esther). You can also have links appear different based on the part of the page they are on. If you have a div, as one example, on the page, you can style all the links in that div, to which you have applied an id="oneID" thusly:
div#oneID a:link {
     color:red;
     text-decoration:none;
     border-bottom: dotted 1px green;
and in another part of the page, say in an unordered list with an id="anotherID":
ul#anotherID a:link{
     color:blue;
     text-decoration:overline;
And of course Murray, you were correct, as usual, in divining the OP's query.
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

Similar Messages

Trying to make sense of div tags and css

i know that i am a few years late here, but i am looking ot make the migration from using tables and switching over to div tags and css. i have watched a few tutorials on you tube and am trying to understand everything.
please tell me if this is correct. a div tag is basically a table and css is what is used to style that div tag to meet your needs, is this a correct assumption??
if you go to my current site www.tankinz.com you can clearly see that the site is made up of tables, basically these boxes or tables contain a different item or package that a customer can click on and buy. by using div tags and css would each of these boxes, or tables be their own div?
sorry for sounding a bit moronic but i am trying to make sense of all of this.
please help!

Markup (html) contains elements, such as html, body, h1, h2, p, span, div and so forth. Hence a <div>-tag is part of an element; the other part being the </div>-tag.
The element structure of many web sites is basically (using HTML5 element names)
html
     head
     body
          header
          nav
          aside
          article
          footer
These elements can be positioned and styled using style rules (css). Depending on the style rules, the above structure can take on many different styles, without ever touching the markup.
Have a look here for a simple two-column layout using the same structure as above http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Div tag with text and image verticaly centered

I am having a problem with vertically aligning an image with
a text line in a div tag using an external CSS file.
Any help would be appreciated

quote:
Originally posted by:
Night_Ripper
You can simply do this:
ProdDimensions img {vertical-align:middle;}
Or you can use an un-ordered list that has your arrow
embedded as a background image, something like this:
.ProductList ul {list-style-image:
url(Arrow.gif);list-style-position:outside;list-style-type:none;text-align:left;}
.ProductList li {margin:0;}
wrap your unordered list around a div with the class
ProductList (or whatever you want to call it) and it will display
with the arrows in the middle of the text.
Another way to do it would be to set a background image on
ProdDimensions class like this:
background: url(Arrow.gif) left center
no-repeat;padding-left:21px;
That will simply put a background image to the left middle of
your div, the padding will ensure the text is not on top of the
arrow.
I used your idea of using the arrow as the div bg and it
worked like a charm.
Thank you very much for your help!

Help needed creating vertical bullet list using div tag and css

Hi,
I think there is something quite fundamental that I'm missing when using div tags - I seem to keep running into problems with them.
I'm trying to create a vertical bullet list. It works fine when I try the code on its own as follows:
<!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">

</style>
<head>
</head>
<body>
<div id="techlistcontainer">
<ul id="techlist">
          <li>Java Messaging Service (JMS)</li>
          <li>Message Driven Beans </li>
          <li>Remote Session EJBs with multi-threading</li>
          <li>Message Oriented Middleware(MOS) such as Websphere MQ series, Mercator with SAP/ERP</li>
          <li>XML messaging</li>
          <li>CORBA (Common Object Request Broker Architecture), RMI (Remote Method Invocation)</li>
    </ul>
</div>
</body>
</html>
http://www.pa-solutions.co.uk/vertical_list.html
When I insert that into my site template page, its all over the place:
http://www.pa-solutions.co.uk/development.html
I've put the css code into a seperate file http://www.pa-solutions.co.uk/pas.css - I get the same results when its embedded into the html doc.
Please help before I pull all my hair out.
Thanks,
Phil.

Unless you know what you're doing with absolute positioning, avoid absolute positioning! Absolute positioning actually takes an element out of the normal HTML document flow and positions it absolutely in relationship with it's first parent with a position other than static - for details read the HTML specs at the W3C.
Ideally you should use the normal HTML document flow. Divs are block level elements meaning that they act like blocks that take up a height (determined by children content) and width (the full width of the page or it's parent container, unless you tell it otherwise).
For your CSS try this:
#techlistcontainer {
    width: 75%;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 30;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 30;
How does that work with your templates?

Can you place an image in a div tag and then add type over top of it?

I told someone in class lastweek that I wanted to be able to
place type over an image. They said you can just add the image into
the div tag as a background image, which will allow you to then
type over it if you like. How is this done? I have tried and
failed. I have an image that is 200x590 going down the left side of
my page. I want to run type over it, and keep the image consistent
on every page, but change the header and type. I've seen this in
several sites. How do you do this with the div tag box model method
of building a page. Can I insert an image into the div and then run
type over it. What does the code look like?

Here's an example of using a css and a background image to a
table cell...
sample principle for a div
#div {styles go here{
http://tinyurl.com/yqeptp
You may also want to go through the beginner css tutorials at
the Adobe
site:
http://www.adobe.com/devnet/dreamweaver/css.html
(pay attention to the ones
by Adrian), beginner moving onto to creating full css
layouts.
Hope this helps :-)
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Forum Posting Guidelines:
http://www.adobe.com/support/forums/guidelines.html
>I told someone in class lastweek that I wanted to be able
to place type
>over an
> image. They said you can just add the image into the div
tag as a
> background
> image, which will allow you to then type over it if you
like. How is this
> done?
> I have tried and failed. I have an image that is 200x590
going down the
> left
> side of my page. I want to run type over it, and keep
the image consistent
> on
> every page, but change the header and type. I've seen
this in several
> sites.
> How do you do this with the div tag box model method of
building a page.
> Can I
> insert an image into the div and then run type over it.
What does the code
> look
> like?
>

DW Beginner - Tables, Div Tags and CSS Confusion

Hi,
I am a beginner to DW. The layout I am designing is as follows:
First I have an overall "container" on the outside of my layout which I called "wrapper" and I made it using a div tag.
Next I made a table within or right after this "wrapper" div tag, which I called my "navbar".
After this table I made another table named left and right column (r:1 cz:2).
And lastly, another table, called "footer".
Now, I made a CSS for the div tag, no problem. But, when I go to make CSS for the tables, that's where it gets confusing.
For example, I went into my "navbar" table, selected on the "trail" <td>, and then tried to create a CSS for this particular table.
Problem: Why when setting my font or background or any other setting, are the other 2 tables changing also if I only assigned this specific area for the CSS navbar table? Am I selecting the wrong "trail" or is it because it is still entrapped somehow in the "wrapper" div tag, so it won't allow my new CSS settings? I would appreciate any help. This can really get confusing fast, especially for us beginners trying to learn.
Thanks,
S

Since you're new to DW, I'm assuming you're new to HTML and CSS, too. So start by learning code basics first and you'll have a much easier time understanding DW.
Begin here:
HTML & CSS Tutorials - http://w3schools.com/
CSS layouts are much more flexible than tables. Below are some example of CSS layouts (no tables needed)
http://alt-web.com/TEMPLATES/I-page-with-floats.html
http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml
http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
From Tables to CSS Web Design Part 2 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html
Good luck,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com
How To get Help Quickly in DW Forums
http://forums.adobe.com/thread/470404

Text in Div tag question

hello Dreamweavers.
I have made a Div Tag and placed and image within it. Im also copy/pasting lorum ispum text in the div tag.
what id like to know is,why does DW put the text down the bottom and not from the top where the red arrow is.
So how can I add text from the top of the image?
thank you.

Try the following
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.banner {
    width: 600px;
    margin: auto;
.banner img {
    display: block;
    float: left;
    margin-right: 15px;
.banner p {
    margin-right: 15px;
.banner p span {
    font-weight: bold;
</style>
</head>
<body>
<div class="banner"> <img src="_images/top_back8.jpg" alt="img">
<p><span>Lorem Ipsum</span> is the exploitation of core competencies as an essential enabler, measure the process, not the people. Building a dynamic relationship between the main players. As knowledge is fragmented into specialities an important ingredient of business process reengineering whether the organization's core competences are fully in line, given market realities. The three cs - customers, competition and change - have created a new world for business highly motivated participants contributing to a valued-added outcome.</p>
</div>
</body>
</html>
I like to keep it simple and restrict the use of ID's

Hidden and visible div tags, transparence and links - HELP....

I am showing different products in div tags that are controlled by simple javascript. I would like to add text links to open a new div tag about the related products, but also hide the original div tag that the link is placed on.
Please check this page out
http://www.aestheticgroup.fr/New/Inex/Inex_lipoAspirationR.html
and then click on the image for
CANULES D’ASPIRATION PROXIMALE
and then click on the text link:
manche BD 300 10
You will understand my problem. I'm trying to make this div tag (Canule d’aspiration Proximale) disappear instead of having them stack one on top of the other.
Do you have an idea of how I can add multiple functions to one click (close the div tag and open a new one at the same time)?
Thank you for your help!
Sooooophie

Hi Sophie,
I downloaded your site and yes, there was a typo in the script...
The script should read...
var curOverlay = null;
function overlay( aOly) {
var el = document.getElementById(aOly);
if (curOverlay) curOverlay.style.visibility = "hidden";     // THIS LINE HAS CHANGED
if (curOverlay != el) {
    el.style.visibility = "visible";
    curOverlay = el;
else
    curOverlay = null;
I also realize that wherever you call an overlayXX function that you are currently using, you'll need to replace it with a call to overlay('overlayXX')
I needed to add this to your onclick attribute for the close button... I tested this and it seems to work for the existing page.
here are the snippets from your page that I changed
      <div id="Groups02"><a href='#' onclick='overlay("overlay02")' onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','images/LipoReutilisable02B.jpg',1)"><img src="images/LipoReutilisable02.jpg" name="Image21" width="170" height="120" border="0" id="Image21" /></a>
        <p>CANULES D’ASPIRATION <br />
        UN ORIFICE</p>
      </div>
and for the close button:
   <div id="close02"><a href='#' onclick='overlay("overlay02")' onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','images/close.jpg',1)"><img src="images/close02.jpg" name="Image43" width="72" height="20" border="0" id="Image43" /></a></div>
You'll need to change this wherever you reference each overlay, in this case, it was for overlay02. The good news is you'll only need this function and not one function per overlay as you have now.
As I said in the previous post, I am off on vacation for a little over a week.
Good Luck!

Difference betwen AP div and normal div tags

Hi,
I am New to CSS, well i know a little theory about but now is
the first time iam going to do a complete project with it. I want
some general relfexions from experienced users:
- When do you use AP div tags and when not?
- Which is the best normal div tags or AP divs?
Thank you

"mballom3" <[email protected]> wrote in
message
news:ggj2v7$t5f$[email protected]..
> Hi,
>
> I am New to CSS, well i know a little theory about but
now is the first
> time
> iam going to do a complete project with it. I want some
general relfexions
> from
> experienced users:
>
> - When do you use AP div tags and when not?
> - Which is the best normal div tags or AP divs?
AP = absolutely positioned.
Here's a demo of the various types of positioning in action:
http://www.great-web-sights.com/g_layersdemo.asp
and here's a little bit of explanation:
http://www.pactumweb.com/tutorials/css-p.php
The short of it is that absolute positioning looks really
tempting to those
who think their sites should be pixel-precise... but there
are far too many
sharks in the water if you don't know what you're doing. I
certainly
wouldn't recommend starting there; AP is a useful tool when
used
knowledgeably and sparingly. It is much wiser to start off my
learning how
to use floats.
Tim G.
http://www.pactumweb.com
http://www.shortordersite.com

Div tags - changing link properties

Hi,
My page has two colors. In the top is the navigation and the
links need to be white due to the dark background. I did not plan
to use links in the body itself, but have been forced. The body
color is #efe9d1 and my links need to be dark. I am trying to use a
different style I named .bodylink to accomplish this. I have used a
div tag, and I am having the following problems. On my design view
of the page all my linked fonts are bold and white. When I view it
in my browser the navigation fonts are not bold and the second link
is correct. (note: in design view the body does not view correctly,
but the navigation does)
My script is attached.
Please tell me what I am doing wrong.

Read these -
http://www.thepattysite.com/linkstyles1.cfm
http://www.projectseven.com/tutorials/pseudoclasses/index.htm
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
==================
"Little Ricky Productions"
<[email protected]> wrote in message
news:fntbk0$qkm$[email protected]..
> Hi,
>
> My page has two colors. In the top is the navigation and
the links need
> to be
> white due to the dark background. I did not plan to use
links in the body
> itself, but have been forced. The body color is #efe9d1
and my links need
> to
> be dark. I am trying to use a different style I named
.bodylink to
> accomplish
> this. I have used a div tag, and I am having the
following problems. On
> my
> design view of the page all my linked fonts are bold and
white. When I
> view it
> in my browser the navigation fonts are not bold and the
second link is
> correct.
> (note: in design view the body does not view correctly,
but the navigation
> does)
>
> My script is attached.
>
> Please tell me what I am doing wrong.
>
> a:link {
> color: #FFFFFF;
> text-decoration: none;
> font-weight: bold;
> font-family: Verdana, Arial, Helvetica, sans-serif;
>
> .bodyLink {
> color: #a14e23;
> text-decoration: none;
> font-weight: bold;
> font-family: Verdana, Arial, Helvetica, sans-serif;
>
> <tr>
> <td align="left"
valign="bottom"><div><p><a
> href="mediavision.html" target="_blank"
>
class="bodyLink">Attendees•Articles•Videos</a></p></div></td>
> </tr>
>

Gap around div tag

Hello Dreamweavers.
Ive made a div tag and Ive centered it in the middle of my page. But on the top there is a gap.
Ive seen some articles where it says to add:
margin: 0;
padding: 0;
Im doing so, but im still getting that gap on the top.
this is my CSS
#box1 {
          background-color: #00F;
          height: 200px;
          width: 600px;
          padding: 0px;
          margin: auto;
I have margin to Auto in order to center the box, is this correct?, there for I add the 0 padding in order to get rid of the gap.

You could try adding the following to the top of the CSS
    margin: 0;
    padding: 0;
or better still, add a normalise script as in
/*! normalize.css v1.1.1 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
audio:not([controls]) {
    display: none;
    height: 0;
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
[hidden] {
    display: none;
/* ==========================================================================
   Base
   ========================================================================== */
* 1. Prevent system color scheme's background color being used in Firefox, IE,
*    and Opera.
* 2. Prevent system color scheme's text color being used in Firefox, IE, and
*    Opera.
* 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 4. Prevent iOS text size adjust after orientation change, without disabling
*    user zoom.
html {
    background: #fff; /* 1 */
    color: #000; /* 2 */
    font-size: 100%; /* 3 */
    -webkit-text-size-adjust: 100%; /* 4 */
    -ms-text-size-adjust: 100%; /* 4 */
* Address `font-family` inconsistency between `textarea` and other form
* elements.
html,
button,
input,
select,
textarea {
    font-family: sans-serif;
* Address margins handled incorrectly in IE 6/7.
body {
    margin: 0;
/* ==========================================================================
   Links
   ========================================================================== */
* Address `outline` inconsistency between Chrome and other browsers.
a:focus {
    outline: thin dotted;
* Improve readability when focused and also mouse hovered in all browsers.
a:active,
a:hover {
    outline: 0;
/* ==========================================================================
   Typography
   ========================================================================== */
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
h1 {
    font-size: 2em;
    margin: 0.67em 0;
h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
h3 {
    font-size: 1.17em;
    margin: 1em 0;
h4 {
    font-size: 1em;
    margin: 1.33em 0;
h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
abbr[title] {
    border-bottom: 1px dotted;
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
b,
strong {
    font-weight: bold;
blockquote {
    margin: 1em 40px;
* Address styling not present in Safari 5 and Chrome.
dfn {
    font-style: italic;
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
* Address styling not present in IE 6/7/8/9.
mark {
    background: #ff0;
    color: #000;
* Address margins set differently in IE 6/7.
p,
pre {
    margin: 1em 0;
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
* Improve readability of pre-formatted text in all browsers.
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
* Address CSS quotes not supported in IE 6/7.
q {
    quotes: none;
* Address `quotes` property not supported in Safari 4.
q:before,
q:after {
    content: '';
    content: none;
* Address inconsistent and variable font size in all browsers.
small {
    font-size: 80%;
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
sup {
    top: -0.5em;
sub {
    bottom: -0.25em;
/* ==========================================================================
   Lists
   ========================================================================== */
* Address margins set differently in IE 6/7.
dl,
menu,
ol,
ul {
    margin: 1em 0;
dd {
    margin: 0 0 0 40px;
* Address paddings set differently in IE 6/7.
menu,
ol,
ul {
    padding: 0 0 0 40px;
* Correct list images handled incorrectly in IE 7.
nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
/* ==========================================================================
   Embedded content
   ========================================================================== */
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
* Correct overflow displayed oddly in IE 9.
svg:not(:root) {
    overflow: hidden;
/* ==========================================================================
   Figures
   ========================================================================== */
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
figure {
    margin: 0;
/* ==========================================================================
   Forms
   ========================================================================== */
* Correct margin displayed oddly in IE 6/7.
form {
    margin: 0;
* Define consistent border, margin, and padding.
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
*    and Chrome.
* 3. Improve appearance and consistency in all browsers.
button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
button,
input {
    line-height: normal;
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
button,
select {
    text-transform: none;
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
*    `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
*    Known issue: inner spacing remains in IE 6.
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible; /* 4 */
* Re-set default cursor for disabled elements.
button[disabled],
html input[disabled] {
    cursor: default;
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
*    Known issue: excess padding remains in IE 6.
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
*    (include `-moz` to future-proof).
input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
* Remove inner padding and border in Firefox 3+.
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
/* ==========================================================================
   Tables
   ========================================================================== */
* Remove most spacing between table cells.
table {
    border-collapse: collapse;
    border-spacing: 0;

What's wrong with my div tag / site won't center....

Hi,
I am re-designing a website and I cannot get it to center. I created a div tag and id it "wrapper" and created a css rule. I am sure its a simple mistake, but I cannot figure it out.....
Here is the CSS rules...
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
          margin: 0px;
          padding: 0px;
#wrapper{
          margin: 0, auto;
          background-color: #9B9E6B;
ul {
          list-style: none;
table#content1{
          background-color: #00C;
          background-image: url(_images/content_bgrnd.png);
          background-repeat: no-repeat;
          font-family: "Arial Black", Gadget, sans-serif;
          font-size: 20px;
          text-align: center;
          padding: 8px;
Here is the code for the site......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kiahuna 104</title>
<script type="text/javascript">

</script>
<link href="104.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('_images/buttinside1.jpg','_images/buttproperty1.jpg','_images/b uttactivities1.jpg','_images/buttdining1.jpg','_images/buttcontacts1.jpg','_images/home_lg 1.png','_images/home_lg2.png','_images/home_lg3.png','_images/home_lg4.png','_images/home_ lg5.png','_images/home_lg6.png','_images/home_lg7.png','_images/home_lg8.png')">
<div id="wrapper">

<table id="header">
<div class="header"><img src="_images/newLOGO.jpg" alt="Kiahuna 104" width="1000"/>
</div>

<table width="1000" bgcolor="000">
<tr>
    <td width="40"> </td>
    <td width="150"><a href="inside.htm"><img src="_images/butthome1.jpg" alt="home1" name="home1" id="home1" /></a></td>
    <td width="150"><img src="_images/buttinside2.jpg" alt="inside2" name="inside2" id="inside2" onmouseover="MM_swapImage('inside2','','_images/buttinside1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="property.htm"><img src="_images/buttproperty2.jpg" alt="property2" name="property2" id="property2" onmouseover="MM_swapImage('property2','','_images/buttproperty1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="activities.htm"><img src="_images/buttactivities2.jpg" alt="activities2" name="act2" id="act2" onmouseover="MM_swapImage('act2','','_images/buttactivities1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="dining.htm"><img src="_images/buttdining2.jpg" alt="dining2" name="dining2" id="dining2" onmouseover="MM_swapImage('dining2','','_images/buttdining1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="contact.htm"><img src="_images/buttcontacts2.jpg" alt="contact2" name="contact2" id="contact2" onmouseover="MM_swapImage('contact2','','_images/buttcontacts1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
</table>

<table id="content1" table width="1000" height="371">
<tr>
    <td width="34"> </td>
    <td width="897"><p>blah blah blah.</p>
      <p class="center2">NEW: IN-CONDO WASHER & DRYER - COMPLETELY NEW FURNITURE</p></td>
    <td width="53"> </td>
</tr>
</table>
</body>
</html>

I tried to assign a width in both the page and CSS and it still doesn't center. Here is a link to the site and the CSS....
http://taffyproductions.com/test/
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
          margin: 0px;
          padding: 0px;
#wrapper{
          margin: 0, auto;
          background-color: #000;
ul {
          list-style: none;
table#content1{
          background-color: #00C;
          background-image: url(_images/content_bgrnd.png);
          background-repeat: no-repeat;
font-size: 16px;
          font-family: Papyrus, Arial, "Helvetica Bold", serif;
          font-size: 22px;
          text-align: center;
          padding: 8px;
table#imagegallery{
          background-image: url(_images/imageGallery_bckgrnd.png);
          background-repeat: no-repeat;
#imagegallery a img{
    padding: 0px;
    margin: 2px;
    border: 2px solid #000;
#imagegallery a:hover img {
          border: 2px solid #C00;
table#footer{
          background-image: url(_images/footer_bckgrnd.png);
          background-repeat: no-repeat;

AP Div Tag Issue

Hello Everyone,
I am working on this page:
http://www.paulargoescreens.com/300rps2dt40.shtml
The problem is that I am using a AP Div for the
saw_blade.jpg. The bottom of the teal paper needs to be level with
the bottom line of text in the description area.
I am not very familiar with div tags and cold use some help.
Any idea why it is showing up at the bottom of the page? I placed
it correctly in Dreamweaver CS3 but when it uploaded and checked it
of course this is what I got.
should I figure out what the x and y coordinates are and try
to do something to it that way?
Help!
Scott
null

Never happen. Look at the page in Firefox, and bump the text
size up a tick
or two. Note how the text expands downward. You will be
trying to nail
jelly to a tree....
Why do they need to match?
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
==================
"SCbeekeeper" <[email protected]> wrote in
message
news:f6mdll$k12$[email protected]..
> Hello Everyone,
>
> I am working on this page:
>
>
http://www.paulargoescreens.com/300rps2dt40.shtml
>
> The problem is that I am using a AP Div for the
saw_blade.jpg. The bottom
> of
> the teal paper needs to be level with the bottom line of
text in the
> description area.
>
> I am not very familiar with div tags and cold use some
help. Any idea why
> it
> is showing up at the bottom of the page? I placed it
correctly in
> Dreamweaver
> CS3 but when it uploaded and checked it of course this
is what I got.
>
> should I figure out what the x and y coordinates are and
try to do
> something
> to it that way?
>
> Help!
>
> Scott
http://www.paulargoescreens.com/300rps2dt40.shtml
>

Removing Line between Div tags

Hi all. I am new to this forum - have just started using DIV Tags and am getting a bit messed up!! I have a simple web page that has 2 DIV statements - on loads a menu bar I have created in Fireworks and is rihgt justified, the other is a header that contains an image and is centred. I have specified a coloured page background. Trouble is, I have a line between my two div tags that shows the background colour! I just cant get rid of it - I have tried the "Display - Inline" but that doesn't work. I have tried "Float Left" and "Right" - no-good. I dont know what to do! It could be that I am using these commands in the wrong place? There seems to be quite a lot of stuff on the net about this issue but I cant get any of the solutions to work for me. Please can anyone help?
Here is an example of my 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #C90;
.menu {
BACKGROUND: #000000;
.header {
BACKGROUND: #000000;
</style>
</head>
<body>
<DIV class=menu align="right" >
<P> </P>
<P> </P>
</DIV>
<DIV class=header align= "center">
<P> </P>
<P> </P>
<P> </P>
</DIV>
</body>
</html>

This is invalid markup.
     <DIV class=menu align="right" >
     </DIV>
     <DIV class=header align= "center">
     </DIV>
CSS should look like this:
body {
margin:0;
padding:0;
background: #C90;
color: #000;
#wrapper {
width: 970px; /**some value in px, % or ems**/
margin: 0 auto; /**with width, this centers page**/
background: #FFF;
border: 2px solid #000;
#menu {
background: #000;
text-align:right;
margin:0;
padding:0;
#header {
background: #000;
width: 970px;
margin:0 auto;
padding:0;
Then add the relevant selector ID (or .class) to your markup like so.
<body>
<div id="wrapper>
<div id="menu">
your menu code here
</div>
<div id="header">
your header here
</div>
<p>your content goes here<p>
 </div>
</body>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Help with placement of div tags

Hello. I am sorry to ask what probably is a dumb question, but I'm new, using Dreamweaver CS5, and I need some help. I'm sure I'll be posting here a few times during this process of building a new site, but I'm hoping it can be a good way for me to learn. I've watched a lot of tutorial videos, and so here I am.
I have my site, but I'm having problems being able to place div tags. I set it up with a wrapper div, a header div, a content div, footer div, etc. But, inside those divs I want to have other div's where I can place things like a client login box, etc. So, I tried and tried to place them after one div, or before one, but I just can't get them to work right. I'm very proficient at Photoshop, but web work is fairly new. I've done a few sites, but in Golive and just basic bringing them in from Photoshop. Now I want to learn correctly, so I'm trying all of this.
I found a way to make a box, using AP Div tag, and then move that where I want it, but, it doesn't work right for me then. I don't want it fixed in the same spot absolutely, but rather I want it to move with the page. I'm going to post a link to the site I'm working on, in case that helps. But, if you look at the site so far, you can see for example I want the text box that says client login to move as you make the page wider or smaller. It's fixed now. But, it's the only possible way I know how to put the box and div tag where I want it. When I just try to insert a div tag (not an AP div) it just goes underneath the div above it.
What I'm asking is, how do I place div's within div's? Or, can I use this AP div to put it where I want, and then change it to a regular div, and it stay in the right spot? I just don't understand how exactly to place divs where I want them, unless I use the AP div box and move it around the screen. Also, if I have a div box setup, is there a way to drag it somewhere else or reposition it somewhere else on the screen just by dragging? It's all a bit hard for me to figure out at this point, but I appreciate any help you can give me.
The AP Div I used is at the top that says client login. That's the box/table/div tag I'm trying to set up correctly, so it moves with the other elements, like the logo, as you make the page wider or less wide.
Here is the link:
http://www.gagephotography.com/boudoir/boudoirsite/index4.html
Thank you again.

DW is not drag & drop friendly like graphics or word processing apps.
APDivs are NOT for primary layouts. They are for special situations and should be handled with care or you'll end up with a mess. Here is why:
http://apptools.com/examples/pagelayout101.php
The best advice I can offer is to familiarize yourself with HTML markup (content) and CSS (styles) before you even open Dreamweaver. Without a working knowledge of code, you're not going to get good results.
Start here:
HTML & CSS Tutorials - http://w3schools.com/
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
New DW Starter Pages --
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Creating your first web site in DW CS5 -
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Div tags and text decorations

Similar Messages

Maybe you are looking for