Adobe recommends: CSS page layout basics

Over the next week, we are going to be publicizing some high-value content from adobe.com and other community sites. We have been tracking what's been most important to our users, and feel that getting this content out to the larger community will go a long way toward helping people tackle some of their most pressing challenges.
Continuing on our quest for great layout tips, our next recommendation comes from yours truly:
CSS page layout basics
This article takes you through the A-Z of what makes up a basic CSS layout. It also shows you how to use some of the CSS layouts that come packaged with Dreamweaver.
Give it a spin and let us know what you think!
Previous recommendation threads:
Use Dreamweaver CS 5.5 to package your web application for iOS and Android devices
Customizing a Spry Menu Bar widget
Spry Menu Bar resources
Layout 101

Although I love sending newbies to tutorials, I am sometimes stuck with a quandary especially when I see the word basics.
To me, a basic layout does not require any more than
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
          body {width: 960px; margin: auto;}
          #header {height: 85px; background: #060;}
          #nav {height: 35px; background: #000;}
          #aside {height: 400px; width: 180px; background: #999; float: left;}
          #article {margin-left: 200px;}
          #footer {height: 35px; background: #000; clear: both;}
     </style>
</head>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="aside"></div>
<div id="article"></div>
<div id="footer"></div>
</body>
</html>
In the above I have used fixed heights. That is because I have not placed any content into the div elements, but still wanted to show the outcome.
When the basic layout has been settled on, we can start with our niceties like resetting styles, padding for the content etc. I have noticed that David Powers has written an article (which I have not as yet read) on Modernizr wich will help as a good starting point.
The main thing to keep in mind is to keep it simple.
Gramps
Oops! Sorry! the Modernizr article goes way beyond the basics. Please only tackle this if you are brave enough. The reason I thought that it may be a good starting point is beacause I have been using HTML5Boilerplate (which includes Modernizr) for quite some time now.
Message was edited by: altruistic gramps

Similar Messages

"inc" extension wont display in css page layout

i am new to building pages with css. all i know is table based layouts. im trying to make a new template for my sites. also they are ASP pages. my problem is when im trying to use the "inc" code for my headers, footers, navigation, and a right menu. they dont display.
what would be different for getting those files to display in a css page layout?

You're close but you're missing quotes around your include file names. And your includes contain too much information.
Include files are nothing more than snippets of html code. An include statement is inserted into the parent page where you want the content to appear. For this demo, I have three pre-built SSI files in my Includes folder:
HeadMenu.ssi
LeftLinks.ssi
Footer.ssi
My parent page has been saved as Untitled.shtml (.shtml or .shtm tells the server there are include statements in the page). You may also use .php or .asp if your server supports these, however those include statements look different from the ones in this demo.
<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">

 </div>
<div id="sidebar1">

 </div>
<div id="mainContent">
<h1>Main Content H1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing odio.</p>
 </div>
<div id="footer">

 </div>
 </div>
</body>
</html>
My HeadMenu.ssi file looks like this with only the relevant menu code.
<div id="menu">
<a href="#content">skip menu ></a>
<a class="intro" href="index.shtml">home</a>
<a class="gallery" href="gallery.shtml">gallery</a>
<a class="tools" href="tools.shtml">tools</a>
<a class="portfolio" href="portfolio.shtml">portfolio</a>
<a class="fees" href="Fees.shtml">fees</a>
<a class="links" href="links.php">links</a>
<a class="contact" href="contact.shtml">contact</a>
</div> 
You can see a working example of this on my website: http://alt-web.com
One last thing, you won't see includes appear on in browser until you publish to a web server. If you want to test pages locally, you'll need to install a local testing server (WAMP, XAMP, MAMP) on your computer.
Ask your server host if they support SSIs and whether or not .shtml or .shtm files are set-up up to parse includes. Sometimes you need to add this to your .htaccess file.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

CSS Page layout height expand

I am new to Dreamweaver and CSS. I am using Dreamweaver CS4. I am trying to use div tags & CSS style sheet to make a page layout. What I want to do is nest several div inside a container div that will act like cells in a table row. I want to make the widths exact but allow the height to expand with the content. The problem is I want the height of all div/columns nested inside that outer div to expand in height equally (like the cells do in a table row) no matter what the content is in each, so that the height of each one will be the same as the height of the one that is the tallest.
Also in one of the div I want to put two other div that will expand in height as needed. Can you please tell me how to accomplish this?
Here is my HTML code for the div:
<div id="context_container">Content for id "context_container" Goes Here
<div id="nav_container">Content for id "nav_container" Goes Here
<div id="mast_top">Content for id "mast_top" Goes Here</div>
<div id="mast_container">Content for id "mast_container" Goes Here</div>
</div>
<div id="vert_div"></div>
<div id="text_container">Content for id "text_container" Goes Here</div>
<div id="shadow_container"></div>
</div>
Here is the CSS code I have so far:
#context_container {
margin: auto;
width: 917px;
#context_container #nav_container {
background-image: url(images/Nav_Bkground.jpg);
margin: 0px;
padding: 0px;
float: left;
width: 191px;
#context_container #nav_container #mast_top {
width: 191px;
#context_container #nav_container #mast_container {
background-image: url(images/Mast_bkground.jpg);
width: 191px;
#context_container #vert_div {
background-image: url(images/vert_div.jpg);
float: left;
width: 30px;
z-index: auto;
#context_container #text_container {
float: left;
width: 679px;
background-color: #FFF;
z-index: auto;
#context_container #shadow_container {
float: left;
width: 17px;
background-image: url(images/right_shadow.jpg);
This is a graphic of what I'm trying to acheive, except of course I want all of the div/columns to be the same height inside the context container

