AP divs in design of web page

I've been studying some tutorials on designing with CSS -- I'm a newbie, using CS3. I had gotten into the habit of using AP divs to design my web page. I was warned last week that these can cause problems, especially when using features such as the Lightbox extension, so am trying to learn not to use those as much. The problem is, I've found the other methods of web-page layout don't offer the flexibilty of the AP Divs. I use many images, since I'm an artist, and more often than not I run into problems inserting images using the handy ready-made CSS layouts available and used in the tutorials. It's so easy just to draw divs here, draw divs there. Is there a tutorial or other informational guide to help with web page design where many images are used?

In simple terms, I think you're trying to reconcile desktop publishing (traditional page layout) with web design.
They're such completely different media that you'll continue to have trouble bridging the two until you understand more of how web pages work, especially learning HTML and CSS.
APDivs would be great for layout if everyone had the same screen size, resolution and browser viewport size.
Since you cannot predict any of the above, there's 95% chance that your APDivs will seem to be in the wrong place on the page (compared to your intended design) when your visitors view it - even though the APDivs are technically in exactly the correct spot according to the code on every screen.
What to do?
There's no substitute for learning HTML and CSS.
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/css/default.asp
Become familiar with CSS positioning and how it works.
e.g. http://www.barelyfitz.com/screencast/html-training/css/positioning/
Absolute positioning is just one member of a family of positioning methods in CSS.
Unfortunately, as a tool, its resemblance to traditional page layout - which so many people can relate to - means it gets much misunderstood and maligned when, if used correctly, it can be useful - but not for page layout.
Use what you learn to design pages which will work on any device and browser.

Similar Messages

Can I design a web page to use the background image from the user's installed persona?

I build web applications, and I would like to have an application use the background image from whatever persona the visitor has installed, if any. Is this possible, using css/js/html?

No that is not possible with code on web pages (userContent.css could probably do this).<br />
The persona is only used as the background for the user interface (toolbar) area and not for websites.<br />
The dimensions of the persona with the height of 200px is also not enough to cover a page.

I want to design a web page (my first) - what /where do you find iWeb?

where do i start with my basic web page on my iMac?

The word is that iWeb is being discontinued but it is still available on the Apple Online Store (not the App Store) as part of iLife.

Ap div locking location within web page

I am relatively new to web design but would like some help
with locking the ap divs to a position on the web template.
if I align left for the page everything appears to work ok.
When I align centre then this is where the problem starts -
the main page centres ok but the ap div boxes with text etc
although in design view it is ok when I test on IE the ap boxes are
to the left of the main page.....- any help would be appreciated.
Thanks

peugeot1940 wrote:
> When I align centre then this is where the problem
starts - the
main page
> centres ok but the ap div boxes with text etc although
in design view it is ok
> when I test on IE the ap boxes are to the left of the
main page.....
Your problem lies in not understanding what an AP div is. The
AP stands
for "absolutely positioned". An AP div with a top position of
50px and a
left position of 100px will always be 50px from the top and
100px from
the left of the page. It never moves, because it's absolutely
positioned.
Not only is it absolutely positioned, it's removed from the
flow of the
rest of the page. So, if you have other elements in your
page, they will
act totally independently of the AP div(s).
Take a look at the following helpful article:
http://apptools.com/examples/pagelayout101.php
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Trouble inserting a widget into my web page

Hello,
I am using DW CS3. I got the html code for a widget (in this case a small banner) to insert into my web page. Here is the code:
<div>Find <a id="flipkey_best_of_property" href="http://www.flipkey.com/pine-mountain-club-vacation-rentals/g1553621/">Pine Mountain Club Vacation Rentals</a> on FlipKey</div><script type="text/javascript" src="http://data.flipkey.com/widgets/jsapi/36780/fhb/7be5/"></script>
I inserted a Div Tag in my web page to contain the code (Class: Body; ID: apDiv2), and then pasted the code into the Div Tag. Though I was in Design View, the html code still showed as html code, not as the small banner I had hoped for. Can someone steer me in the right direction?
Note: I took a web design course 3 years ago and created this web page at the time. I haven't done any web design since then, and have forgotten many of the details, but I should remember as soon as someone points out my errors.
Thanks!

If it's been 3 years, a refresher course may be in order.
Start here:
HTML & CSS Tutorials - http://w3schools.com/
APDivs as a primary layout method seldom works well. Here is why:
http://apptools.com/examples/pagelayout101.php
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
How to Develop with CSS? (a must read!!)
http://phrogz.net/css/HowToDevelopWithCSS.html
New Dreamweaver CSS Templates for beginners
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
New DW Starter Pages
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Dreamweaver 8 - Issues centering web page

