CSS Div tag content???

I am a novice working on a website... all the help is needed...
I have a div layout for my website but want to create content with pictures, text, links inside the div tags... I know that there is many options to do it.
What is the best way?
Tables?
Incorporating HTML?
I guess if I can get past this obstacles I am well on my way.
Thank you.
GC02

Tables are not required for modern web page layouts.
Basic 1-column CSS Layout (view source in browser to see the CSS and HTML code)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.shtml
Basic 2-column CSS Layout
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Tutorial: 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

Similar Messages

CSS div tags

Hi folks,
I have a quick questions which
should be easily resolved. I have created sites using Div
tags, the usual 'masterhead' / 'navi' / 'content' / 'footer'. The
Divs margins are set to 0 for for top and bottom. My querie is, in
IE the Divs 'butt up' to each other however in FF/Safari/Mozilla
there is a gap - is there a way to get the pages to appear the
same? I have tried playing with the margins and had no joy. I have
even attempted to create another Div tag to include the
'navi/content' to see if that would 'squeeze up' the elements -
that didn't work in the desired browsers either - any ideas?
Many thanks in advance

> Murray *ACE* you may not remember but you advised me to
get some CSS
> books,
> which I have read through (one from Sitepoint &
another by aPress) - I
> have you
> to thank in gaining extra knowledge in this. However
don't I wont be
> asking any
> Q's - I'll just try not to ask any 'basic' ones now! ;)
I'm glad I could push you in this direction. The flash of
enlightenment is
such a wonderful experience!
> why on earth cant all browsers have the same protocols
and viewing
> behaviours??
They are trying, thankfully. As opposed to how it was a few
short years
ago, I think they all now agree that the W3C's specifications
are the law.
The problem is that sometimes those specifications are
ambiguous, and when
that happens there is the possiblity of different
interpretations....
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
==================
"tommysauce" <[email protected]> wrote in
message
news:f8akm4$olo$[email protected]..
> Hi guys,
>
> I was persistent in trying to solve this problem and
worked it out !! Oh
> happy
> days! ;p
>
> Question, why on earth cant all browsers have the same
protocols and
> viewing
> behaviours?? Although I must admit there is a certain
amount of
> satisfaction
> gained when you work stuff out!
>
> Murray *ACE* you may not remember but you advised me to
get some CSS
> books,
> which I have read through (one from Sitepoint &
another by aPress) - I
> have you
> to thank in gaining extra knowledge in this. However
don't I wont be
> asking any
> Q's - I'll just try not to ask any 'basic' ones now! ;)
>

How do I center an image inside a CSS div tag using dreamweaver?

I know this may seem like a very silly queston to ask because it should seem so simple but how do I do that? I am having trouble being able to center an image inside of a div tag. Here is the code I have come up with so far. Thanks in advance for your help.
</style>
</head>
<body>
<div id="PageContainer">
<div id="PageHeader"> img.centered{display:block; margin-left:auto; margin-right:auto; }<img src="Untitled-5.jpg" alt="rowland" class="centered" /></div>
<div id="PageMenu">Content for id "PageHeader" Goes Here</div>
<div id="PageBody">Content for id "PageHeader" Goes Here</div>
<div id="PageFooter">Content for id "PageHeader" Goes Here</div>
</body>
</html>
Also you can ignore the other div tags after the first div id. The first div id that has my image link is the one I am trying to get to center my image. The image is in there just not centering.

Centering Pages, Images and other elements with CSS:
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
Nancy O.

Selectively overide css div tag properties (CS3)

I have created a:link, a:visited, a:hover and a:active div
tags for three different navbars. They are functioning correctly,
with separately linked words appearing grey when linked, grey after
being visited, orange when hovered upon and orange when active. I
have been unable to figure out how I can override the grey linked
and visited tags and have selected words within the navbars appear
as a new color when I want them to, on a page by page basis.
I tried making a class tag of the new type color and applying
it to the selected word using the the style menu in the properties
pallette. The formatting appears in the coding (whether properly or
not I do not know) but does not appear as the new color in the
design view or when saved and previewed in a browser. It simply
doesn't override the color attributes of the a:link and a:visited
tags. How can I achieve this? The selected words will change from
page to page with innumerable permutations.
Please help if you can. Heartfelt thanks await you.