How you want to accomplish this is by using what is called a faux column. The columns
will not actually expand to the same size, it will just give the apprearance of doing so.
Take a peek at this and let us know if you need any more help.
http://www.paulgdesigns.com/fauxtext2.html
Gary

CSS Page Layout, Non-Liquid, How?

Just trying to get to grips with CSS and wondered how a page
like this forum is achieved, in my browser it shows as, white space
both sides and content in a fixed column down the centre.
I prefer this to a liquid layout because you have more
control as to the appearance, although there are pros and cons for
both.

Upload the page and post a link, please.
Why so many absolutely positioned elements?
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
==================
"AlanShaw" <[email protected]> wrote in
message
news:[email protected]...
> Hi Murray
>
> I gave it a go but couldn't get my head around it, I've
attached the CSS
> code
> I'm using, if you get five minutes can you please give
me a pointer.
>
> Thanks Nadia, I looked at your work but feel I still
need to understand a
> bit
> more before I get in too deep.
>
> Alan
>
> body{
> font-family: Arial,sans-serif;
> color: #333333;
> line-height: 1.166;
> text-align: justify
> margin: 0px;
> padding: 0px;
> background: #cccccc url(../img/graphics/bg_grad.jpg)
fixed;
> }
>
> /******* hyperlink and anchor tag styles *******/
>
> a:link, a:visited{
> color: #005FA9;
> text-decoration: none;
> }
>
> a:hover{
> text-decoration: underline;
> }
>
> /************** header tag styles **************/
>
> h1{
> font: bold 120% Arial,sans-serif;
> color: #006699;
> margin: 0px;
> padding: 0px;
> }
>
> h2{
> font: bold 114% Arial,sans-serif;
> color: #005FA9;
> margin: 0px;
> padding: 0px;
> }
>
> h3{
> font: bold 100% Arial,sans-serif;
> color: #334d55;
> margin: 0px;
> padding: 0px;
> }
>
> h4{
> font: 100% Arial,sans-serif;
> color: #333333;
> margin: 0px;
> padding: 0px;
> }
>
> h5{
> font: 100% Arial,sans-serif;
> color: #334d55;
> margin: 0px;
> padding: 0px;
> }
>
>
> /*************** list tag styles ***************/
>
> ul{
> list-style-type: square;
> }
>
> ul ul{
> list-style-type: disc;
> }
>
> ul ul ul{
> list-style-type: none;
> }
>
> /********* form and related tag styles *********/
>
> form {
> margin: 0;
> padding: 0;
> }
>
> label{
> font: bold 1em Arial,sans-serif;
> color: #334d55;
> }
>
> input{
> font-family: Arial,sans-serif;
> }
>
> /***********************************************/
> /* Layout Divs */
> /***********************************************/
> #pagecell1{
> position:absolute;
> top: 112px;
> left: 2%;
> right: 2%;
> width:760px;
> background-color: #ffffff;
> }
>
> #tl {
> position:absolute;
> top: -1px;
> left: -1px;
> margin: 0px;
> padding: 0px;
> z-index: 100;
> }
>
> #tr {
> position:absolute;
> top: -1px;
> right: -1px;
> margin: 0px;
> padding: 0px;
> z-index: 100;
> }
>
> #masthead{
> position: absolute;
> top: 0px;
> left: 2%;
> right: 2%;
> width:760px;
>
> }
>
> #pageNav{
> float: left;
> width:178px;
> padding: 0px;
> background-color: #F5f7f7;
> border-right: 1px solid #cccccc;
> border-bottom: 1px solid #cccccc;
> font: small Verdana,sans-serif;
> }
>
> #content{
> text-align: justify;
> padding: 10px 25px 0px 10px;
> margin:0px 0px 0px 178px;
> border-left: 1px solid #ccd2d2;
> }
>
> #content2{
> text-align: justify;
> padding: 10px 10px 0px 10px;
> margin:0px 0px 0px 178px;
> border-left: 1px solid #ccd2d2;
> }
>
>
> /***********************************************/
> /* Component Divs */
> /***********************************************/
> #siteName{
> margin: 0px;
> padding: 16px 0px 8px 0px;
> color: #ffffff;
> font-weight: normal;
> }
>
> /************** utility styles *****************/
>
> #utility{
> font: 75% Verdana,sans-serif;
> position: absolute;
> top: 16px;
> right: 20px;
> color: #919999;
> }
>
> #utility a{
> color: #ffffff;
> }
>
> #utility a:hover{
> text-decoration: underline;
> }
>
> /************** pageName styles ****************/
>
> #pageName{
> padding: 0px 0px 14px 10px;
> margin: 0px;
> border-bottom:1px solid #ccd2d2;
> }
>
> #pageName h2{
> font: bold 175% Arial,sans-serif;
> color: #005FA9
> margin:0px;
> padding: 0px;
> }
>
> #pageName img{
> position: absolute;
> top: 0px;
> right: 6px;
> padding: 0px;
> margin: 0px;
> }
>
> /************* globalNav styles ****************/
>
> #globalNav{
> position: relative;
> width: 100%;
> min-width: 640px;
> height: 32px;
> color: #cccccc;
> padding: 0px;
> margin: 0px;
> background-image:
url(../img/graphics/glbnav_background.gif);
> }
>
> #globalNav img{
> margin-bottom: -4px;
>
> }
>
> #gnl {
> position: absolute;
> top: 0px;
> left:0px;
> }
>
> #gnr {
> position: absolute;
> top: 0px;
> right:0px;
> }
>
> #globalLink{
> position: absolute;
> top: 6px;
> height: 22px;
> min-width: 640px;
> padding: 0px;
> margin: 0px;
> left: 10px;
> z-index: 100;
> }
>
>
> a.glink, a.glink:visited{
> font-size: small;
> color: #000000;
> font-weight: bold;
> margin: 0px;
> padding: 2px 5px 4px 5px;
> border-right: 1px solid #8FB8BC;
> }
>
> a.glink:hover{
> background-image:
url(../img/graphics/glblnav_selected.gif);
> text-decoration: none;
> }
>
> .skipLinks {display: none;}
>
> /************ Nav styles **************/
>
> .Nav{
> position: absolute;
> top: 84px;
> left: 0px;
> /*width: 100%;*/
> min-width: 640px;
> height: 20px;
> padding: 0px 0px 0px 10px;
> visibility: hidden;
> color: #ffffff;
> }
>
> .Nav a:link, .Nav a:visited {
> font-size: 80%;
> color: #ffffff;
> }
>
> .Nav a:hover{
> color: #cccccc;
> }
>
> /*************** search styles *****************/
>
> #search{
> position: absolute;
> top: 5px;
> right: 10px;
> z-index: 101;
> }
>
> #search input{
> font-size: 70%;
> margin: 0px 0px 0px 10px;
> }
>
> #search a:link, #search a:visited {
> font-size: 80%;
> font-weight: bold;
>
> }
>
> #search a:hover{
> margin: 0px;
> }
>
>
> /************* breadCrumb styles ***************/
>
> #breadCrumb{
> padding: 5px 0px 5px 10px;
> font: small Verdana,sans-serif;
> color: #AAAAAA;
> }
>
> #breadCrumb a{
> color: #AAAAAA;
> }
>
> #breadCrumb a:hover{
> color: #005FA9;
> text-decoration: underline;
> }
>
>
> /************** feature styles *****************/
>
> .feature{
> padding: 20px 20px 30px 10px;
> font-size: 80%;
> min-height: 200px;
> height: 200px;
> }
> html>body .feature {height: auto;}
>
> .feature h3{
> font: bold 175% Arial,sans-serif;
> color: #000000;
> padding: 30px 0px 5px 0px;
> }
>
> .feature img{
> float: left;
> padding: 0px 10px 0px 0px;
> }
>
>
> /*************** story styles ******************/
>
> .story {
> padding: 10px 0px 0px 10px;
> font-size: 80%;
> }
>
> .story h3{
> font: bold 125% Arial,sans-serif;
> color: #000000;
> }
>
> .story p {
> padding: 0px 0px 10px 0px;
> }
>
> .story a.capsule{
> font: bold 1em Arial,sans-serif;
> color: #005FA9;
> display:block;
> padding-bottom: 5px;
> }
>
> .story a.capsule:hover{
> text-decoration: underline;
> }
>
> td.storyLeft{
> padding-right: 12px;
> }
>
>
> /************** siteInfo styles ****************/
>
> #siteInfo{
> clear: both;
> border-top: 1px solid #cccccc;
> font-size: small;
> color: #cccccc;
> vertical-alighn: right;
> padding: 10px 10px 10px 10px;
> margin-top: 0px;
> }
>
> #siteInfo img{
> padding: 4px 4px 4px 0px;
> vertical-align: middle;
> }
>
>
> /************ sectionLinks styles **************/
>
> #sectionLinks{
> margin: 0px;
> padding: 0px;
>
> }
>
> #sectionLinks h3{
> padding: 10px 0px 2px 10px;
> border-bottom: 1px solid #cccccc;
> }
>
> #sectionLinks a:link, #sectionLinks a:visited {
> display: block;
> border-top: 1px solid #ffffff;
> border-bottom: 1px solid #cccccc;
> background-image: url(../img/graphics/bg_nav.jpg);
> font-weight: bold;
> padding: 3px 0px 3px 10px;
> color: #21536A;
> }
>
> #sectionLinks a:hover{
> border-top: 1px solid #cccccc;
> background-color: #DDEEFF;
> background-image: none;
> font-weight: bold;
> text-decoration: none;
> }
>
>
> /************* relatedLinks styles **************/
>
> .relatedLinks{
> margin: 0px;
> padding: 0px 0px 10px 10px;
> border-bottom: 1px solid #cccccc;
> }
>
> .relatedLinks h3{
> padding: 10px 0px 2px 0px;
> }
>
> .relatedLinks a{
> display: block;
> }
>
>
> /**************** advert styles *****************/
>
> #advert{
> padding: 10px;
> }
>
> #advert2{
> padding: 10px;
> font-size:9px;
> text-align:center
> }
>
> #advert img{
> display: block;
> }
>
> /********************* end **********************/
>

