Layout (Beginner)

I am new so bare with me.
I am creating a page. For example of what I want to do see:
www.sevenpounds.com
The new sony movie seven pounds website is an example of what
I want to do.
At the top of the page there is a frame I believe with a
background image as the blue bar and the grey space above it. The
picture of sony is on top of that I believe, and it is exactly
right to the top of the webpage. I can create a page with two
frames, I set the background similar to the sony page. But when I
attempt to put the picture over bar, it is not aligned to the top
of the page. There is a space between the picture and the top of
the page. I have tried alignment.
I guess the goal of what I am trying to do, similar to the
seven pounds page, is if someone extends the page wider than the
normal resolution that the page is designed for that the bar along
the top continues to extend, and the page stays in the center of
the browser.
Any hints or tips would be greatly appreciated, I'll continue
to tinker and lookup ideas on this forum.

Without going into the code, it appears that the top two
lines are 2 divs,
set at 100% with a background image set to make it appear
tubular. Set the
top and side margins to 0. (Actualy, more like 3 divs set
side by side).
The body of this site is a flash doc set to about 850px wide,
most likely
set in a div that is centered (side margins set to 0 with a
specific width
to it.)
The bottom section appears to be a couple of divs set at some
width less
than the flash file and also centered.
Does that help?
Gary
"Karl Warnke" <[email protected]> wrote in
message
news:gjgeeg$b6c$[email protected]..
>I am new so bare with me.
>
> I am creating a page. For example of what I want to do
see:
> www.sevenpounds.com
>
> The new sony movie seven pounds website is an example of
what I want to
> do.
>
> At the top of the page there is a frame I believe with a
background image
> as
> the blue bar and the grey space above it. The picture of
sony is on top
> of
> that I believe, and it is exactly right to the top of
the webpage. I can
> create a page with two frames, I set the background
similar to the sony
> page.
> But when I attempt to put the picture over bar, it is
not aligned to the
> top of
> the page. There is a space between the picture and the
top of the page.
> I
> have tried alignment.
>
> I guess the goal of what I am trying to do, similar to
the seven pounds
> page,
> is if someone extends the page wider than the normal
resolution that the
> page
> is designed for that the bar along the top continues to
extend, and the
> page
> stays in the center of the browser.
>
> Any hints or tips would be greatly appreciated, I'll
continue to tinker
> and
> lookup ideas on this forum.
>
>
>
>

Similar Messages

Fluid Grid Layout - Beginner's Questions