Pseudo-classes and container styles are what you need - here
are some
tutorials.
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
==================
"zipson" <[email protected]> wrote in
message
news:fm3c2e$l2f$[email protected]..
>I have created a:link, a:visited, a:hover and a:active
div tags for three
> different navbars. They are functioning correctly, with
separately linked
> words
> appearing grey when linked, grey after being visited,
orange when hovered
> upon
> and orange when active. I have been unable to figure out
how I can
> override the
> grey linked and visited tags and have selected words
within the navbars
> appear
> as a new color when I want them to, on a page by page
basis.
>
> I tried making a class tag of the new type color and
applying it to the
> selected word using the the style menu in the properties
pallette. The
> formatting appears in the coding (whether properly or
not I do not know)
> but
> does not appear as the new color in the design view or
when saved and
> previewed
> in a browser. It simply doesn't override the color
attributes of the
> a:link and
> a:visited tags. How can I achieve this? The selected
words will change
> from
> page to page with innumerable permutations.
>
> Please help if you can. Heartfelt thanks await you.
>

Dreamweaver CS5 Getting Started CSS Div tags

I FOLLOWED THE GETTING STARTED TUTORIAL AND GOT THE TOP BANNER DIV, THE MAIN IMAGE DIV AND THE 3 COLUMN DIVSDIVA BUT THEN I TRIED TO CREATE A FOOTER LIKE DIV FOR COPYRIGHT AND CONTACT INFO BUT IT GETS PLACED AT THE END OF THE RIGHT COLUMN DIV. IN OTHER WORDS IT REMAINS IN LINE WITH THE 3 COLUMN DIVSDIVA, IT DOESNTDOESN'T FALL BELOW THEM

