Bayside Beat Tutorial - Part 4 - Absolute positioning

I am stuck on the Absolute positioning section. My image is supposed to be spread out across the screen and the text is supposed to be at 36% as a layer on top of the image. Here are the instructions:
To keep related styles together, select #wrapper in the Selectors pane, and click the plus button to create a new selector called #hero after it.
In the Layout category, set the position property to relative.
With #hero still selected in the Selectors pane, create a new selector called #hero article to style the <article>element nested inside the hero <div>.
In the Layout category, set the width property to 36%, and left and right padding to 10px.
Set the position property to absolute.
The moment I set steps 4 & 5, I get the following layout:
It should look like this:

Looking at your screenshot, it looks as though you have wrapped the <article> around the hero <div> in the underlying HTML. The problem isn't with your CSS, but the HTML structure.
Compare your HTML file with the version in the completed folder.

Similar Messages

Bayside Beat Tutorial--Paragraph Has No p Tags

While in the third session of the Bayside Beat tutorial for Dreamweaver CC titled Adding images and links, in the third paragraph of the imported article titled Riding the Cable Cars, the <p> tags are missing. Therefore, at the step of adding the Figure tag, there is no space between the caption text and the beginning of the third paragraph. Why would the <p> tags be missing?
It appears that Dreamweaver didn't convert the text properly to HTML.

The most likely reason is that you didn't select the closing paragraph symbol when copying from the rtf file. Paste Special's ability to generate the correct HTML tags depends entirely on how the text was formatted in the original document, and on what is actually selected.
When copying and pasting from an rtf document, Dreamweaver wraps everything in paragraph tags, as long as there is a blank line between each paragraph in the original document. If you don't copy the closing paragraph symbol, the last line is not formatted by Dreamweaver.
When copying and pasting from a Word document, Dreamweaver preserves the Word formatting, but only if the Word document has been styled correctly. A lot of Word documents are incorrectly styled (simply changing font size, instead of using heading styles), so it's always a good idea to check the HTML after pasting into Dreamweaver.
With both Word and rtf documents, there needs to be a blank line between paragraphs. If there isn't, Dreamweaver wraps everything in a single pair of <p> tags, and the line breaks are represented by <br> tags. Cleaning this up can be a major pain if a lot of text has been formatted this way.
That's why it's so important to check the HTML generated after copying and pasting from an external file.

Bayside Beat tutorial

How do you clear or delete files in the "Local Files" section? In step 1, when I selected the "Browse for Folder" button, all the files from my desktop were copied to "Local Files". When I edit and delete a file, it is also deleted from my desktop. I would like to start the Bayside Beat tutorial over from the beginning.

The best way to work with this (or any other) tutorial is to make a copy of the files, and make the folder that contains the copy the Local Site Folder.
If you want to edit the current site definition, go to Site > Manage Sites. In the dialog box that opens, select the name of the site you want to edit, and click the Edit button (it looks like a pencil):

Bayside Beat tutorial not saving properly? [subject edited by moderator]

I'm only on the first step of the trial, and have saved 'Bayside Beat' to the Sites folder, but it's empty - there are no images, nor anything in the js folder - what's happened??

The tutorial says -
Copy the bayside_beat folder into the Sites folder.The bayside_beat folder is the folder you will use as the root folder (main folder) for your Dreamweaver site. The content folder contains two rich text format (.rtf) files with text content for the web pages you'll build in this tutorial. The bayside_beat_comp.jpg image shows the design for the main page of the website (see Figure 2).
Did you add this bayside_beat folder as the root folder of the site in your site definition?

Trying to create and save a new site for the Bayside Beat tutorial but am having trouble

trying to create a new site as explained by David Powers in this tutorial but I am already getting hung up.
It tells me to go to site and then to New Site. I do that and type in Bayside Beat on the first line. (as soon as I do that you notice a red X on the right side of Bayside Beat.)
I'm told to Browse for my folder which is on my desktop and click ok. When I press SAVE another window pops up.
This time it tells me another site is named Getting Started and I'm asked to enter a different name.
Question, where is this other site that is named Getting Started? What name do I call it now!?
So I rename the site name San Francisco and press SAVE and another window pops up.
This time it tells me I may have further problems still...What am I suppose to do?

Do you mean, are the contents still in the original folder or was it transferred to a new folder?
Does it make a difference if it’s in the original folder?
Ralph Fujiwara
Graphic Designer
5 Revere Drive, Suite 206 | Northbrook, IL 60062
Direct: 847.849.2968 | EFax: 847.897.0768
[email protected]

Bayside Beat tutorial stuck at the same point over and over

