You are using an absolute positioned div, which is positioned based on the page, not the div around it.
My recommendation would be to use margins to center it within the other div. Should look something like this:
#flash {
margin:0px auto;
That will set a 0 pixel range above and below, and an automatic range to the left and right.
Nick

Similar Messages

Help with Div Tags

Hello,
I've got 2 flash files in separate div tags. Div 1 is sized 100% x 100% to match the movie, and the other div tag is set at 900px x 700px (again to match the movie). The 1st tag sort of acts as a background to the top layer. This all works great and really happy with the result.
My only problem is when the browser window gets smaller than the top layer a scroll bar appears (this is no problem, i actually don't want the top layer to resize due to text legibility etc.) but what i notice is that when you scroll to view the rest of the top layer, the bottom layer no longer fills the screen, the remainder of the screen is now white, it actually cuts off some of the image from where the window was in it's last position.
this is the site:
http://www.baycreative.co.uk/Test.html
Any suggestions to why this is happening?

Try this tutorial instead. I believe the one you are
following is flawed.
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.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
==================
"ck64" <[email protected]> wrote in message
news:g17del$r7k$[email protected]..
> Hello all,
> Just started using Dreamweaver and was following a
tutorial about making a
> layout in Photoshop, slicing it, and then importing it
into Dreamweaver.
> Then I
> delete the content portions of the image and add a box
with DIV tags.
>
> Now, the site works just fine when I put only a single
line of
> text/content
> for both FF and IE.
>
> However, once I add a second line, the site becomes a
mess in FF.
>
> I have the site hosted with 2 lines of text in my main
content box here:
>
http://cnorthington.site.io/sitebase.html
>
> Any advice you can offer would be great.
>
> Thanks,
> Chris.
>

Help with DIV tags (i think)

Hello all,
Just started using Dreamweaver and was following a tutorial
about making a layout in Photoshop, slicing it, and then importing
it into Dreamweaver. Then I delete the content portions of the
image and add a box with DIV tags.
Now, the site works just fine when I put only a single line
of text/content for both FF and IE.
However, once I add a second line, the site becomes a mess in
FF.
I have the site hosted with 2 lines of text in my main
content box here:
http://cnorthington.site.io/sitebase.html
Any advice you can offer would be great.
Thanks,
Chris.
P.S. This is what it looks like without content:
http://cnorthington.site.io//sitebasetwo.html

Try this tutorial instead. I believe the one you are
following is flawed.
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.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
==================
"ck64" <[email protected]> wrote in message
news:g17del$r7k$[email protected]..
> Hello all,
> Just started using Dreamweaver and was following a
tutorial about making a
> layout in Photoshop, slicing it, and then importing it
into Dreamweaver.
> Then I
> delete the content portions of the image and add a box
with DIV tags.
>
> Now, the site works just fine when I put only a single
line of
> text/content
> for both FF and IE.
>
> However, once I add a second line, the site becomes a
mess in FF.
>
> I have the site hosted with 2 lines of text in my main
content box here:
>
http://cnorthington.site.io/sitebase.html
>
> Any advice you can offer would be great.
>
> Thanks,
> Chris.
>

Newbie with div tags

I am trying to design my webpage, www.evdetailing.com, using div tags.
Here is the site working okay in IE Explorer (http://evdetailing.com/whatswrong.JPG)
I am looking to have the bottom two tags (the text and the left hand margin tag) sitflush with the bottom of the browser, and stretch if there are more text. In Firefox, the text div aligns but not the left hand margin div.
Okay also I have the boxes aligning to the left at 15% absolute, how do I align so the text box will align with them if I set it at 15% it will sit on top of the margin div and cover it up, 20% is the closest to flush but there are still 2 or 3 px of space between the two boxes. You can see what im trying to do at the #1 Arrow, I want the whole site to be align
Lastly if anyone knows why my background is doing what it's doing in Firefox, I would love to know so that I can fix it, its working right in the picture above.
Any help is greatly appreciated.

OperationGreen wrote:
I am trying to design my webpage, www.evdetailing.com, using div tags.
Here is the site working okay in IE Explorer (http://evdetailing.com/whatswrong.JPG)
There's nothing to be seen at the link above?

Help with div tag in DWCS4

Hola
this is my first time using --or trying to used-- CSS
I have a div tag that I want to used as a navigation bar.
I type the links, and when I try to fix them with CSS, if I put a line (border top and bottom) on top of the link, the whole links Shift out of the navigation box.
Then I tried to put an inside div in the navigation div to try to control the shifting, but it didn't work, still shift out of the div nav.
I'm going to post a link later so you can "see it".
Hope you understand my problem
Thanks for your help.
Daniel Ulysses
P.S. I'm learning DW, used to have GoLive, but have to "Update", so far...I love it, just having some issues.

Try this free menu extension from List-O-Rama.
http://www.dmxzone.com/go?5618
Project VII menus:
Uberlinks -
http://www.projectseven.com/tutorials/css/uberlinks/
CSS Express Drop menus-
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
Pop Menu Magic 2 - the best
http://www.projectseven.com/products/menusystems/pmm2/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com

JS with div tags

hi to all, i m ferly new with this and english is not my native lenguage so i struglle with tutorial, i need help with this i need to place this code
JS:
$(document).ready(function(){
$('.slider2').bxSlider({
     slideWidth: 300,
     minSlides: 2,
     maxSlides: 2,
     slideMargin: 10
HTML:
<div class="slider2">
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
into content for Layout Div Tag "LayoutDiv5" to work properly
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MANORA</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Untitled-1.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">

<script src="respond.min.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
    <p> </p>
    <p> </p>
</div>
<div id="LayoutDiv2"></div>
<div id="LayoutDiv8">T
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Item 1</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Untitled Item</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Untitled Item</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a>      </li>
    </ul>
</div>
<div id="LayoutDiv3"> </div>
<p> </p>
<p> </p>
<p> </p>
<div id="LayoutDiv5">This is the content for Layout Div Tag "LayoutDiv5"</div>
<div id="LayoutDiv6">This is the content for Layout Div Tag "LayoutDiv6"</div>
<div id="LayoutDiv7">This is the content for Layout Div Tag "LayoutDiv7"</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
i tried to put at each line but wont work
thank you

actually, i just figured this out, but am still haveing issues... i have the container, then the other div tags inside of it. i am using the div tags as columns inside of the container, but the container background color (gray) does not go all the way down until the rest of the page ends, or where the body ends. i think that it has to do something with the "height:", but am not sure. is there any way that you can put one div tag equal to that of another div tag so that it goes down the whole page like it is suppose to?
here is my code:
.container
    background-color: #666666;
    width:75%;
    margin-left:auto;
    margin-right:auto;
    height: 100%;
what is wrong?

Working with div tags

This question was posted in response to the following article: http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7deda.h tml

Hi Nancy, thanks for your reply.
Please let me point this out.
I know and agree about best practices for coding, and as you mention, Inline styles should be avoided, except ... etc.
The exceptions are and should be each ones criteria and situation, not the thinking of dreamweavers authors or programers.
If you please, see their own training video in ....
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
you will see, in minute 7:39 why they have to use the code view and that is because dreamweaver's programers.
Same thing happens, for example with me
I have a DIV tag, inside and IMG tag which the DW programer insists enclose it in P tags
why?
That is his idea of coding, not mine.
They recognize that, and to mee, they should change the policy on dreamweaver to let the programer design and code as he wants, not like they want or think is best practice.

Div tag not expanding with content.. Help please!

Hi there,
Firstly I'm reasonably new to this so if I appear stoopid, it's possible that I am.
I have been building a CSS based page with Div tags. What I'm trying to achieve is an html body that has a #wrapper centred on the page, then a #header, #nav, #banner, #content and #footer consecutively down the page. Then inside I want to place a #leftColumn and a #rightColumn. This much I have achieved. What I'm having trouble with is having the content div expand with the two column divs within it. I've included the main.css file I'm using below as well as the source code for the content section of the page. Any help would be greatly appreciated.
Cheers,
Philamon
@charset "UTF-8";
body {
color: #FFF;
text-align: center;
margin: 0px;
padding: 0px;
#wrapper {
color: #000;
text-align: left;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#header {
color: #000;
margin-top: 12px;
margin-bottom: 12px;
#content {
color: #000;
width: auto;
margin-top: 0px;
padding-top: 0px;
padding-left: 5px;
overflow: auto;
#footer {
color: #000;
margin-top: 5px;
margin-bottom: 0px;
clear: both;
text-align: center;
bottom: 0px;
left: 0px;
right: 0px;
position: relative;
#logo {
color: #000;
height: 71px;
padding-bottom: 10px;
padding-right: 5px;
#nav {
color: #000;
height: 28px;
#banner {
color: #000;
height: 200px;
text-align: center;
#leftColumn {
color: #000;
float: left;
width: 70%;
padding-right: 5px;
padding-bottom: 30px;
padding-left: 5px;
#rightColumn {
color: #000;
float: right;
width: 20%;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 30px;
.fltrt {
float: right;
<div id="content">
    <h1>Welcome to The Groundswell Division</h1>
    <div id="leftColumn">
      <h2>Mission Statement</h2>
      <p>The Groundswell Division aims to:</p>
      <p>Be involved in the future moulding of the Australian performing arts industry through attracting new audiences, working collaboratively to find new forms and helping to expand the scope of performing arts in Australia.<br />
        Provide vital, diverse and challenging artistic works for audiences, both locally in Melbourne, throughout Australia and internationally.<br />
        Provide a platform for local performing arts practitioners who are currently underutilised within the industry.<br />
        Provide an umbrella for independent artists to stage their works within an established, supportive company.<br />
        Make all decisions regarding creative direction and control in an open, honest forum by the members of the Company’s democratic committee. </p>
    </div>
    <div id="rightColumn">
      <h2>Subheading</h2>
      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
    </div><div id="leftColumn2">
      <h2> </h2>
</div>
</div>

Hi,
Change your wrapper code to this.
#wrapper {
width: 760px;
margin: 0 auto;
color: #000;
text-align: left;
You haven't included the Wrapper Div in your code :
You haven't specified and CSS markup for leftColumn2.
I have included an example (the div sizes will need adjusting!)
<!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">
@charset "UTF-8";
body {
color: #FFF;
text-align: center;
margin: 0px;
padding: 0px;
#wrapper {
width: 760px;
margin: 0 auto;
color: #000;
text-align: left;
#header {
color: #000;
margin-top: 12px;
margin-bottom: 12px;
#content {
color: #000;
width: 740px;
margin-top: 0px;
padding-top: 0px;
padding-left: 5px;
overflow: auto;
#footer {
color: #000;
margin-top: 5px;
margin-bottom: 0px;
clear: both;
text-align: center;
bottom: 0px;
left: 0px;
right: 0px;
position: relative;
#logo {
color: #000;
height: 71px;
padding-bottom: 10px;
padding-right: 5px;
#nav {
color: #000;
height: 28px;
#banner {
color: #000;
height: 200px;
text-align: center;
#leftColumn {
color: #000;
float: left;
width: 400px;
padding-right: 5px;
padding-bottom: 30px;
padding-left: 5px;
#leftColumn2 {
color: #000;
float: left;
width: 100px;
padding-right: 5px;
padding-bottom: 30px;
padding-left: 5px;
#rightColumn {
color: #000;
float: left;
width: 100px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 30px;
.fltrt {
float: right;
}</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>Welcome to The Groundswell Division</h1>
    <div id="leftColumn">
      <h2>Mission Statement</h2>
        <p>The Groundswell Division aims to:</p>
        <p>Be involved in the future moulding of the Australian performing arts industry through attracting new audiences, working collaboratively to find new forms and helping to expand the scope of performing arts in Australia.<br />
        Provide vital, diverse and challenging artistic works for audiences, both locally in Melbourne, throughout Australia and internationally.<br />
        Provide a platform for local performing arts practitioners who are currently underutilised within the industry.<br />
        Provide an umbrella for independent artists to stage their works within an established, supportive company.<br />
        Make all decisions regarding creative direction and control in an open, honest forum by the members of the Company's democratic committee. </p>
    </div>
    
    <div id="leftColumn2">
    <h2></h2>
    </div>
     
    <div id="rightColumn">
    <h2>Subheading</h2>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
    </div>
     
   </div>
    
    <div id="footer">
    <h2>Footer</h2>
    </div>
    
</div>

</body>
</html>
Hope this helps ;-)

Floating div tags - won't align

Hi there,
I am trying to align 2 div tags next to one another in the latest version of dreamweaver cc. At the moment I have one floating to the left 60% wide and on the the right 40% wide. The second div tag sits on the next line down to the right but I can't seem to get them the sit directly next to one another. Please help Thank you

Copy & paste this code into a new, blank document. SaveAs test.html and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>

<style>
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
body {
    padding: 0;
    width: 90%; /**adjust width as required**/
    margin: 0 auto; /**this is centered**/
    background: #F5DD83;
    color: #2294AE;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    box-shadow: 2px 2px 4px #333;
header {
    margin: 0;
    padding: 0 1%;
    width: 100%;
    background: #B00202;
    color: #FFF;
header h1, header h2 {
    display: inline;
    color: #F5DD83;
    padding: 0 3%;
section {
    margin: 0;
    padding: 0;
    background: #FFF;
    overflow: hidden; /**float containment**/
article {
    margin: 0;
    padding: 0 2%;
    float: left;
article.left { width: 60%; }
article.right {
    border-left: 1px solid #366;
    width: 40%;
footer {
    background: #B00202;
    clear: left;
    display: block;
    padding: 2%;
    color: #FFF;
</style>
</head>
<body>

<header>
<h1>Sitename</h1>
<h2>Some pithy slogan...</h2>
<nav>Horizontal menu goes here...</nav>
</header>

<section>
<article class="left"> <h3>Article Left 60% wide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>

</article>

<article class="right"> <h3>Article Right 40% wide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
</article>

<footer> <small>© 2014 Your Site Name. All rights reserved</small> </footer>
</section>
</body>
</html>
Nancy O.

Div tag problem

Hi there,
i am creating a website.i seem to be having a bit of trouble with div tag...i think.the navigation bar and the main content seem to be overlapping each other.any ideas?id appreciated any help.
thanks.
<body>
<div id="header">Heading</div>
<div id = "nav">
<ul id="Fyp">
<li><a href="html/Index.html">Home</a> </li>
<li><a href="html/Conventional.html">Conventional Encryption</a></li>
<li><a href="#">Public Key Encryption</a>
    <ul>
<li><a href="html/PublicKey-Confidentiality.html">PublicKey-Confidentiality</a></li>
<li><a href="html/PublicKey-Authentication.html">PublicKey-Authentication</a></li>
<li><a href="html/Public Key-Confidentiality and Authentication.html">Public Key-Confidentiality and Authentication</a></li>
    </ul>
</li>
<li><a href="#">MAC Encryption</a>
    <ul>
<li><a href="#">MAC - Message Authentication</a></li>
     <li><a href="#">Message Authentication and Confidentiality (Plaintext)</a></li>
     <li><a href="#">Message Authentication and Confidentiality(Ciphertext)</a></li>
</ul>
</li>
   <li><a href="#">HASH Encryption</a>
       <ul>
            <li><a href="#">Encryption after Concatenation</a></li>
            <li><a href="#">Encryption before Concatenation</a></li>
              <li><a href="#">Authentication</a></li>
            <li><a href="#">Authentication and Confidentiality</a></li>
           <li><a href="#">Secret Value</a></li>
          <li><a href="#">Secret Value and Encryption</a></li>
     </ul>
    </li>
   <li><a href="#">Self Test</a></li>
</ul>
</div>
<div id="main_content">
<p> </p>
<p>This is the home page for Message Authentication and Digital Signatures.This page will explain the funamental basis of these elements.</p>
<p> </p>
<p><strong>Authentication</strong>:</p>
<p><a name="#Authtentication"></a>
The Authentication service is concerned with assuring that a communication is authentic. Authentication acts as an warning or a alarm signal. The function of the authentication service is to assure the recipient that he message is from the source that it calms to be from.</p>
<p> </p>
<p><strong>Confidentiality</strong>:</p>
<p><a name = "Confidenitiality"></a>
Confidentiality is the protection of transmitted data from passive attacks. This makes sure that the message sent can not be read by anyboby except for the intended recipient .
</p>
<p> </p>
<p><strong>Public Key:</strong></p>
<p><a name = "Public Key"></a>
</p>
<p><strong>Digital Signature:</strong>
<p><a name = "Digital Signature"></a></p>
</p>
<p><strong>Integrity:</strong>
<p><a name = "Integrity"></a> </p>
<p><strong>MAC Function:</strong></p>
<p><a name = "MAC"></a> </p>
<p>A MAC (Message Authentication Code) is a small fixed size block of data that is appended to the message. The technique assumes hat two communicating parties say (Source A and B) share a common secret key(k). When A sends a message to B, it calculates the MAC as a function of the message and the key. The recipient performs the same calculation on the received message using the same key, to generate a new MAC. The received MAC and the calculated MAC are then compared. If the received MAC matches the calculated MAC, then the message is said to be authentic.</p>
</p>
</div>
<div id="footer">
<p>
Footer - all about the designer and contact links go here
</p>
</div>
</body>
</html>

Here ya go.
body {
margin:0px;
padding:0px;
text-align:center;
font-size:1.0em;
font-family:trebuchet ms, tahoma, arial, sans-serif;
#container {
text-align:left;
margin:0px;
width:1270px;
border:1px black solid;
padding: 0px;
#header {
text-align:center;
width:1270px;
#width:1022px;
height:100px;
font-size:2.0em;
background-color:white;
color:white;
padding-top:0px;
padding-right:0px;
border-bottom:1px black solid;
#nav {
width:1270px;
#width:1270px;
height:24px;
font-size:0.8em;
background-color:#20548E;
color:black;
border-bottom:1px black solid;
#main_content {
width:1270px;
#width:1022px;
font-size:0.9em;
background-color:white;
color:black;
border-bottom:1px black solid;
#footer {
text-align:center;
width:1270px;
#width:1022px;
height:100px;
font-size:1.0em;
background-color:#20548E;
color:white;
border-bottom:1px black solid;
#Fyp
{ margin: 0;
     padding: 0;
#Fyp li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;
#Fyp li a
{ display: block;
background: #20548E;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 140px;
color: #EAFFED;
white-space: nowrap;
#Fyp li a:hover
{ background: #1A4473;
#Fyp li ul
{ margin: 0;
   padding: 0;
   position: absolute;
   visibility: hidden;
   border-top: 1px solid white;
#Fyp li ul li
{ float: none;
   display: inline;
#Fyp li ul li a
{ width: auto;
   background: #9F1B1B;
#Fyp li ul li a:hover
{ background: #7F1616;

Inserting Images into Dreamweaver through Div Tag

Hi im quite new to Dreamweaver and i've got CS3...I've just
designed and sliced up a website in Photoshop and have started to
compile it together in Dreamweaver using HTML and CSS. I've just
added a Div tag and added images into the page and i've got stuck,
i cant seem to put another image next to one iv already placed
their.
I need help on how to work with Div Tags and applying images
so that i can fix my website like a Jigsaw.
I have provided the code i hav in my HTML so far...

Maybe this will help you -
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.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
==================
"DThandi" <[email protected]> wrote in
message
news:gk8anj$4qc$[email protected]..
> Let me show you the before and after images of the site
im working on,
> then
> maybe what im trying to describe can become more
clearer...Your right that
> i do
> need some basic understanding, I actually used to know
the answer to my
> own
> question but since i havn't played around with
Dreamweaver for a while i
> seem
> to have forgotten.
>
> This was the image on Photshop:
>
http://i187.photobucket.com/albums/x151/ohhchakdeh/SAMPLE.jpg
>
> This is where I am stuck now:
>
http://i187.photobucket.com/albums/x151/ohhchakdeh/stuck.jpg
>
> These are all the small images i have sliced up from
Photshop:
>
http://i187.photobucket.com/albums/x151/ohhchakdeh/Untitled.jpg
>
> As you can see i have trouble coding in HTML. So far i
have been
> following a
> tutorial video showing me how to had images and align
them through Div
> Tag...But now i am trying to put images side by side in
the Navigation
> area and
> on top of and underneath each other. As you can see i
have Home.jpg and
> Home-Scrap.jpg. Home Scrap needs to go under Home and
both of them images
> need
> to go next to image Left-Short.jpg.
>
> Thank You
>

When floating DIV tags, I am unable to center the tags? help..

I am relatively new to dreamweaver, and have only used CS4 prior to CS5.5.
I am creating a website that has three columns, the header and the links bar to all other pages centers fine. But when i try and align the DIV tags it acts as if it is glued to the left or right hand side of the screen.
I am just wondering if there is a way to align the most left of the tags to directly underneath the most left of the header and the same for the right hand side?
If anybody could help it wouyld be much appreciated.
Thanks.

First, the way you have to handle multiple columns is to wrap them in a larger div.
So you'll have a container with three divs, name them left, center, right.
So here are your styles in CSS:
#container {
          width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
          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. */
.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;
#left {
          float: left; /* since this element is floated, a width must be given */
          width: 180px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
          background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
          padding: 5px; /* padding keeps the content of the div away from the edges */
          margin-top:15px;
#right {
          float: right; /* since this element is floated, a width must be given */
          width: 280px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
          background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
          padding: 5px 5px 5px 5px; /* padding keeps the content of the div away from the edges */
#center {
          margin: 0 290px 0 190px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
          padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
Now, when you put together your HTML, you'll do 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>
<title>Page Title goes here</title>
<link href="path/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
    header goes here
    </div>
</div>
<div id="left">
Left Content Here
</div>
<div id="right">
Rightmost Content goes here. Please note the middle section comes after the right section.
</div>
<div id="center">
This is the center stuff and you will note that it has margins that keep it to the center.
</div>
<br class="clearfloat" />
<div id="footer">
Footer stuff goes here and is as wide as the main container
</div>
</div>
</body>
</html>

Noob question about DIV tags

Learning DW and CSS so patience is in order .
I've being reading numerous posts here and on the web about avoiding tables for laying out web pages. I can see the advantages in terms of cleaner codes and easiness of updating and changing sites at a later time. So I started learning about DIV tags (although tables is very easy for me) and have practice a few times with fairly good results, love the absolute positioning with it. Having said that, for the love of me, can't find a way of centering horizontally a page designed with DIV tags (due to ignorance), for example, 1 column/three rows page, after defining styles, size and colors I enclosed everything in another DIV tag, wrapper I think is called, but have not found a way of centering it on the page, text-aligment on the DIV tag only centers the text not the DIV itself, how to go about this? Help is appreciated.

love the absolute positioning with it.
Get over it. It's a trojan horse. Absolute positioning is not a general layout method.
To center ANY block (non-absolutely positioned) element, use CSS to give it a width and left/right margins of 'auto'. For example -
<div id="foo">...</div>
That div will be centered with this CSS -
#foo { width:300px; margin:0 auto; }
I think you are on the wrong path already, though. Stick with tables (which you say are very easy for you) UNTIL you a) understand CSS well enough to understand what absolute positioning is and why I say it's bad, and b) understand how to use float, margin, and padding to place things on the page. Then you are ready to move away from tables.

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
>

Re-positioning div tags

I am grappling with div tags - I am a newbie and have created an experimental web page. However all was good until I started to add a spry menu. the right container moved and I cannot figure out how to get it to move left. I tried the positioning properties but could not get it to budge! Can anyone help. I only have 2 div tags "left_column" and "right_column" plus the container The page is here
http://web.me.com/suethomo/Site2/Index.html
This is how it used to look before I mucked around with the spry menu
http://web.me.com/suethomo/Site2a/Index.html
Thanks

You didn't close the left_column so the right column is in the left column. Add </div> before <div id="right_column">

Alignment with div tags

Similar Messages

Maybe you are looking for