Centering layout

Hi there, I'm very new to dreamweaver and am using mx 2004. I
am designing a site using HTML and am trying to center my layout. I
was told to do this properly using css but i have no idea how.
Could someone please provide me with the coding i would need to do
so and advise me where and how to insert this code...This would be
great!!
Also if i center my layout using CSS does this mean the
layers will stay centered also? at the moment are not locked in
position once i preview in a browser they seem to change page
position when I restore or maximize the page.
Please Help!!!

It depends on whether you are using absolute positioning on
the page, as to
which method might be best, but in either event, this will
work -
Change this -
</head>
to this -
<style type="text/css">

</style>
</head>
change this -
<body ...>
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -

</div>
</body>
and see if that helps.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"brettjohn" <[email protected]> wrote in
message
news:ft41e8$jik$[email protected]..
> Hi there, I'm very new to dreamweaver and am using mx
2004. I am designing
> a
> site using HTML and am trying to center my layout. I was
told to do this
> properly using css but i have no idea how. Could someone
please provide me
> with
> the coding i would need to do so and advise me where and
how to insert
> this
> code...This would be great!!
>
> Also if i center my layout using CSS does this mean the
layers will stay
> centered also? at the moment are not locked in position
once i preview in
> a
> browser they seem to change page position when I restore
or maximize the
> page.
>
> Please Help!!!
>

Similar Messages

Div tags problem on centered layout

Like the title says, I'm working on a centered layout and I
need to place a div tag that has an overflow for scrolling. The
problem is what do I do so that it does just that. I tried using an
AP div tag but it doesn't follow the rest of the layout if you play
with the browser width. And if I simply put a div tag in my table,
I don't know how to put an overflow on it. I only have a limited
amount of space for the text, and I have too much text to simply
put it in the table. It's my first time working on a centered
layout, so I'm kind of at a lost right now. And that's the only
thing stopping me from putting it online.

> And if I simply put a div tag in
> my table, I don't know how to put an overflow on it.
<div style="overflow:scroll">
> I only have a limited
> amount of space for the text, and I have too much text
to simply put it in
> the
> table.
If that's the case, then you have a broken layout scheme, and
a usability
problem.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"cprime" <[email protected]> wrote in
message
news:g6n78v$qmn$[email protected]..
> Like the title says, I'm working on a centered layout
and I need to place
> a div
> tag that has an overflow for scrolling. The problem is
what do I do so
> that it
> does just that. I tried using an AP div tag but it
doesn't follow the rest
> of
> the layout if you play with the browser width. And if I
simply put a div
> tag in
> my table, I don't know how to put an overflow on it. I
only have a limited
> amount of space for the text, and I have too much text
to simply put it in
> the
> table. It's my first time working on a centered layout,
so I'm kind of at
> a
> lost right now. And that's the only thing stopping me
from putting it
> online.
>

Css centering layout problem

Hi,
I'm building a website from a photoshop design and I have a
problem with the layout I can't see how to fix:
I have a header and a footer which both need to stay centered
and expand to whatever the browser window width is set to.
Between them I have a div of the main content of the pages
which also needs to be centered.
All seems very simple. I would normally just have a big div
around the whole page with an align="center". Job done.
But the problem is the space to the left of the content div
needs to be grey and the space on the right needs to be black.
Therefore I assume I'm going to need 3 divs. 2 for the left and
right spaces and another with the main content between them.
Both the side divs will need to expand somehow to fill the
space while keeping the fixed width content div centered. But I
think they will also have to be floated to sit side by side.
I cant seem to get the divs to stay in the correct places or
keep the side ones filling the space between the content div and
the edges of the browser.
Can anyone help?
Thanks,
Olliebear

Is this what you au trying to do?
http://starttoweb.com/
If so, you are welcome to grab the CSS file and mostly to fit
your needs.
Cheryl D Wise
Adobe Community Expert
http://starttoweb.com
"Olliebare" <[email protected]> wrote in
message
news:fpn0q2$p1v$[email protected]..
> Hi,
>
> I'm building a website from a photoshop design and I
have a problem with
> the
> layout I can't see how to fix:
>
> I have a header and a footer which both need to stay
centered and expand
> to
> whatever the browser window width is set to.
>
> Between them I have a div of the main content of the
pages which also
> needs to
> be centered.
>
> All seems very simple. I would normally just have a big
div around the
> whole
> page with an align="center". Job done.
> But the problem is the space to the left of the content
div needs to be
> grey
> and the space on the right needs to be black. Therefore
I assume I'm going
> to
> need 3 divs. 2 for the left and right spaces and another
with the main
> content
> between them.
>
> Both the side divs will need to expand somehow to fill
the space while
> keeping
> the fixed width content div centered. But I think they
will also have to
> be
> floated to sit side by side.
>
> I cant seem to get the divs to stay in the correct
places or keep the side
> ones filling the space between the content div and the
edges of the
> browser.
>
> Can anyone help?
>
> Thanks,
>
> Olliebear
>

