Centering div makes design view too wide

<div style="width: 100%;">
<div style="width: 100px; margin-left: auto;
margin-right: auto;">
BODY CONTENT
</div>
</div>
Ok, I've been wrapping my body content in the div tags shown
above rather
than using a centred table as I did before. The problem I
have is that
design view is too wide and I have to use the horizontal
scroll bars when I
am using my laptop. It's not a big problem, but was wondering
if it was
necessary to have to live with this? Also, is there any
particular reason
the div appears yellow in design view?
Cheers
ss.

> an HTML retard
This is the most important thing for you to work on if you
want to stick
with DW.
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
==================
"Synapse Syndrome"
<[email protected]> wrote in message
news:[email protected]...
>
> "Gary White" <[email protected]> wrote in
message
> news:[email protected]...
>> On Sat, 13 May 2006 15:45:12 +0100, "Synapse
Syndrome"
>> <[email protected]> wrote:
>>
>>><div style="width: 100%;">
>>> <div style="width: 100px; margin-left: auto;
margin-right: auto;">
>>> BODY CONTENT
>>> </div>
>>></div>
>>>
>>>
>>>
>>>Ok, I've been wrapping my body content in the div
tags shown above rather
>>>than using a centred table as I did before. The
problem I have is that
>>>design view is too wide and I have to use the
horizontal scroll bars when
>>>I
>>>am using my laptop. It's not a big problem, but
was wondering if it was
>>>necessary to have to live with this? Also, is
there any particular
>>>reason
>>>the div appears yellow in design view?
>>
>> What's the point of the outer 100% wide div? You get
exactly the same
>> thing without it. Your body content is only 100
pixels wide? There is no
>> reason for the posted code to show up in yellow.
Perhaps, if you show
>> *all* of the code, someone can spot the problem.
>
>
> Thanks, from what you say it seems obvious now. I got
that code from an
> earlier post here and was using it without knowing what
I was doing 'cos
> I'm an HTML retard.
http://tinyurl.com/rd6zq
> I changed the 100px to the max width of the real
contents and now
> everything is fine. I don't know what the point of the
outer div was for
> in the example, but it does make the design view look a
bit better for
> working out my layout I think.
> Cheers
>
> ss.
>

Similar Messages

When moving Div in design view : Top & Left as Percentage?

Hello All,
Whenever I move a div in design view, the left and top values are changed to pixels - I would like these to be given as percentages (using the viewport dimensions I have currently selected).
Is this possible? If so can anyone tell me how to configure this please?
If not, would it be possible for me to create an extension for this? Does the extension API provide that kind of ability?
Thanks in advance,
Peter

#1 DW is not a click & drag application like Photoshop or Illustrator.
#2 Switch to Code View and apply the top: and left: values manually.
CSS:
#DivName {
     position:absolute;
     top:xx%;
     left:xx%;
That said, APDivs seldom work well for primary layouts. Here's why:
http://apptools.com/examples/pagelayout101.php
You would do well to spend some time learning code basics before you start using DW.
HTML & CSS Tutorials - http://w3schools.com/
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Beginner CSS Templates -
For commercial CSS Templates that are rock solid and perform well in all browsers, visit Project Seven:
http://www.projectseven.com/products/index.htm
Not Just a Grid CSS Framework
http://www.notjustagrid.com/demo.asp
EZ-CSS Templates (watch the screencast to see how it works)
http://www.ez-css.org/css_templates
Dreamweaver CSS Templates for beginners (free)
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
New DW Starter Pages (free)
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Table borders in Dreamweaver cs4 design view too big, I would like to have a single line for tables

Hi All,
I design email templates using only tables but the design view options in cs4 only provide a huge 3px border in order to display the tables. In older versions of macromedia etc the table view is only 1px wide which makes designing a whole lot easier.
When I add tables within tables it adds more spacing and looks way off and it also looks off in browsers, causing me to have to increase and decrease padding sure this is no way to create table even if they have no borders and the table width is already fixed?
I have tried turning borders off in visual aids but there is no option to have just a single line to demonstrate a border!!
I can't work like this, can anybody help me or is this just the way borders are displayed in cs4 for the pc???