I'm getting stuck again and again at the point where it asks to insert the Word text in the 3 placeholders. First one OK, and then it's like: "figure the rest out for yourself". What exactly goes in container 2 and in container 3? For instance I think the part with the 'links' should not be inserted. And the last paragraph does not appear in the example in the first part of the tutorial. If the creator of the tutorial feels it necessary to tell us that it's no problem if you've never built a website before, then he should keep it step by step and keep the learning curve for a first timer in mind! I HAVE built a few websites before, but this one keeps me puzzled over and again, because the result is not what is shown in the tutorial, and the images do not correspond fully to what I get to see in the Dreamweaver CC panels. One does not learn from just "do this and do that", but only if the reasons why are given as well.

This forum does not support email attachments. If you want to show a screenshot of your problem(s), you need to log into the web-based forum, and use the camera icon at the top of the message field to insert an image into your post.
Images embedded in posts are usually scaled down, but they can be viewed full size by clicking the image.
I'm sorry you're still having difficulty with my video tutorial. When Adobe asked me to create it, the brief was to provide a series of short videos showing how to use Dreamweaver to create a simple web page. Web design is a complex subject, so attempting to cover absolutely everything in half an hour of videos is impossible, but the target audience is subscribers to Creative Cloud, who might already be familiar with other Adobe programs, but are new to Dreamweaver. It's intended to provide a brief sampler of what Dreamweaver is capable of. The written tutorial is aimed at beginners who need more detailed help.
As I mentioned earlier, the videos were recorded using the original version of Dreamweaver CC. The colour picker was updated in Dreamweaver 13.1, which explains why you don't see the colour swatches shown in the video. However, the updated colour picker brings Dreamweaver in line with other Adobe programs, so it was felt that the change would be sufficiently familiar to designers. I'm sorry if it confused you.
Although you say you have built websites before, I wonder if you have a good knowledge of HTML and CSS? Understanding both technologies is essential to success with Dreamweaver. If you feel uncomfortable with code or don't want to learn it, you might be better off using Adobe Muse, which is also part of the Creative Suite. It's designed to build websites without a need for working with the code.
On the other hand, if you would like to persevere with Dreamweaver, I suggest that you take a look at Approaches to learning web design. It's a short video (less than 3 minutes) created by James Williamson, and is one of the free videos in Dreamweaver CC: Essential Training in the lynda.com Online Training Library. As James explains, his course doesn't cover the fundamentals of HTML and CSS. Yet his "essential training" course runs for more than eight hours. My own Dreamweaver CC: Learn by Video course (published by Peachpit/Adobe Press) runs for approximately 12 hours, and it still doesn't cover every aspect of web design or Dreamweaver functionality. It's a massive subject, but one that can be fascinating. Your age should be no impediment. Many of the most active people providing help in the main Dreamweaver support forum are in their sixties and seventies (including me).

Bayside Beat tutorial missing a java script in the files

So I opened the file and I unzipped it. Figure 4. http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/ first_website_pt1/first_website_cc_pt1_fig04.jpg
shows a JS and it is not in the file...I'll work around it, but want to know if is a problem.

The HTML5 shiv is hosted on Google Code's CDN. You can safely link to the external file to save having to download & host it yourself.

Nancy O.

Box model/none absolute positioning with flash

In recent years none-absolute positioning (or box model positioning) has become the norm with HTML/CSS
this is uselfull for dynamic functions which appear on an event (such as an object which appears when a button is clicked on or a error message that appears when a form box is given invalid input because it automatically inserts itself it the right place.)
One very important example of this is when you have a form which automatically produces an error message and the error message appears bellow the input area which caused it and the rest of the page is pushed down.
With none absolute positioning the developer does not need to worry about this.
But if the objects are given absolute position then it becomes a massive problem, the developer has to go about giving the objects differetn positions dependant on if dynamic objects appear or not
potentially the developer has to consider all possible variables, and code if statements which determine the position of all static objects for all possible variables which dynamic objects could take.
so does flash have a "none absolute positioning" solution to this problem.

Before you get all happy and pleased with yourself, APDivs or Layers seldom work well as a primary layout method. Here are some reasons why:
http://apptools.com/examples/pagelayout101.php
You're much better off using default CSS positioning (which is no positioning at all) along with CSS margins, padding and floats. If you don't believe me, check your page in non-IE browsers with increased/decreased text-sizes (zoom, text only).
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Static v absolute position

Many comments have been made elsewhere about the wisdom of
using 'absolute', particularly when a crossbrowsers are considered
and user's adjustment of text size..to quote one problem...
So, in order to eliminate these glitches from my pages, I
should apparently convert to 'static'..
What would be the steps to take to accomplish this without
too much hassle. I do have a lot of CSS code, which, I guess, when
adjusted would take care of some of the problems.
Is there a tutorial/publication which deals with this
procedure?