Centering layout and Z-Indez

I have been having a difficult time debugging why my layout
will not center in the browser window. The CSS for body and wrapper
are:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
margin: 0px;
padding: 0px;
#wrapper {
width: 780px;
position: relative;
margin-left:auto;
margin-right: auto;
I have found that the wrapper appears to be under a portion
of the Header which is comprised of a graphic at Z-index 100. Below
the Header is another div which includes a pop menu magic
horizontal navigation bar which is set in its css at z-1000.
When I delete both of these divs I see the wrapper div, it
does not extend beyond the other divs on the page (left, middle,
right columns and a footer) and only centers if I put text into it.
Structure of the page is:
Body
Wrapper
header

The real question is - can we see the page? Please post a
link to it.
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
==================
"josie1one" <joleros[nospam]@yahoo.com> wrote in
message
news:[email protected]...
>I think I should go back to looking at the view
</sigh>
> Sorry BSCGBS (o:
>
> --
> Jo
>
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>> Would make no difference, Jo - they are functionally
equivalent. But it
>> was a good try! 8)
>>
>> --
>> 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
>> ==================
>>
>>
>> "josie1one" <joleros[nospam]@yahoo.com> wrote
in message
>> news:[email protected]...
>>> Change this:
>>>
>>> #wrapper {
>>> width: 780px;
>>> position: relative;
>>> margin-left:auto;
>>> margin-right: auto;
>>> }
>>>
>>> to this:
>>>
>>> #wrapper {
>>> width: 780px;
>>> position: relative;
>>> margin: 0 auto;
>>> }
>>>
>>> the margin: 0 auto; centers the wrapper.
>>>
>>> (BTW this the first time I've answered one of
these so I hope to
>>> goodness it's the right one!)
>>>
>>> --
>>> Jo
>>>
>>>
>>>
>>>
>>> "BSGCBS" <[email protected]>
wrote in message
>>> news:[email protected]...
>>>>I have been having a difficult time debugging
why my layout will not
>>>>center in
>>>> the browser window. The CSS for body and
wrapper are:
>>>>
>>>> body {
>>>> font-family: Verdana, Arial, Helvetica,
sans-serif;
>>>> font-size: 12px;
>>>> text-align: center;
>>>> margin: 0px;
>>>> padding: 0px;
>>>>
>>>> }
>>>>
>>>> #wrapper {
>>>> width: 780px;
>>>> position: relative;
>>>> margin-left:auto;
>>>> margin-right: auto;
>>>>
>>>> }
>>>>
>>>> I have found that the wrapper appears to be
under a portion of the
>>>> Header
>>>> which is comprised of a graphic at Z-index
100. Below the Header is
>>>> another
>>>> div which includes a pop menu magic
horizontal navigation bar which is
>>>> set in
>>>> its css at z-1000.
>>>>
>>>> When I delete both of these divs I see the
wrapper div, it does not
>>>> extend
>>>> beyond the other divs on the page (left,
middle, right columns and a
>>>> footer)
>>>> and only centers if I put text into it.
>>>>
>>>> Structure of the page is:
>>>>
>>>> Body
>>>> Wrapper
>>>> header
>>>>
>>>>
>>>
>>>
>>
>>
>
>

Centering Layout with CSS

I've usually built sites with tables but this time I've used
divs instead and I can't get the layout to center using CSS. It
looks fine in the Design view but not in a browser, any browser.
Here's a link to the page
http://westvillage.ca/index3.html
and here's a link to the style sheet
http://westvillage.ca/Assets/styles1.css
I have those funny little marks on my forehead that you get
from beating your head on the keyboard!
Thanks,
Geoff