Hi Guys, thanks for getting back to me.
the problem is purely about design view display and not about coding.
Below is how CS4 displays borders with two lines which I find difficult to decipher:
Then below is Macromedia DM 8 and this how I want the borders to look, with single lines to display the tables.
This may just be the way Abobe have decided to display tables in design view and there may not be any option to change it but if you know any way to change it I would be most greatful.
Thanks again.
G

How come I can see my div in design view but not in live view

Hi,
I have a div ID called "portfolio" that I can see in design view but not live view or on a browser. It's a little pink square and I want that square round also.
I ran it through validator. It picked up some things in the style.css which I changed and the boilerplate.css that I did not. Because I thought DW auto creates code for boilerplate because I don't enter that code myself.
It's also rejecting a lot of webkit code but this seems like standard webkit code that works elsewhere on the page.
BTW: at what point does this brutal hand coding pay off in money and less heartache when Wordpress looks cleaner and is so much easier to use? I feel like I barely know HTML or CSS in terms of translating vision to reality and with all-browser functionality after months and months of on-line classes. How long are the pros at it till they reach a watershed point?
here's my address: http://www.adjacentdimensionsmedia.com/home.html
Here's my html:
<body>
<div class="gridContainer clearfix">
    <div id="div1" class="fluid"><img src="adtitle2.png" width="700" height="80" alt=""/></div>
<div class="fluid"><div class="box-shad"><a href="index.html"></a></div>
</div>
    <div id="portfolio">Portfolio</div>