Any element without an explicit positioning style is static,
by default,
e.g.,
<html>
<head>
</head>
<body>
<div>This is a static div</div>
<p>This is a static paragraph</p>
</body>
> So, in order to eliminate these glitches from my pages,
I should
> apparently
> convert to 'static'..
That's a gross oversimplification. You should re-design your
layout so that
the page elements are placed on the page as dictated by THE
NORMAL FLOW,
mediated through the CSS rules. Simply taking a page that has
been designed
using absolutely positioned elements, and converting the
absolute position
to static position (by removing the positioning altogether)
will most likely
not work very well. I think you understand this, but I'm not
sure.
> I do have a lot of CSS code
This, too, is a bit troubling. Having a lot of CSS often
means inefficient
use of rules and selectors.
In general, you don't need many custom classes. And, in fact,
they
make your life more difficult when you come back to maintain
the page a year
later. Use ID selectors and create descendent selector rules.
An example -
#maintable { .... }
#maintable td { .... }
#maintable td table { ... }
each of those rules would apply explicitly to a) this table -
<table id="maintable">,
and b) this cell -
<table id="maintable">
<tr>
<td>...</td>
</tr>
</table> (and all others in that table),
and to this table -
<table id="maintable">
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Then you could use this rule -
#maintable table td.special { .... }
to apply to this cell explicitly -
<table id="maintable">
<tr>
<td>
<table>
<tr>
<td class="special">this one</td>
<td>but not this one</td>
<td class="special">this one</td>
<td>but not this one</td>
</tr>
</table>
</td>
</tr>
</table>
Also, it is not necessary to define default styles, e.g.,
font-weight:normal, unless you are trying to counteract some
cascading rule.
Further, it is not necessary to define styles that are
normally inherited,
e.g.,
body { font-family: Calibri, verdana, arial, helvetica,
sans-serif; }
will style all characters used on the page, no matter where
they are located
or in which container.
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
==================
"Karlhevera" <[email protected]> wrote in
message
news:[email protected]...
> Many comments have been made elsewhere about the wisdom
of using
> 'absolute',
> particularly when a crossbrowsers are considered and
user's adjustment of
> text
> size..to quote one problem...
>
> So, in order to eliminate these glitches from my pages,
I should
> apparently
> convert to 'static'..
> What would be the steps to take to accomplish this
without too much
> hassle.
> I do have a lot of CSS code, which, I guess, when
adjusted would take care
> of
> some of the problems.
> Is there a tutorial/publication which deals with this
procedure?
>
>

Adding a Layer (absolute position div) to a locked page

Maybe I am just not understanding templates but I have a
really simple one that has one editable region called "content". I
want to add a absolute positioned div to the content area but DW
tells me this would require changing code that is locked by the
template. I thought that the editable area automatically put in by
DW would accommodate the added code (css) that DW puts in when
adding a template to the page.
So what is the Editable area called "Head" used for anyways
if not for situations like this?
Thanks

Here's the problem with layers in template child pages, and a
simple
solution.
When you DRAG a layer onto the page in DW (this means you
click on the layer
icon in the Insert Toolbar and drag the layer on the page),
DW wants to put
the code for that layer immediately under the body tag, e.g.,
BEFORE DRAG -
<body...>
<table>
AFTER DRAG -
<body ...>
<div id="foo" style="position:absolute; ...>LAYER
STUFF</div>
<table>
In a template child page, this region is usually not part of
your editable
region, and so the layer's code is rejected by the template
engine. This is
a bad thing.
If instead of dragging the layer onto the page, you use
INSERT | Layer, that
should work provided your cursor is in an editable region,
but since
editable regions are usually within tables or other layers,
you have just
broken one of the rules listed above. This is also a bad
thing.
THE SOLUTION -
Open your template page in DW, and create a special place
where it is SAFE
to put your layers. In code view, find this -
</body>
and click so that your cursor insertion point is just to the
left of
</body>.
Now, use INSERT | Template Objects > Editable Region, and
name this region
"Layer Pad" or something like that.
When you save your template page, all your child pages will
now have the
LayerPad editable region on them.
THE BIG FINISH -
On any child page where you need a layer, just click in this
editable
region, and use INSERT | Layer. Bada bing, bada boom.
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
==================
"htown" <[email protected]> wrote in message
news:[email protected]...
> Maybe I am just not understanding templates but I have a
really simple one
> that
> has one editable region called "content". I want to add
a absolute
> positioned
> div to the content area but DW tells me this would
require changing code
> that
> is locked by the template. I thought that the editable
area automatically
> put
> in by DW would accommodate the added code (css) that DW
puts in when
> adding a
> template to the page.
>
> So what is the Editable area called "Head" used for
anyways if not for
> situations like this?
>
> Thanks
>
>