First, let me explain once again that I can't reply to my own threads because the "Reply" function isn't working in my browsers for some reason. (Thanks for your tips on my other questions, Ben Pleysier and Nancy O.)
Anyway, I want to modify my websites so they work in mobile devices, and I now have my first Fluid Grid Layout up and running. However, there are some bugs I need to work out.
I experimented with two or three fluid grids and just realized that they're very different for some reason. I think I inserted the wrong elements or inserted them in the wrong location.
Does the HTML code below look OK? I understand that everything is supposed to be inside div.gridContainer, which begs the question why are the last two divs (div.fluid and div#div1) OUTSIDE div.gridContainer? Are these extraneous divs that I can delete?
Am I supposed to have a div#page and div data-role="header"?
It looks like all my actual content - including the footer? - should go inside div data-role="content", right? And am I going to have to apply class="fluid Paragraph" to every paragraph in my database tables?
Some of the confusion may be because some of these unfamiliar elements (e.g. "data-role") may be HTML5, which I'm also just learning about.
If anyone could post a link to a web page(s) using Dreamweaver's Fluid Grid Layout, so I can examine the source code, it would be really helpful. Thanks!
<body>
<div class="gridContainer clearfix">
<div data-role="page" id="page">
    <div data-role="header">
    <?php require_once($BaseINC."/$MyPHP/inc/D/Shared/Body/Header.php"); ?>
    </div>
    <div data-role="content">CONTENT </div>
    <br class="clearfloat">
    <header class="fluid Header">This is the content for Layout Header Tag "Header"</header>
    <p class="fluid Paragraph">This is the content for Layout P Tag "Paragraph"</p>
    <footer class="fluid Footer"><?php require_once($BaseINC."/$MyPHP/inc/D/Shared/Footer.php"); ?></footer>
</div>
</div>

<div class="fluid DivBase">This is the content for Layout Div Tag "DivBase"</div>
<div id="div1" class="fluid">Use Insert Panel for additional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>

</body>
</html>

#1 Success with FGLayouts comes from experience. I built 9 test layouts before I got an acceptable one. A few tips. Build Mobile first because that is what everything else is based on. Then build Tablet & finally Desktop. Do not tamper with code in FluidGrid.css or Boilerplate.css files. Use a separate, external style sheet for your content styles.
#2 Depends on whether or not you want the divs to fall outside your #gridContainer. For example, let's say you want a 100% width header & footer that stretches the entire width of your page in all devices. In that scenario, you would have to move <header> and <footer> tags above and below gridContainer div. Otherwise, everything else needs to be inside the gridContainer in order to respond to the media queries.
#3 APDivs will not work right in FluidGrid Layouts -- or any RWD for that matter -- so don't even go there.
Nancy O.

Beginner Menu Layout Question

Hello,
I apologize since I know this question has to be answered somewhere but I'm not sure how to search it...
What is the proper way to build a menu for a website? I have built my homepage with the header, footer, and side menu that I like. Now I want to build pages that the menu link while keeping the header, and menus. What is the right approach? My code is written in html and css. I use to develop websites in pure html and used frames but I know they are not recommended. Also, I don't want to have to copy my code into each link.
If you could also recommend a good beginner tutorial on layout for css websites, I would be greatly appreciative. I have read through w3schools tutorials and a few others.
Thank you in advance!
-Eric

You have 2 choices:
Templates
Server Side Includes
Using the template function within Dreamweaver is a good way to go if it's a small site . .
For larger sites then serverside includes would be more practical and easier for maintenance purposes.
Templates:
You create a master template page, you declare which areas will be the same for every page, (non-editable regions) and then declare an area that will
change on every page (the content area) , these are editable regions.
Once you create the template and save it, you are then able to create 'child' pages from this template - as many as you like :-) If you every need to make a change to the menu or the footer or the header, change it in the master template, save it and the changes will flow through to the child pages created from the template.
Using DW Templates:
http://www.adobe.com/devnet/dreamweaver/templates.html
http://www.adobe.com/devnet/dreamweaver/articles/dw_templates.html
The other option is to use Server Side Includes (SSI)
A bit more about SSIs here:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f 693f21-7b6ca.html
http://bignosebird.com/ssi.shtml
Using PHP includes if your server supports php:
http://www.w3schools.com/PHP/php_includes.asp
One major difference between using Templates and SSI and PHP Includes?
When you make a change to a template page, you will need to re-upload all the pages to the server that were changed - may become very tedious if it is a very large site.
With using SSI, you make a change to one file and only have to upload the one file and all pages on the server will be update accordingly.
When to use Templates, Library Items & SSIs -
http://www.adobe.com/devnet/dreamweaver/articles/ssi_lbi_template.html
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://csstemplates.com.au/
http://twitter.com/nadiap

Beginner needs help with css layout

i'm new to using dw (cs3) and css, though i have some
background in html and coding. i'm creating a page using the "one
column elastic, centered, header and footer" layout and i have a
banner header with a horizontal spry menu bar at the bottom of the
header. the background color of the buttons on the menu bar is red,
and there's a yellow 5px border on the top and bottom of the red
menu bar, so it looks like there's red bar with yellow piping above
and below it, and this bar is between the header and body section
of the page. i've set these colors in the "ul.MenuBarHorizontal a"
rule.
now, the issue i have is that my menu bar does not extend
across the entire column, so there's empty space to the right of my
menu bar (between the end of the menu bar and the far right
column). i'd like the look of the red and yellow menu bar to extend
all the way across, but i can't figure out how to do this in css.
do i:
extend the menu bar all the way across the width of the page?
i can't figure out how to do this.
insert an image to make it appear as though the red and
yellow bar keeps extending to the right? if so, how will that image
remain elastic along with my page?
or is there a better solution?
i'm very new to css and i'm doing my best to figure out how
everything fits together. the last web site i built was in 1997 and
it was done in notepad. any help would be tremendous. i'm in
kinshasa, in the democratic republic of congo, and truth be told
there aren't a lot of dw gurus out here.
thanks in advance...