I recently started my own business and am on a budget so decided to design the web page myselt with Photoshop and Dreamweaver 8. It went well except for the fact that my page won't center itself on screens, and b/c I created it on a display that is 1920x1080 I don't have good results on smaller screens. I used layers, and can't convert to tables b/c of the overlapping layers I have. I treid recreating the whole page again and not using overlapping layers, but once I converted to tables and viewed in browser I found that my buttons were moved all around. I'm really having a difficult time with this and have spend the last two days trying various fixes with no luck...Any help would be apprecitated - the site is up and here is the link www.digitalrootsstudio.com
Thanks in advance

digitalroots wrote:
So I would put the above text right after the body tag on top of html? Do I need to put the above code again at the end of the html, or only on top?
Yes.
<div id="container">
Then all your absolutely positioned layers go here
</div><! close the container-->
below is a simple example of absolute layers inside a relatively positioned container <div>. Note how the absolutely positioned layers move when you re-size the browser viewport window.
I stress using absolutely positioned layers is NOT a good solution to be using but it may be the only solution if you know little about website construction.
<!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>
<style type="text/css">
#container {
    position: relative;
    width: 800px;
    margin: 0 auto; /*this centers the page */
#one {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 150px;
    height: 150px;
    background-color:#CF3;
#two {
    position: absolute;
    top: 100px;
    left: 150px;
    width: 150px;
    height: 150px;
    background-color:#39F;
</style>
</head>
<body>
<div id="container">
<div id="one">Absolute layer one</div>
<div id="two">Absolute layer two</div>
</div>
</body>
</html>

Web Page Composer

Hi,
I am working in EP NW04s SP 14. I am using web page composer for designing a web page. I have followed all the steps and finally assigned the web page in the navigation structure to both the anonymous user and the logged in user. I am able to view the details in logged in user. But the contents are not viewable for an anonymous users.
I have given anonymous access to page layout, iview templates, security zone as mentioned in the thread
Web page composer and end user
We have anonymous access to KM content as specified in the note 837898. But still the contents are not displayed? Any specific reasons?
Consultants worked in WPC, kindly help...
Thanks & Regards,
Ganesh N