Need Help Starting CSS Page Layout

Hi, I need a little help getting started in creating a CSS
layout page in Dreamweaver CS4. I am following a tutorial online
but I have run into a problem. What I am trying to do is get a
simple CSS layout started. Below I have listed my steps.
1) First I created a new .html page and named it "index.html"
2) Next, in the "Properties" panel I clicked the "CSS" button
3) I then selected the "Edit Rule" button and a window opened
called "New CSS Rule"
4) I then left all default settings and in the window where
it asked me for a name for my selector I typed in:
main_layout.css
Then I got this message below.
"Class names must start with an alphabetical character
preceded by an optional period. There should be no
spaces or additional punctuation."
What am I doing wrong? Can someone please tell me the correct
steps to start a CSS layout in DW CS4?
Thanks

Undescore are Ok in CSS, your problem is the starting. When
you define a
class in CSS you have to start the calss name with a period.
Plus they
cannot be a period after so...
If you want to define a class.
main_layout.css is not OK
.main_layout is OK
main_layout is not OK
Putting a ".css" a the end is for a file name not a selector
So with my example .main_layout you would then applie this
class to a tag
like this
<p class=" main_layout">Put text here</p>
Now if you want to define a ID selector then you start tou
selector eith "#"
no quotation mark
so
#container {
position:relative;
background-color: #fff;
width: 800px;
margin: 0 auto;
top: 20px;
border-top: 0;
border-right: 1px solid #b7b7b7;
border-bottom: 0;
border-left: 1px solid #b7b7b7;
And then you apply this as an id
<div id="container">Put content here</div>
Do you get it. If not then go get a good book on CSS.
aka Frenchy ASP
"tweened" <[email protected]> wrote in
message
news:ge27el$a8i$[email protected]..
> I'm still learning CSS myself. But I have never seen a
style sheet name
> with an
> underscore in it or any punctuation for that matter. If
you look at the
> last
> sentence in the error message you got, It tells you that
no additional
> punctuation can be used. Try using "style" as your css
name. the same
> would go
> for the property tags within the style sheet, don't use
any punctuation in
> the
> names.
>