Can you post a link to your page, please?
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
==================
"charliemooreiv" <[email protected]> wrote
in message
news:[email protected]...
> i'm new to using dw (cs3) and css, though i have some
background in html
> and
> coding. i'm creating a page using the "one column
elastic, centered,
> header
> and footer" layout and i have a banner header with a
horizontal spry menu
> bar
> at the bottom of the header. the background color of the
buttons on the
> menu
> bar is red, and there's a yellow 5px border on the top
and bottom of the
> red
> menu bar, so it looks like there's red bar with yellow
piping above and
> below
> it, and this bar is between the header and body section
of the page. i've
> set
> these colors in the "ul.MenuBarHorizontal a" rule.
>
> now, the issue i have is that my menu bar does not
extend across the
> entire
> column, so there's empty space to the right of my menu
bar (between the
> end of
> the menu bar and the far right column). i'd like the
look of the red and
> yellow menu bar to extend all the way across, but i
can't figure out how
> to do
> this in css.
>
> do i:
>
> extend the menu bar all the way across the width of the
page? i can't
> figure
> out how to do this.
>
> insert an image to make it appear as though the red and
yellow bar keeps
> extending to the right? if so, how will that image
remain elastic along
> with
> my page?
>
> or is there a better solution?
>
> i'm very new to css and i'm doing my best to figure out
how everything
> fits
> together. the last web site i built was in 1997 and it
was done in
> notepad.
> any help would be tremendous. i'm in kinshasa, in the
democratic republic
> of
> congo, and truth be told there aren't a lot of dw gurus
out here.
>
> thanks in advance...
>

Help with CSS beginner layout problem?

Making my first CSS website. See http://www.capeannphysicaltherapy.com/index-test.html
The DIV layout held up fine even after I copied text into the #main_text DIV. But when I turn it into html the #main_content DIV jumps down even though the text stays in place. I'd appreciate any help.
Thanks

Increase text size in browser (Ctrl+++) Zoom, text only - to test your pages.
Get rid of DIV container HEIGHT-itis:
#container {
width: 812px;
background: #FFFFFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 566px; **remove me, no height is needed here**/
#left_container {
width: 222px;
float: left;
background-image: url(images/banner_left.gif);
height: 566px; /**remove me**/
min-height: 566px /**for non-IE browsers only**/
#main_content {
background-image: url(images/content_area.gif);
height: 370px; /**remove me**/
min-height: 370px; /**for non-IE browsers only**/
width: 590px;
Web pages need to be flexible. Do a Google search for "CSS Min- & Max width" and "CSS Min- & Max heights."
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com

WEB DYNPO Beginner: view - layout - Appl. Server Logon?

I try to make first experiences with WD for ABAP. I just try to implement the example of the tutorial in the Knowlegde Warehous. I created a view, but if I want to change the view,
the system wants me to logon to the SAP WEB Application Server of my R/3 System?
If I try to test a WebDypro application of the package "SWDP_DEMO_TUTORIALS", a logon seems to work fine?
thanks for any help
Jochen

Hi,
are you sure that in your AS ABAP ( that is the SAP Web Application Server) system the SSO settings are complete? For WDA, see http://help.sap.com/saphelp_nw2004s/helpdata/en/43/e86de5008b4d9ae10000000a155369/frameset.htm and for AS ABAP see http://help.sap.com/saphelp_nw2004s/helpdata/en/4a/b3b638faa32d19e10000009b38f8cf/frameset.htm
Regards, Heidi