Geoff Stanners wrote:
> I've usually built sites with tables but this time I've
used divs instead and I
> can't get the layout to center using CSS. It looks fine
in the Design view but
> not in a browser, any browser. Here's a link to the page
>
http://westvillage.ca/index3.html
and here's a link to the style sheet
>
http://westvillage.ca/Assets/styles1.css
> I have those funny little marks on my forehead that you
get from beating your
> head on the keyboard!
> Thanks,
> Geoff
>
>
center horizontally? if so add 'auto' to the 'wrapper'
margin, as below.
#wrapper {
width: 750px;
margin: 0 auto;
padding: 0px;

Widget slide show and liquid layout

I am trying to use the widget slide show in a liquid layout and I need the slideshow to resize. I used the width 100% and tried the height set to auto but the image hight does not resize. how do I get the slideshow to resize both height and width.

I'm not entirely certain the slideshow widget is scalable. Many of them are not.
You can try adding this to your CSS code:
img {max-width: 100%; height: auto !important;}
If that fails, you might want to switch to a fixed-width, centered layout. Liquid layouts are very tricky to work with.
Alternatively, you could look for a jQuery slideshow that does support % widths -- although these carry the potential for distorting your images if the aspect ratio is not maintained.
Nancy O.

Setting fixed background layout

I all.
I'm building my first Flash website in a 1280x800 px resolution, fixed top-centered layout. I have a 1920x1080 px bitmap set as my background. I did it in 1920x1080 px size, because I want the browser to display it (the background) acording to the user's monitor resolution. The main content though - buttons, images, animations, etc - are fixed (1280x800 px centered). So, how do I do this? I've been searching the web, but I only find instructions for liquid layout layouts and such, and I don't want liquid, just the background to adapt to the target monitor size.
thanx in advance.
Pedro

What software do you use ? You better ask in the appropriate Flash / Flex / ActionScript forum. (This is the Flash Player forum.)

Building web page centered with border

Hello. I am using Dreamweaver CS4.
I want to build a site where the website is a fixed width
centered on the browser window when launched. The website will have
a white background on which I will put text and images. I want to
design the site for 1024 px width. Any area outside the 1024 should
be a light grey, creating a border on the left and right of the
white background of the web page, so if you have a higher
resolution setting on your monitor, you see this border vs. just
more white space. If the browser window is minimized, the
horizontal scroll bar should appear once it is minimized close to
the 1024 px size is reached, with the webpage not changing in size.
Please provide guidance on the following:
1) Should I site up the site using the fixed width centered
layout, with the background color set to white and the size set to
1024?
2) I read about "viewport" in some of the discussions in the
forum. How does this come into play?
3) How do I set up the webpage to show a light grey border on
the left and right of the page if the screen resolution is higher?
Any guidance is greatly appreciated.