First off, thanks for the help, that was it!
Second, sorry about the ALL CAPS, i wasnt yelling, but iPhone does that. It does the same on the apple.com devforums. It locks my keyboard on ALL CAPS and its a pain to be unlocking the caps everytime i type a character .
Here is my code. Now im having the problem that it wont flush the main container div to the left and top. Ive set the top and left margins of the page property's body tag to 0. And i dont have a left margin in the css for example. What am i missing?
<!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>Santiapps.com Customizes iPhone iPad apps for you</title>
<style type="text/css">
.MainPageCSS {
     font-family: "Lucida Console", Monaco, monospace;
     font-size: 12px;
     color: #666;
#main_image {
     background-image: url(assets/santimotionblurr800.jpg);
     background-repeat: no-repeat;
     position: relative;
     height: 251px;
     width: 800px;
</style>
<link href="styles/santiapps_cs5.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
     margin-left: 0px;
     margin-top: 0px;
</style>
</head>
<body>
<div id="container">
<div id="banner"><img src="assets/backclipmask.jpg" width="800" height="116" alt="Santiapps | Tailor Made iPhone iPad Apps" /></div>
<div id="main_image"></div>
<div id="left_column">
    <p><img src="assets/iLuvMeAppColumn.jpg" alt="iLuvMe" width="260" height="160" border="1" /></p>
    <p>iLuvMe. This app is the perfect romantic gift that will show just how much you care. Its a thoughtful way to wrap your relationship's best memories into a cute little app he or she can hold in the palm of their hand and relive with the tap of a finger.</p>
    <p>Need to <a href="PersonalizeLoveMe.html">configure</a> your app?</p>
    <p><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=347034231&mt=8"><img src="assets/App_Store_Badge_EN.jpg" alt="Apple Store Link" width="200" height="100" border="0" /></a></p>
</div>
<div id="center_column">
    <p><img src="assets/iDashBoardColumn.jpg" alt="iDashBoardCenter" width="260" height="160" border="1" /></p>
    <p>iDashBoardCenter. This is a business management app that will keep you up to date with the current sales figures or any other linearly plottable data that you need to stay on top of remotely.</p>
    <p>Read <a href="PersonalizeiDash.html">more</a> on how to set up your app.</p>
    <p><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=373194449&mt=8"><img src="assets/App_Store_Badge_EN.jpg" width="200" height="100" border="0" /></a></p>
</div>
<div id="right_column">
    <p><img src="assets/genericiphoneColumn.jpg" alt="Santiapps.com" width="260" height="160" border="1" /></p>
    <p>SantiApps. We will create, program and customize any app in order to fit your needs. Got an idea for an app, drop us a line, you'll be surprised at how quickly and inexpensively you can have your own apps created for your own business or venture.</p>
</div>
</div>
</body>
</html>

None of my Css div tag rules are applying to my source code!

I created my divs in Html and they seemed to form, but nothing in CSS is working when I try to alter them. I have changed the background colors, the widths are all the same, and nothing is floating left right. I haven't tried changing text yet, but I am sure that won't work either. Please help my project is due tonight!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>VENTURE</title>
<link href="Moffett1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">VENTURE<img src="../Pictures/header web page.jpg" width="1200px" height="200px" alt=""/>
</div>
<div id="toolbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Travel Tips</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Culture Corner</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="main_article"><h1>Notables</h1><h3>Nautical Nonsense!</h3>
<p>Whether you want to learn how to sail or rent a privately crewed yacht,<br> the British Virgin Islands offers endless opportunities for seafaring adventures.<br> Explore coral gardens on a daytrip, island-hop via water taxi,<br> or simply kick back on deck and sunbathe. There a lot of things to do on a boat. You can fish, sight see, and bask in some sunlight on its upper decks.
</p>
</div>
<div id="pic_of_the_week"><h1>PICTURE OF THE WEEK!</h1><h3> HOW TO BOAT IN STYLE!</h3><img src="../Pictures/british island.jpg" width="100%" height="" alt=""/>
</div>
<div id="culture_corner"><h1>Culture Corner</h1><h3>How to make Corned Beef and Hash.</h3>
<ul>
<li>2 to 2 1/2 pound Corned-Beef Brisket*, recipe follows</li>
<li>1 tablespoon coarsely ground black pepper</li>
<li>1 teaspoon ground allspice</li>
<li>2 bay leaves</li>
<li>2 teaspoons kosher salt</li>
<li>1/2 pound diced carrots, approximately 4 small</li>
<li>1/2 pound diced onions, approximately 2 small</li>
<li>1 pound potatoes, peeled and chopped, approximately 3 medium</li>
<li>1/4 pound diced celery, approximately 2 stalks</li>
<li>1 small head cabbage, chopped, approximately 2 pounds</li>
</ul>
</div>
<div id="social_media"><p>Follow us on Instagram, Facebook, and Twitter!</p>
<img src="../Pictures/logo-instagram.jpeg" width="100" height="100"alt=""/>
<img src="../Pictures/facebook link.jpg" width="100" height="100" alt=""/>
<img src="../Pictures/twitter.jpg" width="100" height="" alt="100"/>
</div>
</div>
</body>
</html>

Copied and pasted a div tag but cannot rename it on style sheet. any ideas?

Hello,
I am new to Dreamweaver so after paying someone to basically build be a template, I tried to midify it a little by copying and pasing a div tag to a lower section of my page.
Probe is, its entitled "content-box-top" ... If I make adjust the width or height etc it also changes it to div tage at the top of my page in which I duplicated from.
That all makes sense. So I tried to rename my dupoicate div tag "content-box-bottom". But it doenst appear in the style sheet so I can't make my modifications.
What am I doing wrong and how could this be accomplished? Thanks to all who can help.
JIMM

First off, <div id="names"> need to be unique on a page (used only once)... so a <div> id name cannot be reused on the same page..
Second, just because you rename a <div> does not automatically add/change anything in your CSS.
If you want 2 <div>s to be identical, then assign them each the same class="wearethesame"... or whatever class you want to create.
http://www.w3schools.com/css/css_id_class.asp
or in your CSS file, just copy/paste the CSS for the first #div and rename the pasted version to the same name as the second <div>. This will work just fine.. but it's not an automatic function.
Best wishes,
Adninjastrator

Why aren't my CSS and div tag boxes displaying the background images I'm plugging in?

I'm using the CSS dialog boxes to places images via the background image option into my dreamweaver site. Everything looks fine in dreamweaver but when I view it any of the browsers, two of the images I've place as div tag background images don't work....the overal background image of the site works, but these don't show up ....
here's my code if it helps to answer
<!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>Main</title>
<style type="text/css">
body {
background-image: url(images/realgrade.jpg);
background-repeat: repeat-x;
text-align: center;
html, body {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
padding-top: 25px;
#wrapper {
width: 930px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/possible%20image. jpg);
background-repeat: no-repeat;
#header {
height: 192px;
width: 237px;
background-image: url(images/logo_fill.jpg);
background-repeat: no-repeat;
position: absolute;
left: 35px;
top: -25px;
#mainNav {
background-color: #33F;
height: 200px;
width: 272px;
float: left;
margin-top: 233px;
#maincontent {
height: 600px;
width: 608px;
float: right;
margin-bottom: 45px;
padding-right: 25px;
background-repeat: no-repeat;
background-position: center 270px;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/opaqueMaincontent .png);
#sidebar {
background-color: #F36;
height: 250px;
width: 272px;
clear: left;
float: left;
#footer {
height: 525px;
width: 870px;
clear: both;
padding-top: 45px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
background-image: url(images/footer_image.jpg);
background-repeat: no-repeat;
margin-top: 45px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <p> </p>
    <p> </p>
    <p> </p>
</div>
<div id="mainNav">
<p> </p>
</div>
<div id="maincontent"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
here's what I'm going for
here's what I'm getting in the browser
Please help!

Your image files are pointing to your hard drive, not your server. You have this
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/imag es/opaqueMaincontent.png);
and you should have this
background-image: url(imag es/opaqueMaincontent.png);
Also, is your images file named imag es?
Gary

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 ;-)

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 change the default code that targets a new window to change the content in a div tag instead