Need beginner advice on test server and site layout

Recently started to learn PHP and MySQL. Realized I need a test server on my laptop (have the room and the power).
Is the XAMPP distributor fine for my needs?
Is there any advice on how to set up the directories? In other words, how to integrate DW and the test server?
Thanks
Tom

Yes, XAMPP works fine. I personally only have experience with MAMP and WAMP, but it's all the same.
As far as advice goes you can either use the default directory that XAMPP creates or you can have the program point to your current website parent directory (one level above the site(s) you define). Typically you will just use the address http://localhost/folder to connect to your site based on my previous comment. As far as mySQL goes you should know how to use phpMyAdmin which is distributed with the XAMPP package or you can always use the mySQL Workbench ( http://wb.mysql.com/ ) if you prefer a more graphical and traditional application-like interface.
With regards to the "test" server. Just set it up as you would an FTP server. The connection will be a local/network connection and the localhost address will work. Set the model to PHP/mySQL and you are good to go. If you don't use the localhost address and use the IP address of the computer sometimes firewalls can get in the way, so that is why it is recommended to use the localhost unless you know how to add a rule to your firewall to allow local connections.
I think that should cover it all. If you still have questions or have issues getting scripts to run feel free to post back.

Viewing Layouts on Remote/Testing Server

This is a beginner question.
I'm trying to view Layouts and/or Content Holders on the Remote/Testing Server out of Dreamweaver so I can edit them independently, but I just get 404 messages.
When I create a new page in BC, I am prompted for a Page Title which subsequently creates a Page URL and File name. The Page URL by default has no extension. The File Name has an extension.
If I view that new page on the Remote Server I get a 404 message. If I edit the Page URL to include the File Name extension, I have no problem on the Remote Server.
Now for example: In File Manager I have the following directory structures:
http://www.MySite.com/_System/ContentHolders/layout.html
http://www.MySite.com/Layouts/SystemMessages/SecureZoneAccessDenied-CA.html
Why is it that I can't view these pages on the Remote Server?
Is BC creating a default URL for these Layout pages that isn't the same as the file name it gives them? or no URL at all?
Thanks,
Cam

Hey there. Those are not pages. They are system generated layouts and for content holders only render when the module issued for that content holderin a pager template.
Ile extensionsyouseefor these are needed to work via FTP and understnd HTML formatting etc.
Zone access denied is a system message and will render when you create a login and enter a incorrect password.
Actual pages do not need agile extension.
Loin into the admins floor around. Look and pages, system layouts and templates, apply templates to pages. get a feel of things there as well to help get abetted understanding.
Also check out the links from the main page oftheseforums to theknowledgebaseto read through things as you need them.

Master/detail layout - how to have 'detail' hidden by default.

The 'master/detail layout' option for spry datasets are great but how can I get the page to load with all the 'details' hidden until the user selects from the 'Master' column to reveal the details?