</body>
Here's my CSS:
.box-shad {
margin-top: 200px;
margin-left: 100px;
width: 900px;
height: 700px;
display: block;
background-image: url("images/Big-tree-trans1.png");
background-size: 900px 700px;
-webkit-box-shadow: 15px 15px 15px #000000 inset;
box-shadow: 15px 15px 15px #000000 inset;
-webkit-border-radius: 50%;
border-radius: 50%;
position: fixed;
.box-shad a {
    display:block;
    width:900px;
    height:700px;
#portfolio {
width: 100px;
height: 100px;
margin-top: 0px;
margin-right: 200px;
margin-left: 200px;
margin-bottom: 0px;
border-radius: 75%;
-webkit-border-radius: 75% 75%;
background: pink;
top: -300px;
position: relative;

The top:-300 is putting that div above the top of the browser viewport. Fix that and you'll see the div.

Mail: Current (modern) view too wide

If I set Mail preferences to show emails in the new or current view, I find that the resulting display (with its wide sidebands, etc.) is too wide for my monitor screen (which, however, is a quite large one), and I always have to select 'Smaller' in order to avoid having continually to slide the the whole thing left and right.
If I set Prefs.to Classic view, that solves the problem. But I prefer the modern view, so I wonder if there is a solution to this dilemma.

This had no affect on my problem. Sorry, but no help at all. I can enter safe mode with nothing checked in the dialog and the problems go away. Any further ideas?

Nested div tags "Design View" problem

I have had ongoing problems using nested div tags to layout
my page. The page displays correct in browser but does not display
properly in Dreamweaver Design View. Highlighting the CSS id in
Code View shows the correct groupings. The code also passed the
validator test.
I am fairly new at Dreamweaver so I could be missing
something basic.
Code is displayed at
http://www.mektronix-net.campusbizcenter.com/

I've not see this before, so can't say why it would be happening. Would the pc be low on resources? but then again you say it happened even after a restart of the pc.
Maybe you could try the file cache and the personal configuration folder fix to see if it fixes any issues.
http://forums.adobe.com/thread/417116#cache
PS: While I'm at it, it would be wrong for me to point out that using AP divs is not the optimum way to create a layout.... unless you know the repercussions of using them.
Here's why: (from the Dreamweaver FAQ)
http://forums.adobe.com/thread/477969

My web page centers in the design view, but not when viewed on line.

I am new to web design and of course, to this forum. I had some background in VBA and Fortran, so when the original designer left, I was the only one in the organization willing to tackle the website and try to teach myself how to make it work and keep it current. We were financially in the red at the time, so hiring outside help would have been almost impossible. We are finally breaking even now, which was our goal as a non-profit.
So I inherited the computer and the responsibility for maintaining the website at a non-profit organization for kids in Florida a couple of years ago, and I am doing pretty well with it so far, even though my depth of knowledge is very shallow. AsI said before, I am entirely self taught, mostly by the trial and error method, so please excuse what is probably a very basic question.
My website is FloridaBandTournament.com.
The site is working pretty well for my users, but from an appearance standpoint, the pages always are on the left side of the screen. I would like to center the page(s) in the screen so that it looks a little better. They are on a black background - not sure how the background got there, but it is working fine for me. When I tried to center the pages, I googled my way to the statement text-align: center, and after placing it a couple of different places in the code, it suddenly seemed to work, at least in the in Dreamweaver 8 (I also inherited the software, which is I know is old, but so am I - will be 70 soon, and do my work for free for the organization). But when I went to a couple of different browsers, it still displayed the website on the left. I tried Firefox and IE. I am at a loss as to what to do.
When I found this forum, I thought maybe somebody could help me know what to do to make this centering of the page happen in a simple way for this old geezer. I would sure appreciate it.
I do not know what I should be communicating to you, but I thought if I sent the code in the body, it might help.
The body code is as follows;
body [
    background-image: url(file:///C|/Documents and Settings/user/Application Data/Macromedia/Dreamweaver 8/configuration/ServerConnections/www/images/background.gif):
   background-color: #000000;
   margin-top: 0px;
   margin-left: 0px
   margin-bottom: 0px
   margin-right: 0px
text-align:center
None of the pages in the active website have this code yet - I have a trial page that I am testing. The trial page can be accessed from the link at the bottom of the 'links' page for 'Show Host Infoormation' (the mis-spelling is temporary and intentianal so I can find the darn test link myself when I want to).
I would be glad to provide any information that might help someone understand what I have and what I am trying to do, but again, I am self-taught so I have little understanding of the technical terms. I would sure appreciate any help. Thanks in advance.
Bob

First obviously make a back-up of the pages/s.
Go into code view in Dreamweaver and find the below html. Its near the top of the page after the css. You don't need to first table <table> </table> so you can delete that. It's the second table that we are interest in. See below I have added id="pageWrapper" to the opening <table tag.
<table width="795" border="0" cellpadding="0" cellspacing="0">

<tr>
    <td width="795" height="19" valign="top" bgcolor="#000000"> </td>
</tr>
</table>
<table id="pageWrapper" width="795" border="0" cellpadding="0" cellspacing="0">

Then add this to your css styles in the head setcion of the page.
#pageWrapper {
    margin: 0 auto;
You'll have to do this for each page of the site you want centered, which could be a pain if you have many pages.
Also your background image is linked to your local computer thats why you are not seeing it but have a black background instead:
body {
    background-image: url(file:///C|/Documents and Settings/user/Application Data/Macromedia/Dreamweaver 8/Configuration/ServerConnections/www/images/background.gif);
    background-color: #000000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
If you want the image to appear amend the link to as below:
body {
    background-image: url(images/background.gif);
    background-color: #000000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;

Div tags in design view

How is it that I can no longer control the position and size of a Div in design view? There appears to be no way to resize or move the div tag.I am using CS5

Do you mean Divs or AP Divs?

How to hide content in design view within Dreamweaver?

How can I hide content in design view within Dreamweaver?
I have a tabbed content menu that uses some javascript. Everything looks great in Live view, but when I go to design view, all the content goes way beyond the div. How can I make it to where I can hide the content in that div in design view or wrap it completely inside of there? It's really hard to explain which is why I provided some pictures!
LIVE VIEW
DESIGN VIEW
Thank you in advance for all the help!
Dalton

Humm....... you want to hide it in Design View whilst working on the rest of the site?
If that is the case set the menu container <div> to display: none; -
<div id="menu" style="display: none;">This is the content menu</div>
Then either set it to display: block; when you're ready to view it live or remove the style completely.

Design View not working with skins

Hey,
Excuses, I posted this question earlier in the "general
discussion" topic.
I'm using Adobe Flex 2. I have a pretty big project. If I
open it, design view works. If I close Flex and open the same
project again, design view wont work. There aren't any
error-messages or warnings given. I have been able to track te
problem down to graphical skins in a CSS declaration. I have to
erase them, to make Design View work. Then, I paste the code back
again. This is very inconvienent. Is this a normal problem,
inherent to how Flex works. Is there an other, easier way around?
Thanks in advance!
Knut Nidelven
Here is the code that does the damage...:
.topBar {
fontFamily: Arial;
font-style: none;
fontWeight: normal;
font-size: 12px;
upSkin: Embed('assets/button_top_up.png',
scaleGridLeft="4",scaleGridTop="4",scaleGridRight="12",scaleGridBottom="12");
overSkin: Embed('assets/button_top_over.png',
scaleGridLeft="4",scaleGridTop="4",scaleGridRight="12",scaleGridBottom="12");
downSkin: Embed('assets/button_top_selectedUp.png',
scaleGridLeft="4",scaleGridTop="4",scaleGridRight="12",scaleGridBottom="12");
selectedOverSkin: Embed('assets/button_top_selectedUp.png',
scaleGridLeft="4",scaleGridTop="4",scaleGridRight="12",scaleGridBottom="12");
selectedDownSkin: Embed('assets/button_top_selectedUp.png',
scaleGridLeft="4",scaleGridTop="4",scaleGridRight="12",scaleGridBottom="12");
selectedUpSkin: Embed('assets/button_top_selectedUp.png',
scaleGridLeft="4",scaleGridTop="4",scaleGridRight="12",scaleGridBottom="12");

VIEW | Style Rendering > Display Styles?
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
==================
"Ganda1f" <[email protected]> wrote in
message
news:f11lt2$sv9$[email protected]..
> Hi All,
>
> Design view does not render ( just plain text, no
formating ! ) in CS3.
> So I
> loaded the same file in DW8 ( installed on same machine
) & it works fine
> !
>
> Anyone have any ideas why ?
>
> html doc is lnked via this:
>
> regards, Dave P
>
>
> <style type="text/css">
> 
> </style>
>

Design View Workaround

I have discovered a way to make Design View work as expected in Flash Builder 4.6 with Flex SDK 4.9. I tried it on one of my existing projects and I can use Design View as normal, debugging tools and export to release build no problem.
The workaround is really easy to apply. But if you want to try it, please do so at your own risk.
Here's what I did:
Remove Flex SDK 4.9 from Flash Builder 4.6 (if already exists)
In the Flex SDK 4.9 folder, edit the "flex-sdk-description.xml" file, changing the "version" number from "4.9.0" to "4.6.0"
Re-add the SDK into Flash Builder
Open a project and choose to use Flex SDK 4.9
Open Design View

Wow - thanks for the quick response!
As for the column moving, I usually can do it, but I've got a fairly complex view I'm building - there are a lot of widgets in there....so posting an example will not be easy. I wasn't concerned about that one to be honest.
Thanks for fixing at least the setText([]) bug!
-Sharon

REM Font Sizes Enlarged in Design View

I've purchased DW CC, v 13.2 Build 6471. Fonts in px and em display correctly in Design view and Live Mode. However, font sizes in rem, while rendered correctly in live mode, appear to be multiplied by a factor of 10 in regular Design view. Here is a basic code example with three text sizes:
Here's what Live View renders:
But, this is what Design View shows:
Note that the html base font is set to 100%. Am I missing something else here? Is anyone able to duplicate this problem?
Regards, Chris Niestepski

Thank you, Subhadeep! Whenever I'm not imagining things, that's good news!
Now, two questions:
1) Should this be considered a "bug" in DW fork?
I believe so. The fork appears to be multiplying the rem value by a factor of 10. This throws the dimensions and alignment so much as to make Design view useless when using rem.
2) I'm not the first to use rem with DW. What are users using as a work-around?
If the user unchecks View > Display Styles, that largly goes against the purpose of Design View.
The user can also do this in the CSS:
font-size: 1rem;
font-size: 1px; /* Comment for Upload */ OR
font-size: 1rem;
font-size: 1em; /* Comment for Upload */
This lets you work while in DW but doubles the work required, especially for elastic layouts. And the idea of rem was so the user didn't have to do so many math calculations and worry about inhereitance as with em.
Any ideas?
- Chris

Design View skin resolution

Hey there,
is it possible to get custom skins to appear in design view without creating a Theme?
My ultimate goal is to improve the design-time experience for a custom component that I have. The component extends SkinnableContainer and I have a skin file to go along with it. Component and skin live in the same project as the rest of the app, but different packages. We have several views, i.e. composite components holding chunks of the app. Almost everything in my 'views' will live inside of one of these custom containers. But since the skin is not getting resolved at design-time, I see the content, but not the surrounding look and feel defined in the skin.
Everything works at run-time.
1) First try, setting the skin Class in the stylesInitialized override
     override public function stylesInitialized():void
          super.stylesInitialized();
          this.setStyle("skinClass", HeaderContainerBSkin );
2) Assigning the skinClass in a global css file:
     cc|HeaderContainerB
          skinClass: ClassReference("components.sparkSkins.HeaderContainerBSkin");
It seems that the only way I can get the skin to appear is to explicitly set the skinClass on the control instance or through a style placed directly in the view that I am working in. Is there a Global way that I am missing? is it possible to have a css file sourced prior to any design view update?
But... I can't even get a custom button skin to appear in design view.
Please help.
Thanks,
Jeff

So it sounds like there is no way for a skin to be resolved at design-time if it exists in the the same project where you are making use of the control. Unless of-course you explicitly set the skinClass on the instance of the control. So even if you were to create a custom skin for a button and set it as the default skin for all buttons, it can never be resolved at design-time.
Unless I am missing something and you can have a package within a project compiled as a SWC just-in-time for the design view to display it. Something tells me this is not possible. What about a second project that contains the skins and is in the same workspace as the main project. Is there any way to make design view happy in that scenario?
I'm getting a little frustrated with the lack of support for Spark in FB4.
Any additional thoughts on this are appreciated.

Design view becomes corrupt in Dreamweaver CC

Whenever I edit code in split view or scroll the window in design view, the design view window content becomes corrupt with page elements randomly appearing and moving on the screen.
It's only the view that's affected, the page I'm working on doesn't change, it's just the way Deamweaver displays it.
This makes design view useless for all practical purposes and must be a bug.
Has anybody else experienced the same issue?

Hi kushalgupta,
I a not sure what you ment with "reset the settings" but based on the Adobe Help file I deleted the the Dreamweaver CC folder in /Users/Your User Name/Library/Application Support/Adobe as well as the Dreamweaver preference file in
/Users/Your User Name/Library/Preferences to restore preferences in Dreamweaver CC.
Unfirtunately this didn't solf the problem for us. Maybe you ment something else with "reset the settings"?
Peter

Design view scroll problem

Good evening,
I had to add a lot of content into my main div. I added a
scroll bar and it looks good. When I view my page in design view in
Dreamweaver the content is not contained in the div but carries on
down the page. It looks fine in the browser though. Did I miss a
step so that the content stays within the div in design view?
I would also like to change the colour of the scroll bars...
is this simple to do? I looked it up on this forum and saw some
code but I am not sure where to place it in dreamweaver.
Thanks.

> Did I miss a step so that the content stays within the
div in
> design view?
Show us your page, please.
> I would also like to change the colour of the scroll
bars... is this
> simple to
> do? I looked it up on this forum and saw some code but I
am not sure where
> to
> place it in dreamweaver.
It's simple, but hardly worth the effort since it will only
appear in IE/PC.
The CSS you found would have to go either into an embedded
stylesheet in the
page, or into a linked external stylesheet file.
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
==================
"mancunian12" <[email protected]> wrote in
message
news:ek608j$1i9$[email protected]..
> Good evening,
>
> I had to add a lot of content into my main div. I added
a scroll bar and
> it
> looks good. When I view my page in design view in
Dreamweaver the content
> is
> not contained in the div but carries on down the page.
It looks fine in
> the
> browser though. Did I miss a step so that the content
stays within the div
> in
> design view?
> I would also like to change the colour of the scroll
bars... is this
> simple to
> do? I looked it up on this forum and saw some code but I
am not sure where
> to
> place it in dreamweaver.
>
> Thanks.
>

Centering div makes design view too wide

Similar Messages

Maybe you are looking for