If you maximize your browser on an 800px screen, you have
about 760px of
usable width. Similarly, on a 1024px screen, you have about
980px of usable
width. Those are the two target numbers.
The whole "how wide" thing is driven by the (perhaps
unconscious) desire not
to have horizontal scrollbars unless absolutely necessary,
since those are
regarded as a 'non-friendly' thing.
That's the significance.
> I have been using 800 as a standard just because it
seemed to fit well
> within most screens I get to view them on
Not on an 800x600 screen - you get horizontal scrollbars.
The next resolution step up from that is 1024, and yes, an
800px wide screen
will fit within many viewport widths on a 1024px screen, but
not if your
viewport width is < 800px.
The thing is this: If you want to do the 'voodoo' thing and
guess - go
right ahead. Nobody will stop you. If you want to have a
reason, then this
would be a good one.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"GPaul" <[email protected]> wrote in message
news:[email protected]...
> I'm not understanding the significance of 760 or 980.
>
> I made a site about a year ago at 900, and I thought it
was a tad wide. I
> used to have a 17' CRT as a preview monitor just to
check, and the 900 was
> a little big for my taste.
>
> I have been using 800 as a standard just because it
seemed to fit well
> within most screens I get to view them on, laptops
included... I'm not
> stuck on 800, but it seems to fit well.
>
> What is it that I am not understanding?
>
> Thanks
>
> Gary
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>> Actually, you've seen most people here recommending
760px or 980px.
>> Intermediate widths may make you feel better, but
won't really do
>> anything more than those two.
>>
>> In other words, if you are concerned about
horizontal scrollbars in a
>> maximized viewport on an 800px wide window you must
go for 760px width.
>> If you are not concerned about that then your next
stop would be
>> horizontal scrollbars in a maximized viewport on a
1024px wide window.
>> That would be 980px. Intermediate values are like
trying to nail jelly
>> to the wall.
>>
>> --
>> Murray --- ICQ 71997575
>> Adobe Community Expert
>> (If you *MUST* email me, don't LAUGH when you do
so!)
>> ==================
>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>> ==================
>>
>>
>> "GPaul" <[email protected]> wrote in message
>> news:[email protected]...
>>>I think you will find that the 1024 is a little
wide. Usually start with
>>>800px wide, but have read alot of people here
recommending 900.
>>>
>>> Either way, not sure how much you know about
HTML & CSS, but the CSS is
>>> what will determine how your page is laid out.
>>>
>>> Insert a DIV tag, set the width, then set the
right and left margins to
>>> auto, and you have your centered start...
>>>
>>>
>>> "ndc6060" <[email protected]>
wrote in message
>>> news:[email protected]...
>>>> Hello. I am using Dreamweaver CS4.
>>>>
>>>> I want to build a site where the website is
a fixed width centered on
>>>> the
>>>> browser window when launched. The website
will have a white background
>>>> on which
>>>> I will put text and images. I want to design
the site for 1024 px
>>>> width. Any
>>>> area outside the 1024 should be a light
grey, creating a border on the
>>>> left and
>>>> right of the white background of the web
page, so if you have a higher
>>>> resolution setting on your monitor, you see
this border vs. just more
>>>> white
>>>> space. If the browser window is minimized,
the horizontal scroll bar
>>>> should
>>>> appear once it is minimized close to the
1024 px size is reached, with
>>>> the
>>>> webpage not changing in size.
>>>>
>>>> Please provide guidance on the following:
>>>> 1) Should I site up the site using the fixed
width centered layout,
>>>> with the
>>>> background color set to white and the size
set to 1024?
>>>> 2) I read about "viewport" in some of the
discussions in the forum. How
>>>> does
>>>> this come into play?
>>>> 3) How do I set up the webpage to show a
light grey border on the left
>>>> and
>>>> right of the page if the screen resolution
is higher?
>>>>
>>>> Any guidance is greatly appreciated.
>>>>
>>>>
>>>>
>>>
>>>
>>
>
>

Formatting Problem