Hi Ganesh,
Check my [reply|/thread/916997 [original link is broken]; to this similar post in the Knowledge Management & Collaboration forum.
Hope this helps resolving your issue.
Best Regards,
Joseph

Do Web pages for phones have to be Apps?

I do not own a mobile phone that is web enabled, and I never designed a web page for phones, but now due to the steep learning curve, I need a quick fix.
Reading the help in Dreamweaver 5.5, there is lots of information about creating the best mobile sites, though at the moment, I don't understand a lot of it - but that's my fault.
However, when I use someone else's phone to look at most existing sites that are just designed for computers to view, the phone has facilities that make the sites available.
Lots of zooming and such which is a pain, but you usually can view them.
It occurred to me that perhaps there is a position mid way between a stock web site and a fully fledged phone app could be a stop gap solution until the whole mess of media queries, and other phone related stuff is understood.
My suggested solution is as follows:
Provide seperate sets of pages for both types at suitable sizes ( max 320 wide for mobiles).
Keep all graphics for phone pages to a minimum size and well optimised to allow for quick page loading.
1.On the index page of the site, put a large link to the phone pages and one to the computer pages so that its easily seen by phone users
2. Design the index page and all phone pages so that the content would fit on a 320 pixel wide screen.
3. Have the first page after the index purely as the menu screen, with a list of links.
4. Each link leads to a deck of stacked pages that that are serially linked back and forth, with a "return to first page" on each one, with the navigation being at the bottom (or the top?) of the page.
To view pages, the phone user would have to select the phone link on the site's index page, then select from the menu to get to the first page of a topic. He can then flick through the linked set of pages and go back to the menu from any. The pages would fit most mobile phones, and no phone specific stuff wopuld be needed.
I appreciate that this method would not provide the most sparkling of mobile web sites, and would require two sets of pages, which is a maintenance problem, but it ought to help phone users to surf my site until I can get up to speed with the mobile stuff.
Question is - would it work?
Your comments please?
Howard Walker

mhollis55 wrote:
Frankly, if you simply do a website using HTML5, you're set for a mobile device. And Dreamweaver 5 and 5.5 both give you code-hinting and definitions for HTML5/CSS3.
jQuery would be the "app" side of that, though if you are really looking to make an application that works on a mobile phone, your best method is to do it in Flash and then compile it using Air. Adobe has a complete discussion of what's required here.
Hi mhollis55
Could you tell me why you describe the jQuery mobile framework as an app?
The framework uses html5, css3 and ARIA, and is designed to make the creation of mobile friendly web pages easier for those who do not wish to commit themselves to learning all the mobile specific features required by modern smartphones and now even supports many of the older smartphone devices, see - http://jquerymobile.com/
PZ

Help adding audio to a web page...

Hi, im about to start designing a web page that will have 4 audio files on it that can be played once clicked on.
I was hoping for something very simple looking (like the amazon audio preview players - track title, play & stop button).
I have never done this before so would appreciate any help you guys could offer.
Cheers!
Benn

I use Pickle Player. It supports many custom player skins (control styles), playlists & posterframes. Best of all, it works in all devices with just one file type -- MP3 audio or M4V video.
Nancy O.

Web Page Alignment Problem

Hi.
I need some help. I created a webpage in CS3 Dreamweaver. The problem is that my pictures and flash content are misaligned when I access my webpage from another computer screen other than the one I used when I designed the web page. Seems like my webpage is not aligned "universally" for all computer screens. How can I fix my alignment to be constant on any screen anywhere in the world?
Thanks

Seems like my webpage is not aligned "universally" for all computer screens. How can I fix my alignment to be constant on any screen anywhere in the world?
That's a tall order, given the range of devices people use these days (smartphones, tablets, desktop/laptops, multi-panel displays...). Decide who your target audience is and build your site accordingly.
For most desktop/laptop users, your page should fit in a 1000px wide viewport without horizontal scrollbars.
http://alt-web.com/Free-CSS-Templates.shtml
For better answers to layout questions, you need to post a link to your page.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Size of web pages with different resolution

hi all, it has been a while since i designed web pages, and i
feel that i have been left behind quite some bit. the question i
have is, i have a laptop that runs at 1280X800 resolution, and an
external monitor that runs at 1280.1024. i am trying to design a
web page for a friend. i have looked through some tutorials and
found out about the window size option in the bottom right hand
corner of the screen when using dreamweaver. i have set that screen
size to 1024x768, which at this stage is the highest i can use.
once i have finished creating the web page, i save it and hit f12
to view in ie. the picture however doesn't fit the window, either
on my larger monitor or on my smaller monitor. the question i ask
is, do i just maximize the window, so that i can design it on the
monitor with the larger resolution. if i do this will everyone look
at it the same? the reason i ask is, before i got the second
monitor, i designed the web page on the laptop screen, with a
smaller res, but when published on the internet, monitors with a
higher res had a lot of black space everywhere with the design in
the corner. if anyone can help me out, the address is
www.aashaaron.com thanks if you can.
regarsd
bret

Rather than ask someone to answer this question for the
umpteenth time
please use your time to search this NG. You will find dozens
of recent
threads on this and related topics.
http://groups.google.com/group/macromedia.dreamweaver
Walt
"bretkennedy" <[email protected]> wrote in
message
news:f2dvat$a33$[email protected]..
> hi all, it has been a while since i designed web pages,
and i feel that i
> have
> been left behind quite some bit. the question i have is,
i have a laptop
> that
> runs at 1280X800 resolution, and an external monitor
that runs at
> 1280.1024. i
> am trying to design a web page for a friend. i have
looked through some
> tutorials and found out about the window size option in
the bottom right
> hand
> corner of the screen when using dreamweaver. i have set
that screen size
> to
> 1024x768, which at this stage is the highest i can use.
once i have
> finished
> creating the web page, i save it and hit f12 to view in
ie. the picture
> however
> doesn't fit the window, either on my larger monitor or
on my smaller
> monitor.
> the question i ask is, do i just maximize the window, so
that i can design
> it
> on the monitor with the larger resolution. if i do this
will everyone look
> at
> it the same? the reason i ask is, before i got the
second monitor, i
> designed
> the web page on the laptop screen, with a smaller res,
but when published
> on
> the internet, monitors with a higher res had a lot of
black space
> everywhere
> with the design in the corner. if anyone can help me
out, the address is
> www.aashaaron.com thanks if you can.
> regarsd
> bret
>
>

Web page width most used by active web designers

The question "How wide should you design your web page?" is asked from time to time. Many web designers are understandable still designing for a 800 pixel screen. I know the standard answer is to design for your viewers. If there is a substantial percentage of viewers using older browsers and lower resolutions, than make your web pages around 780 pixels or less. But that width is starting to look very narrow on the wide screens that have been around for a while.
So, we all know that we need to design for web site visitor. I would like to know how many currently active web designers are still designing the majority of their web sites for 800 pixel screens. Or are you mostly creating wider pages for higher resolutions and wider screens? I am not ready to completely abandon 800 pixels screens yet, but I am starting to design wider pages for higher resolutions.

Depends on the job, for instance the amount of info that you need to find a place for on a page.
It also depends on the audience, if you were to make a site for a tech-savvy audience you might expect them to use bigger screens.
but this offcourse you already knew
The sites I did most recently were 800, 850, 1000, 896, 780 and 1000 pixels wide, all fixed, all centered.
If you look in the stats (Google Analytics) for the latest site I did (1000px wide) you'll see that 800x600 visitors come in the 12th place (0,82 % of all visits)
At 20 we see 320x396 px (0,41%), at 26th place 800x480 px (0,2%) and at 43th place 640x512 pixels (0,10%)
So: 98,47 % of all visitors have a screen that is wider than 800 pixels.
Also interesting to see is that, on average, a user spends 1:49 minute on the site and looks at 5,73 pages during a visit.
The 800x600 user however spends 45 seconds on average on the site (-58,4%) , and views 2,25 pages.(-60,7%)

Inserting tabbed navigation code makes my web page not display in design view..

Hi everyone..
I am on Dreamweaver 8 for MAC, and was working on a couple of web pages..these pages included divs and tables. But when I tried inserting a tabbed navigation I found at:
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
In a nutshell, it asked me for step 1 to:
Step 1: Insert the below CSS and script into the HEAD section of your page:
<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.js">
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
</script>
The next step was this:
Step 2: Finally, simply add the below HTML to where you wish the Tab Content to appear on the page:
<h3>Demo #1- Basic implementation</h3>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p>
<hr />
Well, I did all the steps required, but when I put this inside a div I had inside a table, all of a sudden I couldnt see anything in my design view, only two tables that arent even the same size..When I take out all this code, I get back my regular page..Can I see this tabbed navigation in my design view? Unfortunately, I dont have the spry widgets since I am on Dreamweaver 8..If I preview it in both Safari and Firefox (on Mac Firefox/3.0.8) (Safari 3.2.1) I can see everything fine, including the tabbed navigation..But designing in code isnt really helpful because I want to see what it looks like in design view, in case we change things-its just easier for me to work on..So I assume there is something in this code that is making my design view show nothing..
Update:I tried taking out the code again, but this time, I couldnt see anything again, even without this code..
I know that I can go to validation website, and I got a lot of errors-but all the pages I have that are in the same style have those same errors too—and they display fine..its only when I insert this specific piece of code that everything goes haywire..Is it even possible to view tabbed navigations (like the one in the above link) inside of Dreamweaver Design View?
Any help would be appreciated..

DW8 doesn't render any dynamic content, so I'd say it's a no go. You'll just have to live with that limitation or upgrade to CS4...
Mylenium

Simulate frames by loading web page content into DIV

Hi, does anyone know if there is a way to simulate frames
using CSS. Essentially, I want to load the content from another web
page into a specific DIV. The content is from another web site, we
have permission to use it, but I want it to appear within a page on
my site that still has my navigation and header DIVs. So I want to
load a new page into a content DIV, as if it were a frame. Can this
be done? Thanks, JD

By the way, IFrames have the same problems as frames....
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
==================
"bregent" <[email protected]> wrote in
message
news:e1umgn$227$[email protected]..
> >The content is from another web site
>
> If you are well versed in server side scripting, you
could do this without
> a
> (i)frame. Otherwise, you'll have to use some sort of
frame. Of, find out
> if the
> other site can provide you with an xml feed of some
sort.
>

Centering a web page with nested layers (divs)

Hi, I know this must be asked numerous times but some help woud be appreciated. I am currently upgrading my wed site produced in Dreamweaver 6 and 8.
I used layers and nested layers with the page aligned to the left of the browser. I am now redesigning the whole site and would like the page centred. As a designed and signmaker I am trying a avoid an out of the box design.
How can I centre my pages, preferably adapting existing pages to start with.
www.curtissigns.com is the site and appologies for some of the very ancient and dated pages!!!
If any can provide some advice or point me to some discussions.
All my efforts with CSS seem to be failing at the moment.
Thanks Stuart

All individual elements on your page at the moment are 'absolutely' positioned - very bad pracitce. But, I understand you've mentioned you made this site a while ago.
A quick fix for now would be to add this right after opening <body> tag:
<div id="container">
and this right before closing </body> tag:
</div>
Then, add this to the CSS part of your page (just after opening <style type...> right now, Line 85 on your HTML page. This will come before #apDiv1 rule:
#container{
left: 50%;
margin-left: 520px;
position: absolute;
left: 50% will offset the Div container to 50% of page width. margin-left: 520px will slice that in almost half (at the moment, your page is about 1004px wide), thereby displaying the entire page in the center. I've used position: absolute now since otherwise, you cannot center it (as you already have all nested elements as absolute).
But, I'd definitely recommend taking some time to re-create your webpage - never use 'position: absolute;' unless it is definitely required. You can do a great job with using 'float' and 'position: relative' tags.
Good luck.
-ST

AP divs in design of web page

Similar Messages

Maybe you are looking for