Help with CSS Page Layout

I guess I am "old school" in that I have always used tables
to lay out my web pages. I decided I must learn to do it with CSS,
but I'm having a terrible time (and it shouldn't be so hard!). I
understand how to define the styles, add divs, etc. Here's what I'm
having trouble with:
How do I specify the normal page width to be 800 pixels,
however I want it to be relative to the browser (i.e., 100% of 800
pixels).
I understand the "float" tag, but if I have a right-hand
sidebar, I can't seem to get the text to the left (in a div called
"maincontent") to stop at the sidebar and wrap to the next line. I
tried specifying "Hidden" as my textbook suggests, but that has no
effect.
I can easily do all of this with tables, so do I really need
to abandon them?
Thanks!

Hi Jane,
I'll try to answer all your questions, then a tip or two to
stop the main
content from dropping when the browser window size is
reduced.
- " I didn't realize that
margin-top: 0px;
margin-right: auto;
is not the same as margin: 0px auto;
That's right.
margin: 0px auto; is actaully saying make the top margin 0,
the right margin
auto, the bottom margin 0 and the left margin auto.
It's just CSS shorthand.
For example, you might have:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 5px;
margin-left:15px;
You could just use margin: {10px 20px 5px 15px;}
Think of a clock to remember the directions.
12:00 top, 3:00 right, 6:00 bottom, 9:00 left.
If any of the values are the same, you can shorten it more.
For example, if top is 10, right is 20, bottom is 5 and left
is 20, it's
margin: {10px 20px 5px;}
If the 4th location (left) is missing a value, it makes it
the same as what
you have for right.
If top and bottom are 10px, and left and right are 20px,
it's:
margin {10px 20px;}
If the last two positions ( bottom and left vlaues ) are
missing, then it
will use the top value for the bottom, and the right value
for the left.
What auto right and left is doing is subtracting your content
width (the
container width) from the browser window width, and then
dividing the
remainder in 2 and applying each value to each side of the
container.
-"I found that they all took on the font of the maincontent
and I had to fix
them
individually. "
The only text that should be Time is the text in your main
content, where
you have that font defined. Everything else should be Arial
if you define
the body as such. I'll post a link at the end of this.
- "I put my bold sentence (Friendship, Fun, etc.) in h1, but
I had to change
the
color & size, so that added another style element. "
You don't need to give the h1 a class. You can actually just
style the h1
tag:
h1 {
margin: 10px 10px 2px;
font-size: larger;
color: #941238;
You can only use h1 once on a page.
You can use h2, h3, h4, etc, as many times as you would like,
and you can
style these just like the h1 style above.
- "I don't quite understand the .rightsidebar p { and
container p{
I am assigning the spacing to the <p> tag? What exactly
is that doing?"
That is saying, give all the <p> tags inside the
rightsidebar container the
follwing style.
So, in this example:
.rightsidebar p {
font-size: 18px;
margin: 2px 10px;
it's saying give all the <p> tags in this container a
size of 18 and margin
of 2px top and bottom, and 10px left and right.
It's a lot easier than giving a class to every <p> tag
- "I also don't quite understand the .clear {
Why not just choose clear:both on the next section <div
class="footer">"
You could, if the footer was in the container. It just needs
to be the final
element before the close of a container that contains the
float(s).
-Do you use the <div class="container"> technique all
the time?
Yes, most of the time. I usually put everything in it, and
use the
margin:0px auto; to center it.
That way, I don't have to try to get a number of different
elements to align
with the right and left sides by applying values to all of
them, which can
get tricky quickly.
-"If you'll indulge me one more question, I wonder if it's
possible to put a
graphic (say, of a putting green) underneath my
rightsidebar? I would want
the sidebar to lay on top of the putting green for an
interesting artistic
touch.
Yes, you can give that div a background image. You just need
to make the div
the same size as the image so you see it all (or vice-versa).
Now, to make that maincontent not drop like it does you can
remove the width
in the CSS. Now it will expand over to the left edge of the
rightsidebar.
You can control how close it gets by giving the right sidebar
a bigger left
margin. The point is, with no width assigned, the maincontent
will shrink
down to the longest word in it before it drops.
Here's what it looks like:
http://tnsgraphics.com/test2.htm
Let me know if you have any questions.
Take care,
Tim
"janeinpa" <[email protected]> wrote in
message
news:[email protected]...
> Hi, Tim...
>
> You have been very kind to help me learn CSS! I very
much appreciate it
> and
> am really delighted to have gained a better
understanding of this. I
> studied
> all your suggestions and started the page from scratch.
Take a look here:
>
http://www.allisonwebcreations.com/ewga_site/good_page/indexgood.htm
I'm
> very
> pleased with it. I discovered a couple of things:
>
> I didn't realize that
> margin-top: 0px;
> margin-right: auto;
>
> is not the same as margin: 0px auto;
>
> are they two different codes? Anyway, it didn't center
until I fixed
> that.
>
> I understand what you're saying about the font codes
being redundant,
> however
> I found that they all took on the font of the
maincontent and I had to fix
> them
> individually. This must be an error in how I'm coding
it. Is the order
> in
> which I did them to blame? I put it in the order that
I'm reading it, but
> perhaps I should do it differently.
>
> I also couldn't get the footer to move left to the
margin. I'm not sure
> why,
> since I think I followed all your suggestions.
>
> I put my bold sentence (Friendship, Fun, etc.) in h1,
but I had to change
> the
> color & size, so that added another style element.
I'm afraid that
> probably
> isn't correct. I also couldn't have my normal content
text follow
> immediately
> on the same line. Maybe that isn't possible.
>
> I don't quite understand the .rightsidebar p { and
container p{
> I am assigning the spacing to the <p> tag? What
exactly is that doing?
>
> I also don't quite understand the .clear {
> Why not just choose clear:both on the next section
<div class="footer"> ?
>
> Do you use the <div class="container"> technique
all the time? How do you
> decide what goes in it -- just floating items or can I
think of it as a
> table
> that holds all my main blocks of info? Why not include
the footer in it?
>
> If you'll indulge me one more question, I wonder if it's
possible to put a
> graphic (say, of a putting green) underneath my
rightsidebar? I would
> want the
> sidebar to lay on top of the putting green for an
interesting artistic
> touch.
>
> Thank you, thank you, thank you again. Here are my css
codes (which I
> have in
> an external file. Is it better to import or link to the
file?)
>
> Have a wonderful New Year.
>
>
>
>
>
>
> .body {
> padding: 0px;
> margin-top: 0px;
> font-family: Arial, Helvetica, sans-serif;
> }
> .masthead {
> width: 780px;
> margin: 0px auto;
> padding-top: 10px;
> padding-right: 0px;
> }
> .maincontent {
> background-color: #FFFFFF;
> text-align: left;
> width: 60%;
> margin-top: 0px;
> padding-top: 10px;
> padding-right: 0px;
> font-family: "Times New Roman", Times, serif;
> font-size: medium;
> color: #000000;
> }
> .maincontent p{
> margin-top: 2px;
> margin-right: 10px;
>
> }
> .rightsidebar {
> font-size: small;
> background-color: #DEEBE4;
> text-align: center;
> float: right;
> width: 250px;
> margin-top: 10px;
> margin-left: 20px;
> border: thick solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
>
> }
> .leftbox {
> font-size: small;
> font-style: italic;
> color: #336600;
> background-color: #DEEBE4;
> text-align: center;
> clear: both;
> width: 300px;
> margin-top: 50px;
> border: thin solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
> }
> .footer {
> font-size: small;
> margin: 100px;
> font-family: Geneva, Arial, Helvetica, sans-serif;
> font-style: normal;
> }
> .container {
> width: 90%;
> margin: 0px auto;
> }
> .clear {
> font-size: 1px;
> line-height: 0px;
> clear: both;
> height: 0px;
> }
> .event {
> font-size: 24px;
> font-weight: bold;
> color: #00493E;
> }
> .upcomingdate {
> font-size: 20px;
> color: #990134;
> font-weight: bold;
> font-family: Arial, Helvetica, sans-serif;
> }
>
> .eventitem {
> font-size: 18px;
> color: #000000;
> font-weight: bold;
> margin: 0px;
> }
> .eventlink {
> font-size: 14px;
> font-style: italic;
> margin: 0px;
> }
> .smallboxhead {
> font-size: large;
> color: #00493E;
> font-style: normal;
> font-weight: bold;
> }
> .companyname {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: small;
> font-style: italic;
> color: 990134;
> }
>

Adobe recommends: Enhanced support for CSS3 in Dreamweaver CS5.5

Over the past week, we publicized some high-value content from adobe.com and other community sites. Hopefully you enjoyed these posts and found the resources useful. Today is our last day of the "Adobe Recommends" series.
Continuing our trip along the CSS highway, we now move to CSS3 with our next recommendation, by Preran Kurnool:
Enhanced support for CSS3 in Dreamweaver CS5.5
This blog post takes you through using box shadow, text shadow, border radius, and border image properties in Dreamweaver CS5.5.
Give it a spin and let us know what you think!
Previous recommendation threads:
Use Dreamweaver CS 5.5 to package your web application for iOS and Android devices
Customizing a Spry Menu Bar widget
Spry Menu Bar resources
Layout 101
CSS page layout basics
New CSS features in Dreamweaver CS5
Automatically attaching style sheets to new documents

Aegis Kleais wrote:
Sorry, Al, but I couldn't disagree more. Where I respect the fact that, as coders, we're rather ingrained with our workflow processes and, at times, hesitant to change, I've found LESS' benefits to be very worthwhile.
No need to apologize. Preprocessing is a topic on which there are differing opinions. You have one. I have one. There are advocates:
http://blog.urbaninsight.com/2012/04/12/ten-reasons-you-should-be-using-css-preprocessor
There are those who are not sold:
http://blog.millermedeiros.com/the-problem-with-css-pre-processors/
http://www.skybondsor.com/blog/css-preprocessors
There are those mostly sold:
http://css-tricks.com/musings-on-preprocessing/
There are even those who have been converted (but who might reverse at some later point):
http://cognition.happycog.com/article/preprocess-this
Heck, even I might be converted someday - or not
Bottom line for me, right now? I know I can write CSS that is better than most, more efficient than most, and easier to follow than most, and a preprocessor would add unwanted complexity. But that's for me. For someone not able to be organized intutively, or for a large - but carefully coordinated - team, a preprocessor could be a positive.
But not for me.
There are evolving trends - popular aspects of the technology that may and should find themselves being adapted into CSS. But I've been around this business as long as CSS has. I've seen buzzwords and trends and I've historically been spot-on in predicting the one that will stick. I think preprocessing will stick - but only insofar as it will be a catalyst for features in future versions of CSS. As a separate technology it makes no sense - to me

Adobe recommends: New CSS features in Dreamweaver CS5

Over the next week, we are going to be publicizing some high-value content from adobe.com and other community sites. We have been tracking what's been most important to our users, and feel that getting this content out to the larger community will go a long way toward helping people tackle some of their most pressing challenges.
Continuing our trip along the CSS highway, our next recommendation is a video by Dremeaver superstar Brian Wood:
New CSS features in Dreamweaver CS5
The video demonstrates some of the most exciting new CSS features in Dreamweaver: new CSS layouts, CSS inspect, and CSS enable/disable.
Give it a spin and let us know what you think!
Previous recommendation threads:
Use Dreamweaver CS 5.5 to package your web application for iOS and Android devices
Customizing a Spry Menu Bar widget
Spry Menu Bar resources
Layout 101
CSS page layout basics

Thanks for the answer this is very useful however I still find that Dreamwever defaults back to writing in CSS, I have to go to the manel every time and switch from CSS style to Inline style which is very irritating. Is there any way to disable writing in CSS all together like their used to be in CS3..in the preferences.
Much appreciated

Design View and a CSS Div layout page

There are a few pages l
ike this. I am assuming it is because everything is layed out w
ith div tags, but there mush be a way to correct the desging view. Everything shows up great o
nline. Here is a screenshot:
Here is the code:
<body onload="initHomePage(); addReferToLinks();">

<script type="text/javascript" src="/shared_assets/toolbar_v2/toolbar.js"></script>

<img src="/profile/image/logo_linknet.gif" />

<form name="frmSearch" action="" method="get" title="Resources" class="scopedSearch">
       <input class="textInput" name="qt" value="THIS SECTION ONLY" id="searchField" size="20" />
       <input class="button" type="submit" value="Search" name="submit" />
       <input type=hidden name="col" value="mpr dno dnos1" />
</form>
    <div id="main">

<div id="newsBox" class="box">
   <div class="boxHeader">
    <div class="headerLeft"><h2>MP News</h2></div>
    <div class="headerRight"><a href="/news/news/index.htm" class="more">more »</a></div>
   </div>
   <div class="boxContent">
    <h3>
     <script type="text/javascript">var x=new Date(); document.write(x.toLocaleDateString());</script>
    </h3>
    <div id="newsContent">
     <div class="loading">
      Loading...
     </div>
    </div>
    
    <h3>My Subscriptions</h3>
     <ul style="list-style-type:none;">
      <li><a href="http://rss/">Setup Subscriptions - Get Help</a></li>
      <li><a href="http://">View Subscriptions</a></li>
     </ul>
    
    <div class="imgFrame"><a href=""><img src="image/mc_logo2.jpg" alt="Media Center" hspace="0" vspace="0" border="0" /></a></div>
    
    <div class="imgFrame"><a href="http/"><img src="image/columns.gif" hspace="0" vspace="0" border="0" alt="The Northwestern Columns" /></a></div>
   </div>
</div>


<div id="content">
   
   
   <div id="alert" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft"><h2>Important Notice</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div id="alertContent" class="boxContent">
     <div class="article">
      <a href="" class="headline">Avoid lock out - Install LINK 22.2 now</a>
      Users who do not install LINK 22.2 before the version enforcement date of July 31 will be
      unable to access their PCs.
     </div>
    </div>
   </div>
            <div id="home_page_id">) Home Page</div>
   
   <div id="activities" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft">Welcome<span id="username"></span><h2>What would you like to do?</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div class="boxContent">
     <div style="width:100%;">
      <ul>
       <li><a title="Find information and tools for recruiting new representatives" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Recruiting: <select style="font:message-box; width:19em;" onchange="if(this.value){window.navigate(appendReferer(this.value))};">
         <option name="selectRecruit" selected="selected">*** make selection ***</option>
         <option value="http.htm">Sourcing & Prospecting</option>
         <option value="http://.htm">Selecting & Assessing Candidates</option>
         <option value="http://_process.htm">Post Acceptance Process</option>
         <option value="http">Developing an Internship Program</option>
         <option value="http.htm">Tracking Activity, Results & Accountability</option>
         <option value="http://.htm">Recruiter Development</option>
        </select></a></li>
       <li><a href="/objective/mpr_secure/mp_ldorgdev.htm" title="Find information and tools for developing leaders in your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Leadership & Organizational Development </a></li>
       <li><a href="/objective/mpr_secure/mp_supvsn.htm" title="Find information and tools for effective supervision" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Supervision</a></li>
       <li><a href="/objective/mpr_secure/mp_stfop.htm" title="Find information and tools for   managing your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Staffing & Operations</a></li>
       <li><a href="/objective/mpr_secure/mp_plnperform.htm" title="Find information and tools for business planning and performance monitoring" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Planning & Performance</a></li>
          <li><a href="/objective/mpr_secure/mp_mngmntcompben.htm" title="Find information regarding income, fees, expenses, allowances and benefits" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Management Compensation & Benefits</a></li>
          <li><a href="/objective/mpr_secure/mp_repdev.htm" title="Find information and tools regarding mentoring and professional growth" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Representative & Specialist Development</a> </li>
      </ul>
      <div id="slideshow1" class="activitySlideshow" style="height:212px;">
       <img src="image/slideshow_photos/photo06.jpg" />
       <img src="image/slideshow_photos/photo07.jpg" />
       <img src="image/slideshow_photos/photo08.jpg" />
       <img src="image/slideshow_photos/photo09.jpg" />
       <img src="image/slideshow_photos/photo10.jpg" />
      </div>
     </div>
    </div>
   </div>
   
   <div class="leftColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Events Calendar</h2></div>
     </div>
      <div class="boxContent"><ul>
      <li>April 25-30<br />
     <a href="http_020110.htm" target="_blank"></a></li>
     <li>May 12-14<br />
     <a href="http://030510.htm" target="_blank"></a></li>
       <li>June 16<br />
     <a href="http://.htm" target="_blank">Series conversation</a></li>
                      </ul>
      </div>
    </div>
     
     <div class="box">
      <div class="boxHeader">
       <div class="headerLeft"><h2>Spotlight</h2></div>
       <div class="headerRight"> </div>
      </div>
      <div class="boxContent">
              <div class="article">
      
   <div class="headline"><a href="http.htm?tern Mutual Association dues decline form available</a> </div>
     The $25 association membership fee will be charged to June 30 home
     office supply bills. Representatives who wish to decline membership
     may submit a <a href="http://.htm" target="_blank">decline
     form</a>.
<div class="headline"><a href="http://.htm">Surplus notes information available</a> </div>
     Find answers to common questions and hear insights from about the company’s recent surplus notes offering.
                          <div class="headline"><a href="http://.htm">Stay up to date on 2010 estate tax repeal </a> </div>
     Consider the new Estate Tax Repeal page on LINKnet “home base” for information on the 2010 repeal and resources to use when talking to clients about this topic.
              <div class="headline"><a href="http/index.htm">Withstanding Market Challenges</a> </div>
     Access resources to highlight the company’s strength and stability, find sales strategies and share marketing and market-related materials to help address client concerns.
              <div class="headline"><a href="http:///year.htm">Dividend resources available</a> </div>
     The Current Year Scale page on LINKnet provides the latest information
     and sales support materials based on the 2010 dividend announcement.

               </div>
      </div>
     </div>
   </div>
   <div class="rightColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Approaching Deadlines</h2></div>
     </div>
     <div class="boxContent">
       <ul>
<li>April 30: <a href="http.htm">Submit 2010 Commitment to Excellence Award nbominee</a></li>
       <li>May 25: <a href="http.htm">Submit applications for Intern Community Service Award</a></li>
                      <li>June 30: <a href="http://pdf">Submit 2010 Managers Membership Award Application to NAIFA</a> <img src="/shared_assets/image/doc_icons/pdf.gif" alt="PDF File" /></li>
                      </ul>
      </div>
    </div>
    
    <div id="techalerts" class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Priority Tech Alerts</h2></div>
      <div class="headerRight"><a href="http://.htm" class="more">more »</a></div>
     </div>
     <div class="boxContent">
      <div class="loading">
       Loading...
      </div>
     </div>
     <iframe name="techalerts" src="/statusdisplay/001_summary.htm" onreadystatechange="if(this.readyState=='complete'){this.previousSibling.innerHTML = formatTechAlert(frames['techalerts'].document.body.innerHTML);}"></iframe>
    </div>
   </div>
</div>

Dreamweaver is pretty good these days at showing the page in Design View how it will be viewed when online. HOWEVER having said that it does largely depend on the way you write the css.
I guess for Dreamweaver it's impossible for it to show every concievable way you can write css correctly. Unfortuantely if your css is not compatible with what Dreamweaver likes it won't make a great job of rendering the site correctly in Design View, that's always been the case.
The css is not wrong but I've seen many display issues in Dreameaver Design View caused as a direct result of the css being overly complex to crack simple presentation. I guess it's in the lap of the gods if you are fortunate enough to have found the way to write css that Dreamweaver likes.

My Adobe XI software no longer converts Word to PDF files with hyperlinks or page layout preserved.

Is anyone else having the same problem where the initial installation worked fine and over time, you are no longer able to adjust the setting in the 'convert to PDF' menu for Word documents? I am now faced with Word documents that lose their hyperlinks on conversion and when there are changes in page orientation (e.g., portrait to landscape and back again), the software creates sub files for each kind of page layout. In a word, the software has become useless. What can I do to fix this?

In order to preserve links on Mac Word to PDF. You need to do as follows (note this only preserves links created by Word's auto Correct. Not by Word's URL Creator.)
Method #1
Create Document save as .docx as backup.
Go to File Menu > Print
Click and hold the PDF button, a Context menu appears.
Choose Adobe Quality PDF, or Adobe PDF (depends upon Version of Mac OS X)
First Choose quality (similar to Job Options in Distiller) and whether to open using Acrobat Or Reader.
Next a Title will appear. (in format "microsoft.nameoffle.docx.pdf").
You can leave file name as is or remove the Microsoft and the .docx from the Name
Save File.
This method also will print pdf, even if it has section and Page breaks except when there is orientation change from Portrait, or landscape.
Method #2
Do step 1 above.
Locate the file Created.
Drag the file either on top the actual Application or its Icon in the Dock.
Wait ......
When Acrobat opens Immediately save.
Again all links created with Auto-correct will be live.
And pages will be intact in the PDF except when there is a Change in orientation.
Auto correct will create links/URL's when you type such the will automatically turn blue and become underlined. And clicking on the in the word Document will go to the link.
What does not work until Adobe fixes a 10-15 year old bug is where you select word then go to Insert menu> URL. A window opens and you choose the link or email, in the URL Creator.
Also the Bug where changes in section, and pages breaks cause new PDF that have to be put together has not been completely cured. (Still splits when orientation changes.) Has been proved by Microsoft to be a Bug Adobe can't or won't fix. You simply take a Mac Word File open it in the PC version and create a PDF. And works perfect.

User's Page Layout in Adobe XI does not work

I'm having a hard time to configure the default page layout on my Adobe Reader XI version.
It's really driving me crazy, I've already tried to edit my user preferences as "single page continuous" and "fit width", though every single document opened by the "latest and best version of Adobe Reader" is in "single page" and "100%"...
All right... It's very annoying indeed, though it's not the worst part yet. Having assumed it's just impossible to make a real "user default layout", I've tried to adjust it manually, but when clicking at any other page, the freaking "single page" and "100%" zoom come back!
I've seen people with the same problem in other forums forum before, but no one had a clue how to fix it.
Thanks in advance,
Vitor

While I'm not sure how many different problems might cause the same symptom, the only time I've seen something easy work to fix this is a change in Preferences > Documents > Open Settings. The checkbox Restore Last View Settings When Reopening Documents overrides the settings in Preferences > Page Display > Default Layout and Zoom. I would say though, that in the case where this worked, the view did not reset as you paged through the document. That sounds horrible.

The toolbar in the adobe app that allows you to choose the brightness level and the page layout doesn't hide. Because of that, i of course am unable to read the top part of the page...[Android]

The toolbar in the adobe app that allows you to choose the brightness level and the page layout doesn't hide. Because of that, i of course am unable to read the top part of the page. I cannot find anything in the settings that will make it go away. What do i do? I use Samsung Ace.

What is the Acrobat DC version and the android version that you are running? You can find the Acrobat version here: How to find the Acrobat DC version installed on your Android device

Unable to center page layout in DW CS4 using css - using auto margin is not working

Trying to center the page horizontally, here's the css I've got for the wrapper:
#wrapper {
    width: 990px;
    margin: auto;
    padding: 0px;
    background-color: #4d4d33;
    background-image: url(../images/full_bkg.jpg);
    height: 1100px;
    background-repeat: repeat;
    position: absolute;

Thank you osgood, that did work for the entire page layout. However, it created problems with the rest of the layout. Here's the page before I changed the position:absolute. http://renyswildflowers.com/guide.html After making that change the other "columns" moved out of position. I tried various "position" settings for them but none worked.

Adobe Livecycle Designer ES 2 - how to repeat page layout in the form?

How would you repeat page layout design randomly in a form, means how the same page layout can be repeated on non-consecutive pages of an LC Form? For e.g. I want to repeat Page1 layout on Page 5 and Page 6 of an LC Form. How to do that. Please reply.

You use Master Pages to set layout that you want to use on multiple pages.
Design what you want in a Master Page and then assign it to the pages you want in Object>Pagination>Place: and choose On Page> whatever you called your Master Page.

Basic Pages Layout

I'm currently working with the Pages 30 day trial. I've been using AppleWorks for years where I set up a 20 page document that prints out front and back with 4 pages per sheet of paper, 2 pages front and 2 pages on the back side that will print out in booklet form so each page is approx 4x5.5" (1/2 standard page) in size. I'm trying to accomplish this in Pages.
When in the Pages layout mode, I have set page layout on it's side using a standard 8.4x11 paper size, but when I look at the page itself, the white editable portion (as compared to the grey portion) is not centered. According to the ruler there is .5" margin on the left, .25" margins on top and bottom, and .1" margin on the right.
I have checked the document inspector to no avail setting all of the margins to .5" but it does not change the current margins as I described above. What I want is the printed portion perfectly centered on the page. How do I do this?
Thanks!
-Dave
PS, I plan on looking for a good iWork book but in the mean time looking for answers here!

Related to this, perhaps: In Page-Layout mode, changes I make to margins in the Document Inspector are not reflected in the document itself. The gray margin areas remain unchanged. The margins seem to be determined solely by what I choose as a printer in Page Setup. Seems like a bug to me.
In Word-Processor mode, the margins work fine.

Adobe recommends: CSS page layout basics

Similar Messages

Maybe you are looking for