I created a database for store locations. I was able to display the list of stores. Here though I don't want the list to show the number in front of it... I still need to find the CSS to edit my results for this one. However, more importantly, I don't want to open my results in a new window, I want to be able to target a DIV tag instead.
This is the code that is created to display the list of stores.
{module_webapps,5665,a,,,_blank,,50,,1}
Currently it opens a blank window. I'd like to target a div tag on the right of the list area where the store info can appear.
Perhaps the gurus at adobe can upgrade this feature? Target DIVs instead of new or blank windows, or using frames. Below is the screen of the links created from the DB.
Below is the blank window that it opens.
Would like to make it open in a div to the right of the list. Not sure how to change to core code that was created to make that change.

I'm doing something wrong. I have the list showing the stores in CA
<div class="flip" id="woodcontainer" style="width: 160px; height: 23px;">
<h1>CALIFORNIA</h1>
</div>
<div class="panel">
<script>
$("#infochange").load("{module_webapps,5665,c,41140}"); /* this creates the list of stores in CA where #infochange is the DIV I am targeting.
</script>
</div>
<br />
The code for the DIV where I want the details to load.
<div id="infochange"></div>
This doesn't make sense because I need to have something in the DIV as a holder of some sort?

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/

Insert Fluid grid layout div tag pastes CSS

I am trying to create a new fluid grid layout. I am able to insert 2 new layout divs, but after that, the "Insert Fluid grid layout div tag" fails. I am in "split" display, and the code view shows CSS instead of the HTML, and the design view shows a page of CSS code.
Control-Z always backs me up to the proper display of code and design, but the CSS file does not contain the definitions for the newly-inserted DIV.
Before insert:
After insert:

Yes. I created a new site, named as you see, for the files created as I learn the new features in CS6.
The problem I am seeing is 100% reproducable. The 1st 2 layout divs are inserted correctly, then all after that fail. After the 2nd screen shot above, a single ^Z will restore the code & display panes. I have learned that I can quickly switch into editing the CSS file, paste in the definitions for the new div (a pain, but do-able), then I can do all of the other editing, resizing, etc.
One thing I have not tried, but will, is to remove my custom key-mapping and try this in a standard workspace.

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

Trying to get content to fit better within a div tag

I've got a couple sliced up jpgs placed within a couple div tags (boxes) and aren't sure how to improve the fit. There's excess space vertically and it's not quite centered horizontally.
Here's the page: http://doughertyautomotive.com/New_Site/index.html
Thanks.

First off, from your post, we don't know which "couple of div tags" concern you. In Firefox, I did notice some elements not aligned with others that I am presuming are supposed to square up, but without a specific example it would be a waste of time to review your code in detail. Hazarding a guess, I'd say that you have assigned widths and heights to the jpegs that make them larger than the container you put them in. So you're just going to have to comb through all of your CSS and double check any assigned widths and heights of elements. It's also possible that you've added a CSS style which conflicts with one in the Project 7 style sheets. And for troubleshooting the Project 7 app, you need to go to its web forum.
Chris
www.cdeatherage.net

CSS Div tag content???

Similar Messages

Maybe you are looking for