CSS layout question regarding browser sizing

Hi,
Basically I want the basis of my site to be - A header, Main content with a background image, A Footer.
I'm having problems however, I can't seem to get my footer to position where I want it i.e. at the bottom of the browser window at all times. I'm doing it as an AP div and how it should work is that it's fixed at the bottom of the page and then if the user resizes their browser in the y direction the footer moves up with it, over the top of the main content (but not the header which will have a higher z-index).
The way I THOUGHT to do it was to firstly create a div tag for the whole page (780 pixels wide, auto left and right margins, auto height) and then inside that put my ap div header fixed height at the top and have another ap div as the footer, fixed height and tell it to position 0 pixels from the bottom. However this doesn't seem to do the trick, I'm sure I'm missing something really really simple. Anyone who's vaguely familiar with the program will be able to answer this I'm sure. If my question isn't clear please let me know and I'll rephrase,
Ta

There is no reason to use APDivs for such a simple layout. Default CSS positioning (which is no positioning at all) is typically all you need for most layouts. Build your HTML markup logically from top to bottom of page and your footer will naturally appear at page bottom.
Live Demo (view page source to see the code)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
Or, for a Sticky Footer using Fixed positioning:
http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Similar Messages

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

CSS layout question - height of outer DIV

Hopefully this is a quick one - In the past I've used CSS for the main layout of a page, but still used tables within a DIV. But I'm trying to be good and used DIVs there too.
Anyway - I have a basic example here:
http://www.learners-guide.co.uk/lessons/cockpit-drill/layout.php
With the row in the main content split into two columns, using:
#outerWrapper #contentWrapper #content #row_one {
          width:580px;
          border:2px solid #333;
          background-color:#99FF99;
          padding:10px;
#outerWrapper #contentWrapper #content #row_one #row_one_left {
            width: 288px;
          height:auto;
          padding:0px;
          float:left;
          margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
#outerWrapper #contentWrapper #content #row_one #row_one_right {
            width: 288px;
          height:auto;
          padding:0px;
          float:right;
          margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
The problem is that the #row_one_left and #row_one_right colums spill out of the containing #row_one DIV.
How would I make the containing DIV expand to contain the columns? I can do it by specifying a height of the #row_one DIV, but assume this is bad form, and would produce varying results depending on screen / resolution / browser etc.
I thought maybe using height: auto; but no joy with that either.
I'm assuming it must be possible, as it seems a fairly basic layout requiement.
Thanks.