How do i add a Scroll Bar to a JList Component using absolute positioning?

I've got a applet whose content pane is set to null. I've create a jlist component on this applet and using absolute positioning set the bounds at
ListBox1.setBounds(380,10, 500, 500);.
My problem is creating add a scroll bar to the list box.
JScrollPane scrollPane = new JScrollPane(ListBox1);
C.add(scrollPane);
The above code is what i use and when i run this applet i don't see the list box at all. How do i add a scrollbar to this list box or JList component. Please help.

You need to setBounds() on the JScrollPane, not the JList.
The JScrollPane is the component that is being added to the panel.

Page footer absolute position issue - Crstal Reports

Hi,
I have a page footer section in the crystal report.
There are 2 sections Page footer A and Page footer B.
Here I am displaying Page Footer A in the first page and Page Footer B on all the pages.
Here the issue is, as I applied a suppress condition on page footer A in order to display only on frist page. This is working fine. But in the second page the page footer B is displayed a bit above the end of page as the page footer A is suppressed.
Can we set absolute position for page footer B? So that, the page footer B will be displayed at the same way in all the pages as like the first page.
Thankyou,
Regards
Gowtham Sen.

Hi All,
The issue got resolved. I used the option underlay. It worked well.
Thanks.

Use incremental rotary encoder to measure the absolute position and velocity

Hi all,
I faced a problem by using incremental rotary encoder to measure the absolute position of the rotation.
I'm not using NI-Daqmx but NI-motion module. In NI-motion module, I use read encoder position.vi to read the position of the encoder.
However, the readings is in incremental form. I'm doing the feedback control, so I need the absolute position and velocity.
Is there any functions or vi in the labview that can be used to transform the information of incremental encoder to the absolute one?
Thanks
Jun Wong

Jun,
1. The incremental encoder provides incremental position. After switching on the encoder power the encoder counts upwards or downwards. For the absolute position you need the index (R or I) signal. I don't know which type of incremental encoder you have but there should be A, B and (I or R) signals. The index signal should reset the counter to zero setting this way a pseudo-absolute-position (which is lost after the first switch of). Most of the motion controllers have a mode, just after switch on, in which the controller search for the Index. This mode is called Homing.
2. Velocity. It's very simple. You sample the position with a fix sampling clock. Let's say: 10kHz. The speed is: (Actual Position - Previous Position) / Sampling Period. Pos[n] = 10.000inc, Pos[n-1] = 9.900inc. Speed = 10.000 - 9.900 / (1/10kHz) = 1.000.000 inc/sec. If one increment is 0.0001mm then the speed is 100mm/sec.
Paul

Can Layers be given RELATIVE, rather than ABSOLUTE position

I'm having no luck finding an answer to this in HELP. I place
the layer's anchor in a table, then position the layer. If I
subsequently add (or remove) any lines above the anchor, everything
on the page moves down (or up), but the layer stays where it was,
relative to the page, not the anchor.
If there are several layers on the page this means a wholeot
of repositioning every time I do an edit up-page.
Any advice?

This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Based on this, a static div (no longer a 'layer') would be
what you want.
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
==================
"bwilsonduncan" <[email protected]> wrote in
message
news:[email protected]...
> I'm having no luck finding an answer to this in HELP. I
place the layer's
> anchor in a table, then position the layer. If I
subsequently add (or
> remove)
> any lines above the anchor, everything on the page moves
down (or up), but
> the
> layer stays where it was, relative to the page, not the
anchor.
>
> If there are several layers on the page this means a
wholeot of
> repositioning
> every time I do an edit up-page.
>
> Any advice?
>

Rendering bug with absolutely positioned button tags

I'm using Firefox 10.0.1 and I've found a bug regarding button elements that are absolutely positioned. The problem is setting both the right and left CSS attributes does not affect the width of the button as it should.
Here is some example code to show what I mean (the forum is mangling the html, hopefully you can get the gist of it):<br />
<br />
<pre><nowiki><html>
<body>
<div style="width: 500px; position: relative;">
<button style="position: absolute; left: 0; right: 0;">Test</button>
</div>
</body>
</html></nowiki></pre>
In all other browsers the button will be 500px wide. In Firefox, it will fit to the text.

Why don't you give that button a width:100% if you want it to take the full width of that DIV container?

Bayside Beat Tutorial - Part 4 - Absolute positioning

Similar Messages

Maybe you are looking for