First fully CSS layout.

I've really enjoyed building this page, a challenge at times
for a someone who's bit of a CSS toddler!
I've attempted to make it expand vertically for content and
accessibility with ctrl/cmd + in firefox/safari.
If you see anywhere I'm going wrong, or any comments at all
would be appreciated.
Please feel free to rip it to pieces as this is (hopefully) a
starting point for future layouts.
Website
Here
Cheers,
Rich

On Mon, 7 Apr 2008 15:16:22 +0000 (UTC), "RICH POW"
<[email protected]> wrote:
>I've really enjoyed building this page, a challenge at
times for a someone
>who's bit of a CSS toddler!
>
> I've attempted to make it expand vertically for content
and accessibility with
>ctrl/cmd + in firefox/safari.
>
> If you see anywhere I'm going wrong, or any comments at
all would be
>appreciated.
>
> Please feel free to rip it to pieces as this is
(hopefully) a starting point
>for future layouts.
>
>
http://www.adelantedesign.co.uk/websites/oakhurst/
>
> Cheers,
> Rich
Further to Osgoods comments - which I go along with :
I like the look of the site.
However :-
css:
you have a lot of superfluous code - for example you have
font-family: Verdana, Arial, Helvetica, sans-serif;
in each and every h - and many ( all ? ) other defined tags.
you only need to define it once - in the body tag - all
others will
inherit it from there.
you only define h1, h3 & h5, and then it's largely
duplicated:
consider something like this:
p, td, th, div, blockquote, ul, li, dl, ol { font-size: 1em;
p, td, th { margin: 0.65em 0;}
h1, h2, h3, h4, h5, h6 { font-family: Verdana, Arial,
Helvetica,
sans-serif; font-weight:bold;}
h1 { font-size: 1.5em; margin: 0.65em 0; color:green; }
h2, h3 {font-size: 1.2em; margin: 0.25em 0; color:green; }
h4, h5, h6 { font-size:1em; margin: .25em 0;}
note that h2, h4 & h6 are included - you may want to use
them someday.
the p, td,th, ul, li, dl, & ol tags are also defined -
again you may
need them - certainly the p tag should be defined and used
<p align="left" and <h5 align="left"> - redundant
use of align="left"
as they are aligned left anyway - even if they weren't you
could put
that in the above css.
You have 43 divs - some might regard that as excessive - it's
called
divitis and 46 spans -
~Malcolm~*...
~*

Similar Messages

Please check css layout

Hi - posted this in the webforum but didn't show here for
some reason so
posting again...
just doing my first all css layout and want to get the
experts to
check it out - tell me what could be better / anything
glaringly
wrong / etc etc
Navigation is a work in progress - I'm trying to learn it
from
the project seven tutorial. Don't know why the drop down
background is not
going all the way down.
Anyway, mainly wanting to get the page layout
perfect first. Any comments appreciated. Still getting my
head around
floats. The less Ap the better - is that right? I've done
lots of
reading, now just trying to get it all working.
http://www.hscatering.co.nz/2007/index3.html#
Thanks in advance,
Karen J

"Karen J" <karen@don'tmailmeredsea.co.nz> wrote in
message
news:f6nklv$280$[email protected]..
> thanks both for the kind words! And while i'm sure it's
what I'd like to
> hear I can't believe my first go is perfect...anyone who
wants to be
> unkind about my code and possible erratic abuse of divs
please feel free
> to jump in :-)
Karen,
Only because you asked:
To find out if you've created a layout that is "robust"
enough simply
increase the text size in your browser to see if that doesn't
break
anything.
If it doesn't, you have a winner, but if it does then you
have to keep
working on it :-(
For example, this layout does not require you to use AP, you
should try
other things..
As a side note, this type of markup is not good either:
<span class="italics">delicious food?</span>
I believe a simple <i>delicious food?</i> would
be better here (if it is a
purely visual effect you're after).
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
The perfect FAQ page:
http://www.TJKDesign.com/go/?9
CSS-P Templates:
http://www.TJKDesign.com/go/?1
CSS Tab Menu:
http://www.TJKDesign.com/go/?3

CSS Layout in DW CS 3

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

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

Looking for a two-column CSS layout

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

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

CSS Layout Nightmare!

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

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

CSS Layout Issue

Using CSS I am attempting my first tableless page layout and
I am bumping up against a problem I cannot figure out. I am posting
this hoping that kind soul out there will take a drive by and tell
me what I'm doing wrong.
Testing with Firefox and IE6&7 for PC and Mac, Netscape
7.2 and Safari for the Mac, all seem to work. My HTML and CSS both
validated at W3C.
I initially worked out some bugs and it was working well
until I updated Netscape from 8.1 to 8.1.2. A rollover that belongs
on the farthest right is now pushed out of position and appears
below the masthead. Resulting in an additional scroll bar under the
masthead area and along the right side. My content appears below
this additional scroll bar.
You can see the page here:
http://www.voicedatacable.com/index2.html
The css is here:
http://www.voicedatacable.com/styles/main.css
To summarize, I have my div tags nested in this fashion:
<overall_page_container>
<masthead_container>
<masthead_row1 />
<masthead_row2_1 />(float: left)
<masthead_row2_2 />(float: left)
<masthead_row2_3 />(float: left)
<masthead_row2_4 />(float: left)
<masthead_row2_5 />(float: left)
</masthead_container >
<content_container />
<footer />
</overall_page_container >
I hope someone out there can tell me what I'm missing here.
Thanks in advance.

Change this -
DIV#logo {
BACKGROUND: url(images/images/logo.gif);
FLOAT: left;
MARGIN: 0px 0px 0px 70px;
WIDTH: 225px;
HEIGHT: 150px
to this -
DIV#logo {
BACKGROUND: url(images/images/logo.gif);
FLOAT: left;
MARGIN: 0px 0px 0px 70px;
WIDTH: 225px;
HEIGHT: 150px;
DISPLAY:inline;
and see what happens.
It's the IE double margin bug.
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
==================
"dog n' moon" <[email protected]> wrote in
message
news:e28epu$l3o$[email protected]..
> In Safari, the two top elements are horizontally level
with each other. I
> just
> checked on Win XP and the navigation cluster is below
the logo, so the
> float is
> not working...
> URL is:
>
http://hopehouseoc.com/admission.html
>
> any help with CSS floats or a better way to set these
two elements even
> with
> each other horizontally?
>
> thanks in advance
>

Css layout issues in IE

Hi have put together my first full css site -2 divs in a
content div - but columns don't go right down to footer.
http://www.person2person.net.au/"
Also content div does not go al the way down - colour
missing.
Also text in entry page seems to move right down below image.
Below is the ext ernal style sheet for layout.
Really appreciated. Gianni
HTML {height: 100%;}
BODY {
height:100%;
font-family: "trebuchet ms", arial, tahoma, verdana,
sans-serif;
font-size: 13px;
/**** BANNER *****/
#banner{
width:100%;
height:60px;
margin: 0 auto;
margin-top: 0px;
#bannerInner{
width:700px;
height:60px;
margin:0 auto;
top: 0px;
#bannerInner #logo{
width:286px;
height:164px;
float:left;
#entryInner{
width:413px;
height:440px;
margin:0 auto;
top: 10px;
/**** BANNER *****/
/**** CONTENT *****/
#content{
width:700px;
margin:0px auto 0%;
background-color: #FFFFFF;
height: 100%;
padding-bottom: 120px;
#entrycontent{
width:413px;
margin:0px auto 0%;
background-color: #FFFFFF;
height: 100%;
padding-bottom: 120px;
#mainLeft{
width:335px;
margin-left:5px;
float:left;
padding-right:0px;
padding-bottom: 96px;
#resourcesLeft{
width:700px;
margin-left:auto;
float:left;
padding-right:5px;
padding-bottom: 30px;
background-color: #FFFFFF;
#resourcesRight{
width:120px;
float:left;
padding-top:20px;
padding-bottom: 20px;
padding-right: 5px;
#mainRight{
width:320px;
float:left;
padding-top:20px;
padding-bottom: 0px;
padding-right: 5px;
#image{
text-align:center;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
#resourcescontent {
width:700px;
padding-left:0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0px;
padding-bottom: 0px;
#contactLeft{
width:350px;
margin-left:5px;
float:left;
padding-right:0px;
padding-bottom: 0px;
/**** CONTENT *****/
/**** MENU *****/
#menu{
width:700px;
height:25px;
margin:0 auto;
background-color: #660000;
#menu ul{
padding: 0;
margin: 0;
list-style:none;
#menu li{
float:left;
#menu li a{
height:25px;
width:110px;
line-height: 25px;
display: block;
text-align:center;
color: #FFFFFF;
font-family: "trebuchet ms", arial, tahoma, verdana,
sans-serif;
#menu li a#last{
#menu li a:hover#last{
background-position:left bottom;
#menu li a:hover{
background-position:left bottom;
color: #FF6600;
/**** MENU *****/
/**** FOOTER *****/
#footer{
background:#990000;
width:110%;
height:20px;
clear:both;
#footerInner{
width:700px;
height:10px;
margin:0 auto;
padding-right:20px;
text-align:right;
/**** FOOTER *****/
#contentLeft {
float: left;
width: 350px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
#contactmap {
float: left;
width: 550px;
padding-left: 25px;
padding-top: 20px;
#feedback {
clear: none;
height: 560px;
width: 355px;
margin-top: 10px;
margin-left: 10px;
padding: 10px;
background-color: #FFFFFF;
#feedbackcontent {
background-color: #FFFFFF;
clear: none;
height: 560px;
width: 355px;
margin-top: 10px;
margin-left: 10px;
padding: 10px;
#entrypic {
height: 463px;
width: 100%;
margin: 0 auto;
#entrycontent {
height: 150px;
width: 413px;
margin: 0 auto;
clear: both;
#entrytxtcontent {
height: 120px;
width: 403px;
margin: 0 auto;
clear: both;
background-color: #FFFFFF;
float: inherit;
margin-top: 450px;
padding-top: 15px;
padding-left: 10px;
Text

Post a link to the page, please.
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
==================
"ganat" <[email protected]> wrote in message
news:[email protected]...
> Hi have put together my first full css site -2 divs in a
content div -
> but
> columns don't go right down to footer.
>
> Also content div does not go al the way down - colour
missing.
> Also text in entry page seems to move right down below
image. Site
> uploaded
> here:
>
>
> Here is the ext ernal css "style.css" linked:
> HTML {height: 100%;}
> BODY {
> height:100%;
> font-family: "trebuchet ms", arial, tahoma, verdana,
sans-serif;
> font-size: 13px;
> }
>
>
>
>
> /**** BANNER *****/
>
> #banner{
> width:100%;
> height:60px;
> margin: 0 auto;
> margin-top: 0px;
> }
> #bannerInner{
> width:700px;
> height:60px;
> margin:0 auto;
> top: 0px;
> }
>
> #bannerInner #logo{
> width:286px;
> height:164px;
>
> float:left;
> }
>
> #entryInner{
> width:413px;
> height:440px;
> margin:0 auto;
> top: 10px;
> }
>
> /**** BANNER *****/
>
>
>
>
>
>
> /**** CONTENT *****/
>
> #content{
> width:700px;
> margin:0px auto 0%;
>
> background-color: #FFFFFF;
> height: 100%;
> padding-bottom: 120px;
> }
>
> #entrycontent{
> width:413px;
> margin:0px auto 0%;
>
> background-color: #FFFFFF;
> height: 100%;
> padding-bottom: 120px;
> }
> #mainLeft{
> width:335px;
> margin-left:5px;
> float:left;
> padding-right:0px;
> padding-bottom: 96px;
> }
> #resourcesLeft{
> width:700px;
> margin-left:auto;
> float:left;
> padding-right:5px;
> padding-bottom: 30px;
> background-color: #FFFFFF;
> }
> #resourcesRight{
> width:120px;
> float:left;
> padding-top:20px;
> padding-bottom: 20px;
> padding-right: 5px;
> }
> #mainRight{
> width:320px;
> float:left;
> padding-top:20px;
> padding-bottom: 0px;
> padding-right: 5px;
> }
>
> #image{
> text-align:center;
> padding-top: 0px;
> padding-bottom: 0px;
> margin-bottom: 0px;
> }
> #resourcescontent {
> width:700px;
> padding-left:0px;
> margin-top: 0;
> margin-right: auto;
> margin-bottom: 0;
> margin-left: auto;
> padding-top: 0px;
> padding-bottom: 0px;
> }
> #contactLeft{
> width:350px;
> margin-left:5px;
> float:left;
> padding-right:0px;
> padding-bottom: 0px;
>
>
> /**** CONTENT *****/
>
>
> /**** MENU *****/
>
>
>
> }
>
> #menu{
> width:700px;
> height:25px;
> margin:0 auto;
> background-color: #660000;
> }
>
> #menu ul{
> padding: 0;
> margin: 0;
> list-style:none;
> }
>
> #menu li{
> float:left;
> }
>
> #menu li a{
> height:25px;
> width:110px;
> line-height: 25px;
> display: block;
> text-align:center;
> color: #FFFFFF;
> font-family: "trebuchet ms", arial, tahoma, verdana,
sans-serif;
> }
>
> #menu li a#last{
> }
>
> #menu li a:hover#last{
> background-position:left bottom;
> }
>
> #menu li a:hover{
> background-position:left bottom;
> color: #FF6600;
> }
>
> /**** MENU *****/
>
>
>
>
>
>
> /**** FOOTER *****/
>
> #footer{
> background:#990000;
> width:110%;
> height:20px;
> clear:both;
> }
>
> #footerInner{
> width:700px;
> height:10px;
> margin:0 auto;
> padding-right:20px;
> text-align:right;
> }
>
> /**** FOOTER *****/
> #contentLeft {
> float: left;
> width: 350px;
> padding-top: 0px;
> padding-right: 0px;
> padding-bottom: 0px;
> padding-left: 10px;
> }
> #contactmap {
> float: left;
> width: 550px;
> padding-left: 25px;
> padding-top: 20px;
> }
> #feedback {
> clear: none;
> height: 560px;
> width: 355px;
> margin-top: 10px;
> margin-left: 10px;
> padding: 10px;
> background-color: #FFFFFF;
> }
> #feedbackcontent {
> background-color: #FFFFFF;
> clear: none;
> height: 560px;
> width: 355px;
> margin-top: 10px;
> margin-left: 10px;
> padding: 10px;
> }
> #entrypic {
> height: 463px;
> width: 100%;
> margin: 0 auto;
> }
> #entrycontent {
> height: 150px;
> width: 413px;
> margin: 0 auto;
> clear: both;
> }
> #entrytxtcontent {
> height: 120px;
> width: 403px;
> margin: 0 auto;
> clear: both;
> background-color: #FFFFFF;
> float: inherit;
> margin-top: 450px;
> padding-top: 15px;
> padding-left: 10px;
> }
http://www.person2person.net.au/http://www.person2person.net.au/
>