You have to use some style that forces that div to clear the floats (since floated elements are removed from the flow, containing elements act as if they aren't even there). To do that, something like "overflow:hidden" works wonderfully well. So remove the height:auto styles (which is the default anyhow), and change this -
#outerWrapper #contentWrapper #content #row_one {
          width:580px;
          border:2px solid #333;
          background-color:#99FF99;
          padding:10px;
to this -
#outerWrapper #contentWrapper #content #row_one {
          width:580px;
          border:2px solid #333;
          background-color:#99FF99;
          padding:10px;
          overflow:hidden;

Beginners CSS layout question - expanding a layer and not overlapping another

Having got well and truly fed up of using tables to layout
pages I am trying to gem up on CSS layer based layout. All well and
good but despite the various tutorials I can't find an answer to
this question...
Q. I have a layout with layers to make a three column layout,
however, I want to have a footer section at the bottom of the page
that runs the same width as the three columns (you can see my WIP
example here
http://www.spiralfilm.com/clients/broadoak/index_css.html
). Problem is, as the centre section expands with more content, how
do I make that section expand and not overrun the current footer
section? I want it to expand like a table does and push the footer
down.
I'm sure it is simple but I just can't get my head around it!
Thanks in advance for any pointers...

> However, is the use of div tags the way to seperate
blocks of content? The
> DW8
> help file seems a little unclear on this?
Yes, it would be one way to do that. A div tag is simply a
container for
other HTML elements, like a table. The problem you are having
comes with
using DW 'layers' to contain text. As Thierry suggested, this
is because
absolutely positioned elements (i.e., DW 'layers') are
removed from the
normal flow, preventing them from interacting with adjacent
page elements -
this means that when the text inside them expands, it will
begin to overlap
other content. See my demonstration of this here -
http://www.great-web-sights.com/g_layers-overlap.asp
Try these tutorials -
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
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
==================
"Benfrain" <[email protected]> wrote in
message
news:elgpba$qds$[email protected]..
> Hi, thanks for those links. Sorry to confess they are
all a little beyond
> my
> knowledge. I will read on and see if I can understand
them.
>
> However, is the use of div tags the way to seperate
blocks of content? The
> DW8
> help file seems a little unclear on this?
>

CSS Layout Questions

Only making baby steps in CSS still but I am learning a lot. Here's a link to the page I am trying to create: http://www3.telus.net/~jessum/details_layout.html
Here's what I have managed to create so far: http://www3.telus.net/~jessum/details.html
When explaining any steps please explain it using Dreamweaver. I will be looking in the code to see how it all works but I want to be able to get proficient using Dreamweaver so I can see how things flow etc. before I try and hand code.
Questions
1. Is it a good practice to use a "container" to hold all of the div's or is it better to start by adding a header without a container?
2. How can I centre a div in the page?
I read that to align the div so it's "centred' in the page I can use: margin: auto;
but I'm not sure how to do this. Please explain.
3. How do I remove the space around the "container"? I've set the margin and padding to: "0" but the space is still there.
Thanks

osgood_ wrote:
Not sure where this notion of using the body as a container came from but for years a wrapper or container was considered standard practice.
The idea is being promoted by several of the most active and knowledgeable members of this forum. I think the idea first came from Altruistic Gramps, and I remember debating the issue with him about a year ago. It has also been picked up enthusiastically by Murray, and I've seen Nancy O suggest the same idea.
I've been doing a lot of research into CSS3 recently, and discovered that the Borders and Backgrounds module specifically advises against styling the <html> element (http://www.w3.org/TR/css3-background/#special-backgrounds). It doesn't give a reason for this recommendation.
I suppose the idea of giving the body a width instead of using a container might come from the HTML5 definition of the body as representing the main content of the document (http://dev.w3.org/html5/spec/the-body-element.html#the-body-element).
I suspect that this is likely to develop into the same type of fruitless argument as we had several years ago about the "superiority" of ems over pixels. Adding a single <div> to act as the container or wrapper for the content doesn't strike me as being less efficient. It also has the advantage of avoiding styling the <html> element.

Quick CSS layout question

This should be a quick one - I have just added in some links to the other countries on the page below. Basically all the links under the main Botswana image on the left hand side.
Trouble is, that they have knocked the second row of lodges down to their right (this is how they should appear: http://www.goodsafariguide.com/botswana/index.php)
I thought the culprit might be a clear:both; in the #outerWrapper #contentWrapper #content #row_two rule in the botswana_layout.css file, but apparently not.
If anyone could quickly spot how to fix this that would be great.
The page is here:
http://www.goodsafariguide.com/botswana/botswana.php
Thank you!

Good news with the solution!
Iain71 wrote:
So its all looking as it should now:
http://www.goodsafariguide.com/botswana/botswana3.php
Its interesting that you mention the <a href="someurl.php"><div>Some content</div></a> thing. Although it seems to work, it wa something I wasn't entirely convinced was technically correct. I'm not sure how else you would do that though, and it seems a fairly common thing on sites (if not achieved the same way), ie having a large area that acts as a link. Maybe it should be contained in an outer DIV.
Thanks again for your help.
As I understand it, strictly speaking a <div> cannot be a link so, it should not be wrapped in an anchor tag. I think it has something to do with the fact that a <div> is a block level element and <a> is in line. This link http://htmlhelp.com/reference/wilbur/special/a.html is a reference for <a> it lists what other elements it can occur in and what it can contain. An <a> can be placed inside a <div> but not the other way around. Having said that, your use of the two elements kind of proves that they work but then you can fix wood together with nails and screws but some situations call for one or the other! Reading up on this, I learn that it's different now in HTML5 but then I imagine, that was done to confuse me!
The way I work out a page these days is based on my simple understanding of semantic code which for me means that the best element to use will always be the one that was intended for that job. The most obvious are <ul> and <li> for lists and <p> for a paragraph. I suppose <head> and <body> give even stronger clues. I also understand that search engines and in particular, Google, appreciate the proper use of these elements when pages are crawled. I know that SEO is a dark art but it kind of makes sense that a stupid robot will understand only the information is sees. It knows a list is a list but it doesn't know that a div is a list.
I have had a go at building your box of images using Dreamweaver Javascript rollover and the list elements. It's quick and dirty and the javascript makes it look more complicated than it is. However, if you compare my code with yours, I think that you will agree that my alternative is more straight forward and easier to read.
One other thing about this idea is that but putting your image in the page, you can get a bit more content in there with your alt="" and title"" attributes. At the moment, your option is a string of content-less divs.
martcol.co.uk/test/africa.html
Regards
Martin
You have to bear in mind that I am a serious hobbyist web developer who trys his hardest understand this shizzle.

CSS Layout Questions [locked]

Here's a link to the page I am trying to create: http://www3.telus.net/~jessum/details_layout.html
Here's what I have managed to create so far: http://www3.telus.net/~jessum/details.html
When explaining any steps please explain it using Dreamweaver. I will be looking in the code to see how it all works but I want to be able to get proficient using Dreamweaver so I can see how things flow etc. before I try and hand code.
Questions
1. Is it a good practice to use a "container" to hold all of the div's or is it better to start by adding a header without a container?
2. How can I centre a div in the page?
I read that to align the div so it's "centred' in the page I can use: margin: auto;
but I'm not sure how to do this. Please explain.
3. How do I remove the space around the "container"? I've set the margin and padding to: "0" but the space is still there.
Thanks

Murray *ACP* wrote:
You already have a "container" - the body tag. You can center the page by giving the body an explicit width and then left/right margins of auto, e.g.,
body {
width:960px;
margin:0 auto;
The idea of using the body to centre the page seems to have become fashionable of late. The problem with doing so is that it leaves an unstyled area on the body's background extends into the left and right margins when displayed on a screen that is wider than the body. So, followers of this fashion then style the <html> element.
The CSS3 Borders and Backgrounds module specifically advises against styling the <html> element. See http://www.w3.org/TR/css3-background/#special-backgrounds.
Message was edited by: David_Powers to correct description of what happens in the margins.

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

Questions regarding customisation/configuration of PS CS4

Hello
I have accumulated a list of questions regarding customising certain things in Photoshop. I don't know if these things are doable and if so, how.
Can I make it so that the list of blending options for a layer is by default collapsed when you first apply any options?
Can I make it possible to move the canvas even though I'm not zoomed in enough to only have parts of it visible on my screen?
Is it possible to enable a canvas rotate shortcut, similar to the way you can Alt+RightClick to quickly change brush size?
Is it possible to lock button positions? Sometimes I accidentally drag them around when I meant to click.
Is it possible to lock panel sizes? For example, if I have the Navigator and the Layers panels vertically in the same group, can I lock the height of the navigator so that I don't have to re-adjust it all the time? Many panels have a minimum height so I guess what I am asking for is if it's possible to set a maximum height as well.
Is it possible to disable Photoshop from automatically appending "copy" at the end of layer/folder names when I duplicate them?
These are things I'd really like to change to my liking as they are problems I run into on a daily basis.
I hope someone can provide some nice solutions

NyanPrime wrote:
<answered above>
Can I make it possible to move the canvas even though I'm not zoomed in enough to only have parts of it visible on my screen?
Is it possible to enable a canvas rotate shortcut, similar to the way you can Alt+RightClick to quickly change brush size?
Is it possible to lock button positions? Sometimes I accidentally drag them around when I meant to click.
Is it possible to lock panel sizes? For example, if I have the Navigator and the Layers panels vertically in the same group, can I lock the height of the navigator so that I don't have to re-adjust it all the time? Many panels have a minimum height so I guess what I am asking for is if it's possible to set a maximum height as well.
Is it possible to disable Photoshop from automatically appending "copy" at the end of layer/folder names when I duplicate them?
These are things I'd really like to change to my liking as they are problems I run into on a daily basis.
I hope someone can provide some nice solutions
2. No. It's a sore spot that got some forum time when Photoshop CS4 was first released, then again with CS5. It's said that the rules change slightly when using full-screen mode, though I personally haven't tried it.
3. Not sure, since I haven't tried it. However, you may want to explore the Edit - Keyboard Shortcuts... menu, if you haven't already.
4. What buttons are you talking about? Those you are creating in your document? If so, choose the layer you want to lock in the LAYERS panel, then look at the little buttons just above the listing of the layers:
5. There are many, many options for positioning and sizing panels. Most start with making a panel visible, then dragging it somewhere by its little tab. One of the important features is that you can save your preferred layout as a named workspace. Choose the Window - Workspace - New Workspace... to create a new named workspace (or to update one you've already created). The name of that menu is a little confusing. Once you have created your workspace, if something gets out of place, choose Window - Workspace - Reset YourNamedWorkspace to bring it back to what was saved.
You'll find that panels like to "stick together", which helps with arranging them outside of the Photoshop main window.
As an example, I use two monitors, and this is my preferred layout:
6. No, it's not possible to affect the layer names Photoshop generates, as far as I know. I have gotten in the habit of immediately naming them per their usage, so that I don't confuse myself (something that's getting easier and easier to do...).
Hope this helps!
-Noel

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

CSS layout

Hi
A couple of embarrassingly basic questions but would
appreciate help:
1. I'm using a CSS layout template and need to alter the
position of a div border (to coincide with another border). How do
you physically do this? Can't seem to "drag and drop" the border
2. I've aligned a Heading to the "left" but when I display it
on the browser it either stays to the left or moves to the center
of the div. depending on the size of my window. How do you prevent
this?
3. Currently my html and css codes are in 2 different
(linked) documents. When I publish to the web do I simply load both
files or do I need to copy and paste the css coding into my html
document?
Thanks once again

Posting our code would be helpful
> 1. I'm using a CSS layout template and need to alter the
position of a div
> border (to coincide with another border). How do you
physically do this?
> Can't
> seem to "drag and drop" the border
I'm not sure what you're asking here ... positioning a
border? the div
border is always, well, on the perimeter of the div. Do you
want to move one
edge of the div over 10 px? If so (and assuming its the left
border...) ,
try subtracting 10 px from the div width and giving the div a
margin-left of
10px. As for "drag and drop," what are we dragging? What are
we dropping?
> 2. I've aligned a Heading to the "left" but when I
display it on the
> browser
> it either stays to the left or moves to the center of
the div. depending
> on the
> size of my window. How do you prevent this?
can we see the code here? It sounds to me like you're running
into problems
with an element being set to 500px wide and then a browser
window that is
400px wide. A wide img maybe? I'm only guessing at things
without seeing th
ecode though
> 3. Currently my html and css codes are in 2 different
(linked) documents.
> When
> I publish to the web do I simply load both files or do I
need to copy and
> paste
> the css coding into my html document?
Yep. Just make sure they stay relative to each other in the
same way. In
other words, if both your htm file and css file are in the
same folder on
your local machinge then they must remain in the same folder
on your server.
If your css is in a subfolder called "css" then you need to
make sure your
css file is in a similar subfolder on the server
Alex

Question regarding homehub and Open reach router -...

Hi all,
I had infinity installed earlier this month and am happy with it so far. I do have a few questions regarding the service and hardware though.
I run both my BT openreach router and BT Home hub from the same power socket. The problem is, if I turn the plug on so both the Homehub and Openreach Router start up at the same time, the home hub will never get an Internet connection from the router. To solve this I have to turn the BT home hub on first and leave it for a minute, then start the router up and it all works fine. I'm just curious if this is the norm or do I have some faulty hardware?
Secondly, I appreciate the estimated speed BT quote isn't always accurate, I was quoted 49mbits down but received 38mbits down - Which I was happy with. Recently though it has dropped to 30. I am worried this might continue to drop over time. and as of present I am 20mbits down on the estimate . For the record 30mbits is actually fine and probably more than I would ever need. If I could boost it some how though I would be interested to hear from you.
Thanks, .

Just a clarification: the two boxes are the HomeHub (router, black) and the modem (white). The HomeHub has its own power switch, the modem doesn't.
There is something wrong if the HomeHub needs to be turned on before the modem. As others have said, in general best to leave the modem on all the time. You should be able to connect them up in any order, or together. (For example, I recently tripped the mains cutout, and when I restored power the modem and HomeHub went on together and everything was ok).
Check if the router can connect/disconnect from the broadband using the web interface. Leaving the modem and HomeHub on all the time, go to http://192.168.1.254/ on a browser on a connected computer, and see whether the Connect/Disconnect button works.

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.
>>
>
>

Questions regarding Outlook Web App, Remote Desktop, Remote Web Access and VPN Access

Hi there,
I want to ask a series of questions regarding Outlook Web App, Remote Desktop, Remote Web Access and VPN access and was hoping whether you could help me. Below are my questions to ask you.
Outlook Web App - What do I need to configure in order to get my Exchange account to work with the OWA app on my iPhone? Is Office 360 required on the server that hosts Outlook Web App in our organisation? When I configure the settings and
connect I get the following message "couldn't connect - We couldn't connect to the server. Check your information and make sure it's correct." I can connect with other devices using Outlook Web App.
Remote Desktop - What do I need to configure in order to connect to my computer at work using Remote Desktop on my Windows Phone? When I configure the settings and connect I get the following message "Connection error - We couldn't connect
to the remote PC. Make sure the PC is turned on and connected to the network, and that remote access is enabled. Inquiring minds may find this error code helpful: 0x204" I can connect with other devices using Remote Desktop. There are currently no
RD Server settings in the Remote Desktop app on the Windows Phone and the only way I'm to connect to my PC at work is via Remote Desktop and not to be confused with the one by Microsoft, however the app is on a trial basis and times out every 5 minutes and
can only be used once every hour unless I purchased the app for £2.99 off the App Store but would ideally like to use the Microsoft Remote Desktop app though.
Remote Web Access - What do I need to configure in order to get Remote Web Access on my Windows Phone using a URL? When I log in using a URL I get the following message "There is a problem with this Web page. Please contact the person who manages
the server" I can connect with other devices using Remote Web Access. Also how do you enable the background option for Remote Web Access? I know how to do this in Remote Desktop but not in Remote Web Access. Remote Web Access works on PCs regardless
being onsite and offsite and on my iPhone, the same issue also occurs with my Nokia 5230s regardless of whether I'm using Opera Mobile or Mini or the latest Nokia Browser.
VPN access - How do you configure VPN access on a Windows Phone using VPN? I cannot find the protocols PPTP, L2TP, SSTP and IPsec in order to configure VPN access on the Windows Phone apart from IKEv2.
Many thanks,
RocknRollTim

Any help would be much appreciated.
Kind regards,
RocknRollTim

Questions regarding creation of vendor in different purchase organisation

Hi abap gurus .
i have few questions regarding data transfers .
1) while creating vendor , vendor is specific to company code and vendor can be present in different purchasing organisations within the same company code if the purchasing organisation is present at plant level .my client has vendor in different purchasing org. how the handle the above situatuion .
2) i had few error records while uploading MM01 , how to download error records , i was using lsmw with predefined programmes .
3) For few applications there are no predefined programmes , no i will have to chose either predefined BAPI or IDOCS . which is better to go with . i found that BAPI and IDOCS have same predefined structures , so what is the difference between both of them .

Hi,
1. Create a BDC program with Pur orgn as a Parameter on the selection screen
so run the same BDC program for different Put organisations so that the vendors
are created in different Pur orgns.
2. Check the Action Log in LSMW and see
3.see the doc
BAPI - BAPIs (Business Application Programming Interfaces) are the standard SAP interfaces. They play an important role in the technical integration and in the exchange of business data between SAP components, and between SAP and non-SAP components. BAPIs enable you to integrate these components and are therefore an important part of developing integration scenarios where multiple components are connected to each other, either on a local network or on the Internet.
BAPIs allow integration at the business level, not the technical level. This provides for greater stability of the linkage and independence from the underlying communication technology.
LSMW- No ABAP effort are required for the SAP data migration. However, effort are required to map the data into the structure according to the pre-determined format as specified by the pre-written ABAP upload program of the LSMW.
The Legacy System Migration Workbench (LSMW) is a tool recommended by SAP that you can use to transfer data once only or periodically from legacy systems into an R/3 System.
More and more medium-sized firms are implementing SAP solutions, and many of them have their legacy data in desktop programs. In this case, the data is exported in a format that can be read by PC spreadsheet systems. As a result, the data transfer is mere child's play: Simply enter the field names in the first line of the table, and the LSM Workbench's import routine automatically generates the input file for your conversion program.
The LSM Workbench lets you check the data for migration against the current settings of your customizing. The check is performed after the data migration, but before the update in your database.
So although it was designed for uploading of legacy data it is not restricted to this use.
We use it for mass changes, i.e. uploading new/replacement data and it is great, but there are limits on its functionality, depending on the complexity of the transaction you are trying to replicate.
The SAP transaction code is 'LSMW' for SAP version 4.6x.
Check your procedure using this Links.
BAPI with LSMW
http://esnips.com/doc/ef04c89f-f3a2-473c-beee-6db5bb3dbb0e/LSMW-with-BAPI
For document on using BAPI with LSMW, I suggest you to visit:
http://www.****************/Tutorials/LSMW/BAPIinLSMW/BL1.htm
http://esnips.com/doc/1cd73c19-4263-42a4-9d6f-ac5487b0ebcb/LSMW-with-Idocs.ppt
http://esnips.com/doc/ef04c89f-f3a2-473c-beee-6db5bb3dbb0e/LSMW-with-BAPI.ppt
<b>Reward points for useful Answers</b>
Regards
Anji

CSS layout question regarding browser sizing

Similar Messages

Maybe you are looking for