Hiya,
Don't know whether you are still looking for a solution, but if you are, please take a look at:
"Using URL Parameters to Control Data Regions"
I used the info there to create a Master/Detail page at
http://www.myosanthe-bernhard-huber.com/html/fotobergtraining.php
(which calls its data from an HTML DataSet)
The detail region is empty when the page first loads because I've used SpryURLUtils to 'listen' for a url parameter so that I can load a specific row's content from an external link (eg http://www.myosanthe-bernhard-huber.com/html/fotoalbum.php which is also made from the the same dataset).
A side result is that If the parameter isn't included in the url when the page loads, the detail region remains empty.
The relevant code from the <head> of the page is:
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryMasterDetail_foto.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
This may not be the best or easiest way (I'm a beginner myself), and I haven't yet worked out how to move back to the top of the page when a master-link is clicked, but this may be useful for you.
Best regards,
Len

How can I populate a dynamic form from Excel data (beginner)

I am reasonably certain this is beginner-level but I cannot seem to figure out how to do this. I have data in an ecxel file and I would like to import that data into a form using LS. I need to distribute the unique data to each recipient. (I have included an example below) I would really appreciate any advice. If there is a tutorial that explains this I would be happy to go through that. Thanks in advance.
Customer
Acct No
Equipment
Sales Rep
Email
Pear Computing
1
Motherboard A
Jim Smith
[email protected]
Pear Computing
1
Video Card A
Jim Smith
[email protected]
Orange Computing
2
Motherboard B
Jim Smith
[email protected]
Orange Computing
2
Super Mouse
Jim Smith
[email protected]
Plum Computing
3
Awesome Monitor
Tanya Smith
[email protected]
Apple Computing
4
Motherboard S
Tanya Smith
[email protected]
Apple Computing
4
Super Mouse II
Tanya Smith
[email protected]
Raisin Computing
5
Motherboard R
Bob Smith
[email protected]
Cherry Computing
6
SoundLoud Soundcard
Bob Smith
[email protected]
I would like to send a template e-mail to each sales rep at "PC.com" that says:
Dear <SalesRep>,
<Customer> has the following equipment:
<Account No> | <Customer> | <Equipment>
I would like all the data for each customer to go to the sales rep. For instance, Jim should get an e-mail stating that "Pear Computing" has two items, and a separate e-mail stating that "Orange Computing" has two items. What I want to avoid is the MS Word mail merge solution that equates to Jim getting 4 emails. I would like the equipment to be grouped by customer number or account number. I would prefer to have a dynamic layout with flowed page as the number of items per customer will vary.
PLEASE HELP!
JD

you can copy/paste data from Excel to Illustrator

Layout mode....totally confused

While I've used Logic for several years I'm a total beginner at assigning MIDI controls for live work, or indeed for anything as I've never had much need to. I am therefore finding the Layout mode utterly beyond me, as so far nothing the manual claims will happen happens at all...I am sure much of this is due to my lack of knowledge on this (the manual does seem to assume a certain amount of understanding) and perhaps also something to do with the keyboard (an Edirol PCR800).
But I do have 2 basic questions that might get me on my way. Firstly the manual claims that when you switch from edit mode to layout mode you can still hear the last patch you were on. I can't. Secondly, however I assign the knobs on the PCR800 in layout mode, when I go back to edit mode if I move one then they all start moving, and they also change the program change numbers. If anyone can point to something obvious I could be doing wrong, thats probably what it is!

Firstly the manual claims that when you switch from edit mode to layout mode you can still hear the last patch you were on. I can't.
That is a known bug in the manual
Secondly, however I assign the knobs on the PCR800 in layout mode, when I go back to edit mode if I move one then they all start moving, and they also change the program change numbers.
You either assigned the same controller to all knobs or your PCR800 doesn't send simple MIDI controllers (that's what I expect happened to you). Please check the manual of your PCR800 to send standard MIDI controllers for the knobs, no complex SysEx, Data-Events, etc.

Layout and moving forward backward

hello,
i'm beginner in report and i try to modify a complex report
i would like to move in the layout editor, a field that i have created
to put it in the good place in layout tree
but in the menu layout, "move backward" doesn't work and when i use
"send to back" it becomes impossible to select my new field, to move it,
and it's at the top of the tree!!!
how to move field in layouts????
@rosagio
i use REPORT 9i(9.0.2)

I don't know what you mean by "move backward", but it looks to me like you just want to move your field to another position.
You cannot always do that. Within the current frame it is not a point, but trying to move it outside the current frame could become an issue.
There are two buttons in the layout editor that control how you can move fields: confine mode and flex mode. There are good explanations in the online help.
But you have to be really careful if you switch off confine mode: you can easily move an object out of the correct group frame.

Beginner CSS multiple stylesheet Question...

Hi,
I am a complete beginner. I've followed through the Dreamweaver beginner 'Check Magazine' tutorial to create a site and it's straghtforward. My site is small, a tourist guide, basically a three column/main image homepage like the tuotorial and then around 25 pages featuring different places with identical main column and a thinner right column layout. (I've created a template for the 25)
My question is regarding CSS stylesheets. Now obviously I have used the CSS stylesheet to set the size and background colour etc of my Div Columns in the homepage as in the tutorial. But my 25 pages have different column widths and background colours to the homepage. Do I need to create a seperate stylesheet for each page?
Or does each div column get a different name on each page? (div#right_column 1,2,3 etc) Or I need to learn another step?
I've looked in the beginner guides and they all explain one stylesheet, but don't elaborate for when you start adding new pages and want to edit them.
I know I have a lot to learn! But I don't want to go further learning a bad habit or misunderstanding and wasting a lot of time when a simple answer would really help me at this stage. It's fine if someone knows a good guide or tutorial that covers this that they can link to as well.
Thanks in advance!

If I understand this correctly, your home page is the only one that has unique styles. The other 25 site pages share the same styles.
Create one external stylesheet for the 25 pages.
Use embedded CSS on the home page for styles that are specific to that page.
Embedded CSS goes in the HTML document between the <head> and </head> tags like so.
<style type="text/css">
unique page styles go here....
</style>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Sizing confusion with Liquid Layout

Hello,
I am attempting my first site. I have read the Dreamweaver CS3 Missing Manual (and done the tutorials), so I have a grasp of Dreamweaver and it's powers, but by no means do I consider myself anything but a beginner.
I have chosen to create a liquid 2 column layout with header and footer using Adobe's layouts to get a handle on the basics. When it opens, it's default 100% size in DW is 969x530. When I shrink the browser, it shrinks too, which I know is obviously the nature of a liquid layout.
This is my question: how am I supposed to size my banner and images in Photoshop or Fireworks to fit into this layout if the sizing changes whenever I change my browser size? Do I use the default Adobe gave me and size my images around that, or should I make my document size smaller, say to 795x470 (832x624 maximized)?
Thanks for any help. This question may seem easy, but it's stopping me continuing on with the site.
Jen

You need to make your banner liquid as well, like the other gentleman said.
What might help to understand how this is done is by looking at websites the have liquid banners. Here's a web site I finished a few weeks ago:
www.aplusoutdoorcinema.com
If you right click on the marquee and choose view image, you will see that the main graphic is a fixed size. Then if you right-click on the stars to the right of the marquee and in the menu choose view background image, you will see a graphic of stars. This graphic is repeated diagonally across the banner (repeat-x). I used a min-width to keep the moon from crashing into the marquee (unfortunately, IE6 does not recognize the min-width property).
Often the background image that repeats across a banner is only 1 pixel wide if its just a color. My background image in the example I gave is wide because I needed a variety of stars
Here's a simpler example on CSS Zen Garden:
http://www.csszengarden.com/?cssfile=017/017.css
If you are not acquainted with CSS Zen Garden, it's a showcase for CSS sites and it also invites anyone to download the XHTML or the CSS. So you can download the css on this site, examine the code, and see how they did it.
If you read David McFarland's book, you are off to a great start.
Good luck,
John

Web Dynpro Layout cannot be displayed

Hi Guys,
I am a beginner using Web Dynpro technic and I would like to know if there is a configuration need to be made to Internet Explorer or in SE80 to display the layout correctly?
For example, I created a text element in a view and in the Layout Tab the Web Browser always tells me that "This program cannot display the webpage"
Is there a special parameter to set up to enable Internet Explorer to display the Web Dynpro Layout? I cannot really find documentation on the subject actually.
Thank you in advance for your answers.
Sylvain

I post this every once in a while, but everyone should be aware that having to make an entry in your hosts file is NOT normal. I know a lot of people post that as solution, but if you are having to make an entry in hosts file to resolve the URL of your ABAP AS then something is wrong with your network configuration. Your basis administrators should work with your network administrators to get a proper DNS entry setup for your ABAP system. Surely you don't expect that all end users accessing you WDA applications will have manual entries in their hosts file.

Layout (Beginner)

Similar Messages

Maybe you are looking for