Creating from scratch, a css layout for my website

I am building a website from scratch and I would like to use CSS. I am conceptualizing the design, however, I am struggling with designing it and working with the div tags. I would like to have two sidebars, one on each side, and for them to be tri-colored, which means I have to create three small boxes and align them closely together, each a different color (the colors are part of the theme to my website). Of course the links on the sidebars would be white, and then change colors when hovered over or clicked on. I would like to have a header and a footer, with the header containing my logo and if and only if I can get real fancy; a scrolling message. My footer would contain additional links such as 'additional links', and 'contact us' and all the necessary copywrite info. Please let me know, if first, my conception of this layout makes sense, and if so, what tutorial you could recommend for me to view that would assist in my web site development.
Thank you, all you great tech minds out there!

I'm with Murray. I don't think you should concern yourself with HTML5 and CSS3 yet.
Stick with XHTML and CSS2. When I was learning to work with CSS positioning, it was immensely helpful to use a pre-built layout.   And I learned a great deal from looking at source code.
Look at the DW Starter pages described below:
     Dreamweaver CSS Templates for beginners
     http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
     New DW Starter Pages --
     http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
If you have some money to spend, Project Seven has some excellent CSS Templates. If you plan to do more projects, CSS Layout Magic is a nice extension for prototyping inside DW.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Another CSS layout question