I've just started to use jquery to put my photography into a neat slideshow but I'm having trouble as the images keep getting cropped off. On this page:
http://ryan-harding.com/photography/travel/beijing.html
Notice how on the far right of "Prev" and "Next", there are two arrows. If you scroll through them, my images can be seen; but only part of them. I need to be able to see the whole image, not just part of it. Any idea what I'm doing wrong?
I'm using Windows 7 and Dreamweaver CS5.5. The source code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ryan Harding - Photography - Travel - Beijing</title>
<link href="../../twoColLiqLt.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#num {padding-left: 6px;}
.img-bot {
display: block;
padding: 15px;
visibility: inherit;
font-family: Georgia, Arial;
font-size: 14px;
line-height: 1.3px;
float: none;
overflow: auto;
z-index: auto;
</style>
<script type='text/javascript' src='http://www.ryan-harding.com/ndxz-studio/site/js/jquery.js'></script>
<script type='text/javascript' src='http://www.ryan-harding.com/ndxz-studio/site/js/cookie.js'></script>
<script type='text/javascript' src='http://www.ryan-harding.com/ndxz-studio/site/js/jquery.cycle.all.js'></script>
<script type='text/javascript'>
path = 'http://www.ryan-harding.com/files/gimgs/';
$(document).ready(function()
setTimeout('move_up()', 1);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$('#s1').cycle({
fx:'fade',
speed:'2000',
timeout: 0,
next:'#next', prev:'#prev'});
</script>
</head>
<body>
<div class="sidebar1">
    <ul class="nav">
      <li>
        <div align="center">
          <h1><a href="../../index.html">Ryan<br />
          Harding</a></h1>
        </div>
      </li>
      <li><a href="../../index.html" title="News">News</a></li>
      <li><a href="../../photography.html" title="Photography">Photography</a></li>
      <li><a href="../../filmography.html" title="Filmography">Filmography</a></li>
      <li><a href="../../essays.html" title="Cinematic Thoughts">Cinematic Thoughts</a><a href="../../about.html" title="About">About</a></li>
</ul>
</div>
<div id='img-container'>
<p class='content'><a id='prev' href='#'>Prev</a> | <a id='next' href='#'>Next</a></p>
<div id='s1' class='content'>
    <div><img src='http://www.ryan-harding.com/files/gimgs/1138.jpg' class='img-bot' /><p> </p></div>
    <div><img src='http://www.ryan-harding.com/files/gimgs/1139copy3.jpg' class='img-bot' /><p> </p></div>
           <div><img src='http://www.ryan-harding.com/files/gimgs/1616b.jpg' class='img-bot' /><p> </p></div>
</div>
</div>
</body>
</html>
And the CSS code is:
@charset "utf-8";
body {
margin: 0;
color: #000;
background-color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 60%;
line-height: 1.4;
overflow: auto;
z-index: auto;
visibility: visible;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0%;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
background-color: #FFF;
width: auto;
height: auto;
overflow: visible;
visibility: inherit;
z-index: auto;
font-family: Georgia, Arial;
padding-right: 15px;
padding-left: 15px;
line-height: 1.3;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#000;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #000;
text-decoration: underline;
background-color: #FFF;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 1040px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
z-index: auto;
visibility: visible;
float: none;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 20%;
padding-bottom: 10px;
background-color: #FFF;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
color: #000;
padding-top: 10px;
.content {
float: none;
background-color: #FFF;
padding-top: 10px;
padding-bottom: 10px;
overflow: auto;
z-index: auto;
visibility: visible;
width: 80%;
font-size: 14px;
font-family: Georgia, Arial;
line-height: 1.3;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
background-color: #FFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
color: #000;
ul.nav li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
font-size: 14px;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
text-decoration: none;
color: #000;
background-color: #FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #000;
background-color: #FFF;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
/* ~~miscellaneous float/clear classes~~ */
.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 can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.img-container {
float: none;
background-color: #FFF;
padding-top: 10px;
padding-bottom: 10px;
overflow: auto;
z-index: auto;
visibility: visible;
width: 80%;
font-size: 14px;
font-family: Georgia, Arial;
line-height: 1.3;
Not sure if any other details are required, let me know if so. Thanks for any help given!

Liquid Layouts (% based widths) are very tricky to work with, even for experienced web designers.
I think you'll have bettter results if you stick with a basic 1 or 2 column, fixed-width & centered layout.
For commercial CSS Templates that are rock solid and perform well in all browsers, visit Project Seven:
http://www.projectseven.com/products/index.htm
Not Just a Grid CSS Framework
http://www.notjustagrid.com/demo.asp
Free CSS Starter Templates
http://alt-web.com/Free-CSS-Templates.shtml
EZ-CSS Templates (watch the screencast to see how it works)
http://www.ez-css.org/css_templates
Dreamweaver CSS Templates for beginners (free)
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
New DW Starter Pages (free)
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Ultimate Multi-Column Layouts (free)
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

Help with div positioning

I am an utter newbie when it comes to html and CS5. Since I happen to own a copy of CS5 I have been drafted to take a stab at a very basic website for a non-profit I work with. The site can be seen here www.kidscareco.com
I have searched all around this site and the web in general for an answer to my question and while I have found lots of information on absolute vs relative position and "clear", I haven't been able to cypher out a solution to my particular problem.
I am having trouble getting one particular div to stay where I want it. I'm entirely sure that it is my fault and thus am not angry at the div. I am hopeful that someone here can offer me a few lines of css code to get the errant div to stay where it should be. I am attaching the html and css for the page in question. The page is based on a template which I can post if it is somehow helpful but I believe that the code from the "index" page is sufficient.
The div in question is #meat. (content text is: Since 1990, Kids Care Clubs has empowered children to make a better world through hands-on service projects.We give parents, teachers and youth leaders the resources they need to involve kids in the good works that will mean a brighter future for all.) I would like for it to stay neatly under the spry menu, near the top of the page and for it to expand and contract both vertically and horizontally as the browser window is resized. I have tried several different "solutions" with little success except for restricting the width of the div to about 600px but that leaves a considerable amount of white space when the page is viewed full screen on a large monitor and it forces the text down the page in an unworkable way once the actual text within the div starts to get into the order of 1000 words or so. Suggestions and helpful critique are welcomed.
Thank you!
Mike Logan
@charset "UTF-8";
/* CSS Document */
html, body {
     width:97%;
#container {
     min-height: 1000px;
     width:100%;
     min-width:850px;
     border-color:#000;
     border: solid 2px;
     alignment-baseline:middle;
     margin:25px;
#header {
     float:left;
#collage {
     float:right;
     width:202px;
#menu {
     margin-top:20px;
     height:30px;
     float:left;
     clear:left;
#MenuBar1 {
     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
     clear:inherit;
#meat {
     float:left;
     clear:left;
     /* [disabled]max-width:600px; */
     padding:20px;
     padding-left:40px;
     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
#footer {
     clear:both;
     width:100%;
     height:auto;
   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ice="http://ns.adobe.com/incontextediting">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Welcome to KIDS care Colorado.com!</title>



<link href="../kidscare_template.css" rel="stylesheet" type="text/css" />
<script src="../includes/ice/ice.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="../graphics/Kidscarekidslogo.png" width="220" height="144" alt="logo" /><img src="../graphics/kidscare-name.png" width="395" height="79" alt="name" />
</div>
<div id="collage"><img src="../graphics/collage.png" width="200" height="949" alt="collage" /></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li>
      <div align="center"><span id="MenuBar1"><a href="#">Home</a>
        </span>
      </div>
    </li>
    <li><span id="MenuBar1"><a href="#">Programs</a></span></li>
    <li><span id="MenuBar1"><a href="#">Volunteer</a></span></li>
    <li><span id="MenuBar1"><a href="#">Donate</a></span></li>
    <li><span id="MenuBar1"><a href="#">Contact Us</a></span></li>
</ul>
</div>

<div id="meat" ice:editable="*">
<div align="left">Content for id "meat" Goes Here</div>
</div>

<div id="footer">
<div align="center">
    <p> </p>
    <p>KIDS care Colorado,LLC • (720) 295-3396 • <a href="mailto:[email protected]">[email protected]</a></p>
    <p>PO Box 19442 • Boulder, CO 80308
    </p><p> </p>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Hi Mike,
I'm going to suggest you start over with a pre-built CSS layout for this project. It's much simpler than building a page layout from scratch. Also, liquid layouts are very tricky to control. A fixed-width layout is much easier to work with. Here's a sample 2-column, fixed-width, centered layout to get you started.
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Making your prototype page into a DW Template is just about the last step in your design process. After you are completely satisfied with how your protoype.html page looks and works in all browsers, then saveAs Template.
Best of luck with your project, and have fun!!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Help with Spry drop down menu

I'm new to Spry, but not to CSS. I'm having major trouble
formatting this menu.
I've set up my page with a 3-row centered table for simple
positioning (I hate trying to get a pure CSS centered layout). The
width is 940px and the horizontal menu is supposed to span the full
940 width. I've tried changing width values in several rules and
nothing changes. In fact the only change I've been able to see is
when I changed the text to Georgia in the li rule, even when I've
tried to change bg colors.
Any help would be appreciated. I'm completely stuck.

Bump

AP DIV layer problem

Is there any way the AP DIV layer can work in a centered
layout and move with the other elements on my web page?
Murray, I asked before about the rollover images and the grid
design with photos. You gave me a solution but I couldn't even find
some of the things you mentioned. Are you on a pc? I am on a mac.
Is that why?
I got it to work great with the divs without centering my
page in the browser window as it moves.

> Is there any way the AP DIV layer can work in a centered
layout and move
> with
> the other elements on my web page?
Sure.
Change this -
</head>
to this -
<style type="text/css">

</style>
</head>
change this -
<body ...>
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -

</div>
</body>
and see if that helps.
> Murray, I asked before about the rollover images and the
grid design with
> photos. You gave me a solution but I couldn't even find
some of the things
> you
> mentioned.
Like what?
> Are you on a pc? I am on a mac. Is that why?
I'm on both. I'm pretty sure my suggestion was platform
agnostic.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"dxexaxnx" <[email protected]> wrote in
message
news:fovpf2$t7q$[email protected]..
> Is there any way the AP DIV layer can work in a centered
layout and move
> with
> the other elements on my web page?
>
> Murray, I asked before about the rollover images and the
grid design with
> photos. You gave me a solution but I couldn't even find
some of the things
> you
> mentioned. Are you on a pc? I am on a mac. Is that why?
>
> I got it to work great with the divs without centering
my page in the
> browser
> window as it moves.
>

Is this achievable, with current technology?

I have an idea for a layout, but was wondering if it was
technically
achievable.
Easy part :
- Centered fixed-width design (let's say 770px wide, 100%
high).
- Left side (335px) is empty. Right side (335px) is a text
column.
- Normal browser vertical scrolling to accomodate long pages.
So far so good -- but here's where it gets touchy...
- The background image is actually much larger than 335px. It
extents
off-screen to the left, so that if you pull the browser
wider, more of it
becomes uncovered (naturally, because it's a centered design,
an equal
amount of "blank" becomes uncovered to the right of the
text).
- The background image must not generate any scrollbars.
- The image should never slide under the text -- but it can
slide away from
it if need be. This means that no more than 335px of it can
slide into the
centered layout... more than that, and it touches the text
column.
Can this be done? The closest I've come to succeeding is
left-justifying a
huge background image with no-repeat, but this doesn't stop
it from sliding
under the text.
Should I be centering an enormous background with half of it
being
transparent information? That's the only other way I can
think of... but to
even do that would mean using PNGs, and the file size would
be ridiculously
huge, since it would have to be twice the width of the tree
image itself.

"Joe Makowiec" <[email protected]> wrote in
message
news:[email protected]..
>
> Just make the image 2 * X wide, and put the portion you
want revealed
> to the left of center. Then set it to position "top
center"
> (vertical/horizontal), thus:
>
> body {
> background-image : url(myimage.png) ;
> background-repeat : repeat-y ;
> background-position : top center ;
> }
I thought of that, but the resulting image would be GIGANTIC.
I was
wondering if there was a way to do it with only the left half
(the one with
actual image data).
The actual background of the site is a vertical gradient (not
a solid
color). A single GIF with 200 hues making up a gradient, 1px
wide, repeating
on X only, and only 7k in weight. So if I tried it the
obvious way (the one
you suggested) it would have to be a gigantic GIF (so the
colors match --
when one background ends, the other picks up) or a JPG
(compression would
almost ensure the gradient be banding at that size) or,
finally, a PNG (I
could use alpha channels here to make most of the image
invisible, thus
taking care of the gradient vs gradient problem... but can
you imagine a
1600x1200 PNG file? It must easily be over a meg large).
Ideally, I'd place the PNG a bit to the left, with only the
part with actual
data on file (800px instead of 1600). But I'm not sure
there's a way to do
"center image, but make it 400px off-axis to the left" so as
to "feign" the
presence of 800 invisible pixels on the right of the image.
Sorry if I'm not being as clear as I'd like, I'm just not
used to explaining
this type of stuff. It's all very clear in my head, honest.
Mike

How to remove ?xml version=

Dear All,
The moment I can see <?xml version="1.0"?> sentence in JSC produced pages going in the first line.
Does anybody know the easiest way to remove/disable this 'feature' from the generated pages.
The problem is comming using IE6.0 as a browser. I use CSS styles with fixed-size centered colums. IE6.0 goes nuts while anything else coming before DOCTYPE definition and swithes to quirk mode.
Quirk mode makes my CSS looks agly and doesn't support centered layout.
I have to say it is very annoying :)
Alex

Sorry, but I want remove this first line with <?xml version...
To check what gives a bug I did the following:
1.Run my page in design mode and it looks fine
2. Clear and build my project, run it under Sun App Serv 8.2
3. Can see centered CSS doesn't work
4. Save source HTML by using 'View Source' context menu and remove annoying <?xml version...
5. I got it - IT WORKS FINE.
6. Please look at http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_03.html (paragraph just before picture of Quirk and Standard mode)
7. What is the reason of putting <xml into to the first line. XHTML is NOT xml anyway.
King regards,
Alex

CSS with three columns- middle fixed, sides adjust?

I am new to CSS. I am trying to produce a webpage that utilizes a 3 column structure. The center column will be a fixed size and will be always centered in the browser, however the left and right columns will need to automatically adjust themselves to appropriate sceen size/resolution. I would like to utilize DW's layout templates to do this as I am new to the CSS process, but I am unsure of which one to use.
Thanks.

I would like to utilize DW's layout templates to do this as I am new to the CSS process, but I am unsure of which one to use.
None of them. I think they're terribly bloated and hard to understand.
Here's a basic 3-column liquid layout. View Page Source to see the code.
http://alt-web.com/TEMPLATES/3-col-liq-layout.shtml
If this is your first project with CSS layouts, I think you will have a much easier time if you use a fixed-width centered layout.
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
For more great CSS layouts, you can't go wrong with Project Seven's Page Packs or CSS Layout Magic.
http://www.projectseven.com/products/templates/pagepacks/iq/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Centering layout

Similar Messages

Maybe you are looking for