Hi!
I have finally ditched tables and I'm now doing my first div-based css layout. At times I still feel totally lost like in this example. I can't seem to get the page subtitle ("Etusivu") to move down from the top of the div it is in. I tried different kinds of paddings and margins but either Firefox or IE always screws it up, even if I get it to work in the other browser. If anyone can take a look, I appreciate it a lot!
Here's my markup:
<!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="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body onload="MM_preloadImages('images/doktor_streetwear_otsikko_ro.gif','images/etusivu_ro.gif ','images/tuotteet_ro.gif','images/tietoa_ro.gif','images/ehdot_ro.gif','images/palaute_ro .gif','images/linkit_ro.gif')">
<div id="wrapperi">
<div id="logo"><img src="images/kannulogo.jpg" alt="logo" /></div>
<div id="otsikko"><a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('otsikko','','images/doktor_streetwear_otsikko_ro.gif',1)"><img src="images/doktorwear_otsikko.jpg" alt="otsikko" name="otsikko" width="487" height="87" border="0" id="otsikko2" /></a></div>
<div id="kielet">
    <div id="kielet_pusher"> </div>
    <div class="kieli">SUOMEKSI </div>
    <div class="kieli">IN ENGLISH </div>
</div>
<div id="navi"> <a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('etusivu','','images/etusivu_ro.gif',1)"><img src="images/etusivu.jpg" alt="etusivu" name="etusivu" width="130" height="56" border="0" id="etusivu" /></a><a href="tuotteet.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tuotteet','','images/tuotteet_ro.gif',1)"><img src="images/tuotteet.jpg" alt="tuotteet" name="tuotteet" width="130" height="55" border="0" id="tuotteet" /></a>
<a href="tietoa.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tietoa','','images/tietoa_ro.gif',1)"><img src="images/tietoa.jpg" alt="tietoa" name="tietoa" width="130" height="55" border="0" id="tietoa" /></a>
<a href="ehdot.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ehdot','','images/ehdot_ro.gif',1)"><img src="images/ehdot.jpg" alt="ehdot" name="ehdot" width="130" height="55" border="0" id="ehdot" /></a>
<a href="palaute.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('palaute','','images/palaute_ro.gif',1)"><img src="images/palaute.jpg" alt="palaute" name="palaute" width="130" height="55" border="0" id="palaute" /></a>
<a href="linkit.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('linkit','','images/linkit_ro.gif',1)"><img src="images/linkit.jpg" alt="linkit" name="linkit" width="130" height="55" border="0" id="linkit" /></a> </div>
<div id="vasen_palkki">Content for id "vasen_palkki" Goes Here</div>
<div id="main_content">
<div class="otsikko" id="tekstiotsikko">ETUSIVU</div>
<div class="style1" id="iso_alue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec risus at lorem posuere pellentesque. Sed a tellus lorem. Nullam justo mauris, ultrices sed interdum in, egestas eu leo. Duis interdum elementum gravida. Curabitur eu rutrum nibh. Maecenas molestie turpis ac leo tristique nec pellentesque felis mattis. Etiam placerat laoreet tortor, ac dignissim magna tempor ac. Mauris iaculis vestibulum pellentesque. Proin eu scelerisque ipsum. Sed tincidunt nibh sed ipsum pulvinar iaculis. Cras egestas imperdiet mi. Suspendisse tempus, tortor eget vehicula sagittis, diam massa lobortis odio, vel dictum risus nulla vitae mauris. Praesent tellus erat, pharetra eu fermentum vitae, sodales eu sapien. Aenean odio lectus, mattis in egestas id, auctor at nisl. Donec viverra pharetra auctor. Fusce lectus neque, ullamcorper a ultricies at, auctor at mauris. Proin semper orci quis risus dignissim non cursus tellus lobortis. In hac habitasse platea dictumst. </div>
</div>
</div>
</body>
</html>
And here's the stylesheet:
@charset "utf-8";
body {
    background-color: #330000;
#wrapperi {
    margin: auto;
    padding: 0px;
    width: 800px;
#logo {
    float: left;
    border: 1px solid #800000;
#otsikko {
    float: left;
    border: 1px solid #800000;
#kielet {
    float: right;
    border: 1px solid #800000;
    height: 87px;
    width: 130px;
.kieli {
    font-family: "Courier New", Courier, monospace;
    font-size: 18px;
    color: #FFFFFF;
    font-weight: bold;
    border-top-width: 1px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #800000;
    border-right-color: #800000;
    border-bottom-color: #800000;
    border-left-color: #800000;
    padding: 5px;
#kielet_pusher {
    height: 25px;
#navi {
    border: 0px none #800000;
    float: left;
    width: 130px;
#navi img {
    padding-top: 4px;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #800000;
    border-right-color: #800000;
    border-bottom-color: #800000;
    border-left-color: #800000;
    padding-bottom: 4px;
#main_content {
#otsikko {
#tekstiotsikko {
    margin-top: 30px;
    margin-bottom: 30px;
#iso_alue {
    font-size: 14px;
    text-align: left;
    margin-left: 160px;
    margin-right: 200px;
#vasen_palkki {
    float: right;
    height: 400px;
    width: 130px;
    border: 1px solid #800000;
#main_content {

Hi
As I am getting different layout (depending on browser), and you are missing much of the text mark-up (h1, h2, h3, p, etc.), which also changes the display, try replacing your section of the code with the one below, and let me know if this is somewhere near what you wish..
<div id="tekstiotsikko"><h2></h2></div>
<div id="iso_alue"><h2>ETUSIVU</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec risus at lorem posuere pellentesque. Sed a tellus lorem. Nullam justo mauris, ultrices sed interdum in, egestas eu leo. Duis interdum elementum gravida. Curabitur eu rutrum nibh. Maecenas molestie turpis ac leo tristique nec pellentesque felis mattis. Etiam placerat laoreet tortor, ac dignissim magna tempor ac. Mauris iaculis vestibulum pellentesque. Proin eu scelerisque ipsum. Sed tincidunt nibh sed ipsum pulvinar iaculis. Cras egestas imperdiet mi. Suspendisse tempus, tortor eget vehicula sagittis, diam massa lobortis odio, vel dictum risus nulla vitae mauris. Praesent tellus erat, pharetra eu fermentum vitae, sodales eu sapien. Aenean odio lectus, mattis in egestas id, auctor at nisl. Donec viverra pharetra auctor. Fusce lectus neque, ullamcorper a ultricies at, auctor at mauris. Proin semper orci quis risus dignissim non cursus tellus lobortis. In hac habitasse platea dictumst.</p> </div>
PZ

Trouble Understanding CSS Layout and Padding

Hi,
I'm having some serious problems understanding CSS layout techniques and the impact of padding and was hoping I could get some help.
Here are a couple of pages that show examples of what I don't "get". The first has padding that causes the layout to look right. The second doesn't have padding but doesn't lay out as I would expect. Also, the amount of text affects the "bottom" div as well. I'm an old hand at HTML and could do this layout in my sleep using tables. Css is a different, frustrating story.
http://www.libertywebmarketing.com/test/1.html
http://www.libertywebmarketing.com/test/2.html
Thanks.
Fitz21

Thank you for the help.There's a lot of valuable info in these answers that I'm going to have to study. I never thought of applying classes to Div tags, but I guess I have to start learning somewhere. I'm not sure how to use the technique, but I'll definately look into it. If I could wake up tomorrow and know what you all know simply by wishing it, I would.
I see that there are many things I have to learn about using CSS and I'd really like to see some real world examples that don't look like typical cheesy CSS designs with columns. If I were going to design this page using HTML, I would probably do something like this: http://www.libertywebmarketing.com/test/3.html
(The last two tables show the table structure and use of a spacer. I know this a seriously antiquated way of doing it, but it's to illustrate what I'm trying to accomplish: Namely, staggered, left/right alternating boxes that will expand properly depending on the amount of copy or the vertical height of the photo in them.)
Dreamweaver 101,
I have "Dreamweaver 8 The Missing Manual" by David Sawyer McFarland, but I find it really concentrates on "typical CSS designs" that look like Content mangement templates. While I agree it's a valuable book, there's nothing in there I have found that addresses anything like what I'm trying to do. Is the Dummies book better for atypical layouts?
Again, thank you all.
Fitz21

CSS layout pointers

Hope someone can keep me on the right track here - basicaly
trying to recreate the general rounded box effect to hold the main
content, as seen here :
link
I'm having a go with 9 divs within a wrapper div, like this :
link
With the CSS so far looking like :
#topleft {
background:#FFFFFF;
float:left;
width:20px;
#topmiddle {
background:#FFFFFF;
float:left;
width:740px;
#topright {
background:#FFFFFF;
float:left;
width:20px;
#middleleft {
background:#FFFFFF;
float:left;
width:20px;
#maincontent {
background:#FFFFFF;
float:left;
width:740px;
#middleright {
background:#FFFFFF;
float:left;
width:20px;
#bottomleft {
background:#FFFFFF;
float:left;
width:20px;
#bottommiddle {
background:#FFFFFF;
float:left;
width:740px;
#bottomright {
background:#FFFFFF;
float:left;
width:20px;
But already going slight AWOL.
Any pointers greatly appreciated - am I even barking up the
right tree - or would I be better using a single image as a
background? (Although I'd presume that would lead to less
flexibility with regards holding page content.)
Many thanks.

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

How to create new pre-designed CSS layouts in DW CS4?

Since I'm a relative newcomer to Dreamweaver and CSS, I normally begin my new pages with one of Dreamweaver CS4's pre-designed CSS layouts in the Blank Page HTML section - 2 column fixed left sidebar, 1 column elastic centered, 3 column fixed header and footer, etc.
Lately I'm expanding to some more elaborate layouts and I'll like to be able to create new pre-designed CSS layouts of my own to add to this list. So I have a couple of questions:
1) What types of files are these layouts? They all seem to have an accompanying style sheet in addition to having a page template. What I'm getting at is, if I were to revise one of these, how would I save my revised version so that it would show up in this list of pre-designed layouts in the future?
2) Related to the first question, where are these pre-designed CSS layouts stored within Dreamweaver's file and folder structure? I can't seem to find them anywhere.
I appreciate your input on this.

Adobe scrapped the old Starter pages. Many things have changed since they were first introduced.
You'll find newer Templates and Starter Layouts below:
Dreamweaver CSS Templates for beginners
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
New DW Starter Pages --
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Ultimate Multi-Column Layouts -
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Still practicing my CSS layout, and IE 7 issues.

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

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

Design view of CSS layout is innacurate

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

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

CSS Layout problems

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

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

First fully CSS layout.

Similar Messages

Maybe you are looking for